/* PortSync V2.5 · prototipo «4 · Fusión» · panel-tokens.css — roles de color del Panel rehecho (encargo F5).
   Va DESPUÉS de sitio/assets/css/portsync-tokens.css, comun.css y pilote-tokens.css (de este último solo se leen los
   materiales del modelo, --mat-*, para que el dibujo del muelle use el mismo acero, hormigón y arena que el zoom al pilote).
   Ningún color nuevo: todo es var() o color-mix() de los primitivos de portsync-tokens.css. El azul del logo (#114373 =
   --azul-800) y su escala son la marca y el único tono de los datos; rojo, ámbar y verde solo marcan Crítico, Advertencia
   y Sin Novedad. comun.js fija <html data-theme="light|dark"> antes de pintar: el oscuro es la base y el claro lo pisa.
   Contraste (AA): --pf-tinta-3 sobre --pf-plano y --pf-fondo ≥ 4,5:1 en los dos temas; las marcas de estado ≥ 3:1. */

:root {
  /* ---------- tema oscuro: neutros verdaderos, sin azul marino con neón ---------- */
  --pf-fondo: var(--neutro-950);
  --pf-plano: var(--neutro-900);                 /* superficie de las placas */
  --pf-plano-2: var(--neutro-850);               /* pozo dentro de una placa, fila activa */
  --pf-plano-3: var(--neutro-800);
  --pf-linea: color-mix(in srgb, var(--neutro-200) 12%, transparent);
  --pf-linea-2: color-mix(in srgb, var(--neutro-200) 22%, transparent);
  --pf-tinta: var(--neutro-50);
  --pf-tinta-2: var(--neutro-300);
  --pf-tinta-3: var(--neutro-400);
  --pf-tinta-4: var(--neutro-500);

  --pf-acento: var(--azul-400);                  /* el tono de los datos: índice, cursor, guías */
  --pf-acento-tinta: var(--azul-300);            /* texto en azul */
  --pf-acento-suave: color-mix(in srgb, var(--azul-500) 18%, transparent);
  --pf-acento-relleno: var(--azul-600);          /* el único control lleno (reproducir, simular) */
  --pf-acento-relleno-2: var(--azul-500);        /* su estado al pasar el puntero */
  --pf-sobre-acento: var(--blanco);
  --pf-guia: var(--azul-300);                    /* líneas guía de los rótulos */

  /* estados: marcas en gráficos y piezas (≥ 3:1) y pastillas pálidas con tinta del mismo tono */
  --pf-ok: var(--verde-400);   --pf-ok-tinta: var(--verde-300);   --pf-ok-fondo: color-mix(in srgb, var(--verde-500) 16%, transparent);
  --pf-warn: var(--ambar-300); --pf-warn-tinta: var(--ambar-300); --pf-warn-fondo: color-mix(in srgb, var(--ambar-400) 16%, transparent);
  --pf-crit: var(--rojo-400);  --pf-crit-tinta: var(--rojo-300);  --pf-crit-fondo: color-mix(in srgb, var(--rojo-500) 18%, transparent);
  --pf-nodata: var(--neutro-400);
  /* bandas del semáforo bajo la curva del índice (tintes, no rellenos) */
  --pf-banda-ok: color-mix(in srgb, var(--verde-500) 10%, transparent);
  --pf-banda-warn: color-mix(in srgb, var(--ambar-400) 9%, transparent);
  --pf-banda-crit: color-mix(in srgb, var(--rojo-500) 10%, transparent);

  /* render de la Maqueta: la escena es oscura en los dos temas (texto blanco encima, con su velo) */
  --pf-mapa-tinta: var(--blanco);
  --pf-mapa-tinta-2: var(--blanco-85);
  --pf-mapa-velo: color-mix(in srgb, var(--neutro-1000) 58%, transparent);
  --pf-mapa-anillo: var(--azul-200);
  --pf-mapa-fondo: var(--azul-950);
  --pf-vidrio: color-mix(in srgb, var(--neutro-950) 62%, transparent);   /* el único vidrio: la leyenda sobre el render */

  /* elevación del muelle (dibujo técnico): materiales de pilote-tokens.css, con respaldo en la escala */
  --pf-tablero: var(--neutro-600);
  --pf-tablero-borde: var(--neutro-400);
  --pf-acero: var(--neutro-400);
  --pf-acero-luz: var(--neutro-200);
  --pf-hormigon: var(--mat-hormigon, var(--neutro-300));
  --pf-agua: color-mix(in srgb, var(--azul-700) 34%, transparent);
  --pf-agua-marea: color-mix(in srgb, var(--azul-500) 14%, transparent);
  --pf-agua-linea: var(--azul-400);
  --pf-suelo: color-mix(in srgb, var(--mat-arena, var(--neutro-400)) 34%, var(--neutro-900));
  --pf-suelo-trama: color-mix(in srgb, var(--mat-arena, var(--neutro-400)) 46%, transparent);
  --pf-caja: var(--neutro-300);

  /* gráficos: rejilla y señales en neutros (un solo tono de datos: el índice) */
  --pf-rejilla: color-mix(in srgb, var(--neutro-200) 9%, transparent);
  --pf-senal: var(--neutro-300);
  --pf-senal-2: var(--neutro-500);
  --pf-hueco: color-mix(in srgb, var(--neutro-400) 22%, transparent);
  /* lámina (R1): trama del rótulo «Simulación» y ejes de los pilotes en el plano del muelle */
  --pf-sim-trazo: var(--neutro-400);
  --pf-eje: color-mix(in srgb, var(--neutro-200) 55%, transparent);
}

