/* Presentación exclusiva de Programas. Conserva los estados y selectores
   usados por programas.js y se carga después de las hojas existentes. */
.shows-main {
    --shows-surface: #0c1726;
    --shows-surface-soft: #101e30;
    --shows-accent: #00d4ff;
    max-width: 1360px;
    padding-bottom: 80px;
}

.shows-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 36px;
}

.shows-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--shows-accent);
    font-size: .85rem;
    letter-spacing: .16em;
    margin-bottom: 12px;
}

.shows-eyebrow > span {
    width: 22px;
    height: 2px;
    background: currentColor;
}

.shows-heading {
    font-size: clamp(3rem, 5.8vw, 5.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .015em;
    text-wrap: balance;
}

.shows-heading span { color: var(--shows-accent); }
.shows-description {
    margin-top: 16px;
    max-width: 620px;
    color: var(--muted-text);
    font-size: 1.12rem;
    line-height: 1.5;
    letter-spacing: .035em;
}

.shows-schedule-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: .95rem;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.shows-schedule-link:hover { background: var(--glass); border-color: var(--shows-accent); }
.shows-schedule-link svg, .shows-timezone svg, .dial-heading svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Cabina: el arte conserva su proporción y tiene un respaldo cuando
   suena la selección continua, que no trae portada desde el backend. */
.shows-main .booth {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr);
    min-height: 310px;
    padding: 36px 42px;
    gap: 32px;
    margin-bottom: 20px;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: #0a1626;
    box-shadow: 0 18px 48px #00000020;
}
.shows-main .booth::after {
    content: "";
    position: absolute;
    inset: 24px auto 24px 0;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--show-accent, var(--brand-cyan));
}
.shows-main .booth-glow {
    background: radial-gradient(ellipse at 92% 45%, color-mix(in srgb, var(--show-accent, var(--brand-cyan)) 17%, transparent), transparent 65%);
}
.shows-main .booth-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .84rem;
    margin-bottom: 18px;
    color: #86edff;
}
.shows-main .booth-clock { color: #e5edf7; font-size: .75rem; padding: 5px 9px; border-radius: 5px; }
.shows-main .booth-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    letter-spacing: .02em;
    line-height: 1.04;
    color: #fff;
}
.shows-main .booth-host { color: #bccbda; font-size: 1.15rem; letter-spacing: .05em; margin-bottom: 22px; }
.shows-main .booth-progress { color: #c1cfdf; max-width: 500px; }
.shows-main .booth-progress-track { height: 5px; background: #ffffff20; }
.shows-main .booth-next { margin-top: 22px; padding-top: 16px; gap: 8px 12px; border-color: #ffffff20; }
.shows-main .booth-next span { color: #b4c5d8; font-size: .78rem; }
.shows-main .booth-next strong { color: #fff; font-weight: 400; font-size: 1.1rem; letter-spacing: .04em; }
.shows-main .booth-next em { color: #b4c5d8; }
.shows-main .booth-art { order: 0; min-height: 230px; }
.shows-main .booth-art img { max-width: 240px; max-height: 260px; animation: none; }
.shows-main .booth-art img:not([src]), .shows-main .booth-art img[src=""] { display: none; }
.booth-record {
    display: grid;
    place-items: center;
    width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid #ffffff18;
    background: repeating-radial-gradient(circle, #ffffff07 0 1px, transparent 2px 7px), #07111f;
    box-shadow: 0 16px 40px #00000040;
    transform: rotate(-12deg);
}
.booth-record > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: #00d4ff;
    color: #041521;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: .1em;
}
.booth-record strong { font-size: 2.7rem; font-weight: 400; }
.booth-record small { font-size: .6rem; margin-top: 8px; letter-spacing: .08em; }
.booth.is-live .booth-record { display: none; }
.shows-main [hidden] { display: none !important; }

/* El dial representa siempre el día de hoy, independiente del filtro. */
.shows-main .dial {
    position: relative;
    top: auto;
    z-index: auto;
    padding: 20px 24px 16px;
    margin-bottom: 48px;
    border-radius: 12px;
    background: var(--shows-surface);
    backdrop-filter: none;
}
.dial-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dial-heading > span:first-child { display: inline-flex; align-items: center; gap: 9px; font-size: 1rem; letter-spacing: .07em; }
.dial-heading svg { color: var(--shows-accent); }
.dial-heading-note { color: var(--muted-text); font-size: .85rem; letter-spacing: .06em; }
.shows-main .dial-track { height: 42px; }
.shows-main .dial-hours { margin-top: 9px; }
.shows-main .dial-hours span { font-size: .68rem; }
.shows-main .dial-hours span:first-child { transform: none; }
.shows-main .dial-hours span:last-child { transform: translateX(-100%); }

.shows-schedule { scroll-margin-top: 110px; }
.shows-schedule-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.shows-schedule-heading .shows-eyebrow { margin-bottom: 6px; }
.shows-schedule-heading h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; line-height: 1.1; letter-spacing: .025em; }
.shows-timezone { display: flex; align-items: center; gap: 8px; color: var(--muted-text); font-size: .9rem; letter-spacing: .035em; }
.shows-controls { padding: 6px 22px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--shows-surface); margin-bottom: 34px; }
.shows-main .rundown-days { align-items: center; gap: 8px; padding: 14px 0; margin: 0; }
.shows-main .rundown-days-label, .shows-main .rundown-filters-label { flex: 0 0 60px; font-size: .85rem; letter-spacing: .1em; }
.shows-main .rundown-day { min-width: 64px; min-height: 44px; padding: 10px 16px; border-radius: 7px; color: var(--muted-text); font-size: 1rem; font-weight: 400; letter-spacing: .07em; }
.shows-main .rundown-day::after, .shows-main .rundown-filter::after { content: none; }
.shows-main .rundown-day.is-active { background: var(--shows-accent); color: #041521; }
.shows-main .rundown-day:not(.is-active):hover { background: var(--glass); color: var(--text-main); }
.shows-main .rundown-filters { align-items: center; gap: 8px; margin: 0; padding: 14px 0; border-bottom: 0; border-top: 1px solid var(--glass-border); }
.shows-main .rundown-filter { min-height: 44px; padding: 8px 14px; border: 1px solid transparent; border-radius: 7px; color: var(--muted-text); font-size: .92rem; letter-spacing: .055em; font-weight: 400; }
.shows-main .rundown-filter.is-active { border-color: var(--glass-border); background: var(--shows-surface-soft); color: var(--text-main); }
.shows-main .rundown-filter:hover { color: var(--text-main); background: var(--glass); }

/* Las fichas son legibles incluso antes de inicializar el JavaScript. */
.shows-main .rundown { gap: 38px; }
.shows-main .rundown-block-head {
    grid-template-columns: auto 1fr auto;
    gap: 12px 18px;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 16px;
    opacity: 1;
    transform: none;
}
.shows-main .rundown-block-head h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; letter-spacing: .04em; }
.shows-main .rundown-block-range { justify-self: start; font-size: .7rem; color: var(--muted-text); padding: 5px 9px; background: var(--glass); border-radius: 5px; }
.shows-main .rundown-block-note { grid-column: auto; margin: 0; font-size: .98rem; letter-spacing: .025em; }
.shows-main .rundown-item {
    grid-template-columns: 112px minmax(0, 1fr) 176px;
    gap: 26px;
    padding: 28px;
    margin-bottom: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--shows-surface);
    opacity: 1;
    transform: none;
    scroll-margin-top: 110px;
    transition: border-color .2s ease, background .2s ease;
}
.shows-main .rundown-item:last-child { margin-bottom: 0; }
.shows-main .rundown-item::before { content: none; }
.shows-main .rundown-item:hover { border-color: color-mix(in srgb, var(--show-accent) 45%, var(--glass-border)); }
.shows-main .rundown-item.is-live { border-color: color-mix(in srgb, var(--show-accent) 65%, var(--glass-border)); background: linear-gradient(110deg, color-mix(in srgb, var(--show-accent) 7%, transparent), transparent 70%), var(--shows-surface); }
.shows-main .rundown-item-clock { gap: 10px; }
.shows-main .rundown-item-hour { font-size: 2rem; }
.shows-main .rundown-item-hour--always { font-size: 1.7rem; }
.shows-main .rundown-item-hour i { opacity: .85; }
.shows-main .rundown-item-range { font-size: .72rem; line-height: 1.6; }
.shows-main .rundown-item-main { padding-left: 24px; }
.shows-main .rundown-item-kicker { font-size: .78rem; letter-spacing: .12em; margin-bottom: 9px; }
.shows-main .rundown-item-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.1; letter-spacing: .025em; overflow-wrap: anywhere; }
.shows-main .rundown-item-host { font-size: .97rem; line-height: 1.5; font-weight: 400; letter-spacing: .025em; }
.shows-main .rundown-item-host svg { flex-shrink: 0; }
.shows-main .rundown-item-desc { font-size: 1.03rem; line-height: 1.65; letter-spacing: .035em; color: var(--muted-text); }
.shows-main .rundown-slot-group { flex-wrap: wrap; max-width: 100%; padding: 7px 10px; border-color: var(--glass-border); background: var(--glass); border-radius: 6px; }
.shows-main .rundown-slot-group strong { font-size: .78rem; font-weight: 400; }
.shows-main .rundown-item-tags { gap: 7px; margin-bottom: 14px; }
.shows-main .rundown-item-tags li { font-size: .76rem; font-weight: 400; letter-spacing: .08em; }
.shows-main .rundown-item-cta { min-height: 44px; padding: 9px 0; font-size: .98rem; letter-spacing: .04em; font-weight: 400; }
.shows-main .rundown-item-art { align-self: center; }
.shows-main .rundown-item-art img { max-height: 190px; }
.shows-main .rundown-empty { padding: 36px 24px; border: 1px dashed var(--glass-border); border-radius: 12px; background: var(--shows-surface); line-height: 1.6; font-size: 1.1rem; }
.shows-main .rundown-item-hour,
.shows-main .rundown-slot-group em,
.shows-main .rundown-item-tags li,
.shows-main .rundown-item-live,
.shows-main .rundown-item-num,
.shows-main .rundown-item.is-live .rundown-item-title,
.shows-main .rundown-item:hover .rundown-item-title { color: color-mix(in srgb, var(--show-accent) 55%, #ffffff); }

#show-modal .show-modal-card { border: 1px solid var(--glass-border); border-top: 3px solid var(--show-accent, var(--brand-cyan)); border-radius: 16px; max-height: 80dvh; }
#show-modal #show-modal-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; letter-spacing: .025em; }
#show-modal .show-modal-summary { font-size: 1.15rem; letter-spacing: .035em; }
#show-modal .show-modal-close { min-height: 44px; padding: 8px 12px; border: 1px solid var(--glass-border); border-radius: 6px; font-size: .88rem; }
#show-modal .show-modal-cats li { font-size: .85rem; }
#show-modal .show-modal-time, #show-modal .show-modal-cats li { color: color-mix(in srgb, var(--show-accent, var(--brand-cyan)) 55%, #ffffff); }

body.light-theme .shows-main { --shows-surface: #fff; --shows-surface-soft: #eaf2f6; --shows-accent: #007b99; }
/* La cabina mantiene su fondo oscuro en ambos temas para conservar
   el contraste de los indicadores y diferenciar la emisión actual. */
body.light-theme .shows-main .booth { background: #0a1626; }
body.light-theme .shows-main .booth-title,
body.light-theme .shows-main .booth-next strong { color: #fff; }
body.light-theme .shows-main .booth-clock { background: #ffffff14; }
body.light-theme .shows-main .booth-next { border-color: #ffffff20; }
body.light-theme .shows-main .booth-progress-track { background: #ffffff20; }
body.light-theme .shows-main .rundown-day.is-active { color: #fff; }
body.light-theme .shows-main .rundown-item-hour,
body.light-theme .shows-main .rundown-slot-group em,
body.light-theme .shows-main .rundown-item-tags li,
body.light-theme .shows-main .rundown-item-live,
body.light-theme .shows-main .rundown-item-num { color: color-mix(in srgb, var(--show-accent) 45%, #142b40); }
body.light-theme .shows-main .rundown-item .rundown-item-title { color: var(--text-main); }
body.light-theme .shows-main .dial-track { background-color: #eef2f6; }
body.light-theme #show-modal .show-modal-time,
body.light-theme #show-modal .show-modal-cats li { color: color-mix(in srgb, var(--show-accent) 45%, #142b40); }

@media (max-width: 1000px) {
    .shows-intro { align-items: flex-start; flex-direction: column; gap: 18px; }
    .shows-main .rundown-block-head { grid-template-columns: auto 1fr; }
    .shows-main .rundown-block-note { grid-column: 1 / -1; }
    .shows-main .rundown-item { grid-template-columns: 90px minmax(0, 1fr) 130px; gap: 20px; }
}

@media (max-width: 900px) {
    .shows-main .rundown-item { grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: "clock art" "main main"; }
    .shows-main .rundown-item-art { width: 100px; }
    .shows-main .rundown-item-main { padding: 20px 0 0; }
}

@media (max-width: 768px) {
    .shows-main { padding: 98px 18px 40px; }
    .shows-intro { margin-bottom: 26px; }
    .shows-heading { font-size: clamp(2.8rem, 9vw, 4.2rem); }
    .shows-description { margin-top: 12px; font-size: 1rem; }
    .shows-main .booth { min-height: 0; grid-template-columns: minmax(0, 1fr) 108px; padding: 24px; gap: 16px; border-radius: 14px; }
    .shows-main .booth-body { grid-column: 1 / -1; grid-row: 1; }
    .shows-main .booth-status { padding-right: 115px; font-size: .75rem; gap: 8px; min-height: 68px; align-content: center; margin-bottom: 16px; }
    .shows-main .booth-clock { margin-left: 0; }
    .shows-main .booth-title { font-size: clamp(2.2rem, 8vw, 3.2rem); }
    .shows-main .booth-host { font-size: 1.03rem; }
    .shows-main .booth-art { grid-column: 2; grid-row: 1; align-self: start; min-height: 0; pointer-events: none; }
    .shows-main .booth-art img { width: 88px; height: 88px; }
    .booth-record { width: 88px; }
    .booth-record > span { width: 50px; height: 50px; font-size: .62rem; }
    .booth-record strong { font-size: 1.22rem; }
    .booth-record small { display: none; }
    .shows-main .booth-next { gap: 6px 10px; }
    .shows-main .booth-next span { flex-basis: 100%; }
    .shows-main .dial { padding: 18px 18px 14px; margin-bottom: 32px; }
    .dial-heading { margin-bottom: 16px; }
    .dial-heading-note { font-size: .7rem; letter-spacing: .02em; }
    .shows-main .dial-track { height: 44px; }
    .shows-schedule-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 18px; }
    .shows-controls { padding: 4px 12px; margin-bottom: 26px; }
    .shows-main .rundown-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
    .shows-main .rundown-days-label { grid-column: 1 / -1; padding: 0 4px 6px; }
    .shows-main .rundown-day { min-width: 0; padding: 9px 2px; font-size: .94rem; }
    .shows-main .rundown-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0; gap: 6px; padding: 10px 2px; scrollbar-width: thin; }
    .shows-main .rundown-filters-label { flex-basis: auto; padding-right: 4px; }
    .shows-main .rundown-filter { flex-shrink: 0; padding: 8px 12px; }
    .shows-main .rundown-block-head { column-gap: 12px; }
    .shows-main .rundown-block-note { line-height: 1.4; font-size: .9rem; }
    .shows-main .rundown-item { padding: 20px; gap: 16px; }
    .shows-main .rundown-item-title { font-size: 2rem; }
    .shows-main .rundown-item-art { width: 88px; }
    .shows-main .rundown-item-art img { max-height: 88px; }
    .shows-main .rundown-item-badge { width: 28px; height: 28px; }
    .shows-main .rundown-slot-group { gap: 5px 8px; }
    #show-modal .show-modal-card { margin-top: 8dvh; max-height: 84dvh; padding: 24px; }
}

/* Reveal de una sola entrada por elemento. La clase se agrega desde JS;
   los estados de filtrado siguen controlando display por separado. */
@media (prefers-reduced-motion: no-preference) {
    .shows-main .shows-reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 560ms var(--ease-out),
                    transform 560ms var(--ease-out),
                    border-color 200ms ease, background 200ms ease;
        transition-delay: var(--shows-reveal-delay, 0ms), var(--shows-reveal-delay, 0ms), 0ms, 0ms;
    }

    .shows-main .shows-reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    .shows-main .rundown-item.shows-reveal > .rundown-item-clock,
    .shows-main .rundown-item.shows-reveal > .rundown-item-main,
    .shows-main .rundown-item.shows-reveal > .rundown-item-art {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
        transition-delay: calc(var(--shows-reveal-delay, 0ms) + var(--shows-part-delay, 40ms));
    }

    .shows-main .rundown-item-main { --shows-part-delay: 100ms; }
    .shows-main .rundown-item-art { --shows-part-delay: 160ms; }

    .shows-main .rundown-item.shows-reveal.is-visible > .rundown-item-clock,
    .shows-main .rundown-item.shows-reveal.is-visible > .rundown-item-main,
    .shows-main .rundown-item.shows-reveal.is-visible > .rundown-item-art {
        opacity: 1;
        transform: none;
    }

    .shows-main .shows-reveal:not(.is-visible),
    .shows-main .rundown-item.shows-reveal:not(.is-visible) > * {
        transition: none;
    }

    .shows-main .shows-reveal:focus-within,
    .shows-main .rundown-item.shows-reveal:focus-within > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shows-main *, .shows-main *::before, .shows-main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}