/* Sistema visual del evento.
   Rebrandear = cambiar --brand, --accent y --ink-900. Todo lo demas deriva de ahi. */

:root {
  /* Tinta. El negro no es puro: a pantalla completa y de pie, el #000 vibra. */
  --ink-900: #1a1a1a;
  --ink-800: #0f0d18;
  --ink-700: #3d382f;
  --ink-500: #5c5347;
  --ink-300: #8a7f6b;

  /* Papel calido. La tabla vive sobre blanco y el resto sobre el papel, para
     que el listado se lea como una hoja apoyada y no como el fondo mismo. */
  --paper: #f2f0ec;
  --paper-2: #ffffff;
  --paper-3: #faf8f4;
  --paper-4: #f7f5f1;

  --brand: #4c1fb5;
  --brand-deep: #3a1690;
  --accent: #e73ce6;
  --accent-deep: #c229c1;
  --grad: linear-gradient(135deg, #4c1fb5 0%, #e73ce6 100%);
  --grad-bar: linear-gradient(90deg, #4c1fb5 0%, #e73ce6 100%);

  --sage: #1a7a1a;
  --sage-ink: #0f5f0f;
  --sage-soft: #e6f7e6;
  --live: #16a34a;
  --alert: #c22929;
  --alert-deep: #a01f1f;
  --alert-soft: #fbeaea;

  --text: var(--ink-900);
  --text-soft: #5c5347;
  --text-mute: #8a7f6b;
  --line: rgba(26, 26, 26, 0.08);
  --line-2: rgba(26, 26, 26, 0.14);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-modal: 0 40px 80px rgba(0, 0, 0, 0.4);

  --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --shell: min(1100px, 100% - 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden se aplica con la regla [hidden]{display:none} del navegador,
   y CUALQUIER regla de autor que declare display la vence. Varias capas de este
   proyecto (.gate, .flash, .panel, .scanner) declaran display, asi que sin este
   !important el atributo hidden no hace nada: la puerta queda tapando la
   pantalla completa y el kiosco se ve en negro. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -0.025em; }

button, input, select, textarea { font: inherit; color: inherit; }
button { transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- botones base ---------- */

.btn {
  border: none;
  background: var(--brand);
  color: #fff;
  padding: 0.9rem 1.4rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
}
.btn:hover:not(:disabled) { background: var(--brand-deep); transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-quiet {
  background: var(--paper-2);
  color: var(--text);
  border: 1.5px solid var(--line-2);
}
.btn-quiet:hover:not(:disabled) { background: var(--paper-4); transform: none; }

/* ---------- formularios ---------- */

.field { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.field label {
  font: 500 0.66rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.field input, .field select {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper-2);
  font-weight: 500;
  outline: none;
}
.field input:focus, .field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(76, 31, 181, 0.14);
}

/* ---------- ver la clave ---------- */

/* Escribir una clave larga a ciegas, de pie y con cola delante, es la forma más
 * rápida de equivocarse tres veces seguidas. Edge pone su propio ojo en los
 * campos de contraseña y por eso en el escritorio parecía resuelto, pero Chrome
 * en Android y Safari en iPhone no ponen ninguno — justo los dos navegadores
 * del mesón.
 *
 * Botón propio, entonces, y el nativo de Edge fuera para no tener dos.
 */
.field-clave { position: relative; display: flex; }
.field-clave input { flex: 1; padding-right: 3.4rem; }
.field-clave input::-ms-reveal { display: none; }

.ver-clave {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  /* 44px es el mínimo que un dedo acierta sin pensar. El icono se ve más
     pequeño porque el relleno es transparente, pero la zona que responde al
     toque es la entera. */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 10px;
  color: var(--text-mute); cursor: pointer;
}
.ver-clave:hover { color: var(--text); background: var(--paper); }
.ver-clave[aria-pressed="true"] { color: var(--brand); }
/* Solo uno de los dos iconos a la vez: tachado mientras la clave está oculta,
   abierto cuando se está mostrando. */
.ver-clave .ojo-off { display: none; }
.ver-clave[aria-pressed="true"] .ojo-off { display: block; }
.ver-clave[aria-pressed="true"] .ojo-on { display: none; }
.hint { font-size: 0.78rem; color: var(--text-mute); }

/* ---------- avisos ---------- */

.notice {
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--brand);
  background: #f1ecfb;
  font-size: 0.88rem;
  color: var(--ink-700);
}
.notice-bad { border-left-color: var(--alert); background: var(--alert-soft); }
.notice-good { border-left-color: var(--sage); background: var(--sage-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}