/* ============================================================
   Voces PTM OnAir — reproductor
   ============================================================ */

.onair-player {
    --onair-player-bg: var(--onair-ink, #0c1116);
    --onair-player-fg: #fff;

    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--onair-player-bg);
    color: var(--onair-player-fg);
}

/* --- Barra fija al pie --- */
.onair-player--barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .3);
}
.onair-player--barra.is-highlight {
    animation: onair-pulse 1.2s ease;
}
@keyframes onair-pulse {
    0%, 100% { box-shadow: 0 -4px 20px rgba(0, 0, 0, .3); }
    50% { box-shadow: 0 -4px 30px var(--onair-accent, #f70d28); }
}

/* Solo hace falta dejar hueco si el reproductor es la barra fija.
   La clase la pone player.js cuando comprueba qué diseño se pintó. */
body.onair-has-bar { padding-bottom: 84px; }

/* --- Dentro de la página --- */
.onair-player--inline {
    border-radius: var(--onair-radius, 14px);
}

/* --- Carátula --- */
.onair-player__cover {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
}
.onair-player__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Sin carátula, el recuadro sobra: un hueco vacío parece un error de carga. */
.onair-player.has-no-cover .onair-player__cover { display: none; }

/* --- Botón de reproducción --- */
.onair-player__toggle {
    flex: none;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: var(--onair-accent, #f70d28);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
.onair-player__toggle:hover { transform: scale(1.06); }

.onair-player__toggle-icon {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}
.onair-player.is-playing .onair-player__toggle-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
}

/* --- Textos --- */
.onair-player__texts {
    flex: 1;
    min-width: 0;
}
.onair-player__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 2px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
.onair-player__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--onair-accent, #f70d28);
    color: #fff;
    font-weight: 800;
}
.onair-player__live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.onair-player.is-playing .onair-player__live::before {
    animation: onair-blink 1.4s ease-in-out infinite;
}
@keyframes onair-blink { 50% { opacity: .25; } }

/* Con una pista suelta sonando no estamos en directo */
.onair-player.is-track .onair-player__live { display: none; }

.onair-player__station { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Marquesina: solo se mueve si el título no cabe */
.onair-player__marquee {
    overflow: hidden;
    white-space: nowrap;
}
.onair-player__title {
    margin: 0;
    display: inline-block;
    font-family: var(--onair-head, 'Barlow Condensed', sans-serif);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .01em;
}
.onair-player__marquee.is-scrolling .onair-player__title {
    animation: onair-marquee var(--onair-scroll-time, 12s) linear infinite alternate;
}
@keyframes onair-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(var(--onair-scroll, -100px)); }
}

/* --- Volumen --- */
.onair-player__volume {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.onair-player__mute {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 4px;
    font-size: 18px;
    line-height: 0;
}
.onair-player.is-muted .onair-player__mute { opacity: .4; }
.onair-player__range {
    width: 110px;
    accent-color: var(--onair-accent, #f70d28);
    cursor: pointer;
}

/* --- Apps y ventana emergente --- */
.onair-player__apps {
    flex: none;
    display: flex;
    gap: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.onair-player__apps a {
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 3px;
    padding: 4px 10px;
}
.onair-player__apps a:hover { color: #fff; border-color: #fff; }

.onair-player__popup {
    flex: none;
    color: rgba(255, 255, 255, .7);
    font-size: 18px;
    line-height: 0;
    padding: 6px;
}
.onair-player__popup:hover { color: #fff; }

/* ============================================================
   Variante de ventana emergente
   ============================================================ */
.onair-player--popup {
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
}
.onair-player--popup .onair-player__cover {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
}
.onair-player--popup .onair-player__texts { width: 100%; }
.onair-player--popup .onair-player__label { justify-content: center; }
.onair-player--popup .onair-player__title { font-size: 24px; }
.onair-player--popup .onair-player__toggle { width: 66px; height: 66px; }
.onair-player--popup .onair-player__toggle-icon { width: 28px; height: 28px; }
.onair-player--popup .onair-player__volume { width: 100%; justify-content: center; }
.onair-player--popup .onair-player__range { width: 160px; }

body.onair-popup {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--onair-ink, #0c1116);
    font-family: var(--onair-body, system-ui, sans-serif);
}
.onair-popup__inner { width: 100%; max-width: 340px; text-align: center; }
.onair-popup__home {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, .65);
    font-family: var(--onair-head, 'Barlow Condensed', sans-serif);
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.onair-popup__home:hover { color: #fff; }
.onair-popup__empty { color: rgba(255, 255, 255, .7); }

/* ============================================================
   Pantallas pequeñas
   ============================================================ */
@media (max-width: 900px) {
    .onair-player--barra .onair-player__apps { display: none; }
    .onair-player--barra .onair-player__range { width: 80px; }
}

@media (max-width: 620px) {
    .onair-player--barra { padding: 8px 12px; gap: 10px; }
    .onair-player--barra .onair-player__cover { width: 44px; height: 44px; }
    .onair-player--barra .onair-player__toggle { width: 44px; height: 44px; }
    .onair-player--barra .onair-player__range { display: none; }
    .onair-player--barra .onair-player__title { font-size: 17px; }
    .onair-player--barra .onair-player__station { display: none; }
    body.onair-has-bar { padding-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
    .onair-player__marquee.is-scrolling .onair-player__title,
    .onair-player.is-playing .onair-player__live::before,
    .onair-player--barra.is-highlight { animation: none; }
}