/* Radio On-Demand v1.0 — estilos aislados con prefijo .rod-
   Colores personalizables desde el sitio anfitrión:
   .rod{ --rod-accent:#7b2cbf; --rod-accent-2:#2bb673; } */
.rod{
  --rod-accent:var(--purple,#7b2cbf);
  --rod-accent-2:var(--green,#2bb673);
  --rod-bg:#171a1f;
  --rod-surface:#22262e;
  --rod-surface-2:#2c313b;
  --rod-text:#fff;
  --rod-muted:#aab1bd;
  --rod-radius:14px;
  --rod-bottom:100px;
  font-family:var(--body,Inter,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--rod-text);
  box-sizing:border-box;
}
.rod *,.rod *::before,.rod *::after{box-sizing:inherit}
.rod [hidden]{display:none!important}

.rod-panel{background:var(--rod-bg);border-radius:var(--rod-radius);padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 48px #0006;border-top:4px solid var(--rod-accent)}

/* Modo flotante (cuando el sitio ya tiene su propia barra en vivo) */
.rod--floating .rod-panel{position:fixed;z-index:102;right:16px;bottom:var(--rod-bottom);width:min(420px,calc(100vw - 32px));max-height:calc(100vh - var(--rod-bottom) - 24px);max-height:calc(100svh - var(--rod-bottom) - 24px);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.rod--floating.is-open .rod-panel{opacity:1;visibility:visible;transform:none}
.rod-launcher{position:fixed;z-index:101;right:16px;bottom:var(--rod-bottom);display:flex;align-items:center;gap:8px;max-width:min(320px,calc(100vw - 32px));padding:11px 18px;border:0;border-radius:30px;background:var(--rod-accent);color:#fff;font:700 13px/1.2 inherit;font-family:inherit;cursor:pointer;box-shadow:0 10px 26px #0005;transition:transform .2s ease,opacity .2s}
.rod-launcher:hover{transform:translateY(-2px)}
.rod-launcher-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rod--floating.is-open .rod-launcher{opacity:0;pointer-events:none}
.rod.is-ondemand .rod-launcher,.rod-launcher.has-resume{background:var(--rod-accent-2);color:#111317}
/* Texto oscuro sobre el verde de la marca: el blanco sobre #00fe49 no se lee (contraste ~1,3:1). */
.rod-close{position:absolute;z-index:2;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:50%;background:var(--rod-surface);color:var(--rod-muted);font-size:14px;cursor:pointer}
.rod-close:hover{color:#fff}
.rod-max{position:absolute;z-index:2;top:10px;right:46px;width:30px;height:30px;border:0;border-radius:50%;background:var(--rod-surface);color:var(--rod-muted);font-size:15px;line-height:1;cursor:pointer}
.rod-max:hover{color:#fff;background:var(--rod-surface-2)}
.rod-backdrop{display:none}
.rod--floating .rod-head{padding-right:72px}

/* Cabecera: carátula, título y botón principal */
.rod-head{display:flex;align-items:center;gap:12px;padding-right:34px}
.rod:not(.rod--floating) .rod-head{padding-right:0}
.rod-art{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none;background:var(--rod-surface)}
.rod-meta{min-width:0;flex:1}
.rod-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:20px;margin-bottom:4px}
.rod-badge--live{background:#e5383b;color:#fff}
.rod-badge--ondemand{background:var(--rod-accent-2);color:#0d1b12}
.rod-song-title{font-weight:700;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rod-song-artist{font-size:13px;color:var(--rod-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rod-btn{border:0;border-radius:30px;background:var(--rod-accent);color:#fff;font:700 12px/1 inherit;font-family:inherit;padding:9px 14px;cursor:pointer;transition:filter .15s,background .15s}
.rod-btn:hover{filter:brightness(1.12)}
.rod-btn:focus-visible,.rod-tab:focus-visible,.rod-search:focus-visible,.rod-launcher:focus-visible{outline:2px solid var(--rod-accent-2);outline-offset:2px}
.rod-btn--play{width:48px;height:48px;padding:0;border-radius:50%;font-size:16px;flex:none}
.rod-btn--small{padding:8px 12px;font-size:12px}
.rod-btn--ghost{background:var(--rod-surface-2)}
.rod-now{display:contents}
/* Listas (por lista de AzuraCast o por género) */
.rod-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.rod-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--rod-surface);transition:background .15s}
.rod-card:hover{background:var(--rod-surface-2)}
.rod-card-cover{--h:270;width:56px;height:56px;flex:none;border:0;border-radius:10px;display:grid;place-items:center;font-size:26px;cursor:pointer;
  background:linear-gradient(135deg,hsl(var(--h) 70% 48%),hsl(calc(var(--h) + 45) 75% 28%));box-shadow:inset 0 0 0 1px rgb(255 255 255 / 10%)}
.rod-card-meta{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0}
.rod-card-meta strong{font-size:15px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rod-card-meta small{font-size:12px;color:var(--rod-muted)}
.rod-card-actions{display:flex;gap:6px;flex:none}
.rod-list-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px}
.rod-list-head-meta{flex:1;min-width:120px;display:flex;flex-direction:column}
.rod-list-head-meta strong{font-size:16px}
.rod-list-head-meta small{font-size:12px;color:var(--rod-muted)}
.rod-btn--skip{width:34px;height:34px;padding:0;border-radius:50%;font-size:13px;background:var(--rod-surface-2);flex:none}
.rod-btn--skip:hover{background:var(--rod-accent)}
.rod-btn:disabled{opacity:.35;cursor:default;filter:none}
.rod-btn--live{background:#e5383b}
.rod-btn--icon{width:34px;height:34px;padding:0;border-radius:50%;font-size:14px;background:var(--rod-surface-2)}
.rod-btn--icon:hover{background:var(--rod-accent)}

.rod-timeline{display:flex;align-items:center;gap:10px}
.rod-progress{flex:1;height:6px;border-radius:6px;background:var(--rod-surface-2);cursor:pointer;overflow:hidden}
.rod-progress-bar{height:100%;width:0;background:var(--rod-accent-2);transition:width .3s linear}
.rod-time{font-size:11px;color:var(--rod-muted);font-variant-numeric:tabular-nums;min-width:0}
.rod:not(.is-ondemand) .rod-progress{cursor:default}
.rod:not(.is-ondemand) .rod-timeline:has(.rod-time:empty){display:none}

.rod-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rod-volume{flex:1;min-width:90px;accent-color:var(--rod-accent)}

.rod-tabs{display:flex;gap:4px;background:var(--rod-surface);border-radius:30px;padding:4px}
.rod-tab{flex:1;border:0;background:transparent;color:var(--rod-muted);font:700 12px/1 inherit;font-family:inherit;padding:9px 6px;border-radius:30px;cursor:pointer}
.rod-tab.is-active{background:var(--rod-accent);color:#fff}
.rod-panes{min-height:0;overflow:auto;flex:1}
.rod:not(.rod--floating) .rod-panes{max-height:420px}
.rod-search{width:100%;padding:11px 14px;border-radius:30px;border:1px solid var(--rod-surface-2);background:var(--rod-surface);color:#fff;font:400 14px inherit;font-family:inherit;margin-bottom:8px}
.rod-search::placeholder{color:var(--rod-muted)}

.rod-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rod-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--rod-surface)}
.rod-item.is-current{outline:2px solid var(--rod-accent-2)}
.rod-item-meta{min-width:0;flex:1}
.rod-item-title{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rod-item-artist{font-size:12px;color:var(--rod-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rod-item-actions{display:flex;gap:6px;flex:none}
.rod-row-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.rod-note{font-size:12px;color:var(--rod-muted);margin:4px 2px 8px;list-style:none}

.rod-toast{position:fixed;z-index:103;left:50%;bottom:calc(var(--rod-bottom) + 8px);transform:translate(-50%,10px);background:#000d;color:#fff;font-size:13px;padding:9px 16px;border-radius:30px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}
.rod-toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){.rod{--rod-bottom:90px}}
@media (max-width:560px){
  /* En el celular el panel se ancla ARRIBA y ABAJO a la vez: abajo justo encima del reproductor y
     arriba a 12px del borde visible (usa casi toda la pantalla). Así la X de cerrar siempre queda a la vista, sin
     depender de cuánto mida la barra de direcciones del navegador ("100vh" la incluye y empujaba
     el panel por encima de la pantalla). La lista de canciones se desplaza por dentro. */
  .rod--floating .rod-panel{right:8px;width:calc(100vw - 16px);padding:14px;gap:10px;
    top:calc(12px + env(safe-area-inset-top,0px));bottom:var(--rod-bottom);max-height:none}
  .rod-close{top:8px;right:8px;width:40px;height:40px;font-size:16px;background:var(--rod-surface-2);color:#fff}
  .rod-head{padding-right:44px}
  .rod-art{width:46px;height:46px}
  .rod-btn--play{width:42px;height:42px}
  .rod-tab{padding:8px 4px}
  .rod-launcher{right:12px;padding:10px 14px}
  .rod-launcher-text{max-width:150px}
}
@media (prefers-reduced-motion:reduce){.rod *{transition:none!important}}

/* ==========================================================================
   Panel maximizado (portátil y escritorio): dos columnas.
   Izquierda "Sonando ahora" (carátula grande, título, avance, controles);
   derecha la música (pestañas, buscador y canciones en cuadrícula).
   ========================================================================== */
@media (min-width:761px){
  .rod--floating.is-max.is-open .rod-backdrop{display:block;position:fixed;inset:0;z-index:101;background:rgb(10 8 20 / 62%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:rod-fade .2s ease}
  .rod--floating.is-max .rod-panel{
    top:20px;bottom:20px;left:max(20px,calc((100vw - 1320px) / 2));right:max(20px,calc((100vw - 1320px) / 2));
    width:auto;max-height:none;padding:24px;gap:16px 28px;border-radius:20px;
    display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    box-shadow:0 30px 80px rgb(0 0 0 / 55%)}
  /* Columna izquierda: "Sonando ahora" */
  .rod--floating.is-max .rod-now{grid-column:1;grid-row:1 / -1;display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;
    padding:16px;border-radius:16px;background:linear-gradient(180deg,rgb(255 255 255 / 5%),rgb(255 255 255 / 2%));border:1px solid rgb(255 255 255 / 6%)}
  .rod--floating.is-max .rod-head{flex-direction:column;align-items:stretch;gap:12px;padding-right:0;position:relative}
  .rod--floating.is-max .rod-art{width:100%;max-width:min(100%,36vh);align-self:center;height:auto;aspect-ratio:1/1;border-radius:14px;box-shadow:0 14px 36px rgb(0 0 0 / 45%)}
  .rod--floating.is-max .rod-meta{padding-right:66px;min-height:58px}
  .rod--floating.is-max .rod-song-title{font-size:19px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .rod--floating.is-max .rod-song-artist{font-size:14px;margin-top:2px}
  .rod--floating.is-max .rod-btn--play{position:absolute;right:0;bottom:0;width:56px;height:56px;font-size:20px;box-shadow:0 10px 24px rgb(0 0 0 / 40%)}
  .rod--floating.is-max .rod-controls{gap:10px}
  .rod--floating.is-max .rod-btn--skip{width:44px;height:44px;font-size:16px}
  .rod--floating.is-max .rod-volume{flex:1 1 100%;order:3}
  /* Columna derecha: la música */
  .rod--floating.is-max .rod-tabs{grid-column:2;grid-row:1;align-self:start;max-width:560px;margin-right:96px}
  .rod--floating.is-max .rod-panes{grid-column:2;grid-row:2;min-height:0;overflow:auto;padding-right:4px;margin-right:-4px}
  .rod--floating.is-max .rod-search{position:sticky;top:0;z-index:1;margin-bottom:12px;padding:13px 18px;font-size:15px;box-shadow:0 10px 14px var(--rod-bg)}
  .rod--floating.is-max .rod-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
  .rod--floating.is-max .rod-item{padding:12px 12px 12px 14px;border:1px solid transparent;transition:border-color .15s,background .15s}
  .rod--floating.is-max .rod-item:hover{background:var(--rod-surface-2);border-color:rgb(255 255 255 / 8%)}
  .rod--floating.is-max .rod-note,.rod--floating.is-max .rod-row-actions{grid-column:1 / -1}
  /* Listas maximizadas: portadas grandes en cuadrícula */
  .rod--floating.is-max .rod-cards{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
  .rod--floating.is-max .rod-card{flex-direction:column;align-items:stretch;gap:10px;padding:12px}
  .rod--floating.is-max .rod-card-cover{width:100%;height:auto;aspect-ratio:1/1;font-size:64px;border-radius:12px}
  .rod--floating.is-max .rod-card-meta strong{font-size:16px}
  .rod--floating.is-max .rod-card-actions{justify-content:flex-start}
  .rod--floating.is-max .rod-list-head{position:sticky;top:0;z-index:1;background:var(--rod-bg);padding-bottom:10px}
  .rod--floating.is-max .rod-close{top:24px;right:24px;width:36px;height:36px}
  .rod--floating.is-max .rod-max{top:24px;right:68px;width:36px;height:36px}
}
@media (min-width:1500px){
  .rod--floating.is-max .rod-panel{left:max(28px,calc((100vw - 1600px) / 2));right:max(28px,calc((100vw - 1600px) / 2));grid-template-columns:340px minmax(0,1fr)}
  .rod--floating.is-max .rod-list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
/* En el celular el panel ya usa toda la pantalla: sin botón de maximizar */
@media (max-width:760px){.rod-max{display:none}.rod--floating .rod-head{padding-right:44px}}
@keyframes rod-fade{from{opacity:0}}