/* ==========================================================================
   SPARK — tokens de marca y piezas compartidas (portal + panel admin)
   Fuente: SPARK Brandbook v1.0. Todo color, fuente y radio sale de aquí;
   un valor suelto en otro archivo es un error y va como token.
   ========================================================================== */

:root {
  /* --- Paleta del manual, tal cual --------------------------------------- */
  --prusia: #050A30;
  --tinta-marca: #1F1F1F;
  --azul: #0000FF;
  --aqua: #00FFCC;
  --gris: #EBEBEB;
  --fondo-claro: #F7F7F7;
  --papel: #EFEEEE;

  /* --- Fondo y superficies oscuras --------------------------------------- */
  --fondo: var(--prusia);
  --panel: #0A1140;              /* Prussian apenas levantado: separa sin cambiar de familia */
  --panel-hondo: #070C36;
  --azul-profundo: #0A14A0;      /* puente entre Prussian y Azul, solo en degradados */

  /* --- Acentos ------------------------------------------------------------ */
  --acento: var(--aqua);         /* una sola cosa importante por vista */
  --electrico: var(--azul);      /* fondos y teja del sello; nunca texto sobre oscuro */
  --acento-tenue: rgba(0, 255, 204, .12);
  --acento-borde: rgba(0, 255, 204, .5);
  --acento-sombra: rgba(0, 255, 204, .25);

  /* --- Texto sobre oscuro: el Gris del manual a distintas opacidades ------
     Antes eran grises lavanda inventados. Ahora derivan de #EBEBEB sobre
     Prussian, así el texto secundario es de la marca y no del navegador.   */
  --tinta: var(--fondo-claro);   /* #F7F7F7 */
  --tinta-2: var(--gris);        /* #EBEBEB */
  --tinta-3: #CFD0D5;            /* Gris al 88 % */
  --suave: #AAACB7;              /* Gris al 72 % — 8.4:1 sobre Prussian */
  --tenue: #868899;              /* Gris al 56 % — 5.4:1 sobre Prussian, pasa AA en 11 px */

  /* --- Superficies claras (bloques alternos, como el manual) -------------- */
  --claro-fondo: var(--fondo-claro);
  --claro-tarjeta: #FFFFFF;
  --claro-linea: var(--gris);
  --claro-tinta: var(--tinta-marca);
  --claro-suave: #5E5E5E;        /* 6.3:1 sobre Fondo */
  --claro-acento: var(--azul);   /* el Aqua no se lee sobre claro (1.3:1): ahí manda el Azul */

  /* --- Líneas ------------------------------------------------------------- */
  --linea: rgba(235, 235, 235, .14);
  --linea-fina: rgba(235, 235, 235, .08);
  --linea-fuerte: rgba(235, 235, 235, .25);
  --linea-boton: rgba(235, 235, 235, .35);

  /* --- Estados (semánticos, aparte de la paleta) -------------------------- */
  --privado: #FF9A9A;
  --privado-borde: rgba(255, 120, 120, .5);
  --privado-fondo: rgba(255, 90, 90, .12);
  --aviso: #FFC86B;

  /* --- Materiales: vidrio, metal y neón ----------------------------------
     El neón es solo para lo que está encendido de verdad. Si todo brilla,
     nada brilla.                                                           */
  --vidrio: rgba(16, 24, 78, .42);
  --vidrio-hondo: rgba(7, 12, 54, .55);
  --vidrio-brillo: rgba(255, 255, 255, .16);
  --metal-filo: linear-gradient(140deg,
    rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 22%,
    rgba(255, 255, 255, .02) 50%, rgba(0, 255, 204, .22) 78%, rgba(255, 255, 255, .35) 100%);
  --metal-texto: linear-gradient(180deg,
    #FFFFFF 0%, #E4E9F2 38%, #8C95AE 50%, #D9DFEA 62%, #F7F7F7 100%);
  --metal-aqua: linear-gradient(180deg,
    #E9FFFA 0%, #9FFFEA 40%, #00C9A2 51%, #7FFFE3 64%, #E9FFFA 100%);
  --neon: 0 0 6px rgba(0, 255, 204, .9), 0 0 18px rgba(0, 255, 204, .45);
  --neon-caja: 0 0 0 1px rgba(0, 255, 204, .55), 0 0 14px rgba(0, 255, 204, .45), inset 0 0 10px rgba(0, 255, 204, .28);
  --neon-coral: 0 0 6px rgba(255, 120, 120, .8), 0 0 16px rgba(255, 90, 90, .35);
  --neon-texto: 0 0 10px rgba(0, 255, 204, .55), 0 0 28px rgba(0, 255, 204, .3);

  /* --- Tipografía: Outfit 800/900 solo en titulares; Inter en todo lo demás.
     "Nunca al revés." — manual de marca. ----------------------------------- */
  --fuente-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-titular: 800;
  --peso-display: 900;

  /* --- Radios: el manual es arquitectónico; el sello va a 8 px ------------ */
  --radio-pildora: 999px;
  --radio-tarjeta: 14px;
  --radio-panel: 12px;
  --radio-chico: 8px;

  /* --- Layout ------------------------------------------------------------- */
  --ancho-max: 1280px;
  --margen-lateral: clamp(20px, 5vw, 64px);
  --alto-nav: 72px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--fuente-display);
  font-weight: var(--peso-titular);
  letter-spacing: -.02em;
  text-wrap: balance;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Sin esto, cualquier clase con `display` le gana al atributo `hidden`.
   Misma trampa que documenta el CLAUDE.md del casting. */
[hidden] { display: none !important; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--acento); background: var(--acento); color: var(--fondo);
  font-weight: 600; font-size: 15px; cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s, color .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--acento-sombra); }
