/* =============================================================================
   Tuerka Ticket — tokens del sistema de diseño (dirección D2 "Noche 3D").
   Fuente de verdad: este archivo. Especificación: DESIGN.md § 3–4.
   ÚNICO archivo donde se permiten colores literales (bin/audit_design.php).
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  /* Color — superficie Noche */
  --noche:   #05070A;  /* fondo base */
  --panel:   #0B0F13;  /* tarjetas, superficies */
  --panel-2: #070A0D;  /* fondo de inputs */
  --panel-3: #0F1418;  /* hover de filas */
  --panel-4: #141A20;  /* fondo de badges neutros */
  --linea:   #1C242C;  /* bordes y divisiones */
  --linea-2: #26313B;  /* bordes de inputs, chips, barras inactivas */
  --linea-3: #34414C;  /* borde de botón secundario */
  --luz:     #EEF2F5;  /* texto principal */
  --bruma:   #C5CDD4;  /* texto de párrafo */
  --niebla:  #8A96A1;  /* texto secundario, etiquetas mono */
  --apagado: #5B6670;  /* deshabilitado, notas mínimas */

  /* Marca y estados — regla aguamarina/verde: DESIGN.md § 3.2 */
  --aguamarina:       #3DE0FF;  /* marca, acción, foco, en curso */
  --aguamarina-hover: #7BEAFF;
  --aguamarina-link:  #A8F1FF;
  --verde: #3CF07E;  /* SOLO confirmado: pagado, entra, ajustado */
  --ambar: #FFB224;  /* pendiente / revisar */
  --rojo:  #FF6166;  /* rechazado / no entra / destructivo */
  --whatsapp:       #25D366;  /* SOLO el botón flotante de WhatsApp del evento (W1, DESIGN.md § 6.2) */
  --sobre-whatsapp: #FFFFFF;

  --verde-10:      rgba(60, 240, 126, .10);
  --aguamarina-10: rgba(61, 224, 255, .10);
  --ambar-10:      rgba(255, 178, 36, .10);
  --rojo-10:       rgba(255, 97, 102, .10);

  --velo: rgba(5, 7, 10, .80);  /* caja de texto sobre 3D o imagen */
  --velo-escena: var(--velo);    /* la caja sobre la escena 3D; clara en Luz (historia 19) */

  /* Tipografía */
  --fuente: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Roles (E20): lo que una plantilla de evento reasigna. En Noche valen lo de siempre. */
  --accion:        var(--aguamarina);        /* fondo del botón primario, barras */
  --accion-hover:  var(--aguamarina-hover);
  --sobre-accion:  var(--noche);             /* texto sobre el botón primario */
  --enlace:        var(--aguamarina);
  --enlace-hover:  var(--aguamarina-link);
  --foco:          var(--aguamarina);        /* foco, opción marcada, número de inscripción */
  --logo-simbolo:  var(--aguamarina);        /* símbolo del logo y del sello (BRAND: en claro, versión Noche) */
  --placa:         var(--luz);               /* placa de logos de aliados */
  --sobre-placa:   var(--noche);
  --placa-oscura:  var(--panel);             /* logos claros ("fondo oscuro") */
  --titulo-fuente: var(--fuente);
  --titulo-peso:   900;
  --titulo-ancho:  125%;
  --titulo-mayus:  uppercase;
  --titulo-espacio: -.03em;

  /* Espaciado (escala de 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 120px;

  /* Radios: cortos. Cero píldoras (DESIGN.md § 6.2, auditoría R2) */
  --r-btn:    8px;
  --r-input:  8px;
  --r-tile:   12px;
  --r-card:   16px;
  --r-boleta: 18px;
  --r-stage:  20px;
  --r-phone:  36px;

  /* Sombra: una sola, neutra, solo para objetos en 3D CSS */
  --sombra-3d: 0 40px 80px rgba(0, 0, 0, .5);

  /* Movimiento */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-marca: 600ms;     /* solo el pago confirmado (historia 20, § 9) */
  --dur-resalte: 1200ms;  /* solo el resalte de lo recién guardado */
  --ease:    cubic-bezier(.2, 0, 0, 1);
  --ease-io: cubic-bezier(.45, 0, .15, 1);

  /* Contenedores */
  --ancho-landing: 1320px;
  --ancho-panel:   1360px;

  /* Marco del panel (historia 00, DESIGN.md § 6.14): barra superior y menú
     lateral, oscuros en cualquier tema del contenido */
  --barra:        #0E1318;
  --barra-caja:   var(--panel-4);
  --barra-sel:    var(--linea);
  --barra-linea:  var(--linea);
  --barra-luz:    var(--luz);
  --barra-suave:  #A9B4BE;

  /* Mapa (historia 22, DESIGN § 6.15): zonas, texto oscuro encima */
  --mapa-arena:   #E9C46A;
  --mapa-naranja: #F08A4B;
  --mapa-rosa:    #F27BA6;
  --mapa-lila:    #B39DFF;
  --mapa-cielo:   #7FB8F0;
  --mapa-oliva:   #C9D98A;
  --mapa-tinta:   #05070A;
}

