/* ============================================================================
   pulse. — sistema de diseño compartido
   ============================================================================

   Antes cada portal traía su propia copia de los estilos: seis archivos que
   había que editar para cambiar un color de marca. Ahora viven aquí.

   La decisión de fondo es que NO hay un solo diseño. Hay dos densidades, porque
   los portales se usan en situaciones que no se parecen en nada:

     .operacion  — Taquilla y Mi Pulsera. Se usan de pie, con fila enfrente, de
                   noche y con prisa. Todo es grande: tipografía, botones de
                   56 px mínimo, una sola tarea por tarjeta y una respuesta que
                   se lee de un vistazo sin acercarse a la pantalla.

     (normal)    — Consola, Administración, Finanzas. Se usan sentado, en un
                   escritorio, para analizar. Aquí la densidad es una virtud:
                   más filas visibles significa menos desplazamiento.

   Sobre el color: el coral de la marca es el color de las ACCIONES. Los estados
   —aprobado, pendiente, rechazado— nunca se comunican solo con color, porque el
   coral y el rojo se parecen y aquí se maneja dinero. Cada estado lleva icono y
   palabra; el color solo acompaña.
   ========================================================================= */

:root {
  /* Fondo con sesgo cálido, no el gris-azul de siempre: es el que deja que el
     coral se vea como marca y no como una alerta. */
  --fondo:    #131116;
  --panel:    #1B1920;
  --panel2:   #23202A;
  --linea:    #2C2833;
  --texto:    #F2F0F5;
  --suave:    #A19CAC;
  --tenue:    #6E697A;

  --coral:    #E0504A;   /* marca y acciones */
  --coral-on: #FFF3F1;   /* texto sobre coral */
  --verde:    #35B074;   /* aprobado, dinero que entra */
  --ambar:    #D9911F;   /* pendiente, atención */
  --rojo:     #E5484D;   /* rechazado, bloqueado */
  --azul:     #5B8DEF;   /* informativo, enlaces */

  /* Series de gráficas — VALIDADAS contra el fondo oscuro (banda de luminosidad,
     separación para daltonismo ΔE≥8, contraste ≥3:1). No son los verdes/azules
     de estado: las gráficas necesitan pasos propios que cumplan las seis
     comprobaciones sobre cada superficie. */
  --graf-1: #33A96D;   /* recargas / dinero que entra */
  --graf-2: #5B8DEF;   /* ventas / consumo */

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
}

/* ---------------------------------------------------------------- Temas ---
   Tres capas, y el orden importa:

     1. :root                    → oscuro, el que se usa de noche en un evento.
     2. @media prefers-color…    → sigue la preferencia del sistema operativo.
     3. :root[data-tema="…"]     → la elección MANUAL, que gana sobre las dos.

   La tercera capa tiene que estar después y cubrir AMBOS sentidos: si solo
   existiera "claro", alguien con el sistema en claro no podría forzar oscuro.
   Los valores se repiten a propósito — en CSS plano no hay forma de reusar un
   bloque de tokens, y la alternativa (una capa de indirección) haría más difícil
   de leer justo lo que más se consulta.

   El tema claro no es un capricho: la taquilla a veces opera a plena luz del día
   y ahí una pantalla oscura se convierte en un espejo.
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root {
    --fondo:  #FAF9FB;
    --panel:  #FFFFFF;
    --panel2: #F3F1F6;
    --linea:  #E5E2EA;
    --texto:  #191722;
    --suave:  #605B6C;
    --tenue:  #8E8999;
    --coral:  #C93F39;
    --verde:  #17824F;
    --ambar:  #9A6408;
    --rojo:   #C4292E;
    --azul:   #2D5FC7;
    /* Pasos re-validados para superficie clara: los del oscuro fallan aquí. */
    --graf-1: #1F8A55;
    --graf-2: #2D5FC7;
  }
}

:root[data-tema="claro"] {
  --fondo:  #FAF9FB;
  --panel:  #FFFFFF;
  --panel2: #F3F1F6;
  --linea:  #E5E2EA;
  --texto:  #191722;
  --suave:  #605B6C;
  --tenue:  #8E8999;
  --coral:  #C93F39;
  --verde:  #17824F;
  --ambar:  #9A6408;
  --rojo:   #C4292E;
  --azul:   #2D5FC7;
  --graf-1: #1F8A55;
  --graf-2: #2D5FC7;
}

