/* Xtrema.fm Player CSS (subset basado en la web original) */

/* VARIABLES (mismas que la web original) */
:root {
    --pink: #ff1493;
    --pink-90: #e61284;
    --pink-rgb: 255, 20, 147;
    --blue: #00aeef;
    --blue-90: #009dd7;
    --blue-rgb: 0, 174, 239;
    --fluor: #ecfd23;
    --fluor-rgb: 236, 253, 35;
    --ink: #0f0f1a;
    --ink-rgb: 15, 15, 26;
    --white: #ffffff;
}

/* FONTS (desde /fonts/ como en xtrema.fm) */
@font-face {
    font-family: core-sans-regular;
    src: url(/fonts/coresansc-45regular-webfont.eot);
    src: url(/fonts/coresansc-45regular-webfont.eot?#iefix) format("embedded-opentype"),
         url(/fonts/coresansc-45regular-webfont.woff2) format("woff2"),
         url(/fonts/coresansc-45regular-webfont.woff) format("woff"),
         url(/fonts/coresansc-45regular-webfont.ttf) format("truetype"),
         url(/fonts/coresansc-45regular-webfont.svg#coresansc-45regular) format("svg");
}

@font-face {
    font-family: core-sans-bold;
    src: url(/fonts/coresansc-65bold-webfont.eot);
    src: url(/fonts/coresansc-65bold-webfont.eot?#iefix) format("embedded-opentype"),
         url(/fonts/coresansc-65bold-webfont.woff2) format("woff2"),
         url(/fonts/coresansc-65bold-webfont.woff) format("woff"),
         url(/fonts/coresansc-65bold-webfont.ttf) format("truetype"),
         url(/fonts/coresansc-65bold-webfont.svg#core_sans_c65_bold) format("svg");
}

/* Aplicar fuentes al player */
.player-container,
.player-container * {
    font-family: core-sans-regular, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Botones base estilo Xtrema */
.btn-pink {
    color: var(--white);
    background-color: var(--pink);
    border-color: var(--pink);
}

.btn-pink:hover,
.btn-pink:focus {
    color: var(--pink);
    border-color: var(--pink);
    background-color: var(--white);
}

.btn-blue {
    color: var(--white);
    background-color: var(--blue);
    border-color: var(--blue);
}

.btn-blue:hover,
.btn-blue:focus {
    color: var(--blue);
    border-color: var(--blue);
    background-color: var(--white);
}

/* Contenedor principal del player fijo al footer */
.player-container {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--ink);
    border-top: 2px solid var(--pink);
    box-shadow: 0 -5px 20px -5px rgba(var(--ink-rgb), 0.5);
    color: var(--white);
}

/* Botón principal play/stop y otros botones de control */
.player-container .player-button {
    height: 4rem;
    width: 4rem;
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out !important;
    border: none !important;
    background-color: var(--ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.player-container .player-button:focus-visible,
.player-container .player-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.player-container .player-button.stop {
    color: var(--white);
    background-color: var(--ink);
}

.player-container .player-button.play {
    color: var(--white);
    background-color: var(--pink);
}

.player-container .player-button.stop:hover,
.player-container .player-button.stop:focus {
    color: var(--white);
    background-color: var(--pink);
}

/* Cover / carátula */
.player-cover-desktop {
    display: flex;
    align-items: center;
}

.player-cover-img {
    height: 4rem;
    width: 4rem;
    background-image: url("/img/no_artwork.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Bloque de programa */
.player-container .player-show {
    line-height: 1rem;
    color: var(--white);
    background-color: var(--ink);
    padding: 0 1rem;
}

.player-container .player-show-title {
    text-transform: uppercase;
    color: var(--pink);
    margin: 0;
    font-family: core-sans-bold, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
}

.player-container .player-show-dj {
    color: var(--white);
    margin: 0;
    font-size: 0.9rem;
}

/* Canción */
.player-container .player-song-desktop {
    line-height: 1rem;
    padding: 0 1rem;
}

.player-song-title {
    text-transform: uppercase;
    color: var(--blue);
    margin: 0;
    font-family: core-sans-bold, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
}

.player-song-artist {
    color: var(--white);
    margin: 0;
    font-size: 0.9rem;
}

/* Botón "Ahora / Antes" vertical:
 * - altura del botón adaptada al texto (height:auto)
 * - ancho fijo (4rem) que al rotar coincide con el alto completo visual
 */
#playing-history-desktop {
    transform: rotate(-90deg);
    border: 0;
    margin: 0 -20px;
    width: 4rem;
    height: auto;
    background-color: var(--pink);
    color: var(--white);
    padding: 2px 0;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Volumen */
.player-container .player-volume {
    height: 1rem;
    max-width: 220px;
}

/* Slider color rosa */
.form-range::-webkit-slider-thumb {
    background: var(--pink);
}

.form-range::-moz-range-thumb {
    background: var(--pink);
}

.form-range::-ms-thumb {
    background: var(--pink);
}

/* Layout responsivo básico (sin depender de Bootstrap) */
.player-inner {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    gap: 0.75rem;
    box-sizing: border-box;
}

.player-inner-left,
.player-inner-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-inner-left {
    flex: 1 1 auto;
    min-width: 0;
}

.player-inner-right {
    flex: 0 0 auto;
}

/* Para que título/programa no rompan layout */
.player-song-desktop,
.player-show {
    min-width: 0;
}

.player-song-title,
.player-song-artist,
.player-show-title,
.player-show-dj {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive: ocultar algunos elementos en móvil si hace falta */
@media (max-width: 920px) {
    #playing-history-desktop,
    .player-cover-desktop,
    .player-volume {
        display: none !important;
    }

    .player-inner {
        padding: 0.5rem 0.5rem;
    }
}

/* Contenedor del plugin en WP */
#xtrema-fm-player-footer {
    position: relative;
    z-index: 999;
}