/*
 * SCI-branded overrides for the native Moodle signup form (/login/signup.php).
 *
 * Scoped entirely under body#page-login-signup so it never leaks into any
 * other page of the site. Loaded by auth_sociosci_before_standard_html_head()
 * in lib.php when SCRIPT_NAME ends with /login/signup.php.
 *
 * v1.3.3: selectors made more aggressive to beat the theme_lfw (mb2 light2)
 * cascade. The card look is applied to the <form> itself (the most reliable
 * anchor across themes) plus common Moodle wrappers as fallbacks. !important
 * is used sparingly on the card container properties that the parent theme
 * overrides.
 *
 * Palette matches auth/sociosci/styles.css (split login).
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

body#page-login-signup {
    --sci-rojo: #C1121F;
    --sci-rojo-d: #8E0E17;
    --sci-oro: #E3C05C;
    --sci-oro-d: #B8862B;
    --sci-tinta: #211C1B;
    --sci-gris: #6B645F;
    --sci-linea: #DCD6D0;
    --sci-placeholder: #A29A94;
    --sci-blanco: #FFFFFF;

    --sci-font: 'IBM Plex Sans', "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Soft neutral background so the white card stands out. */
    background: #F5F1EC !important;
}

/* Hide the theme's header-tools toggle chevron on this page. mb2/lfw renders
   a dropdown toggle that collapses/expands language + notifications + search
   depending on breakpoint. On the signup page it shows up as an empty chevron
   without clear purpose (no notifications for anon, language already visible),
   so we hide it here only.

   Selector maxes out specificity to beat the theme's own multi-class rules
   (.header-tools-toggle.btn.btn-secondary.btn-full.active). Duplicate rule
   without body prefix as a safety net — this CSS file only loads on
   /login/signup.php, so a bare .header-tools-toggle selector can't leak. */
.header-tools-toggle,
a.header-tools-toggle,
body#page-login-signup .header-tools-toggle,
body#page-login-signup a.header-tools-toggle,
body#page-login-signup a.header-tools-toggle.btn,
body#page-login-signup .header-tools-toggle.btn.btn-secondary,
html body#page-login-signup a.header-tools-toggle.btn.btn-secondary.btn-full {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

/* ---------- Card container ---------- *
 * Aggressive multi-selector so at least ONE of these matches whatever the
 * active theme uses for the signup content wrapper. All get the same look;
 * !important on background + border-radius wins the theme's own rules.
 */
body#page-login-signup #region-main,
body#page-login-signup [role="main"],
body#page-login-signup main.page-content,
body#page-login-signup #region-main-box,
body#page-login-signup form.mform {
    max-width: 640px !important;
    margin: 40px auto 60px !important;
    background: var(--sci-blanco) !important;
    border-radius: 14px !important;
    padding: 40px 44px 44px !important;
    box-shadow: 0 22px 48px rgba(45, 4, 8, 0.14), 0 2px 6px rgba(45, 4, 8, 0.08) !important;
    color: var(--sci-tinta);
    font-family: var(--sci-font);
    border: none !important;
}

/* When BOTH #region-main and form.mform match (nested), keep only the
   outermost card look and reset the form back to transparent. */
body#page-login-signup #region-main form.mform,
body#page-login-signup [role="main"] form.mform,
body#page-login-signup main.page-content form.mform {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
}

/* ---------- Título "Nueva cuenta" ---------- */
body#page-login-signup h1,
body#page-login-signup h2,
body#page-login-signup .h1,
body#page-login-signup .h2,
body#page-login-signup .page-header-headings h1,
body#page-login-signup #region-main h2 {
    color: var(--sci-rojo) !important;
    font-family: var(--sci-font) !important;
    font-weight: 700 !important;
    font-size: clamp(24px, 2.6vw, 32px);
    text-align: center;
    letter-spacing: -.3px;
    margin: 0 0 6px !important;
    position: relative;
    text-transform: none;
}

body#page-login-signup h1::after,
body#page-login-signup .h1::after,
body#page-login-signup .page-header-headings h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(184, 134, 43, 0),
        var(--sci-oro) 25%,
        var(--sci-oro) 75%,
        rgba(184, 134, 43, 0));
    margin: 14px auto 28px;
    border-radius: 2px;
}

/* ---------- Labels ---------- */
body#page-login-signup .fitem label,
body#page-login-signup .form-group label,
body#page-login-signup .col-form-label,
body#page-login-signup label.col-form-label {
    font-family: var(--sci-font) !important;
    font-weight: 600 !important;
    color: var(--sci-tinta) !important;
    font-size: 14px !important;
    letter-spacing: .1px;
    padding-top: 0;
    margin-bottom: 6px !important;
}

/* Ayudas (ej. "La contraseña debería tener al menos 8 caracteres...") */
body#page-login-signup .fitem .form-text,
body#page-login-signup .fitem .felement + .form-text,
body#page-login-signup .form-group .form-text,
body#page-login-signup small.text-muted,
body#page-login-signup .fdescription {
    color: var(--sci-gris) !important;
    font-size: 12.5px !important;
    line-height: 1.5;
    margin-top: 4px;
}

/* Asterisco requerido */
body#page-login-signup .text-danger,
body#page-login-signup .req,
body#page-login-signup [class*="text-danger"] {
    color: var(--sci-rojo) !important;
}