/* El botón principal es un tubo encendido: núcleo claro arriba, aqua abajo. */
.btn:not(.btn--fantasma):not(.btn--oscuro) {
  background: linear-gradient(180deg, #B8FFF0 0%, var(--acento) 55%, #00D9AE 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 18px rgba(0, 255, 204, .35);
}
.btn:not(.btn--fantasma):not(.btn--oscuro):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 28px rgba(0, 255, 204, .6), 0 10px 30px var(--acento-sombra);
}
.btn--fantasma {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01));
  color: var(--tinta); border-color: var(--linea-boton);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn--fantasma:hover { border-color: var(--acento); color: var(--acento); box-shadow: none; }
.btn--chico { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--grande { min-height: 56px; padding: 0 34px; font-size: 16px; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* --- Chips de filtro ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--radio-pildora);
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.chip:hover { border-color: var(--acento-borde); }
/* El filtro elegido se enciende: mismo tubo que "En vivo". */
.chip[aria-pressed="true"] {
  color: #E9FFFA; border-color: rgba(0, 255, 204, .75);
  background: linear-gradient(180deg, rgba(0, 255, 204, .22), rgba(0, 255, 204, .06));
  box-shadow: var(--neon-caja); text-shadow: 0 0 8px rgba(0, 255, 204, .7);
}
.chip__n { opacity: .7; font-size: 12px; }

/* --- Ceja: etiqueta corrida del manual ("MANIFIESTO", "TIPOGRAFÍA") ------ */
.ceja {
  font-family: var(--fuente-texto);
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--acento); font-weight: 600;
}

/* --- Wordmark "Spark": máscara, así el color lo decide el token ---------- */
.logo {
  display: inline-block; aspect-ratio: 1600 / 452; height: 30px;
  background: currentColor; color: var(--acento);
  -webkit-mask: url("/img/marca/spark-wordmark.png") center / contain no-repeat;
          mask: url("/img/marca/spark-wordmark.png") center / contain no-repeat;
}

/* --- Sello: marca sólida sobre teja azul, radio 8 px (manual) ------------ */
.sello {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: var(--radio-chico); background: var(--azul);
}
.sello::after {
  content: ""; position: absolute; inset: 22% 14%;
  background: var(--fondo-claro);
  -webkit-mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
          mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
}

/* --- Filete separador: la marca centrada entre dos líneas de 1 px -------- */
.filete { display: flex; align-items: center; gap: 18px; color: var(--linea-fuerte); }
.filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.filete i {
  width: 30px; aspect-ratio: 640 / 383; background: var(--tenue);
  -webkit-mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
          mask: url("/img/marca/spark-monograma.png") center / contain no-repeat;
}

/* --- Pestaña: etiqueta en esquina, navy con texto Aqua ("VÍA PÚBLICA") --- */
.pestana {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  background: var(--fondo); color: var(--acento);
  font-family: var(--fuente-texto); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; padding: 12px 18px;
}

