/* Musincante — tema Bootstrap 5 */

:root {

    --bs-primary: #1E40AF;

    --bs-primary-rgb: 30, 64, 175;

    --bs-warning: #FBBF24;

    --bs-warning-rgb: 251, 191, 36;

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --bs-body-bg: #F8FAFC;

    --bs-link-color: #1E40AF;

    --bs-link-hover-color: #1E3A8A;

    --bs-border-radius: 0.75rem;

    --bs-border-radius-lg: 1rem;

}



.btn-primary {

    --bs-btn-bg: #1E40AF;

    --bs-btn-border-color: #1E40AF;

    --bs-btn-hover-bg: #1E3A8A;

    --bs-btn-hover-border-color: #1E3A8A;

    --bs-btn-focus-shadow-rgb: 251, 191, 36;

}



.btn-warning {

    --bs-btn-color: #0F172A;

    --bs-btn-bg: #FBBF24;

    --bs-btn-border-color: #FBBF24;

    --bs-btn-hover-bg: #F59E0B;

    --bs-btn-hover-border-color: #F59E0B;

}



.btn-ghost {

    background: transparent;

    border: none;

    color: var(--color-text-muted, #64748B);

}

.btn-ghost:hover {

    background: rgba(251, 191, 36, 0.15);

    color: var(--bs-primary);

}

.btn-ghost.active { color: var(--color-error, #EF4444); }



.navbar-musincante {

    background: #fff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);

    border-bottom: 2px solid #E2E8F0;

}

.navbar-musincante .navbar-brand {

    font-weight: 700;

    color: var(--bs-primary) !important;

}

.navbar-musincante .navbar-brand i { color: var(--bs-warning); }

.navbar-musincante .nav-link {

    font-weight: 500;

    color: #64748B;

    border-radius: 0;

    padding: 0.55rem 0.85rem !important;

    border-bottom: 3px solid transparent;

    margin-bottom: -2px;

    background: transparent !important;

    transition: color 0.2s, border-color 0.2s;

}

.navbar-musincante .nav-link:hover {

    color: var(--bs-primary);

}

.navbar-musincante .nav-link.active {

    color: var(--bs-primary);

    font-weight: 600;

    border-bottom-color: var(--bs-warning);

}



@media (min-width: 992px) {

    .navbar-musincante .navbar-collapse {

        display: flex !important;

        flex-wrap: nowrap;

        align-items: center;

    }

    .navbar-musincante .navbar-nav-center {

        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        flex-direction: row;

        gap: 0.15rem;

    }

}



.nav-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--bs-primary) 60%, var(--bs-warning) 100%);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 0.8rem;

}



.mc-modal-content {

    border-top: 4px solid var(--bs-warning) !important;

    border-radius: var(--bs-border-radius-lg) !important;

}

.mc-modal-content .modal-title i.text-warning { color: var(--bs-warning) !important; }

.mc-select-list .list-group-item:hover {

    background: rgba(251, 191, 36, 0.12);

}

.mc-select-list .list-group-item:focus {

    background: rgba(251, 191, 36, 0.18);

}



.cat-card {

    transition: transform 0.2s, box-shadow 0.2s;

    border-left: 3px solid transparent;

}

.cat-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 0.5rem 1rem rgba(30, 64, 175, 0.12) !important;

    border-left-color: var(--bs-warning);

}



.song-cover-sm {

    width: 48px;

    height: 48px;

    border-radius: 0.5rem;

    background: linear-gradient(135deg, var(--bs-primary), #3B82F6);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    overflow: hidden;

    flex-shrink: 0;

    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.35);

}

.song-cover-sm img { width: 100%; height: 100%; object-fit: cover; }



.song-list .list-group-item { border-left: none; border-right: none; }

.song-list .list-group-item:first-child { border-top: none; }

.song-list .list-group-item:last-child { border-bottom: none; }



.main-content.has-player { padding-bottom: 88px; }



.btn-block, .w-100-btn { width: 100%; }



.page-header h1 { font-size: 1.75rem; font-weight: 700; }

.page-header p { color: #64748B; margin-bottom: 0; }



.text-accent { color: var(--bs-warning) !important; }

.bg-accent { background-color: var(--bs-warning) !important; }