/* RadioGlobo: vista previa de diseño, independiente de la señal y de MySQL. */
.rgpv-wrap{--rgpv-bg:#0B1222;--rgpv-surface:#151F34;--rgpv-accent:#4FE2C1;--rgpv-text:#F3F7FF;margin:23px 0 16px;padding:17px;border:1px solid #ffffff26;border-radius:18px;background:#0d1727;color:#eef4ff}
.rgpv-wrap *{box-sizing:border-box}.rgpv-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.rgpv-eyebrow{font-size:10px;letter-spacing:1.7px;color:#4fe2c1;font-weight:850}.rgpv-topline h3{margin:5px 0;font-size:21px;color:#f3f7ff}.rgpv-topline p{margin:0;color:#a7b7ce;font-size:12px;line-height:1.5}
.rgpv-device{display:flex;padding:4px;gap:4px;background:#172439;border-radius:12px}.rgpv-device-btn{font:inherit;font-size:12px;font-weight:700;color:#b6c6d9;background:transparent;border:0;border-radius:9px;padding:8px 13px;cursor:pointer}.rgpv-device-btn.is-active{background:#345576;color:#fff}.rgpv-demo-label{font-size:11px;color:#aab9ce;margin:16px 0 9px}
.rgpv-stage{background:repeating-linear-gradient(45deg,#19263a 0px,#19263a 9px,#223249 9px,#223249 10px);padding:clamp(7px,2vw,24px);border-radius:17px;min-height:330px;display:flex;justify-content:center;align-items:flex-start;overflow:auto}.rgpv-card{width:min(100%,750px);background:var(--rgpv-bg);border:1px solid #ffffff19;border-radius:16px;overflow:hidden;color:var(--rgpv-text);box-shadow:0 20px 45px #0008;transition:width .2s,background .2s}.rgpv-part{background:var(--rgpv-surface);padding:9px 14px;font-size:10px;font-weight:850;letter-spacing:1.35px;color:var(--rgpv-text);border-bottom:1px solid #ffffff19}.rgpv-part b{color:var(--rgpv-accent);margin-right:8px}
.rgpv-player{display:grid;grid-template-columns:108px minmax(0,1fr) auto;gap:15px;align-items:center;background:var(--rgpv-surface);padding:14px}.rgpv-cover{position:relative;width:104px;height:104px;border-radius:12px;background:#20304c;overflow:hidden}.rgpv-cover img{width:100%;height:100%;object-fit:cover}.rgpv-cover span{position:absolute;bottom:5px;left:5px;background:#df364c;color:#fff;font-size:9px;font-weight:800;border-radius:4px;padding:3px 5px}.rgpv-song{min-width:0}.rgpv-song small{display:block;color:var(--rgpv-accent);text-transform:uppercase;letter-spacing:.8px;font-size:10px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rgpv-song strong{display:block;font-size:19px;line-height:1.3;margin-top:7px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rgpv-song p{font-size:12px;color:var(--rgpv-text);opacity:.72;margin:6px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rgpv-song .rgpv-help{font-weight:500;letter-spacing:0;text-transform:none;opacity:.7;margin-top:10px;font-size:10px}.rgpv-controls{display:grid;justify-items:center;gap:12px}.rgpv-play{display:grid;place-items:center;color:var(--rgpv-bg);background:var(--rgpv-accent);font-size:22px;border-radius:50%;width:48px;height:48px;padding-left:3px}.rgpv-share{border:1px solid #ffffff32;color:var(--rgpv-text);border-radius:8px;padding:5px;font-size:11px;white-space:nowrap}
.rgpv-audience{border-top:1px solid #ffffff20;background:var(--rgpv-surface)}.rgpv-audience-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:17px;padding:14px}.rgpv-globe-title strong{font-size:12px;display:block}.rgpv-globe-title span{font-size:10px;opacity:.6;display:block;margin-top:4px}.rgpv-globe{display:block;width:188px;height:188px;max-width:100%;margin:8px auto}.rgpv-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #ffffff22;gap:6px;padding-bottom:10px}.rgpv-metrics div{min-width:0}.rgpv-metrics strong{font-size:21px;color:var(--rgpv-accent);display:block}.rgpv-metrics small{color:var(--rgpv-text);opacity:.72;font-size:10px}.rgpv-flags-label{font-size:12px;font-weight:750;margin:10px 0 6px}.rgpv-flags-label small{font-size:10px;opacity:.68;font-weight:400}.rgpv-flags{max-height:158px;overflow-y:auto;border:1px solid #ffffff1a;border-radius:9px;scrollbar-width:thin}.rgpv-flags>div{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;padding:6px 8px;border-bottom:1px solid #ffffff14;font-size:17px}.rgpv-flags>div span{font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rgpv-flags>div b{font-size:11px;color:var(--rgpv-accent)}.rgpv-info{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.rgpv-info span{font-size:11px;padding:6px 8px;border:1px solid #ffffff23;color:#b8eade;border-radius:8px}.rgpv-real,.rgpv-real-note{font-size:12px;margin:8px 0 0}.rgpv-real a{color:#65eacb;display:block;font-weight:800}.rgpv-real small{display:block;opacity:.7;margin-top:6px;line-height:1.5}
.rgpv-stage.rgpv-phone .rgpv-card{width:340px;max-width:100%}.rgpv-phone .rgpv-player{grid-template-columns:75px minmax(0,1fr) 42px;gap:8px;padding:9px}.rgpv-phone .rgpv-cover{width:75px;height:75px}.rgpv-phone .rgpv-song strong{font-size:14px}.rgpv-phone .rgpv-song p{font-size:10px}.rgpv-phone .rgpv-song .rgpv-help{font-size:9px}.rgpv-phone .rgpv-play{width:38px;height:38px;font-size:16px}.rgpv-phone .rgpv-share{font-size:9px;padding:4px 2px}.rgpv-phone .rgpv-audience-grid{grid-template-columns:106px minmax(0,1fr);gap:6px;padding:7px}.rgpv-phone .rgpv-globe{width:106px;height:106px}.rgpv-phone .rgpv-globe-title strong{font-size:10px}.rgpv-phone .rgpv-globe-title span{font-size:8px}.rgpv-phone .rgpv-metrics strong{font-size:14px}.rgpv-phone .rgpv-metrics small{font-size:8px}.rgpv-phone .rgpv-flags{max-height:126px}.rgpv-phone .rgpv-flags>div{padding:3px 5px;grid-template-columns:22px minmax(0,1fr) auto}.rgpv-phone .rgpv-flags>div span{font-size:10px}.rgpv-phone .rgpv-flags-label{font-size:10px}.rgpv-phone .rgpv-flags-label small{display:block}.rgpv-wrap.rgpv-no-globe .rgpv-audience{display:none}
@media(max-width:610px){.rgpv-wrap{padding:9px}.rgpv-topline h3{font-size:18px}.rgpv-stage{padding:6px}.rgpv-card{width:100%}.rgpv-player{grid-template-columns:80px minmax(0,1fr) 50px;gap:8px;padding:9px}.rgpv-cover{height:78px;width:78px}.rgpv-song strong{font-size:15px}.rgpv-play{width:40px;height:40px;font-size:18px}.rgpv-share{font-size:9px;padding:5px 2px}.rgpv-audience-grid{grid-template-columns:115px minmax(0,1fr);gap:6px;padding:7px}.rgpv-globe{height:115px;width:115px}.rgpv-globe-title strong{font-size:10px}.rgpv-metrics strong{font-size:16px}.rgpv-metrics small{font-size:9px}.rgpv-flags-label small{display:block}.rgpv-flags>div{grid-template-columns:22px minmax(0,1fr) auto;padding:5px}.rgpv-flags>div span{font-size:10px}}

.rgpv-live-details{margin-top:13px}.rgpv-live-details summary{cursor:pointer;font-weight:700;font-size:12px;color:#f3f7ff;background:#1a2b40;border:1px solid #ffffff32;border-radius:9px;padding:11px}.rgpv-live-details iframe{display:block;margin-top:9px;width:100%;height:680px;border:1px solid #ffffff32;border-radius:11px;background:#0b1222}

/* Banderas locales: no dependen de soporte emoji del navegador; no hay pie negro. */
.rgpv-card{background:var(--rgpv-surface)}
.rgpv-flags>div{grid-template-columns:29px minmax(0,1fr) auto;gap:6px}
.rgpv-flag-img{display:block;width:28px;height:19px;border-radius:2px;object-fit:fill;border:1px solid #ffffff35;background:#fff}
.rgpv-live-details iframe{height:460px;background:var(--rgpv-surface)}

/* Vista previa consistente con reproductor publicado: filas que crecen, sin scroll interno. */
.rgpv-flags,.rgpv-phone .rgpv-flags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,157px),1fr));gap:5px;max-height:none!important;height:auto;overflow:visible!important;scrollbar-width:none;border:0;padding:2px}
.rgpv-flags>div,.rgpv-phone .rgpv-flags>div{display:grid;grid-template-columns:26px minmax(0,1fr) auto!important;gap:5px;align-items:center;min-height:34px;padding:4px 6px;border:1px solid #ffffff22;border-radius:8px;background:#ffffff07}
.rgpv-flags>div span{font-size:10px}
.rgpv-phone .rgpv-flags{grid-template-columns:1fr}
.rgpv-speed{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
.rgpv-speed label{font-size:10px;color:var(--rgpv-text)}
.rgpv-speed input{vertical-align:middle;width:65px;height:14px;accent-color:var(--rgpv-accent)}
.rgpv-speed output{font-size:10px;font-weight:750;color:var(--rgpv-accent)}
.rgpv-phone .rgpv-speed label{font-size:9px}.rgpv-phone .rgpv-speed input{width:45px}

/* Vista previa: globo y métricas arriba, todas las banderas compactas debajo. */
.rgpv-audience-grid{grid-template-columns:minmax(130px,190px) minmax(0,1fr);gap:7px 12px;align-items:start}
.rgpv-geo-details{display:contents}
.rgpv-globe-panel{grid-column:1;grid-row:1}
.rgpv-metrics{grid-column:2;grid-row:1}
.rgpv-flags-label{grid-column:1/-1;grid-row:2;margin:1px 0 3px}
.rgpv-flags{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(auto-fit,minmax(min(100%,154px),1fr))}
.rgpv-phone .rgpv-audience-grid{grid-template-columns:minmax(90px,35%) minmax(0,1fr)}
.rgpv-phone .rgpv-flags{grid-template-columns:repeat(auto-fit,minmax(min(100%,125px),1fr))}


/* Misma distribución del reproductor: globo izquierda y banderas derecha. */
.rgpv-audience-grid{display:grid;grid-template-columns:minmax(135px,29%) minmax(0,1fr);gap:10px 13px;align-items:start}
.rgpv-globe-panel{grid-column:1;grid-row:1;min-width:0}
.rgpv-geo-details{display:block;grid-column:2;grid-row:1;min-width:0}
.rgpv-flags-label{margin:10px 0 6px}
.rgpv-flags{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,133px),1fr));gap:6px;max-height:none!important;overflow:visible!important;padding:2px}
.rgpv-speed{display:none!important}
.rgpv-phone .rgpv-audience-grid{grid-template-columns:1fr;gap:6px}
.rgpv-phone .rgpv-globe-panel{grid-column:1;grid-row:1}
.rgpv-phone .rgpv-geo-details{grid-column:1;grid-row:2}
.rgpv-phone .rgpv-flags{grid-template-columns:repeat(auto-fit,minmax(min(100%,125px),1fr))}
@media(max-width:450px){
.rgpv-audience-grid{grid-template-columns:1fr}
.rgpv-globe-panel{grid-column:1;grid-row:1}
.rgpv-geo-details{grid-column:1;grid-row:2}
}