/* ===========================================================================
   ACCESO — la puerta de GS. Scope `.acc-ui`.
   ===========================================================================
   Es la unica pantalla del sistema que NO pertenece a ningun modulo: vive en
   index.html y la maneja core/auth.js. Hasta el 03/08/2026 vivia tambien su
   estilo — tres reglas sueltas en un `<style>` del <head> (`.glass-card`,
   `.login-input`) mas clases de Tailwind repartidas entre el marcado y el
   JavaScript. Por eso esta hoja esta en `core/` y no en `modules/`: lo que
   pinta no es un modulo, es el armazon de antes de entrar.

   ── DE DONDE SALE ────────────────────────────────────────────────────────────
   Opcion B de cinco rondas de mockups (03/08/2026): la fachada. Foto de azucar
   bajo velo navy, marca y sitios institucionales a la izquierda, formulario en
   una lamina de vidrio a la derecha. Vidrio al 60 %, con profundidad puesta y
   sombra baja — «apoyada, no flotando».

   ── LO QUE NO ES DECORACION ──────────────────────────────────────────────────
   Tres decisiones de aca son de CONTRASTE, no de gusto, y estan medidas sobre
   la foto real (percentil 5 del fondo, que es el peor caso):

     · El VELO no puede sacarse. Sobre la foto pelada, el texto blanco del claim
       da 1,93:1 — desaparece. Con este velo da 7,79:1.
     · El vidrio al 60 % deja la superficie en #a2a9b0, y ahi el token `--faint`
       (#6b7787, elegido justo en el minimo que pasa AA SOBRE BLANCO) cae a
       2,37:1. Por eso los rotulos usan #303c4b, que da 4,63:1. Es un
       apartamiento y esta escrito abajo, en su regla.
     · El CAMPO se da vuelta. A 90 % de blanco el hueco se hacia con una sombra
       oscura; a 60 % la tarjeta ya es gris y esa sombra da 1,08:1 contra la
       superficie — invisible. Aca el campo es un panel de LUZ (blanco encima
       del vidrio) con canto oscuro, que es el que sostiene el 3:1.

   El login de hoy daba entre 1,93 y 4,78:1 segun que parte de la foto quedara
   atras del texto. Eso no era «un poco bajo».

   ── ORDEN DE CARGA ───────────────────────────────────────────────────────────
   Despues de tokens.css, como todas. No depende de shell-ui.css: la puerta no
   tiene rail ni barra.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1 · EL ARMAZON
   -------------------------------------------------------------------------
   `position: fixed` y no `absolute`: si el contenido no entra —1366x768 con el
   aviso de error abierto, o un telefono acostado— la pantalla scrollea y el
   fondo se queda quieto. Con `absolute` adentro de un `h-screen` el fondo se
   iba con el scroll.

   OJO con el display: la aplicacion muestra y esconde esta pantalla con
   `style.display` EN LINEA (router.js y auth.js), no con `.hidden`. El estilo
   en linea le gana a cualquier regla de aca, asi que esto convive con eso, no
   lo pelea. La regla `.hidden` de mas abajo es seguro para el dia que alguien
   cambie de tecnica: sin ella, dos clases (0,2,0) le ganarian a la una de
   Tailwind (0,1,0) y la puerta no se ocultaria nunca. Ya paso en el portal.  */
.acc-ui.acc-shell {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #001126;          /* si la foto no carga, no hay un hueco */
    /* La base tipográfica —familia, 13,5 px, interlínea y tinta— la declara
       tokens.css para los diez scopes de una. Acá no se repite: ésa fue la
       razón de que ese archivo existiera. */
}
.acc-ui.acc-shell.hidden { display: none; }

.acc-ui .acc-foto,
.acc-ui .acc-velo,
.acc-ui .acc-aro { position: fixed; pointer-events: none; }

.acc-ui .acc-foto {
    inset: 0;
    background: url('../../Imagenes/fondo-login.jpg') center / cover no-repeat;
}

/* EL VELO. Denso a la izquierda —donde va el texto blanco— y mas suelto a la
   derecha, donde el vidrio ya se defiende solo. Los valores no son de gusto:
   ver el encabezado. */
.acc-ui .acc-velo {
    inset: 0;
    background: linear-gradient(104deg,
                rgba(0, 9, 26, .86)  0%,
                rgba(0, 14, 32, .74) 30%,
                rgba(0, 18, 40, .66) 62%,
                rgba(0, 20, 44, .62) 100%);
}

/* El aro de la marca, el mismo recurso que usa el login del Sistema LP. */
.acc-ui .acc-aro {
    right: -170px; top: -130px;
    width: 440px; height: 440px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, .035);
}

