/* /v11/css/components.css */

/* Subtítulo */
.section-subtitle{
  font-size:12.5px; font-family:var(--font-main); font-weight:500;
  text-transform:uppercase; color:var(--text-color); opacity:.7;
  margin:.2rem 0 0; text-align:left; width:100%; max-width:600px; padding:0 .75rem;
}

/* Tarjetas */
.program-card{
  border-radius:var(--radius);
  padding:10px 14px;
  background:var(--card-bg,#eaeaea);
  color:var(--text-color);
  text-align:left;
  height:96px;
  transition:filter .25s ease;
  box-shadow:none;
  border: var(--outline-w, 2px) solid transparent;
  box-sizing: border-box;
}
.program-card:hover{ transform:none; box-shadow:none; filter:none; }

/* Grid interno */
.program-card .card-grid{
  display:grid; grid-template-columns:1fr 26px; column-gap:10px; height:100%; align-items:stretch;
}
.program-card .card-left{
  display:grid; grid-template-rows:auto auto; row-gap:6px; align-content:center; min-width:0;
}
.program-card .card-right{ display:flex; align-items:flex-start; justify-content:flex-end; }

/* Tipografía */
.program-title{
  font-family:var(--font-title); font-size:11.5px; line-height:1.12; margin:0; word-break:break-word; color:currentColor;
}
.program-desc{
  font-size:13px; line-height:1.32; margin:0; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  color:rgba(0,0,0,.72);
  font-weight:500;
}

/* Link externo (ALERTA) */
.program-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; text-decoration:none; border-radius:8px;
  opacity:.95; transition:opacity .15s ease, background .15s ease; color:currentColor;
}
.program-link:hover{ opacity:1; background:rgba(0,0,0,.08); }
.program-link i{ font-size:.9rem; line-height:1; }

