/* ==========================================================================
   ESTA ES MI APP - AJUSTES DE TELÉFONO (v2 — planteado como app nativa)
   Se carga solo cuando app.js detecta un teléfono (o una ventana de
   escritorio de 768px de ancho o menos). Siempre se carga junto con
   styles-tablet.css, igual que antes en el cascadeo de @media.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BARRA SUPERIOR — ahora minimalista: solo logo + En Vivo + Anúnciate.
   La navegación (Inicio/Eventos/Podcasts/...) se mueve abajo (sección 2),
   como en cualquier app móvil, así que el top-nav vuelve a ser 1 sola fila.
   -------------------------------------------------------------------------- */
.top-nav {
  height: 60px !important;
  padding: 0 14px !important;
}

.brand-logo { gap: 8px !important; }
.logo-symbol { width: 32px !important; height: 32px !important; }
.brand-logo-img { width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; }
.brand-text .title-top { font-size: 0.6rem !important; letter-spacing: 1px !important; }
.brand-text .title-main { font-size: 1rem !important; }

.nav-actions { gap: 6px !important; }
.live-badge { padding: 5px 10px !important; font-size: 0.68rem !important; }
.btn-advertise { padding: 8px 12px !important; font-size: 0.75rem !important; }
.btn-download-app, .btn-share-top, .btn-nav-share { display: none !important; }

.app-main { padding-top: 76px !important; padding-bottom: 96px !important; }

/* --------------------------------------------------------------------------
   2. BARRA INFERIOR DE NAVEGACIÓN (patrón app móvil)
   Reutiliza el MISMO <nav class="nav-categories"> — no toca el HTML ni el
   JS de switchSection(), solo lo saca del flujo del top-nav y lo fija abajo,
   restyleado como tabs de app: ícono arriba, etiqueta chiquita debajo.
   -------------------------------------------------------------------------- */
.nav-categories {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 64px;
  z-index: 500;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 6px 4px !important;
  padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(10, 13, 23, 0.97) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}

.nav-item {
  flex-direction: column !important;
  justify-content: center;
  gap: 2px !important;
  padding: 4px 2px !important;
  border-radius: 10px !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  flex: 1 1 0;
  white-space: normal !important;
  text-align: center;
}
.nav-item i { font-size: 1.05rem !important; }
.nav-item span { line-height: 1.1; }
.nav-item.active { background: transparent !important; box-shadow: none !important; color: var(--color-primary-red) !important; }
.nav-item:hover { background: transparent !important; }

/* --------------------------------------------------------------------------
   3. HERO — mucho menos saturado
   -------------------------------------------------------------------------- */
.hero-banner {
  height: auto !important;
  min-height: 260px;
  padding: 20px !important;
  border-radius: 18px !important;
}
.hero-content { max-width: 100% !important; }

/* Un solo badge en vez de dos, para no amontonar texto arriba */
.hero-badge-radio { display: none !important; }
.hero-badges-line { margin-bottom: 10px !important; }
.hero-badge { font-size: 0.65rem !important; padding: 4px 10px !important; }

.hero-title { font-size: 1.4rem !important; letter-spacing: -0.5px !important; margin-bottom: 6px !important; }

/* La descripción larga se recorta a 2 líneas: sigue dando contexto sin
   empujar todo el resto de la pantalla hacia abajo */
