/* PortSync V2.5 · prototipo «4 · Fusión» · INICIO: colores propios de la página. Igual que comun-tokens.css, solo var() y
   color-mix() de los primitivos de portsync-tokens.css; ningún color nuevo. pilotes-12.js lee los --i-3d-* con
   getComputedStyle (el 3D no lleva colores escritos en el código). */

:root {
  /* fondo de página (primer cuadro del timelapse desenfocado) y su velo: el vidrio del resumen se lee sobre esto */
  --i-velo-pagina:
    radial-gradient(70% 55% at 12% 8%, color-mix(in srgb, var(--azul-800) 30%, transparent), transparent 70%),
    radial-gradient(60% 50% at 92% 62%, color-mix(in srgb, var(--azul-700) 18%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--neutro-950) 64%, transparent), color-mix(in srgb, var(--neutro-950) 80%, transparent));
  --i-tarjeta-hundida: color-mix(in srgb, var(--neutro-1000) 38%, transparent);
  --i-cuadro: color-mix(in srgb, var(--azul-900) 55%, transparent);         /* marcos «foto pendiente» */
  --i-cuadro-borde: color-mix(in srgb, var(--azul-300) 16%, transparent);
  --i-ods-1: var(--azul-800); --i-ods-2: var(--azul-700); --i-ods-3: var(--azul-600);
  /* tarjetas del resumen: vidrio sobre el fondo ya desenfocado (sin backdrop-filter: no cuesta al bajar) */
  --i-b-vidrio: color-mix(in srgb, var(--neutro-900) 62%, transparent);
  --i-b-vidrio-hover: color-mix(in srgb, var(--neutro-850) 74%, transparent);
  /* G2 · trazo del margen (fila 1b): línea, guía punteada, punta y fondo de las estaciones */
  --i-trazo: color-mix(in srgb, var(--azul-300) 62%, transparent);
  --i-trazo-guia: color-mix(in srgb, var(--azul-300) 22%, transparent);
  --i-trazo-punta: var(--azul-300);
  --i-estacion-fondo: var(--neutro-950);
  /* G2 · ventaja: rayado «sin datos entre visitas» y zonas del semáforo bajo el índice (solo estados) */
  --i-hueco-raya: color-mix(in srgb, var(--neutro-200) 16%, transparent);
  --i-zona-warn-p: color-mix(in srgb, var(--ambar-300) 9%, transparent);
  --i-zona-crit-p: color-mix(in srgb, var(--rojo-400) 10%, transparent);
}
:root[data-theme="light"] {
  --i-velo-pagina:
    radial-gradient(70% 55% at 12% 8%, color-mix(in srgb, var(--azul-200) 45%, transparent), transparent 70%),
    radial-gradient(60% 50% at 92% 62%, color-mix(in srgb, var(--azul-100) 60%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--neutro-50) 62%, transparent), color-mix(in srgb, var(--neutro-50) 80%, transparent));
  --i-tarjeta-hundida: color-mix(in srgb, var(--azul-100) 50%, transparent);
  --i-cuadro: color-mix(in srgb, var(--azul-100) 70%, transparent);
  --i-cuadro-borde: color-mix(in srgb, var(--azul-700) 16%, transparent);
  --i-b-vidrio: color-mix(in srgb, var(--blanco) 60%, transparent);
  --i-b-vidrio-hover: color-mix(in srgb, var(--blanco) 82%, transparent);
  --i-trazo: color-mix(in srgb, var(--azul-700) 55%, transparent);
  --i-trazo-guia: color-mix(in srgb, var(--azul-700) 20%, transparent);
  --i-trazo-punta: var(--azul-700);
  --i-estacion-fondo: var(--neutro-50);
  --i-hueco-raya: color-mix(in srgb, var(--azul-950) 14%, transparent);
  --i-zona-warn-p: color-mix(in srgb, var(--ambar-400) 11%, transparent);
  --i-zona-crit-p: color-mix(in srgb, var(--rojo-500) 9%, transparent);
}

/* «En vivo» salió del héroe (isla) al fondo de la página: sus tonos propios en los dos temas. Sin esto la zona del
   semáforo bajo la curva de la ficha quedaba en negro (fill sin valor) y las alertas, oscuras sobre claro. */
