/* Login: entrada animada, marca sobre marino con fondos animados y formulario en tarjeta.
   Colores: el cuadratín oficial (#3852EF, #7DB2F7, #A6D1FA) y los acentos que ya usa la intranet
   (menta, coral, amarillo, rosado). El panel de la marca es marino en los dos modos; el formulario usa tokens.
   Nunca opacity sobre el logo (Manual de Uso): se descubre con clip-path */

/* El login ocupa todo el ancho: sin el espacio reservado para la barra de desplazamiento (app.css),
   que dejaba una franja clara a la derecha sobre la entrada y la transición */
.html-acceso { scrollbar-gutter: auto; }

.acceso {
    --q-azul: #3852EF; --q-celeste: #7DB2F7; --q-cielo: #A6D1FA;
    --a-menta: #8DDDC3; --a-verde: #29A77C; --a-coral: #FFA87B; --a-amarillo: #FFC857; --a-rosa: #F27FEA;
    --marino: #12123A;
    margin: 0; min-height: 100vh; overflow: hidden; background: var(--color-fondo); color: var(--color-texto);
}
.acceso-escena { display: grid; grid-template-columns: minmax(440px, 48%) 1fr; min-height: 100vh; }

/* ---------- Marca ---------- */
.acceso-marca { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-start; padding: 48px 56px 34px; background: var(--marino); color: #fff; }
.acceso-aurora { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.acceso-aurora.a1 { width: 520px; height: 520px; left: -140px; top: -160px; background: rgba(56, 82, 239, .55); animation: acceso-deriva1 18s ease-in-out infinite alternate; }
.acceso-aurora.a2 { width: 420px; height: 420px; right: -120px; bottom: -80px; background: rgba(41, 167, 124, .35); animation: acceso-deriva2 22s ease-in-out infinite alternate; }
.acceso-aurora.a3 { width: 300px; height: 300px; left: 35%; top: 45%; background: rgba(242, 127, 234, .22); animation: acceso-deriva3 16s ease-in-out infinite alternate; }
.acceso-aurora.a4 { width: 260px; height: 260px; right: 10%; top: 8%; background: rgba(255, 168, 123, .2); animation: acceso-deriva1 20s ease-in-out infinite alternate-reverse; }
@keyframes acceso-deriva1 { to { transform: translate(80px, 60px) scale(1.1); } }
@keyframes acceso-deriva2 { to { transform: translate(-90px, -50px) scale(1.15); } }
@keyframes acceso-deriva3 { to { transform: translate(-60px, 70px) scale(.9); } }
.acceso-fondo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; transition: opacity .9s ease; }
.acceso-fondo.apagado { opacity: 0; }
.acceso-marca::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(18, 18, 58, .65)); }

