/* ============================================================
   LIVES DEL EDÉN
   Aviso "Jardines en vivo" del encabezado, punto rojo del menú
   Live y la página /live (views/live.ejs). El reproductor trae
   sus propios estilos (public-site/js/live-player.js).
   ============================================================ */
:root { --ue-live: #ff2e55; }

/* ---- Aviso del encabezado ---- */
.live-pill {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 46, 85, .45);
  border-radius: 999px;
  background: rgba(255, 46, 85, .08);
  color: var(--ue-ivory, #f1eee5);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.live-pill[hidden] { display: none; }
.live-pill:hover { background: rgba(255, 46, 85, .16); border-color: rgba(255, 46, 85, .75); }
.live-pill b { color: #fff; font-weight: 700; }
.live-pill-cta { color: var(--ue-gold-soft, #f0d69a); }
.live-pill-dot,
.nav-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ue-live);
  box-shadow: 0 0 0 0 rgba(255, 46, 85, .6);
  animation: ue-live-pulse 1.8s ease-out infinite;
  flex: 0 0 auto;
}

/* ---- Menú: Live ---- */
nav.main-nav a.nav-live { display: inline-flex; align-items: center; gap: 7px; }
.nav-live-dot { display: none; width: 7px; height: 7px; }
nav.main-nav a.nav-live.is-live .nav-live-dot { display: inline-block; }

@keyframes ue-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 46, 85, .6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 46, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 85, 0); }
}

/* ---- Página /live ---- */
.live-page .live-list { display: grid; gap: 34px; }
.live-garden {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--ue-line, rgba(224, 199, 139, .22));
  border-radius: 22px;
  background: var(--ue-glass, rgba(13, 20, 15, .58));
}
.live-garden-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ue-live);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.live-garden h2 { margin: 12px 0 14px; color: var(--garden-accent, var(--ue-ivory)); }
.live-garden p { color: var(--ue-ivory-soft, #c8c3b6); line-height: 1.65; }
.live-garden-channels { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.live-garden-channels span {
  padding: 4px 11px;
  border: 1px solid var(--ue-line, rgba(224, 199, 139, .22));
  border-radius: 999px;
  font-size: 12px;
  color: var(--ue-ivory, #f1eee5);
}
.live-empty {
  padding: 46px 28px;
  border: 1px dashed var(--ue-line, rgba(224, 199, 139, .22));
  border-radius: 22px;
  text-align: center;
  color: var(--ue-ivory-soft, #c8c3b6);
}
.live-empty h2 { margin-bottom: 10px; }

@media (max-width: 860px) {
  .live-garden { grid-template-columns: 1fr; gap: 24px; padding: 18px; }
}

@media (max-width: 760px) {
  /* En móvil el aviso queda junto al logo y el menú baja a su propia fila. */
  .live-pill { order: 2; margin: 0 0 0 auto; padding: 6px 11px; gap: 7px; font-size: 10px; letter-spacing: .06em; }
  .live-pill-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .live-pill-dot, .nav-live-dot { animation: none; }
}