/* ---------- Inputs ---------- */
body#page-login-signup .form-control,
body#page-login-signup input[type="text"],
body#page-login-signup input[type="email"],
body#page-login-signup input[type="password"],
body#page-login-signup input[type="tel"],
body#page-login-signup select,
body#page-login-signup textarea {
    width: 100%;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-family: var(--sci-font) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: var(--sci-tinta) !important;
    background: var(--sci-blanco) !important;
    border: 1px solid var(--sci-linea) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body#page-login-signup .form-control::placeholder,
body#page-login-signup input::placeholder,
body#page-login-signup textarea::placeholder {
    color: var(--sci-placeholder) !important;
}

body#page-login-signup .form-control:hover,
body#page-login-signup input[type="text"]:hover,
body#page-login-signup input[type="email"]:hover,
body#page-login-signup input[type="password"]:hover,
body#page-login-signup select:hover,
body#page-login-signup textarea:hover {
    border-color: #C6BDB5 !important;
}

body#page-login-signup .form-control:focus,
body#page-login-signup input[type="text"]:focus,
body#page-login-signup input[type="email"]:focus,
body#page-login-signup input[type="password"]:focus,
body#page-login-signup select:focus,
body#page-login-signup textarea:focus {
    outline: none !important;
    border-color: var(--sci-rojo) !important;
    box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.13) !important;
}

body#page-login-signup .form-control.is-invalid,
body#page-login-signup input.error,
body#page-login-signup .form-control:invalid {
    border-color: var(--sci-rojo) !important;
}

body#page-login-signup .invalid-feedback,
body#page-login-signup .form-control-feedback,
body#page-login-signup .error {
    color: var(--sci-rojo) !important;
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}

/* ---------- Botones ---------- */
body#page-login-signup [type="submit"],
body#page-login-signup button.btn-primary,
body#page-login-signup input.btn-primary,
body#page-login-signup input[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px !important;
    padding: 12px 28px !important;
    font-family: var(--sci-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: var(--sci-blanco) !important;
    background: linear-gradient(180deg, var(--sci-rojo) 0%, var(--sci-rojo-d) 100%) !important;
    border: 1px solid rgba(227, 192, 92, 0.6) !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

body#page-login-signup [type="submit"]:hover,
body#page-login-signup button.btn-primary:hover,
body#page-login-signup input.btn-primary:hover,
body#page-login-signup input[type="submit"]:hover {
    background: linear-gradient(180deg, #CE1622 0%, #9C1019 100%) !important;
    box-shadow: 0 6px 18px rgba(142, 14, 23, 0.32) !important;
    color: var(--sci-blanco) !important;
}

body#page-login-signup [type="submit"]:active,
body#page-login-signup button.btn-primary:active {
    transform: translateY(1px);
}

/* Cancel button (outline) */
body#page-login-signup button.btn-secondary,
body#page-login-signup input.btn-secondary,
body#page-login-signup a.btn-secondary,
body#page-login-signup button[name="cancel"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 46px !important;
    padding: 12px 28px !important;
    font-family: var(--sci-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    text-transform: none !important;
    background: transparent !important;
    border: 1px solid var(--sci-rojo) !important;
    color: var(--sci-rojo) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body#page-login-signup button.btn-secondary:hover,
body#page-login-signup input.btn-secondary:hover,
body#page-login-signup a.btn-secondary:hover,
body#page-login-signup button[name="cancel"]:hover {
    background: rgba(193, 18, 31, 0.06) !important;
    border-color: var(--sci-rojo-d) !important;
    color: var(--sci-rojo-d) !important;
    text-decoration: none !important;
}

/* Button group at the bottom */
body#page-login-signup .form-actions,
body#page-login-signup .fitem_actionbuttons,
body#page-login-signup #fgroup_id_buttonar,
body#page-login-signup .felement.fgroup,
body#page-login-signup .fitem.femptylabel .felement.fgroup {
    margin-top: 24px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
    justify-content: center !important;
    text-align: center;
}

/* ---------- Spacing between fitem rows ---------- */
body#page-login-signup .fitem,
body#page-login-signup .form-group,
body#page-login-signup .form-group.row {
    margin-bottom: 16px !important;
}

/* Hide the ugly mform border/label column if the theme still renders it */
body#page-login-signup .fitem .col-md-3,
body#page-login-signup .fitem .col-form-label {
    text-align: left !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
}
body#page-login-signup .fitem .col-md-9,
body#page-login-signup .fitem .felement {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Focus visible */
body#page-login-signup :focus-visible {
    outline: 2px solid var(--sci-oro);
    outline-offset: 2px;
    border-radius: 4px;
}

body#page-login-signup .form-control:focus-visible,
body#page-login-signup input:focus-visible {
    outline: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    body#page-login-signup #region-main,
    body#page-login-signup [role="main"],
    body#page-login-signup main.page-content,
    body#page-login-signup #region-main-box,
    body#page-login-signup form.mform {
        margin: 20px auto 40px !important;
        padding: 28px 22px 32px !important;
        border-radius: 12px !important;
    }

    body#page-login-signup h1,
    body#page-login-signup .h1 {
        font-size: 22px !important;
    }

    body#page-login-signup [type="submit"],
    body#page-login-signup button.btn-primary,
    body#page-login-signup button.btn-secondary,
    body#page-login-signup input.btn-primary,
    body#page-login-signup input.btn-secondary {
        width: 100% !important;
        padding: 12px 20px !important;
    }

    body#page-login-signup .form-actions,
    body#page-login-signup .fitem_actionbuttons,
    body#page-login-signup #fgroup_id_buttonar {
        flex-direction: column !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body#page-login-signup *,
    body#page-login-signup *::before,
    body#page-login-signup *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}