.acceso-logo img { display: block; width: 240px; height: auto; }
/* El título va cerca del logo y deja libre la parte de abajo para el fondo animado */
.acceso-mensaje { margin-top: clamp(40px, 11vh, 110px); max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.acceso-antetitulo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(90deg, var(--q-cielo), var(--a-menta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acceso-lema { margin: 0; font-family: var(--fuente-titulos); font-size: 44px; line-height: 1.08; font-weight: 800; color: #fff; }
.acceso-linea { display: block; overflow: hidden; padding-bottom: 4px; }
.acceso-linea > span { display: block; }
.acceso-lema em { font-style: normal; background: linear-gradient(90deg, var(--q-celeste), var(--a-menta) 55%, var(--a-amarillo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acceso-pie { margin: auto 0 0; font-size: 12px; color: #B9C0E6; }

/* ---------- Formulario ---------- */
.acceso-panel { position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px; border-left: 1px solid var(--color-borde); }
.acceso-mancha { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }
.acceso-mancha.m1 { width: 340px; height: 340px; right: -100px; top: -100px; background: rgba(125, 178, 247, .45); }
.acceso-mancha.m2 { width: 300px; height: 300px; left: -80px; bottom: -120px; background: rgba(141, 221, 195, .4); }
.acceso-mancha.m3 { width: 200px; height: 200px; right: 18%; bottom: 10%; background: rgba(255, 200, 87, .3); }
:root[data-tema="oscuro"] .acceso-mancha { opacity: .25; }

.acceso-caja { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; padding: 38px 36px 30px; border-radius: var(--radio-tarjeta); border: 1px solid var(--color-borde); background: color-mix(in srgb, var(--color-superficie) 84%, transparent); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(21, 22, 58, .35); }
.acceso-bienvenida { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(90deg, var(--q-azul), var(--a-verde)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema="oscuro"] .acceso-bienvenida { background-image: linear-gradient(90deg, var(--q-celeste), var(--a-menta)); }
.acceso-titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 34px; line-height: 1.15; font-weight: 800; color: var(--color-titulo); }
.acceso-ayuda-corta { margin: 0 0 10px; color: var(--color-texto-suave); }
.acceso-ayuda-corta strong { color: var(--color-texto); }
.acceso-caja .error { margin: 0; }

.acceso-form { display: flex; flex-direction: column; }
.acceso-form label { margin-top: 14px; color: var(--color-texto); }
.acceso-form label:first-of-type { margin-top: 0; }
.acceso-campo { position: relative; margin-top: 6px; }
.acceso-campo > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--color-texto-suave); pointer-events: none; }
.acceso-campo input, .acceso-campo select { margin: 0; padding: .8rem .9rem .8rem 2.6rem; border-radius: 12px; border: 1px solid var(--color-borde-hover); background: var(--color-superficie); color: var(--color-texto); transition: border-color .15s, box-shadow .15s; }
.acceso-campo input::placeholder { color: var(--color-texto-suave); }
.acceso-campo input:focus-visible, .acceso-campo select:focus-visible { outline: none; border-color: var(--color-foco); box-shadow: 0 0 0 4px var(--color-acento-suave); }

/* Botón: degradado azul, brillo que cruza al pasar el mouse y barra de colores al enviar */
.acceso-entrar { position: relative; overflow: hidden; margin-top: 24px; padding: .9rem 1rem; border: 0; border-radius: 12px; background: linear-gradient(100deg, #3852EF, #4E5BF2 45%, #5B6CFF); font-size: 15px; font-weight: 700; box-shadow: 0 12px 24px -12px rgba(56, 82, 239, .8); transition: transform .15s, box-shadow .15s; }
.acceso-entrar:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(56, 82, 239, .9); }
.acceso-entrar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .6s; }
.acceso-entrar:hover::before { left: 120%; }
.acceso-entrar-barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--a-menta), var(--a-amarillo), var(--a-coral)); }
.acceso-entrar[aria-busy="true"] { cursor: progress; transform: none; }
.acceso-entrar[aria-busy="true"] .acceso-entrar-barra { width: 100%; transition: width .8s cubic-bezier(.4, 0, .2, 1); }
/* Entrar con Google: es un enlace con aspecto de botón y la «G» sobre un círculo blanco */
.acceso-google { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; text-decoration: none; }
.acceso-google:hover, .acceso-google:focus-visible { color: #fff; text-decoration: none; }
.acceso-google-g { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff; }
.acceso-google-g svg { width: 18px; height: 18px; }
/* Mantener la sesión iniciada */
.acceso-google-form { display: flex; flex-direction: column; }
.acceso-recordar { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--color-texto); font-size: 14px; cursor: pointer; }
.acceso-recordar input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-boton); cursor: pointer; }
.acceso-recordar-ayuda { margin: 4px 0 0 28px; color: var(--color-texto-suave); font-size: 12.5px; }
/* Ingreso de prueba sin Google: solo en local (LoginController::loginDev) */
.acceso-dev { gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--color-borde-hover); }
.acceso-dev label small { color: var(--color-texto-suave); font-weight: 400; }
.acceso-dev .btn-borde { align-self: flex-start; }
/* En oscuro, el azul del botón (#3852EF) da ~2:1 sobre la tarjeta: el texto y el borde pasan al acento del tema
   (~6:1). Dentro de la intranet lo resuelve funcionario.css; el login no carga ese archivo */