:root[data-tema="oscuro"] {
  --fondo:    #131116;
  --panel:    #1B1920;
  --panel2:   #23202A;
  --linea:    #2C2833;
  --texto:    #F2F0F5;
  --suave:    #A19CAC;
  --tenue:    #6E697A;
  --coral:    #E0504A;
  --coral-on: #FFF3F1;
  --verde:    #35B074;
  --ambar:    #D9911F;
  --rojo:     #E5484D;
  --azul:     #5B8DEF;
  --graf-1:   #33A96D;
  --graf-2:   #5B8DEF;
}

/* En claro, el texto sobre coral sigue siendo casi blanco. */
:root[data-tema="claro"], :root:not([data-tema]) { --coral-on: #FFF3F1; }


/* ---------------------------------------------------- Tema CRISTAL --------
   Liquid Glass. No es "poner blur y ya": ese es el glassmorphism plano de hace
   unos años. El material necesita cuatro cosas a la vez, y si falta una se cae:

     1. Algo QUE refractar. Un cristal sobre un fondo liso es gris translúcido.
        Por eso el fondo lleva auroras de color muy desaturadas y fijas.
     2. Refracción, no solo desenfoque: `blur` + `saturate`, para que el color
        de atrás se intensifique al atravesar el material.
     3. Brillo especular en el borde — más claro arriba-izquierda, apagado
        abajo-derecha. Es lo que sugiere una superficie curva y con grosor.
     4. Radios concéntricos: lo de dentro con radio menor que lo de fuera, o la
        pieza se ve pegada en vez de contenida.

   El texto NO se vuelve translúcido nunca. Sobre un material que cambia según
   lo que pasa detrás, lo único que garantiza que una cifra se lea es que su
   color sea opaco y de contraste alto.
   ------------------------------------------------------------------------- */

:root[data-tema="cristal"] {
  --fondo:    #0B0A12;
  --panel:    rgba(255,255,255,.055);
  --panel2:   rgba(255,255,255,.085);
  --linea:    rgba(255,255,255,.11);
  --texto:    #F6F4FA;
  --suave:    #B9B4C6;
  /* Un paso más claro que en el tema oscuro: sobre cristal el fondo efectivo es
     más luminoso (la aurora atraviesa), y #837D93 se quedaba en 4.40 — debajo
     del 4.5 que exige el texto pequeño. Medido, no estimado. */
  --tenue:    #918B9F;
  --coral:    #FF6F63;
  --coral-on: #2A0D0A;
  --verde:    #46C98A;
  --ambar:    #EBA53A;
  --rojo:     #FF6B70;
  --azul:     #7FA6FF;
  --graf-1:   #46C98A;
  --graf-2:   #7FA6FF;

  --vidrio: blur(22px) saturate(180%);
  --brillo: linear-gradient(140deg, rgba(255,255,255,.20), rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 60%);
}

/* Las auroras: lo que el cristal tiene para refractar. Fijas y muy tenues —
   compiten con el contenido si suben de intensidad. */
:root[data-tema="cristal"] body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 38% at 18% 12%, rgba(224,80,74,.30), transparent 62%),
    radial-gradient(40% 34% at 82% 24%, rgba(91,141,239,.26), transparent 64%),
    radial-gradient(50% 42% at 62% 88%, rgba(53,176,116,.20), transparent 66%);
  filter: blur(46px);
}

:root[data-tema="cristal"] .tarjeta,
:root[data-tema="cristal"] .kpi,
:root[data-tema="cristal"] .cuadre,
:root[data-tema="cristal"] .total,
:root[data-tema="cristal"] #aviso,
:root[data-tema="cristal"] #graf-tip {
  -webkit-backdrop-filter: var(--vidrio);
  backdrop-filter: var(--vidrio);
  background-image: var(--brillo);
  border-color: rgba(255,255,255,.14);
  /* Doble sombra: una interior arriba que finge el bisel iluminado, otra
     exterior abajo que despega la pieza del fondo. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(255,255,255,.05),
              0 10px 34px rgba(0,0,0,.42);
}

:root[data-tema="cristal"] .barra {
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  background: rgba(255,255,255,.05);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
}

/* Radios concéntricos: el interior siempre menor que el contenedor. */
:root[data-tema="cristal"] { --r-s: 11px; --r-m: 16px; --r-l: 24px; }

