/**
 * Estilos para corregir la adaptación del reproductor en móvil y tablet
 */

/* Asegurar que el contenedor global no se corte */
#proradio-global {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* Correcciones para móvil (hasta 768px) */
@media only screen and (max-width: 768px) {
    /* Contenedor del reproductor */
    #proradio-playercontainer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Contenedor qtmplayer */
    #qtmplayer-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Controles del reproductor */
    #qtmplayer-controls {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Capa de control */
    .qtmplayer__controllayer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-wrap: nowrap;
    }
    
    /* Sección básica del reproductor */
    .qtmplayer__basic {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
    
    /* Botón de play */
    .qtmplayer__play {
        flex-shrink: 0;
        min-width: 60px;
        width: 60px;
    }
    
    /* Datos de la canción */
    .qtmplayer__songdata {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        padding: 8px 10px !important;
        max-width: calc(100% - 120px);
    }
    
    /* Título y artista */
    .qtmplayer__title,
    .qtmplayer__artist {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
        font-size: 13px !important;
        line-height: 1.2em !important;
    }
    
    /* Botón de abrir */
    .qtmplayer__openbtn {
        flex-shrink: 0;
        min-width: 50px;
        width: 50px;
    }
    
    /* Sección avanzada (popup móvil) */
    .qtmplayer__advanced {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    /* Contenedor de portada */
    .qtmplayer__covercontainer {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        margin: 40px auto 20px auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Portada */
    .qtmplayer__cover {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 100% !important;
        position: relative;
        overflow: visible;
    }
    
    /* Imagen dentro de la portada */
    .qtmplayer__cover img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center;
    }
    
    /* Datos de canción en modo avanzado */
    .qtmplayer__songdatam {
        padding: 0 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Acciones del reproductor */
    .qtmplayer__actions {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    /* Botones de acción */
    .qtmplayer__prev,
    .qtmplayer__next,
    .qtmplayer__playmob,
    .qtmplayer__cart {
        flex-shrink: 0;
        min-width: 50px;
    }
    
    /* Contenedor de track */
    .qtmplayer__trackcontainer {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    /* Track */
    .qtmplayer__track {
        width: 100%;
        max-width: 100%;
    }
    
    /* Tiempo */
    .qtmplayer__time,
    .qtmplayer__length {
        font-size: 10px;
        position: relative;
        left: 0;
        right: 0;
    }
}

/* Correcciones para tablet (768px - 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Contenedor del reproductor */
    #proradio-playercontainer {
        width: 100%;
        max-width: 100%;
    }
    
    /* Capa de control */
    .qtmplayer__controllayer {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Sección básica */
    .qtmplayer__basic {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Datos de la canción */
    .qtmplayer__songdata {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        max-width: calc(100% - 180px);
    }
    
    /* Título y artista */
    .qtmplayer__title,
    .qtmplayer__artist {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* Contenedor de portada en tablet */
    .qtmplayer__covercontainer {
        width: 100%;
        max-width: 100%;
        padding: 20px;
        margin: 50px auto 20px auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Portada en tablet */
    .qtmplayer__cover {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-top: 100% !important;
        position: relative;
        overflow: visible;
    }
    
    /* Imagen dentro de la portada en tablet */
    .qtmplayer__cover img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center;
    }
}

/* Correcciones adicionales para pantallas muy pequeñas */
@media only screen and (max-width: 480px) {
    .qtmplayer__songdata {
        padding: 6px 8px !important;
        max-width: calc(100% - 110px);
    }
    
    .qtmplayer__title,
    .qtmplayer__artist {
        font-size: 12px !important;
    }
    
    .qtmplayer__play {
        min-width: 50px;
        width: 50px;
    }
    
    .qtmplayer__openbtn {
        min-width: 40px;
        width: 40px;
    }
    
    /* Contenedor de portada en pantallas pequeñas */
    .qtmplayer__covercontainer {
        padding: 15px;
        margin: 35px auto 15px auto;
    }
    
    /* Portada en pantallas pequeñas */
    .qtmplayer__cover {
        max-width: 100%;
        padding-top: 100% !important;
    }
    
    /* Imagen dentro de la portada en pantallas pequeñas */
    .qtmplayer__cover img {
        object-fit: contain !important;
        object-position: center;
    }
}

/* Asegurar que no haya overflow horizontal */
@media only screen and (max-width: 1024px) {
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    #proradio-global {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .qtmplayer {
        max-width: 100vw;
        overflow-x: hidden;
    }
}