/* `margin: auto` y no `align-items` solo: asi queda centrado cuando entra y
   scrollea desde arriba cuando no. */
.acc-ui .acc-cont {
    position: relative;
    width: 100%;
    max-width: 1560px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr clamp(360px, 30vw, 428px);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
    padding: clamp(30px, 5vh, 56px) clamp(26px, 5vw, 72px) clamp(66px, 8vh, 78px);
}

/* ---------------------------------------------------------------------------
   2 · LA MARCA Y LOS SITIOS INSTITUCIONALES
   -------------------------------------------------------------------------
   El claim sale de logomoyco2.jpg, donde estaba desde siempre y no lo usaba
   nadie. Los dos sitios van con el MISMO tratamiento a proposito: Azucel no es
   una nota al pie de Moyco.                                                  */
.acc-ui .acc-logo {
    display: block;
    width: clamp(160px, 14vw, 210px);
    height: auto;
    margin-bottom: clamp(16px, 2.4vh, 26px);
}
.acc-ui .acc-claim {
    margin: 0 0 clamp(20px, 3.4vh, 32px);
    max-width: 15ch;
    color: #fff;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.acc-ui .acc-sitios { display: flex; flex-wrap: wrap; gap: 14px; max-width: 560px; }
.acc-ui .acc-sitio {
    flex: 1 1 200px;
    min-width: 190px;
    display: block;
    padding: 15px 17px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
    transition: background .18s var(--curva), border-color .18s var(--curva),
                transform .18s var(--curva);
}
.acc-ui .acc-sitio:hover,
.acc-ui .acc-sitio:focus-visible {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .32);
    transform: translateY(-2px);
}
.acc-ui .acc-sitio:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.acc-ui .acc-sitio-n {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: .98rem;
    font-weight: 800;
}
.acc-ui .acc-sitio-d {
    display: block;
    margin-bottom: 11px;
    color: rgba(255, 255, 255, .52);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.acc-ui .acc-sitio-u {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}
.acc-ui .acc-sitio-u i { font-style: normal; opacity: .55; font-size: .88em; }

/* La linea de links del telefono, donde las dos tarjetas no entran. */
.acc-ui .acc-sitios-linea { display: none; }

/* ---------------------------------------------------------------------------
   3 · LA TARJETA — vidrio al 60 %, con cuerpo
   -------------------------------------------------------------------------
   La profundidad son cuatro cosas y cada una hace algo distinto:
     1 · el barrido especular: la luz entra por arriba a la izquierda;
     2 · los cantos asimetricos: arriba brilla, abajo se apaga. Eso es GROSOR;
     3 · la sombra interior de abajo: el vidrio tiene cuerpo, no es una calco;
     4 · la elipse de contacto: la pieza esta APOYADA.
   La sombra que la levanta se quedo en 38 px (no en 96) a pedido de Hernan:
   con mas, la tarjeta le ganaba a la marca, que es lo primero que hay que ver. */
.acc-ui .acc-tjw { position: relative; }
.acc-ui .acc-tjw::before {
    content: "";
    position: absolute;
    left: 9%; right: 9%; bottom: -11px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%,
                rgba(0, 6, 20, .46), rgba(0, 6, 20, 0) 74%);
}
.acc-ui .acc-tj {
    position: relative;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .60);
    background-image: linear-gradient(148deg,
                      rgba(255, 255, 255, .30) 0%,
                      rgba(255, 255, 255, .08) 32%,
                      rgba(255, 255, 255, 0)  58%);
    -webkit-backdrop-filter: blur(30px) saturate(145%);
    backdrop-filter: blur(30px) saturate(145%);
    border-top:    1px solid rgba(255, 255, 255, .80);
    border-left:   1px solid rgba(255, 255, 255, .46);
    border-right:  1px solid rgba(255, 255, 255, .20);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    box-shadow:
        0 1px 1px   rgba(0, 8, 24, .12),
        0 4px 10px  rgba(0, 8, 24, .13),
        0 14px 38px rgba(0, 8, 24, .26),
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -20px 32px -20px rgba(4, 12, 30, .40);
}
/* Sin desenfoque de fondo el vidrio dejaria la foto NITIDA atras del texto, que
   es exactamente el defecto que vinimos a arreglar. Se sube la opacidad. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .acc-ui .acc-tj { background-color: rgba(255, 255, 255, .78); }
}

/* EL `z-index: 2` ES DEL §8, y no es cosmetico: deja el reflejo del cursor por
   DEBAJO de los rotulos. El contraste de esta tarjeta esta medido pixel por
   pixel (tanda 3 del banco) y una capa de luz por encima del texto lo bajaria
   sin que ninguna tanda se entere, porque el banco mide la pantalla en reposo. */