.inicio .i-envivo {
  --i-ficha-fondo: color-mix(in srgb, var(--neutro-1000) 30%, transparent);
  --i-burbuja: color-mix(in srgb, var(--blanco) 5%, transparent);
  --i-burbuja-borde: color-mix(in srgb, var(--blanco) 10%, transparent);
  --i-alerta-warn: color-mix(in srgb, var(--ambar-950) 70%, transparent);
  --i-alerta-crit: color-mix(in srgb, var(--rojo-950) 70%, transparent);
  --i-pista: color-mix(in srgb, var(--neutro-200) 14%, transparent);
  --i-zona-warn: var(--i-zona-warn-p);
  --i-zona-crit: var(--i-zona-crit-p);
}
:root[data-theme="light"] .inicio .i-envivo {
  --i-ficha-fondo: color-mix(in srgb, var(--blanco) 55%, transparent);
  --i-burbuja: color-mix(in srgb, var(--azul-950) 4%, transparent);
  --i-burbuja-borde: color-mix(in srgb, var(--azul-950) 10%, transparent);
  --i-alerta-warn: var(--ambar-50);
  --i-alerta-crit: var(--rojo-50);
  --i-pista: color-mix(in srgb, var(--azul-950) 10%, transparent);
}

.inicio .c-isla {
  /* héroe: la ficha del pilote, los mensajes y las alertas dentro del vidrio */
  --i-ficha-fondo: color-mix(in srgb, var(--neutro-1000) 34%, transparent);
  --i-burbuja: color-mix(in srgb, var(--blanco) 6%, transparent);
  --i-burbuja-borde: color-mix(in srgb, var(--blanco) 11%, transparent);
  --i-alerta-warn: color-mix(in srgb, var(--ambar-950) 78%, transparent);
  --i-alerta-crit: color-mix(in srgb, var(--rojo-950) 78%, transparent);
  --i-velo-heroe-movil: linear-gradient(to top, var(--negro-88) 0%, var(--negro-60) 52%, var(--negro-30) 78%, var(--negro-14) 100%);
  --i-pista: color-mix(in srgb, var(--blanco) 12%, transparent);
  --i-zona-warn: color-mix(in srgb, var(--ambar-300) 9%, transparent);
  --i-zona-crit: color-mix(in srgb, var(--rojo-400) 12%, transparent);
  /* G2 · halo azul de «se cae» (fila 11): tres capas suaves del azul de PortSync */
  --i-halo: 0 0 10px color-mix(in srgb, var(--azul-300) 90%, transparent), 0 0 26px color-mix(in srgb, var(--azul-400) 82%, transparent), 0 0 60px color-mix(in srgb, var(--azul-500) 66%, transparent), 0 0 110px color-mix(in srgb, var(--azul-600) 46%, transparent);
  /* G2 · monitor de signos vitales (propuesta de valor): pantalla oscura con grilla tenue y trazos azules */
  --i-monitor-fondo:
    radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--azul-900) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--neutro-900), var(--neutro-950));
  --i-monitor-grilla: color-mix(in srgb, var(--azul-300) 7%, transparent);
  --i-traza: var(--azul-300);

  /* banda de los 12 pilotes (siempre oscura) */
  --i-doce-fondo:
    radial-gradient(60% 70% at 18% 0%, color-mix(in srgb, var(--azul-800) 60%, transparent), transparent 70%),
    radial-gradient(50% 60% at 100% 100%, color-mix(in srgb, var(--azul-900) 70%, transparent), transparent 70%),
    linear-gradient(180deg, var(--azul-950), var(--neutro-1000));
  --i-doce-palabra: var(--azul-100);
  --i-3d-acero: var(--neutro-400);
  --i-3d-acero-humedo: var(--neutro-800);
  --i-3d-hormigon: var(--neutro-300);
  --i-3d-cabezal: var(--neutro-500);
  --i-3d-lafken: var(--neutro-300);
  --i-3d-agua: var(--azul-800);
  --i-3d-agua-hondo: var(--azul-950);
  --i-3d-luz: var(--azul-50);
  --i-3d-contraluz: var(--azul-300);
}

/* ======================================================================================================
   W1 · Noticias y Preguntas dentro del INICIO (doc 14). Son los mismos roles que usaban las subpáginas (pg-tokens.css,
   de W2: el INICIO no lo carga); ningún color nuevo, solo var() y color-mix() de los primitivos.
   ====================================================================================================== */
:root {
  --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);
  --pg-avatar-ps: var(--azul-600);       --pg-avatar-ps-tinta: var(--blanco);
  --pg-avatar-otro: var(--neutro-700);   --pg-avatar-otro-tinta: var(--neutro-50);
  --pg-avatar-op: var(--azul-700);       --pg-avatar-op-tinta: var(--blanco);
  --pg-avatar-ge: var(--azul-900);       --pg-avatar-ge-tinta: var(--azul-100);
  /* ODS dentro del INICIO (pg-ods.css): tono de cada tarjeta en la escala azul, no los colores oficiales de cada ODS */
  --pg-pozo: color-mix(in srgb, var(--neutro-1000) 38%, transparent);
  --pg-pozo-borde: color-mix(in srgb, var(--neutro-200) 12%, transparent);
  --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);
}
:root[data-theme="light"] {
  --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-pozo: color-mix(in srgb, var(--azul-100) 50%, transparent);
  --pg-pozo-borde: color-mix(in srgb, var(--azul-950) 11%, 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);
}