/* VIGMO — acceso público consistente con la aplicación */
:root {
    color-scheme: light;
    /* Neutraliza las variables oscuras heredadas por los formularios viejos. */
    --color-bg: #f4f5f7;
    --color-superficie: #ffffff;
    --color-institucional: #1a1d29;
    --color-gris-oscuro: #5b6173;
    --color-gris-faint: #9aa0b0;
    --color-linea: #e8eaf0;
    --color-success-bg: #d1fae5;
    --vigmo-auth-red: #d60b35;
    --vigmo-auth-red-dark: #b8072b;
    --vigmo-auth-ink: #111318;
    --vigmo-auth-charcoal: #30333b;
    --vigmo-auth-muted: #697180;
    --vigmo-auth-line: #e3e6eb;
    --vigmo-auth-soft: #f4f5f7;
}

html,
body {
    color-scheme: light;
}

body {
    background:
        radial-gradient(circle at 50% -8%, rgba(214,11,53,.09), transparent 32%),
        #f4f5f7;
    color: var(--vigmo-auth-ink);
}

body > .vigmo-container,
body > .recover-container,
body > .reset-container {
    padding-top: max(22px, env(safe-area-inset-top));
    padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.login-card,
.register-card,
.recover-card,
.reset-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--vigmo-auth-line);
    border-top: 5px solid var(--vigmo-auth-red);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(17,19,24,.10);
}

.login-card::before,
.register-card::before,
.recover-card::before,
.reset-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(214,11,53,.045), transparent);
}

.vigmo-auth-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 20px;
}

.vigmo-auth-logo {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
}
.vigmo-auth-logo--home {
    width: 124px;
    height: 124px;
}

.vigmo-auth-brandmark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    flex: 0 0 54px;
    border-radius: 17px;
    background: var(--vigmo-auth-red);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 10px 24px rgba(214,11,53,.24);
}