:root[data-tema="oscuro"] .acceso-dev .btn-borde { color: var(--color-acento); border-color: var(--color-acento); }

.acceso-caja .login-ayuda { margin: 8px 0 0; text-align: center; }
.acceso-caja .login-ayuda summary { color: var(--color-acento); }

/* Modo claro / oscuro, arriba a la derecha */
.acceso-tema { position: absolute; z-index: 1; top: 24px; right: 24px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--color-borde); border-radius: 12px; background: var(--color-superficie); color: var(--color-texto); cursor: pointer; }
.acceso-tema:hover { border-color: var(--color-borde-hover); }
.acceso-tema:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
.acceso-tema svg { width: 18px; height: 18px; }
.acceso-tema-luna { display: contents; }
.acceso-tema-sol { display: none; }
:root[data-tema="oscuro"] .acceso-tema-luna { display: none; }
:root[data-tema="oscuro"] .acceso-tema-sol { display: contents; }

/* ---------- Entrada de la escena ----------
   Sin entrada animada parte enseguida; con ella, espera a que la entrada se abra (2,3 s) */
.acceso-logo { animation: acceso-descubre .9s cubic-bezier(.2, .7, .2, 1) both; }
.acceso-antetitulo { animation: acceso-sube .7s .1s cubic-bezier(.2, .8, .2, 1) both; }
.acceso-linea > span { animation: acceso-lineas 1s .15s cubic-bezier(.16, 1, .3, 1) both; }
.acceso-linea + .acceso-linea > span { animation-delay: .25s; }
.acceso-caja { animation: acceso-sube .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
:root[data-entrada="si"] .acceso-logo { animation-delay: 2.3s; }
:root[data-entrada="si"] .acceso-antetitulo { animation-delay: 2.4s; }
:root[data-entrada="si"] .acceso-linea > span { animation-delay: 2.45s; }
:root[data-entrada="si"] .acceso-linea + .acceso-linea > span { animation-delay: 2.55s; }
:root[data-entrada="si"] .acceso-caja { animation-delay: 2.5s; }
@keyframes acceso-descubre { from { clip-path: inset(0 100% 0 0); transform: translateX(-14px); } to { clip-path: inset(0 -10px 0 0); transform: none; } }
@keyframes acceso-lineas { from { transform: translateY(110%); } to { transform: none; } }
@keyframes acceso-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 1. Entrada animada (una vez al día) ----------
   Los cuadros del cuadratín se trazan y rellenan, el logo se descubre, sube «Intranet», se llena la barra
   y la pantalla se abre hacia arriba. Todo en CSS: termina sola aunque el JavaScript no cargue */
.acceso-entrada { display: none; }
:root[data-entrada="si"] .acceso-entrada { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #22226A, var(--marino) 60%); color: #fff; clip-path: inset(0 0 0 0); animation: acceso-abre .8s 2.1s cubic-bezier(.76, 0, .24, 1) forwards; }
.acceso-entrada-saltar { position: absolute; right: 24px; top: 20px; font-size: 12px; color: #8F96C8; }
.acceso-entrada-centro { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.acceso-cuadratin { width: 132px; height: 92px; overflow: visible; }
.acceso-cuadratin rect { fill: transparent; stroke-width: 3; stroke-dasharray: 260; stroke-dashoffset: 260; animation: acceso-traza .7s cubic-bezier(.6, 0, .2, 1) forwards, acceso-rellena .4s .75s ease-out forwards; }
.acceso-cuadratin .q1 { stroke: var(--q-azul); --relleno: #3852EF; }
.acceso-cuadratin .q2 { stroke: var(--q-celeste); --relleno: #7DB2F7; animation-delay: .15s, .85s; }
.acceso-cuadratin .q3 { stroke: var(--q-cielo); --relleno: #A6D1FA; animation-delay: .3s, .95s; }
.acceso-entrada-logo img { display: block; width: 260px; height: auto; clip-path: inset(0 100% 0 0); animation: acceso-descubre .8s 1s cubic-bezier(.2, .7, .2, 1) forwards; }
.acceso-entrada-texto { margin: 0; overflow: hidden; font-family: var(--fuente-titulos); font-size: 15px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #B9C0E6; }
.acceso-entrada-texto span { display: inline-block; transform: translateY(110%); animation: acceso-lineas .7s 1.35s cubic-bezier(.16, 1, .3, 1) forwards; }
.acceso-barra { width: 180px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.acceso-barra i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--q-azul), var(--q-celeste), var(--a-menta), var(--a-amarillo), var(--a-coral)); animation: acceso-llena 1.7s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes acceso-traza { to { stroke-dashoffset: 0; } }
@keyframes acceso-rellena { to { fill: var(--relleno); } }
@keyframes acceso-llena { to { width: 100%; } }
@keyframes acceso-abre { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes acceso-abre-ya { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
/* Al saltarla (clic o tecla, js/login.js): se abre ya y la escena entra sin esperar */
:root[data-entrada="saltada"] .acceso-entrada { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--marino); clip-path: inset(0 0 0 0); animation: acceso-abre-ya .6s cubic-bezier(.76, 0, .24, 1) forwards; }
:root[data-entrada="saltada"] .acceso-entrada * { animation-play-state: paused; }
:root[data-entrada="saltada"] .acceso-logo { animation: acceso-descubre-ya .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
:root[data-entrada="saltada"] .acceso-antetitulo { animation: acceso-sube-ya .7s .35s cubic-bezier(.2, .8, .2, 1) both; }
:root[data-entrada="saltada"] .acceso-linea > span { animation: acceso-lineas-ya 1s .4s cubic-bezier(.16, 1, .3, 1) both; }
:root[data-entrada="saltada"] .acceso-linea + .acceso-linea > span { animation-delay: .5s; }
:root[data-entrada="saltada"] .acceso-caja { animation: acceso-sube-ya .8s .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes acceso-descubre-ya { from { clip-path: inset(0 100% 0 0); transform: translateX(-14px); } to { clip-path: inset(0 -10px 0 0); transform: none; } }
@keyframes acceso-lineas-ya { from { transform: translateY(110%); } to { transform: none; } }
@keyframes acceso-sube-ya { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Al enviar: un círculo marino crece desde el botón y cubre la pantalla ----------
   --x / --y = centro del botón (los pone js/login.js). El cargador aparece cuando el círculo ya cubrió.
   El cargador (partials/cargador) es el mismo de la llegada al Inicio: no salta al cambiar de página */
.acceso-transicion { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #1C1C5A, var(--marino) 65%); color: #fff; clip-path: circle(0 at var(--x, 75%) var(--y, 65%)); visibility: hidden; }
.acceso-transicion.abre { visibility: visible; clip-path: circle(150% at var(--x, 75%) var(--y, 65%)); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1); }
.acceso-transicion .cargador { opacity: 0; transform: translateY(8px); }
.acceso-transicion.abre .cargador { opacity: 1; transform: none; transition: opacity .35s .45s, transform .5s .45s cubic-bezier(.2, .8, .2, 1); }
.acceso-transicion.abre .cargador-barra i { animation: cargador-hasta-70 .8s .65s cubic-bezier(.2, .7, .2, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
    .acceso-aurora, .acceso-logo, .acceso-antetitulo, .acceso-linea > span, .acceso-caja { animation: none; }
    .acceso-fondo, .acceso-entrar, .acceso-entrar::before, .acceso-campo input, .acceso-campo select, .acceso-transicion.abre, .acceso-transicion.abre .cargador { transition: none; }
    .acceso-entrar[aria-busy="true"] .acceso-entrar-barra { transition: none; }
}

/* Pantallas angostas de escritorio: la marca arriba y compacta */
@media (max-width: 1000px) {
    .acceso { overflow: auto; }
    .html-acceso { scrollbar-gutter: stable; }
    .acceso-escena { grid-template-columns: 1fr; }
    .acceso-marca { gap: 24px; padding: 32px; }
    .acceso-lema { font-size: 30px; }
}