/* Estilos responsivos para dispositivos móveis */

/* Regras gerais para dispositivos móveis */
@media (max-width: 768px) {
    /* Tema mobile mais claro */
    html, body { background-color: #0f1115 !important; color: #ffffff; }
    .bg-black { background-color: #0f1115 !important; }
    .bg-black\/50 { background-color: rgba(0,0,0,.30) !important; }
    .hover\:bg-black\/70:hover { background-color: rgba(0,0,0,.45) !important; }
    .from-black { --tw-gradient-from: rgba(17,24,39,.85) !important; }
    .to-transparent { --tw-gradient-to: rgba(255,255,255,0) !important; }
    header.fixed { background-image: linear-gradient(to bottom, rgba(17,24,39,.85), transparent) !important; }
    .slider-prev, .slider-next { background-color: rgba(0,0,0,.30) !important; }
    .slider-prev:hover, .slider-next:hover { background-color: rgba(0,0,0,.45) !important; }

    /* Ajustes para a barra lateral */
    aside.fixed {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    aside.fixed.show {
        transform: translateX(0);
    }
    
    /* Remover margem esquerda no conteúdo principal quando a sidebar está oculta */
    main.ml-64 {
        margin-left: 0;
    }
    
    /* Adicionar botão de menu para dispositivos móveis */
    .mobile-menu-btn {
        display: block;
    }
    
    /* Ajustes para botões */
    button, .btn, a.btn, input[type="submit"] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        height: auto;
        min-height: 40px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Evitar que botões fiquem amassados */
    .control-btn, .play-btn, .volume-btn, .fullscreen-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
        margin: 0.25rem;
    }
    
    /* Correção específica para o botão play/pause do player de áudio */
    .play-pause-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Ajustes para grids e layouts */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Ajustes para modais */
    .modal-content {
        width: 90% !important;
        max-width: 90% !important;
    }
}

/* Regras específicas para dispositivos muito pequenos */
@media (max-width: 480px) {
    /* Ajustes para botões em telas muito pequenas */
    button, .btn, a.btn, input[type="submit"] {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        min-height: 36px;
    }
    
    /* Ajustes para o botão play/pause em telas muito pequenas */
    .play-pause-btn {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
    
    /* Ajustes para controles do player */
    .audio-controls {
        gap: 10px;
        padding: 15px;
    }
    
    .player-controls {
        flex-direction: column;
    }
    
    .control-row {
        width: 100%;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }
    
    /* Melhorar espaçamento em formulários */
    form .space-y-4 {
        margin-bottom: 1rem;
    }
}

/* Navbar inferior (mobile) */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #0b0b0f;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9998;
}
.mobile-bottom-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.mobile-bottom-nav a i { font-size: 20px; }
.mobile-bottom-nav a.active { color: #dc2626; }
@media (min-width: 769px) { .mobile-bottom-nav { display: none; } }