/* =============================================
   pages/index-fresh-hero.css
   Inicio, parte 1/3: sistema de bandas base, hero, reproductor
   en vivo y el modal "Pide tu cancion". Dividido desde
   index-fresh.css (fase de reorganizacion de arquitectura CSS,
   2026-08-13) -- mismo contenido, sin cambios de valores.
   Sigue en pages/index-fresh-content.css.
   ============================================= */

/* =========================================================
   HOME (index.php) — cuarta iteracion visual: sistema de
   "bandas" tipo trailer de consola (inspirado en la cartilla
   de marketing de PlayStation). Cada seccion es una banda a
   todo lo ancho (edge-to-edge) en uno de tres tonos —
   canvas oscuro, canvas claro o azul de marca — y el cambio de
   color ENTRE bandas es el unico divisor: no hay chrome
   decorativo (ni blobs, ni glass, ni sombras en reposo) entre
   capitulos. Tipografia editorial en peso 300 para titulares,
   botones siempre en pildora, tarjetas siempre a 8px de radio.
   Ver seccion "Tokens" abajo para el mapeo de la paleta.
   ========================================================= */

.home-main {
    /* --- Tokens de la banda (alcance: solo dentro de home-main) --- */
    --ps-primary: #0070d1;
    --ps-primary-pressed: #0064b7;
    --ps-primary-active: #004d8d;

    --ps-canvas-dark: #000000;
    --ps-surface-dark-elevated: #121314;
    --ps-surface-dark-card: #181818;
    --ps-canvas-light: #ffffff;
    --ps-surface-soft: #f3f3f3;
    --ps-surface-card: #f5f7fa;
    --ps-hairline-light: #f3f3f3;
    --ps-hairline-dark: rgba(229, 229, 229, 0.2);

    --ps-ink: #000000;
    --ps-body-light: rgba(0, 0, 0, 0.6);
    --ps-mute-light: #6b6b6b;
    --ps-ash-light: #cccccc;
    --ps-on-dark: #ffffff;
    --ps-body-dark: rgba(255, 255, 255, 0.7);
    --ps-mute-dark: rgba(229, 229, 229, 0.55);
    --ps-ash-dark: #4d4d4d;
    --ps-link-light: #0064b7;
    --ps-link-dark: #53b1ff;

    --ps-radius-sm: 4px;
    --ps-radius-md: 8px;
    --ps-radius-lg: 16px;
    --ps-radius-full: 9999px;

    --ps-section: var(--space-9);

    display: block;
    background: var(--ps-canvas-dark);
}

/* --- Banda full-bleed: el fondo llega hasta el borde de la
       ventana, el contenido se centra en un carril de 1280px. --- */
.ps-band {
    padding-block: var(--ps-section, var(--space-9));
    padding-inline: 48px;
}

.ps-band-inner {
    max-width: 1280px;
    margin-inline: auto;
}

.ps-band--dark {
    background: var(--ps-canvas-dark);
    color: var(--ps-on-dark);
}

.ps-band--light {
    background: var(--ps-canvas-light);
    color: var(--ps-ink);
}

.ps-band--blue {
    background: var(--ps-primary);
    color: var(--ps-on-dark);
}

/* Titulares editoriales en peso 300 (la voz de marca del sistema). */
.home-main h1,
.home-main h2,
.home-main h3,
.home-main .section-title {
    font-weight: 300;
    line-height: 1.25;
}

.home-main .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: var(--space-2);
    color: var(--ps-primary);
}

.home-main .section-eyebrow::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    background: var(--ps-primary);
    border-radius: var(--ps-radius-full);
}

.ps-band--blue .section-eyebrow,
.ps-band--blue .section-eyebrow::before {
    color: var(--ps-on-dark);
    background: var(--ps-on-dark);
}

.home-main .section-title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    letter-spacing: 0.1px;
}

.home-main .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}

.home-main .section-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
}

.ps-band--light .section-link { color: var(--ps-link-light); }
.ps-band--dark .section-link,
.ps-band--blue .section-link { color: var(--ps-link-dark); }

.home-main .section-link i { width: 16px; height: 16px; }

/* --- 1. HERO: banda oscura, texto a la izquierda, reproductor
       a la derecha. Sin blob decorativo (el sistema no admite
       gradientes de adorno fuera de la banda "ON PLAYSTATION"). --- */
.ps-band--hero {
    padding-top: 176px;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas:
        "copy copy"
        "comments player";
    gap: var(--space-8);
    align-items: start;
}

.home-hero-copy {
    grid-area: copy;
}

.home-live-comments {
    grid-area: comments;
}

.home-player {
    grid-area: player;
}

