/* =========================================================
   Radio Player Plugin - CSS aislado con prefijo .player-
   NO dependiente de Bootstrap ni del panel de administración
   ========================================================= */

.player-radio {
    --player-bg: #ffffff;
    --player-border: #d1d5db;
    --player-text: #111827;
    --player-text-muted: #6b7280;
    --player-accent: #111827;
    --player-accent-hover: #000000;
    --player-muted-bg: #f3f4f6;

    width: 100%;
    max-width: 520px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--player-bg);
    border: 1px solid var(--player-border);
    border-radius: 10px;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--player-text);
}

.player-radio[data-player-color] {
    --player-accent: attr(data-player-color);
}

.player-row {
    display: flex;
    align-items: center;
    gap: 16px;
    /* El arte (72px) y el botón (52px) son fijos y no encogen; sin wrap, la
       fila impone un ancho mínimo que provoca scroll horizontal en pantallas
       muy estrechas (~320px). Con wrap el botón baja si no cabe. */
    flex-wrap: wrap;
    min-width: 0;
}

.player-art {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background-color: var(--player-muted-bg);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.player-art-fallback::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, #111827 0 12%, transparent 13%),
        repeating-conic-gradient(#111827 0deg 10deg, #e5e7eb 10deg 20deg);
    mask: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 23%);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 23%);
    opacity: 0.85;
}

.player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--player-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-subtitle {
    font-size: 13px;
    color: var(--player-text-muted);
    line-height: 1.2;
}

.player-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    width: fit-content;
    margin-top: 4px;
}

.player-status-stopped {
    background-color: #e5e7eb;
    color: #4b5563;
}

.player-status-loading {
    background-color: #dbeafe;
    color: #1e40af;
}

.player-status-playing {
    background-color: #dcfce7;
    color: #166534;
}

.player-status-error {
    background-color: #fee2e2;
    color: #991b1b;
}

.player-play {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background-color: var(--player-accent);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.12s ease, background-color 0.12s ease;
    padding: 0;
}

.player-play:hover {
    background-color: var(--player-accent-hover);
    transform: scale(1.04);
}

.player-play:active {
    transform: scale(0.97);
}

.player-play:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

.player-volume-row {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--player-text-muted);
}

.player-volume {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 999px;
    background-color: var(--player-muted-bg);
    outline: none;
    cursor: pointer;
}

.player-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--player-accent);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--player-border);
    cursor: pointer;
}

.player-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--player-accent);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px var(--player-border);
    cursor: pointer;
}

.player-audio {
    display: none !important;
}