:root[data-tema="cristal"] input,
:root[data-tema="cristal"] select {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* El botón principal es cristal TEÑIDO, no un rectángulo plano de color: el
   material es el mismo, cambia el tinte. */
:root[data-tema="cristal"] button {
  background: linear-gradient(140deg, rgba(255,111,99,.92), rgba(224,80,74,.78));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 6px 18px rgba(224,80,74,.30);
}
:root[data-tema="cristal"] button.fantasma {
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
:root[data-tema="cristal"] button.peligro {
  background: rgba(255,107,112,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-tema="cristal"] tbody tr:hover td { background: rgba(255,255,255,.05); }

/* Si el equipo no soporta backdrop-filter, el material se vuelve opaco en vez
   de quedar un panel casi invisible sobre las auroras. */
@supports not (backdrop-filter: blur(1px)) {
  :root[data-tema="cristal"] .tarjeta,
  :root[data-tema="cristal"] .kpi,
  :root[data-tema="cristal"] .barra { background: #17151F; }
}

/* Botón de tema: cambia el icono según lo que se vería al pulsarlo. */
.tema {
  cursor: pointer; background: transparent; border: 1px solid var(--linea);
  color: var(--suave); border-radius: 999px; width: 34px; height: 34px;
  padding: 0; font-size: 15px; line-height: 1; flex: none;
}
.tema:hover { color: var(--texto); border-color: var(--suave); }
.operacion .tema { width: 44px; height: 44px; font-size: 18px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Marca --- */
.marca { display: inline-flex; flex-direction: column; line-height: .95; }
.marca .bm { font-size: 23px; font-weight: 800; letter-spacing: -1.3px; color: var(--texto); }
.marca .bm em { color: var(--coral); font-style: normal; }
.marca .bs { font-size: 10.5px; font-weight: 600; letter-spacing: .6px; color: var(--suave);
             align-self: flex-end; margin-top: 1px; }
.marca .bs em { color: var(--coral); font-style: normal; }

/* --------------------------------------------------------------- Barra --- */
.barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
}
.barra .donde { font-size: 13px; color: var(--suave); font-weight: 600; letter-spacing: .2px; }
.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.barra .quien { font-size: 12.5px; color: var(--suave); }

.wrap { padding: 22px; max-width: 1240px; margin: 0 auto; }

/* -------------------------------------------------------------- Título --- */
/* La explicación no es decoración: es la diferencia entre una pantalla que se
   entiende sola y una que necesita que alguien te la enseñe. */
.encabezado { margin-bottom: 20px; }
.encabezado h1 { font-size: 26px; font-weight: 800; letter-spacing: -.7px; margin: 0 0 6px; }
.encabezado p  { margin: 0; color: var(--suave); font-size: 14.5px; max-width: 62ch; }

/* ------------------------------------------------------------- Tarjeta --- */
.rejilla   { display: grid; gap: 16px; }
/* 420 px, no 330: con el mínimo bajo, una pantalla ancha mete cinco columnas y
   cada tarjeta queda demasiado angosta para una tabla de cuatro o cinco campos.
   Vale más tener menos tarjetas por fila y que se lean enteras. */
.rejilla.d2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.rejilla.d3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Una tarjeta que ocupa toda la fila: para tablas con muchas columnas, que en
   media anchura quedan cortadas justo donde está el dato que importa. */
.rejilla > .completa { grid-column: 1 / -1; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  overflow: hidden;
}
.tarjeta > header {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--linea);
}
.tarjeta > header h2 {
  margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 9px;
}
/* Un filete de color en vez de un emoji: distingue la sección sin meterle
   ruido pictográfico a una pantalla de trabajo. */
.tarjeta > header h2::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--coral); flex: none;
}
.tarjeta > header h2.verde::before { background: var(--verde); }
.tarjeta > header h2.ambar::before { background: var(--ambar); }
.tarjeta > header h2.azul::before  { background: var(--azul); }
.tarjeta .ayuda { margin: 6px 0 0; font-size: 13px; color: var(--suave); line-height: 1.45; }
.tarjeta .cuerpo { padding: 16px 18px; }

/* ----------------------------------------------------------------- KPI --- */
.kpi {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-m); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 7px;
}
.kpi .et { font-size: 11.5px; color: var(--suave); text-transform: uppercase;
           letter-spacing: .7px; font-weight: 600; }
