/* PortSync V2.5 · prototipo «4 · Fusión» · roles de color de Nosotros, Tecnología y la llegada a la Maqueta (encargo F2).
   Ningún color nuevo: todo es var() o color-mix() de los primitivos de sitio/assets/css/portsync-tokens.css y de los roles
   de comun-tokens.css (azul del logo #114373 = --azul-800 y su escala; rojo, ámbar y verde solo para Crítico, Advertencia y
   Sin Novedad). Va después de comun.css y antes de subpaginas.css / llegada.css. */

:root {
  /* ---------- Nosotros (Dashboard): timelapse de Valparaíso con velo nocturno ---------- */
  --s-velo: linear-gradient(180deg,
    color-mix(in srgb, var(--neutro-1000) 58%, transparent) 0%,
    color-mix(in srgb, var(--neutro-950) 50%, transparent) 34%,
    color-mix(in srgb, var(--neutro-950) 78%, transparent) 72%,
    color-mix(in srgb, var(--neutro-1000) 92%, transparent) 100%);
  --s-velo-lado: radial-gradient(120% 90% at 0% 30%, color-mix(in srgb, var(--neutro-1000) 55%, transparent) 0%, transparent 62%);
  --s-tinte-azul: radial-gradient(70% 60% at 85% 10%, color-mix(in srgb, var(--azul-700) 26%, transparent) 0%, transparent 70%);

  /* marcos «foto pendiente» y monogramas */
  --s-marco: color-mix(in srgb, var(--azul-400) 8%, transparent);
  --s-marco-borde: color-mix(in srgb, var(--neutro-200) 16%, transparent);
  --s-marco-trama: color-mix(in srgb, var(--neutro-200) 6%, transparent);
  --s-monograma: color-mix(in srgb, var(--azul-300) 62%, transparent);
  --s-avatar: color-mix(in srgb, var(--azul-700) 55%, var(--neutro-900));
  --s-avatar-tinta: var(--neutro-50);

  /* esquema «inspección vs. monitoreo continuo» y diagramas */
  --s-trazo: var(--azul-400);
  --s-trazo-suave: color-mix(in srgb, var(--azul-400) 30%, transparent);
  --s-trazo-tenue: color-mix(in srgb, var(--neutro-200) 16%, transparent);
  --s-paquete: var(--azul-300);

  /* dock de avatares y puntos de página (vidrio chico: aquí sí desenfoca, es una pieza de 60 px) */
  --s-dock: color-mix(in srgb, var(--neutro-950) 74%, transparent);
  --s-dock-borde: color-mix(in srgb, var(--neutro-200) 16%, transparent);
  --s-punto: color-mix(in srgb, var(--neutro-200) 34%, transparent);
  --s-punto-activo: var(--neutro-50);

  /* ---------- Tecnología: tablero técnico (misma retícula que el zoom al pilote) ---------- */
  --s-reticula: color-mix(in srgb, var(--neutro-200) 7%, transparent);
  --s-reticula-cruz: color-mix(in srgb, var(--neutro-200) 14%, transparent);
  --s-escenario: radial-gradient(85% 70% at 60% 40%, color-mix(in srgb, var(--azul-800) 30%, transparent) 0%, transparent 72%);
  --s-paso-activo: var(--azul-400);
  --s-indice: color-mix(in srgb, var(--azul-500) 16%, transparent);

  /* ---------- llegada a la Maqueta (Falcon): tarjetas macizas sobre el render ---------- */
  --lg-superficie: var(--neutro-900);
  --lg-panel: color-mix(in srgb, var(--neutro-850) 82%, var(--azul-950));
  --lg-panel-luz: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--azul-600) 16%, transparent), transparent 52%);
  --lg-borde: color-mix(in srgb, var(--neutro-200) 13%, transparent);
  --lg-filo: color-mix(in srgb, var(--blanco) 6%, transparent);
  --lg-sombra: 0 34px 70px -30px var(--negro-88), 0 3px 10px var(--negro-30);
  --lg-caja: color-mix(in srgb, var(--neutro-1000) 30%, transparent);
  --lg-caja-borde: color-mix(in srgb, var(--neutro-200) 18%, transparent);
  --lg-etiqueta: color-mix(in srgb, var(--neutro-950) 88%, transparent);
  --lg-icono: color-mix(in srgb, var(--azul-500) 22%, transparent);
  --lg-icono-tinta: var(--azul-300);
  --lg-barra-ok: color-mix(in srgb, var(--ok) 26%, transparent);
  --lg-barra-warn: var(--warn);
  --lg-barra-crit: var(--crit);
  --lg-barra-sin: color-mix(in srgb, var(--neutro-300) 30%, transparent);
  --lg-zona-ok: color-mix(in srgb, var(--ok) 30%, transparent);
  --lg-zona-warn: color-mix(in srgb, var(--warn) 34%, transparent);
  --lg-zona-crit: color-mix(in srgb, var(--crit) 34%, transparent);
  --lg-ola-1: color-mix(in srgb, var(--azul-300) 22%, transparent);
  --lg-ola-2: color-mix(in srgb, var(--azul-400) 38%, transparent);
  --lg-ola-3: color-mix(in srgb, var(--azul-500) 58%, transparent);
  --lg-ola-hilo: color-mix(in srgb, var(--blanco) 55%, transparent);
  --lg-boton-halo: 0 14px 30px -12px color-mix(in srgb, var(--azul-500) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--azul-400) 40%, transparent);
  /* velos de lectura sobre el render (la escena es oscura en los dos temas) */
  --lg-velo-arriba: linear-gradient(180deg, var(--negro-60) 0%, var(--negro-30) 28%, transparent 46%);
  --lg-velo-abajo: linear-gradient(0deg, var(--negro-60) 0%, var(--negro-14) 22%, transparent 38%);
}

