/* ==========================================================
   CIUDAD CCS · FM — hoja de estilos
   Tema oscuro por defecto; toggle persiste en localStorage.
   html[data-theme="light"] activa el tema claro.
   Ciudad CCS .fm hereda la misma lógica de tema oscuro default.
   ========================================================== */

/* ======================== VARIABLES — TEMA OSCURO (default) ======================== */

:root {
  /* -- Paleta de marca (invariante entre temas) -- */
  --fucsia:        #E72275;
  --fucsia-claro:  #F2699E;
  --fucsia-oscuro: #A3184F;
  --indigo:        #1F4C85;
  --indigo-claro:  #3B6FAB;
  --indigo-oscuro: #0F2540;

  /* -- Fondos -- */
  --oscuro:         #0B1829;
  --superficie:     #111F33;
  --superficie-alta:#16263D;
  --body-bg-de:     #060D16;
  --body-bg-a:      #0B1829;
  --hero-band-bg:   #04080F;
  --hero-photo-overlay: rgba(4, 8, 15, 0.65);

  /* -- Texto -- */
  --blanco:              #FFFFFF;
  --muted:               #8C97A6;
  --color-texto-suave:   rgba(255, 255, 255, 0.78);
  --color-texto-sutil:   rgba(255, 255, 255, 0.80);
  --color-placeholder:   rgba(255, 255, 255, 0.50);

  /* -- Bordes e interacciones -- */
  --borde:               rgba(255, 255, 255, 0.08);
  --borde-hover:         rgba(255, 255, 255, 0.20);
  --hover-overlay:       rgba(255, 255, 255, 0.06);
  --hover-overlay-strong:rgba(255, 255, 255, 0.14);

  /* -- Componentes -- */
  --header-bg:           rgba(11, 24, 41, 0.70);
  --header-scrolled-bg:  rgba(11, 24, 41, 0.92);
  --overlay-bg:          rgba(6, 13, 22, 0.78);
  --badge-off-bg:        rgba(255, 255, 255, 0.12);
  --shadow-dropdown:     0 8px 24px rgba(0, 0, 0, 0.40);

  /* -- Tipografía y layout -- */
  --font-display: "Poppins", sans-serif;
  --radius:    14px;
  --radius-sm:  8px;
  --maxw:    1180px;
}

/* ======================== VARIABLES — TEMA CLARO ======================== */

html[data-theme="light"] {
  --oscuro:          #F4F4F4;
  --superficie:      #FFFFFF;
  --superficie-alta: #EBF0F8;
  --body-bg-de:      #F4F4F4;
  --body-bg-a:       #E8EFF8;
  --hero-band-bg:    #DAE3F0;
  --hero-photo-overlay: rgba(218, 227, 240, 0.65);

  --blanco:              #111827;
  --muted:               #5A6785;
  --color-texto-suave:   rgba(17, 24, 39, 0.78);
  --color-texto-sutil:   rgba(17, 24, 39, 0.80);
  --color-placeholder:   rgba(17, 24, 39, 0.40);

  --borde:               rgba(0, 0, 0, 0.10);
  --borde-hover:         rgba(31, 76, 133, 0.30);
  --hover-overlay:       rgba(31, 76, 133, 0.06);
  --hover-overlay-strong:rgba(31, 76, 133, 0.12);

  --header-bg:           rgba(255, 255, 255, 0.70);
  --header-scrolled-bg:  rgba(255, 255, 255, 0.95);
  --overlay-bg:          rgba(0, 0, 0, 0.50);
  --badge-off-bg:        rgba(0, 0, 0, 0.10);
  --shadow-dropdown:     0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ======================== RESET Y BASE ======================== */

* { box-sizing: border-box; }

html { 
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: linear-gradient(180deg, var(--body-bg-de) 0%, var(--body-bg-a) 100%);
  background-attachment: fixed;
  color: var(--blanco);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  background: var(--fucsia);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  z-index: 200;
}

/* ======================== HEADER ======================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  background: var(--header-scrolled-bg);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--borde);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}

.header-logo img {
  height: 40px;
  width: auto;
  min-width: 120px;
}

/* Modo claro: mostrar variante positiva (P), ocultar la negativa (N) */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark  { display: none; }
html[data-theme="light"] .logo-light { display: block; }

.header-nav {
  display: flex;
  gap: 28px;
  margin-left: 8px;
  flex: 1;
}
.header-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
.header-nav a:hover,
.header-nav a:focus-visible { color: var(--blanco); }

/* -- Nav dropdowns -- */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible { color: var(--blanco); }
.nav-dropdown-trigger::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 1px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.nav-dropdown-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 210px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  padding: 6px;
  z-index: 150;
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-dropdown);
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  color: var(--muted);
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
  background: var(--superficie);
  color: var(--blanco);
}

