/* =============================================
   pages/programas-hero.css
   Programas, parte 1/3: cabina en vivo (encabezado) + dial de 24 horas
   + filtros. El encabezado dejo de ser un titulo centrado decorativo:
   ahora muestra el estado real de la emisora (que suena, con quien,
   cuanto lleva, que sigue) y el dial visualiza como se reparte el dia
   completo, sirviendo ademas de navegacion.
   Sigue en pages/programas-list.css.
   ============================================= */

.shows-main {
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--page-shell-padding);
}

/* Tipografia de cabina para esta pagina: titulares en Bebas (la fuente
   unica del sitio) y todo lo que sea un dato de tiempo en "JetBrains
   Mono" (lectura tipo dial/reloj de transmision), que se carga solo
   aqui via $pageExtraHead en pages/programas.php. */
.booth-title,
.rundown-item-title,
.rundown-block-head h2,
#show-modal-title {
    font-family: var(--font-bebas);
}

.booth-clock,
.booth-progress,
.rundown-item-hour,
.rundown-item-range,
.rundown-block-range,
.dial-hours,
.dial-seg-name,
.show-modal-time {
    font-family: "JetBrains Mono", "SFMono-Regular", monospace;
}

/* =========================================================
   CABINA EN VIVO
   ========================================================= */
.booth {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    overflow: hidden;
    padding: clamp(28px, 4vw, 48px);
    margin-bottom: var(--space-6);
    border-radius: 4px;
    border-left: 3px solid var(--show-accent, var(--brand-cyan));
    background: linear-gradient(115deg, #05101f 0%, #071628 55%, #05101f 100%);
    transition: border-color var(--duration-slow) var(--ease-out);
}

/* Halo del color del programa al aire: la cabina cambia de temperatura
   segun quien este transmitiendo, sin repintar toda la paleta del sitio. */
.booth-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 120% at 88% 50%, color-mix(in srgb, var(--show-accent, var(--brand-cyan)) 30%, transparent), transparent 62%),
        radial-gradient(50% 100% at 0% 20%, color-mix(in srgb, var(--show-accent, var(--brand-cyan)) 12%, transparent), transparent 60%);
    transition: background var(--duration-slow) var(--ease-out);
}

.booth-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.booth-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--show-accent, var(--brand-cyan));
    margin-bottom: 14px;
}

/* El punto pulsante global (.pulse-dot, base/animations.css) usa el cian
   de marca; aqui debe seguir el color del programa al aire. */
.booth .pulse-dot {
    background: var(--show-accent, var(--brand-cyan));
}

.booth-clock {
    margin-left: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.booth-title {
    font-size: clamp(2.1rem, 5.6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 10px;
    word-break: break-word;
}

.booth-host {
    color: var(--soft-text);
    font-size: var(--text-lg);
    margin-bottom: 24px;
}

/* Barra de avance del bloque: cuanto lleva y cuanto le queda al programa
   en curso -- el dato que convierte una parrilla estatica en algo vivo. */
.booth-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
    font-size: 0.72rem;
    color: var(--muted-text);
}

.booth-progress-track {
    flex: 1 1 auto;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.booth-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--show-accent, var(--brand-cyan));
    transition: width 600ms var(--ease-out);
}

.booth-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-sm);
}

.booth-next span {
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.68rem;
    font-weight: 800;
}

.booth-next strong {
    color: var(--text-main);
    font-weight: 700;
}

.booth-next em {
    color: var(--muted-text);
    font-style: normal;
    font-family: "JetBrains Mono", "SFMono-Regular", monospace;
    font-size: 0.78rem;
}

/* Arte del programa al aire, flotando sin marco. */
.booth-art {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.booth-art img {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.5));
    animation: booth-art-float 7s ease-in-out infinite;
}

.booth-art img:not([src]) {
    display: none;
}

@keyframes booth-art-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .booth-art img {
        animation: none;
    }
}

@media (max-width: 860px) {
    .booth {
        grid-template-columns: 1fr;
    }

    .booth-art {
        order: -1;
        min-height: 0;
    }

    .booth-art img {
        max-width: 190px;
    }
}

/* =========================================================
   DIAL DE 24 HORAS
   Cada programa es un segmento ubicado en su hora real dentro de la
   linea del dia (--from y --span vienen inline desde el PHP) y la aguja
   marca el momento actual, movida por JS. Es a la vez mapa del dia y
   navegacion: al hacer click salta a ese programa.
   ========================================================= */
.dial {
    position: sticky;
    top: 92px;
    z-index: var(--z-dropdown);
    padding: 14px 16px 10px;
    margin-bottom: var(--space-7);
    border-radius: 4px;
    background: rgba(5, 10, 20, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
}

.dial-track {
    position: relative;
    height: 44px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px calc(100% / 24));
    background-size: calc(100% / 24) 100%;
}

.dial-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--from) / 24 * 100%);
    width: calc(var(--span) / 24 * 100%);
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    border: 0;
    border-radius: 3px;
    background: color-mix(in srgb, var(--show-accent) 34%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--show-accent) 60%, transparent);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.dial-seg:hover,
.dial-seg:focus-visible {
    background: color-mix(in srgb, var(--show-accent) 58%, transparent);
    transform: scaleY(1.08);
}

/* El segmento del programa en curso se llena por completo. */
.dial-seg.is-live {
    background: var(--show-accent);
}

.dial-seg-name {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dial-seg.is-live .dial-seg-name {
    color: #04121c;
}

/* Aguja del momento actual: linea + cabeza, se mueve con los minutos. */
.dial-needle {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    transition: left 800ms var(--ease-out);
}

.dial-needle::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateX(-50%);
}

.dial-hours {
    position: relative;
    height: 16px;
    margin-top: 6px;
}

.dial-hours span {
    position: absolute;
    top: 0;
    left: calc(var(--at) / 24 * 100%);
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--muted-text);
}

/* En movil el dial completo no es legible (6 segmentos en 340 px), pero
   sigue siendo util como mapa: se conserva la barra y se ocultan los
   nombres, dejando solo el color de cada bloque y la aguja. */
@media (max-width: 720px) {
    .dial {
        position: static;
    }

    .dial-track {
        height: 26px;
    }

    .dial-seg-name {
        display: none;
    }
}

/* =========================================================
   FILTRO POR GENERO — texto subrayado, no pastillas: la orientacion
   principal de la pagina ya la da el dial de arriba.
   ========================================================= */
.rundown-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--glass-border);
}

.rundown-filters-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-text);
}

.rundown-filter {
    position: relative;
    padding: 0 0 4px;
    border: 0;
    background: transparent;
    color: var(--muted-text);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-out);
}

.rundown-filter::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan-glow), #7c8cff);
    transition: right var(--duration-base) var(--ease-out);
}

.rundown-filter:hover {
    color: var(--text-main);
}

.rundown-filter.is-active {
    color: var(--text-main);
}

.rundown-filter.is-active::after {
    right: 0;
}

/* Fila de filtro por dia de la semana: mismo trazo subrayado que el
   filtro de genero (reusa .rundown-filter), apenas mas junta a la
   fila siguiente. Arranca en HOY (lo reajusta pages/programas.js con
   la hora local); "Toda la semana" lo desactiva. */
.rundown-days {
    margin-bottom: var(--space-4);
}

.rundown-day-today {
    margin-left: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cyan-glow);
}

/* Al mirar un dia concreto, los segmentos del dial que no salen ese
   dia se ocultan -- el hueco es intencional: ahi no hay nada
   programado ese dia. */
.dial-seg.is-day-off {
    display: none;
}