/* =====================================================================
   PortSync 2.2 — tokens de diseño (única fuente de verdad)
   Lo enlazan las 6 páginas. Ninguna página escribe colores a mano:
   todo sale de aquí (también el SVG y el canvas que dibuja el JS).

   · Primitivos: escalas de color en OKLCH convertidas a sRGB.
     La marca es el azul del logo "P + olas" (IMAGEN LOGO PORT SYNC.png),
     muestreado: #114373 = oklch(.378 .097 251.5) = --azul-800.
   · Roles: lo que usan las páginas (--bg, --ink, --accent, --ok…).
     El sitio es oscuro. El panel (html[data-tema="panel"]) parte en
     claro y pasa a oscuro con la preferencia del sistema o con
     data-theme="dark"; data-theme="light" lo fuerza claro.
   · Rojo / ámbar / verde son SOLO para Crítico / Advertencia /
     Sin Novedad (semáforo de salud 0–49 / 50–94 / 95–100).
   ===================================================================== */

:root{
  /* ---------- marca: azul del logo (tono 251.5°) ---------- */
  --azul-50:#f0f7ff; --azul-100:#dfeeff; --azul-200:#c1dcfb; --azul-300:#95c2f3; --azul-400:#68a4e5;
  --azul-500:#4086cf; --azul-600:#266db2; --azul-700:#195792; --azul-800:#114373; --azul-900:#0b2f52; --azul-950:#051c34;

  /* ---------- neutros teñidos levemente de azul (tono 254°) ---------- */
  --blanco:#ffffff;
  --neutro-50:#f5f7f9; --neutro-100:#eceff3; --neutro-200:#dce0e6; --neutro-300:#c2c8ce; --neutro-400:#969ca4;
  --neutro-500:#717881; --neutro-600:#545c65; --neutro-700:#394049; --neutro-800:#282e37; --neutro-850:#1b2128;
  --neutro-900:#14191f; --neutro-950:#090e13; --neutro-1000:#020305;
  --negro:var(--neutro-1000);

  /* velos sobre video, fotos y el mapa (blanco y negro con alfa) */
  --blanco-04:rgba(255,255,255,.04); --blanco-06:rgba(255,255,255,.06); --blanco-08:rgba(255,255,255,.08);
  --blanco-10:rgba(255,255,255,.10); --blanco-12:rgba(255,255,255,.12); --blanco-16:rgba(255,255,255,.16);
  --blanco-20:rgba(255,255,255,.20); --blanco-30:rgba(255,255,255,.30); --blanco-40:rgba(255,255,255,.40);
  --blanco-50:rgba(255,255,255,.50); --blanco-60:rgba(255,255,255,.60); --blanco-85:rgba(255,255,255,.85);
  --negro-14:rgba(2,3,5,.14); --negro-30:rgba(2,3,5,.30); --negro-40:rgba(2,3,5,.40);
  --negro-60:rgba(2,3,5,.60); --negro-88:rgba(2,3,5,.88);
  /* velo de lectura del hero de INICIO (V2.5): oscurece la franja baja (y en escritorio el costado izquierdo), donde
     va el texto; arriba y a la derecha el timelapse queda limpio. Medido contra cada cuadro del video */
  --velo-hero-abajo:linear-gradient(to top,var(--negro-60) 0%,var(--negro-60) 25%,var(--negro-30) 60%,transparent 85%);
  --velo-hero-lado:linear-gradient(to right,var(--negro-40) 0%,var(--negro-30) 40%,transparent 70%);
  /* teléfono: el texto ocupa todo el ancho y sube más, así que la franja pareja llega más arriba */
  --velo-hero-abajo-movil:linear-gradient(to top,var(--negro-60) 0%,var(--negro-60) 40%,var(--negro-30) 65%,transparent 85%);

  /* ---------- estados (semáforo) ---------- */
  --verde-50:#e9fbef; --verde-200:#adeac5; --verde-300:#6bd79d; --verde-400:#27bc7a; --verde-500:#039c61;
  --verde-600:#017f4e; --verde-700:#01663e; --verde-800:#014f2f; --verde-950:#042213;
  --ambar-50:#fff4e6; --ambar-200:#f8d39e; --ambar-300:#efb14d; --ambar-400:#d49100; --ambar-500:#ae7701;
  --ambar-600:#8e6000; --ambar-700:#734d01; --ambar-800:#5a3b00; --ambar-950:#281800;
  --rojo-50:#fff3f1; --rojo-200:#ffcbc5; --rojo-300:#ffa098; --rojo-400:#fe6863; --rojo-500:#dc4846;
  --rojo-600:#b83334; --rojo-700:#962627; --rojo-800:#732120; --rojo-950:#310f0e;

  /* ---------- planes: dorado apagado para Premium (misma luminosidad que --azul-600) ---------- */
  --dorado-300:#d5ba82; --dorado-400:#bd9b52; --dorado-600:#83651d; --dorado-700:#6b5110;
  /* rellenos de tarjeta (texto blanco encima, contraste ≥ 5:1) */
  --plan-basico-1:var(--azul-600);   --plan-basico-2:var(--azul-700);
  --plan-plus-1:var(--azul-800);     --plan-plus-2:var(--azul-950);
  --plan-premium-1:var(--dorado-600); --plan-premium-2:var(--dorado-700);
  /* acento de Premium sobre fondo oscuro (texto y borde) */
  --plan-premium:var(--dorado-300); --plan-premium-borde:var(--dorado-400);

  /* ---------- tipografía ---------- */
  --font-sans:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;  /* cifras del panel */
  --font-titulo-puertos:Aalto,'Arial Narrow',sans-serif;                          /* nombre gigante de puertos.html */
  --peso-regular:400; --peso-medio:500; --peso-semi:600;
  /* marca (logo + "PortSync"): el mismo en todas las páginas */
  --marca-logo:28px; --marca-texto:24px; --marca-gap:10px;
  --marca-logo-sm:24px; --marca-texto-sm:20px;   /* teléfono */

  /* ---------- radios ---------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ---------- movimiento ---------- */
  --dur-rapida:150ms;   /* hover, color, opacidad */
  --dur-media:300ms;    /* menús, cambios de estado */
  --dur-pagina:650ms;   /* velo negro entre páginas */
  --dur-lenta:1000ms;   /* apariciones de contenido */
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* ---------- sombras ---------- */
  --sombra-texto:0 1px 14px var(--negro-30);   /* texto sobre video o foto */

  /* ---------- vidrio sobre el timelapse fijo de INICIO (secciones Precios/Nosotros/Historia, barra y menú) ----------
     Dos capas, para que el timelapse se siga viendo al bajar sin perder contraste:
     · --vidrio-banda: tinte liviano de toda la sección, sin desenfoque. Es lo que queda a los costados del texto y en
       los huecos entre tramos: ahí el video se ve nítido, apenas oscurecido.
     · --vidrio-respaldo: vidrio esmerilado (desenfoque) solo detrás de cada tramo de contenido. Sobre el tinte suma
       1 − (1 − 0,38)·(1 − 0,76) ≈ 85 % de --neutro-950: aun con blanco puro detrás, --ink-3 queda en 4,68:1, --ink-2
       en 7,7:1 y --ink en 12:1 (AA). Si se cambia uno de los dos, recalcular el otro para no bajar de 85 %.
     · --vidrio-denso: ese mismo 85 % en una sola capa (degradado bajo la barra fija). */
  --vidrio-banda:color-mix(in srgb,var(--neutro-950) 38%,transparent);
  --vidrio-respaldo:color-mix(in srgb,var(--neutro-950) 76%,transparent);
  --vidrio-denso:color-mix(in srgb,var(--neutro-950) 85%,transparent);
  --vidrio-tarjeta:color-mix(in srgb,var(--neutro-900) 80%,transparent);
  --vidrio-barra:color-mix(in srgb,var(--neutro-950) 72%,transparent);
  --vidrio-desenfoque:28px; --vidrio-desenfoque-sm:18px;   /* teléfono: menos radio, menos costo de GPU */

  /* ---------- mapa de Chile (V2.4, puertos.html): color del océano en el borde izquierdo del render (muestreado de
     chile-ancho.mp4), para que la página continúe el video sin costura; nubes del viaje mapa -> puerto (viaje.js las
     dibuja en WebGL): cima iluminada, base azul grisácea y la sombra que proyectan sobre el mapa ---------- */
  --mapa-base:#0e4169;
  --nube-luz:#f4f7fb; --nube-sombra:#a3b3c6; --nube-suelo:var(--azul-950);

  /* ---------- mapa y banda del puerto del panel (escena siempre oscura, en ambos temas) ---------- */
  --mapa-oceano-1:var(--azul-950); --mapa-oceano-2:var(--azul-900); --mapa-oceano-3:var(--azul-700);
  --mapa-tip:var(--azul-950);      /* tooltip sobre el mapa */

  /* =================== ROLES — tema oscuro (sitio; panel oscuro) =================== */
  color-scheme:dark;
  --bg:var(--neutro-950); --surface:var(--neutro-900); --surface-2:var(--neutro-850); --surface-3:var(--neutro-800);
  --line:rgba(214,224,236,.10); --line-soft:var(--blanco-06); --line-strong:rgba(214,224,236,.18);
  --ink:var(--neutro-50); --ink-2:var(--neutro-300); --ink-3:var(--neutro-400); --ink-4:var(--neutro-500);
  --brand:var(--azul-800);
  --accent:var(--azul-400);          /* indicadores, íconos, bordes activos */
  --accent-ink:var(--azul-300);      /* texto en azul */
  --accent-fill:var(--azul-600); --accent-fill-2:var(--azul-700); --on-accent:var(--blanco);
  --accent-soft:color-mix(in srgb,var(--azul-500) 18%,transparent);
  --focus:var(--azul-300);
  --ok:var(--verde-400);  --ok-ink:var(--verde-300);  --ok-bg:var(--verde-950);  --ok-line:var(--verde-800);
  --warn:var(--ambar-300); --warn-ink:var(--ambar-300); --warn-bg:var(--ambar-950); --warn-line:var(--ambar-800);
  --crit:var(--rojo-400); --crit-ink:var(--rojo-300); --crit-bg:var(--rojo-950); --crit-line:var(--rojo-800);
  --sombra-1:0 1px 2px var(--negro-30);
  --sombra-2:0 8px 24px -8px var(--negro-60);
  --sombra-3:0 24px 48px -16px var(--negro-60);
  --sombra-card:0 22px 60px var(--negro-30);
  --mapa-tierra:color-mix(in oklab,var(--azul-700) 60%,var(--neutro-600));
  --mapa-tierra-borde:color-mix(in oklab,var(--azul-700) 60%,var(--neutro-400));
  /* logo del lockup: blanco sobre fondo oscuro (ver .ps-logo-azul / .ps-logo-blanco) */
  --logo-azul:none; --logo-blanco:block;
}

