/* ===== Play & Mix · ficha de lista (diseño Club) ===== */

/* Layout: ficha de lista como en el plugin: presentación del colaborador → ranking → estrellas → sesión completa → "Lista creada por" */
:root {
  color-scheme: dark;
  --ink: #050505;
  --deck: #0f0f0f;
  --deck-2: #161616;
  --line: rgba(255,255,255,.1);
  --text: #f7f7f2;
  --muted: #b8b5aa;
  --gold: #f2bf07;
  --up: #3fd17a;
  --down: #ff6b5a;
  --display: "Big Shoulders Display", "Roboto Condensed", "Arial Narrow", sans-serif;
  --body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --cut: 18px;
}
html { scrollbar-color: #3a3a3a var(--ink); }
body { background: var(--ink); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.55; margin: 0; caret-color: var(--gold); }
::selection { background: var(--gold); color: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.material-icons { font-size: 22px; line-height: 1; }

/* Selector de modo (solo para revisar la maqueta) */
.modebar { background: #1d1d1d; border-bottom: 1px solid var(--line); font-size: 14px; }
.modebar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 8px; }
.modebar b { color: var(--muted); font-weight: 400; }
.modebar button { font: 700 13px var(--body); letter-spacing: .03em; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.modebar button[aria-pressed="true"] { background: var(--gold); color: #000; border-color: var(--gold); }

/* Cabecera del sitio */
.head { position: absolute; left: 0; right: 0; z-index: 20; }
.head .wrap { display: flex; align-items: center; gap: 28px; height: 80px; }
.head .logo img { height: 46px; width: auto; }
.menu { display: flex; gap: 4px; margin-left: auto; font: 800 17px var(--display); text-transform: uppercase; letter-spacing: .06em; }
.menu a { padding: 10px 12px; position: relative; }
.menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.menu a:hover::after, .menu a.on::after { transform: scaleX(1); }
.menu a.on { color: var(--gold); }
.icons { display: flex; gap: 4px; }
.icons button { background: none; border: 0; color: var(--text); width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; }
.icons .burger { display: none; }

.btn { display: inline-flex; align-items: center; gap: 10px; font: 800 19px var(--display); text-transform: uppercase; letter-spacing: .06em; padding: 14px 26px; background: var(--gold); color: #000; border: 0; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(242,191,7,.55); }
.btn.line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }

/* Presentación (pmt-hero) */
.l-hero { position: relative; overflow: hidden; isolation: isolate; background: #000; padding-top: 80px; }
.l-hero .bg { position: absolute; inset: -40px; z-index: -2; }
.l-hero .bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.7) blur(8px); transform: scale(1.1); }
.l-hero .bg::after { content: ""; position: absolute; inset: 0; background: var(--gold); mix-blend-mode: multiply; }
.l-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.92) 50%), linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,0) 35%); }
.l-grid { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 52px; align-items: start; padding-block: 44px 56px; }
.l-cover { box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); }
.l-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 800 15px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.l-hero h1 { margin: 14px 0 10px; font: 900 clamp(46px, 6.4vw, 5.2rem)/.88 var(--display); text-transform: uppercase; text-wrap: balance; }
.fecha { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 800 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fecha .genre { background: var(--gold); color: #000; padding: 4px 9px; }
.firma { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.firma img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--gold); }
.firma b { display: block; font: 900 28px/1 var(--display); text-transform: uppercase; }
.firma i { display: block; font: italic 400 18px var(--body); color: var(--gold); margin-top: 3px; }
.intro { margin-top: 22px; max-width: 64ch; }
.intro p { margin: 0 0 .8em; color: #e4e1d6; }
.intro p:first-child { font-size: 20px; color: var(--text); }
.l-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }
.share { display: flex; gap: 8px; }
.share a, .share button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: none; color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 17px; transition: color .2s, border-color .2s, background .2s; }
.share a:hover, .share button:hover { background: var(--gold); border-color: var(--gold); color: #000; }
.copied { font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* Aviso del modo votación */
.vote-note { display: none; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; background: rgba(242,191,7,.1); }
.vote-note .material-icons { color: var(--gold); font-size: 28px; }
.vote-note b { display: block; font: 900 22px/1 var(--display); text-transform: uppercase; }
.vote-note span { color: var(--muted); font-size: 15px; }
body.m-vote .vote-note, body.m-pending .vote-note, body.m-closed .vote-note { display: flex; }

/* Ranking */
.l-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px; align-items: start; padding-block: 44px 40px; }
.ranks { list-style: none; margin: 0; padding: 0; }
.ranks li { border-top: 1px solid var(--line); }
.ranks li:first-child { border-top: 0; }
.ranks .n { font: 900 52px/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); text-align: right; font-variant-numeric: tabular-nums; }
.ranks li:nth-child(-n+3) .n { -webkit-text-stroke-color: var(--gold); }
.ranks li:first-child .n { color: var(--gold); -webkit-text-stroke: 0; }
.ranks .t { font: 800 22px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranks .a { color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranks li:hover .t { color: var(--gold); }
/* Voto y flechas (solo en listas de votación) */
.mv { display: none; width: 18px; font-size: 13px; text-align: center; }
.mv.up { color: var(--up); } .mv.down { color: var(--down); } .mv.same { color: #77746b; }
body.m-vote .mv, body.m-closed .mv { display: block; }
body.m-vote .ranks .trk-row, body.m-closed .ranks .trk-row { grid-template-columns: 18px minmax(36px, 64px) 52px minmax(0,1fr) auto; }
@media (max-width: 560px) { body.m-vote .ranks .trk-row, body.m-closed .ranks .trk-row { grid-template-columns: 14px 30px 42px minmax(0,1fr) auto; gap: 8px; } }
.vbtn { display: none; align-items: center; gap: 6px; font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border: 2px solid var(--gold); background: none; color: var(--gold); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.vbtn .material-icons { font-size: 18px; }
.vbtn:hover { background: var(--gold); color: #000; }
.vbtn.done { background: var(--gold); color: #000; cursor: default; }
.vstate { display: none; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #8d8a80; border: 2px solid var(--line); padding: 7px 10px; }
.ranks .trk-acts .vbtn { display: none; width: auto; height: auto; border-radius: 0; padding: 8px 12px; border: 2px solid var(--gold); background: none; color: var(--gold); margin-right: 6px; }
body.m-vote .ranks .trk-acts .vbtn { display: inline-flex; }
.ranks .trk-acts .vbtn:hover { background: var(--gold); color: #000; }
.ranks .trk-acts .vbtn.done { background: var(--gold); color: #000; }
.vstate { margin-right: 6px; }
body.m-vote .vbtn { display: inline-flex; }
body.m-pending .vstate, body.m-closed .vstate { display: inline-block; }

/* Estrellas */
.stars { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; padding: 18px 20px; background: var(--deck); }
.stars b { font: 900 22px/1 var(--display); text-transform: uppercase; margin-right: auto; }
.stars .row { display: flex; gap: 4px; }
.stars button { background: none; border: 0; padding: 2px; cursor: pointer; color: #5a5850; transition: color .15s, transform .15s; }
.stars button:hover { transform: scale(1.12); }
.stars button.on { color: var(--gold); }
.stars .material-icons { font-size: 30px; }
.stars span { color: var(--muted); font-size: 14px; }

/* Sesión completa */
.sesion { margin-top: 28px; display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; align-items: center; padding: 20px; background: linear-gradient(90deg, rgba(242,191,7,.14), rgba(242,191,7,.03)); }
.sesion img { width: 150px; height: 150px; object-fit: cover; }
.sesion h2 { margin: 0; font: 900 32px/1 var(--display); text-transform: uppercase; }
.sesion p { margin: 4px 0 12px; color: var(--muted); }
.sesion .wave { height: 46px; background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 6px); -webkit-mask: linear-gradient(transparent, #000 10%, #000 90%, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 46' preserveAspectRatio='none'%3E%3Cpath d='M0 23 Q15 4 30 23 T60 23 T90 10 T120 30 T150 6 T180 26 T210 14 T240 32 T270 8 T300 23 V46 H0Z' fill='black'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 46' preserveAspectRatio='none'%3E%3Cpath d='M0 23 Q15 4 30 23 T60 23 T90 10 T120 30 T150 6 T180 26 T210 14 T240 32 T270 8 T300 23 V46 H0Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: .85; margin-bottom: 12px; }
.sesion .btn { padding: 11px 18px; font-size: 16px; }

/* Lateral */
.side { position: sticky; top: 20px; display: grid; gap: 28px; }
.side h2 { margin: 0 0 12px; font: 900 24px/1 var(--display); text-transform: uppercase; }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mini a { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 6px; transition: background .2s; }
.mini a:hover { background: rgba(255,255,255,.05); }
.mini img { width: 54px; height: 54px; object-fit: cover; }
.mini b { display: block; font: 800 16px/1.1 var(--display); text-transform: uppercase; }
.mini a:hover b { color: var(--gold); }
.mini span { font-size: 13px; color: var(--muted); }
.to-arch { display: inline-flex; align-items: center; gap: 6px; font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.to-arch:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Lista creada por (pmt-colab) */
.colab-wrap { background: var(--deck); }
.colab { display: grid; grid-template-columns: minmax(0,1.1fr) 300px minmax(0,1fr); gap: 40px; align-items: center; padding-block: 56px; }
.colab .lbl { font: 800 14px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.colab .nombre { display: block; margin: 8px 0 4px; font: 900 clamp(44px, 5vw, 64px)/.9 var(--display); text-transform: uppercase; }
.colab .aka { display: block; font: 800 18px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.colab .lead { margin: 16px 0 0; font-size: 19px; color: #e4e1d6; }
.colab .foto { width: 100%; aspect-ratio: 1; object-fit: cover; transform: rotate(-2deg); box-shadow: 0 24px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(242,191,7,.3); }
.colab .info p { margin: 0 0 1em; color: #d9d5c7; }
.colab .redes { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; }
.colab .redes a { display: inline-flex; align-items: center; gap: 8px; font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; border: 2px solid var(--line); padding: 9px 14px; transition: border-color .2s, color .2s; }
.colab .redes a:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 1100px) {
  .menu { display: none; }
  .icons { margin-left: auto; }
  .icons .burger { display: grid; }
  .l-body { grid-template-columns: minmax(0,1fr); }
  .side { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .colab { grid-template-columns: minmax(0,1fr) 260px; }
  .colab .info { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .l-grid { grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 24px 40px; }
  .l-cover { width: min(60%, 240px); }
  .l-hero::before { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.92) 40%), linear-gradient(to top, var(--ink) 0%, rgba(0,0,0,0) 35%); }
  .side { grid-template-columns: minmax(0,1fr); }
  .colab { grid-template-columns: minmax(0,1fr); }
  .colab .foto { width: min(70%, 260px); }
  .sesion { grid-template-columns: 96px minmax(0,1fr); }
  .sesion img { width: 96px; height: 96px; }
}
@media (max-width: 560px) {
  .head .wrap { height: 68px; }
  .head .logo img { height: 38px; }
  .l-hero { padding-top: 68px; }
  .ranks .n { font-size: 36px; }
  .ranks .t { font-size: 18px; }
  .vbtn span.txt { display: none; }
  .sesion h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ===== extra.css ===== */
/* Zonas compartidas por las propuestas C, D y E: parrilla, productores españoles y line-up internacional */

/* Parrilla */
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days button { font: 800 16px var(--display); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--muted); border: 2px solid var(--line); padding: 8px 12px; min-width: 58px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.days button:hover { color: var(--text); border-color: rgba(242,191,7,.6); }
.days button.is-today { color: var(--text); border-color: rgba(242,191,7,.55); }
.days button[aria-pressed="true"] { background: var(--gold); color: #000; border-color: var(--gold); }
.ruler { position: relative; display: flex; height: 64px; margin: 34px 0 8px; background: #000; }
.ruler .blk { position: relative; height: 100%; overflow: hidden; border-right: 2px solid #000; background-size: cover; background-position: center; filter: grayscale(1) brightness(.5); transition: filter .4s; }
.ruler .blk:last-of-type { border-right: 0; }
.ruler .blk.ns { background: repeating-linear-gradient(90deg, #1c1c1c 0 3px, #121212 3px 6px); filter: none; }
.ruler .blk.live, .ruler .blk:hover { filter: none; }
.ruler .blk span { position: absolute; left: 8px; right: 6px; bottom: 6px; font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ruler .blk.ns span { color: var(--muted); }
.ruler .now { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 12px var(--gold); z-index: 2; pointer-events: none; }
.ruler .now::before { content: "Ahora"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 800 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #000; background: var(--gold); padding: 2px 6px; }
.hours { display: flex; justify-content: space-between; margin-bottom: 30px; font: 700 13px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.shows { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((100% - 36px) / 3)); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.show { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #111; scroll-snap-align: start; }
.show img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.show:hover img { transform: scale(1.05); }
.show::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0) 62%); }
.show .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 18px 18px; display: grid; gap: 4px; }
.show .day { font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #d9d5c7; }
.show .time { font: 800 16px var(--display); letter-spacing: .08em; color: var(--gold); font-variant-numeric: tabular-nums; }
.show h3 { font: 900 25px/1 var(--display); text-transform: uppercase; margin: 0; color: #fff; text-wrap: balance; }
.show:hover h3 { color: var(--gold); }
.show .live { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: var(--gold); color: #000; padding: 6px 10px; }
.show .live i { width: 8px; height: 8px; border-radius: 50%; background: #000; animation: pm-blink 1.2s steps(2) infinite; }
@keyframes pm-blink { 50% { opacity: .2; } }
.show .bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 4px; background: rgba(255,255,255,.2); }
.show .bar b { display: block; height: 100%; background: var(--gold); }
.grid-note { color: var(--muted); font-size: 15px; margin: 14px 0 0; max-width: 70ch; }

/* Productores españoles */
.prods { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.prod { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #111; }
.prod img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .5s, transform .6s cubic-bezier(.16,1,.3,1); }
.prod:hover img { filter: none; transform: scale(1.05); }
.prod::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0) 55%); }
.prod h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; margin: 0; font: 900 28px/1 var(--display); text-transform: uppercase; color: #fff; }
.prod:hover h3 { color: var(--gold); }

/* Line-up internacional, como un cartel de festival */
.lineup-sec { background: #000; border-block: 1px solid rgba(242,191,7,.3); }
.lineup { display: grid; gap: 16px; text-align: center; }
.tier { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.tier li { display: inline-flex; align-items: center; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .95; }
.tier li + li::before { content: ""; display: inline-block; width: .2em; height: .2em; margin: 0 .5em; background: var(--gold); transform: rotate(45deg); }
.tier a { transition: color .2s; }
.tier a:hover { color: var(--gold); }
.t1 li { font-size: clamp(38px, 6vw, 6rem); color: #fff; }
.t2 li { font-size: clamp(24px, 3.2vw, 46px); color: #ece9df; }
.t3 li { font-size: clamp(17px, 1.9vw, 27px); font-weight: 800; color: var(--muted); }
.tier li.has a { color: var(--gold); }
.lineup-key { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 26px 0 0; color: var(--muted); font-size: 15px; }
.lineup-key i { width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }

/* Top 10: filas con play y carrito que se despliegan en una preescucha */
.ranks li.trk { display: block; padding: 0; }
.ranks .trk-row { display: grid; grid-template-columns: minmax(36px, 64px) 52px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px 0; cursor: pointer; }
.ranks .trk-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranks .trk-row img { width: 52px; height: 52px; object-fit: cover; }
.ranks .trk.open .t { color: var(--gold); }
.trk-acts { display: flex; align-items: center; gap: 4px; }
.ranks .trk-acts button, .ranks .trk-acts a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: var(--gold); cursor: pointer; transition: color .2s, background .2s; }
.ranks .trk-acts button:hover, .ranks .trk-acts a:hover { color: #000; background: var(--gold); }
.eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 4px; background: currentColor; animation: pm-eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes pm-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.trk.playing .trk-play .material-icons { display: none; }
.trk.playing .trk-play .eq { display: flex; }
.trk-prev { display: none; grid-template-columns: 104px minmax(0,1fr) auto; gap: 18px; align-items: center; margin: 0 0 12px; padding: 14px; background: linear-gradient(90deg, rgba(242,191,7,.13), rgba(242,191,7,.03)); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.trk.open .trk-prev { display: grid; animation: pm-open .4s cubic-bezier(.16,1,.3,1); }
@keyframes pm-open { from { opacity: 0; transform: translateY(-6px); } }
.ranks .trk-prev img { width: 104px; height: 104px; object-fit: cover; }
.trk-prev .lbl { font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.trk-prev b { display: block; font: 900 24px/1 var(--display); text-transform: uppercase; color: var(--text); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-prev .who { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }
.pbar { height: 4px; margin-top: 12px; background: rgba(255,255,255,.16); }
.pbar span { display: block; height: 100%; width: 0; background: var(--gold); }
.tm { display: block; margin-top: 6px; font: 700 13px var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.prev-btns { display: flex; align-items: center; gap: 10px; }
.ranks .prev-btns button { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--gold); color: #000; display: grid; place-items: center; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.ranks .prev-btns button:hover { transform: scale(1.06); background: var(--gold); color: #000; }
.ranks .prev-btns button .material-icons { font-size: 32px; }
.prev-btns a { display: inline-flex; align-items: center; gap: 6px; font: 800 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); border: 2px solid rgba(255,255,255,.3); padding: 9px 12px; transition: border-color .2s, color .2s; }
.prev-btns a:hover { border-color: var(--gold); color: var(--gold); }
.prev-btns a .material-icons { font-size: 18px; }
@media (max-width: 560px) {
  .ranks .trk-row { grid-template-columns: 34px 46px minmax(0,1fr) auto; gap: 10px; }
  .ranks .trk-row img { width: 46px; height: 46px; }
  .ranks .trk-acts button, .ranks .trk-acts a { width: 38px; height: 38px; }
  .trk-prev { grid-template-columns: 72px minmax(0,1fr); }
  .ranks .trk-prev img { width: 72px; height: 72px; }
  .trk-prev b { font-size: 19px; }
  .prev-btns { grid-column: 1 / -1; }
  .prev-btns a span.txt { display: inline; }
}

/* Carrusel de próximos eventos en la franja dorada */
.evc { background: var(--gold); color: #000; }
.evc-in { padding-block: 56px 30px; }
.evc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.evc-top h2 { margin: 0; font: 900 clamp(30px, 4vw, 46px)/1 var(--display); text-transform: uppercase; }
.evc-nav { display: flex; align-items: center; gap: 10px; }
.evc-nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: #000; color: var(--gold); display: grid; place-items: center; cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.evc-nav button:hover { transform: scale(1.08); }
.evc-pos { min-width: 48px; text-align: center; font: 800 17px var(--display); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.evc-view { overflow: hidden; touch-action: pan-y; }
.evc-track { display: flex; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.evc-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: 210px minmax(0,1fr) auto; gap: 40px; align-items: center; padding: 8px 6px 14px; box-sizing: border-box; }
.evc-poster { display: block; aspect-ratio: 4/5; overflow: hidden; background: #000; transform: rotate(-2.5deg); box-shadow: 0 18px 34px -14px rgba(0,0,0,.6); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.evc-poster:hover { transform: rotate(0deg) scale(1.03); }
.evc-poster img { width: 100%; height: 100%; object-fit: cover; }
.evc-genre { display: inline-block; font: 800 13px var(--display); letter-spacing: .12em; text-transform: uppercase; background: #000; color: var(--gold); padding: 5px 10px; }
.evc-slide h3 { margin: 14px 0 14px; font: 900 clamp(40px, 5.6vw, 5.4rem)/.86 var(--display); text-transform: uppercase; text-wrap: balance; }
.evc-info { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 18px; font-weight: 700; }
.evc-info span { display: inline-flex; align-items: center; gap: 8px; }
.evc-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 800 19px var(--display); letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; background: #000; color: var(--gold); transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.evc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.evc-clock { display: grid; grid-template-columns: repeat(4, auto); gap: 12px; align-content: center; }
.evc-unit { display: grid; gap: 8px; text-align: center; }
.evc-unit small { font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.evc-flaps { display: flex; justify-content: center; gap: 3px; }
.evc-flap { position: relative; width: 46px; aspect-ratio: 3/4.2; display: grid; place-items: center; background: linear-gradient(#1c1c1c 50%, #141414 50%); color: var(--gold); font: 900 46px/1 var(--display); font-variant-numeric: tabular-nums; perspective: 300px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
.evc-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #000; }
.evc-flap span { display: block; }
.evc-flap.flip span { animation: pm-flip .45s cubic-bezier(.16,1,.3,1); }
@keyframes pm-flip { 0% { transform: rotateX(90deg); opacity: .3; } 100% { transform: rotateX(0); opacity: 1; } }
.evc-note { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 700; }
.evc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding-top: 20px; border-top: 2px solid rgba(0,0,0,.18); }
.evc-thumbs { display: flex; gap: 10px; }
.evc-thumbs button { width: 52px; aspect-ratio: 4/5; padding: 0; border: 0; background: #000; cursor: pointer; opacity: .5; outline: 3px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.evc-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.evc-thumbs button:hover { opacity: .85; }
.evc-thumbs button[aria-current="true"] { opacity: 1; outline-color: #000; }
.evc-cal { display: inline-flex; align-items: center; gap: 8px; font: 800 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.evc-cal:hover { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1100px) {
  .evc-slide { grid-template-columns: 170px minmax(0,1fr); gap: 28px; }
  .evc-clock { grid-column: 1 / -1; justify-content: start; }
  .evc-note { text-align: left; }
}
@media (max-width: 560px) {
  .evc-slide { grid-template-columns: 112px minmax(0,1fr); gap: 18px; align-items: start; }
  .evc-slide h3 { font-size: 34px; margin: 10px 0; }
  .evc-info { font-size: 15px; }
  .evc-btn { font-size: 16px; padding: 12px 18px; }
  .evc-clock { gap: 8px; }
  .evc-flap { width: 34px; font-size: 34px; }
  .evc-unit small { font-size: 11px; letter-spacing: .08em; }
  .evc-thumbs button { width: 42px; }
}

/* Pie */
.site-foot { background: #000; border-top: 1px solid rgba(242,191,7,.3); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; padding-block: 72px 56px; }
.foot-cols h2 { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 16px; padding-bottom: 16px; color: var(--text); background: radial-gradient(circle, var(--gold) 1.6px, transparent 2px) left bottom / 9px 4px repeat-x; }
.foot-cols p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 44ch; }
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 26px; border-top: 1px solid var(--line); }
.foot-legal { margin: 0; font: 800 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.foot-legal a { color: var(--gold); }
.foot-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.social span { font: 800 15px var(--display); letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; color: var(--text); font-size: 17px; transition: color .2s, border-color .2s, background .2s; }
.social a:hover { color: #000; background: var(--gold); border-color: var(--gold); }
.foot-note { color: var(--muted); font-size: 13px; padding-block: 0 24px; margin: 0; }

@media (max-width: 880px) {
  .foot-cols { grid-template-columns: minmax(0,1fr); gap: 36px; padding-block: 56px 40px; }
  .shows { grid-auto-columns: 82%; }
  .prods { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ruler .blk span { display: none; }
  .ruler .blk.live span { display: block; }
}
@media (max-width: 560px) {
  /* Equipo en móvil: tira deslizable de fotos pequeñas en lugar de dos fotos enormes por fila */
  .sec .djs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 28%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .sec .djs::-webkit-scrollbar { display: none; }
  .sec .dj { scroll-snap-align: start; }
  .sec .dj h3 { font-size: 15px; margin-top: 8px; }
  .sec .dj p { font-size: 12px; }
  .days button { min-width: 0; padding: 7px 9px; font-size: 14px; }
  .prod h3 { font-size: 21px; }
}


/* ===== onair.css ===== */
/* =========================================================
   PMT On Air v0.25.28 – ctrl centrado en desktop, ajax-disabled oculto
   ========================================================= */

/* Ocultar Pro Radio Music Player del frontend */
#qtmplayer-container,
#proradio-playercontainer {
	display: none !important;
}

/* Ocultar aviso "AJAX DISABLED" del tema Pro Radio (visible solo para admins) */
[id*="ajax-disabled"],
[class*="ajax-disabled"],
[id*="ajaxdisabled"],
[class*="ajaxdisabled"] {
	display: none !important;
}

:root {
	--pmto-h:       84px;
	--pmto-bg:      #181818;
	--pmto-bg2:     #121212;
	--pmto-bg3:     #282828;
	--pmto-accent:  #f2bf07;
	--pmto-text:    #b3b3b3;
	--pmto-bright:  #ffffff;
	--pmto-border:  rgba(255,255,255,.06);
	--pmto-mc:      #5000ff;
	--pmto-sc:      #ff5500;
	--pmto-ht:      #34d369;
}

/* ─── Nuclear Kirki override ─────────────────────────────── */
#pmt-onair-bar button,
#pmt-onair-bar button:hover,
#pmt-onair-bar button:focus,
#pmt-onair-bar button:active {
	background:    transparent !important;
	border:        none !important;
	border-radius: 0 !important;
	box-shadow:    none !important;
	outline:       none !important;
	cursor:        pointer;
	padding:       0;
}

/* ─── Wrapper ─── */
#pmt-onair-bar {
	position:        fixed;
	bottom:          0;
	left:            0;
	right:           0;
	z-index:         100001;
	display:         flex;
	flex-direction:  column;
	font-family:     inherit;
	font-size:       13px;
	line-height:     1.3;
	color:           var(--pmto-text);
	background:      var(--pmto-bg);
	border-top:      1px solid rgba(255,255,255,.08);
}

/* ─── Drawer (encima del strip) ─── */
#pmt-onair-drawer {
	background:          var(--pmto-bg2);
	border-top:          1px solid var(--pmto-border);
	border-bottom:       1px solid var(--pmto-border);
	max-height:          300px;
	overflow-y:          auto;
	overscroll-behavior: contain;
	scrollbar-width:     thin;
	scrollbar-color:     #333 transparent;
}
#pmt-onair-drawer::-webkit-scrollbar { width: 4px; }
#pmt-onair-drawer::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

/* ─── Strip ─── */
#pmt-onair-strip {
	display:     flex;
	align-items: center;
	height:      var(--pmto-h);
	flex-shrink: 0;
	position:    relative;
	overflow:    hidden;
	max-width:   900px;
	width:       100%;
	margin:      0 auto;
}

/* ─── Barra de progreso — centrada debajo del play ─── */
#pmt-onair-prog {
	width:        100%;
	max-width:    260px;
	height:       3px;
	position:     relative;
	background:   rgba(255,255,255,.14);
	border-radius: 2px;
	cursor:       pointer;
	transition:   height .15s, margin .15s;
	flex-shrink:  0;
}
#pmt-onair-prog:hover { height: 5px; }
#pmt-onair-prog-fill {
	position:       absolute;
	top: 0; left: 0;
	height:         100%;
	width:          0%;
	border-radius:  2px;
	background:     var(--pmto-accent);
	transition:     width .5s linear;
	pointer-events: none;
	box-shadow:     0 0 5px rgba(242,191,7,.5);
}

/* ─── Cover art ─── */
#pmt-onair-cover {
	width:        var(--pmto-h);
	height:       var(--pmto-h);
	flex-shrink:  0;
	position:     relative;
	background:   #0d0d0d;
	display:      flex;
	align-items:  center;
	justify-content: center;
	overflow:     hidden;
}
#pmt-onair-cover-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.pmt-onair-cover-icon {
	font-size: 24px !important;
	color:     #2a2a2a;
}

/* ─── Info (izquierda) ─── */
#pmt-onair-info {
	flex:       1;
	min-width:  0;
	display:    flex;
	flex-direction: column;
	justify-content: center;
	padding:    0 8px 0 14px;
	overflow:   hidden;
}
#pmt-onair-title {
	display:       block;
	color:         var(--pmto-bright);
	font-size:     13px;
	font-weight:   500;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
#pmt-onair-artist {
	display:       block;
	color:         var(--pmto-text);
	font-size:     11px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	margin-top:    2px;
}
#pmt-onair-artist:empty { display: none; }

/* ─── Marquee animado (clase añadida por JS cuando hay overflow) ─── */
@keyframes pmt-marquee {
	0%,  20% { transform: translateX(0); }
	70%, 90% { transform: translateX(var(--pmt-slide, 0px)); }
	100%     { transform: translateX(0); }
}
#pmt-onair-title.pmt-overflow,
#pmt-onair-artist.pmt-overflow {
	overflow:        visible;
	text-overflow:   clip;
	animation:       pmt-marquee 12s ease-in-out infinite;
	will-change:     transform;
	pointer-events:  none; /* evita tapar el botón play al desbordarse */
}

/* ─── Controles: columna — botones arriba, barra de progreso abajo ─── */
#pmt-onair-ctrl {
	flex:            0 0 260px;  /* ancho fijo = max-width de la barra de progreso */
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	padding:         6px 0;
}

.pmt-ctrl-btns {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             4px;
}

.pmt-ctrl-btns button {
	width:       36px !important;
	height:      36px !important;
	display:     flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:       var(--pmto-text);
	transition:  color .12s, transform .1s !important;
	flex-shrink: 0;
}
.pmt-ctrl-btns button:hover {
	color: var(--pmto-bright) !important;
}
.pmt-ctrl-btns button .material-icons {
	font-size: 22px !important;
}

/* Botón PLAY — círculo blanco estilo Spotify */
#pmt-onair-bar #pmt-onair-play {
	width:         46px !important;
	height:        46px !important;
	border-radius: 50% !important;
	background:    var(--pmto-bright) !important;
	color:         #000 !important;
	transition:    background .12s, transform .1s !important;
	margin:        0 6px;
}
#pmt-onair-bar #pmt-onair-play:hover {
	background: #e8e8e8 !important;
	transform:  scale(1.06) !important;
}
#pmt-onair-bar #pmt-onair-play:active {
	transform: scale(.95) !important;
}
#pmt-onair-bar #pmt-onair-play .material-icons {
	font-size: 26px !important;
	color:     #000 !important;
}

/* ─── Volumen ─── */
#pmt-onair-vol {
	flex:             1;            /* crece igual que info para centrar el ctrl */
	display:          flex;
	align-items:      center;
	justify-content:  flex-end;     /* contenido (mute+slider) alineado a la derecha */
	padding:          0 8px;
	gap:              6px;
}
#pmt-onair-mute {
	width:   32px !important;
	height:  32px !important;
	display: flex !important;
	align-items:     center !important;
	justify-content: center !important;
	color:       var(--pmto-text);
	flex-shrink: 0;
	transition:  color .12s;
}
#pmt-onair-mute:hover { color: var(--pmto-bright) !important; }
#pmt-onair-mute .material-icons { font-size: 18px !important; }
#pmt-onair-mute.pmt-muted .material-icons::before { content: 'volume_off'; }

#pmt-onair-vol-slider {
	-webkit-appearance: none;
	appearance:  none;
	width:       70px;
	height:      3px;
	border-radius: 2px;
	background:  rgba(255,255,255,.12);
	outline:     none;
	cursor:      pointer;
	flex-shrink: 0;
}
#pmt-onair-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width:         12px;
	height:        12px;
	border-radius: 50%;
	background:    var(--pmto-bright);
	cursor:        pointer;
}
#pmt-onair-vol-slider::-moz-range-thumb {
	width:         12px;
	height:        12px;
	border:        none;
	border-radius: 50%;
	background:    var(--pmto-bright);
	cursor:        pointer;
}

/* ─── Toggle (lista de sesiones) ─── */
#pmt-onair-toggle {
	width:        64px !important;
	height:       var(--pmto-h) !important;
	flex-shrink:  0;
	border-left:  1px solid var(--pmto-border) !important;
	color:        var(--pmto-text);
	display:      flex !important;
	flex-direction: column;
	align-items:  center !important;
	justify-content: center !important;
	gap:          3px;
	transition:   color .12s, background .12s !important;
}
#pmt-onair-toggle:hover,
#pmt-onair-toggle[aria-expanded="true"] {
	color:       var(--pmto-accent) !important;
	background:  rgba(242,191,7,.05) !important;
}
#pmt-onair-toggle .material-icons { font-size: 22px !important; }
#pmt-onair-count {
	font-size:      9px;
	letter-spacing: .04em;
	line-height:    1;
	text-transform: uppercase;
}

/* ─── Ítem de sesión ─── */
.pmt-onair-item {
	display:       flex;
	align-items:   center;
	gap:           12px;
	padding:       10px 16px;
	cursor:        pointer;
	border-bottom: 1px solid var(--pmto-border);
	transition:    background .1s;
}
.pmt-onair-item:last-child { border-bottom: none; }
.pmt-onair-item:hover      { background: rgba(255,255,255,.05); }
.pmt-onair-item--active    { background: rgba(242,191,7,.06); }
.pmt-onair-item--active .pmt-onair-item__title { color: var(--pmto-accent); }

.pmt-onair-item__thumb {
	width:       46px;
	height:      46px;
	flex-shrink: 0;
	border-radius: 4px;
	background:  #1a1a1a;
	display:     flex;
	align-items: center;
	justify-content: center;
	overflow:    hidden;
	position:    relative;
}
.pmt-onair-item__thumb img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.pmt-onair-item__thumb .material-icons { font-size: 18px !important; color: #333; }

.pmt-onair-item__info {
	flex:      1;
	min-width: 0;
}
.pmt-onair-item__title {
	display:       block;
	font-size:     13px;
	font-weight:   500;
	color:         var(--pmto-bright);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}
.pmt-onair-item__artist {
	display:       block;
	font-size:     11px;
	color:         var(--pmto-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	margin-top:    2px;
}
.pmt-onair-item__artist:empty { display: none; }

.pmt-onair-item__badge {
	flex-shrink:   0;
	font-size:     9px;
	font-weight:   700;
	padding:       2px 5px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pmt-onair-item__badge--mixcloud   { background: var(--pmto-mc); color: #fff; }
.pmt-onair-item__badge--soundcloud { background: var(--pmto-sc); color: #fff; }
.pmt-onair-item__badge--hearthis   { background: var(--pmto-ht); color: #000; }

.pmt-onair-item__play {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	color:       var(--pmto-text);
	opacity:     0;
	transition:  opacity .12s;
}
.pmt-onair-item__play .material-icons { font-size: 18px !important; }
.pmt-onair-item:hover .pmt-onair-item__play        { opacity: 1; }
.pmt-onair-item--active .pmt-onair-item__play      { opacity: 1; color: var(--pmto-accent); }

/* ─── Embed oculto ─── */
#pmt-onair-embed {
	position:       fixed;
	bottom:         0;
	left:           0;
	width:          320px;
	height:         72px;
	overflow:       hidden;
	z-index:        100000;
	opacity:        0.01;
	pointer-events: none;
}
#pmt-onair-embed iframe {
	width:  320px;
	height: 72px;
	border: none;
}

/* ─── Spacer ─── */
#pmt-onair-spacer {
	display: block;
	height:  var(--pmto-h);
}

/* ─── Mobile: fila única compacta + barra absoluta al fondo ─── */
@media (max-width: 600px) {
	/* Strip: fila única, sin wrap; padding-bottom reserva espacio para la barra absoluta */
	#pmt-onair-strip {
		flex-wrap:   nowrap;
		height:      auto;
		min-height:  0;
		overflow:    visible;
		align-items: center;
		padding:     6px 0 14px;
	}
	#pmt-onair-cover { display: none; }

	/* Info: ocupa el espacio restante, muestra título y artista */
	#pmt-onair-info {
		flex:      1 1 0;
		min-width: 0;
		width:     auto;
		height:    auto;
		padding:   0 4px 0 12px;
		overflow:  hidden;
	}
	#pmt-onair-title  { font-size: 13px; }
	#pmt-onair-artist { font-size: 11px; }

	/* Ctrl: sólo botones en fila (prog queda fuera del flujo via absolute) */
	#pmt-onair-ctrl {
		flex:            0 0 auto;
		flex-direction:  row;
		align-items:     center;
		justify-content: center;
		padding:         0;
		gap:             0;
	}

	/* Barra de progreso: salida del flujo flex, pegada al fondo del strip */
	#pmt-onair-prog {
		position:      absolute;
		bottom:        0;
		left:          14px;      /* márgenes laterales */
		right:         14px;
		width:         auto;
		max-width:     none;
		height:        14px;      /* zona táctil */
		border-radius: 2px;
		background:    transparent;
	}
	#pmt-onair-prog::before {     /* track visible centrado en la zona táctil */
		content:       '';
		position:      absolute;
		top:           50%; left: 0; right: 0;
		height:        3px;
		margin-top:    -1px;
		background:    rgba(255,255,255,.28);
		border-radius: 2px;
		pointer-events: none;
	}
	#pmt-onair-prog:hover { height: 14px; }
	#pmt-onair-prog-fill {
		top:           50%;
		bottom:        auto;
		transform:     translateY(-50%);
		height:        3px;
		border-radius: 2px;
		box-shadow:    none;
		z-index:       1;
	}

	/* Botones compactos */
	.pmt-ctrl-btns { gap: 0; }
	.pmt-ctrl-btns button              { width: 34px !important; height: 44px !important; }
	.pmt-ctrl-btns button .material-icons { font-size: 20px !important; }
	#pmt-onair-bar #pmt-onair-play     { width: 40px !important; height: 40px !important; margin: 0 2px !important; }
	#pmt-onair-play .material-icons    { font-size: 22px !important; }

	/* Vol: sólo icono mute */
	#pmt-onair-vol        { flex: 0 0 auto; display: flex; align-items: center; padding: 0 2px; gap: 0; border-left: none; height: auto; }
	#pmt-onair-vol-slider { display: none; }
	#pmt-onair-mute       { width: 34px !important; height: 44px !important; }
	#pmt-onair-mute .material-icons { font-size: 20px !important; }

	/* Toggle: compacto, sin label */
	#pmt-onair-toggle { width: 40px !important; height: 44px !important; }
	#pmt-onair-count  { display: none; }

	/* Spacer y embed ajustados a la nueva altura */
	#pmt-onair-spacer       { height: 70px; }
	#pmt-onair-embed        { height: 70px; }
	#pmt-onair-embed iframe { height: 70px; }
}