.kpi .vl { font-family: var(--mono); font-size: 25px; font-weight: 650;
           letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.kpi .pie { font-size: 12px; color: var(--tenue); }
.kpi.destaca { border-color: color-mix(in srgb, var(--verde) 40%, var(--linea)); }
.kpi.destaca .vl { color: var(--verde); }

/* ------------------------------------------------------------- Estados --- */
/* Siempre icono + palabra. Nunca solo color. */
.estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  font-family: var(--sans); white-space: nowrap;
}
.estado::before { font-size: 11px; }
.estado.ok,  .estado.ACTIVA, .estado.APROBADO, .estado.VINCULADO, .estado.ACTIVO {
  background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.estado.ok::before, .estado.ACTIVA::before, .estado.APROBADO::before,
.estado.VINCULADO::before, .estado.ACTIVO::before { content: "✓"; }

.estado.espera, .estado.PENDIENTE {
  background: color-mix(in srgb, var(--ambar) 15%, transparent); color: var(--ambar); }
.estado.espera::before, .estado.PENDIENTE::before { content: "◷"; }

.estado.mal, .estado.BLOQUEADA, .estado.SOBREGIRADA, .estado.RECHAZADO,
.estado.SUSPENDIDO, .estado.REVOCADO, .estado.INACTIVO, .estado.ARCHIVADO {
  background: color-mix(in srgb, var(--rojo) 15%, transparent); color: var(--rojo); }
.estado.mal::before, .estado.BLOQUEADA::before, .estado.SOBREGIRADA::before,
.estado.RECHAZADO::before, .estado.SUSPENDIDO::before, .estado.REVOCADO::before,
.estado.INACTIVO::before, .estado.ARCHIVADO::before { content: "✕"; }

.estado.info, .estado.rol, .estado.VENTA {
  background: color-mix(in srgb, var(--azul) 15%, transparent); color: var(--azul); }
.estado.RECARGA { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); }
.estado.REFUND, .estado.RETIRO { background: color-mix(in srgb, var(--ambar) 15%, transparent); color: var(--ambar); }
.estado.TRASPASO { background: color-mix(in srgb, var(--azul) 15%, transparent); color: var(--azul); }

/* ------------------------------------------------------------- Tablas ---- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
th { color: var(--suave); font-weight: 600; font-size: 11.5px;
     text-transform: uppercase; letter-spacing: .5px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--panel2); }
/* El dinero siempre monoespaciado y alineado a la derecha: así las columnas de
   pesos se pueden comparar de un vistazo sin leer cifra por cifra. */
td.num, th.num { text-align: right; font-family: var(--mono);
                 font-variant-numeric: tabular-nums; }
.scroll-x { overflow-x: auto; }
.vacio { color: var(--tenue); font-style: italic; }
.suave { color: var(--suave); }
.tenue { color: var(--tenue); }
.mono  { font-family: var(--mono); }

/* Signo del dinero en una tabla. Se nombran por lo que SIGNIFICAN y no por su
   color: cambiar la paleta no debería obligar a tocar el HTML. Y no se reusan
   .verde/.ambar, que solo pintan la barrita del encabezado de una tarjeta —
   aplicarlas a una celda no hacía nada, que es como los importes de la lista
   de transacciones acabaron todos en blanco. */
.mas   { color: var(--verde); }
.menos { color: var(--coral); }
.ojo   { color: var(--ambar); }

/* ------------------------------------------------------------ Formularios */
form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12px; color: var(--suave); font-weight: 600; }
.campo .pista { font-size: 11.5px; color: var(--tenue); font-weight: 400; }

input, select, textarea {
  font-family: var(--sans); font-size: 15px;
  background: var(--panel2); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--r-s);
  padding: 10px 12px; min-width: 0; width: 160px;
}
input.corto { width: 100px; }
input.largo, select.largo { width: 240px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 2px;
}
input::placeholder { color: var(--tenue); }

button {
  cursor: pointer; font-family: var(--sans); font-size: 14.5px; font-weight: 650;
  background: var(--coral); color: var(--coral-on);
  border: none; border-radius: var(--r-s); padding: 11px 18px;
  transition: filter .15s;
  /* Un botón nunca se parte en dos renglones: "Dar de baja" quebrado en "Dar de
     / baja" se lee como dos cosas distintas y descuadra la fila de la tabla. */
  white-space: nowrap;
}
button:hover { filter: brightness(1.08); }
button:active { filter: brightness(.94); }
/* Un botón apagado que se ve encendido es peor que no dar señal: se pulsa, no
   pasa nada, y no hay forma de saber si falló el botón o falló el sistema. */
