/* ==========================================================================
   Pantallas de acceso (ingreso y cambio de contraseña)
   Formulario Carbon sobre blanco a la izquierda; a la derecha, en el gris 100
   del UI shell, Chile continental en tres tiras pintado con la rampa térmica.
   Usa los tokens y componentes de /style.css.
   ========================================================================== */

:root {
    --thermo-1: #2c5fd6;
    --thermo-2: #28bce0;
    --thermo-3: #b9e35a;
    --thermo-4: #fca130;
    --thermo-5: #d7261e;
    --ease-out-fuerte: cubic-bezier(0.23, 1, 0.32, 1);
}

body.acceso {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
    background: var(--background);
}

.acceso-grid {
    display: grid;
    grid-template-columns: minmax(400px, 36%) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Panel del formulario */
.acceso-panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: var(--sp-07) var(--sp-09);
    background: var(--background);
    caret-color: var(--interactive);
}

/* Luz del amanecer: entra desde el borde derecho, a la altura del horizonte de la foto, como si el sol del otro
   panel alcanzara el formulario. Es tenue para no bajar el contraste de los textos. */
.acceso-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 42% at 100% 36%, rgb(252 161 48 / 0.17), rgb(252 161 48 / 0) 72%),
        radial-gradient(ellipse 45% 30% at 100% 36%, rgb(215 38 30 / 0.06), rgb(215 38 30 / 0) 70%);
}

/* Cuadrícula de mapa (cada 48 px, la rejilla de 8 px de Carbon) que sólo se ve donde llega la luz */
.acceso-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(22 22 22 / 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgb(22 22 22 / 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: right -1px top -1px;
    -webkit-mask-image: radial-gradient(ellipse 62% 40% at 100% 36%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
    mask-image: radial-gradient(ellipse 62% 40% at 100% 36%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
}

/* Un solo momento al abrir: la luz sube, el horizonte se dibuja y el formulario llega en cascada.
   Todo parte de un estado ya legible (opacidad, 8 px y un leve desenfoque) y termina en menos de un segundo. */
@media (prefers-reduced-motion: no-preference) {
    /* Después de entrar, la luz respira despacio (9 s): el panel se siente vivo sin distraer del formulario */
    .acceso-panel::before {
        animation: amanecer 1400ms var(--ease-out-fuerte) 200ms both,
                   respirar 9s ease-in-out 1.8s infinite alternate;
    }

    .acceso-panel::after {
        animation: amanecer 1800ms var(--ease-out-fuerte) 420ms both;
    }

    .acceso-centro > * {
        animation: llegar 520ms var(--ease-out-fuerte) both;
        animation-delay: calc(var(--i, 0) * 55ms + 80ms);
    }

    .acceso-centro > :nth-child(1) { --i: 0; }
    .acceso-centro > :nth-child(2) { --i: 1; }
    .acceso-centro > :nth-child(3) { --i: 2; }
    .acceso-centro > :nth-child(4) { --i: 3; }
    .acceso-centro > :nth-child(5) { --i: 4; }

    .acceso-form::before {
        animation: horizonte 900ms var(--ease-out-fuerte) 260ms both;
    }

    .acceso-enviar i {
        transition: transform var(--duration-moderate) var(--ease-out-fuerte);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .acceso-enviar:hover:not(:disabled) i {
        transform: translateX(4px);
    }
}

/* Tras un intento fallido la página ya se vio: el error aparece sin repetir la entrada */
.sin-animacion .acceso-panel::before,
.sin-animacion .acceso-panel::after,
.sin-animacion .acceso-centro > *,
.sin-animacion .acceso-form::before {
    animation: none;
}

@keyframes amanecer {
    from { opacity: 0; transform: translateX(6%); }
}

@keyframes respirar {
    to { opacity: 0.72; transform: translateY(-1.5%); }
}

@keyframes llegar {
    from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
}

@keyframes horizonte {
    from { clip-path: inset(0 100% 0 0); }
}

.acceso-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    letter-spacing: 0.1px;
    color: var(--text-primary);
}

.acceso-marca .marca-icono {
    display: block;
    height: 28px;
    width: auto;
    flex-shrink: 0;
}

.acceso-marca strong {
    font-weight: 600;
}

.acceso-centro {
    width: 100%;
    max-width: 400px;
    margin: auto 0;
    padding: var(--sp-09) 0;
}

.acceso-titulo {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-primary);
}

.acceso-lead {
    margin-top: var(--sp-03);
    color: var(--text-secondary);
    max-width: 44ch;
}

.acceso-centro .notice {
    margin-top: var(--sp-06);
    font-size: 14px;
    line-height: 1.43;
    letter-spacing: 0.16px;
}

.acceso-form {
    position: relative;
    margin-top: var(--sp-07);
    padding-top: var(--sp-06);
    border-top: 1px solid var(--border-subtle);
}

/* El separador es un horizonte: del azul de acción al naranjo del amanecer, apagándose hacia el borde */
.acceso-form::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--interactive) 0%, var(--thermo-4) 62%, rgb(252 161 48 / 0) 100%);
}