/* -- Header controls: tema toggle + buscador -- */
.header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;   /* nueva línea */
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--blanco); background: var(--hover-overlay); }

/* Iconos sol/luna: CSS maneja cuál se muestra según el tema */
.icon-luna { display: none; }
html[data-theme="light"] .icon-sol  { display: none; }
html[data-theme="light"] .icon-luna { display: block; }

/* -- Buscador -- */
.nav-search-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-search-trigger:hover,
.nav-search-trigger:focus-visible { color: var(--blanco); background: var(--hover-overlay); }
.nav-search-trigger[aria-expanded="true"] { color: var(--blanco); background: var(--hover-overlay-strong); }

/* -- Hamburguesa -- */
.nav-hamburger { display: none; }
.nav-hamburger .icon-close-menu { display: none; }
.nav-hamburger.is-open .icon-menu       { display: none; }
.nav-hamburger.is-open .icon-close-menu { display: block; }

.nav-search-panel {
  right: 0;
  left: auto;
  min-width: 360px;
  padding: 0px;
}
.search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search-input {
  flex: 1;
  min-width: 0;
  background: var(--oscuro);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  color: var(--blanco);
  font-family: var(--font-display);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
.search-input:focus { border-color: var(--fucsia); }
.search-input::placeholder { color: var(--muted); }
.search-submit-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--fucsia);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.search-submit-btn:hover,
.search-submit-btn:focus-visible { background: var(--fucsia-oscuro); }

/* -- Header status -- */
.header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fucsia);
  margin-right: 8px;
  flex-shrink: 0;
}
.status-dot.is-off { background: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .status-dot:not(.is-off) { animation: pulse 1.8s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(231, 34, 117, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(231, 34, 117, 0); }
}

@media (max-width: 720px) {
  /* header-nav: visibilidad controlada por atributo hidden via JS */
  .header-nav[hidden] { display: none; }
  .header-inner { flex-wrap: wrap; padding-bottom: 8px; }
  .header-status {
    flex: 0 0 100%;
    order: 10;
    justify-content: center;
    padding-top: 6px;
    border-top: 1px solid var(--borde);
    font-size: 12px;
  }

  /* Botón hamburguesa */
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--muted);
    transition: color .15s ease, background .15s ease;
  }
  .nav-hamburger:hover,
  .nav-hamburger:focus-visible { color: var(--blanco); background: var(--hover-overlay); }
  .nav-hamburger[aria-expanded="true"] { color: var(--blanco); background: var(--hover-overlay-strong); }

  /* Panel del nav cuando está abierto (sin [hidden]) */
  .header-nav:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    flex: none;
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 400;
    background: var(--superficie-alta);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--shadow-dropdown);
    padding: 8px 0;
  }
  /* Links directos del nav */
  .header-nav > a {
    display: block;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 500;
  }
  /* Dropdowns: fluyen en columna */
  .header-nav .nav-dropdown { position: static; }
  .header-nav .nav-dropdown-trigger {
    width: 100%;
    padding: 11px 20px;
    justify-content: flex-start;
  }
  /* Sub-menús inline (no absolutos) */
  .header-nav .nav-dropdown-menu {
    position: static !important;
    box-shadow: none;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--borde);
    background: transparent;
    padding: 4px 0;
    min-width: unset;
    width: 100%;
    max-height: 55vh;
    overflow-y: auto;
  }
  .header-nav .nav-dropdown-item {
    padding-left: 32px;
    border-radius: 0;
  }
}

/* ======================== HERO ======================== */

