/* -----------------------------------------------------------------------------
   Panel de cuentas ScrollCine — piel de sala de cine.
   Los colores viven en variables para que el tema claro solo tenga que
   redefinirlas: si un color se escribe suelto dentro de un componente, en el
   otro tema queda texto de un tema sobre el fondo del otro y no se lee.
   ----------------------------------------------------------------------------- */

:root {
  --ground: #0B0A0E;
  --surface: #15131C;
  --surface-2: #1D1A26;
  --line: rgba(243, 239, 231, .10);
  --line-fuerte: rgba(243, 239, 231, .22);
  --ink: #F3EFE7;
  --mut: #9C94AB;
  --faint: #6E6780;
  --gold: #F2B33D;
  --gold-suave: rgba(242, 179, 61, .14);
  --carpet: #D8483A;
  --carpet-suave: rgba(216, 72, 58, .14);
  --good: #57B87F;
  --good-suave: rgba(87, 184, 127, .14);
  --warn: #E0A32E;
  --sombra: 0 18px 50px rgba(0, 0, 0, .55);
  --radio: 14px;
  --campo: #0E0C13;
  color-scheme: dark;
}

[data-tema="claro"] {
  --ground: #EDEBF1;
  --surface: #FFFFFF;
  --surface-2: #F5F3F8;
  --line: rgba(26, 23, 32, .12);
  --line-fuerte: rgba(26, 23, 32, .26);
  --ink: #1A1720;
  --mut: #5C5568;
  --faint: #8A8397;
  --gold: #9C6A08;
  --gold-suave: rgba(156, 106, 8, .12);
  --carpet: #B3291B;
  --carpet-suave: rgba(179, 41, 27, .10);
  --good: #1F7A4C;
  --good-suave: rgba(31, 122, 76, .12);
  --warn: #8A6100;
  --sombra: 0 14px 40px rgba(26, 23, 32, .14);
  --campo: #FFFFFF;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15.5px/1.55 'Figtree', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

h1, h2, h3 {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .015em;
  text-wrap: balance;
}

button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.oculto { display: none !important; }

/* ---------- Entrada ---------- */
#entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
}

.tarjeta-entrada {
  width: 100%;
  max-width: 390px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sombra);
  padding: 30px 28px 28px;
}

.bombillos { display: flex; gap: 10px; margin-bottom: 22px; }
.bombillos i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold-suave);
}
.bombillos i:nth-child(even) { opacity: .35; }

.tarjeta-entrada h1 { font-size: 40px; font-weight: 800; line-height: .92; }
.tarjeta-entrada h1 span { color: var(--gold); display: block; }
.tarjeta-entrada .lema {
  color: var(--mut); font-size: 13.5px; margin: 12px 0 22px;
}

label {
  display: block; margin: 15px 0 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}

input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-fuerte); background: var(--campo); color: var(--ink);
}

.boton {
  width: 100%; margin-top: 22px; padding: 14px;
  border: 0; border-radius: 11px; cursor: pointer;
  background: var(--gold); color: #1A1206;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 21px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  transition: filter .15s ease, transform .06s ease;
}
[data-tema="claro"] .boton { color: #FFF8EA; }
.boton:hover { filter: brightness(1.09); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .55; cursor: wait; }

.error {
  margin-top: 16px; padding: 11px 14px; font-size: 14px;
  border-left: 3px solid var(--carpet); background: var(--carpet-suave);
  border-radius: 0 9px 9px 0; color: var(--ink);
}

/* ---------- Estructura del panel ---------- */
#panel { max-width: 1180px; margin: 0 auto; padding: 0 20px 70px; }

header.barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radio); box-shadow: var(--sombra);
  margin: 16px 0 0; padding: 15px 22px;
}
header.barra .marca h1 { font-size: 25px; font-weight: 800; line-height: 1; }
header.barra .marca h1 span { color: var(--gold); }
header.barra .marca .sub {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-top: 3px;
}
header.barra .relleno { flex: 1; }

.chip {
  padding: 8px 13px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-fuerte); background: transparent; color: var(--mut);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--gold); }

.cinta { height: 4px; border-radius: 4px; margin: 14px 0 0;
  background: linear-gradient(90deg, var(--carpet), var(--gold), var(--good), var(--gold), var(--carpet)); }

/* ---------- Menu de secciones ---------- */
nav.secciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; }
nav.secciones button {
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--mut);
  font-size: 13.5px; font-weight: 500;
  transition: all .15s ease;
}
nav.secciones button:hover { color: var(--ink); border-color: var(--line-fuerte); }
nav.secciones button.activo {
  background: var(--gold-suave); border-color: var(--gold); color: var(--gold); font-weight: 600;
}

/* ---------- Tarjetas de cifras ---------- */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 13px; margin-bottom: 22px;
}
.cifra {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radio); padding: 17px 18px 15px;
  display: flex; flex-direction: column; gap: 4px;
}
.cifra .n {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800;
  font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums;
}
.cifra .k {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.cifra .pie { font-size: 12.5px; color: var(--mut); }
.cifra.oro { background: var(--gold-suave); border-color: var(--gold); }
.cifra.oro .n { color: var(--gold); }
.cifra.mal { background: var(--carpet-suave); border-color: var(--carpet); }
.cifra.mal .n { color: var(--carpet); }
.cifra.bien .n { color: var(--good); }

/* ---------- Bloques ---------- */
.bloque {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radio); padding: 24px 26px; margin-bottom: 16px;
}
.bloque h2 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.bloque p { color: var(--mut); margin: 0 0 10px; max-width: 62ch; }
.bloque ul { margin: 0; padding-left: 19px; color: var(--mut); }
.bloque li { margin-bottom: 6px; }

.pendiente {
  border: 1px dashed var(--line-fuerte); border-radius: var(--radio);
  padding: 34px 26px; text-align: center; color: var(--faint);
}
.pendiente .icono { font-size: 34px; display: block; margin-bottom: 10px; }
.pendiente b { color: var(--mut); display: block; margin-bottom: 5px; font-size: 16px; }

.sello {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
}
.sello.ok { background: var(--good-suave); color: var(--good); border: 1px solid var(--good); }
.sello.no { background: var(--carpet-suave); color: var(--carpet); border: 1px solid var(--carpet); }

footer.pie {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}

@media (max-width: 620px) {
  #panel { padding: 0 14px 60px; }
  header.barra { padding: 14px 16px; }
  .bloque { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}