/* ==========================================================================
   1. VARIABLES & RESET GLOBAL
   ========================================================================== */
:root {
  --bg1: #0b2a46; 
  --bg2: #166b9a; 
  --accent: #78c6ff;
  --text: #eaf6ff; 
  --muted: #9fb8cc; 
  --card: #0f3555cc;
  --glow: rgba(120, 198, 255, .85); 
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  
  /* Tamaños y Espaciados Fluidos */
  --ui-scale: clamp(0.90, 0.86 + 0.35vw, 1.03);
  --header-h: 90px;
  --space-1: clamp(6px, 0.8vw, 10px);
  --space-2: clamp(10px, 1.4vw, 16px);
  --space-3: clamp(14px, 2.0vw, 24px);
  --radius-xl: 18px;
}

@media (max-width: 768px) {
  :root { --header-h: 120px; }
}

* { box-sizing: border-box; min-width: 0; }
html, body { height: 100%; overflow-x: hidden; }
html { font-size: calc(16px * var(--ui-scale)); }

body {
  margin: 0; 
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  background: var(--bg1);
  overflow-y: auto;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

html, body, main, header, section, footer, .card, .mini-player, .schedule, .site-header, .header-inner, .brand, .brand__titles, .fixed-bg, *:not(input):not(textarea) {
  -webkit-user-select: none; user-select: none; cursor: default;
}
a, button, .btn, [role="button"], input[type="range"], label[for], summary { cursor: pointer; }
* { -webkit-tap-highlight-color: transparent; }
img, video, iframe { max-width: 100%; height: auto; display: block; }


/* ==========================================================================
   2. FONDOS GLOBALES
   ========================================================================== */
.fixed-bg { 
  position: fixed; 
  inset: 0;
  background: url('../assets/bg-champaqui.jpg?v=1') center/cover no-repeat, linear-gradient(135deg, var(--bg1), var(--bg2)); 
  z-index: -2; 
  filter: saturate(105%);   
  transition: opacity var(--bg-fade-duration, 1800ms) var(--bg-fade-ease, ease);
  background-color: #0b0e14;
  will-change: opacity, background;
}
.fixed-bg--layerB { opacity: 0; z-index: -1; }


/* ==========================================================================
   3. HEADER & CLIMA
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(15, 15, 25, 0.65), rgba(25, 25, 35, 0.35));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(255, 255, 255, .05);
  height: auto !important;
  min-height: auto !important;
  padding-bottom: 15px !important;
  padding-top: max(env(safe-area-inset-top), 0px);
}

.header-inner {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand { display: flex; gap: 14px; align-items: center; }
.brand__logo { 
  width: 92px; height: auto; 
  max-height: calc(var(--header-h) - 20px);
  filter: drop-shadow(0 0 6px rgba(120,198,255,.28)); 
}
.brand__titles h1 { margin: 0; font-size: clamp(20px, 4.6vw, 32px); }
.tagline { margin: .2rem 0 0; color: var(--muted); }
body.is-playing .brand__logo{ filter: drop-shadow(0 0 8px rgba(120,198,255,.40)); }

.site-header .weather {
  margin: 0;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  backdrop-filter: blur(6px);
  line-height: 1;
}
.site-header .weather-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.site-header .weather .temp {
  display: block;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.site-header .weather .desc {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
}
.weather-title { font-size: 0.7rem; line-height: 1.15; opacity: .85; color: var(--muted); }

@media (max-width: 700px) {
  .header-inner { flex-direction: column; align-items: stretch; gap: 6px; }
  .brand { gap: 10px; }
  .brand__titles { flex-direction: column; }
  .brand__titles h1 { margin: 0; }
  .tagline { margin: 2px 0 0 0; }
  .site-header .weather { align-self: stretch; width: 100%; margin-top: 4px; padding: 8px 12px; min-height: 58px; }
}


/* ==========================================================================
   4. LAYOUT PRINCIPAL (SPLIT IZQ/DER) Y COMPONENTES
   ========================================================================== */

/* Contenedor Maestro Dividido */
.split-layout {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: 16px var(--space-2);
  display: grid;
  gap: 24px;
  align-items: start; /* Evita que las columnas se estiren verticalmente si no hay contenido */
}

/* Columna Derecha */
.panel-der {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0; /* Previene desbordamiento en CSS grid */
}

.content {
  display: grid;
  gap: 22px;
  width: 100%;
  padding: 0; 
}

/* Sistema de Tarjetas Globales */
.card, .section, .panel, .module {
  background: rgba(15, 53, 85, 0.10);
  border: 0;
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
}

.btn { 
  background: var(--accent); border: none; color: #012; font-weight: 700; 
  padding: 10px 16px; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); 
}
.btn:active { transform: scale(.98); }