.campo {
    margin-bottom: var(--sp-06);
}

.campo .input {
    height: 48px;
}

/* Campo enfocado: se aclara a blanco, toma un marco azul de 1 px y una sombra suave, y bajo él se dibuja el
   horizonte de izquierda a derecha. La etiqueta pasa al azul de acción para que se vea dónde se está escribiendo. */
.entrada {
    position: relative;
}

.entrada::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--interactive) 0%, var(--interactive) 30%, var(--thermo-4) 78%, var(--thermo-5) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    transition: transform var(--duration-slow) var(--ease-out-fuerte);
}

.entrada:focus-within::after {
    transform: scaleX(1);
    transition-duration: 480ms;
}

.entrada .input {
    transition: background-color var(--duration-moderate) var(--ease-standard),
                box-shadow var(--duration-slow) var(--ease-out-fuerte);
}

.entrada .input:focus {
    outline-color: transparent;
    background-color: var(--background);
    box-shadow: inset 0 0 0 1px var(--interactive), 0 8px 20px -10px rgb(15 98 254 / 0.45);
}

.campo .field-label {
    transition: color var(--duration-moderate) var(--ease-standard);
}

.campo:focus-within .field-label {
    color: var(--interactive);
}

/* Autocompletado del navegador: sin el fondo amarillo o celeste propio, con el gris o el blanco del campo */
.entrada .input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px var(--field);
    -webkit-text-fill-color: var(--text-primary);
}

.entrada .input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--background), inset 0 0 0 1px var(--interactive);
}

/* Con error manda el rojo, también con el campo enfocado */
.campo.invalido .entrada .input:focus {
    box-shadow: inset 0 0 0 2px var(--support-error);
}

.campo.invalido .entrada::after {
    background: var(--support-error);
    transform: scaleX(1);
}

.campo.invalido .field-label {
    color: var(--support-error);
}

.campo-ayuda:empty {
    display: none;
}

.campo-ayuda {
    margin-top: var(--sp-02);
}

.campo.invalido .input {
    outline-color: var(--support-error);
}

.campo.invalido .campo-ayuda {
    color: var(--support-error);
}

.campo-ayuda.mayus {
    color: #8e6a00;
}

/* Contraseña con botón para mostrarla (Carbon password input) */
.clave {
    position: relative;
}

.clave .input {
    padding-right: var(--sp-09);
}

.clave-ver {
    position: absolute;
    inset: 0 0 0 auto;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    transition: color var(--duration-fast) var(--ease-standard);
}

.clave-ver:hover {
    color: var(--text-primary);
}

.clave-ver i {
    font-size: 16px;
}

/* Casilla: el negro de Carbon para el estado marcado */
.casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-03);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.casilla input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--text-primary);
    cursor: pointer;
}

.acceso-enviar {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    margin-top: var(--sp-07);
    min-height: 64px;
    align-items: flex-start;
    padding-top: var(--sp-05);
}

/* Destello: una franja de luz cálida cruza el botón una vez al pasar el mouse, como el sol sobre el horizonte.
   Al salir vuelve sin transición, para que el siguiente paso lo repita desde la izquierda. */
.acceso-enviar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, rgb(255 255 255 / 0) 28%, rgb(255 255 255 / 0.3) 46%, rgb(255 236 210 / 0.16) 53%, rgb(255 255 255 / 0) 68%);
    transform: translateX(-110%);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .acceso-enviar:hover:not(:disabled)::after {
        transform: translateX(110%);
        transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
    }
}

/* Mientras se valida la cuenta, el destello recorre el botón en bucle: hay trabajo real en curso */
@media (prefers-reduced-motion: no-preference) {
    .acceso-enviar[aria-busy="true"]::after {
        animation: destello 1100ms var(--ease-standard) infinite;
    }
}

@keyframes destello {
    from { transform: translateX(-110%); }
    to { transform: translateX(110%); }
}

.acceso-enviar[aria-busy="true"],
.acceso-enviar[aria-busy="true"]:disabled {
    background: var(--button-primary-active);
    color: var(--text-on-color);
    cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
    .acceso-enviar[aria-busy="true"] i {
        animation: empujar 600ms var(--ease-standard) infinite alternate;
    }
}

@keyframes empujar {
    to { transform: translateX(4px); }
}

.acceso-nota,
.acceso-alterna {
    margin-top: var(--sp-06);
    font-size: 14px;
    color: var(--text-secondary);
}

.acceso-pie {
    font-size: 12px;
    letter-spacing: 0.32px;
    color: var(--text-helper);
}

/* Requisitos de la contraseña nueva, verificados mientras se escribe */
.requisitos {
    list-style: none;
    margin: calc(-1 * var(--sp-04)) 0 var(--sp-06);
    display: grid;
    gap: var(--sp-02);
    font-size: 12px;
    letter-spacing: 0.32px;
    color: var(--text-secondary);
}

.requisitos li {
    display: flex;
    align-items: center;
    gap: var(--sp-03);
}

