/* ============================================================
   MARCA — todo lo visual del canal en un solo lugar.
   Cambie estos valores y la aplicación entera cambia con ellos.

   Nortvisión Binacional: azul marino profundo con degradado,
   blanco para el texto y rojo de señal para el "en vivo".
   ============================================================ */

/* ---------- Tipografías ----------
   Una sola familia (Roboto) en tres pesos: 300 para textos
   largos, 400 para la interfaz y 700 para titulares. */
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('../assets/fonts/Roboto-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  /* ---------- Superficies ----------
     El fondo general es un degradado azul; el color plano de
     --fondo es el respaldo y el que ve la barra del sistema. */
  --fondo:#0B1436;
  --fondo-2:#16266B;      /* azul medio del degradado */
  --fondo-3:#1E3A9B;      /* azul claro del degradado, arriba */
  --panel:rgba(255,255,255,.07);   /* tarjetas sobre el azul */
  --panel-2:rgba(255,255,255,.12);
  --panel-solido:#FFFFFF;          /* tarjetas blancas: patrocinadores */
  --negro:#060C21;                 /* fondo del reproductor */

  /* ---------- Líneas ---------- */
  --borde:rgba(255,255,255,.16);
  --borde-2:rgba(255,255,255,.30);

  /* ---------- Texto ---------- */
  --txt:#FFFFFF;
  --txt-2:rgba(255,255,255,.78);
  --txt-3:rgba(255,255,255,.55);
  --txt-inv:#0B1436;      /* texto sobre las tarjetas blancas */

  /* ---------- Acentos ---------- */
  --acc:#2F5BD8;          /* azul de marca para acciones */
  --acc-hi:#4A76F0;
  --vivo:#E01B24;         /* rojo de la insignia EN VIVO */
  --vivo-hi:#FF2A34;
  --aire:#22B95A;         /* verde: la señal está al aire */
  --wa:#22B95A;           /* verde de WhatsApp */

  /* ---------- Colores de los accesos rápidos ----------
     Cada tarjeta de la rejilla lleva su propio degradado. */
  --a-vivo:linear-gradient(150deg,#E23744,#A8121C);
  --a-web:linear-gradient(150deg,#2F6BE0,#12399C);
  --a-parrilla:linear-gradient(150deg,#1FA35B,#0C6B39);
  --a-privacidad:linear-gradient(150deg,#7B44D8,#4A1E96);
  --a-pauta:linear-gradient(150deg,#F09A1E,#C2640A);

  /* ---------- Tipografía ---------- */
  --body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ttl:var(--body);

  /* ---------- Formas ---------- */
  --r-s:12px;             /* radio pequeño: pastillas, miniaturas */
  --r:18px;               /* radio normal: tarjetas */
  --r-l:24px;             /* radio grande: reproductor y accesos */
  --sombra:0 2px 6px rgba(0,0,0,.20), 0 14px 34px rgba(0,0,0,.28);
  --sombra-alta:0 4px 10px rgba(0,0,0,.26), 0 26px 60px rgba(0,0,0,.42);

  /* ---------- Medidas ---------- */
  --maxw:1280px;
  --barra:64px;           /* alto de la barra superior */
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
}