/* Recuperación de contraseña ACR — versión 2 */
:root {
    --acr-fp-blue: #0F4672;
    --acr-fp-gold: #ffd700;
    --acr-fp-gold-hover: #e5c100;
    --acr-fp-dark-panel: #151719;
    --acr-fp-dark-input: #090a0b;
    --acr-fp-dark-text: #ffffff;
    --acr-fp-dark-muted: #aeb5ba;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.acr-forgot-page {
    min-height: 100vh;
    margin: 0;
    padding: clamp(18px, 4vw, 52px);
    display: grid;
    place-items: center;
    overflow-x: hidden;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--acr-fp-dark-text);
    background:
        radial-gradient(circle at 15% 18%, rgba(29, 106, 164, .72) 0 16%, transparent 42%),
        linear-gradient(132deg, var(--acr-fp-blue) 0%, #092b46 45%, #020304 100%);
}

.acr-forgot-page button,
.acr-forgot-page input,
.acr-forgot-page select { font: inherit; }

.acr-forgot-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.acr-forgot-shell { width: min(100%, 1120px); }

.acr-forgot-card {
    width: 100%;
    min-height: 600px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 16px;
    background: #090a0b;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
}

/* La imagen ocupa su panel, se muestra completa y nunca se deforma. */
.acr-forgot-brand-panel {
    position: relative;
    min-width: 0;
    min-height: 600px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(145deg, #0F4672 0%, #071b2b 70%, #020304 100%);
}

.acr-forgot-theme-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: cover !important;
    object-position: center center !important;
}

.acr-forgot-theme-image--light { display: none; }
html.light .acr-forgot-theme-image--dark { display: none; }
html.light .acr-forgot-theme-image--light { display: block; }