:root[data-theme="light"] {
  /* ---------- tema claro (el primero, como Medusa): blanco técnico con un tinte del azul ---------- */
  --pf-fondo: color-mix(in srgb, var(--azul-50) 45%, var(--neutro-50));
  --pf-plano: var(--blanco);
  --pf-plano-2: color-mix(in srgb, var(--azul-50) 70%, var(--blanco));
  --pf-plano-3: var(--neutro-100);
  --pf-linea: color-mix(in srgb, var(--azul-950) 9%, transparent);
  --pf-linea-2: color-mix(in srgb, var(--azul-950) 17%, transparent);
  --pf-tinta: var(--neutro-950);
  --pf-tinta-2: var(--neutro-700);
  --pf-tinta-3: var(--neutro-600);
  --pf-tinta-4: var(--neutro-500);

  --pf-acento: var(--azul-600);
  --pf-acento-tinta: var(--azul-700);
  --pf-acento-suave: var(--azul-100);
  --pf-acento-relleno: var(--azul-700);
  --pf-acento-relleno-2: var(--azul-800);
  --pf-guia: var(--azul-600);

  --pf-ok: var(--verde-500);   --pf-ok-tinta: var(--verde-700);   --pf-ok-fondo: var(--verde-50);
  --pf-warn: var(--ambar-500); --pf-warn-tinta: var(--ambar-700); --pf-warn-fondo: var(--ambar-50);
  --pf-crit: var(--rojo-500);  --pf-crit-tinta: var(--rojo-700);  --pf-crit-fondo: var(--rojo-50);
  --pf-nodata: var(--neutro-500);
  --pf-banda-ok: color-mix(in srgb, var(--verde-200) 34%, transparent);
  --pf-banda-warn: color-mix(in srgb, var(--ambar-200) 30%, transparent);
  --pf-banda-crit: color-mix(in srgb, var(--rojo-200) 32%, transparent);

  --pf-tablero: var(--mat-hormigon, var(--neutro-300));
  --pf-tablero-borde: var(--neutro-500);
  --pf-acero: var(--neutro-600);
  --pf-acero-luz: var(--neutro-400);
  --pf-agua: color-mix(in srgb, var(--azul-200) 46%, transparent);
  --pf-agua-marea: color-mix(in srgb, var(--azul-100) 60%, transparent);
  --pf-agua-linea: var(--azul-600);
  --pf-suelo: color-mix(in srgb, var(--mat-arena, var(--neutro-300)) 62%, var(--blanco));
  --pf-suelo-trama: color-mix(in srgb, var(--mat-suelo-1, var(--neutro-500)) 55%, transparent);
  --pf-caja: var(--neutro-300);

  --pf-rejilla: color-mix(in srgb, var(--azul-950) 7%, transparent);
  --pf-senal: var(--neutro-600);
  --pf-senal-2: var(--neutro-400);
  --pf-hueco: color-mix(in srgb, var(--neutro-500) 16%, transparent);
  --pf-sim-trazo: var(--neutro-500);
  --pf-eje: var(--neutro-300);
}