.hero {
  padding: 48px 24px 56px;
  /* Overlay del color de la banda (con algo de transparencia)
     sobre una foto panorámica de Caracas en cover. El color que
     ya definimos sigue mandando; la foto da contexto de lugar.
     Si la imagen no existe todavía, se ve solo el color de banda. */
  background-color: var(--hero-band-bg);
  background-image:
    linear-gradient(var(--hero-photo-overlay), var(--hero-photo-overlay)),
    url("../assets/hero/hero01.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* Parallax simple: la foto se fija al viewport y el contenido
     scrollea encima. Efecto sutil en desktop; en móvil los
     navegadores lo ignoran y se comporta como estático (no rompe). */
  background-attachment: fixed;
}
/* ── HERO RADIO: cabina reducida a la izquierda, lo que suena al
   centro, controles de escucha con ecualizador. Invierte la
   jerarquía del .tv: aquí manda la info del programa, no el video. */
.hero-radio {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Cabina: contenedor del reproductor embebido de GlobalHost, en pequeño. */
.radio-cabina {
  flex: 0 0 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-cabina-frame {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--indigo-oscuro) 0%, var(--oscuro) 70%);
  /* padding-top ampliado: a diferencia de un thumbnail de video, los
     controles nativos del reproductor de GlobalHost (play, progreso,
     volumen) están siempre visibles, así que el badge necesita su
     propio espacio arriba para no taparlos. */
  padding: 38px 14px 14px;
  position: relative;
}
.radio-cabina-player {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 8px;
  display: block;
}
@media (max-width: 480px) {
  .radio-cabina-player { height: 64px; }
}
.radio-cabina-label {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.player-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--fucsia);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}
.player-badge.is-off { background: var(--badge-off-bg); color: var(--muted); }

.hero-meta { flex: 1; min-width: 0; padding-top: 0; }
.hero-eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fucsia);
}
.hero-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  line-height: 1.08;
}
.hero-conductor {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}
.hero-desc {
  margin: 0;
  font-size: 14px;
  color: var(--color-texto-suave);
  max-width: 46ch;
}