/* Grid Responsive para PC */
@media (min-width: 1024px) {
  .split-layout {
    /* 35% a la izquierda (con tope max/min), el resto a la derecha */
    grid-template-columns: clamp(300px, 35%, 450px) 1fr; 
  }
  .sidebar-izq {
    position: sticky;
    top: calc(var(--header-h) + 20px); /* Queda anclado al hacer scroll */
  }
}


/* ==========================================================================
   5. SLIDER MASTER (NUEVO FORMATO 1:1 CUADRADO)
   ========================================================================== */

.slider-1x1 {
  width: 100%;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important; /* Para que la imagen llegue al borde de la tarjeta */
  overflow: hidden !important;
  position: relative !important;
  background: none;
  z-index: 0;
}

/* Capas internas inyectadas por slider-core.js */
.bnr-stage, .slider-1x1 .bnr-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  z-index: 1;
}

.slider-1x1 .bnr-layer {
  display: grid !important;
  place-items: center !important;
  background: none;
  transition: none;
  will-change: opacity, transform, clip-path;
  opacity: unset;
}

.bnr-layer.bnr-on-top { z-index: 2 !important; }

/* Control estricto de proporciones (Garantiza aspecto CONTAIN) */
.slider-1x1 .bnr-layer > img, 
.slider-1x1 .bnr-layer > video, 
.slider-1x1 .bnr-layer > iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Imagen completa siempre visible */
  object-position: center center !important;
  display: block !important;
  background: none;
  transform: none !important;
}

/* Evitar parpadeos durante animaciones */
.bnr-anim-fade-in, .bnr-anim-slide-in-left, .bnr-anim-slide-in-right,
.bnr-anim-slide-in-up, .bnr-anim-slide-in-down, .bnr-anim-wipe-in { opacity: 1 !important; }


/* ==========================================================================
   6. REPRODUCTORES (PILL)
   ========================================================================== */

.pill-player {
  display: flex; align-items: center; gap: 14px;
  background: rgba(11, 42, 70, 0.55); 
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px; 
  padding: 6px 20px 6px 6px; 
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px); transition: background 0.3s ease;
}
.pill-player:hover { background: rgba(11, 42, 70, 0.7); }
.pill-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }

.btn-play-pill {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #fdfdfd; color: #0b2a46; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); transition: transform 0.2s ease;
}
.btn-play-pill:hover { transform: scale(1.05); }