/* Luz (historia 19): el claro de Tuerka Ticket, con la paleta del panel claro. Va aquí y no en
   plantillas.css porque la landing, la portada y /entrar no cargan plantillas.css. Fija con
   data-plantilla="luz"; en la automática ("auto") la toma quien tiene el sistema en claro.
   --velo sigue oscuro (es el fondo de los diálogos); --velo-escena es la caja sobre el 3D. */
[data-plantilla="luz"]{--noche:#F5F7FA;--panel:#FFFFFF;--panel-2:#F5F7FA;--panel-3:#EEF2F6;--panel-4:#E6EBF0;--linea:#DDE3E9;--linea-2:#C9D2DA;--linea-3:#A3AFBA;--luz:#12181D;--bruma:#3A4651;--niebla:#55606A;--apagado:#6B7680;--aguamarina:#0A6474;--aguamarina-hover:#084F5C;--aguamarina-link:#084F5C;--verde:#1C7A2E;--ambar:#8A5300;--rojo:#B3123A;--verde-10:rgba(28,122,46,.10);--aguamarina-10:rgba(10,100,116,.10);--ambar-10:rgba(138,83,0,.10);--rojo-10:rgba(179,18,58,.10);--velo-escena:rgba(245,247,250,.86);--accion:#0A6474;--accion-hover:#084F5C;--sobre-accion:#FFFFFF;--enlace:#0A6474;--enlace-hover:#084F5C;--foco:#0A6474;--logo-simbolo:#12181D;--placa:#FFFFFF;--sobre-placa:#12181D;--placa-oscura:#12181D;color-scheme:light}
@media (prefers-color-scheme:light){[data-plantilla="auto"]{--noche:#F5F7FA;--panel:#FFFFFF;--panel-2:#F5F7FA;--panel-3:#EEF2F6;--panel-4:#E6EBF0;--linea:#DDE3E9;--linea-2:#C9D2DA;--linea-3:#A3AFBA;--luz:#12181D;--bruma:#3A4651;--niebla:#55606A;--apagado:#6B7680;--aguamarina:#0A6474;--aguamarina-hover:#084F5C;--aguamarina-link:#084F5C;--verde:#1C7A2E;--ambar:#8A5300;--rojo:#B3123A;--verde-10:rgba(28,122,46,.10);--aguamarina-10:rgba(10,100,116,.10);--ambar-10:rgba(138,83,0,.10);--rojo-10:rgba(179,18,58,.10);--velo-escena:rgba(245,247,250,.86);--accion:#0A6474;--accion-hover:#084F5C;--sobre-accion:#FFFFFF;--enlace:#0A6474;--enlace-hover:#084F5C;--foco:#0A6474;--logo-simbolo:#12181D;--placa:#FFFFFF;--sobre-placa:#12181D;--placa-oscura:#12181D;color-scheme:light}}