.vigmo-auth-wordmark { display: grid; text-align: left; }
.vigmo-auth-wordmark strong {
    font-family: 'Sora', sans-serif;
    color: var(--vigmo-auth-ink);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 3px;
    line-height: 1.05;
}
.vigmo-auth-wordmark small {
    margin-top: 5px;
    color: var(--vigmo-auth-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.vigmo-auth-heading { position: relative; z-index: 1; margin: 0 0 24px; text-align: center; }
.vigmo-auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--vigmo-auth-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
}
.vigmo-auth-heading h1,
.recover-card .vigmo-auth-heading h1,
.reset-card .vigmo-auth-heading h1 {
    margin: 0;
    color: var(--vigmo-auth-ink);
    font-family: 'Sora', sans-serif;
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.55px;
    line-height: 1.2;
}
.vigmo-auth-heading p,
.recover-card .vigmo-auth-heading .description,
.reset-card .vigmo-auth-heading .description {
    max-width: 330px;
    margin: 7px auto 0;
    color: var(--vigmo-auth-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.google-btn {
    min-height: 50px;
    border: 1px solid #d8dce3;
    border-radius: 13px;
    background: #fff;
    color: var(--vigmo-auth-ink);
    box-shadow: 0 2px 5px rgba(17,19,24,.03);
}
.google-btn:hover { border-color: #aeb4bf; background: #fafafa; }

.divider { margin: 22px 0; }
.divider span { color: #8a919e; font-size: 9px; font-weight: 800; }

.form-group { margin-bottom: 17px; }
.form-group label {
    margin-bottom: 7px;
    color: #434a57;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .45px;
}
.form-group input,
.password-wrapper input {
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #d8dce3;
    border-radius: 12px;
    background: var(--vigmo-auth-soft);
    color: var(--vigmo-auth-ink);
    font-size: 14px;
}

/* Chrome/Android y Safari/iOS no deben recolorear el autocompletado en oscuro. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.password-wrapper input:-webkit-autofill,
.password-wrapper input:-webkit-autofill:hover,
.password-wrapper input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vigmo-auth-ink);
    caret-color: var(--vigmo-auth-ink);
    box-shadow: 0 0 0 1000px var(--vigmo-auth-soft) inset;
    transition: background-color 9999s ease-out 0s;
}
.password-wrapper input { padding-right: 46px; }
.form-group input:focus,
.form-group input:focus-visible,
.password-wrapper input:focus {
    border: 1px solid var(--vigmo-auth-red);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(214,11,53,.09);
}
.toggle-password { right: 12px; color: #707785; }

.login-btn,
.register-btn,
.submit-btn {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 13px;
    background: var(--vigmo-auth-red);
    box-shadow: 0 8px 20px rgba(214,11,53,.20);
}
.login-btn:hover,
.register-btn:hover,
.submit-btn:hover { background: var(--vigmo-auth-red-dark); }

.checkbox-group { margin-bottom: 22px; }
.forgot-link { color: #565e6c; font-weight: 700; }
.forgot-link:hover { color: var(--vigmo-auth-red); }

.register-link,
.login-link { margin-top: 20px; }
.register-link a,
.login-link a { color: #596170; font-weight: 650; }
.register-link a:hover,
.login-link a:hover { color: var(--vigmo-auth-red); }

.badge {
    width: max-content;
    max-width: 100%;
    margin: 19px auto 0;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f1f2f4;
    color: #717887;
    font-size: 10px;
    font-weight: 750;
}
.badge i { color: var(--vigmo-auth-red); }

.error-message,
.success-message {
    border-radius: 12px;
    text-align: left;
    justify-content: flex-start;
    line-height: 1.4;
}

/* Las hojas históricas tenían un @media oscuro; esta capa compartida fija
   deliberadamente la experiencia pública de VIGMO en modo claro. */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #f4f5f7;
        --color-superficie: #ffffff;
        --color-institucional: #1a1d29;
        --color-gris-oscuro: #5b6173;
        --color-gris-faint: #9aa0b0;
        --color-linea: #e8eaf0;
        --color-success-bg: #d1fae5;
    }

    .google-btn,
    .google-btn:hover {
        border-color: #d8dce3;
        background: #ffffff;
        color: var(--vigmo-auth-ink);
    }

    .error-message { background: #fee2e2; }
    .success-message {
        border-color: #d9dee5;
        background: #ffffff;
        color: var(--vigmo-auth-ink);
        box-shadow: 0 2px 8px rgba(17,19,24,.04);
    }
    .success-message .success-title { color: var(--vigmo-auth-ink); }
}

.vigmo-auth-back {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #d8dce3;
    border-radius: 999px;
    background: #fff;
    color: var(--vigmo-auth-charcoal) !important;
    text-decoration: none;
    font-size: 12px !important;
    font-weight: 750 !important;
}
.vigmo-auth-back:hover { border-color: var(--vigmo-auth-charcoal); background: var(--vigmo-auth-charcoal); color: #fff !important; }

/* Inicio público */
.home-header {
    padding: 26px 24px 24px;
    border: 1px solid var(--vigmo-auth-line);
    border-top: 5px solid var(--vigmo-auth-red);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(17,19,24,.10);
}
.home-header .vigmo-auth-brand { justify-content: center; margin-bottom: 19px; }
.home-header .vigmo-home-copy { width: 100%; text-align: center !important; }
.home-header .vigmo-home-copy .vigmo-auth-kicker { justify-content: center; }
.vigmo-home-copy h1 {
    max-width: 340px;
    margin: 0 auto;
    color: var(--vigmo-auth-ink);
    font-family: 'Sora', sans-serif;
    font-size: clamp(27px, 7vw, 36px);
    font-weight: 780;
    letter-spacing: -1.2px;
    line-height: 1.08;
}
.vigmo-home-copy p { max-width: 320px; margin: 11px auto 0; color: var(--vigmo-auth-muted); font-size: 14px; font-weight: 500; line-height: 1.55; }
.home-header .auth-buttons { margin-top: 28px; }
.home-header .btn { min-height: 53px; border-radius: 14px; font-size: 14px; box-shadow: none; }
.home-header .btn-primary { background: var(--vigmo-auth-red); }
.home-header .btn-secondary { background: var(--vigmo-auth-charcoal); }
.bottom-bar { margin-top: 22px; }

/* El instalador conserva su lógica y toma el acabado nuevo cuando aparece. */
#pwa-install-container > div > div {
    border: 1px solid var(--vigmo-auth-line) !important;
    border-top: 5px solid var(--vigmo-auth-red) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 65px rgba(17,19,24,.22) !important;
}
#pwa-install-button { background: var(--vigmo-auth-red) !important; border-radius: 12px !important; }
#pwa-cancel-button { border-color: #d8dce3 !important; border-radius: 12px !important; color: var(--vigmo-auth-charcoal) !important; }

@media (max-width: 520px) {
    body { align-items: flex-start; padding: 0 15px; }
    body > .vigmo-container,
    body > .recover-container,
    body > .reset-container { width: 100%; }
    .login-card,
    .recover-card,
    .reset-card { padding: 25px 20px 22px; }
    .register-card { padding: 23px 18px 22px; }
    .vigmo-auth-brand { margin-bottom: 16px; }
    .vigmo-auth-brandmark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; font-size: 20px; }
    .vigmo-auth-wordmark strong { font-size: 22px; }
    .vigmo-auth-heading { margin-bottom: 19px; }
    .vigmo-auth-heading h1,
    .recover-card .vigmo-auth-heading h1,
    .reset-card .vigmo-auth-heading h1 { font-size: 20px; }
    .form-row { gap: 10px; }
    .home-header { padding: 24px 20px; }
    .home-header .vigmo-auth-brand { margin-bottom: 17px; }
    .vigmo-auth-logo { width: 82px; height: 82px; }
    .vigmo-auth-logo--home { width: 112px; height: 112px; }
    .home-header .auth-buttons { margin-top: 24px; }
}

@media (max-height: 700px) and (max-width: 520px) {
    body > .vigmo-container,
    body > .recover-container,
    body > .reset-container { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
    .login-card,
    .register-card { padding-top: 18px; padding-bottom: 18px; }
    .vigmo-auth-brand { margin-bottom: 12px; }
    .vigmo-auth-heading p { display: none; }
    .vigmo-auth-heading { margin-bottom: 15px; }
    .form-group { margin-bottom: 13px; }
}