button:disabled { opacity: .4; cursor: not-allowed; filter: none; }
button:disabled:hover { filter: none; }
button.fantasma { background: var(--panel2); color: var(--texto); border: 1px solid var(--linea); }
button.mini { padding: 5px 11px; font-size: 12.5px; }
button.peligro { background: color-mix(in srgb, var(--rojo) 15%, transparent);
                 color: var(--rojo); border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent); }

/* Barra de proporción dentro de una celda: compara magnitudes de un vistazo
   sin leer cifra por cifra. Un solo tono (magnitud = escala secuencial). */
/* `display:block` explícito: sin él la barra hereda `inline` cuando se pone
   sobre un <span>, y un elemento inline IGNORA la altura — así que la barra
   existe en el DOM, mide 5px según el CSS, y no se ve nada. Falla en silencio
   según la etiqueta que use quien la llama, que es lo peor que puede hacer una
   pieza compartida. (admin.html ya llevaba un parche a mano por esto.) */
.prop { display: block; height: 5px; border-radius: 3px; background: var(--panel2);
        overflow: hidden; margin-top: 5px; min-width: 60px; }
.prop i { display: block; height: 100%; border-radius: 3px;
          background: var(--graf-1); transition: width .5s ease; }

/* ------------------------------------------------- Panel con lateral ------
   Para las pantallas de escritorio con MUCHAS secciones. Administración tenía
   siete apiladas: 2.676 px, casi cuatro pantallas de scroll. Para dar de alta
   un local había que bajar buscando entre organizadores, eventos y vendedores.
   Con lateral, cada sección ocupa la pantalla y se llega de un clic.

   NO se aplica a Taquilla ni Mi pulsera: esas se usan de pie y con prisa, y
   meterles densidad de escritorio desharía justo lo que las hace usables. El
   layout sigue a la situación de uso, no al gusto.
   ------------------------------------------------------------------------- */
.panel { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }

.lateral {
  position: sticky; top: 78px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--r-l); padding: 10px;
}
.lateral .grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--tenue); font-weight: 700; padding: 12px 12px 6px;
}
.lateral a, .lateral button.nav {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; width: 100%;
  padding: 10px 12px; border-radius: var(--r-s);
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--suave); text-align: left; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.lateral button.nav:hover, .lateral a:hover { background: var(--panel2); color: var(--texto); }
.lateral button.nav[aria-current="true"] {
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  color: var(--texto);
}
/* El filete marca la sección activa. Con color solo, en el tema claro la
   diferencia entre activa e inactiva casi no se ve. */
.lateral button.nav[aria-current="true"]::before {
  content: ""; width: 3px; height: 16px; border-radius: 2px;
  background: var(--coral); margin-left: -6px;
}
.lateral button.nav .cuantos {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--tenue); font-variant-numeric: tabular-nums;
}

/* Solo una sección visible a la vez. */
.seccion { display: none; }
.seccion.activa { display: block; }

@media (max-width: 900px) {
  /* En pantalla angosta el lateral pasa a ser una fila que se desplaza: una
     columna de 232 px se comería la mitad del ancho útil. */
  .panel { grid-template-columns: 1fr; }
  .lateral {
    position: static; flex-direction: row; overflow-x: auto;
    gap: 6px; padding: 8px;
  }
  .lateral .grupo { display: none; }
  .lateral button.nav, .lateral a { width: auto; }
  .lateral button.nav .cuantos { display: none; }
}

/* --------------------------------------------------------------- Aviso --- */
#aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--panel); border: 1px solid var(--linea);
  border-left: 4px solid var(--verde);
  border-radius: var(--r-m); padding: 13px 20px;
  font-size: 14.5px; font-weight: 600; max-width: 88vw;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 60;
}
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }
#aviso.error { border-left-color: var(--rojo); }

