/* ====================================================================
   LOGIN cinematográfico — Señora Gallina · Rediseño Azul (recolor)
   Misma coreografía (glow, henReveal, breathe, sheen, partículas), solo
   recoloreada a la paleta azul. Wordmark = imagen del logo REAL (blanco).
   ==================================================================== */
:root {
  --e-cine: cubic-bezier(.16,1,.3,1);   /* expo-out: entradas, reveals */
  --e-data: cubic-bezier(.22,1,.36,1);  /* quint-out: cascadas/datos */
  --e-std:  cubic-bezier(.33,1,.68,1);  /* micro-interacciones */
}

@keyframes glowIn   { 0%{opacity:0;transform:scale(.6)} 100%{opacity:1;transform:scale(1)} }
@keyframes glowPulse{ 0%,100%{opacity:.85;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes henReveal{ 0%{opacity:0;transform:translateY(26px) scale(.9);clip-path:inset(100% 0 0 0)} 60%{opacity:1} 100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)} }
@keyframes breathe  { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.018)} }
@keyframes sheen    { 0%{opacity:0;background-position:175% 0} 18%{opacity:1} 82%{opacity:1} 100%{opacity:0;background-position:-65% 0} }
@keyframes fadeUp   { 0%{opacity:0;transform:translateY(18px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes letterIn { 0%{opacity:0;transform:translateY(20px) rotate(4deg)} 100%{opacity:1;transform:translateY(0) rotate(0)} }
@keyframes dotFill  { 0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.25)} 100%{opacity:1;transform:scale(1)} }
@keyframes wobble   { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes floatUp  { 0%{opacity:0;transform:translateY(0) scale(.6)} 12%{opacity:.5} 88%{opacity:.35} 100%{opacity:0;transform:translateY(-220px) scale(1)} }

@view-transition { navigation: auto; }
::view-transition-new(root) { animation: scnIn .42s var(--e-cine); }
@keyframes scnIn { 0%{opacity:0;transform:scale(1.02)} 100%{opacity:1;transform:scale(1)} }

/* Escena */
.login-scene {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #0A0C12; position: relative; overflow: hidden; padding: 24px;
}
.login-glow {
  position: absolute; top: 38%; left: 50%; width: 900px; height: 900px;
  margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(61,108,224,.28), rgba(94,134,242,.10) 40%, transparent 66%);
  animation: glowIn 2.2s var(--e-cine), glowPulse 7s ease-in-out 2.2s infinite;
}
.login-glow.sm { width: 640px; height: 640px; margin: -320px 0 0 -320px; animation: glowIn 1.4s var(--e-cine); }
.login-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 36%, transparent 30%, rgba(10,12,18,.72) 78%, #0A0C12 100%);
}
.login-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.login-particles i {
  position: absolute; bottom: -10px; border-radius: 50%; background: rgba(110,150,235,.55);
  filter: blur(.5px); opacity: 0; animation: floatUp linear infinite;
}

.login-col { position: relative; z-index: 2; width: 100%; max-width: 340px; text-align: center; }

