/* PortSync V2.5 · prototipo «4 · Fusión» · pg-tokens.css — roles de color de las subpáginas del encargo G3 (Noticias,
   Preguntas frecuentes, Precios, Guía de navegación y ODS) y de los componentes de Nosotros (hoja de ruta y tarjetas
   inclinadas). Ningún color nuevo: solo var() y 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 para todo; rojo, ámbar y verde solo
   para Crítico, Advertencia y Sin Novedad (estas páginas no muestran estados, así que no los usan). El dorado apagado de
   Premium es el de --plan-premium-* (ya decidido en portsync-tokens.css). Orden: comun.css → pg-tokens.css → pg-*.css. */

:root {
  /* ---------- fondo: el póster del timelapse de Valparaíso, desenfocado, bajo un velo nocturno ---------- */
  --pg-poster-op: .62;
  --pg-velo: linear-gradient(180deg,
    color-mix(in srgb, var(--neutro-1000) 62%, transparent) 0%,
    color-mix(in srgb, var(--neutro-950) 74%, transparent) 40%,
    color-mix(in srgb, var(--neutro-1000) 92%, transparent) 100%);
  --pg-tinte:
    radial-gradient(60% 50% at 84% 6%, color-mix(in srgb, var(--azul-700) 34%, transparent) 0%, transparent 70%),
    radial-gradient(46% 40% at 4% 58%, color-mix(in srgb, var(--azul-800) 26%, transparent) 0%, transparent 72%);

  /* ---------- tarjetas macizas (mazo de noticias, ODS, vista previa de la guía) ---------- */
  --pg-carta: color-mix(in srgb, var(--neutro-900) 94%, var(--azul-950));
  --pg-carta-2: color-mix(in srgb, var(--neutro-850) 90%, var(--azul-900));
  --pg-carta-borde: color-mix(in srgb, var(--neutro-200) 13%, transparent);
  --pg-carta-filo: color-mix(in srgb, var(--blanco) 7%, transparent);
  --pg-carta-sombra: 0 40px 80px -36px var(--negro-88), 0 4px 14px var(--negro-30);
  --pg-retrato: color-mix(in srgb, var(--azul-800) 40%, var(--neutro-900));
  --pg-retrato-trama: color-mix(in srgb, var(--azul-300) 9%, transparent);
  --pg-retrato-tinta: color-mix(in srgb, var(--azul-200) 78%, transparent);
  --pg-retrato-tenue: color-mix(in srgb, var(--azul-300) 30%, transparent);

  /* ---------- avatares con iniciales (sin imágenes) ---------- */
  --pg-avatar-ps: var(--azul-600);       --pg-avatar-ps-tinta: var(--blanco);          /* PortSync */
  --pg-avatar-otro: var(--neutro-700);   --pg-avatar-otro-tinta: var(--neutro-50);     /* medios del sector */
  --pg-avatar-op: var(--azul-700);       --pg-avatar-op-tinta: var(--blanco);          /* perfil Operación */
  --pg-avatar-ge: var(--azul-900);       --pg-avatar-ge-tinta: var(--azul-100);        /* perfil Gerencia */

  /* ---------- texto con brillo que barre (ShinyText): base = tinta, luz = azul claro ---------- */
  --pg-brillo-base: var(--neutro-50);
  --pg-brillo-luz: var(--azul-300);
  --pg-brillo-base-2: var(--neutro-300);

  /* ---------- marcos de los planes con bordes que brillan siguiendo el puntero (GlowingEdgeCard) ---------- */
  --pg-plan-fondo: linear-gradient(8deg, color-mix(in srgb, var(--neutro-900) 96%, var(--azul-950)) 75%, color-mix(in srgb, var(--neutro-850) 92%, var(--azul-900)) 75.5%);
  --pg-plan-filo: color-mix(in srgb, var(--blanco) 16%, transparent);
  --pg-malla-1: var(--azul-300); --pg-malla-2: var(--azul-500); --pg-malla-3: var(--azul-200);
  --pg-malla-4: var(--azul-400); --pg-malla-5: var(--azul-100); --pg-malla-6: var(--azul-600);
  --pg-malla-base: var(--azul-400);
  --pg-halo: var(--azul-200);
  --pg-mezcla-malla: soft-light;
  --pg-mezcla-halo: plus-lighter;
  /* Premium: el mismo gesto con el dorado apagado de su plan */
  --pg-malla-premium-1: var(--dorado-300); --pg-malla-premium-2: var(--dorado-400);
  --pg-halo-premium: var(--dorado-300);
  --pg-premium-tinta: var(--plan-premium); --pg-premium-borde: var(--plan-premium-borde);   /* chip, ícono y marcas de Premium */

  /* ---------- simulador ---------- */
  --pg-pozo: color-mix(in srgb, var(--neutro-1000) 38%, transparent);
  --pg-pozo-borde: color-mix(in srgb, var(--neutro-200) 12%, transparent);
  --pg-barra-costo: color-mix(in srgb, var(--neutro-300) 42%, transparent);
  --pg-barra-ahorro-1: var(--azul-500);
  --pg-barra-ahorro-2: var(--azul-300);
  --pg-supuesto: color-mix(in srgb, var(--azul-300) 14%, transparent);
  --pg-supuesto-borde: color-mix(in srgb, var(--azul-300) 38%, transparent);
  --pg-fuente: color-mix(in srgb, var(--neutro-200) 10%, transparent);

  /* ---------- guía de navegación: riel de marcas que se agrandan (dock) ---------- */
  --pg-marca: color-mix(in srgb, var(--neutro-200) 34%, transparent);
  --pg-marca-cresta: var(--azul-300);
  --pg-marca-etapa: var(--neutro-200);

  /* ---------- hoja de ruta: hecho / en curso / planificado (azul y neutros: no son estados del semáforo) ---------- */
  --pg-ruta-linea: color-mix(in srgb, var(--neutro-200) 18%, transparent);
  --pg-ruta-relleno: var(--azul-400);
  --pg-ruta-hecho: var(--azul-400);
  --pg-ruta-curso: var(--azul-300);
  --pg-ruta-plan: color-mix(in srgb, var(--neutro-200) 42%, transparent);
  --pg-ruta-halo: color-mix(in srgb, var(--azul-400) 30%, transparent);

  /* ---------- ODS: tono de cada tarjeta (escala azul; los colores oficiales chocarían con el semáforo) ---------- */
  --pg-ods-9: var(--azul-300); --pg-ods-12: var(--azul-200); --pg-ods-13: var(--azul-400);
  --pg-ods-banda: color-mix(in srgb, var(--azul-500) 16%, transparent);

  /* ---------- tarjeta inclinada en 3D ---------- */
  --pg-ti-nota: var(--neutro-50);
  --pg-ti-nota-tinta: var(--neutro-950);
  --pg-ti-brillo: color-mix(in srgb, var(--blanco) 14%, transparent);
}

