/* ══════════════════════════════════════════════════════════════════════════════
   core/auth/lock-screen.css · PANTALLA BLOQUEADA (cara de bloqueo)

   Capa BASE + capa BLOQUEO. Se carga ANTES de refinado.css, que aporta lo
   compartido (tokens de tema --lz-*, fondo, orbe con color, botón premium,
   barra superior reloj/temas y la ceremonia de app). Aquí vive lo estructural
   (posición, rejilla, orbe) y TODO lo específico de la pantalla bloqueada
   (identidad, aura, estado, PIN, sacudida) que refinado.css no define.

   No se duplican reglas de refinado.css: cuando un selector coincide es porque
   esta hoja pone la ESTRUCTURA (posición/animación) y refinado la TINTA.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Base estructural + orbe (compartido con la cara de acceso) ─────────────── */
.lz-lock{position:fixed;inset:0;z-index:2147483000;display:none;place-items:center;overflow:hidden;background:#07080c;color:#eceef4;font-family:Inter,system-ui,sans-serif}.lz-lock.open{display:grid}.lz-lock-bg{position:absolute;inset:-20%;background:radial-gradient(circle at 18% 32%,#5b21b655,transparent 25%),radial-gradient(circle at 78% 62%,#4c1d954d,transparent 28%);filter:blur(34px);animation:lzLockDrift 18s ease-in-out infinite alternate}.lz-lock-grid{position:relative;width:min(90vw,860px);display:grid;grid-template-columns:minmax(260px,1fr) minmax(330px,390px);align-items:center;gap:clamp(58px,9vw,110px)}.lz-lock-brand{text-align:center}.lz-lock-orb{width:68px;aspect-ratio:1;margin:0 auto 24px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#f3efff,#c9b6ff 16%,#8b5cf6 46%,#6d28d9 70%,#4c1d95);box-shadow:0 0 45px #8b5cf677,inset 0 1px 2px #fff9;animation:lzLockBreathe 6s ease-in-out infinite}.lz-lock-logo{font:400 44px/1 "Space Grotesk",system-ui}.lz-lock-logo b{font-weight:600}.lz-lock-logo span{margin-left:.08em;color:#9aa0b0}.lz-lock-copy{max-width:330px;margin:17px auto 0;color:#9aa0b0;font-size:14px;line-height:1.65}.lz-lock-copy strong{display:block;color:#eceef4;font:500 18px "Space Grotesk";margin-bottom:5px}.lz-lock-form{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.lz-lock-profile{width:100%;transition:transform .7s cubic-bezier(.2,.75,.2,1)}.lz-lock-avatar{width:78px;aspect-ratio:1;margin:auto;border-radius:50%;display:grid;place-items:center;background:#ffffff08;font:600 21px "Space Grotesk"}.lz-lock-name{font:600 20px "Space Grotesk";margin-top:14px}.lz-lock-email{font-size:12px;color:#5b6070;margin-top:3px}.lz-lock-state{margin-top:18px;color:#9aa0b0;font:500 13px "Space Grotesk";letter-spacing:.075em}.lz-lock-pinpanel{width:100%;max-height:0;opacity:0;overflow:hidden;transform:translateY(14px);transition:max-height .7s cubic-bezier(.2,.75,.2,1),opacity .38s ease .08s,transform .7s cubic-bezier(.2,.75,.2,1)}.lz-lock.expanded .lz-lock-profile{transform:translateY(-36px)}.lz-lock.expanded .lz-lock-pinpanel{max-height:190px;opacity:1;transform:translateY(-8px)}.lz-lock-label{display:block;text-align:left;color:#9aa0b0;font-size:12px;margin:0 0 8px 2px}.lz-lock-pin{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.lz-lock-pin input{width:100%;aspect-ratio:1;border:1px solid #ffffff17;border-radius:12px;background:#ffffff07;color:#eceef4;text-align:center;font-size:22px;outline:0}.lz-lock-pin input:focus{border-color:#9d7df1;box-shadow:0 0 0 3px #8b5cf626}.lz-lock-msg{min-height:18px;margin-top:11px;color:#74798a;font-size:11.5px}.lz-lock-msg.error{color:#ef7181}.lz-lock-msg.ok{color:#75d7ad}.lz-lock-primary{width:100%;height:50px;margin-top:18px;border:1px solid #ffffff17;border-radius:14px;background:linear-gradient(#ffffff0f,#ffffff06);color:#eceef4;font:500 14.5px Inter;cursor:pointer;transition:.3s}.lz-lock-primary:hover{border-color:#5b6070;transform:translateY(-1px)}.lz-lock-primary:disabled{opacity:.42;cursor:not-allowed;transform:none}.lz-lock-logout{margin-top:11px;border:0;background:none;color:#5b6070;font:12px Inter;cursor:pointer}.lz-lock-logout:hover{color:#ef7181}.lz-lock-footer{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#5b6070;font-size:11.5px}.lz-lock-footer i{margin:0 7px;opacity:.45}@keyframes lzLockDrift{to{transform:translate(3%,2%) scale(1.05)}}@keyframes lzLockBreathe{50%{transform:scale(1.05);filter:brightness(1.15)}}@media(max-width:760.98px){.lz-lock-avatar{--halo:28.6px}.lz-lock{overflow:auto;padding:70px 0}.lz-lock-grid{display:flex;flex-direction:column;gap:30px}.lz-lock-form{width:min(88vw,390px);min-height:390px}.lz-lock-brand{display:none}.lz-lock.expanded .lz-lock-profile{transform:translateY(-26px)}}@media(prefers-reduced-motion:reduce){.lz-lock *{animation:none!important;transition:none!important}}

/* Login alineado al sistema + orbe vivo de LUZOhub. */
.lz-lock{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.lz-lock-orb-wrap{position:relative;width:54px;aspect-ratio:1;margin:0 auto 19px}
.lz-lock-orb-halo{position:absolute;inset:-52%;border-radius:50%;background:radial-gradient(circle,#8b5cf68c,transparent 62%);filter:blur(18px);animation:lzLockHalo 5.5s ease-in-out infinite}
.lz-lock-orb{position:absolute;inset:0;width:auto;margin:0;overflow:hidden;background:radial-gradient(circle at 36% 30%,#f3efff,#c9b6ff 16%,#8b5cf6 46%,#6d28d9 70%,#4c1d95);box-shadow:inset 0 1px 2px #fff9,inset 0 -7px 16px #2b0f5ca6,0 9px 30px -9px #7c3aed99;animation:lzLockBreathe 7s ease-in-out infinite}
.lz-lock-orb::after{content:'';position:absolute;top:14%;left:24%;width:32%;height:24%;border-radius:50%;background:radial-gradient(circle,#ffffffe6,transparent 70%);filter:blur(1.5px);animation:lzLockGlint 9s ease-in-out infinite}
.lz-lock-orb-shine{position:absolute;inset:0;border-radius:50%;overflow:hidden;opacity:.55;mix-blend-mode:screen}
.lz-lock-orb-shine::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0deg,#ffffff52 42deg,transparent 96deg);animation:lzLockSpin 6.5s linear infinite}
.lz-lock-orbit{position:absolute;inset:-20%;border-radius:50%;animation:lzLockSpin 20s linear infinite}
.lz-lock-orbit span{position:absolute;border-radius:50%;background:#d6c8ff;box-shadow:0 0 6px 1px #a78bfad9}
.lz-lock-orbit span:nth-child(1){width:3px;height:3px;top:0;left:50%}
.lz-lock-orbit span:nth-child(2){width:2.5px;height:2.5px;top:68%;left:5%;animation:lzLockTwinkle 3.2s ease-in-out infinite}
.lz-lock-orbit span:nth-child(3){width:2px;height:2px;top:62%;left:93%;animation:lzLockTwinkle 2.6s ease-in-out .6s infinite}
.lz-lock-logo{font-family:inherit;font-size:34px;letter-spacing:-.022em}
.lz-lock-copy strong,.lz-lock-avatar,.lz-lock-name,.lz-lock-state,.lz-lock-primary,.lz-lock-logout{font-family:inherit}
@keyframes lzLockHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.18)}}
@keyframes lzLockSpin{to{transform:rotate(360deg)}}
@keyframes lzLockGlint{50%{transform:translate(2.5px,-2px)}}
@keyframes lzLockTwinkle{0%,100%{opacity:.25}50%{opacity:.9}}

/* Foto real sobre el halo (AVATAR-01): iniciales de base + <img> circular encima;
   si el endpoint /api/v1/fotos da 404, el listener de captura de shell.js la retira.
   La foto cubre iniciales (z1); el tick de éxito va por encima (z2) y en «exito»
   la foto se apaga para dejar ver la marca de verificación. */
.lz-lock-avatar{position:relative;overflow:hidden}
.lz-lock-avatar .avatar-photo{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;z-index:1}
.lz-lock-avatar .tick{z-index:2}
.lz-lock-avatar .lph-dot{display:none!important}
.lz-lock.exito .lz-lock-avatar .avatar-photo{opacity:0;transition:opacity .3s ease}


/* ══════════════════════════════════════════════════════════════════════════════
   core/auth/bloqueo.css · lo propio de la PANTALLA BLOQUEADA.  (SOURCE A)
   ══════════════════════════════════════════════════════════════════════════════ */

.lz-lock-form{width:100%;max-width:320px;min-height:0;justify-self:center}

/* ── Identidad ──────────────────────────────────────────────────────────────
   Una sola progresión: avatar 64 · nombre 18 · correo 12 · estado 12.
   El avatar traía un halo morado de 48px que lo hacía flotar como pegatina; se
   cambió por hairline .5px y sombra de contacto corta, el mismo lenguaje que el
   botón.
   LEY DE DISEÑO (Cristián, 14-ago-2026): «todos los halos/avatar del sistema
   son avatares circulares... y no llevan ni anillos, ni aros». El hairline y la
   sombra de contacto eran justamente eso —un anillo suavizado—; se retiran. */
.lz-lock-avatar{
  position:relative;width:64px;
  background:linear-gradient(180deg, var(--lz-glass-1), var(--lz-glass-2));
  font-weight:500;font-size:18px;letter-spacing:.02em;color:var(--lz-ink);
}
.lz-lock-avatar .ini{transition:opacity .3s ease,transform .3s ease}

/* AURA · la señal es el color, no el movimiento.
   NO TOCADO por la ley de diseño de circulares-sin-aro (Cristián, 14-ago-2026):
   este halo CAMBIA DE COLOR según el estado de la verificación (reposo/
   verificando/éxito/fallo/bloqueado, líneas siguientes) — es información, no
   adorno, y la instrucción explícita es pararse ante eso y no decidir por
   cuenta propia cómo mostrarlo de otra forma. */
/* ── EL HALO EN REPOSO (aprobado 4-ago) ───────────────────────────────────────
   El aura ya existía pero vivía apagada: sólo encendía al verificar, acertar o
   fallar. Ahora está SIEMPRE, como la tiene el orbe de la marca.
   Va contenido a propósito: este halo se quitó una vez porque «hacía flotar el
   avatar como una pegatina» (el comentario sigue tres líneas más arriba). Un
   octavo de opacidad y sin animación en reposo — presencia, no brillo.
   El tamaño vive en `--halo` para poder moverlo en un solo sitio; en el teléfono
   crece un 10%, que es donde el avatar manda más en la pantalla. */
.lz-lock-avatar{ --halo:26px; --aura-reposo:rgba(139,92,246,.13) }
.lz-lock-avatar::after{
  content:'';position:absolute;inset:calc(var(--halo) * -1);border-radius:50%;
  background:radial-gradient(circle, var(--aura, var(--aura-reposo)), transparent 62%);
  opacity:1;transition:opacity .8s ease, background .8s ease, inset .3s ease;
  pointer-events:none;z-index:-1;
}
.lz-lock.verificando,.lz-lock.esperando{--aura:var(--lz-aura)}
.lz-lock.exito{--aura:rgba(117,215,173,.20)}
.lz-lock.fallo,.lz-lock.bloqueado{--aura:rgba(239,113,129,.19)}
.lz-lock.verificando .lz-lock-avatar::after,
.lz-lock.esperando .lz-lock-avatar::after{opacity:1;animation:none}
.lz-lock.exito .lz-lock-avatar::after,
.lz-lock.fallo .lz-lock-avatar::after,
.lz-lock.bloqueado .lz-lock-avatar::after{opacity:1}
.lz-lock.exito .lz-lock-avatar{border-color:rgba(117,215,173,.55)}
.lz-lock.fallo .lz-lock-avatar,.lz-lock.bloqueado .lz-lock-avatar{border-color:rgba(239,113,129,.45)}
@keyframes lzAura{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* El avatar confirma: las iniciales ceden el sitio a una marca de verificación. */
.lz-lock-avatar .tick{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.85);
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.lz-lock.exito .lz-lock-avatar .ini{opacity:0;transform:scale(.9)}
.lz-lock.exito .lz-lock-avatar .tick{opacity:1;transform:none}
.lz-lock-avatar .tick svg{width:26px;height:26px;fill:none;stroke:var(--lz-ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.lz-lock-name{font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.01em;margin-top:12px}
/* El correo se queda SIEMPRE: en un equipo bloqueado es el único indicativo
   corporativo visible. No repite al nombre; dice a qué organización pertenece. */
.lz-lock-email{font-size:12px;color:var(--lz-ink-3);margin-top:3px}

/* Estado: SIN caja. La señal la da el punto —color y halo—, y el aire hace de
   contenedor. */
.lz-lock-state{
  display:inline-flex;align-items:center;gap:8px;margin:13px auto 0;padding:0;
  color:var(--lz-ink-2);font-weight:500;font-size:12px;letter-spacing:.01em;
  text-transform:none;min-height:17px;transition:color .25s;
}
.lz-lock-state::before{
  content:'';width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--lz-ink-3);box-shadow:0 0 0 3.5px var(--lz-line-suave);
  transition:background .25s, box-shadow .25s;
}
.lz-lock.verificando .lz-lock-state::before,
.lz-lock.esperando .lz-lock-state::before{
  background:#c4b5fd;box-shadow:0 0 0 3.5px rgba(139,92,246,.20);
  animation:lzLatido 1.5s ease-in-out infinite;
}
.lz-lock-state.ok{color:var(--lz-ok)}
.lz-lock-state.ok::before{background:var(--lz-ok-fuerte);box-shadow:0 0 0 3.5px rgba(117,215,173,.20)}
.lz-lock-state.error{color:var(--lz-err-suave)}
.lz-lock-state.error::before{background:var(--lz-err);box-shadow:0 0 0 3.5px rgba(239,113,129,.20)}
@keyframes lzLatido{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Acceso: aparece con la presencia ──────────────────────────────────────── */
.lz-acceso{
  width:100%;max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
  transition:max-height .5s cubic-bezier(.2,.75,.2,1), opacity .32s ease, transform .5s cubic-bezier(.2,.75,.2,1);
}
.lz-lock.despierta:not(.sin-passkey) .lz-acceso{max-height:104px;opacity:1;transform:none}
/* Con el enlace «Usar PIN» debajo del botón biométrico, el acceso necesita algo
   más de alto para no recortar el enlace. */
.lz-lock.despierta.ofrece-pin:not(.sin-passkey) .lz-acceso{max-height:150px}
/* ── SOLAPE DEL PIN SOBRE EL BOTÓN · el acceso se repliega al abrir el PIN ──── */
.lz-lock.despierta.expanded .lz-acceso,
.lz-lock.expanded:not(.sin-passkey) .lz-acceso{max-height:0;opacity:0;margin:0;pointer-events:none}
/* ── EL HUECO QUE DEJABA EL BOTÓN Y EMPUJABA EL PIN AL FONDO ────────────────────
   Las dos reglas de arriba pesan (0,4,0), y la de `max-height:150px` de unas
   líneas más arriba —`.lz-lock.despierta.ofrece-pin:not(.sin-passkey)
   .lz-acceso`— pesa (0,5,0). `ofrece-pin` es EXACTAMENTE la clase que está puesta
   cuando se ofrece el enlace «Usar PIN» bajo el botón biométrico, o sea el caso
   normal de quien tiene los dos factores. Resultado: al abrir el PIN el botón se
   volvía invisible pero SEGUÍA reservando sus 150px, y las casillas quedaban
   empujadas al fondo de la pantalla. Es lo que se reportó, y pasa igual en
   escritorio y en teléfono porque la especificidad no depende del ancho.
   No se toca la regla de 150px —que es la correcta mientras el PIN está
   cerrado—: se le añade la variante con `ofrece-pin` para que al abrirlo la que
   mande sea la del repliegue. */
.lz-lock.despierta.ofrece-pin.expanded .lz-acceso{max-height:0;opacity:0;margin:0;pointer-events:none}
.lz-lock.expanded .lz-lock-profile{transform:none}

/* El panel abierto se declara AQUÍ para que mande sobre el PIN sin ambigüedad. */
.lz-lock-pinpanel{width:100%;max-height:0;opacity:0;overflow:hidden;transform:none;
  transition:max-height .55s cubic-bezier(.2,.75,.2,1), opacity .3s ease}
.lz-lock.expanded .lz-lock-pinpanel{max-height:220px;opacity:1;transform:none}
.lz-lock-primary{margin-top:18px;height:46px}
/* El icono trae SU PROPIA pintura (Touch ID/Windows Hello por relleno, Face ID
   por trazo). Solo se les fija tamaño. */
.lz-lock-primary svg{width:18px;height:18px;flex:0 0 auto}
/* PassKey esperando al dispositivo: late sin cambiar de tamaño y deja de aceptar
   clics. */
@keyframes lzLatir{0%,100%{border-color:rgba(157,125,241,.30)}50%{border-color:rgba(157,125,241,.72)}}
.lz-lock.esperando .lz-lock-primary{animation:lzLatir 1.9s ease-in-out infinite;pointer-events:none}
.lz-lock.esperando .lz-lock-pin{display:none}

/* Enlace discreto «Usar PIN» bajo el botón de PassKey (decisión de producto).
   Vive DENTRO de .lz-acceso, así se repliega con el botón biométrico al abrir el
   PIN. Se muestra solo cuando hay PassKey ofrecida Y el usuario tiene PIN. */
.lz-lock-usepin{display:block;width:100%;margin-top:10px;border:0;background:none;
  color:var(--lz-ink-3);font:inherit;font-size:11.5px;cursor:pointer;transition:color .18s ease}
.lz-lock-usepin:hover{color:var(--lz-ink)}
.lz-lock-usepin[hidden]{display:none}

/* ── PIN ────────────────────────────────────────────────────────────────────
   Casillas 40×46, hairline .5px, radio 10. Agrupadas 3 + 3 con un filete. */
.lz-lock-pinpanel{padding:4px 0 2px}
.lz-lock.expanded .lz-lock-pinpanel{max-height:240px}
.lz-lock-pin{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 4px}
.lz-lock-pin input{
  box-sizing:border-box;width:40px;height:46px;min-width:0;
  border:.5px solid var(--lz-line);border-radius:10px;
  background:linear-gradient(180deg, var(--lz-campo), var(--lz-campo-2));
  box-shadow:inset 0 .5px 0 var(--lz-specular);
  color:var(--lz-ink);text-align:center;font-size:18px;font-weight:500;outline:0;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.lz-lock-pin input:focus{
  border-color:rgba(157,125,241,.75);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.10), 0 0 0 3px rgba(139,92,246,.16);
}
.lz-lock-pin input.lleno{border-color:rgba(167,139,250,.45);background:linear-gradient(180deg, rgba(167,139,250,.16), rgba(76,29,149,.10))}
.lz-lock.verificando .lz-lock-pin input{border-color:rgba(167,139,250,.42)}
.lz-pin-sep{width:10px;height:1px;background:var(--lz-line);margin:0 5px;flex:0 0 auto}
.lz-lock-pin.error input{border-color:rgba(239,113,129,.55)}

/* ── Escala de mano ─────────────────────────────────────────────────────────*/
@media (max-width:760.98px){
  .lz-lock-avatar{width:72px;font-size:20px}
  .lz-lock-avatar::after{inset:-34px}
  .lz-lock-avatar .tick svg{width:30px;height:30px}
  .lz-lock-name{font-size:16px;margin-top:10px}
  .lz-lock-email{font-size:11.5px}
  .lz-lock-state{margin:11px auto 0;font-size:11.5px}
  .lz-lock-primary{margin-top:15px;height:48px}
  .lz-lock.despierta:not(.sin-passkey) .lz-acceso{max-height:96px}
  .lz-lock.despierta.ofrece-pin:not(.sin-passkey) .lz-acceso{max-height:140px}
  .lz-lock-pin{gap:7px;margin:15px 0 2px}
  .lz-lock-pin input{width:36px;height:42px;font-size:16.5px}
  .lz-pin-sep{margin:0 4px}

  /* La marca, más arriba y con más aire (solo en la pantalla bloqueada). */
  .lz-lock.cara-bloqueo .lz-lock-grid{--marca-y:calc(var(--sat) + 12px)}
  .lz-lock.cara-bloqueo .lz-lock-form{top:calc(var(--marca-y) + 56px);padding-bottom:12vh}
}
@media (max-width:400px){
  .lz-lock-pin{gap:6px}
  .lz-lock-pin input{width:33px;height:40px;font-size:16px}
  .lz-pin-sep{margin:0 3px}
}
@media (max-width:340px){
  .lz-lock-pin input{width:30px;height:38px}
  .lz-pin-sep{width:7px;margin:0 2px}
}

/* El rechazo es de la sesión, no de un campo: sacuden las casillas y también la
   identidad, con menos recorrido. */
@keyframes lzSacudir{0%,100%{transform:translateX(0)}18%{transform:translateX(-6px)}36%{transform:translateX(6px)}54%{transform:translateX(-4px)}72%{transform:translateX(4px)}86%{transform:translateX(-2px)}}
@keyframes lzSacudirLeve{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1.5px)}}
.lz-lock-pin.sacude{animation:lzSacudir .42s cubic-bezier(.36,.07,.19,.97)}
.lz-lock-profile.sacude{animation:lzSacudirLeve .42s cubic-bezier(.36,.07,.19,.97)}

/* Bloqueado por intentos: el camino se cierra de verdad. */
.lz-lock.bloqueado .lz-lock-pin{opacity:.45;pointer-events:none}
.lz-lock.bloqueado .lz-acceso{display:none}

@media (prefers-reduced-motion:reduce){
  .lz-lock-pin.sacude,.lz-lock-profile.sacude{animation:none}
  .lz-lock.esperando .lz-lock-primary{animation:none}
  .lz-lock.verificando .lz-lock-avatar::after,
  .lz-lock.esperando .lz-lock-avatar::after{animation:none;opacity:1}
}


/* ══ MICRO-ANIMACIONES ════════════════════════════════════════════════════════ */
/* La casilla acusa recibo del dígito: un latido de escala mínimo. */
@keyframes lzDigito{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.lz-lock-pin input.lleno{animation:lzDigito .19s ease-out}

/* Botón: hundimiento real al pulsar. */
.lz-lock-primary:active:not(:disabled),.lz-gbtn:active{transform:translateY(1px) scale(.994)}
/* ── EL BOTÓN NO SE ENCOGE MIENTRAS EL SISTEMA PIDE LA CARA ─────────────────────
   En el teléfono, al tocar «Desbloquear» el `:active` se queda PEGADO: la hoja de
   Face ID / Touch ID se lleva el foco y el `touchend` no vuelve nunca al botón, de
   modo que el `scale(.994)` de la regla de arriba se mantiene TODA la ceremonia.
   Se ve como si el botón se comprimiera de ancho y se quedara así de fondo, que es
   justo lo reportado. Mientras `.esperando` —la clase que marca «pidiendo al
   dispositivo»— el botón no se deforma: late con el borde (lzLatir) y nada más.
   Va DESPUÉS de la regla de `:active` porque tienen la misma especificidad. */
.lz-lock.esperando .lz-lock-primary,
.lz-lock.esperando .lz-lock-primary:active{transform:none}

/* Acción secundaria: el subrayado crece desde el centro. */
.lz-lock-logout{position:relative;transition:color .18s ease}
.lz-lock-logout::after{
  content:'';position:absolute;left:50%;bottom:2px;width:0;height:1px;
  background:currentColor;opacity:.5;transform:translateX(-50%);
  transition:width .22s cubic-bezier(.22,1,.36,1);
}
.lz-lock-logout:hover::after{width:calc(100% - 20px)}

/* El avatar respira al pasar por encima. */
.lz-lock-avatar{transition:border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1)}
.lz-lock-profile:hover .lz-lock-avatar{transform:translateY(-1px)}

.lz-lock-state::before{transition:background .3s ease, box-shadow .3s ease}

@media (prefers-reduced-motion:reduce){
  .lz-lock-pin input.lleno{animation:none}
  .lz-lock-logout::after{transition:none}
  .lz-lock-profile:hover .lz-lock-avatar{transform:none}
}

/* Pantalla baja. */
@media (max-width:760.98px) and (max-height:560px){
  .lz-lock.cara-bloqueo .lz-lock-form{top:0;padding-bottom:0}
}

/* ══════════════════════════════════════════════════════════════════════════════
   AVISO DE INACTIVIDAD · toast del sistema con cuenta regresiva (en la APP, no en
   el candado). Usa los tokens del CRM (--bg-card/--tx-*/--border/--c-accent) con
   respaldo, así se ve bien en claro/oscuro/medianoche. z-index bajo el candado.
   ══════════════════════════════════════════════════════════════════════════════ */
.lz-idle{position:fixed;left:0;right:0;bottom:26px;z-index:2147482000;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.lz-idle-card{pointer-events:auto;display:flex;align-items:center;gap:14px;max-width:520px;width:100%;
  padding:14px 16px;border-radius:16px;
  background:var(--bg-card,#16131d);color:var(--tx-base,#eceef4);
  border:1px solid var(--border,rgba(255,255,255,.12));
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);
  font:500 13px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  animation:lzIdleIn .28s cubic-bezier(.22,1,.36,1)}
.lz-idle-ic{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:var(--c-accent-muted,rgba(139,92,246,.18));color:var(--c-accent,#8b5cf6)}
.lz-idle-ic svg{width:19px;height:19px}
.lz-idle-tx{flex:1 1 auto;min-width:0}
.lz-idle-t{font-weight:600}
.lz-idle-sub{margin-top:2px;color:var(--tx-muted,#9aa0b0);font-weight:500}
.lz-idle-n{font-variant-numeric:tabular-nums;color:var(--tx-base,#eceef4);font-weight:700}
.lz-idle-acts{flex:0 0 auto;display:flex;gap:8px}
.lz-idle-stay,.lz-idle-now{border-radius:10px;padding:8px 12px;font:600 12.5px system-ui;cursor:pointer;border:1px solid transparent}
.lz-idle-stay{background:var(--c-accent,#8b5cf6);color:#fff}
.lz-idle-stay:hover{filter:brightness(1.06)}
.lz-idle-now{background:transparent;color:var(--tx-muted,#9aa0b0);border-color:var(--border,rgba(255,255,255,.14))}
.lz-idle-now:hover{color:var(--tx-base,#eceef4)}
@keyframes lzIdleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:560px){.lz-idle-card{flex-wrap:wrap}.lz-idle-acts{width:100%}.lz-idle-stay{flex:1}}
@media(prefers-reduced-motion:reduce){.lz-idle-card{animation:none}}