/* ============================================================
   GlamFM – Grilla de Programación
   Colores base: fondo negro, encabezado verde oliva, bloques gris oscuro
   ============================================================ */

:root {
  --glamfm-bg:         #111111;
  --glamfm-header-bg:  #8db600;
  --glamfm-header-txt: #111111;
  --glamfm-bloque-bg:  #3d3d3d;
  --glamfm-txt:        #ffffff;
  --glamfm-radius:     14px;
  --glamfm-gap:        10px;
  --glamfm-padding:    14px 12px;
  --glamfm-font:       inherit;
}

/* ── Contenedor principal ─────────────────────────────────── */
.glamfm-grilla {
  display: grid;
  grid-template-columns: repeat( var(--glamfm-cols, 3), 1fr );
  gap: var(--glamfm-gap);
  background: var(--glamfm-bg);
  border-radius: var(--glamfm-radius);
  padding: var(--glamfm-gap);
  font-family: var(--glamfm-font);
  box-sizing: border-box;
  width: 100%;
}

/* ── Columna por día ──────────────────────────────────────── */
.glamfm-columna {
  display: flex;
  flex-direction: column;
  gap: var(--glamfm-gap);
  min-width: 0;
}

/* ── Encabezado del día ───────────────────────────────────── */
.glamfm-dia-header {
  background: var(--glamfm-header-bg);
  color: var(--glamfm-header-txt);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  padding: 10px 8px;
  border-radius: var(--glamfm-radius);
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

/* ── Contenedor de bloques ────────────────────────────────── */
.glamfm-bloques {
  display: flex;
  flex-direction: column;
  gap: var(--glamfm-gap);
  flex: 1;
}

/* ── Bloque de programa ───────────────────────────────────── */
.glamfm-bloque {
  background: var(--glamfm-bloque-bg);
  color: var(--glamfm-txt);
  border-radius: var(--glamfm-radius);
  padding: var(--glamfm-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  flex: 1;
  min-height: 80px;
  justify-content: center;
}

.glamfm-nombre {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.glamfm-descripcion {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.3;
}

.glamfm-horario {
  font-size: 0.82rem;
  opacity: 0.9;
  font-weight: 500;
}

/* ── Mensaje vacío ────────────────────────────────────────── */
.glamfm-sin-programas {
  color: #888;
  font-style: italic;
  padding: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Sidebar estrecha o móvil: 2 columnas si hay 3 o más días */
@media ( max-width: 600px ) {
  .glamfm-grilla {
    grid-template-columns: repeat( 2, 1fr );
  }
}

/* Muy pequeño (< 380px): columna única */
@media ( max-width: 380px ) {
  .glamfm-grilla {
    grid-template-columns: 1fr;
  }
}

/* ── Cuando está dentro de un widget estrecho ─────────────── */
/* Si el widget mide menos de 280px aplicamos diseño de 1 columna */
@container ( max-width: 280px ) {
  .glamfm-grilla {
    grid-template-columns: 1fr;
  }
}

/* Soporte container queries (progressive enhancement) */
.glamfm-grilla-widget .widget-content,
aside .glamfm-grilla,
.widget_glamfm_grilla_widget .glamfm-grilla {
  container-type: inline-size;
}

@container ( max-width: 340px ) {
  .glamfm-grilla {
    grid-template-columns: repeat( 2, 1fr );
  }
}

/* ── Cuando hay pocos días (1 o 2): centrar ──────────────── */
.glamfm-grilla[style*="--glamfm-cols: 1"] {
  max-width: 260px;
  margin: 0 auto;
}

.glamfm-grilla[style*="--glamfm-cols: 2"] {
  max-width: 480px;
  margin: 0 auto;
}