/* Botón instalar PWA */
.pwa-install-btn {
  background: var(--brand);
  color: #fff;
  padding: 8px 22px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
  display: inline-block;
  transition: background .2s;
}
.pwa-install-btn:hover, .pwa-install-btn:focus {
  background: var(--brand);
}
body.dark .pwa-install-btn {
  background: var(--brand);
  color: #fff;
}
/* ====== Estilos principales extraídos de index.html ====== */
* { box-sizing: border-box; }
:root{
  --brand:#007bff;
  --bg:#f5f5f5; --fg:#333;
  --card:#fff; --card-border:#e6e6e6;
  --muted:#666;
  --ring:#93c5fd;
  /* Footer */
  --footer-bg:#ffffff;
  --footer-fg:#0f172a;
  --footer-sub:#334155;
  --footer-link:#0b5fff;
  --footer-divider:#e5e7eb;
  /* Social (estilo “original” redondo) */
  --social-bg:#ffffff;
  --social-fg:#111111;
  --social-border:#cbd5e1;
  --social-hover:#f3f4f6;
  --social-focus:#93c5fd;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background-color: var(--bg);
  color: var(--fg);
}
header {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  backdrop-filter: saturate(180%) blur(6px);
  padding: 18px 0;
  margin-bottom: 0;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 14px 16px; }
.header-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
h1 { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: bold; color: #222; }
h1 img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.subtitle { margin: -6px 0 0; font-size: 14px; font-weight: 700; text-align: center; color: #444; }
.controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.controls .row{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.select, .search { padding: 10px 12px; border-radius: 999px; border: 1px solid #ccc; background:#fff; font-size: 14px; min-width: 240px; }
select.select{ text-align: center; text-align-last: center; -moz-text-align-last: center; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.search{ text-align:center; }
.search::placeholder{ text-align:center; opacity:.85; }
.player { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px; margin: 18px auto 10px; max-width: 620px; box-shadow: 0 10px 24px rgba(0,0,0,.04); }
.player-inner { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; }
.radio-logo img { width: 90px; height: 90px; border-radius: 12px; object-fit: cover; border: none; background: transparent; box-shadow: none; }
.now { margin: 0 0 6px; font-weight: bold; text-align:center; }
.help { margin: 0 0 10px; color: var(--muted); font-size: 13px; text-align:center; }
audio { width: 100%; border-radius: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 18px 0 0; }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; text-align: center; padding: 10px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; outline: none; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.card:focus { box-shadow: 0 0 0 4px var(--ring); }
.card.active{ box-shadow: 0 0 0 2px var(--brand), 0 10px 20px rgba(0,123,255,.16); }
.card img{ width: 130px; height: 130px; margin: 6px auto 8px; display:block; border-radius: 12px; object-fit: cover; border: none; background: transparent; box-shadow: none; }
.card p{ margin:6px 4px 4px; font-weight:bold; font-size:14px; line-height:1.25; }
.wave{ display:block; width:100%; height:70px; margin-top:10px; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.02)); }
.wave svg{ display:block; width:100%; height:70px; }
footer { background: var(--footer-bg); color: var(--footer-fg); margin: 0; padding: 28px 16px 20px; border-top: 1px solid var(--footer-divider); }
.footer-grid{ max-width: 1200px; margin:0 auto; display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-brand img{ width:36px; height:36px; border-radius:8px; object-fit:cover; }
.footer-title{ font-weight:bold; margin:0 0 8px; color: var(--footer-fg); }
.footer-text{ margin:6px 0; color: var(--footer-sub); font-size:14px; }
.footer-links a{ display:block; color: var(--footer-fg); font-size:14px; text-decoration:none; padding:6px 0; }
.footer-links a:hover{ color: var(--footer-link); }
.social{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.sbtn{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: var(--social-bg); color: var(--social-fg); border:1px solid var(--social-border); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; outline: none; text-decoration:none; }
.sbtn:hover{ background: var(--social-hover); transform: translateY(-1px); }
.sbtn:focus{ box-shadow: 0 0 0 3px var(--social-focus); }
.sbtn svg{ width:20px; height:20px; display:block; }
.legal{ max-width:1200px; margin:0 auto 0; border-top:1px solid var(--footer-divider); padding-top:18px; font-size:13px; color: var(--footer-fg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; }
.legal a{ color: var(--footer-link); text-decoration:none; font-weight:700; }
.legal a:hover{ text-decoration:underline; }
body.dark { --bg:#000000; --fg:#eaeaea; --card:#0b0b0b; --card-border:#252525; --muted:#bdbdbd; --footer-bg:#0b0b0b; --footer-fg:#f3f4f6; --footer-sub:#cbd5e1; --footer-link:#60a5fa; --footer-divider:#1f2937; --social-bg:#0b0b0b; --social-fg:#f3f4f6; --social-border:#2b2b2b; --social-hover:#141414; --social-focus:#2563eb; }
body.dark header { background:#0b0b0b; border-bottom-color:#1a1a1a; }
body.dark h1 { color:#fff; }
body.dark .subtitle{ color:#e5e7eb; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
body.dark .select, body.dark .search { background:#0b0b0b; border-color:#1a1a1a; color:#eaeaea; }
body.dark .player { background:#0b0b0b; border-color:#1a1a1a; }
body.dark .card { background:#0b0b0b; border-color:#252525; }
.body.dark .card.active{ box-shadow: 0 0 0 2px #3b82f6, 0 12px 24px rgba(59,130,246,.18); }

.toggle-btn {
  position: fixed;
  right: 16px;
  bottom: 48px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,123,255,.25);
  z-index: 1000;
  transition: background .2s, box-shadow .2s;
}
@media (min-width:1024px){ .player{ max-width: 560px; } .player-inner{ grid-template-columns: 84px 1fr; } .radio-logo img{ width:84px; height:84px; } }
@media (max-width:480px){ .player-inner{ grid-template-columns: 72px 1fr; } .radio-logo img{ width:72px; height:72px; } .card img{ width:120px; height:120px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Corregir visibilidad del texto del banner PWA en modo oscuro */
body.dark #pwaMsg { color: #fff !important; text-shadow: 0 1px 2px #0003; }