/* Plaza de la Luna — Radio en vivo module (scoped: .pdlr) */
.pdlr{
  --pdlr-bg:#06231f; --pdlr-bg2:#0b332c; --pdlr-panel:rgba(255,255,255,.045);
  --pdlr-line:rgba(198,161,91,.35); --pdlr-gold:#C6A15B; --pdlr-gold2:#E3C98F;
  --pdlr-teal:#17b3ab; --pdlr-teal2:#0e7c7b; --pdlr-ink:#f3efe4; --pdlr-dim:#b9c4bd;
  font-family:inherit; color:var(--pdlr-ink);
  background:linear-gradient(160deg,var(--pdlr-bg),var(--pdlr-bg2) 60%,#081f1c);
  border:1px solid var(--pdlr-line); border-radius:var(--radius); padding:18px;
  box-sizing:border-box; max-width:1180px; margin:0 auto;
}
.pdlr *{box-sizing:border-box}
.pdlr-grid>*{min-width:0}
.pdlr-now,.pdlr-vizwrap,.pdlr-featured{min-width:0; max-width:100%}
.pdlr canvas,.pdlr iframe{max-width:100%}
.pdlr-ftitle,.pdlr-npname{overflow-wrap:anywhere}
.pdlr button{font:inherit; cursor:pointer}
.pdlr-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pdlr-title{font-size:1.35rem; margin:0; letter-spacing:.02em}
.pdlr-title .pdlr-moon{color:var(--pdlr-gold2)}
.pdlr-lang{display:flex; gap:6px}
.pdlr-lang button{background:transparent; color:var(--pdlr-dim); border:1px solid var(--pdlr-line);
  border-radius:999px; padding:6px 14px; min-height:44px; min-width:44px}
.pdlr-lang button[aria-pressed="true"]{background:var(--pdlr-gold); color:#231a02; font-weight:700}

/* Featured track */
.pdlr-featured{margin-top:14px; border:1px solid var(--pdlr-gold); border-radius:var(--r-md);
  background:linear-gradient(120deg, rgba(198,161,91,.16), rgba(23,179,171,.08));
  padding:14px 16px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.pdlr-featured[data-selected="true"]{box-shadow:0 0 0 2px var(--pdlr-gold) inset, 0 6px 24px rgba(0,0,0,.35)}
.pdlr-fbadge{background:var(--pdlr-gold); color:#231a02; font-weight:700; border-radius:var(--r-sm);
  padding:2px 8px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.pdlr-ftitle{font-size:1.2rem; font-weight:700; margin:2px 0 0}
.pdlr-fsub{color:var(--pdlr-gold2); margin:2px 0 0; font-size:.95rem}
.pdlr-play{width:60px; height:60px; min-width:60px; border-radius:50%; border:2px solid var(--pdlr-gold);
  background:var(--pdlr-teal2); color:#fff; font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center}
.pdlr-play:focus-visible{outline:3px solid var(--pdlr-gold2); outline-offset:2px}
.pdlr-play[aria-pressed="true"]{background:var(--pdlr-gold); color:#231a02}
.pdlr-yt{flex:1 1 320px; min-width:260px}
.pdlr-yt:empty{display:none}
.pdlr-yt iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r-sm); display:block}
.pdlr-fnote{flex-basis:100%; color:var(--pdlr-dim); font-size:.8rem; margin:4px 0 0}

/* Layout */
.pdlr-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px}
@media (min-width:920px){ .pdlr-grid{grid-template-columns:minmax(320px,420px) 1fr} }
@media (min-width:1750px){ .pdlr{max-width:1500px} .pdlr-list{columns:2; column-gap:10px} .pdlr-station{break-inside:avoid} }

/* Now playing */
.pdlr-now{background:var(--pdlr-panel); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); padding:14px}
.pdlr-vizwrap{position:relative; height:230px; border-radius:var(--r-sm); overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%, #0d4038 0%, #06231f 70%)}
@media (max-width:560px){ .pdlr-vizwrap{height:180px} }
/* absolute fill: the canvas can never contribute its intrinsic (attribute)
   size to the grid column's min-content — that was a self-sustaining
   blowout when a desktop-sized backing store met a phone viewport */
.pdlr-viz{position:absolute; inset:0; display:block; width:100%; height:100%}
.pdlr-vizbadge{position:absolute; top:8px; right:8px; font-size:.7rem; letter-spacing:.06em;
  background:rgba(0,0,0,.55); border:1px solid var(--pdlr-line); color:var(--pdlr-gold2);
  padding:3px 8px; border-radius:999px; text-transform:uppercase}
.pdlr-vizbadge[data-mode="ambient"]{color:var(--pdlr-dim)}
.pdlr-npname{font-size:1.15rem; font-weight:700; margin:12px 0 2px}
.pdlr-npmeta{color:var(--pdlr-dim); margin:0; font-size:.92rem}
.pdlr-nptech{color:var(--pdlr-teal); margin:4px 0 0; font-size:.85rem; font-variant-numeric:tabular-nums}
.pdlr-status{color:var(--pdlr-gold2); font-size:.85rem; min-height:1.1em; margin:6px 0 0}
.pdlr-transport{display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap}
.pdlr-vol{display:flex; align-items:center; gap:8px; flex:1 1 140px; min-height:44px}
.pdlr-vol input[type="range"]{flex:1; accent-color:var(--pdlr-gold); height:44px}
.pdlr-toggles{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.pdlr-toggle{border:1px solid var(--pdlr-line); background:rgba(0,0,0,.25); color:var(--pdlr-ink);
  border-radius:var(--r-sm); padding:9px 12px; min-height:44px; text-align:left}
.pdlr-toggle small{display:block; color:var(--pdlr-dim); font-size:.72rem}
.pdlr-toggle[aria-pressed="true"]{background:var(--pdlr-teal2); border-color:var(--pdlr-teal)}
.pdlr-toggle:disabled{opacity:.38; cursor:not-allowed}
.pdlr-hd{background:var(--pdlr-gold); color:#231a02; font-weight:800; font-size:.68rem;
  border-radius:var(--r-xs); padding:1px 5px; letter-spacing:.05em; vertical-align:middle}

/* Station list */
.pdlr-tools{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.pdlr-tools input[type="search"], .pdlr-tools select{
  background:rgba(0,0,0,.3); color:var(--pdlr-ink); border:1px solid var(--pdlr-line);
  border-radius:var(--r-sm); padding:10px 12px; min-height:44px; font:inherit}
.pdlr-tools input[type="search"]{flex:1 1 180px}
.pdlr-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pdlr-station{width:100%; text-align:left; background:var(--pdlr-panel); color:var(--pdlr-ink);
  border:1px solid rgba(255,255,255,.08); border-radius:var(--r-md); padding:10px 12px; min-height:56px;
  display:flex; align-items:center; gap:10px}
.pdlr-station:hover{border-color:var(--pdlr-teal)}
.pdlr-station[aria-current="true"]{border-color:var(--pdlr-gold); background:rgba(198,161,91,.12)}
.pdlr-st-main{flex:1; min-width:0}
.pdlr-st-name{font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdlr-st-meta{color:var(--pdlr-dim); font-size:.82rem; display:block}
.pdlr-freq{background:var(--pdlr-teal2); color:#fff; border-radius:var(--r-sm); padding:2px 7px;
  font-size:.78rem; font-weight:700; white-space:nowrap}
.pdlr-cap{font-size:.72rem; color:var(--pdlr-teal); border:1px solid var(--pdlr-teal2);
  border-radius:999px; padding:2px 7px; white-space:nowrap}
.pdlr-cap[data-off="true"]{color:var(--pdlr-dim); border-color:rgba(255,255,255,.15)}
.pdlr-count{color:var(--pdlr-dim); font-size:.85rem; margin:8px 0 0}
.pdlr-err{color:#ff9d8a; font-size:.85rem}

/* Slim bar — collapsed-by-default shell (WS2, owner order 2026-10-17):
   the bar is the whole visible module until expanded in place. */
.pdlr[data-expanded="false"]{padding:12px 14px}
.pdlr-bar{display:flex; align-items:center; gap:12px}
.pdlr-bar .pdlr-play{width:48px; height:48px; min-width:48px; font-size:1.1rem}
.pdlr-bar-info{flex:1 1 auto; min-width:0}
.pdlr-bar-name{font-weight:700; font-size:1.02rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdlr-bar-meta{color:var(--pdlr-dim); font-size:.84rem; margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pdlr-bar-feat{border:1px solid var(--pdlr-gold); background:rgba(198,161,91,.14); color:var(--pdlr-gold2);
  border-radius:999px; padding:9px 14px; min-height:44px; font-weight:600; white-space:nowrap; cursor:pointer}
.pdlr-bar-feat[aria-pressed="true"]{background:var(--pdlr-gold); color:#231a02}
.pdlr-expand{border:1px solid var(--pdlr-line); background:rgba(0,0,0,.25); color:var(--pdlr-ink);
  border-radius:var(--r-sm); padding:9px 14px; min-height:44px; white-space:nowrap; cursor:pointer}
.pdlr-expand:focus-visible,.pdlr-bar-feat:focus-visible{outline:3px solid var(--pdlr-gold2); outline-offset:2px}
.pdlr-chev{display:inline-block; transition:transform .2s}
.pdlr[data-expanded="true"] .pdlr-chev{transform:rotate(180deg)}
.pdlr-body{margin-top:16px}
.pdlr-body[hidden]{display:none}
@media (max-width:560px){
  .pdlr-bar{flex-wrap:wrap}
  .pdlr-bar-info{flex:1 1 calc(100% - 60px)}
  .pdlr-bar-feat{flex:1 1 auto}
  .pdlr-expand{flex:1 1 auto}
}