.acc-ui .acc-cuerpo {
    position: relative;
    z-index: 2;
    padding: clamp(26px, 3.4vh, 34px) clamp(24px, 2.4vw, 34px) clamp(24px, 3vh, 30px);
}
.acc-ui .acc-eb {
    margin: 0 0 7px;
    color: var(--acc-rot);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}
.acc-ui .acc-t {
    margin: 0;
    color: #002b6b;
    font-size: 1.36rem;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.15;
}
.acc-ui .acc-s { margin: 4px 0 0; color: var(--acc-rot); font-size: .85rem; }
.acc-ui .acc-campos { margin-top: clamp(20px, 2.6vh, 26px); }

/* EL GRIS DE LOS ROTULOS — APARTAMIENTO DECLARADO.
   No es `--faint`. Sobre el vidrio al 60 % la superficie queda en #a2a9b0 y el
   token cae a 2,37:1; #303c4b da 4,63:1. El token vale lo que vale porque es el
   minimo que pasa AA SOBRE BLANCO, y aca no hay blanco. Se declara como
   variable propia del scope para que exista UN solo lugar donde cambiarlo si
   algun dia se mueve la opacidad de la tarjeta. */
.acc-ui { --acc-rot: #303c4b; }

.acc-ui .acc-fld + .acc-fld { margin-top: 18px; }
.acc-ui .acc-fld label {
    display: block;
    margin: 0 0 6px;
    color: var(--acc-rot);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
/* EL CAMPO, DADO VUELTA: panel de luz, no hueco oscuro. Ver el encabezado. */
.acc-ui .acc-fld input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(10, 25, 60, .42);
    background: rgba(255, 255, 255, .62);
    box-shadow: inset 0 1px 3px rgba(10, 25, 60, .10);
    color: #1e2733;
    font-family: inherit;
    font-size: .95rem;
    transition: background .16s var(--curva), border-color .16s var(--curva);
}
.acc-ui .acc-fld input:focus {
    background: #fff;
    border-color: #154a94;
    outline: 2px solid #154a94;
    outline-offset: 1px;
    box-shadow: none;
}
.acc-ui .acc-ayuda { margin: 7px 0 0; color: var(--acc-rot); font-size: .72rem; }

.acc-ui .acc-btn {
    width: 100%;
    margin-top: clamp(20px, 2.6vh, 26px);
    padding: 13px;
    border: 1px solid #002b6b;
    border-radius: 9px;
    background: #002b6b;
    color: #fff;
    font-family: inherit;
    font-size: .97rem;
    font-weight: 650;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 1px 2px rgba(0, 8, 24, .2), 0 5px 13px rgba(0, 20, 60, .30);
    transition: background .16s var(--curva), transform .16s var(--curva),
                box-shadow .16s var(--curva);
}
.acc-ui .acc-btn i { font-style: normal; opacity: .8; }
.acc-ui .acc-btn:hover:not(:disabled),
.acc-ui .acc-btn:focus-visible:not(:disabled) {
    background: #001a41;
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(0, 8, 24, .2), 0 9px 22px rgba(0, 20, 60, .38);
}
.acc-ui .acc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* ESPERANDO. Antes esto era una caja azul aparte, arriba del boton, que
   `auth.js` armaba escribiendo clases de Tailwind. El boton ya es el lugar
   donde uno esta mirando: dice ahi que esta pasando y se apaga. */
.acc-ui .acc-btn:disabled {
    background: #9aaac4;
    border-color: #9aaac4;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* EL AVISO VA DEBAJO DEL BOTON. Antes vivia arriba del formulario, a unos
   300 px de donde uno acaba de hacer clic. */
.acc-ui .acc-err {
    margin: 20px 0 0;
    padding: 11px 14px;
    border: 1px solid #f3c9c9;
    border-left-width: 3px;
    border-radius: 8px;
    background: rgba(253, 236, 236, .94);
    color: #c62828;
    font-size: .86rem;
}

/* EL ZOCALO SE SEPARA CON LUZ, NO CON SOMBRA — y esto lo destapó el banco.
   Nació con `rgba(10,25,60,.07)`, que es como se hace una banda al pie sobre
   una tarjeta BLANCA. Acá no funciona por dos motivos que se suman: el vidrio
   ya es gris (#a2a9b0), y justo ahí pega la sombra interior que le da grosor
   (`inset 0 -20px 32px`). Medido: el fondo caía a rgb(122,131,142) y el texto
   quedaba en 2,92:1 — abajo de AA, en el renglón que avisa que la sesión se
   cierra. Un 7 % de tinta encima de una zona ya oscurecida no separa: hunde.

   Con blanco al 38 % la banda se lee igual de separada, tapa la sombra
   interior en vez de sumarse a ella, y el renglón sube a 5,2:1. Es el mismo
   principio que ya usaban los campos: sobre vidrio se separa con LUZ. */
.acc-ui .acc-zocalo {
    position: relative;   /* §8: el reflejo del cursor va por debajo (z-index 2) */
    z-index: 2;
    margin: 0;
    padding: 13px clamp(24px, 2.4vw, 34px);
    border-top: 1px solid rgba(255, 255, 255, .42);
    border-radius: 0 0 15px 15px;
    background: rgba(255, 255, 255, .38);
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--acc-rot);
    font-size: .75rem;
}
.acc-ui .acc-zocalo svg { flex: 0 0 auto; opacity: .75; }

/* ---------------------------------------------------------------------------
   4 · LA BANDA DEL PIE
   -------------------------------------------------------------------------
   Dice de quien es el sistema. NO lleva el link al manual: una pantalla de
   ingreso no ofrece salidas. (Y ojo: sacar el link no saca el manual — la
   carpeta se publica sin reglas de acceso. Eso es de hosting, no de aca.)   */
.acc-ui .acc-banda {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 clamp(26px, 5vw, 72px);
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(0, 8, 22, .42);
    color: rgba(255, 255, 255, .5);
    font-size: .73rem;
    letter-spacing: .03em;
}

/* ---------------------------------------------------------------------------
   5 · EL TELEFONO — por donde entra el cañero
   -------------------------------------------------------------------------
   El velo se da vuelta: de horizontal a vertical, para que el logo tenga fondo
   oscuro arriba. Las dos tarjetas de sitio no entran y se derrumban a una
   linea de dos links. El renglon de ayuda SE QUEDA: el que tiene correo de
   afuera de Moyco es justamente el que entra desde el telefono.             */
@media (max-width: 860px) {
    .acc-ui .acc-velo {
        background: linear-gradient(180deg,
                    rgba(0, 9, 26, .90)  0%,
                    rgba(0, 14, 32, .78) 28%,
                    rgba(0, 20, 44, .68) 100%);
    }
    .acc-ui .acc-aro { display: none; }
    .acc-ui .acc-cont {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 440px;
        padding: 30px 20px 68px;
    }
    .acc-ui .acc-marca { text-align: center; }
    .acc-ui .acc-logo { width: 150px; margin: 0 auto 14px; }
    .acc-ui .acc-claim { max-width: 22ch; margin: 0 auto; font-size: 1.06rem; }
    .acc-ui .acc-sitios { display: none; }
    /* Debajo de la tarjeta, separada por una línea fina — no pegada al claim. */
    .acc-ui .acc-sitios-linea {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin: 4px 0 0;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, .15);
        font-size: .78rem;
    }
    .acc-ui .acc-sitios-linea a {
        color: rgba(255, 255, 255, .88);
        font-weight: 650;
        text-decoration: none;
    }
    .acc-ui .acc-sitios-linea span { color: rgba(255, 255, 255, .28); }
    /* 16 px o iOS hace zoom al enfocar el campo y la pantalla salta. */
    .acc-ui .acc-fld input { font-size: 16px; }
    .acc-ui .acc-banda { justify-content: center; padding: 0 20px; }
}

