/* VOZ.PE — Radio en vivo: el aparato.
   ------------------------------------------------------------------------
   El reproductor es un APARATO, no un formulario. El anterior era un <select>
   con un slider y por eso pasaba desapercibido: parecía parte del sitio en vez
   de algo que se enciende.

   Mundo: reproductor multimedia de finales de los 90. Chasis de metal oscuro
   con biseles de 1px auténticos (claro arriba-izquierda, oscuro abajo-derecha,
   como los controles de Win95), y un display de LEDs hundido con máscara de
   puntos. El LED va en rojo: es de época (los displays de segmentos baratos
   eran rojos) y es el color de la marca, así que no hay que elegir.

   El chasis es OSCURO EN LOS DOS TEMAS a propósito: una radio es un objeto
   oscuro. Es honestidad física, no preferencia estética.

   Tres casas, un solo mundo: panel en el header (escritorio), ventana flotante
   (/social/radio.php), y la barra .utils-bar transformada (móvil).
   ------------------------------------------------------------------------ */

.rd {
    /* El aparato define sus propios colores: no hereda los del tema porque no
       es una superficie del sitio, es un objeto encima de él. */
    --rd-face:    #23272F;   /* cara del chasis */
    --rd-face-hi: #33384252; /* bisel claro */
    --rd-face-lo: #0C0E12;   /* bisel oscuro */
    /* El display es un LCD DE CALCULADORA, no un panel de LEDs. Segmentos
       oscuros sobre pantalla verde-gris: se lee muchisimo mejor que rojo
       emisivo sobre negro (medido: el rojo apagado daba 1,47:1) y es lo que
       hace un aparato de verdad con pantalla de cristal liquido. */
    --rd-glass:   #A8B29A;   /* el cristal */
    --rd-glass-hi:#BAC3AC;   /* su brillo de arriba */
    --rd-seg:     #171C16;   /* segmentos encendidos */
    --rd-seg-off: #98A48C;   /* segmentos en reposo (el fantasma del LCD) */
    --rd-hole:    #0E1114;   /* huecos hundidos del chasis (rail del fader) */
    --rd-led:     #FF3B54;   /* solo para el punto de estado y el ecualizador */
    --rd-led-dim: #5A1622;
    --rd-ink:     #C9CFDA;   /* texto del chasis */
    --rd-ink-dim: #949DAB;   /* 5,47:1 sobre el chasis (antes 4,03, no pasaba) */
}

/* ─── El disparador del header ──────────────────────────────────────────── */
/* Antes: cápsula gris con un emoji. Ahora: el borde del aparato asoma en el
   header, y cuando suena tiene barras de ecualizador. */
.rd-trigger {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px 5px 9px;
    background: linear-gradient(180deg, #2C313B, #1C2027);
    border: 1px solid var(--rd-face-lo);
    border-top-color: #3A4150;
    border-radius: 7px;
    color: var(--rd-ink); font-weight: 800; font-size: 12.5px;
    letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    box-shadow: inset 0 1px 0 #3A4150, 0 1px 2px rgba(0, 0, 0, .35);
}
.rd-trigger:hover { background: linear-gradient(180deg, #343A46, #21262E); color: #fff; }
.rd-trigger:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); }
.rd-trigger:focus-visible { outline: 2px solid var(--rd-led); outline-offset: 2px; }
.rd-trigger svg { flex: 0 0 auto; }

/* Barras de ecualizador: el aviso de "está sonando". Tres barras, alturas y
   tiempos distintos para que no lata al unísono (eso delata la animación). */
.rd-eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.rd-trigger.is-playing .rd-eq { display: inline-flex; }
.rd-trigger.is-playing .rd-ico-off { display: none; }
.rd-eq i {
    display: block; width: 2px; background: var(--rd-led); border-radius: 1px;
    animation: rd-eq 900ms ease-in-out infinite alternate;
}
.rd-eq i:nth-child(1) { height: 5px;  animation-duration: 640ms; }
.rd-eq i:nth-child(2) { height: 11px; animation-duration: 880ms; }
.rd-eq i:nth-child(3) { height: 7px;  animation-duration: 520ms; }
@keyframes rd-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

/* ─── El chasis ─────────────────────────────────────────────────────────── */
.rd-set {
    background: linear-gradient(180deg, #2A2F38 0%, var(--rd-face) 22%, #1B1F26 100%);
    border: 1px solid var(--rd-face-lo);
    border-top-color: #3E4554;
    border-left-color: #343B49;
    border-radius: 8px;
    padding: 9px;
    box-shadow: inset 0 1px 0 #414958, inset 0 -1px 0 #0A0C10;
}

/* Panel colgando del header */
.rd-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 302px; max-width: 88vw; z-index: 1200;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
    border-radius: 8px;
}
.rd-panel[hidden] { display: none; }

/* Franja de título: las rayas finas del titlebar de la época. */
.rd-bar {
    display: flex; align-items: center; gap: 7px;
    margin: -2px -2px 8px; padding: 4px 6px;
    background: repeating-linear-gradient(180deg, #454D5E 0 1px, #2B313B 1px 3px);
    border-radius: 5px 5px 3px 3px;
    font-size: 10px; font-weight: 900; letter-spacing: .09em;
    text-transform: uppercase; color: #E7EBF2;
}
.rd-bar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rd-led-dim); flex: 0 0 auto; }
.rd-set.is-playing .rd-bar-dot { background: var(--rd-led); box-shadow: 0 0 5px var(--rd-led); }
.rd-bar-sp { margin-left: auto; }