/* --------------------------------------------------------------- Login --- */
.puerta { display: flex; align-items: center; justify-content: center; min-height: 74vh; padding: 20px; }
.puerta .tarjeta { width: 100%; max-width: 380px; }
.puerta form { flex-direction: column; align-items: stretch; }
.puerta input { width: 100%; }
.puerta button { width: 100%; padding: 14px; font-size: 16px; }
/* En columna, `flex: 1 1 190px` haría crecer los campos EN ALTO hasta llenar la
   tarjeta y separarlos con huecos enormes. Aquí cada campo ocupa lo suyo.
   Tres clases a propósito: `.operacion .campo` viene más abajo en el archivo y
   con la misma especificidad le ganaría a un selector de dos. */
.puerta form .campo { flex: none; }

/* ===========================================================================
   MODO OPERACIÓN — de pie, con prisa, a un brazo de distancia
   =========================================================================== */
.operacion { font-size: 17px; }
.operacion .wrap { max-width: 860px; }
.operacion .encabezado h1 { font-size: 30px; }
.operacion .tarjeta > header h2 { font-size: 18px; }
.operacion .tarjeta > header h2::before { height: 18px; width: 4px; }
.operacion .tarjeta .ayuda { font-size: 14px; }
.operacion .campo label { font-size: 13.5px; }
.operacion input, .operacion select {
  font-size: 19px; padding: 15px 16px; width: 100%; border-radius: var(--r-m);
}
.operacion .campo { flex: 1 1 190px; }
/* 56 px es el mínimo para acertarle con el pulgar sin mirar. */
.operacion button { font-size: 17px; padding: 17px 26px; min-height: 56px; border-radius: var(--r-m); }
.operacion button.mini { font-size: 14px; padding: 10px 16px; min-height: 44px; }
.operacion form { gap: 14px; }
.operacion .kpi .vl { font-size: 30px; }
.operacion table { font-size: 15px; }
.operacion th, .operacion td { padding: 13px 12px; }

/* El resultado de una operación tiene que leerse sin acercarse a la pantalla. */
.resultado {
  border-radius: var(--r-m); padding: 18px 20px; margin-top: 16px;
  border: 1px solid var(--linea); background: var(--panel2);
}
.resultado.ok  { border-color: color-mix(in srgb, var(--verde) 45%, transparent);
                 background: color-mix(in srgb, var(--verde) 9%, var(--panel2)); }
.resultado.mal { border-color: color-mix(in srgb, var(--rojo) 45%, transparent);
                 background: color-mix(in srgb, var(--rojo) 9%, var(--panel2)); }
.resultado .titulo { font-size: 14px; font-weight: 700; letter-spacing: .3px;
                     text-transform: uppercase; color: var(--suave); }
.resultado .cifra {
  font-family: var(--mono); font-size: clamp(34px, 9vw, 52px); font-weight: 700;
  letter-spacing: -2px; line-height: 1.05; margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.resultado.ok .cifra  { color: var(--verde); }
.resultado.mal .cifra { color: var(--rojo); font-size: clamp(24px, 6vw, 34px); letter-spacing: -1px; }
.resultado .nota { font-size: 14px; color: var(--suave); }

/* Instrucción para el operador: qué tiene que HACER ahora. */
.instruccion {
  margin-top: 14px; padding: 15px 18px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
  font-size: 16px; font-weight: 650; color: var(--ambar);
}

@media (max-width: 820px) {
  .wrap { padding: 16px; }
  .barra { padding: 11px 16px; }
  .rejilla.d2, .rejilla.d3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------- Asistente paso a paso */
/* Un alta con dependencias entre campos (el padre manda sobre las fechas, el
   organizador manda sobre qué padres valen) no se explica con seis casillas
   juntas: los errores sólo aparecen al enviar, cuando ya se llenó todo. El
   asistente parte la decisión y, sobre todo, sólo ofrece opciones que ya son
   válidas — así el error no se valida, se vuelve inalcanzable. */
.asistente { max-width: 580px; }

.pasos { display: flex; list-style: none; margin: 2px 0 24px; padding: 0; }
.pasos li {
  flex: 1; position: relative; text-align: center; padding-top: 30px;
  font-size: 11px; color: var(--tenue); line-height: 1.3;
}
.pasos li::before {                        /* el número, o la palomita */
  content: attr(data-n); position: absolute; top: 0; left: 50%; z-index: 1;
  transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--linea);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  transition: background .18s, border-color .18s, color .18s;
}
.pasos li::after {                         /* el hilo hasta el siguiente */
  content: ''; position: absolute; top: 12px; left: 50%; z-index: 0;
  width: 100%; height: 1px; background: var(--linea);
}
.pasos li:last-child::after { display: none; }
.pasos li.hecho::before  { content: '✓'; background: var(--verde); border-color: var(--verde); color: #fff; }
.pasos li.hecho::after   { background: var(--verde); }
.pasos li.actual::before { background: var(--coral); border-color: var(--coral); color: var(--coral-on); }
.pasos li.actual         { color: var(--texto); font-weight: 650; }

.as-titulo { font-size: 19px; font-weight: 680; margin: 0 0 5px; letter-spacing: -.01em; }
.as-ayuda  { font-size: 13px; color: var(--suave); line-height: 1.5; margin: 0 0 16px; }

/* Las opciones son botones y no radios: el área pulsable es la tarjeta entera,
   que en una tableta con guantes es la diferencia entre acertar y no. */
.opciones { display: flex; flex-direction: column; gap: 9px; }
.opcion {
  display: block; width: 100%; text-align: left; white-space: normal;
  background: var(--panel2); color: var(--texto); font-weight: 500;
  border: 1px solid var(--linea); border-radius: var(--r-s); padding: 13px 15px;
}
.opcion:hover  { filter: none; border-color: var(--suave); }
.opcion.sel    { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--panel2)); }
.opcion b      { display: block; font-size: 14.5px; font-weight: 650; }
.opcion small  { display: block; font-size: 12.5px; color: var(--suave); margin-top: 3px; line-height: 1.45; font-weight: 400; }
.opcion:disabled { opacity: .45; cursor: not-allowed; }

