/* Arreglos para el reproductor móvil expandido */

/* Asegurar que los botones de seek sean visibles */
#seek-backward-mobile-full,
#seek-forward-mobile-full {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Asegurar que los íconos sean visibles */
#seek-backward-mobile-full svg,
#seek-forward-mobile-full svg,
#seek-backward-mobile-full i,
#seek-forward-mobile-full i {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor;
    fill: none;
}

/* Layout mejorado para los controles */
#full-player .flex.items-center.justify-center.gap-2 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 0 16px;
}

/* Todos los botones del reproductor expandido */
#full-player button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Tamaños específicos para cada botón */
#shuffle-mobile-full,
#repeat-mobile-full {
    padding: 8px;
    min-width: 40px;
    min-height: 40px;
}

#skip-back-mobile-full,
#skip-forward-full,
#seek-backward-mobile-full,
#seek-forward-mobile-full {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

#skip-back-mobile-full:hover,
#skip-forward-full:hover,
#seek-backward-mobile-full:hover,
#seek-forward-mobile-full:hover {
    background: rgba(255, 255, 255, 0.1);
}

#play-pause-full {
    padding: 16px;
    min-width: 64px;
    min-height: 64px;
    background: white;
    color: black;
}

/* Asegurar que los íconos rotate-ccw y rotate-cw se vean */
[data-lucide="rotate-ccw"],
[data-lucide="rotate-cw"] {
    display: block !important;
}

/* Debug - Para verificar si los botones están ahí */
#seek-backward-mobile-full::after,
#seek-forward-mobile-full::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
}

#seek-backward-mobile-full:active::after,
#seek-forward-mobile-full:active::after {
    border-color: rgba(168, 85, 247, 0.5);
}

/* Mejora visual para móviles */
@media (max-width: 768px) {
    #full-player .px-8.pb-8 {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 32px;
    }
    
    /* Hacer los controles más grandes en móvil */
    #seek-backward-mobile-full svg,
    #seek-forward-mobile-full svg {
        width: 24px !important;
        height: 24px !important;
    }
    
    #skip-back-mobile-full svg,
    #skip-forward-full svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Si los íconos no cargan, mostrar texto como fallback */
#seek-backward-mobile-full:empty::before {
    content: "-10";
    font-size: 14px;
    font-weight: bold;
}

#seek-forward-mobile-full:empty::before {
    content: "+10";
    font-size: 14px;
    font-weight: bold;
}

/* Animación al presionar */
#seek-backward-mobile-full:active,
#seek-forward-mobile-full:active {
    transform: scale(0.95);
    opacity: 0.8;
}