:root[data-theme="light"] {
  --s-velo: linear-gradient(180deg,
    color-mix(in srgb, var(--neutro-50) 62%, transparent) 0%,
    color-mix(in srgb, var(--neutro-50) 52%, transparent) 34%,
    color-mix(in srgb, var(--neutro-50) 80%, transparent) 72%,
    color-mix(in srgb, var(--neutro-100) 94%, transparent) 100%);
  --s-velo-lado: radial-gradient(120% 90% at 0% 30%, color-mix(in srgb, var(--blanco) 58%, transparent) 0%, transparent 62%);
  --s-tinte-azul: radial-gradient(70% 60% at 85% 10%, color-mix(in srgb, var(--azul-200) 30%, transparent) 0%, transparent 70%);

  --s-marco: color-mix(in srgb, var(--azul-100) 55%, transparent);
  --s-marco-borde: color-mix(in srgb, var(--azul-950) 13%, transparent);
  --s-marco-trama: color-mix(in srgb, var(--azul-950) 5%, transparent);
  --s-monograma: color-mix(in srgb, var(--azul-700) 55%, transparent);
  --s-avatar: var(--azul-700);
  --s-avatar-tinta: var(--blanco);

  --s-trazo: var(--azul-600);
  --s-trazo-suave: color-mix(in srgb, var(--azul-600) 26%, transparent);
  --s-trazo-tenue: color-mix(in srgb, var(--azul-950) 14%, transparent);
  --s-paquete: var(--azul-600);

  --s-dock: color-mix(in srgb, var(--blanco) 84%, transparent);
  --s-dock-borde: color-mix(in srgb, var(--azul-950) 12%, transparent);
  --s-punto: color-mix(in srgb, var(--azul-950) 26%, transparent);
  --s-punto-activo: var(--azul-800);

  --s-reticula: color-mix(in srgb, var(--azul-950) 6%, transparent);
  --s-reticula-cruz: color-mix(in srgb, var(--azul-950) 13%, transparent);
  --s-escenario: radial-gradient(85% 70% at 60% 40%, color-mix(in srgb, var(--azul-100) 70%, transparent) 0%, transparent 72%);
  --s-paso-activo: var(--azul-700);
  --s-indice: var(--azul-100);

  --lg-superficie: var(--blanco);
  --lg-panel: color-mix(in srgb, var(--azul-50) 70%, var(--blanco));
  --lg-panel-luz: radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--azul-200) 34%, transparent), transparent 52%);
  --lg-borde: color-mix(in srgb, var(--azul-950) 9%, transparent);
  --lg-filo: color-mix(in srgb, var(--blanco) 90%, transparent);
  --lg-sombra: 0 34px 70px -32px color-mix(in srgb, var(--azul-950) 55%, transparent), 0 3px 10px color-mix(in srgb, var(--azul-950) 12%, transparent);
  --lg-caja: color-mix(in srgb, var(--blanco) 70%, transparent);
  --lg-caja-borde: color-mix(in srgb, var(--azul-950) 16%, transparent);
  --lg-etiqueta: color-mix(in srgb, var(--blanco) 94%, transparent);
  --lg-icono: var(--azul-100);
  --lg-icono-tinta: var(--azul-700);
  --lg-barra-ok: color-mix(in srgb, var(--ok) 30%, transparent);
  --lg-barra-sin: color-mix(in srgb, var(--neutro-500) 30%, transparent);
  --lg-zona-ok: color-mix(in srgb, var(--ok) 34%, transparent);
  --lg-zona-warn: color-mix(in srgb, var(--warn) 42%, transparent);
  --lg-zona-crit: color-mix(in srgb, var(--crit) 34%, transparent);
  --lg-ola-1: color-mix(in srgb, var(--azul-300) 30%, transparent);
  --lg-ola-2: color-mix(in srgb, var(--azul-400) 42%, transparent);
  --lg-ola-3: color-mix(in srgb, var(--azul-600) 62%, transparent);
  --lg-ola-hilo: color-mix(in srgb, var(--blanco) 80%, transparent);
  --lg-boton-halo: 0 14px 30px -12px color-mix(in srgb, var(--azul-600) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--azul-600) 30%, transparent);
}