/* El resumen previo: lo que se va a crear, en palabras, antes de crearlo. */
.resumen { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 13.5px; }
.resumen dt { color: var(--suave); }
.resumen dd { margin: 0; font-weight: 600; }

.as-pie { display: flex; gap: 10px; align-items: center; margin-top: 22px;
          padding-top: 16px; border-top: 1px solid var(--linea); }
.as-pie .crece { flex: 1; }
.as-freno { font-size: 12.5px; color: var(--ambar); }

/* La vista previa de los números: ver "30001, 30002…" convence más que
   cualquier explicación de qué significa elegir un bloque. */
.muestra { font-family: var(--mono); font-size: 15px; letter-spacing: .02em;
           background: var(--panel2); border: 1px solid var(--linea);
           border-radius: var(--r-s); padding: 12px 14px; margin-top: 12px; }
.muestra em { font-style: normal; color: var(--tenue); }

/* La × para retirar un permiso, dentro de su propia etiqueta. Va pegada al rol
   al que pertenece: una columna de botones aparte obligaría a contar filas para
   saber cuál se está quitando, y quitar el permiso equivocado no se deshace
   solo — hay que volver a otorgarlo. */
.estado.rol { display: inline-flex; align-items: center; gap: 6px; }
.estado.rol .quita {
  all: unset; cursor: pointer; line-height: 1; padding: 0 2px;
  font-size: 15px; font-weight: 700; color: var(--tenue);
  border-radius: 4px; transition: color .15s, background .15s;
}
.estado.rol .quita:hover { color: var(--rojo); background: color-mix(in srgb, var(--rojo) 18%, transparent); }
.estado.rol .quita:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

/* ------------------------------------------------------------- Pestañas ---
   Para una pantalla que tiene UN sujeto (este evento) y varias facetas. Se usa
   pestañas y no barra lateral porque la cabecera de arriba —el nombre del
   evento y sus cifras— tiene que seguir viéndose en todas: es el contexto que
   da sentido a lo que hay debajo, y una barra lateral lo empujaría fuera. */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 16px;
            border-bottom: 1px solid var(--linea); }
.pestanas .pes {
  background: none; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--suave); font-weight: 600; font-size: 14px;
  padding: 9px 14px; margin-bottom: -1px;
}
.pestanas .pes:hover { filter: none; color: var(--texto); background: var(--panel2); }
.pestanas .pes.activa { color: var(--texto); border-bottom-color: var(--coral); }

/* La marca es el enlace al índice de pantallas. Es donde todo el mundo busca
   "el inicio", así que no gasta un sitio más en la barra — que en una tablet ya
   va justa. Sin subrayado ni color de enlace: sigue leyéndose como el logo. */
a.marca { text-decoration: none; }
a.marca:hover .bm { color: var(--coral); }
a.marca:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }