/* ══ Pantallas de acceso de FAS (rediseño 08/10/2026, rebranding 02/11/2026) ═
   Login, cambio de contraseña obligatorio, recuperar, restablecer, salir y
   error. Desde el 02/11/2026, el «01 · Conexión» que eligió Ana: el logo de
   Grupo Heisecke arriba, FAS · Flow Automation Suite y «Tu gestión, en un solo
   lugar.», siete fotos de Fusquim y del grupo que se cruzan y el panel en
   vidrio con la barra de luz. No nombra módulos: entran más y estas pantallas
   no tienen que cambiar.

   Liviano a propósito: CSS y SVG, sin librerías. Fotos en AVIF (WebP si el
   navegador no lo lee), 1800 px en escritorio y 960 en el celular. Con
   «reducir movimiento» todo queda quieto. Las fotos salen de la web
   corporativa; para 4K hacen falta los originales: se reemplazan en
   static/login/ con el mismo nombre, sin tocar ni esta hoja ni las páginas.
   Marcado compartido: templates/_acceso_fondo.html, _acceso_marca.html y
   _acceso_pie.html. */

* { box-sizing:border-box; margin:0; padding:0; }

@keyframes acc-subir   { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} }
@keyframes acc-trazo   { to{stroke-dashoffset:0;} }
@keyframes acc-viaja   { from{transform:translateX(-110%);} to{transform:translateX(260%);} }
@keyframes acc-enciende { from{transform:translateX(-101%);} to{transform:none;} }
@keyframes acc-brillo  { to{transform:translateX(260%) skewX(-18deg);} }
@keyframes acc-shake   { 0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);} }
@keyframes acc-aparece { 0%{opacity:0;transform:translateY(18px) scale(.95);} 60%{transform:translateY(-3px) scale(1.01);} 100%{opacity:1;transform:translateY(0) scale(1);} }

html, body { height:100%; }
body.acceso {
    font-family:'Inter','Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;
    background:#160c29; color:#fff; overflow:hidden; position:relative;
}

/* ── Fotos de Fusquim y del grupo, una tras otra (rebranding 02/11/2026) ──
   Dos capas que se cruzan cada 8 s: las pasa static/js/fas-acceso-fotos.js
   con la lista de `data-fotos`; sin él queda la primera. Cada foto, en AVIF
   (WebP si el navegador no lo lee), 1800 px y 960 en el celular. */
.acc-fotos > div {
    position:fixed; inset:0; background-size:cover; background-repeat:no-repeat; background-position:center;
    opacity:0; transition:opacity .65s ease; filter:contrast(1.025);
}
.acc-fotos > .activa { opacity:1; }
.acc-foto--calidad {
    background-image:url("../login/fusquim-calidad-1800.webp");
    background-image:image-set(url("../login/fusquim-calidad-1800.avif") type("image/avif"),
                               url("../login/fusquim-calidad-1800.webp") type("image/webp"));
    background-position:54% 43%;
}
.acc-foto--microbiologia {
    background-image:url("../login/fusquim-microbiologia-1800.webp");
    background-image:image-set(url("../login/fusquim-microbiologia-1800.avif") type("image/avif"),
                               url("../login/fusquim-microbiologia-1800.webp") type("image/webp"));
    background-position:54% 46%;
}
.acc-foto--laboratorio {
    background-image:url("../login/fusquim-laboratorio-1800.webp");
    background-image:image-set(url("../login/fusquim-laboratorio-1800.avif") type("image/avif"),
                               url("../login/fusquim-laboratorio-1800.webp") type("image/webp"));
    background-position:52% 46%;
}
.acc-foto--equipo {
    background-image:url("../login/fusquim-equipo-1800.webp");
    background-image:image-set(url("../login/fusquim-equipo-1800.avif") type("image/avif"),
                               url("../login/fusquim-equipo-1800.webp") type("image/webp"));
    background-position:51% 53%;
}
.acc-foto--heisecke-institucional {
    background-image:url("../login/heisecke-institucional-1800.webp");
    background-image:image-set(url("../login/heisecke-institucional-1800.avif") type("image/avif"),
                               url("../login/heisecke-institucional-1800.webp") type("image/webp"));
    background-position:50% 44%;
}
.acc-foto--heisecke-salud {
    background-image:url("../login/heisecke-salud-1800.webp");
    background-image:image-set(url("../login/heisecke-salud-1800.avif") type("image/avif"),
                               url("../login/heisecke-salud-1800.webp") type("image/webp"));
    background-position:50% 48%;
}
.acc-foto--heisecke-gestion {
    background-image:url("../login/heisecke-gestion-1800.webp");
    background-image:image-set(url("../login/heisecke-gestion-1800.avif") type("image/avif"),
                               url("../login/heisecke-gestion-1800.webp") type("image/webp"));
    background-position:52% 50%;
}
/* El contraste va donde hay texto: oscuro a la izquierda, la foto a la vista. */
.acc-velo {
    position:fixed; inset:0;
    background:
        linear-gradient(90deg,rgba(18,7,36,.85) 0%,rgba(25,10,46,.72) 25%,rgba(27,11,48,.36) 43%,rgba(27,11,48,.07) 61%,rgba(23,9,43,.12)),
        linear-gradient(180deg,rgba(17,7,33,.42),transparent 23%,transparent 74%,rgba(17,7,33,.8));
}

/* ── Encabezado: el logo de Grupo Heisecke (FAS va en la portada) ── */
.acc-cabecera {
    position:fixed; top:0; left:0; right:0; z-index:3;
    display:flex; align-items:center; gap:18px; padding:28px 5vw;
    animation:acc-subir .7s both;
}
.acc-cabecera img { display:block; width:auto; opacity:.95; }
.acc-marca-heisecke { height:34px; }   /* el logo oficial del grupo, en vector (03/11/2026) */

/* ── Escena: la marca y la leyenda a la izquierda, el panel a la derecha ── */
.acc-escena {
    position:relative; z-index:2; height:100%;
    display:grid; grid-template-columns:minmax(0,1fr) 384px;
    align-items:center; gap:54px; padding:96px 5vw 64px;
}
.acc-marca { display:flex; align-items:center; gap:13px; margin-bottom:26px; animation:acc-subir .8s .1s both; }
.acc-marca svg { width:43px; height:43px; flex-shrink:0; display:block; }
.acc-marca .check { stroke-dasharray:60; stroke-dashoffset:60; animation:acc-trazo .8s .6s cubic-bezier(.65,0,.35,1) forwards; }
.acc-marca strong { display:block; font-size:32px; line-height:1; letter-spacing:-1.4px; font-weight:800; color:#fff; }
.acc-marca small { display:block; margin-top:7px; font-size:10px; font-weight:500; letter-spacing:.08em; color:#c9bddc; }
.acc-hero h1 { font-size:clamp(43px,4.25vw,62px); font-weight:800; line-height:1.06; letter-spacing:-2.1px; max-width:590px;
               text-shadow:0 2px 22px rgba(10,3,23,.24); animation:acc-subir .8s .12s both; }
.acc-hero h1 em { font-style:normal; color:#F6BB54; }

/* ── Panel: vidrio, barra de luz, etiquetas que flotan ── */
.acc-panel {
    position:relative; isolation:isolate;
    padding:37px 31px 29px; border-radius:25px;
    /* Opaco y en degradé: las fotos rotan y los campos se tienen que leer
       igual sobre cualquiera. */
    background:linear-gradient(145deg,rgba(40,19,71,.86),rgba(18,8,37,.91)); border:1px solid rgba(229,204,255,.18);
    backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%);
    box-shadow:0 28px 90px rgba(8,2,21,.4), inset 0 1px 0 rgba(255,255,255,.12);
    animation:acc-subir .8s .3s both;
}
.acc-panel::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; border:1px solid rgba(255,255,255,.035); }
.acc-panel h2 { font-size:28px; font-weight:800; letter-spacing:-.5px; }
.acc-barra { position:relative; width:150px; height:2px; margin:12px 0 28px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.14); }
.acc-barra::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(167,139,250,.35),#a78bfa 45%,#f6bb54);
    animation:acc-enciende 1.1s .55s cubic-bezier(.65,0,.35,1) both;
}
/* La barra se enciende una vez al entrar y queda quieta: ya se mueven las fotos.
   Vuelve a correr solo mientras se envía (el botón con `fas-btn--loading`):
   es el mismo indicador de carga que se usa adentro de FAS. */