/* Controles de escucha: botón de sonido + ecualizador + etiqueta. */
.radio-controles {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
/* Ecualizador: barras que se animan solo cuando el audio está activo. */
.radio-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.radio-eq span {
  width: 3px;
  background: var(--fucsia);
  border-radius: 2px;
  height: 30%;
  transform-origin: bottom;
}
/* Animado solo cuando el contenedor tiene la clase is-playing. */
.radio-eq.is-playing span { animation: radioEq 0.7s ease-in-out infinite; }
.radio-eq span:nth-child(1) { animation-duration: 0.9s;  animation-delay: 0s;    }
.radio-eq span:nth-child(2) { animation-duration: 0.7s;  animation-delay: 0.1s;  }
.radio-eq span:nth-child(3) { animation-duration: 0.6s;  animation-delay: 0.2s;  }
.radio-eq span:nth-child(4) { animation-duration: 0.8s;  animation-delay: 0.15s; }
.radio-eq span:nth-child(5) { animation-duration: 0.65s; animation-delay: 0.05s; }
.radio-eq span:nth-child(6) { animation-duration: 0.75s; animation-delay: 0.25s; }
.radio-eq span:nth-child(7) { animation-duration: 0.7s;  animation-delay: 0.3s;  }
.radio-eq span:nth-child(8) { animation-duration: 0.85s; animation-delay: 0.12s; }
.radio-eq span:nth-child(9) { animation-duration: 0.6s;  animation-delay: 0.18s; }
.radio-eq span:nth-child(10){ animation-duration: 0.8s;  animation-delay: 0.22s; }
@keyframes radioEq { 0%, 100% { height: 25%; } 50% { height: 100%; } }

@media (max-width: 880px) {
  .hero-radio { flex-direction: column; align-items: stretch; gap: 24px; }
  .radio-cabina { flex: 1 1 auto; max-width: 340px; margin: 0 auto; width: 100%; }
  .radio-controles { flex-wrap: wrap; }
}

/* ======================== PARRILLA ======================== */

.parrilla { padding: 56px 24px 56px; }
.parrilla-head {
  max-width: var(--maxw);
  margin: 0 auto 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.parrilla-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.parrilla-fecha { margin: 0; font-size: 13px; color: var(--muted); text-transform: capitalize; }

.parrilla-track {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-top: 8px;    /* espacio para el translateY del hover sin clipping */
  padding-bottom: 8px;
}
.parrilla-track::-webkit-scrollbar { height: 6px; }
.parrilla-track::-webkit-scrollbar-thumb { background: var(--superficie-alta); border-radius: 999px; }

.parrilla-card {
  flex: 0 0 168px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.parrilla-card:hover,
.parrilla-card:focus-visible { background: var(--superficie-alta); transform: translateY(-2px); }

.parrilla-hora { font-size: 13px; font-weight: 600; color: var(--muted); }
.parrilla-nombre { font-size: 14px; font-weight: 600; }
/* Etiquetas de estado de la parrilla. Tres tipos con color propio:
   en vivo (fucsia), a continuación (índigo), próximamente (tenue). */
.parrilla-tag {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.parrilla-tag--live { color: var(--fucsia); }
.parrilla-tag--next { color: var(--indigo-claro); }
.parrilla-tag--soon { color: var(--muted); }

/* Borde de la tarjeta destacada: mismo color (fucsia) para los tres
   estados. La urgencia la comunica la etiqueta de texto, no el borde. */
.parrilla-card.is-live,
.parrilla-card.is-next,
.parrilla-card.is-soon { border-color: var(--fucsia); }

.parrilla-vacio { color: var(--muted); font-size: 14px; }

/* Arrastre horizontal: el cursor indica que se puede jalar. */
.parrilla-track { cursor: grab; }
.parrilla-track.is-dragging { cursor: grabbing; }
.parrilla-track.is-dragging .parrilla-card { cursor: grabbing; }

/* Separador de día en la parrilla semanal. Etiqueta con las letras
   APILADAS en vertical, de pie (no giradas): J/U/E/V/E/S de arriba
   a abajo. Tamaño único calibrado para que "MIÉRCOLES" (9 letras)
   quepa en la altura de la tarjeta; el resto usa el mismo tamaño. */
.parrilla-daysep {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-left: 2px solid var(--borde);
  margin-left: 4px;
}
/* El primer separador ("Hoy") no necesita margen a la izquierda. */
.parrilla-daysep:first-child { margin-left: 0; }
.parrilla-daysep-label {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 0.62;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ======================== PROGRAMAS ======================== */

.programs { padding: 8px 24px 72px; }
.programs-head { max-width: var(--maxw); margin: 0 auto 8px; }
.programs-head h2 { font-size: 20px; font-weight: 700; }

.programs-list {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.program-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--borde);
}
.programs-list .program-row:first-child { border-top: none; }

.program-photo {
  width: 140px;
  height: 140px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--superficie);
  position: relative;
}
.program-photo img { width: 100%; height: 100%; object-fit: cover; }

.program-photo.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(160deg, var(--indigo-oscuro), var(--superficie) 80%);
}

/* Ghost del ícono CCS para programas sin logo propio */
.program-photo.is-ghost-brand {
  flex-direction: row;
  gap: 0;
  background: var(--superficie);
}
.is-ghost-brand .ghost-icon {
  width: 60%;
  height: auto;
  object-fit: unset;
  opacity: 0.18;
  filter: grayscale(1) brightness(1.8);
}
html[data-theme="light"] .is-ghost-brand .ghost-icon {
  filter: grayscale(1) brightness(0.4);
  opacity: 0.25;
}

.placeholder-iniciales {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-placeholder);
}
.placeholder-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.program-info { display: flex; flex-direction: column; gap: 6px; }
.program-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fucsia);
}
.program-nombre { margin: 0; font-size: 21px; font-weight: 700; }
.program-horario { margin: 0; font-size: 13px; color: var(--muted); }
.program-desc {
  margin: 4px 0 4px;
  font-size: 14px;
  color: var(--color-texto-suave);
  max-width: 58ch;
}
.program-archivo-btn {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blanco);
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--fucsia);
  transition: padding-right 0.15s ease;
}
.program-archivo-btn span { margin-left: 6px; }
.program-archivo-btn:hover,
.program-archivo-btn:focus-visible { padding-right: 4px; }

/* ── Layout de dos columnas: lista + sidebar de publicidad ── */
.programs-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
/* La lista ya no se centra sola: ahora vive dentro del grid. */
.programs-layout .programs-list { max-width: none; margin: 0; }

.programs-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 88px;
}

/* ── Bloque de anuncio (compartido por todas las ubicaciones) ── */
.promo { margin: 0; }
.promo-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--superficie);
  border: 1px solid var(--borde);
  line-height: 0;
}
/* Velo del color de banda al 10% en reposo; se disipa a 0% (imagen
   limpia) al pasar el mouse, junto con el zoom que ya existe. */
.promo-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-band-bg);
  opacity: 0.25;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.promo a:hover .promo-media::after,
.promo a:focus-visible .promo-media::after { opacity: 0; }
/* La imagen define su propia altura (2:3 en el banner horario, 1:1 en
   los swipers). El contenedor la respeta; no se fuerza ninguna relación
   de aspecto. overflow:hidden se conserva para el zoom. */