.hero-desc {
  font-size: 0.82rem !important;
  margin-bottom: 12px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Escuchar Radio" se oculta en el hero: ahora esa acción vive en el botón
   flotante de radio (sección 5), siempre visible, así no se repite */
.btn-hero-primary { display: none !important; }

.hero-actions { gap: 8px !important; flex-wrap: wrap !important; }
.btn-hero-download, .btn-hero-secondary {
  width: auto !important;
  padding: 9px 14px !important;
  font-size: 0.78rem !important;
  border-radius: 10px !important;
}
.btn-hero-share { width: 38px !important; height: 38px !important; border-radius: 10px !important; }

/* --------------------------------------------------------------------------
   4. TÍTULOS DE SECCIÓN Y ESPACIADO GENERAL
   -------------------------------------------------------------------------- */
.section-view { padding: 10px 16px 24px !important; }
.content-row { margin-bottom: 26px !important; }
.row-title { font-size: 1.05rem !important; }
.row-header > div p { font-size: 0.8rem !important; }

/* --------------------------------------------------------------------------
   5. TARJETAS (PODCASTS, VIDEOS, EVENTOS)
   #carousel-podcasts-list ya se corrigió en styles.css (bug real de
   grid-auto-flow). Aquí solo ajustamos tamaño y tipografía.
   -------------------------------------------------------------------------- */
.cards-carousel { grid-auto-columns: 190px !important; gap: 12px !important; padding: 8px 2px 16px !important; }
#carousel-podcasts-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 14px !important; }

.media-card { height: 250px !important; }
.card-thumb-wrapper { height: 115px !important; }
.card-info { padding: 10px !important; }
.card-category { font-size: 0.64rem !important; margin-bottom: 2px !important; }
.card-title { font-size: 0.78rem !important; -webkit-line-clamp: 2; }
.card-meta { font-size: 0.66rem !important; margin-top: 6px !important; }
.card-tag { font-size: 0.58rem !important; padding: 3px 7px !important; top: 8px !important; left: 8px !important; }
.card-duration { font-size: 0.6rem !important; bottom: 8px !important; right: 8px !important; }
.card-share-quick-btn { width: 26px !important; height: 26px !important; top: 8px !important; right: 8px !important; opacity: 1 !important; }

.media-card.sponsor-double-banner {
  grid-column: span 2 !important;
  min-width: unset !important;
  width: auto !important;
  height: auto !important;
  min-height: 250px;
}

/* El banner VIP trae mucho texto (headline larga + descripción + botón +
   disclaimer). En desktop cabe porque la tarjeta es ancha; en un teléfono
   angosto ese mismo texto la volvía gigante y rompía el carrusel. Se
   comprime y se recorta para que quede del mismo alto que las demás tarjetas. */
.sponsor-banner-content { padding: 14px !important; }
.sponsor-logo-img { height: 26px !important; max-width: 110px !important; }
.sponsor-badges-group { gap: 4px !important; flex-wrap: wrap; }
.sponsor-header .card-tag, .sponsor-badges-group span { font-size: 0.55rem !important; padding: 3px 7px !important; }
.sponsor-category-label { font-size: 0.6rem !important; margin-bottom: 3px !important; }
.sponsor-headline {
  font-size: 0.92rem !important;
  line-height: 1.28 !important;
  margin-bottom: 4px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sponsor-sub { display: none !important; }
.sponsor-footer { gap: 6px !important; }
.btn-sponsor-cta { font-size: 0.72rem !important; padding: 8px 14px !important; border-radius: 8px !important; }
.sponsor-disclaimer { display: none !important; }
.media-card.full-poster-card { height: 210px !important; }

/* --------------------------------------------------------------------------
   6. VIDEOS Y REELS
   -------------------------------------------------------------------------- */
.videos-grid-container { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 12px !important; }
.subsection-mini-title { font-size: 0.9rem !important; }
.instagram-reels-column { height: 400px !important; }
.terms-footer-link { font-size: 0.66rem !important; padding: 18px 10px 12px !important; }

/* --------------------------------------------------------------------------
   7. BOTÓN FLOTANTE DE RADIO (FAB)
   FIX real de un bug que yo mismo había metido: antes esto se ocultaba por
   completo con display:none cuando la radio estaba en pausa (.player-idle),
   así que nunca aparecía un botón para darle play. Ahora se queda siempre
   visible, flotando arriba de la barra inferior de navegación.
   -------------------------------------------------------------------------- */
.persistent-player {
  position: fixed !important;
  bottom: 78px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--color-primary-red) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(183, 30, 40, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 600;
  padding: 0 !important;
}
.dock-track-info, .dock-controls-right, .btn-dock-minimize { display: none !important; }
.dock-controls-center { width: 100% !important; height: 100% !important; display: flex !important; justify-content: center !important; }
.btn-dock-play { width: 100% !important; height: 100% !important; background: transparent !important; border: none !important; color: #FFFFFF !important; font-size: 1.3rem !important; box-shadow: none !important; }