/* ---------------------------------------------------------------------------
   6 · EL AVISO DE SESION POR VENCER
   -------------------------------------------------------------------------
   Va aca y no en un modulo porque es de la misma familia que la puerta: lo
   dispara `auth.js`, aparece encima de cualquier modulo y se lleva la sesion
   si nadie contesta. Seguia en Tailwind y ademas tuteaba de España
   («¿Sigues ahi?», «se cerrara pronto») — el resto de GS vosea.

   TRAMPA §7 DEL MANUAL: el scope va en el PROPIO elemento que se oculta, asi
   que `.acc-ui.acc-modal` son DOS clases (0,2,0) y el `.hidden` de Tailwind es
   UNA (0,1,0). Sin la regla de abajo el aviso no se cierra nunca.            */
.acc-ui.acc-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 17, 38, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.acc-ui.acc-modal.hidden { display: none; }
.acc-ui .acc-modal-caja {
    width: 100%;
    max-width: 400px;
    padding: 28px 30px 26px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(10, 25, 60, .28);
    border-top: 4px solid #002b6b;
}
.acc-ui .acc-modal-t {
    margin: 0 0 6px;
    color: #002b6b;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
}
.acc-ui .acc-modal-p { margin: 0 0 20px; color: #64707f; font-size: .9rem; }
.acc-ui .acc-modal-caja .acc-btn { margin-top: 0; }

/* ---------------------------------------------------------------------------
   7 · EL MOVIMIENTO — «la fachada se arma»
   -------------------------------------------------------------------------
   Opcion A de dos propuestas (04/08/2026). El eje de la eleccion no era cuanto
   moverse sino DONDE gastarlo: A cuenta la LLEGADA —la fachada se arma en el
   orden en que se lee y la luz cruza el vidrio una vez—; B contaba el ACTO de
   entrar. Gano A. Lo que B proponia para el error y para el traspaso al
   sistema NO esta aca: si algun dia se quiere, es otra etapa.

   ── POR QUE NO HAY UNA CLASE QUE LA DISPARE ─────────────────────────────────
   La coreografia corre sola, sin `.play` ni nada que alguien tenga que poner.
   No es descuido: `handleLogout()` devuelve la puerta con
   `style.display = 'flex'` (auth.js), o sea que el elemento vuelve DESDE
   `display:none`, y al volver a renderizarse el navegador reinicia todas las
   animaciones de el y de sus hijos. La fachada se arma tambien al salir, gratis.
   Con una clase habria que sacarla y volver a ponerla desde auth.js — que es
   exactamente lo que este archivo vino a sacarle de las manos.

   ── LOS 11 PX NO CONTRADICEN EL §5 DEL MANUAL ───────────────────────────────
   «Nada se mueve mas de 2 px» es la regla de los CONTROLES: un boton que sube
   4 px al pasarle por encima se lee nervioso. Una ENTRADA es otra categoria —
   la pieza no esta reaccionando a nadie, esta llegando— y a 2 px no se ve. La
   curva sigue siendo la unica del sistema.

   ── EL ANILLO ───────────────────────────────────────────────────────────────
   Sale del `.abm-spin` del ABM, en version sobre navy. Es un anillo de trazo y
   no el icono `sync` de Material que se usa en el resto del sistema: `sync` es
   una FLECHA, y una flecha girando dice «actualizar», no «esperá».

   Y aparece a los 250 ms, no al instante. Si la respuesta llega antes no se ve
   nada, que es lo correcto: un anillo que titila 80 ms y desaparece se lee como
   un error. El boton ya dio la respuesta inmediata —se apaga y dice
   «Verificando…»—; el anillo es para la espera que de verdad se hace esperar.  */

.acc-ui .acc-foto  { animation: accFoto    1200ms var(--curva) both; }
.acc-ui .acc-velo  { animation: accAparece  420ms linear        both; }
.acc-ui .acc-logo  { animation: accSube     400ms var(--curva) both;  animation-delay:  90ms; }
.acc-ui .acc-claim { animation: accSube     400ms var(--curva) both;  animation-delay: 170ms; }
.acc-ui .acc-tjw   { animation: accSube     460ms var(--curva) both;  animation-delay: 200ms; }
.acc-ui .acc-sitio:nth-child(1)  { animation: accSube 400ms var(--curva) both; animation-delay: 250ms; }
.acc-ui .acc-sitio:nth-child(2)  { animation: accSube 400ms var(--curva) both; animation-delay: 310ms; }
.acc-ui .acc-sitios-linea        { animation: accSube 400ms var(--curva) both; animation-delay: 250ms; }
.acc-ui .acc-banda { animation: accAparece  400ms linear        both;  animation-delay: 420ms; }

@keyframes accFoto    { from { opacity: 0; transform: scale(1.045); } to { opacity: 1; transform: none; } }
@keyframes accAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes accSube    { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } }

/* EL BARRIDO DE LUZ, una sola vez, cuando la tarjeta aterriza. Es lo que
   explica el vidrio: la profundidad esta construida (§3) y hasta hoy nadie la
   veia SUCEDER.

   Se mueve el FONDO, no el elemento. Un `translateX` sobre una banda de luz
   obliga a `overflow:hidden` en la tarjeta para que no se escape, y ese
   recorte se come la sombra del boton al pasarle por encima. Corriendo
   `background-position` la pieza nunca sale de su sitio y no hace falta
   recortar nada. `pointer-events:none` porque queda por encima de los campos.

   VA LINEAL, Y ES LA UNICA EXCEPCION A LA CURVA DEL SISTEMA QUE HAY ACA.
   Nacio con `var(--curva)` y en Chrome no se veia: esa curva sale rapido y
   frena —para eso esta, un panel que se abre tiene que sentirse liviano—, asi
   que a los 460 ms de animacion el barrido ya iba por el 91 % del recorrido.
   Cruzaba la tarjeta entera en los primeros 300 ms, antes de que la tarjeta
   terminara de aterrizar, y despues no pasaba nada por 700 ms. Medido en el
   navegador, no deducido. La curva del sistema describe algo que ARRANCA y
   LLEGA; un reflejo no arranca ni llega, pasa. Por eso lineal.               */
