/* ============================================================================
   SIFIME · Login pixel-scene (16-bit)
   Escena: tráiler → verificentro → verificación Físico/Humo. Vanilla, sin libs.
   ========================================================================== */

:root {
  --ls-accent: #E87B3F;
  --ls-accent-2: #F09A60;
  --ls-cream: #EDEDED;
  --ls-cream-dim: #B7AFA6;
  --ls-ink: #14101a;
  --ls-panel: rgba(22, 14, 26, 0.86);
  --ls-line: #3a2f44;
  --ls-ok: #6BB26A;
  --ls-danger: #E07B5A;
  --ls-font-pixel: 'Press Start 2P', 'Courier New', monospace;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #1a1026;
  overflow: hidden;
}

/* La nav fija del layout guest (logo) es redundante aquí: el card ya tiene el
   logo SIFIME, y su z-index:1000 podía encimarse al card en pantallas cortas. */
body > nav.navbar { display: none; }

/* La sección que envuelve el slot ocupa todo el viewport sin scroll */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Escena de fondo (SVG a pantalla completa) -------------------------- */
#pixel-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #241431;
  overflow: hidden;
}
#pixel-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Bordes nítidos = look pixel */
#pixel-scene svg rect,
#pixel-scene svg path,
#pixel-scene svg circle,
#pixel-scene svg polygon {
  shape-rendering: crispEdges;
}
#pixel-scene text {
  font-family: var(--ls-font-pixel);
  shape-rendering: auto;
  -webkit-font-smoothing: none;
}

/* Capas que se ocultan/muestran por JS arrancan en su estado base */
#ls-scan { opacity: 0; }
#ls-stamp-fisico, #ls-stamp-humo { opacity: 0; }
#ls-sign-verificando { opacity: 0; }

/* ---- Overlay CRT (scanlines + viñeta) ----------------------------------- */
.ls-crt {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.16) 2px, rgba(0,0,0,0.16) 3px),
    radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(0,0,0,0.45) 100%);
  opacity: 0.7;
}

/* ---- Escenario del formulario ------------------------------------------ */
.ls-stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

/* ---- Tarjeta pixel ------------------------------------------------------ */
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--ls-panel);
  border: 3px solid var(--ls-accent);
  border-radius: 4px;
  padding: 26px 24px 24px;
  color: var(--ls-cream);
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* bisel 16-bit: luz arriba-izq, sombra abajo-der + sombra dura exterior */
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.10),
    inset -2px -2px 0 rgba(0,0,0,0.45),
    0 0 0 3px #14101a,
    8px 8px 0 rgba(0,0,0,0.45);
  image-rendering: pixelated;
}

.login-card .ls-logo {
  width: 132px;
  height: auto;
  margin: 0 auto 6px;
  display: block;
  image-rendering: pixelated;
}

.login-card .ls-title {
  font-family: var(--ls-font-pixel);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--ls-cream);
  margin: 6px 0 10px;
  text-shadow: 2px 2px 0 var(--ls-accent), 4px 4px 0 rgba(0,0,0,0.5);
}

.login-card .ls-subtitle {
  font-family: var(--ls-font-pixel);
  font-size: 9px;
  line-height: 1.8;
  color: #f6b483;
  margin: 0 0 22px;
}

.ls-field { text-align: left; margin-bottom: 16px; }

.ls-field label {
  display: block;
  font-family: var(--ls-font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cfc5bb;
  margin-bottom: 9px;
}

.ls-input {
  width: 100%;
  box-sizing: border-box;
  background: #100c16;
  border: 2px solid var(--ls-line);
  border-radius: 3px;
  color: var(--ls-cream);
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 12px;
  outline: none;
  transition: border-color .12s steps(2), box-shadow .12s steps(2);
}
.ls-input::placeholder { color: #6b6275; }
.ls-input:focus {
  border-color: var(--ls-accent);
  box-shadow: 0 0 0 2px rgba(232,123,63,0.35), inset 0 0 8px rgba(232,123,63,0.18);
}

/* Botón pixel con bisel y "press" */
.ls-btn {
  width: 100%;
  cursor: pointer;
  font-family: var(--ls-font-pixel);
  font-size: 12px;
  letter-spacing: 1px;
  color: #20140c;
  background: var(--ls-accent);
  border: 0;
  border-radius: 3px;
  padding: 16px 12px;
  margin-top: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.45),
    inset -3px -3px 0 rgba(0,0,0,0.35),
    0 4px 0 #9c4f22;
  transition: transform .05s steps(1), box-shadow .05s steps(1), background .1s;
}
.ls-btn:hover { background: var(--ls-accent-2); }
.ls-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.35),
    inset -2px -2px 0 rgba(0,0,0,0.35),
    0 0 0 #9c4f22;
}

/* Errores / status */
.ls-alert {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #ffd9cb;
  background: rgba(224,123,90,0.18);
  border: 2px solid var(--ls-danger);
  border-radius: 3px;
  padding: 8px 10px;
  margin-top: 8px;
  text-align: left;
}
.ls-status {
  font-family: var(--ls-font-pixel);
  font-size: 8px;
  line-height: 1.6;
  color: var(--ls-ok);
  margin-bottom: 14px;
}

.ls-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 18px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
.ls-extra label { color: var(--ls-cream-dim); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ls-extra input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ls-accent); }
.ls-extra a { color: var(--ls-accent-2); text-decoration: none; }
.ls-extra a:hover { text-decoration: underline; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 480px) {
  .login-card { max-width: 320px; padding: 22px 18px; }
  .login-card .ls-title { font-size: 16px; }
  .login-card .ls-logo { width: 110px; }
  .ls-btn { font-size: 11px; }
}

/* ---- Reduced motion: la escena queda estática (JS no anima) ------------- */
@media (prefers-reduced-motion: reduce) {
  .ls-input, .ls-btn { transition: none; }
}