.promo-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
/* Hover: la imagen crece 5% pero el contenedor la recorta
   (overflow: hidden), así el bloque no cambia de tamaño. */
.promo a:hover .promo-media img,
.promo a:focus-visible .promo-media img {
  transform: scale(1.05);
}
.promo a { display: block; }

/* Etiqueta editorial — SIEMPRE visible, no ocultable. */
.promo-label {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Slots intercalados en la lista (solo mobile) — ocultos en desktop */
.program-promo-slot { display: none; }

@media (max-width: 900px) {
  /* El sidebar como columna desaparece; su inventario se intercala
     dentro de la lista en su lugar. Mismo inventario, otra forma.
     El contenedor cambia de proporción según el ancho. */
  .programs-layout { grid-template-columns: 1fr; gap: 0; }
  .programs-aside { display: none; }
  .program-promo-slot {
    display: block;
    padding: 28px 0;
    border-top: 1px solid var(--borde);
  }
  /* Franja tablet (600–900px): el anuncio se intercala centrado
     con ancho limitado. Cada imagen conserva su alto natural. */
  .program-promo-slot .promo {
    max-width: 300px;
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  /* Móvil real: mismo criterio, ancho un poco mayor. La imagen
     mantiene su proporción propia (no se fuerza cuadrado). */
  .program-promo-slot .promo {
    max-width: 340px;
  }
}

@media (max-width: 640px) {
  .program-row { grid-template-columns: 88px 1fr; gap: 16px; }
  .program-photo { width: 88px; height: 88px; }
}

/* ======================== FOOTER ======================== */

.site-footer {
  padding: 64px 24px 48px;
  background: var(--hero-band-bg);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

/* Columna principal (izquierda): logo + redes + ecosistema + copy.
   Es el bloque de marca completo del sitio. */
.footer-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.footer-logo { height: 50px; min-width: 120px; }

/* Iconos de redes. Monocromo por defecto; en hover, color nativo. */
.footer-redes {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--muted);
  border: 1px solid var(--borde);
  border-radius: 999px;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.footer-red:hover,
.footer-red:focus-visible { color: #fff; border-color: transparent; }
/* Cada red enciende con su color nativo de fondo + icono blanco. */
.footer-red--facebook:hover,
.footer-red--facebook:focus-visible  { background: #1877F2; }
.footer-red--telegram:hover,
.footer-red--telegram:focus-visible  { background: #26A5E4; }
.footer-red--youtube:hover,
.footer-red--youtube:focus-visible   { background: #FF0000; }
.footer-red--tiktok:hover,
.footer-red--tiktok:focus-visible    { background: #25F4EE; color: #000; }
.footer-red--instagram:hover,
.footer-red--instagram:focus-visible {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}

/* ── MODO LISTA: título de bloque + columnas reales de programas ── */
/* Las columnas ya no son de column-count sino <ul> reales generados
   por el JS (máx. 5 por columna, llenado derecha→izquierda). min-width:0
   permite que el bloque encoja dentro del flex padre, y max-width evita
   que se quede demasiado ancho al lado de la columna de marca en el
   punto más estrecho del modo horizontal (~1011px). */
.footer-bloque { display: flex; flex-direction: column; min-width: 0; max-width: 560px; }
.footer-bloque-titulo {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
/* Columnas reales (un <ul> por columna). El reparto y el orden los
   decide el JS; aquí solo se disponen lado a lado. */
.footer-bloque-cols {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}
.footer-bloque-links {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.footer-bloque-links li { margin-bottom: 3.2px; }
.footer-bloque-links a { font-size: 13px; color: var(--muted); transition: color 0.15s ease; }
.footer-bloque-links a:hover,
.footer-bloque-links a:focus-visible { color: var(--blanco); }
/* El bloque se pega a la derecha del footer. */
.footer-has-cols.footer-modo-lista .footer-bloque { margin-left: auto; }

/* Columnas de enlaces (data-driven). Solo aparecen si hay datos. */
.footer-columnas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 40px;
  text-align: left;
}
/* Mismo fix preventivo que en el modo lista: evita que un link de
   sección muy largo (en el .info, por ejemplo) desborde su columna. */
.footer-col { min-width: 0; max-width: 240px; }
.footer-col-titulo {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6.4px; }
.footer-col-links a { font-size: 13px; color: var(--muted); transition: color 0.15s ease; }
.footer-col-links a:hover,
.footer-col-links a:focus-visible { color: var(--blanco); }

/* Cuando HAY columnas: el footer pasa a fila — bloque de marca a la
   izquierda (centrado internamente), columnas de enlaces a la derecha. */
.footer-has-cols {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
/* La columna de marca (izquierda) queda centrada en sí misma,
   igual que se ve en responsive. */
.footer-has-cols .footer-principal { align-items: center; text-align: center; }
.footer-has-cols .footer-ecosystem { justify-content: center; }
/* El bloque de las tres columnas se pega a la derecha. */
.footer-has-cols .footer-columnas { margin-left: auto; }

.footer-ecosystem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.footer-ecosystem a { font-size: 13px; font-weight: 500; color: var(--muted); }
.footer-ecosystem a:hover { color: var(--blanco); }
.footer-ecosystem a.current { color: var(--fucsia); }
.footer-copy { margin: 0; font-size: 12px; color: var(--muted); }
/* En desktop las tres partes van en línea; los separadores se ven. */
.footer-copy-sep { display: inline; }
.footer-copy-part { display: inline; }

/* El footer del .fm quiebra a vertical antes que el del .tv (a 1010,
   no a 720): con un nombre de programa tan largo como "Latinoamérica,
   La Hora de los Pueblos", el rango horizontal comprimido queda muy
   apretado, así que se apila (marca arriba, programas abajo centrados).
   Nota: este breakpoint es SOLO del footer; el header móvil sigue
   entrando a 720 en su propio bloque más arriba. */
@media (max-width: 1010px) {
  .footer-has-cols {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-has-cols .footer-principal { align-items: center; }
  /* Columnas centradas y su título también (el título único queda
     centrado, no sobre la columna izquierda). */
  .footer-has-cols .footer-columnas {
    justify-content: center;
    text-align: center;
    margin-left: 0;
    width: 100%;
  }
  .footer-col-titulo { text-align: center; }
  .footer-col-links { align-items: center; }
  /* Copyright en 3 líneas: cada parte en su renglón, sin separadores. */
  .footer-copy-part { display: block; }
  .footer-copy-sep { display: none; }

  /* MODO LISTA en móvil: título centrado, 2 columnas (7/7). */
  .footer-has-cols.footer-modo-lista .footer-bloque {
    margin-left: 0;
    width: 100%;
    align-items: center;
  }
  .footer-bloque-titulo { text-align: center; }
  /* En vertical, las columnas reales se centran; se reduce el gap y
     el texto se centra para el layout apilado. */
  .footer-bloque-cols { justify-content: center; gap: 32px; }
  .footer-bloque-links { text-align: center; }
  .footer-bloque-links li { text-align: center; }
  .footer-bloque-links a { font-size: 10.4px; }
}

/* ======================== MODAL ======================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay-bg);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden] { display: none; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 32px;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hover-overlay);
  color: var(--blanco);
  transition: background 0.15s ease;
}
.modal-close:hover,
.modal-close:focus-visible { background: var(--hover-overlay-strong); }

.modal-head {
  display: flex;
  gap: 18px;
  align-items: center;
  padding-right: 36px;
}
.modal-photo-inner {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--superficie-alta);
}
.modal-photo-inner img { width: 100%; height: 100%; object-fit: cover; }
.modal-photo-inner.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(160deg, var(--indigo-oscuro), var(--superficie-alta) 80%);
}
.modal-photo-inner .placeholder-iniciales { font-size: 20px; }
.modal-photo-inner .placeholder-tag { font-size: 7px; }

/* Ghost de marca en el modal */
.modal-photo-inner.is-ghost-brand {
  background: var(--superficie-alta);
  flex-direction: row;
  gap: 0;
}
.modal-photo-inner.is-ghost-brand .ghost-icon {
  width: 60%;
  height: auto;
  object-fit: unset;
  opacity: 0.18;
  filter: grayscale(1) brightness(1.8);
}
html[data-theme="light"] .modal-photo-inner.is-ghost-brand .ghost-icon {
  filter: grayscale(1) brightness(0.4);
  opacity: 0.25;
}

.modal-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fucsia);
}
#modal-title,
.modal-title { margin: 0 0 2px; font-size: 20px; font-weight: 700; }
.modal-conductor { margin: 0; font-size: 13px; color: var(--muted); }
.modal-horario {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fucsia);
  letter-spacing: 0.02em;
}
.modal-conductor-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--fucsia-claro);
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
  cursor: pointer;
}
.modal-conductor-link:hover,
.modal-conductor-link:focus-visible { color: var(--blanco); }
.modal-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 0;
  margin-bottom: 20px;
  transition: color 0.15s ease;
}
.modal-volver:hover,
.modal-volver:focus-visible { color: var(--blanco); }

.modal-desc {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--color-texto-sutil);
}

.modal-archive-label {
  margin: 28px 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 560px) {
  .modal-archive-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -- Tarjetas de episodio -- */
.episodio-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; text-align: left; cursor: default;
}
.episodio-card.is-clickable { cursor: pointer; }
.episodio-card.is-clickable:hover .episodio-play-overlay { opacity: 1; }
.episodio-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--superficie-alta);
  background-image: linear-gradient(135deg, var(--indigo-oscuro), var(--superficie-alta));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.episodio-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.episodio-card.is-clickable .episodio-play-overlay { opacity: 0.7; }
.episodio-play-overlay svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.episodio-duracion-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.episodio-iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-sm);
  border: none;
}
.episodio-iframe-grande {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: none;
  margin-top: 16px;
}
.episodio-titulo { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.episodio-meta { margin: 0; font-size: 11px; color: var(--muted); }
.episodio-programa-badge {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fucsia-claro);
  margin-top: 1px;
}

.modal-archive-aviso { font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.modal-archive-cargando {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px 0;
  color: var(--muted);
  font-size: 14px;
}
.modal-archive-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 0;
  color: var(--fucsia-claro);
  font-size: 14px;
}
.modal-video-titulo {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--blanco);
}
.modal-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.paginacion-num {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 8px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.paginacion-num:hover { color: var(--blanco); border-color: var(--borde-hover); }
.paginacion-num.is-active { background: var(--fucsia); color: #fff; border-color: var(--fucsia); }
.paginacion-ellipsis { font-size: 13px; color: var(--muted); padding: 0 4px; user-select: none; }

/* -- Modal búsqueda -- */
.modal-busqueda-query {
  padding-right: 48px;
  margin-bottom: 20px;
}
.modal-busqueda-cargando {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: 14px;
  padding-right: 48px;
}
.busqueda-sin-resultados {
  text-align: center;
  padding: 24px 0;
  color: var(--muted);
  font-size: 14px;
  grid-column: 1 / -1;
}
.modal-busqueda-error {
  color: var(--fucsia-claro);
}
.modal-busqueda-paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--borde);
}
.paginacion-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.paginacion-btn:not(:disabled):hover { color: var(--blanco); border-color: var(--borde-hover); }
.paginacion-btn:disabled { opacity: 0.4; cursor: default; }