.home-main .pulse-dot {
    background: var(--ps-primary);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ps-primary) 55%, transparent);
}

/* Los destinos del widget de sugerencias (ver index-fresh-footer.css,
   .home-scroll-tip) dejan espacio para la navbar fija al saltar directo
   con el ancla. */
#parrilla-del-dia,
#nuestras-voces,
#podcasts-originales,
#proximos-eventos {
    scroll-margin-top: 100px;
}

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    border-radius: var(--ps-radius-full);
    border: 1px solid color-mix(in srgb, var(--ps-primary) 45%, transparent);
    background: color-mix(in srgb, var(--ps-primary) 16%, transparent);
    color: var(--ps-on-dark);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.324px;
    margin-bottom: var(--space-4);
}

.home-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.375rem);
    letter-spacing: -0.1px;
    margin-bottom: var(--space-4);
}

.home-hero h1 .text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ps-on-dark);
    font-weight: 600;
}

.home-hero-subtitle {
    color: var(--ps-body-dark);
    margin: 0 0 var(--space-7);
    line-height: 1.5;
    font-size: 1.125rem;
    letter-spacing: 0.1px;
}

.home-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.home-hero-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ps-on-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.125rem;
    letter-spacing: 0.4px;
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .home-hero-links a:hover {
        border-color: var(--ps-on-dark);
    }
}

/* --- Comentarios en vivo: misma fila que el reproductor, debajo del
       eslogan de extremo a extremo (ver .home-hero grid-template-areas).
       Mismo lenguaje visual que .home-player (tarjeta plana, radio 8px,
       sin sombra en reposo). --- */
.home-comments-card {
    border-radius: var(--ps-radius-md);
    background: var(--ps-surface-dark-card);
    overflow: hidden;
}

.home-comments-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--ps-hairline-dark);
}

.home-comments-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-weight: 600;
    font-size: 1rem;
}

/* Invitación a pedir canción, junto al título: abre el mismo modal de
   #songRequestOpen que ya arma el mensaje de WhatsApp (ver
   inc/components/modal-song-request.php y assets/js/pages/index.js). Reset
   de <button> para que se vea como el texto suelto que era antes (no compite
   visualmente con la pastilla verde "En línea") y envuelve a su propia línea
   si el ancho no alcanza, en vez de amontonarse. */
.home-comments-tag {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--ps-mute-dark);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color var(--duration-fast, 160ms) var(--ease-out, ease-out);
}

.home-comments-tag:hover,
.home-comments-tag:focus-visible {
    color: var(--ps-primary);
}

.home-comments-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--ps-radius-full);
    background: color-mix(in srgb, #22c55e 16%, transparent);
    color: #22c55e;
    font-size: 0.75rem;
    font-weight: 600;
}

.home-comments-status .pulse-dot {
    background: #22c55e;
    box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 55%, transparent);
}

.home-comments-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ps-mute-dark);
    font-size: 0.875rem;
    font-weight: 600;
}

.home-comments-count i {
    width: 16px;
    height: 16px;
}

.home-comments-list {
    list-style: none;
    margin: 0;
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-height: 320px;
    overflow-y: auto;
}

.home-comment {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Separador sutil entre comentarios: sin una marca de "aquí termina uno y
   empieza el siguiente" el bloque completo (avatar+texto) se sentía una
   sola masa de texto aunque hubiera gap. */
.home-comment + .home-comment {
    padding-top: var(--space-4);
    border-top: 1px solid var(--ps-hairline-dark);
}

.home-comment-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ps-radius-full);
    background: color-mix(in srgb, var(--ps-primary) 30%, transparent);
    color: var(--ps-on-dark);
    font-size: 0.75rem;
    font-weight: 700;
}

.home-comment-body {
    min-width: 0;
    flex: 1 1 auto;
}

.home-comment-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.home-comment-name {
    font-size: 0.9375rem;
    font-weight: 600;
}

.home-comment-time {
    flex: 0 0 auto;
    color: var(--ps-mute-dark);
    font-size: 0.75rem;
}

.home-comment-text {
    display: block;
    color: var(--ps-body-dark);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-top: var(--space-2);
    word-break: break-word;
}

.home-comments-form {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-top: 1px solid var(--ps-hairline-dark);
}

.home-comments-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 var(--space-4);
    border-radius: var(--ps-radius-full);
    border: 1px solid var(--ps-hairline-dark);
    background: var(--ps-surface-dark-elevated);
    color: var(--ps-on-dark);
    font: inherit;
    font-size: 0.9375rem;
}

.home-comments-input::placeholder {
    color: var(--ps-mute-dark);
}