/* ─── El display: LCD de calculadora ───────────────────────────────────── */
/* DOT-MATRIX, no segmentos. Se probo con una tipografia de 14 segmentos
   (DSEG) y Alex la rechazo con razon: "el texto esta ilegible... por ejemplo la
   letra X de radio exitosa". Es un defecto conocido de esos display -- X, M, W
   y K se dibujan con diagonales y salen ilegibles.
   Un dot-matrix es igual de retro (autoradios, carteles de autobus, equipos de
   musica de los 90) pero usa LETRAS DE VERDAD hechas de puntos, asi que se lee.
   El truco: una rejilla que tapa el hueco entre puntos por encima de todo, de
   modo que el texto de debajo queda pixelado sin tocar sus formas. */

.rd-lcd {
    position: relative; overflow: hidden;
    height: 28px; border-radius: 2px;
    /* Cristal con su brillo arriba y el bisel del hueco donde va encajado. */
    background: linear-gradient(175deg, var(--rd-glass-hi) 0%, var(--rd-glass) 38%, #9DA790 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .22);
    display: flex; align-items: center;
}
/* La rejilla del dot-matrix: va ENCIMA del texto y pinta el hueco entre
   puntos con el color del cristal, asi que las letras quedan hechas de puntos.
   Paso de 2px: con el texto a 15px da unas 7 filas de puntos por letra, que es
   justo la matriz 5x7 clasica y el limite en que sigue leyendose. */
.rd-lcd::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle at center, transparent 54%, var(--rd-glass) 62%);
    background-size: 2px 2px;
}

/* La cinta: lleva DOS copias del nombre para que el bucle no tenga costura. */
.rd-lcd-track { display: flex; align-items: center; width: max-content; }
.rd-lcd-txt {
    /* El espacio entre repeticiones lo calcula radio.js: con un nombre corto
       un hueco fijo dejaria ver vacio a mitad del bucle (ver pintaLed). */
    white-space: nowrap; padding-right: var(--rd-gap, 2.2em);
    /* Cara normal del sitio: la rejilla de arriba es la que pone el caracter
       retro, y asi las letras conservan su forma legible. Mayusculas porque un
       display de aparato no tiene minusculas. */
    font-family: var(--font, 'Inter', system-ui, sans-serif);
    font-size: 15px; font-weight: 800; letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--rd-seg);
}
.rd-lcd:not(.is-scroll) .rd-lcd-txt { padding-left: 8px; }
/* La segunda copia solo existe cuando corre el bucle. */
.rd-lcd:not(.is-scroll) .rd-lcd-txt + .rd-lcd-txt { display: none; }

/* El desplazamiento: el unico momento autoral del aparato. Dos copias y
   -50% = el nombre vuelve a entrar exactamente donde salio, sin salto.
   Corre mientras suena; en pausa se queda quieto para poder leerlo. */