/* =================== ROLES — tema claro (panel) ===================
   Se repite en dos reglas: preferencia del sistema y data-theme="light". */
@media (prefers-color-scheme:light){
  :root[data-tema="panel"]:not([data-theme="dark"]){
    color-scheme:light;
    --bg:var(--neutro-50); --surface:var(--blanco); --surface-2:var(--neutro-100); --surface-3:var(--neutro-200);
    --line:var(--neutro-200); --line-soft:var(--neutro-100); --line-strong:var(--neutro-300);
    --ink:var(--neutro-950); --ink-2:var(--neutro-700); --ink-3:var(--neutro-600); --ink-4:var(--neutro-500);
    --accent:var(--azul-600); --accent-ink:var(--azul-700);
    --accent-fill:var(--azul-600); --accent-fill-2:var(--azul-800); --on-accent:var(--blanco);
    --accent-soft:var(--azul-100);
    --focus:var(--azul-600);
    --ok:var(--verde-500);  --ok-ink:var(--verde-700);  --ok-bg:var(--verde-50);  --ok-line:var(--verde-200);
    --warn:var(--ambar-400); --warn-ink:var(--ambar-700); --warn-bg:var(--ambar-50); --warn-line:var(--ambar-200);
    --crit:var(--rojo-500); --crit-ink:var(--rojo-700); --crit-bg:var(--rojo-50); --crit-line:var(--rojo-200);
    --sombra-1:0 1px 2px rgba(9,14,19,.06),0 1px 1px rgba(9,14,19,.04);
    --sombra-2:0 8px 24px -8px rgba(9,14,19,.18);
    --sombra-3:0 24px 48px -16px rgba(9,14,19,.28);
    --mapa-tierra:color-mix(in oklab,var(--azul-800) 60%,var(--neutro-700));
    --mapa-tierra-borde:color-mix(in oklab,var(--azul-700) 60%,var(--neutro-500));
    --logo-azul:block; --logo-blanco:none;
  }
}
:root[data-tema="panel"][data-theme="light"]{
  color-scheme:light;
  --bg:var(--neutro-50); --surface:var(--blanco); --surface-2:var(--neutro-100); --surface-3:var(--neutro-200);
  --line:var(--neutro-200); --line-soft:var(--neutro-100); --line-strong:var(--neutro-300);
  --ink:var(--neutro-950); --ink-2:var(--neutro-700); --ink-3:var(--neutro-600); --ink-4:var(--neutro-500);
  --accent:var(--azul-600); --accent-ink:var(--azul-700);
  --accent-fill:var(--azul-600); --accent-fill-2:var(--azul-800); --on-accent:var(--blanco);
  --accent-soft:var(--azul-100);
  --focus:var(--azul-600);
  --ok:var(--verde-500);  --ok-ink:var(--verde-700);  --ok-bg:var(--verde-50);  --ok-line:var(--verde-200);
  --warn:var(--ambar-400); --warn-ink:var(--ambar-700); --warn-bg:var(--ambar-50); --warn-line:var(--ambar-200);
  --crit:var(--rojo-500); --crit-ink:var(--rojo-700); --crit-bg:var(--rojo-50); --crit-line:var(--rojo-200);
  --sombra-1:0 1px 2px rgba(9,14,19,.06),0 1px 1px rgba(9,14,19,.04);
  --sombra-2:0 8px 24px -8px rgba(9,14,19,.18);
  --sombra-3:0 24px 48px -16px rgba(9,14,19,.28);
  --mapa-tierra:color-mix(in oklab,var(--azul-800) 60%,var(--neutro-700));
  --mapa-tierra-borde:color-mix(in oklab,var(--azul-700) 60%,var(--neutro-500));
  --logo-azul:block; --logo-blanco:none;
}