.home-comments-input:focus {
    outline: 2px solid var(--ps-primary);
    outline-offset: 1px;
}

.home-comments-send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ps-radius-full);
    background: var(--ps-primary);
    color: var(--ps-on-dark);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.home-comments-send i {
    width: 18px;
    height: 18px;
}

.home-comments-send:hover { background: var(--ps-primary-pressed); }
.home-comments-send:active { background: var(--ps-primary-active); transform: scale(0.94); }

.home-comments-hint {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--ps-mute-dark);
    font-size: 0.8125rem;
    margin: 0;
}

/* El hint hace de zona de error del formulario: en rojo cuando el envío falla. */
.home-comments-hint.is-error {
    color: var(--ps-danger, #ef4444);
}

/* Estado vacío (nadie ha comentado en la franja horaria actual). */
.home-comments-empty {
    padding: var(--space-5) var(--space-6);
    margin: 0;
    color: var(--ps-mute-dark);
    font-size: 0.875rem;
    text-align: center;
}

/* El nombre va en su propia línea; comentario + botón comparten la de abajo. */
.home-comments-form {
    flex-wrap: wrap;
}

.home-comments-input--name {
    flex: 1 1 100%;
    height: 40px;
}

/* Comentario recién enviado, aún sin confirmar por el servidor. */
.home-comment.is-pending {
    opacity: 0.55;
}

/* Entrada de comentarios nuevos llegados por polling. */
@keyframes home-comment-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.home-comment.is-fresh {
    animation: home-comment-in var(--duration-fast, 160ms) var(--ease-out, ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .home-comment.is-fresh { animation: none; }
}

@media (max-width: 860px) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "copy"
            "comments"
            "player";
    }
}

/* --- Reproductor: tarjeta plana (sin blur ni sombra en reposo),
       radio 8px, sobre la banda oscura. --- */
.home-player {
    padding: var(--space-7) var(--space-6);
    border-radius: var(--ps-radius-md);
    background: var(--ps-surface-dark-card);
}

/* Fila superior: controles a la izquierda (ancho natural) y portada del
   programa al aire llenando el resto de la tarjeta. object-fit: contain
   (en vez de cover) para que un PNG con transparencia (como el logo) se
   ajuste completo y sin recorte, mostrando el fondo de la tarjeta a
   traves de el en vez de una caja de color detras. */
.home-player-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-6);
}

.home-player-controls {
    flex: 0 0 auto;
}

/* Enlace "Conoceme": la foto del locutor al aire lleva a su biografia en
   pages/equipo.php (ver index.php, #onair-host-link). Hereda el layout que
   antes tenia el <img> directamente. */
.home-player-cover-link {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    max-height: 220px;
    display: block;
    border-radius: var(--ps-radius-sm);
    outline-offset: 3px;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.home-player-cover {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .home-player-cover-link:hover {
        opacity: 0.86;
    }
}

.home-player-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ps-primary);
}

.home-player-station {
    font-size: 1.25rem;
    font-weight: 600;
    margin: var(--space-1) 0 var(--space-5);
}

.home-player-play {
    width: 72px;
    height: 72px;
    border-radius: var(--ps-radius-full);
    background: var(--ps-primary);
    color: var(--ps-on-dark);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: var(--space-5);
    transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.home-player-play:hover { background: var(--ps-primary-pressed); }
.home-player-play:active { background: var(--ps-primary-active); transform: scale(0.96); }

.home-player-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 28px;
    margin-bottom: var(--space-5);
}

.home-player-wave span {
    width: 4px;
    background: var(--ps-primary);
    border-radius: 3px;
    opacity: 0.5;
    height: 20%;
    animation: home-wave 1.2s ease-in-out infinite;
}

.home-player-wave span:nth-child(2) { animation-delay: 0.1s; }
.home-player-wave span:nth-child(3) { animation-delay: 0.2s; }
.home-player-wave span:nth-child(4) { animation-delay: 0.3s; }
.home-player-wave span:nth-child(5) { animation-delay: 0.4s; }
.home-player-wave span:nth-child(6) { animation-delay: 0.5s; }
.home-player-wave span:nth-child(7) { animation-delay: 0.6s; }

@keyframes home-wave {
    0%, 100% { height: 20%; opacity: 0.4; }
    50% { height: 100%; opacity: 1; }
}

.home-player-volume {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--ps-mute-dark);
    margin-bottom: var(--space-6);
}

.home-player-volume input[type="range"] {
    max-width: 160px;
    accent-color: var(--ps-primary);
}