.acc-panel:has(.fas-btn--loading) .acc-barra::after {
    width:42%; background:linear-gradient(90deg,transparent,#a78bfa,#f6bb54,transparent);
    animation:acc-viaja 1.4s ease-in-out infinite;
}
.acc-subtitulo { font-size:13.5px; color:rgba(255,255,255,.7); line-height:1.6; margin:-14px 0 22px; }
.acc-subtitulo strong { color:#F6BB54; font-weight:700; }
.acc-politica {
    font-size:12px; line-height:1.65; color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-left:3px solid #F6BB54;
    border-radius:4px 10px 10px 4px; padding:10px 14px; margin-bottom:20px;
}
.acc-politica strong { color:#fff; }
.acc-simbolos { color:#F6BB54; white-space:nowrap; }

.alert-msg { padding:11px 14px; border-radius:10px; margin-bottom:16px; font-weight:600; font-size:13px; text-align:center; }
.alert-error   { background:rgba(239,68,68,.16); color:#fecaca; border:1px solid rgba(248,113,113,.4); animation:acc-shake .4s ease-in-out; }
.alert-success { background:rgba(34,197,94,.14); color:#bbf7d0; border:1px solid rgba(74,222,128,.35); }
/* Un dato, no un éxito ni un error («Sesión cerrada por inactividad», 26/10/2026):
   iba con el verde de éxito. Mismo tono que el aviso de la política de acceso. */
.alert-info {
    background:rgba(255,255,255,.05); color:rgba(255,255,255,.85); font-weight:500; text-align:left;
    border:1px solid rgba(255,255,255,.1); border-left:3px solid #F6BB54; border-radius:4px 10px 10px 4px;
}

.acc-campo { position:relative; margin-bottom:14px; }
.acc-campo input {
    width:100%; height:54px; padding:22px 16px 6px; border-radius:12px;
    font:inherit; font-size:15px; color:#fff; outline:none;
    background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.16);
    transition:border-color .2s, background .2s;
}
.acc-campo input.con-ojo { padding-right:48px; }
.acc-campo input:hover { border-color:rgba(255,255,255,.26); }
.acc-campo input:focus { border-color:#F6BB54; background:rgba(255,255,255,.09); }
/* El anillo de foco de todo FAS (accesibilidad) se queda; acá, en dorado. */
.acc-campo input:focus-visible { outline:2px solid rgba(246,187,84,.85) !important; outline-offset:3px; }
.acc-campo label {
    position:absolute; left:16px; top:17px; font-size:15px; color:rgba(255,255,255,.55);
    pointer-events:none; transform-origin:left top;
    transition:transform .18s ease, font-size .18s ease, color .18s ease;
}
.acc-campo input:focus + label,
.acc-campo input:not(:placeholder-shown) + label { transform:translateY(-10px); font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.7); }
.acc-campo input:focus + label { color:#F6BB54; }
/* El autocompletado del navegador pinta el campo de amarillo: se lo devuelve al vidrio.
   También con el foco (Ana, 29/10/2026: «el color es demasiado claro, no se ve
   nada»): el foco de todo FAS (`input:not(...):not(...):focus`, en
   fas-system.css) pesa más que `.acc-campo input:-webkit-autofill`, cambiaba
   la sombra que tapa el amarillo y la letra blanca quedaba sobre amarillo.
   `:autofill` va en su regla: un navegador que no lo conoce descarta la regla
   entera, y se llevaría la de -webkit-. */
.acc-campo input:-webkit-autofill { -webkit-text-fill-color:#fff; box-shadow:0 0 0 1000px rgba(40,22,80,.95) inset; caret-color:#fff; }
.acc-campo input:-webkit-autofill:focus { box-shadow:0 0 0 1000px rgba(40,22,80,.95) inset, 0 0 0 3px var(--active-bg); }
.acc-campo input:autofill { -webkit-text-fill-color:#fff; box-shadow:0 0 0 1000px rgba(40,22,80,.95) inset; caret-color:#fff; }
.acc-campo input:autofill:focus { box-shadow:0 0 0 1000px rgba(40,22,80,.95) inset, 0 0 0 3px var(--active-bg); }
.eye-btn {
    position:absolute; right:12px; top:27px; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:5px; line-height:0;
    color:rgba(255,255,255,.55); transition:color var(--t-normal);
}
.eye-btn:hover { color:#fff; }
.eye-btn svg { display:block; }

/* Medidor de seguridad de la contraseña (cambio y restablecer) */
.acc-fuerza { height:3px; border-radius:2px; margin-top:8px; background:rgba(255,255,255,.12); overflow:hidden; }
.acc-fuerza > div { height:100%; width:0; border-radius:2px; transition:width var(--t-slow), background var(--t-slow); }
.acc-fuerza-txt { font-size:11px; margin-top:5px; min-height:14px; color:rgba(255,255,255,.55); }

.caps-warn {
    display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    color:#fde68a; background:rgba(251,191,36,.14); border:1px solid rgba(251,191,36,.35);
    border-radius:8px; padding:6px 10px; margin:-4px 0 12px; animation:acc-aparece .25s ease;
}

.acc-enlace { display:block; text-align:right; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none; margin:2px 0 22px; }
.acc-enlace:hover { color:#F6BB54; }
.acc-volver { display:block; text-align:center; margin-top:20px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85); text-decoration:none; }
.acc-volver:hover { color:#F6BB54; }

.btn-submit {
    width:100%; height:52px; border:0; border-radius:12px; cursor:pointer; position:relative; overflow:hidden;
    font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.2px;
    color:#24123f; background:linear-gradient(180deg,#f8c66a,#f2ac3a);
    box-shadow:0 12px 28px rgba(242,172,58,.32);
    transition:transform .18s, box-shadow .2s;
}
/* El brillo cruza solo al pasar el mouse: en reposo, quieto. */
.btn-submit::after {
    content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:translateX(-120%) skewX(-18deg);
}
.btn-submit:hover  { transform:translateY(-1px); box-shadow:0 16px 32px rgba(242,172,58,.42); }
.btn-submit:hover::after { animation:acc-brillo .8s ease-out; }
.btn-submit:active { transform:none; }
/* El estado de envío del botón es `fas-btn--loading` de fas-system.css (un solo contrato de carga). */

/* Página de error (09/10/2026): número grande, detalle técnico desplegable
   (solo lo ve Sistemas) y dos acciones. */
.acc-error-num { font-size:64px; font-weight:900; line-height:1; color:#F6BB54; letter-spacing:-2px; margin-bottom:8px;
                 text-shadow:0 8px 30px rgba(246,187,84,.25); }
.acc-detalle-btn { background:none; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); font:inherit; font-size:12px;
                   padding:6px 14px; border-radius:999px; cursor:pointer; margin-bottom:12px; }
.acc-detalle-btn:hover { color:#fff; border-color:rgba(255,255,255,.35); }
.acc-detalle { display:none; background:rgba(0,0,0,.28); border-radius:10px; padding:12px 14px; margin-bottom:18px;
               font:12px/1.6 Consolas,monospace; color:rgba(255,255,255,.72); word-break:break-word; }
.acc-detalle.open { display:block; }
.acc-acciones { display:flex; gap:10px; margin-top:6px; }
.acc-acciones > * { flex:1; }
.acc-btn-link { display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.acc-btn-sec { display:flex; align-items:center; justify-content:center; gap:8px; height:52px; border-radius:12px;
               font-size:15px; font-weight:700; text-decoration:none; color:#fff;
               background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.acc-btn-sec:hover { background:rgba(255,255,255,.14); }

.acc-ayuda { margin-top:20px; text-align:center; font-size:12.5px; color:rgba(255,255,255,.72); }
.acc-ayuda a { color:#fff; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.acc-ayuda a:hover { color:#F6BB54; border-color:#F6BB54; }
.instalar-app[hidden] { display:none; }
.instalar-app {
    display:block; margin:16px 0 0; padding:10px 12px; border-radius:10px;
    border:1px dashed rgba(246,187,84,.35); background:rgba(246,187,84,.06);
    font-size:12px; line-height:1.5; text-align:center; color:rgba(255,255,255,.7);
}

/* ── Pie legal, en el borde de la pantalla ── */
.acc-legal {
    position:fixed; left:0; right:0; bottom:0; z-index:2;
    display:flex; justify-content:space-between; gap:12px; padding:20px 5vw;
    font-size:11.5px; color:rgba(255,255,255,.72);   /* menos, y no llega al contraste mínimo (axe) */
}
.acc-legal a, .btn-privacy { color:rgba(255,255,255,.8); text-decoration:none; }
.acc-legal a:hover, .btn-privacy:hover { color:#fff; }
.btn-privacy { background:none; border:none; cursor:pointer; font:inherit; padding:0; }
.acc-panel button:focus-visible, .acc-panel a:focus-visible, .acc-legal button:focus-visible,
.acc-legal a:focus-visible { outline:2px solid #F6BB54; outline-offset:4px; border-radius:6px; }
.acc-campo input, .btn-submit, .perfil-link { touch-action:manipulation; }

/* ── Pantalla mediana: el panel un poco más angosto ── */
@media (min-width:821px) and (max-width:1100px) {
    .acc-escena { grid-template-columns:minmax(0,1fr) 356px; gap:25px; }
    .acc-hero h1 { font-size:44px; letter-spacing:-1.4px; }
}

/* ── Celular: la foto de fondo, todo en una columna ── */
@media (max-width:820px) {
    body.acceso { overflow:auto; }
    .acc-foto--calidad {
        background-image:url("../login/fusquim-calidad-960.webp");
        background-image:image-set(url("../login/fusquim-calidad-960.avif") type("image/avif"),
                                   url("../login/fusquim-calidad-960.webp") type("image/webp"));
    }
    .acc-foto--microbiologia {
        background-image:url("../login/fusquim-microbiologia-960.webp");
        background-image:image-set(url("../login/fusquim-microbiologia-960.avif") type("image/avif"),
                                   url("../login/fusquim-microbiologia-960.webp") type("image/webp"));
    }
    .acc-foto--laboratorio {
        background-image:url("../login/fusquim-laboratorio-960.webp");
        background-image:image-set(url("../login/fusquim-laboratorio-960.avif") type("image/avif"),
                                   url("../login/fusquim-laboratorio-960.webp") type("image/webp"));
    }
    .acc-foto--equipo {
        background-image:url("../login/fusquim-equipo-960.webp");
        background-image:image-set(url("../login/fusquim-equipo-960.avif") type("image/avif"),
                                   url("../login/fusquim-equipo-960.webp") type("image/webp"));
    }
    .acc-foto--heisecke-institucional {
        background-image:url("../login/heisecke-institucional-960.webp");
        background-image:image-set(url("../login/heisecke-institucional-960.avif") type("image/avif"),
                                   url("../login/heisecke-institucional-960.webp") type("image/webp"));
    }
    .acc-foto--heisecke-salud {
        background-image:url("../login/heisecke-salud-960.webp");
        background-image:image-set(url("../login/heisecke-salud-960.avif") type("image/avif"),
                                   url("../login/heisecke-salud-960.webp") type("image/webp"));
    }
    .acc-foto--heisecke-gestion {
        background-image:url("../login/heisecke-gestion-960.webp");
        background-image:image-set(url("../login/heisecke-gestion-960.avif") type("image/avif"),
                                   url("../login/heisecke-gestion-960.webp") type("image/webp"));
    }
    .acc-velo { background:linear-gradient(180deg,rgba(17,7,33,.52),rgba(24,9,43,.59) 42%,rgba(17,7,33,.9)); }
    .acc-cabecera { position:absolute; gap:12px; padding:calc(20px + env(safe-area-inset-top)) 20px 0; }
    .acc-marca-heisecke { height:28px; }
    .acc-escena { display:block; height:auto; min-height:100dvh; padding:88px 20px 24px; }
    .acc-hero { margin-bottom:27px; }
    .acc-marca { margin-bottom:18px; gap:9px; }
    .acc-marca svg { width:29px; height:29px; }
    .acc-marca strong { font-size:23px; letter-spacing:-.8px; }
    .acc-marca small { font-size:9px; margin-top:5px; }
    .acc-hero h1 { font-size:35px; letter-spacing:-1px; max-width:100%; }
    .acc-panel { padding:28px 22px 24px; border-radius:22px; }
    .acc-panel h2 { font-size:24px; }
    .acc-barra { margin-bottom:22px; }
    .acc-campo input { font-size:16px; }   /* sin el zoom automático del iPhone */
    .acc-legal { position:static; flex-direction:column; align-items:center; text-align:center;
                 padding:6px 20px calc(22px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    body.acceso *, body.acceso *::before, body.acceso *::after { animation:none !important; transition:none !important; }
    .acc-fotos > .activa { opacity:1; }
    .acc-marca .check { stroke-dashoffset:0; }
}