.acc-ui .acc-tj::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 3 Y NO 1 DESDE EL §8. El barrido cruza POR ENCIMA del texto y siempre lo
       hizo: antes le alcanzaba con el 1, porque el cuerpo de la tarjeta no
       tenia z-index y perdia por orden de pintado. El §8 le da z-index 2 al
       cuerpo para que el reflejo del cursor quede DEBAJO de los rotulos, y eso
       —sin este 3— dejaba al barrido tapado por el texto. */
    z-index: 3;
    pointer-events: none;
    border-radius: 16px;
    background-image: linear-gradient(105deg,
                      rgba(255, 255, 255, 0)   36%,
                      rgba(255, 255, 255, .55) 50%,
                      rgba(255, 255, 255, 0)   64%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    animation: accBarrido 900ms linear 560ms both;
}
@keyframes accBarrido {
    from { background-position:   0% 0; opacity: 1; }
    80%  {                              opacity: 1; }
    to   { background-position: 100% 0; opacity: 0; }
}

/* EL ARO RESPIRA. Es lo unico que sigue moviendose cuando la pantalla ya se
   armo, y es lo que le saca lo de «captura de pantalla» a la espera antes de
   tipear. Ojo al costo: en el telefono el aro esta en `display:none` (§5), asi
   que esta animacion en bucle no corre justo donde la bateria importa. */
.acc-ui .acc-aro { animation: accRespira 12s ease-in-out infinite; }
@keyframes accRespira {
    0%, 100% { border-color: rgba(255, 255, 255, .030); }
    50%      { border-color: rgba(255, 255, 255, .058); }
}

/* EL ANILLO DE ESPERA. Se turna con la flecha y los turna el CSS: el estado ya
   lo dice `:disabled`, que es lo unico que `auth.js` toca. */
.acc-ui .acc-spin {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid rgba(255, 255, 255, .32);
    border-top-color: #fff;
    border-radius: 50%;
}
.acc-ui .acc-btn:disabled .acc-spin {
    display: inline-block;
    animation: accGira .7s linear infinite,
               accAparece .16s var(--curva) .25s both;
}
.acc-ui .acc-btn:disabled i { display: none; }
@keyframes accGira { to { transform: rotate(360deg); } }

/* ── prefers-reduced-motion ──────────────────────────────────────────────────
   §5 del manual: no se apaga la informacion, se apaga el MOVIMIENTO. La
   fachada aparece armada en vez de armarse, el aro deja de respirar y la luz
   no cruza. El anillo se queda —es la unica pieza de aca que ES informacion,
   no enfasis— girando mas despacio.                                          */
@media (prefers-reduced-motion: reduce) {
    /* OJO CON LOS DOS SITIOS, y esto lo destapo el banco, no la vista. Se
       escalonan con `.acc-sitio:nth-child(1|2)`, que suma una pseudo-clase:
       (0,2,1). Un `.acc-ui .acc-sitio` de aca vale (0,2,0) y PIERDE — las dos
       tarjetas seguian entrando escalonadas con el movimiento apagado. Estar
       adentro de un `@media` no agrega ni un punto de especificidad. Se apagan
       nombrandolas igual de fuerte. */
    .acc-ui .acc-foto, .acc-ui .acc-velo, .acc-ui .acc-logo, .acc-ui .acc-claim,
    .acc-ui .acc-tjw, .acc-ui .acc-sitios-linea,
    .acc-ui .acc-sitio:nth-child(1), .acc-ui .acc-sitio:nth-child(2),
    .acc-ui .acc-banda, .acc-ui .acc-aro, .acc-ui .acc-tj::after { animation: none; }
    .acc-ui .acc-tj::after { content: none; }

    /* EL GESTO DEL CURSOR NO EXISTE. Es enfasis puro: no informa nada que no
       este dicho de otra forma. Se va la lamina y se va el punto de luz que
       sigue al cursor; el canto queda —es un degrade quieto, no movimiento—. */
    .acc-ui .acc-luz,
    .acc-ui .acc-canto::before { display: none; }

    .acc-ui .acc-btn:disabled .acc-spin { animation: accGira 1.4s linear infinite; }

    .acc-ui .acc-sitio,
    .acc-ui .acc-btn { transition-duration: .01ms; }
    .acc-ui .acc-sitio:hover,
    .acc-ui .acc-sitio:focus-visible,
    .acc-ui .acc-btn:hover:not(:disabled),
    .acc-ui .acc-btn:focus-visible:not(:disabled) { transform: none; }
}