:root[data-theme="light"] {
  --pg-poster-op: .5;
  --pg-velo: linear-gradient(180deg,
    color-mix(in srgb, var(--neutro-50) 74%, transparent) 0%,
    color-mix(in srgb, var(--neutro-50) 84%, transparent) 40%,
    color-mix(in srgb, var(--neutro-100) 96%, transparent) 100%);
  --pg-tinte:
    radial-gradient(60% 50% at 84% 6%, color-mix(in srgb, var(--azul-200) 42%, transparent) 0%, transparent 70%),
    radial-gradient(46% 40% at 4% 58%, color-mix(in srgb, var(--azul-100) 50%, transparent) 0%, transparent 72%);

  --pg-carta: var(--blanco);
  --pg-carta-2: var(--azul-50);
  --pg-carta-borde: color-mix(in srgb, var(--azul-950) 11%, transparent);
  --pg-carta-filo: color-mix(in srgb, var(--blanco) 90%, transparent);
  --pg-carta-sombra: 0 40px 80px -40px color-mix(in srgb, var(--azul-950) 45%, transparent), 0 3px 10px color-mix(in srgb, var(--azul-950) 10%, transparent);
  --pg-retrato: var(--azul-100);
  --pg-retrato-trama: color-mix(in srgb, var(--azul-700) 8%, transparent);
  --pg-retrato-tinta: var(--azul-700);
  --pg-retrato-tenue: color-mix(in srgb, var(--azul-700) 24%, transparent);

  --pg-avatar-otro: var(--neutro-600);
  --pg-avatar-ge: var(--azul-900);

  --pg-brillo-base: var(--neutro-950);
  --pg-brillo-luz: var(--azul-500);
  --pg-brillo-base-2: var(--neutro-700);

  --pg-plan-fondo: linear-gradient(8deg, var(--blanco) 75%, var(--azul-50) 75.5%);
  --pg-plan-filo: color-mix(in srgb, var(--azul-950) 12%, transparent);
  --pg-malla-1: var(--azul-400); --pg-malla-2: var(--azul-600); --pg-malla-3: var(--azul-300);
  --pg-malla-4: var(--azul-500); --pg-malla-5: var(--azul-200); --pg-malla-6: var(--azul-700);
  --pg-malla-base: var(--azul-500);
  --pg-halo: var(--azul-500);
  --pg-mezcla-malla: multiply;
  --pg-mezcla-halo: normal;
  --pg-malla-premium-1: var(--dorado-400); --pg-malla-premium-2: var(--dorado-600);
  --pg-halo-premium: var(--dorado-600);
  --pg-premium-tinta: var(--dorado-700); --pg-premium-borde: var(--dorado-600);   /* el dorado claro no se lee sobre blanco */

  --pg-pozo: color-mix(in srgb, var(--azul-100) 50%, transparent);
  --pg-pozo-borde: color-mix(in srgb, var(--azul-950) 11%, transparent);
  --pg-barra-costo: color-mix(in srgb, var(--neutro-500) 34%, transparent);
  --pg-barra-ahorro-1: var(--azul-700);
  --pg-barra-ahorro-2: var(--azul-500);
  --pg-supuesto: var(--azul-50);
  --pg-supuesto-borde: color-mix(in srgb, var(--azul-600) 40%, transparent);
  --pg-fuente: color-mix(in srgb, var(--azul-950) 5%, transparent);

  --pg-marca: color-mix(in srgb, var(--azul-950) 26%, transparent);
  --pg-marca-cresta: var(--azul-700);
  --pg-marca-etapa: var(--neutro-800);

  --pg-ruta-linea: color-mix(in srgb, var(--azul-950) 14%, transparent);
  --pg-ruta-relleno: var(--azul-600);
  --pg-ruta-hecho: var(--azul-600);
  --pg-ruta-curso: var(--azul-700);
  --pg-ruta-plan: color-mix(in srgb, var(--azul-950) 30%, transparent);
  --pg-ruta-halo: color-mix(in srgb, var(--azul-500) 24%, transparent);

  --pg-ods-9: var(--azul-700); --pg-ods-12: var(--azul-600); --pg-ods-13: var(--azul-800);
  --pg-ods-banda: color-mix(in srgb, var(--azul-500) 12%, transparent);

  --pg-ti-nota: var(--neutro-950);
  --pg-ti-nota-tinta: var(--neutro-50);
  --pg-ti-brillo: color-mix(in srgb, var(--blanco) 34%, transparent);
}