/* Radio Medios 2026 — capa de EMISORAS (tema)
   Se carga después de base.css + theme-extra.css.

   Radio Medios no es un solo sitio: es una red de tres emisoras. Cada
   categoría del sitio viejo (/categoria/la-furia-del-norte, /radio-red-espacio,
   /radio-medio-noticias) funciona como la portada de su emisora, con logo,
   color y stream propios. Esta hoja resuelve ese cambio de identidad con
   `body[data-emisora]`: los tokens de color de base.css se reescriben y todo
   el sistema (badges, kickers, hovers, franjas) se reencuadra solo. */

/* =========================================================================
   1) IDENTIDAD POR EMISORA
   ========================================================================= */

/* Red / portada — rojo Radio Medios */
body[data-emisora="red"]{
  --rojo:#D90A0A; --rojo-osc:#A80707; --rojo-brand:#F90909;
  --emisora-tinta:#0f0f0f;
}

/* La Furia del Norte — paleta completa del logotipo.
   Colores muestreados del archivo original: rojo #FC0000 (tipografía),
   amarillo #FCCC48 (fondo del banner), ámbar #F09C0C (sombrero),
   verde #00846C ("del Norte") y negro (la pantera y los contornos).
   El rojo del logo da 4.1:1 sobre blanco, así que para texto pequeño se usa
   una versión más oscura y el #FC0000 se reserva para rellenos. */
body[data-emisora="furia"]{
  --rojo:#C4001A; --rojo-osc:#960014; --rojo-brand:#FC0000;
  --furia-amarillo:#FCCC48;
  --furia-ambar:#F09C0C;
  --furia-verde:#00846C;
  --emisora-acento:var(--furia-ambar);
  --emisora-apoyo:var(--furia-verde);
  --emisora-tinta:#000;
}

/* Radio Red Espacio — azul de la antena */
body[data-emisora="espacio"]{
  --rojo:#2264A8; --rojo-osc:#184D84; --rojo-brand:#3A8DD8;
  --emisora-acento:#E8402A;   /* punto rojo del logo */
  --emisora-tinta:#0d1826;
}

/* Radio Medio Noticias — rojo/negro informativo */
body[data-emisora="noticias"]{
  --rojo:#C1121F; --rojo-osc:#8E0D17; --rojo-brand:#E01E28;
  --emisora-tinta:#0f0f0f;
}

/* La Furia usa un logotipo casi cuadrado: necesita más alto que los demás. */
body[data-emisora="furia"] .header .logo img{height:74px}
@media(max-width:780px){body[data-emisora="furia"] .header .logo img{height:56px}}

/* =========================================================================
   2) SELECTOR DE EMISORAS (barra superior del nav)
   ========================================================================= */