/* Tema oscuro sin saltos */
.theme-dark .program-card[data-folder],
.theme-dark-colorful .program-card[data-folder]{
  background:#1e1e1e !important; color:#d0d0d0 !important;
}
.theme-dark .program-title, .theme-dark-colorful .program-title{ color:#e2e2e2; }
.theme-dark .program-desc,  .theme-dark-colorful .program-desc{ color:#bbbbbb; }

/* ALERTA base: rojo clásico */
.program-card[data-folder="alert"],
.theme-dark .program-card[data-folder="alert"],
.theme-dark-colorful .program-card[data-folder="alert"],
.theme-sunset .program-card[data-folder="alert"],
.theme-cyan .program-card[data-folder="alert"],
.theme-grayscale .program-card[data-folder="alert"]{
  background:#C62828 !important; color:#fff !important;
}
.program-card[data-folder="alert"] .program-title{ color:#fff !important; }
.program-card[data-folder="alert"] .program-desc { color:#FFE6E8 !important; }
.program-card[data-folder="alert"] .program-link { color:#fff !important; background:rgba(255,255,255,.10); }
.program-card[data-folder="alert"] .program-link:hover{ background:rgba(255,255,255,.18); }

/* ALERTA con temas de programas (override por theme)
   Usan los mismos colores de fondo que las tarjetas de programa. */

/* EX → mismo color que .program-card[data-folder="ex"] */
.program-card.alert-card.alert-theme-ex{
  background:#B2DFDB !important;
  color:#111111 !important;
}
.program-card.alert-card.alert-theme-ex .program-title{ color:#111111 !important; }
.program-card.alert-card.alert-theme-ex .program-desc { color:rgba(0,0,0,.72) !important; }
.program-card.alert-card.alert-theme-ex .program-link{
  color:#111111 !important;
  background:rgba(0,0,0,.06) !important;
}
.program-card.alert-card.alert-theme-ex .program-link:hover{
  background:rgba(0,0,0,.12) !important;
}

/* DM (Dimension) → mismo color que .program-card[data-folder="dm"] */
.program-card.alert-card.alert-theme-dm{
  background:#D6EAF8 !important;
  color:#111111 !important;
}
.program-card.alert-card.alert-theme-dm .program-title{ color:#111111 !important; }
.program-card.alert-card.alert-theme-dm .program-desc { color:rgba(0,0,0,.72) !important; }
.program-card.alert-card.alert-theme-dm .program-link{
  color:#111111 !important;
  background:rgba(0,0,0,.06) !important;
}
.program-card.alert-card.alert-theme-dm .program-link:hover{
  background:rgba(0,0,0,.12) !important;
}

/* PL → mapea a Plugged (pg) → #FAD7A0 */
.program-card.alert-card.alert-theme-pl{
  background:#FAD7A0 !important;
  color:#111111 !important;
}
.program-card.alert-card.alert-theme-pl .program-title{ color:#111111 !important; }
.program-card.alert-card.alert-theme-pl .program-desc { color:rgba(0,0,0,.72) !important; }
.program-card.alert-card.alert-theme-pl .program-link{
  color:#111111 !important;
  background:rgba(0,0,0,.06) !important;
}
.program-card.alert-card.alert-theme-pl .program-link:hover{
  background:rgba(0,0,0,.12) !important;
}

/* SP → mismo color que .program-card[data-folder="sp"] */
.program-card.alert-card.alert-theme-sp{
  background:#FFE4E1 !important;
  color:#111111 !important;
}
.program-card.alert-card.alert-theme-sp .program-title{ color:#111111 !important; }
.program-card.alert-card.alert-theme-sp .program-desc { color:rgba(0,0,0,.72) !important; }
.program-card.alert-card.alert-theme-sp .program-link{
  color:#111111 !important;
  background:rgba(0,0,0,.06) !important;
}
.program-card.alert-card.alert-theme-sp .program-link:hover{
  background:rgba(0,0,0,.12) !important;
}

/* BPM → mismo color que .program-card[data-folder="bpm"] */
.program-card.alert-card.alert-theme-bpm{
  background:#E8DAEF !important;
  color:#111111 !important;
}
.program-card.alert-card.alert-theme-bpm .program-title{ color:#111111 !important; }
.program-card.alert-card.alert-theme-bpm .program-desc { color:rgba(0,0,0,.72) !important; }
.program-card.alert-card.alert-theme-bpm .program-link{
  color:#111111 !important;
  background:rgba(0,0,0,.06) !important;
}
.program-card.alert-card.alert-theme-bpm .program-link:hover{
  background:rgba(0,0,0,.12) !important;
}

/* ALERTAS — bajo relieve interno, más presente (rojo y temáticos) */
.program-card[data-folder="alert"],
.program-card.alert-card{
  /* relieve solo hacia adentro, sin mover contenido */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),  /* luz arriba */
    inset 0 -1px 0 rgba(0,0,0,.45),       /* sombra abajo */
    inset 0 0 0 1px rgba(0,0,0,.30);      /* filo interno seco */
}

/* Texto en ALERTA rojo: limpio, sin relieve que rompa el blanco */
.program-card[data-folder="alert"] .program-title,
.program-card[data-folder="alert"] .program-desc{
  text-shadow:none;
}

/* Texto en ALERTAS temáticos: relieve suave, legible */
.program-card.alert-card .program-title,
.program-card.alert-card .program-desc{
  text-shadow:0 0.4px 0 rgba(0,0,0,.45);
}

/* HÉROE ALERTA — ticker (sin reflujo) */
#heroWrap .program-card[data-folder="alert"] .program-desc[data-marquee="1"]{
  display:block; white-space:nowrap; overflow:hidden; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:initial;
  text-overflow:clip;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  will-change:contents;
}

/* Reproductor */
.audio-controls{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:420px; padding:.4rem; border-radius:var(--radius);
  background:transparent; margin:.1rem auto 0; gap:.5rem;
}
.audio-controls button{
  background:none; border:none; cursor:pointer; font-size:1.7rem;
  color:var(--accent-color); width:36px; height:36px; display:grid; place-items:center;
  transition:transform .12s ease; flex-shrink:0;
}
.audio-controls button:focus{ outline:none; transform:scale(1.08); }
.audio-controls input[type="range"]{
  flex:1; max-width:120px; height:6px; cursor:pointer;
  accent-color:var(--accent-color); margin:0 .4rem;
  background:var(--accent-color); border-radius:4px; border:none;
  appearance:none; -webkit-appearance:none; outline:none;
}
.audio-controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; height:16px; width:16px; border-radius:50%;
  background:var(--bg-color); cursor:pointer; border:2px solid var(--accent-color);
  box-shadow:0 0 4px rgba(0,0,0,.2);
}
.audio-controls input[type="range"]::-moz-range-thumb{
  height:16px; width:16px; border-radius:50%;
  background:var(--bg-color); cursor:pointer; border:2px solid var(--accent-color);
  box-shadow:0 0 4px rgba(0,0,0,.2);
}

/* Countdown */
.countdown-time{
  font-size:1rem;
  font-weight:bold;
  font-family:var(--font-main);
  text-align:center;
  flex-grow:1;
  white-space:nowrap;
  opacity:.85;
  text-shadow:
    0 0.6px 0 rgba(0,0,0,.35),
    0 -0.6px 0 rgba(255,255,255,.25);
}

/* Footer status */
.footer-status{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  font-size:.72rem; font-family:var(--font-main); color:var(--accent-color); margin-top:.1rem; white-space:nowrap;
  font-weight:500;
  text-shadow:
    0 0.5px 0 rgba(0,0,0,.3),
    0 -0.5px 0 rgba(255,255,255,.22);
}
#listenerCount i{ margin-right:.2rem; }

/* Indicador ONLINE/OFFLINE */
#streamCircle{
  font-size:.58rem;
  transition:color .3s ease;
  margin-left:.2rem;
  vertical-align:middle;
  font-weight:600;
  text-shadow:
    0 0.5px 0 rgba(0,0,0,.35),
    0 -0.5px 0 rgba(255,255,255,.25);
}
#streamCircle.offline{ color:#e74c3c !important; }
#streamCircle.online{  color:#2ecc71 !important; }
#streamCircle.online.offline, #streamCircle.offline.online{ color:#2ecc71 !important; }

/* Focus visible */
button:focus-visible, .program-link:focus-visible, input[type="range"]:focus-visible{
  outline:2px solid var(--accent-color); outline-offset:2px; box-shadow:0 0 0 3px rgba(0,0,0,.08);
}

/* Engranaje — FIJO al viewport SIEMPRE */
#viewToggle{
  position:fixed !important;
  right: max(8px, env(safe-area-inset-right));
  bottom:max(8px, env(safe-area-inset-bottom));
  left:auto; top:auto;
  background:none; border:none; font-size:1.4rem; color:var(--accent-color);
  cursor:pointer; z-index:2147483647; padding:.4rem; transition:opacity .2s ease;
}
#viewToggle:active{ opacity:.9; }

/* Limpieza de botones/íconos */
button, button i, .footer-actions button, .footer-actions button i{
  background:none !important; border:none; box-shadow:none; outline:none;
  padding:0; margin:0; line-height:1; color:var(--accent-color);
}
button:active{ background:none !important; outline:none; box-shadow:none; -webkit-tap-highlight-color:transparent; }
button i{ font-style:normal; background:none; pointer-events:none; transition:opacity .2s ease; }

/* Móvil */
@media (max-width:600px){
  .program-card{ height:90px; }
  .program-title{ font-size:11px; line-height:1.1; }
  .program-desc { font-size:12.8px; line-height:1.28; }
}

/* PWA móvil (standalone) */
@media (display-mode:standalone) and (max-width:600px){
  .program-card{ height:86px; padding:9px 12px; }
  .program-title{ font-size:10.8px; }
  .program-desc { font-size:12.6px; }
  .program-card .card-grid{ column-gap:8px; grid-template-columns:1fr 24px; }
  .program-link{ width:24px; height:24px; }
  .section-subtitle{ font-size:12px; padding:0 .6rem; }
  .countdown-time{ font-size:.95rem; }
}