/* --- Campo: patrón de monogramas detrás de héroes oscuros y pies (4 %) --- */
.campo { position: relative; isolation: isolate; }
.campo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--fondo-claro); opacity: .04;
  -webkit-mask: url("/img/marca/campo.png") 0 0 / 220px repeat;
          mask: url("/img/marca/campo.png") 0 0 / 220px repeat;
}


/* --- Etiquetas de estado: tubos de neón ----------------------------------
   Encendido  → vivo, ok, publicado. Brilla y tiene luz piloto.
   En espera  → por confirmar. Filamento ámbar tenue, sin brillo.
   Bloqueo    → falta autorización. Frío, con piloto coral apagado.
   Apagado    → sin datos, oculto. Vidrio sin luz.
   Alerta     → coral encendido: lo único rojo que brilla.               */
.etq {
  --luz: transparent;
  --luz-borde: var(--linea-fuerte);
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radio-pildora); padding: 5px 12px 5px 10px;
  font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--suave);
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Luz piloto. Las etiquetas sin estado (acciones, enlaces) no la llevan. */
.etq[class*="etq--"]::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--luz); box-shadow: 0 0 0 1px var(--luz-borde) inset;
}
.etq--alto { min-height: 40px; padding: 0 14px; }
.etq--alto::before { content: none !important; }
a.etq { transition: border-color .2s, color .2s, box-shadow .2s; }
a.etq:hover { border-color: var(--acento-borde); color: #E9FFFA; box-shadow: 0 0 12px rgba(0, 255, 204, .2); }

.etq--vivo, .etq--ok {
  --luz: #CFFFF4; --luz-borde: transparent;
  color: #E9FFFA; font-weight: 600;
  border-color: rgba(0, 255, 204, .75);
  background: linear-gradient(180deg, rgba(0, 255, 204, .2), rgba(0, 255, 204, .06));
  box-shadow: var(--neon-caja);
  text-shadow: 0 0 8px rgba(0, 255, 204, .7);
}
.etq--vivo::before, .etq--ok::before { box-shadow: var(--neon); }
.etq--vivo { animation: encender 1.1s steps(1, end) both; }
.etq--vivo::before { animation: latido 2.6s ease-in-out 1.2s infinite; }
/* Que no se enciendan todas a la vez: un tubo real titila por su cuenta. */
tr:nth-child(3n+2) .etq--vivo { animation-delay: .18s; }
tr:nth-child(3n) .etq--vivo   { animation-delay: .34s; }

.etq--espera {
  --luz: rgba(255, 200, 107, .25); --luz-borde: rgba(255, 200, 107, .8);
  color: #D8CCB4; border-color: rgba(255, 200, 107, .32); border-style: dashed;
  background: linear-gradient(180deg, rgba(255, 200, 107, .07), rgba(255, 200, 107, .01));
}
.etq--bloqueo {
  --luz: transparent; --luz-borde: rgba(255, 154, 154, .7);
  color: var(--suave); background: rgba(255, 255, 255, .025);
}
.etq--apagado { --luz: transparent; --luz-borde: rgba(255, 255, 255, .25); color: var(--tenue); background: rgba(255, 255, 255, .02); }
.etq--alerta {
  --luz: #FFD6D6; --luz-borde: transparent;
  color: #FFE3E3; font-weight: 600; border-color: rgba(255, 140, 140, .75);
  background: linear-gradient(180deg, rgba(255, 90, 90, .2), rgba(255, 90, 90, .06));
  box-shadow: 0 0 0 1px rgba(255, 120, 120, .4), 0 0 14px rgba(255, 90, 90, .35), inset 0 0 10px rgba(255, 90, 90, .22);
  text-shadow: 0 0 8px rgba(255, 120, 120, .6);
}
.etq--alerta::before { box-shadow: var(--neon-coral); }

@keyframes encender {
  0%   { opacity: .15; filter: saturate(0); }
  12%  { opacity: 1;   filter: none; }
  18%  { opacity: .25; filter: saturate(0); }
  30%  { opacity: 1;   filter: none; }
  36%  { opacity: .5; }
  48%, 100% { opacity: 1; filter: none; }
}
@keyframes latido {
  0%, 100% { box-shadow: var(--neon); }
  50%      { box-shadow: 0 0 2px rgba(0, 255, 204, .6), 0 0 6px rgba(0, 255, 204, .2); }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}