.home-player-onair {
    border-top: 1px solid var(--ps-hairline-dark);
    padding-top: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

/* Columna de texto "Suena ahora / programa / locutora": ocupa el ancho
   disponible y deja la foto del locutor a su derecha. */
.home-player-onair-text {
    flex: 1 1 auto;
    min-width: 0;
}

.home-player-onair span {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps-mute-dark);
    margin-bottom: 4px;
}

.home-player-onair strong {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
}

.home-player-onair p {
    color: var(--ps-body-dark);
    font-size: 0.875rem;
    margin-top: 2px;
}

/* Boton "Pide tu cancion": vive junto al programa al aire, discreto hasta
   que se necesita (borde sutil en vez de relleno solido). */
.home-player-request {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border-radius: var(--ps-radius-full);
    border: 1px solid color-mix(in srgb, var(--ps-primary) 55%, transparent);
    background: transparent;
    color: var(--ps-on-dark);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.home-player-request i {
    width: 16px;
    height: 16px;
}

@media (hover: hover) and (pointer: fine) {
    .home-player-request:hover {
        border-color: var(--ps-primary);
        background: color-mix(in srgb, var(--ps-primary) 16%, transparent);
    }
}

/* Contenedor de la foto del locutor: a la derecha del texto del programa. */
.home-player-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
    flex-shrink: 0;
}

/* Tarjeta del locutor: foto cuadrada grande con nombre y enlace al perfil */
.home-player-host-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.home-player-host-card:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.home-player-host-card:active {
    transform: scale(0.98);
}

.home-player-host-card.is-empty {
    display: none;
}

/* Foto cuadrada del locutor */
.home-player-host-card img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--ps-primary);
    flex-shrink: 0;
}

/* Nombre del locutor debajo de la foto */
.home-player-host-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: var(--ps-on-dark);
    line-height: 1.3;
    max-width: 120px;
    word-wrap: break-word;
}

/* --- Modal "Pide tu cancion" (inc/components/modal-song-request.php) ---
   Sigue el mismo patron de dialogo que announcement-modal / roster-modal
   (overlay + tarjeta centrada), con tokens globales de base.css para que
   funcione igual sin depender del alcance de .home-main. */
.song-request-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: var(--z-modal, 1000);
}

.song-request-modal.is-open {
    display: block;
}

.song-request-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(8px);
}

.song-request-modal-card {
    position: relative;
    width: min(480px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    margin: 24px auto;
    overflow-y: auto;
    padding: 28px 24px 26px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-lg, 18px);
    background: #0b1220;
    color: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.44);
}

.song-request-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    cursor: pointer;
}

.song-request-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan-glow, #00f2ff);
}

.song-request-eyebrow i { width: 14px; height: 14px; }

.song-request-modal-head h2 {
    font-size: 1.5rem;
    margin: 8px 0 6px;
}

.song-request-modal-head p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.song-request-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.song-request-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.song-request-field input,
.song-request-field textarea {
    font: inherit;
    font-weight: 500;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    resize: vertical;
}

.song-request-field input::placeholder,
.song-request-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.song-request-field input:focus,
.song-request-field textarea:focus {
    outline: 2px solid var(--cyan-glow, #00f2ff);
    outline-offset: 1px;
}

.song-request-error {
    min-height: 1em;
    color: #60a5fa;
    font-size: 0.825rem;
    font-weight: 600;
}

/* Estilos propios (no reutiliza .home-btn): este modal vive fuera de
   .home-main en el DOM, asi que no hereda sus variables --ps-*. */
.song-request-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-full, 999px);
    background: var(--primary-blue, #007bff);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-base, 200ms) var(--ease-out);
}

.song-request-submit:hover {
    background: color-mix(in srgb, var(--primary-blue, #007bff) 85%, black);
}

body.light-theme .song-request-modal-card {
    background: #ffffff;
    color: var(--ps-ink, #0b1220);
    border-color: rgba(15, 23, 42, 0.12);
}

body.light-theme .song-request-modal-head p {
    color: rgba(15, 23, 42, 0.62);
}

body.light-theme .song-request-field {
    color: rgba(15, 23, 42, 0.72);
}

body.light-theme .song-request-field input,
body.light-theme .song-request-field textarea {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
    color: #0b1220;
}

body.light-theme .song-request-modal-close {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.14);
    color: #0b1220;
}

@media (max-width: 640px) {
    .song-request-modal-card {
        width: calc(100% - 24px);
        padding: 24px 18px 20px;
    }
}

/* En pantallas estrechas la fila "texto + foto" no cabe lado a lado:
   la foto vuelve a colocarse debajo del texto. */
@media (max-width: 480px) {
    .home-player-onair {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-player-action {
        justify-content: flex-start;
    }

    .home-player-host-card {
        align-items: flex-start;
    }
}