/* Isotipo (gallina) — archivo PNG, con reveal + breathe + sheen */
.login-iso {
  position: relative; width: 128px; height: 150px; margin: 0 auto 6px; overflow: visible;
}
.login-iso .iso-anim {
  position: relative; width: 100%; height: 100%;
  animation: henReveal 1.5s var(--e-cine), breathe 5.5s ease-in-out 1.7s infinite;
}
.login-iso .iso-anim > img:first-child {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* (El barrido de luz / sheen se eliminó: causaba un recuadro al rededor de la
   gallina en ciertas GPU. La gallina queda con su reveal + breathe, limpia.) */

/* Wordmark = imagen del logo REAL (blanco) */
.login-wordmark { width: 220px; margin: 0 auto 4px; }
.login-wordmark img {
  width: 100%; height: auto; display: block;
  animation: fadeUp .8s var(--e-cine) .95s backwards;
}
.login-eyebrow {
  font: 400 .6rem var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .32em;
  color: #697590; margin-bottom: 30px; animation: fadeUp .7s var(--e-cine) 1.5s backwards;
}

/* Formulario */
.login-col form { text-align: left; }
.lf { margin-bottom: 14px; }
.lf:nth-of-type(1) { animation: fadeUp .65s var(--e-cine) 1.65s backwards; }
.lf:nth-of-type(2) { animation: fadeUp .65s var(--e-cine) 1.78s backwards; }
.lf label {
  display: block; font: 400 .58rem var(--font-body, sans-serif); text-transform: uppercase;
  letter-spacing: .16em; color: #697590; margin-bottom: 7px;
}
.lf input {
  width: 100%; background: #171C26; border: 1px solid rgba(61,108,224,.24);
  border-radius: 8px; padding: .72rem .8rem; font: 400 .9rem var(--font-body, sans-serif);
  color: #EDF1F8; transition: border-color .2s, box-shadow .2s;
}
.lf input::placeholder { color: #5B6677; }
.lf input:focus { outline: none; border-color: #3D6CE0; box-shadow: 0 0 0 3px rgba(61,108,224,.18); }
.login-btn {
  margin-top: 20px; width: 100%; position: relative; overflow: hidden;
  font: 600 .72rem var(--font-body, sans-serif); text-transform: uppercase; letter-spacing: .1em;
  color: #FFFFFF; background: #3D6CE0; border: none; padding: .85rem; border-radius: 8px; cursor: pointer;
  transition: transform .12s var(--e-std), box-shadow .25s, background .2s;
  animation: fadeUp .65s var(--e-cine) 1.92s backwards;
}
.login-btn:hover { box-shadow: 0 0 28px rgba(61,108,224,.55); background: #5E86F2; }
.login-btn:active { transform: scale(.975); }
.login-alt {
  display: inline-block; margin-top: 16px; font: 400 .72rem var(--font-body, sans-serif);
  color: #9BA7B9; letter-spacing: .02em; animation: fadeUp .65s var(--e-cine) 2.05s backwards;
}
.login-alt:hover { color: #5E86F2; }
.login-flashes { list-style: none; padding: 0; margin: 0 0 14px; }
.login-flashes li { padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.10); }
.login-flashes .danger { background: rgba(226,112,107,.12); color: #E2706B; }
.login-flashes .success { background: rgba(70,176,126,.12); color: #46B07E; }
.login-flashes .info { background: rgba(61,108,224,.12); color: #5E86F2; }

/* ---- Escáner de QR (repartidor) ---- */
.qr-scan { display: flex; flex-direction: column; align-items: center; }
.qr-frame {
  position: relative; width: 240px; max-width: 78vw; aspect-ratio: 1 / 1;
  margin: 6px auto 18px; border-radius: 18px; overflow: hidden;
  background: #12151D; border: 1px solid rgba(61,108,224,.24);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}
.qr-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-frame.ok { border-color: #46B07E; box-shadow: 0 0 30px rgba(70,176,126,.4); }
/* esquinas tipo visor */
.qr-corner { position: absolute; width: 26px; height: 26px; border: 2.5px solid #3D6CE0; z-index: 2; }
.qr-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.qr-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.qr-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.qr-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }
.qr-frame.ok .qr-corner { border-color: #46B07E; }
/* línea de barrido (solo cuando la cámara está encendida) */
.qr-laser {
  position: absolute; left: 8%; right: 8%; top: 0; height: 2px; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(61,108,224,.9), transparent);
  box-shadow: 0 0 12px rgba(61,108,224,.7);
}
.qr-frame.on .qr-laser { opacity: 1; animation: qrLaser 2.4s ease-in-out infinite; }
.qr-frame.ok .qr-laser { opacity: 0; }
@keyframes qrLaser { 0%{transform:translateY(14px)} 50%{transform:translateY(214px)} 100%{transform:translateY(14px)} }

.qr-msg { margin-top: 4px; font: 400 .82rem var(--font-body, sans-serif); color: #9BA7B9; min-height: 1.2em; text-align: center; }
.qr-msg.ok { color: #46B07E; }
.qr-msg.err { color: #E2706B; }
.qr-fallback { margin-top: 10px; font: 400 .76rem var(--font-body, sans-serif); color: #8893a6;
  background: rgba(226,112,107,.08); border: 1px solid rgba(226,112,107,.2); border-radius: 8px; padding: 8px 10px; text-align: center; }

/* Toggle de motion (esquina) */
.motion-toggle {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  font: 400 .6rem var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .08em;
  color: #9BA7B9; background: rgba(18,21,29,.7); border: 1px solid rgba(255,255,255,.12);
  padding: .4rem .7rem; border-radius: 8px; cursor: pointer;
}

/* Accesibilidad: motion off (manual o sistema). */
[data-reduced="true"] *, [data-reduced="true"] *::before, [data-reduced="true"] *::after {
  animation: none !important; transition: none !important;
}
.login-particles i { opacity: 0; }   /* decorativas: invisibles en reposo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .login-glow { display: none; }
}