html, body {
    font-family: 'Roboto', sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

/* Ajustes para compatibilidade com Bootstrap 5 */

/* Atualização de botões */
.btn-primary {
    color: #fff;
    background-color: #2c388a; /* Cor padrão do Bootstrap 5 */
    border-color: #2c388a; /* Cor padrão do Bootstrap 5 */
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Ajuste para o padrão do Bootstrap 5 */
}

/* Atualização de cards */
.card {
    background-color: #ffffff; /* Já é padrão */
    border: 1px solid #dee2e6; /* Substituído pelo padrão do Bootstrap 5 */
}

.card-header:first-child {
    border-radius: 0.375rem 0.375rem 0 0; /* Ajustado para o padrão do Bootstrap 5 */
}

/* Atualização de formulários */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Atualização de progress bar */
.progress-bar {
    height: 1rem; /* Ajustado para o padrão do Bootstrap 5 */
    background-color: #2c388a; /* Cor padrão do Bootstrap 5 */
}

/* Atualização de botões de controle */
.control-button {
    background: none;
    border: none;
    color: var(--bs-secondary-color); /* Usando variável padrão do Bootstrap 5 */
}

.control-button:hover {
    color: var(--bs-primary); /* Usando variável padrão do Bootstrap 5 */
}

/* Atualização de botões de reprodução */
.play-button {
    border-radius: 50%; /* Já compatível com Bootstrap 5 */
    background-color: var(--bs-primary); /* Usando variável padrão do Bootstrap 5 */
}

.play-button:hover {
    transform: scale(1.1);
    background-color: var(--bs-primary-hover); /* Usando variável padrão do Bootstrap 5 */
}

.volume-control {
    /* Substitua por utilitários do Bootstrap */
    display: flex;
    gap: 0.5rem; /* Usando utilitário padrão do Bootstrap 5 */
}

.volume-slider {
    width: 80px;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.volume-level {
    height: 100%;
    background-color: #2c388a;
    border-radius: 2px;
    width: 70%;
}

.time-info {
    color: #6c757d;
    font-size: 0.875rem;
    font-weight: 500;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

    .marquee span {
        display: inline-block;
        animation: marquee 15s linear infinite;
    }

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Correção de Visibilidade .NET 10 / Mobile */
@media (max-width: 991px) {
    /* 1. Força o corpo da página a aparecer */
    .main-panel, .content-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        padding: 1rem !important; /* Ajuste para o padrão do Bootstrap 5 */
    }

    /* 2. Força o Grid e o Carrossel (que costumam estar em .row ou .card) */
    .row, .card, .col-12, .col-md-12 {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. O Breadcrumb que só aparece a borda */
    .breadcrumb, .breadcrumb-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: transparent !important;
    }

    /* 4. O Botão Hamburger (Navbar Toggler) */
    .navbar-toggler {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
    }

    /* 5. Se o Carrossel/Grid usa animações de entrada (FadeIn), vamos anulá-las */
    .faded, .js-fadeIn, .animated {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
}
/* Previne que múltiplos backdrops travem a tela se o script bugar */
.modal-backdrop.show:nth-of-type(even) {
    display: none !important;
}