.status-text-pill { font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; color: #ffffff; opacity: 0.95; line-height: 1; }
.volume-slider-pill { width: 80px; height: 4px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.vol { display: flex; gap: 8px; align-items: center; }
.status { display: block; opacity: .85; }


/* ==========================================================================
   7. GRILLA DE PROGRAMACIÓN (SCHEDULE)
   ========================================================================== */
.schedule { margin: 0; }
.schedule.card {
  background: rgba(18, 76, 130, 0.45);
  border: 1px solid rgba(120, 198, 255, 0.22);
  backdrop-filter: blur(8px) saturate(115%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  padding: 18px;
}
.schedule h2 { color: #eef7ff; margin-top: 0;}
.schedule p { color: #d8e9f7; }

.schedule__grid { display: grid; grid-template-columns: 1fr; row-gap: 8px; }

.schedule__row {
  grid-column: 1 / -1;
  background: var(--row-bg, rgba(255, 255, 255, .03));
  color: var(--row-color, var(--text));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  text-align: left;
}

.schedule__row__inner {
  display: grid;
  grid-template-columns: 140px 1fr; 
  align-items: center; column-gap: 10px; padding: 10px 12px;
}

.schedule__row--1col .schedule__row__inner { grid-template-columns: 1fr; row-gap: 6px; }
.schedule__time, .schedule__show { color: inherit; text-align: inherit; }
.schedule__time { font-weight: 700; color: color-mix(in oklab, var(--row-color, var(--text)), white 35%); }

.schedule__row[data-align="center"] .schedule__row__inner { justify-items: center; text-align: center; }
.schedule__row[data-align="right"] .schedule__row__inner { justify-items: end; text-align: right; }
.schedule__row[data-align="left"] .schedule__row__inner { justify-items: start; text-align: left; }
.schedule__desc, .schedule__desc__inner { opacity: .9; font-size: .92rem; }


/* ==========================================================================
   8. FOOTER Y REDES
   ========================================================================== */
.site-footer {
  width: 100%; /* Adaptado para encajar perfectamente en el panel derecho */
  margin-top: 0;
  padding: 20px 16px 28px;
  background: rgba(18, 76, 130, 0.45); border: 1px solid rgba(120, 198, 255, 0.22);
  backdrop-filter: blur(8px) saturate(115%); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  border-radius: 14px; color: #d8e9f7;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}

.site-footer a { color: #eef7ff; text-decoration: none; opacity: .95; transition: opacity .25s ease, transform .2s ease; }
.site-footer a:hover { opacity: 1; transform: translateY(-1px); }

.social { display: flex; gap: 14px; flex-wrap: wrap; }
.social a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .12); color: #eef7ff;
}
.social a:hover { background: rgba(255, 255, 255, .14); }
.social a img { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .site-footer { flex-direction: column; text-align: center; padding: 20px 14px; }
  .social { justify-content: center; }
}


/* ==========================================================================
   9. ANIMACIONES GLOBALES
   ========================================================================== */
@keyframes glowPulse {
  0%   { filter: drop-shadow(0 0 8px rgba(120, 198, 255, .30)); }
  50%  { filter: drop-shadow(0 0 16px rgba(120, 198, 255, .45)); }
  100% { filter: drop-shadow(0 0 8px rgba(120, 198, 255, .30)); }
}

.bnr-anim-fade-out { animation: bnrFadeOut var(--bnr-dur, 600ms) ease both; }
@keyframes bnrFadeOut { from { opacity: 1; } to { opacity: 0; } }

.bnr-anim-slide-out-left  { animation: bnrOutLeft  var(--bnr-dur, 600ms) ease both; }
.bnr-anim-slide-out-right { animation: bnrOutRight var(--bnr-dur, 600ms) ease both; }
.bnr-anim-slide-out-up    { animation: bnrOutUp    var(--bnr-dur, 600ms) ease both; }
.bnr-anim-slide-out-down  { animation: bnrOutDown  var(--bnr-dur, 600ms) ease both; }
@keyframes bnrOutLeft  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-8%); } }
@keyframes bnrOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(8%); } }
@keyframes bnrOutUp    { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8%); } }
@keyframes bnrOutDown  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8%); } }

#player, #schedule, .card, .section, .content, .panel, .module {
  transition: opacity .25s ease !important;
  transform: none !important;
  will-change: opacity !important;
}

@media (prefers-reduced-motion: reduce) { 
  .mini-player__logo--playing { animation: none; } 
  #player, #schedule, .card, .section, .content, .panel, .module { transition: none !important; }
}