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

   TV Ipiales: los colores de su logotipo —el rojo y el naranja
   encendidos del splash— sobre un fondo vino profundo, con el
   dorado como acento para lo sagrado.
   ============================================================ */

/* ---------- 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 ---------- */
  --fondo:#2A0906;
  --fondo-2:#6A170B;      /* rojo vino del degradado */
  --fondo-3:#B8330F;      /* naranja rojizo, arriba */
  --panel:rgba(255,255,255,.07);
  --panel-2:rgba(255,255,255,.12);
  --panel-solido:#FFFFFF;          /* tarjetas blancas: patrocinadores */
  --negro:#170403;                 /* 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,.80);
  --txt-3:rgba(255,255,255,.58);
  --txt-inv:#2A0906;

  /* ---------- Acentos ---------- */
  --acc:#E8590C;          /* naranja de marca para acciones */
  --acc-hi:#FF7A26;
  --oro:#F2C14E;          /* dorado: lo sagrado, los títulos */
  --vivo:#E01B24;         /* rojo de la insignia EN VIVO */
  --vivo-hi:#FF2A34;
  --aire:#22B95A;
  --wa:#22B95A;
  --candela:#2A3582;      /* azul de Candela Estéreo */

  /* ---------- Colores de los accesos rápidos ---------- */
  --a-vivo:linear-gradient(150deg,#E8361B,#A3150C);
  --a-radio:linear-gradient(150deg,#3C4BB0,#1E2766);
  --a-parrilla:linear-gradient(150deg,#F28C28,#C0560A);
  --a-acerca:linear-gradient(150deg,#D9A21E,#8F5E08);
  --a-patrocinar:linear-gradient(150deg,#C2185B,#7A0F3A);
  --a-privacidad:linear-gradient(150deg,#7A4A3A,#43231A);

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

  /* ---------- Formas ---------- */
  --r-s:12px;
  --r:18px;
  --r-l:24px;
  --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;
  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
}

/* El panel de configuración usa los degradados del motor original */
:root{
  --a-pauta:var(--a-patrocinar);
  --a-web:var(--a-radio);
}