.requisitos i {
    width: 14px;
    font-size: 12px;
    color: var(--text-helper);
}

.requisitos li.cumple {
    color: var(--text-primary);
}

.requisitos li.cumple i {
    color: var(--support-success);
}

/* Lado del mapa */
/* Fondo: la Tierra de noche con el amanecer en el horizonte. El velo oscurece hacia abajo para que la leyenda
   se lea sobre las nubes; la imagen queda anclada arriba para que el horizonte asome detrás del mapa. */
.acceso-lateral {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--shell-bg);
    color: var(--shell-text);
    padding: var(--sp-09) var(--sp-09) var(--sp-07);
    min-height: 0;
}

/* La foto va en su propia capa para poder moverla sólo con transform: se acerca muy despacio hacia el horizonte
   (40 s de ida y 40 de vuelta), como una órbita. El velo de la leyenda queda fijo encima. */
.acceso-lateral::before,
.acceso-lateral::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.acceso-lateral::before {
    background-image: url("fondo-tierra.jpg");
    background-image: image-set(url("fondo-tierra.webp") type("image/webp"), url("fondo-tierra.jpg") type("image/jpeg"));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transform-origin: 50% 36%;
}

.acceso-lateral::after {
    background: linear-gradient(180deg, rgb(22 22 22 / 0.15) 0%, rgb(22 22 22 / 0.35) 55%, rgb(22 22 22 / 0.88) 100%);
}

@media (prefers-reduced-motion: no-preference) {
    .acceso-lateral::before {
        animation: orbita 40s ease-in-out infinite alternate;
    }
}

@keyframes orbita {
    from { transform: scale(1.02); }
    to { transform: scale(1.09) translate(-1.2%, 0.8%); }
}

.acceso-figura {
    position: sticky;
    top: var(--sp-09);
    height: calc(100dvh - var(--sp-09) - var(--sp-07));
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--sp-07);
}

.acceso-mapa {
    min-height: 0;
    display: flex;
    justify-content: center;
}

.mapa-chile {
    width: 100%;
    height: 100%;
}

.mapa-chile path {
    stroke: var(--shell-bg);
    stroke-width: 0.6px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.q0 { fill: #525252; background: #525252; }
.q1 { fill: var(--thermo-1); background: var(--thermo-1); }
.q2 { fill: var(--thermo-2); background: var(--thermo-2); }
.q3 { fill: var(--thermo-3); background: var(--thermo-3); }
.q4 { fill: var(--thermo-4); background: var(--thermo-4); }
.q5 { fill: var(--thermo-5); background: var(--thermo-5); }

/* Un solo momento: cada tira se pinta de norte a sur, comuna por comuna, al abrir la página */
@media (prefers-reduced-motion: no-preference) {
    .mapa-chile path {
        animation: pintar 520ms var(--ease-out-fuerte) both;
        animation-delay: calc(var(--t) * 160ms + var(--d) * 900ms);
    }
}

/* Tras un intento fallido el mapa ya se vio: no se repite */
.sin-animacion .mapa-chile path {
    animation: none;
}

@keyframes pintar {
    from { opacity: 0; }
}

.acceso-leyenda {
    max-width: 640px;
}

.ley-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--shell-text-strong);
}

.ley-escala {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-03) var(--sp-06);
    margin-top: var(--sp-04);
    font-size: 12px;
    letter-spacing: 0.32px;
}

.ley-escala li {
    display: flex;
    align-items: center;
    gap: var(--sp-03);
    white-space: nowrap;
}

.ley-muestra {
    width: 12px;
    height: 12px;
}

.ley-fuente {
    margin-top: var(--sp-04);
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: 0.32px;
    color: #a8a8a8;
    max-width: 72ch;
}

/* Bajo 960 px el mapa pasa debajo del formulario */
@media (max-width: 960px) {
    .acceso-grid {
        grid-template-columns: 1fr;
    }

    .acceso-panel {
        padding: var(--sp-06) var(--sp-05);
        min-height: 100dvh;
    }

    .acceso-centro {
        max-width: none;
    }

    .acceso-lateral {
        padding: var(--sp-07) var(--sp-05);
    }

    /* La foto queda debajo del formulario: la luz y la cuadrícula suben desde el borde inferior */
    .acceso-panel::before {
        background:
            radial-gradient(ellipse 90% 28% at 50% 100%, rgb(252 161 48 / 0.17), rgb(252 161 48 / 0) 72%),
            radial-gradient(ellipse 60% 18% at 50% 100%, rgb(215 38 30 / 0.06), rgb(215 38 30 / 0) 70%);
    }

    .acceso-panel::after {
        background-position: center bottom;
        -webkit-mask-image: radial-gradient(ellipse 90% 26% at 50% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
        mask-image: radial-gradient(ellipse 90% 26% at 50% 100%, #000 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
    }

    .acceso-figura {
        position: static;
        height: auto;
    }

    .acceso-mapa {
        height: min(110vw, 640px);
    }
}