/* ======================== ANCLAS ======================== */

.anclas-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 48px;
  margin-bottom: 24px;
}
.anclas-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.anclas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 520px) {
  .anclas-grid { grid-template-columns: repeat(3, 1fr); }
}

.ancla-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ancla-card:hover,
.ancla-card:focus-visible {
  background: var(--hover-overlay);
  transform: translateY(-2px);
}
.ancla-card-foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.ancla-card-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ancla-card-foto .placeholder-iniciales { font-size: 20px; }
.ancla-card-foto .placeholder-tag { font-size: 7px; }
.ancla-card-nombre {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ancla-card-programas {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

.ancla-detail-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-right: 48px;
  margin-bottom: 20px;
}
.ancla-detail-foto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-alta);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ancla-detail-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ancla-detail-foto .placeholder-iniciales { font-size: 26px; }
.ancla-detail-foto .placeholder-tag { font-size: 8px; }
.ancla-detail-nombre {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
.ancla-detail-resena {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--color-texto-suave);
  line-height: 1.6;
}
.ancla-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.ancla-red-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 5px 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ancla-red-link:hover,
.ancla-red-link:focus-visible { color: var(--blanco); border-color: var(--borde-hover); }
.ancla-programas-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.ancla-programas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ancla-programa-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blanco);
  padding: 10px 14px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ancla-programa-link:hover,
.ancla-programa-link:focus-visible {
  background: var(--hover-overlay);
  border-color: var(--borde-hover);
}

@media (max-width: 600px) {
  .nav-search-panel {
    position: fixed;
    top: 58px;
    left: 12px;
    right: 24px;
    width: auto;
  }
}