.acr-forgot-form-panel {
    min-width: 0;
    min-height: 600px;
    padding: clamp(38px, 4.2vw, 50px);
    display: flex;
    align-items: center;
    color: #fff;
    background: linear-gradient(145deg, #191b1d 0%, #101112 100%);
}

.acr-forgot-form-inner { width: min(100%, 430px); margin: 0 auto; }
.acr-forgot-heading { margin-bottom: 32px; }
.acr-forgot-heading h1 {
    margin: 0 0 14px;
    color: #fff;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.04em;
}
.acr-forgot-heading p {
    margin: 0;
    color: #aeb5ba;
    font-size: 14px;
    line-height: 1.7;
}
.acr-forgot-heading--sent { text-align: center; }
.acr-forgot-form { display: grid; gap: 22px; }
.acr-forgot-field { display: grid; gap: 9px; }
.acr-forgot-field label {
    color: #eef1f3;
    font-size: 13px;
    font-weight: 800;
}
.acr-forgot-input-wrap { position: relative; }
.acr-forgot-input-wrap > .material-symbols-outlined {
    position: absolute;
    left: 16px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #7e878e;
    font-size: 21px;
    pointer-events: none;
}
.acr-forgot-input-wrap input {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 14px 16px 14px 48px !important;
    border: 1px solid #34393d !important;
    border-radius: 999px !important;
    outline: 0 !important;
    color: #fff !important;
    background: var(--acr-fp-dark-input) !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
.acr-forgot-input-wrap input::placeholder { color: #7a8389; }
.acr-forgot-input-wrap input:focus {
    border-color: var(--acr-fp-gold) !important;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, .11) !important;
}
.acr-forgot-submit {
    width: 100%;
    min-height: 54px;
    padding: 14px 20px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #171400 !important;
    background: var(--acr-fp-gold);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(255, 215, 0, .12);
    transition: transform .2s ease, background .2s ease;
}
.acr-forgot-submit:hover { background: var(--acr-fp-gold-hover); transform: translateY(-1px); }
.acr-forgot-submit .material-symbols-outlined { font-size: 20px; }
.acr-forgot-sent-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--acr-fp-gold);
    background: rgba(255, 215, 0, .10);
    border: 1px solid rgba(255, 215, 0, .22);
}
.acr-forgot-sent-icon .material-symbols-outlined { font-size: 38px; }
.acr-forgot-footer {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid #2d3235;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.acr-forgot-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b7bec3 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.acr-forgot-back:hover { color: #fff !important; }
.acr-forgot-back .material-symbols-outlined { font-size: 19px; }
.acr-forgot-language {
    position: relative;
    min-width: 148px;
    min-height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #3a4044;
    border-radius: 999px;
    background: #2c3135;
}
.acr-forgot-language > .material-symbols-outlined:first-child,
.acr-forgot-language-arrow { color: #b8c0c5; font-size: 18px; pointer-events: none; }
.acr-forgot-language select {
    width: 100%;
    padding: 8px 24px 8px 0;
    border: 0 !important;
    outline: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    color: #f3f5f6 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.acr-forgot-language select option { color: #fff; background: #191c1e; }
.acr-forgot-language-arrow { position: absolute; right: 10px; }

/* Tema claro: blanco con desvanecido hacia #0F4672. */
html.light body.acr-forgot-page {
    color: #17222b;
    background:
        radial-gradient(circle at 86% 14%, rgba(15, 70, 114, .26) 0 13%, transparent 38%),
        linear-gradient(132deg, #ffffff 0%, #f7fbfe 48%, #d8e8f3 73%, #0F4672 145%);
}
html.light .acr-forgot-card { background: #fff; box-shadow: 0 30px 76px rgba(15, 70, 114, .22); }
html.light .acr-forgot-brand-panel { background: linear-gradient(145deg, #fff 0%, #edf6fb 66%, #0F4672 155%); }
html.light .acr-forgot-form-panel { color: #17222b; background: linear-gradient(145deg, #fff 0%, #f8fbfd 100%); }
html.light .acr-forgot-heading h1 { color: #17222b; }
html.light .acr-forgot-heading p { color: #5a6872; }
html.light .acr-forgot-field label { color: #26343d; }
html.light .acr-forgot-input-wrap input {
    color: #17222b !important;
    background: #fff !important;
    border-color: #cfd9e0 !important;
}
html.light .acr-forgot-input-wrap input::placeholder { color: #84919a; }
html.light .acr-forgot-input-wrap > .material-symbols-outlined { color: #687781; }
html.light .acr-forgot-submit { color: #fff !important; background: var(--acr-fp-blue); box-shadow: 0 14px 28px rgba(15, 70, 114, .18); }
html.light .acr-forgot-submit:hover { background: #0b385c; }
html.light .acr-forgot-sent-icon { color: var(--acr-fp-blue); background: rgba(15,70,114,.09); border-color: rgba(15,70,114,.18); }
html.light .acr-forgot-footer { border-top-color: #dce4e9; }
html.light .acr-forgot-back { color: #4e5d67 !important; }
html.light .acr-forgot-back:hover { color: var(--acr-fp-blue) !important; }
html.light .acr-forgot-language { border-color: #d3dde4; background: #edf2f5; }
html.light .acr-forgot-language select { color: #24333c !important; }
html.light .acr-forgot-language select option { color: #17222b; background: #fff; }
html.light .acr-forgot-language > .material-symbols-outlined:first-child,
html.light .acr-forgot-language-arrow { color: #61717b; }

@media (max-width: 840px) {
    body.acr-forgot-page { display: block; padding: 0; }
    .acr-forgot-shell { width: 100%; }
    .acr-forgot-card { min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; }
    .acr-forgot-brand-panel {
        min-height: 0;
        width: 100%;
        aspect-ratio: 568 / 491;
    }
    .acr-forgot-form-panel { min-height: 0; padding: 42px 24px; }
}

@media (max-width: 540px) {
    .acr-forgot-form-panel { padding: 34px 18px; }
    .acr-forgot-heading h1 { font-size: 30px; }
    .acr-forgot-footer { flex-direction: column; align-items: stretch; }
    .acr-forgot-back { justify-content: center; }
    .acr-forgot-language { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .acr-forgot-page *, .acr-forgot-page *::before, .acr-forgot-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Continuación visual: restablecimiento de contraseña. */
.acr-reset-page .acr-forgot-form { gap: 18px; }

.acr-forgot-input-wrap--password input {
    padding-right: 52px !important;
}

.acr-password-toggle {
    position: absolute;
    top: 50%;
    right: 13px;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: #98a1a7;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.acr-password-toggle:hover,
.acr-password-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    outline: none;
}

.acr-password-toggle .material-symbols-outlined { font-size: 20px; }

.acr-forgot-alert {
    margin: -10px 0 20px;
    padding: 13px 15px;
    border: 1px solid transparent;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.55;
}

.acr-forgot-alert .material-symbols-outlined {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 20px;
}

.acr-forgot-alert--error {
    color: #ffd4d4;
    border-color: rgba(255, 91, 91, .28);
    background: rgba(156, 25, 25, .18);
}

html.light .acr-password-toggle { color: #667782; }
html.light .acr-password-toggle:hover,
html.light .acr-password-toggle:focus-visible {
    color: var(--acr-fp-blue);
    background: rgba(15, 70, 114, .08);
}
html.light .acr-forgot-alert--error {
    color: #8d1f1f;
    border-color: rgba(185, 39, 39, .20);
    background: #fff1f1;
}


/* Ajuste del estado enviado: sin enlace repetido y selector centrado. */
.acr-forgot-footer--sent {
    justify-content: center;
}

.acr-forgot-language--centered {
    margin: 0 auto;
}

@media (max-width: 540px) {
    .acr-forgot-footer--sent {
        align-items: center;
    }

    .acr-forgot-footer--sent .acr-forgot-language,
    .acr-forgot-language--centered {
        width: auto;
        min-width: 170px;
    }
}


/* Ajuste solicitado: ocultar el enlace inferior y centrar el selector de idioma en todos los estados. */
.acr-forgot-footer {
    justify-content: center !important;
}

.acr-forgot-back {
    display: none !important;
}

.acr-forgot-language {
    margin: 0 auto !important;
}

@media (max-width: 540px) {
    .acr-forgot-language {
        width: auto;
        min-width: 170px;
    }
}