.rd-lcd.is-scroll .rd-lcd-track {
    animation: rd-scroll var(--rd-dur, 12s) linear infinite;
}
@keyframes rd-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* En reposo los segmentos no desaparecen: se quedan en gris, que es lo que
   hace un LCD de verdad (y asi se sigue leyendo que emisora tienes elegida). */
.rd-lcd.is-off .rd-lcd-txt { color: var(--rd-seg-off); }

/* ─── Botonera ──────────────────────────────────────────────────────────── */
.rd-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.rd-btn {
    flex: 0 0 auto; width: 30px; height: 28px; padding: 0;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #3A404C, #262B34);
    border: 1px solid #14171D; border-top-color: #4A5261;
    border-radius: 4px; cursor: pointer; color: var(--rd-ink);
    box-shadow: inset 0 1px 0 #4E566600;
}
.rd-btn:hover { background: linear-gradient(180deg, #454C5A, #2E343E); color: #fff; }
/* Se hunde de verdad al pulsar: el bisel se invierte. */
.rd-btn:active {
    background: linear-gradient(180deg, #1F242B, #2A3038);
    border-top-color: #14171D; border-bottom-color: #4A5261;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.rd-btn:focus-visible { outline: 2px solid var(--rd-led); outline-offset: 1px; }
.rd-btn:disabled { opacity: .4; cursor: default; }
/* El atributo hidden de los SVG no bastaba: algo de main.css le da a svg un
   display explicito, y eso gana sobre el display:none del navegador. Se veian
   el triangulo y la pausa apilados. Visto en la primera inspeccion. */
.rd-btn svg[hidden] { display: none; }

/* Objetivo de toque: los botones chicos miden 26-30px porque la barra movil
   solo puede crecer 6px, pero un dedo necesita 44. Se agranda el AREA sin
   tocar el tamanio visible, que es justo para lo que existe este truco.
   PRODUCT.md lo pide: se usa en un telefono barato, con el pulgar. */
.rd-mobile .rd-btn, .rd-mobile .rd-back { position: relative; }
.rd-mobile .rd-btn::after, .rd-mobile .rd-back::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.rd-btn-play {
    width: 40px; height: 32px;
    background: linear-gradient(180deg, #E03A52, #A50C24);
    border-color: #6B0716; border-top-color: #F2687C; color: #fff;
}
.rd-btn-play:hover { background: linear-gradient(180deg, #EE4A61, #B81029); }
.rd-btn-play:active { background: linear-gradient(180deg, #8E0A1F, #B81029); }

/* Fader de volumen: el control del navegador no pertenece a ningún sistema de
   diseño, así que se viste entero — raíl hundido y tirador biselado. */
.rd-vol { flex: 1; min-width: 46px; height: 28px; margin: 0; background: none;
          -webkit-appearance: none; appearance: none; cursor: pointer; }
.rd-vol:focus-visible { outline: 2px solid var(--rd-led); outline-offset: 1px; border-radius: 3px; }
.rd-vol::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: var(--rd-hole); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
}
.rd-vol::-moz-range-track {
    height: 6px; border-radius: 3px;
    background: var(--rd-hole); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
}
.rd-vol::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 11px; height: 20px; margin-top: -7px; border-radius: 2px;
    background: linear-gradient(180deg, #4A515F, #2A303A);
    border: 1px solid #12151A; border-top-color: #5A6272;
}
.rd-vol::-moz-range-thumb {
    width: 11px; height: 20px; border-radius: 2px;
    background: linear-gradient(180deg, #4A515F, #2A303A);
    border: 1px solid #12151A; border-top-color: #5A6272;
}

/* ─── Estados de texto ──────────────────────────────────────────────────── */
.rd-note {
    margin-top: 7px; font-size: 10.5px; line-height: 1.35;
    color: var(--rd-ink-dim); display: flex; align-items: center; gap: 5px;
}
.rd-note b { color: var(--rd-ink); font-weight: 700; }
.rd-note.is-err { color: #FF8A9B; }
/* Aviso de "estás escuchando en la ventana aparte" */
.rd-away { display: none; padding: 6px 2px 2px; font-size: 11px; color: var(--rd-ink); }
.rd-set.is-away .rd-away { display: block; }
.rd-set.is-away .rd-row, .rd-set.is-away .rd-lcd { display: none; }
/* El boton de desacoplar vive en .rd-bar, no en .rd-row, asi que seguia
   clicable con la ventana ya abierta: un segundo clic abria otra y dejaba un
   intervalo de vigilancia duplicado. */
.rd-set.is-away [data-rd-popout] { display: none; }

/* Lista de emisoras: reemplaza al <select> del navegador, que era la pieza que
   más delataba que esto era un formulario. */
.rd-list {
    max-height: 168px; overflow-y: auto; margin-top: 8px;
    background: #16191F; border: 1px solid #0D0F13; border-radius: 4px;
    scrollbar-width: thin; scrollbar-color: #454D5E #16191F;
}
.rd-list::-webkit-scrollbar { width: 9px; }
.rd-list::-webkit-scrollbar-track { background: #101317; }
.rd-list::-webkit-scrollbar-thumb { background: #3A414F; border: 2px solid #101317; border-radius: 5px; }
.rd-list[hidden] { display: none; }
.rd-item {
    display: block; width: 100%; text-align: left;
    padding: 6px 9px; border: 0; background: none; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--rd-ink);
    border-bottom: 1px solid #1E222A;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-item:hover { background: #262C36; color: #fff; }
.rd-item:focus-visible { outline: 2px solid var(--rd-led); outline-offset: -2px; }
.rd-item[aria-current="true"] { background: #3A1420; color: var(--rd-led); }
.rd-item[aria-current="true"]::before { content: '▸ '; }

/* ─── Móvil: la barra se convierte en el aparato ────────────────────────── */
/* Idea del usuario, y es la correcta: .utils-bar ya es una tira de lecturas
   pequeñas, o sea ya es un panel de instrumentos. Las cápsulas salen
   deslizándose y el aparato entra en el mismo sitio. */
@media (max-width: 899px) {
    .utils-bar { position: relative; transition: background .2s ease; }
    .utils-bar.rd-on { background: #1B1F26; border-bottom-color: #0C0E12; overflow: visible; }
    .utils-bar.rd-on .utils-bar-chip { display: none; }
    .rd-mobile { display: none; width: 100%; align-items: center; gap: 6px; }
    .utils-bar.rd-on .rd-mobile { display: flex; animation: rd-slide-in .26s cubic-bezier(.2,.8,.3,1); }
    .rd-mobile .rd-lcd { flex: 1; min-width: 0; height: 26px; }
    .rd-mobile .rd-lcd-txt { font-size: 13.5px; }
    .rd-back {
        flex: 0 0 auto; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
        background: none; border: 1px solid #343B49; border-radius: 4px;
        color: var(--rd-ink-dim); cursor: pointer;
    }
    .rd-back:hover { color: #fff; border-color: #4A5261; }
    @keyframes rd-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    /* En móvil el panel del header no se usa: la barra es la casa. Y el
       disparador tampoco, porque tener dos puertas a lo mismo en una pantalla
       de 390px es gastar el header para nada. */
    .rd-panel { display: none !important; }
    .radio-wrap { display: none; }
}

/* ─── La ventana flotante ───────────────────────────────────────────────── */
/* /social/radio.php. Sobrevive a la navegación, que es el punto. */
body.rd-window {
    margin: 0; padding: 7px; background: #15181D;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.rd-window .rd-set { border-radius: 6px; }
body.rd-window .rd-list { max-height: 104px; }

/* El play late cuando venías escuchando de la página anterior: es el "seguir
   escuchando" hecho señal en vez de solo texto. */
.rd-pulse { animation: rd-pulse 1.5s ease-in-out infinite; }
@keyframes rd-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 84, .55); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 59, 84, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rd-eq i { animation: none; }
    .rd-lcd.is-scroll .rd-lcd-txt { animation: none; padding-left: 10px; }
    .utils-bar.rd-on .rd-mobile { animation: none; }
    .rd-pulse { animation: none; }
}