/* ---------------------------------------------------------------------------
   8 · LA LAMINA QUE GIRA — el vidrio reacciona al cursor       05/08/2026
   ---------------------------------------------------------------------------
   Elegida entre dos (la otra era un reflejo redondo que perseguia al cursor).
   Lo que se busco: la sensacion de que el cristal se mueve. Lo que NO se hizo,
   y son dos cosas:

     · NO SE REPITE EL BARRIDO. La banda que cruza al aterrizar (§7) pasa UNA
       vez y es lo que explica el vidrio. Si el cursor dispara la misma banda,
       el evento deja de ser evento. Por eso lo de aca es mucho mas ancho,
       mucho mas tenue, y no cruza: acompaña.
     · NO SE INCLINA LA TARJETA. El efecto 3D que se usa para esto mueve los
       campos justo cuando uno va a hacer clic en Usuario, y encima un
       `transform` sobre un elemento con `backdrop-filter` obliga al navegador
       a rehacer el desenfoque en cada fotograma. Aca lo unico que se mueve es
       la LUZ; la pieza no se corre un pixel.

   LA REGLA QUE ORDENA TODO ESTO, y es de costo, no de gusto: NINGUNA CAPA DE
   ACA TOCA EL `background` DE `.acc-tj`. Ese fondo es la fuente del
   `backdrop-filter: blur(30px)`, que es lo caro de esta pantalla; animarlo
   seria rehacer el desenfoque 60 veces por segundo. Las dos capas viven
   ENCIMA y se mueven con `transform`, que se compone en la GPU sin repintar.

   QUIEN DECIDE SI EL GESTO EXISTE ES ESTE ARCHIVO, no el JavaScript.
   `acceso-mov.js` sólo escribe dos numeros; el `display: none` de aca —bajo
   `reduced-motion` y bajo `(hover: none)`— es lo unico que lo apaga. Es la
   misma regla que ya tiene la puerta con `auth.js`: el JS cambia estados, el
   CSS decide como se ven.                                                    */
.acc-ui .acc-luz {
    position: absolute;
    inset: 0;
    z-index: 1;               /* debajo del cuerpo (2) y del barrido (3) */
    pointer-events: none;
    border-radius: 16px;
    overflow: hidden;         /* el recorte vive ACA y no en `.acc-tj`, que si
                                 llevara `overflow:hidden` se comeria la sombra
                                 del boton al pasarle por encima */
    opacity: 0;
    transition: opacity .30s var(--curva);
}
.acc-ui .acc-luz.on { opacity: 1; }

/* LA LAMINA. Mismo angulo que el barrido (105deg) y nada mas en comun: 220 %
   de ancho contra el 260 % de aquel, y la mitad de tinta. Se corre SOLO en X
   —la vertical se ignora a proposito—: como la pieza no se mueve pero su
   brillo si, el ojo lo lee como una lamina girando sobre su eje vertical. */
.acc-ui .acc-luz::before {
    content: "";
    position: absolute;
    top: -20%; left: -60%;
    width: 220%; height: 140%;
    background-image: linear-gradient(105deg,
                      rgba(255, 255, 255, 0)   34%,
                      rgba(255, 255, 255, .26) 50%,
                      rgba(255, 255, 255, 0)   66%);
    transform: translate3d(var(--bx, 0px), 0, 0);
    will-change: transform;
}

/* EL CANTO, UNA SOLA CAPA PARA LAS DOS COSAS. El degrade quieto va en el
   elemento y el punto que sigue al cursor en su `::before`, para que cada uno
   tenga su propia opacidad. Dos capas separadas apuntando al mismo pixel era
   lo que habia en el mockup, y no tiene sentido en produccion.

   El degrade quieto no es decorativo: la luz de esta pantalla esta declarada
   —el vidrio entra a 148deg, el barrido cruza a 105deg, los dos desde arriba a
   la izquierda— y un canto parejo era lo unico que no lo decia. */