.emisoras{background:#0f0f0f;border-bottom:1px solid #000}
.emisoras .wrap{display:flex;align-items:stretch;gap:0}
.emisoras a{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:11px 18px;color:#8f8f8f;
  border-right:1px solid #232323;transition:background .18s,color .18s;
  min-height:56px;
}
.emisoras a:first-child{border-left:1px solid #232323}
.emisoras a .nom{
  font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#e6e6e6;line-height:1.15;
}
.emisoras a .dial{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;color:#7a7a7a}
.emisoras a:hover{background:#191919;color:#fff}
.emisoras a:hover .nom{color:#fff}
.emisoras a.on{background:var(--rojo-brand)}
.emisoras a.on .nom,.emisoras a.on .dial{color:#fff}
.emisoras a.on .dial{color:rgba(255,255,255,.82)}
@media(max-width:780px){
  .emisoras .wrap{padding:0;overflow-x:auto;scrollbar-width:none}
  .emisoras .wrap::-webkit-scrollbar{display:none}
  .emisoras a{flex:0 0 auto;min-width:60vw;padding:10px 16px;min-height:52px}
}

/* =========================================================================
   3) CABECERA DE EMISORA (portada de categoría)
   ========================================================================= */
.emisora-head{
  background:var(--emisora-tinta,#0f0f0f);color:#fff;
  padding:34px 0 30px;margin-bottom:0;position:relative;overflow:hidden;
}
.emisora-head::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--rojo-brand),var(--emisora-acento,#ff6a6a),var(--rojo-brand));
}
.emisora-head .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.emisora-head .marca{
  background:#fff;padding:14px 18px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.emisora-head .marca img{height:76px;width:auto;display:block}
.emisora-head .datos .dial{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rojo-brand);color:#fff;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.16em;
  padding:6px 13px;margin-bottom:12px;
}
.emisora-head .datos h1{
  font-size:44px;font-weight:900;line-height:1.02;letter-spacing:-.022em;color:#fff;
  font-family:var(--sans);margin-bottom:10px;
}
.emisora-head .datos p{font-size:15.5px;color:#a8a8a8;line-height:1.5;max-width:640px}
.emisora-head .escucha{
  display:inline-flex;align-items:center;gap:12px;flex-shrink:0;
  background:var(--rojo-brand);color:#fff;min-height:58px;padding:0 28px;
  font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  transition:background .18s,color .18s,transform .18s;
}
.emisora-head .escucha:hover{background:#fff;color:var(--emisora-tinta,#0f0f0f);transform:translateY(-2px)}
.emisora-head .escucha svg{flex-shrink:0}

@media(max-width:1100px){
  .emisora-head .wrap{grid-template-columns:auto 1fr;gap:24px}
  .emisora-head .escucha{grid-column:1/-1;justify-content:center}
}
@media(max-width:780px){
  .emisora-head{padding:24px 0 22px}
  .emisora-head .wrap{grid-template-columns:1fr;gap:18px;text-align:center}
  .emisora-head .marca{justify-self:center;padding:12px 16px}
  .emisora-head .marca img{height:60px}
  .emisora-head .datos h1{font-size:28px}
  .emisora-head .datos p{font-size:14.5px;margin:0 auto}
  .emisora-head .datos .dial{margin-bottom:10px}
  .emisora-head .escucha{width:100%;justify-content:center;min-height:52px}
}

/* =========================================================================
   4) FRANJA "ESCÚCHANOS EN VIVO" (como en el sitio actual)
   ========================================================================= */
.envivo{display:grid;grid-template-columns:auto 1fr;gap:0;margin:26px 0 34px;border:1px solid var(--rule)}
.envivo__lbl{
  background:var(--emisora-tinta,#0f0f0f);color:#fff;
  display:flex;align-items:center;gap:10px;padding:0 26px;min-height:64px;
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
}
.envivo__lbl b{background:var(--rojo-brand);color:#fff;padding:4px 10px;font-size:12px;letter-spacing:.1em}
.envivo__body{display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;min-height:64px}
.envivo__nom{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--tinta);white-space:nowrap}
.envivo__live{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  background:var(--rojo-brand);color:#fff;padding:3px 9px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
}
.envivo__live .rm-dot{background:#fff}
.envivo__sep{width:1px;align-self:stretch;background:var(--rule);margin:14px 4px}
.envivo__play{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--emisora-tinta,#0f0f0f);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:background .16s,transform .16s;
}
.envivo__play:hover{background:var(--rojo-brand);transform:scale(1.06)}
.envivo__now{font-size:12.5px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:780px){
  .envivo{grid-template-columns:1fr;margin:18px 0 26px}
  .envivo__lbl{min-height:48px;padding:0 16px;font-size:11.5px;justify-content:center}
  .envivo__body{padding:12px 16px;min-height:0;flex-wrap:wrap}
  .envivo__sep{display:none}
  .envivo__now{width:100%;white-space:normal}
}

/* =========================================================================
   5) TARJETAS DE EMISORA EN LA PORTADA DE LA RED
   ========================================================================= */
.red-emisoras{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:10px 0 6px}
.red-emisora{
  background:#0f0f0f;color:#fff;padding:24px 22px 22px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:16px;transition:transform .2s;
  border:1px solid #1e1e1e;
}
.red-emisora:hover{transform:translateY(-4px);color:#fff}
.red-emisora::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rm-acento,#F90909)}
.red-emisora .marca{background:#fff;border-radius:8px;padding:12px 14px;display:flex;align-items:center;justify-content:center;min-height:96px}
.red-emisora .marca img{max-height:72px;width:auto;display:block}
.red-emisora .nom{font-size:19px;font-weight:900;letter-spacing:-.012em;line-height:1.15;color:#fff}
.red-emisora .desc{font-size:13px;color:#9a9a9a;line-height:1.5;flex:1}
.red-emisora .cta{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  background:var(--rm-acento,#F90909);color:#fff;padding:0 18px;align-self:flex-start;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;transition:.18s;
}
.red-emisora:hover .cta{background:#fff;color:#0f0f0f}
@media(max-width:980px){.red-emisoras{grid-template-columns:1fr;gap:18px}}

/* =========================================================================
   6) AJUSTES MENORES
   ========================================================================= */
/* El logo de La Furia es alto: el header necesita algo más de aire. */
.header .logo img{max-width:100%}

/* Franja bajo el nav — slot `strip` del tema: aliados o autopromoción.
   Envuelve en pantallas angostas para no forzar scroll horizontal. */
.franja-aliado{
  background:#fff;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 12px;
  padding:9px 16px;font-size:11px;color:var(--gris);
  text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  text-align:center;
}
.franja-aliado img{height:26px;width:auto}
.franja-aliado--banner{padding:8px 16px}
.franja-aliado--banner a{display:inline-flex;line-height:0}
.franja-aliado--banner img{height:46px;max-width:100%;object-fit:contain}
@media(max-width:780px){
  .franja-aliado{font-size:10px;letter-spacing:.08em;padding:8px 12px}
  .franja-aliado--banner img{height:36px}
}

/* Bloque de sección con acento de emisora en la portada de la red */
.bloque-emisora .section-h{border-bottom-color:var(--bloque-color,var(--tinta))}
.bloque-emisora .section-h h2 .red{color:var(--bloque-color,var(--rojo))}
.bloque-emisora .section-h .more{color:var(--bloque-color,var(--rojo))}
.bloque-emisora .card .ph .cat{background:var(--bloque-color,var(--rojo-brand))}
.bloque-emisora .card .k,.bloque-emisora .compact-list .k{color:var(--bloque-color,var(--rojo))}

/* Miniatura de logo dentro del encabezado de sección.
   Los logotipos de la red tienen proporciones muy distintas (La Furia es casi
   cuadrado, los otros dos apaisados): se limita ancho y alto para que los tres
   pesen visualmente igual. */
.section-h .logo-sec{height:40px;max-width:112px;width:auto;object-fit:contain;margin-right:4px;display:block}
@media(max-width:780px){.section-h .logo-sec{height:30px;max-width:84px}}
.section-h{align-items:center}

/* Un grid que convive con una barra lateral más alta no debe estirar sus filas
   para rellenar el hueco: las notas quedarían separadas por vacíos enormes. */
.has-side > .grid,
.has-side > div > .grid{align-content:start}
.has-side aside{align-self:start}

/* Panel lateral */
.panel-caja{border:1px solid var(--rule);padding:18px 16px;margin-bottom:0}
.panel-caja h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--tinta);padding-bottom:10px;border-bottom:3px solid var(--rojo);margin-bottom:14px}

/* =========================================================================
   8) LA FURIA DEL NORTE — la paleta completa del logotipo
   -------------------------------------------------------------------------
   El resto de la red trabaja con un solo acento. La Furia tiene cinco colores
   y desaprovecharlos la deja indistinguible de Radio Medio Noticias. Aquí se
   reparten por jerarquía: negro y rojo sostienen la estructura, el amarillo
   marca las franjas de emisora, el ámbar señala lo que está al aire y el
   verde queda para acentos secundarios.
   ========================================================================= */

/* --- Cabecera: la cinta superior recorre los colores del logotipo --- */
body[data-emisora="furia"] .emisora-head::before{
  background:linear-gradient(90deg,
    var(--rojo-brand) 0%, var(--furia-ambar) 34%,
    var(--furia-amarillo) 58%, var(--furia-verde) 100%);
  height:5px;
}
/* El dial va en ámbar sobre negro: el rojo ahí competía con el logotipo. */
body[data-emisora="furia"] .emisora-head .datos .dial{
  background:var(--furia-ambar);color:#000;
}
body[data-emisora="furia"] .emisora-head .escucha{
  background:var(--rojo-brand);color:#fff;
}
body[data-emisora="furia"] .emisora-head .escucha:hover{
  background:var(--furia-amarillo);color:#000;
}

/* --- Franja "escúchanos en vivo": banda amarilla, como el banner --- */
body[data-emisora="furia"] .envivo{border-color:#000}
body[data-emisora="furia"] .envivo__lbl{background:#000;color:var(--furia-amarillo)}
body[data-emisora="furia"] .envivo__lbl b{background:var(--rojo-brand);color:#fff}
body[data-emisora="furia"] .envivo__body{background:var(--furia-amarillo)}
body[data-emisora="furia"] .envivo__nom{color:#000}
body[data-emisora="furia"] .envivo__now{color:#5a4406}
body[data-emisora="furia"] .envivo__sep{background:rgba(0,0,0,.22)}
body[data-emisora="furia"] .envivo__play{background:#000;color:var(--furia-amarillo)}
body[data-emisora="furia"] .envivo__play:hover{background:var(--rojo-brand);color:#fff}
body[data-emisora="furia"] .envivo__live{background:var(--rojo-brand)}

/* --- Franja del banner bajo el menú ---
   El banner ya trae su propio fondo amarillo con filo negro. Sobre amarillo
   se leía como una calcomanía pegada encima; sobre negro el arte se sostiene
   solo y la franja hace de rótulo de emisora. */
body[data-emisora="furia"] .franja-aliado--banner{
  background:#000;border-bottom:0;padding:10px 16px;
}
body[data-emisora="furia"] .franja-aliado--banner img{height:60px}
@media(max-width:780px){
  body[data-emisora="furia"] .franja-aliado--banner img{height:44px}
}

/* --- Programación: el ámbar marca el aire --- */
body[data-emisora="furia"] .rm-strip:before{
  background:linear-gradient(90deg,var(--rojo-brand),var(--furia-ambar),var(--furia-amarillo));
}
body[data-emisora="furia"] .rm-eyebrow{background:var(--furia-ambar);color:#000}
body[data-emisora="furia"] .rm-slot__hour{color:var(--furia-ambar)}
body[data-emisora="furia"] .rm-slot:hover{border-color:var(--furia-ambar)}
body[data-emisora="furia"] .rm-slot.is-now{border-color:var(--furia-amarillo);background:#1d1603}
body[data-emisora="furia"] .rm-slot.is-now .rm-slot__hour{color:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-cta:hover{background:var(--furia-amarillo);color:#000}
body[data-emisora="furia"] .rm-strip-foot .btn{color:var(--furia-ambar);border-color:var(--furia-ambar)}
body[data-emisora="furia"] .rm-strip-foot .btn:hover{color:var(--furia-amarillo);border-color:var(--furia-amarillo)}

/* --- Tarjeta "en vivo" del lateral --- */
body[data-emisora="furia"] .rm-live::before{
  background:linear-gradient(90deg,var(--rojo-brand),var(--furia-ambar),var(--furia-amarillo));
}
body[data-emisora="furia"] .rm-live__eyebrow{color:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-live .rm-dot{background:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-live__cta:hover{background:var(--furia-amarillo);color:#000}

/* --- Verde: acentos secundarios, para que no todo sea rojo --- */
body[data-emisora="furia"] .cat-hero .side .k{color:var(--furia-verde)}
body[data-emisora="furia"] .compact-list .k{color:var(--furia-verde)}
body[data-emisora="furia"] .article-side .panel h3{border-bottom-color:var(--furia-verde)}

/* --- Numeración de "lo más escuchado" en ámbar --- */
body[data-emisora="furia"] .tops li::before{color:var(--furia-ambar)}

/* --- Pie y reproductor --- */
body[data-emisora="furia"] footer{border-top-color:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-player{border-top-color:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-player__live{color:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-player .rm-dot{background:var(--furia-amarillo)}
body[data-emisora="furia"] .rm-player__btn{background:var(--rojo-brand)}
body[data-emisora="furia"] .rm-player__btn:hover{background:var(--furia-amarillo);color:#000}
body[data-emisora="furia"] .emisoras a.on{background:var(--rojo-brand)}

/* --- Paginación --- */
body[data-emisora="furia"] .pagination .on{background:#000;border-color:#000}

/* =========================================================================
   9) BLOQUE DE LA FURIA EN LA PORTADA DE LA RED
   La portada es territorio de Radio Medios, pero el bloque de La Furia y su
   tarjeta de emisora sí llevan su cinta de color para que se reconozca.
   ========================================================================= */
.red-emisora--furia::before{
  background:linear-gradient(90deg,#FC0000 0%,#F09C0C 45%,#FCCC48 100%)!important;
}
.red-emisora--furia .marca{background:#FCCC48}
.bloque-emisora--furia .section-h{border-bottom-color:#000}
.bloque-emisora--furia .section-h::after{
  content:"";position:absolute;left:0;bottom:-3px;width:96px;height:3px;
  background:linear-gradient(90deg,#F09C0C,#FCCC48);
}
.bloque-emisora--furia .section-h{position:relative}

/* Clima del topbar en el header */
.header .clima svg{color:var(--gris)}