.acc-ui .acc-canto {
    position: absolute;
    left: 0; right: 0; top: 0;
    /* EL ALTO ES EL RADIO, y esto es lo que arregla la linea que asomaba.
       Nacio con `height: 1px` y `border-radius: 16px 16px 0 0`, y el radio no
       se aplicaba: cuando los radios de un lado no entran en la caja, el
       navegador los ACHICA a todos por el mismo factor (16px de curva vertical
       adentro de 1px de alto => factor 1/16 => curva de 1px). El canto quedaba
       RECTO de punta a punta mientras la tarjeta curvaba, y en los 15px de cada
       esquina la linea sobresalia sola sobre el fondo navy: se veia una raya
       flotando arriba del cuadro. Con 15px de alto el radio entra, y el
       `overflow` recorta la linea contra la MISMA curva que la tarjeta.
       15 y no 16 porque esta caja se posiciona contra el borde INTERIOR de
       `.acc-tj`, que tiene 1px de borde: 16 - 1. */
    height: 15px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;         /* recorta el canto Y el punto que sigue al cursor */
    z-index: 4;               /* el canto es el borde: va sobre todo */
    pointer-events: none;
    /* La caja es alta pero el canto sigue siendo de 1px: el degrade se pinta
       solo en la primera fila y no se repite. */
    background-image: linear-gradient(90deg,
                      rgba(255, 255, 255, .95)   0%,
                      rgba(255, 255, 255, .62)  38%,
                      rgba(255, 255, 255, .20) 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.acc-ui .acc-canto::before {
    content: "";
    position: absolute;
    /* NO `inset: 0`: la caja de arriba ahora mide 15px y el punto se dibuja al
       50 % de su alto. Se lo clava a la primera fila, que es donde esta el
       canto. El recorte lo pone el `overflow` del padre. */
    left: 0; right: 0; top: 0;
    height: 1px;
    background-image: radial-gradient(120px 1px at var(--cx, 50%) 50%,
                      rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity .30s var(--curva);
}
.acc-ui .acc-canto.on::before { opacity: 1; }

/* Con el canto propio, el borde de arriba de la tarjeta baja de .80 a .28: si
   no, se suman dos lineas blancas y el canto queda el doble de grueso. */
.acc-ui .acc-tj { border-top-color: rgba(255, 255, 255, .28); }

/* SIN CURSOR NO HAY GESTO QUE SEGUIR, y el telefono es justo donde la bateria
   importa. El canto quieto se queda: no se mueve, no cuesta.                */
@media (hover: none), (pointer: coarse) {
    .acc-ui .acc-luz,
    .acc-ui .acc-canto::before { display: none; }
}

/* ---------------------------------------------------------------------------
   9 · EL AUTORRELLENO DEL NAVEGADOR                            05/08/2026
   ---------------------------------------------------------------------------
   Sin esto el navegador pinta el campo con SU fondo y gana: amarillo en Edge,
   celeste en Chrome. No es un caso raro — lo ve todo el que tiene el usuario
   guardado, o sea todos los que entran cada dia.

   Y NO SE SOBREESCRIBE, SE TAPA: el fondo del autorrelleno no responde a
   `background`. La unica forma es una sombra interior gigante, y de ahi sale
   la letra chica: una sombra TRANSLUCIDA deja pasar el amarillo. Para taparlo
   hay que poner un color solido, asi que el campo autorrellenado pierde la
   transparencia mientras lo este. Se eligio eso —decision de Hernan, 05/08—
   sobre la alternativa de conservar el vidrio con el amarillo asomando.
   `#dfe3e9` es lo que ese campo mide sobre el vidrio de esta tarjeta.

   VAN DOS BLOQUES SEPARADOS Y NO UNA LISTA. Si un navegador no conoce una de
   las dos pseudo-clases, invalida el SELECTOR ENTERO y se cae tambien la que
   si conoce — la regla desaparece completa y volveria el amarillo.           */
.acc-ui .acc-fld input:-webkit-autofill,
.acc-ui .acc-fld input:-webkit-autofill:hover {
    -webkit-text-fill-color: #1e2733;
    caret-color: #1e2733;
    /* La sombra de profundidad va PRIMERO: en una lista de sombras, la primera
       se pinta encima. Al reves, el relleno de 100 px la taparia. */
    box-shadow: inset 0 1px 3px rgba(10, 25, 60, .10),
                inset 0 0 0 100px #dfe3e9;
    /* El truco viejo: el navegador reaplica su color al enfocar y al tipear.
       Con la transicion en 6000 s nunca llega a destino. */
    transition: background-color 6000s 0s, color 6000s 0s;
}
.acc-ui .acc-fld input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e2733;
    box-shadow: inset 0 0 0 100px #fff;   /* enfocado, como cualquier otro campo */
}
.acc-ui .acc-fld input:autofill {
    -webkit-text-fill-color: #1e2733;
    caret-color: #1e2733;
    box-shadow: inset 0 1px 3px rgba(10, 25, 60, .10),
                inset 0 0 0 100px #dfe3e9;
    transition: background-color 6000s 0s, color 6000s 0s;
}
.acc-ui .acc-fld input:autofill:focus {
    -webkit-text-fill-color: #1e2733;
    box-shadow: inset 0 0 0 100px #fff;
}
