/* Todas as regras @media para responsividade */
/* (Substitua o primeiro @media em responsive.css por este) */

@media screen and (max-width: 1100px) {
    /* Mostra o ícone do menu hambúrguer */
    /* --- Estilos Corrigidos para o Menu Hambúrguer --- */
    /* --- Estilos Corrigidos e Precisos para o Menu Hambúrguer --- */
    .menu-toggle {
        display: flex; 
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
        position: relative; /* Define um contexto de posicionamento */
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--cor-fundo);
        border-radius: 3px;
        position: absolute; /* Permite controle exato da posição */
        left: 2.5px; /* Centraliza a barra horizontalmente (30px - 25px) / 2 */
        transition: all 0.3s ease-in-out;
    }

    /* Posição inicial das três barras */
    .bar:nth-child(1) {
        top: 6px;
    }
    .bar:nth-child(2) {
        top: 13px;
    }
    .bar:nth-child(3) {
        top: 20px;
    }

    /* Animação para o 'X' quando o menu está ativo */
    .menu-toggle.active .bar:nth-child(1) {
        top: 13px; /* Move para a posição central */
        transform: rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0; /* Barra do meio desaparece */
    }

    .menu-toggle.active .bar:nth-child(3) {
        top: 13px; /* Move para a posição central */
        transform: rotate(-45deg);
    }

    /* Esconde o menu por padrão, posicionando-o fora da tela */
    .nav-wrapper {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px; /* Altura do header */
        left: 0;
        width: 100%;
        background-color: var(--cor-primaria);
        padding: 20px 0;
        transform: translateX(-100%); /* Começa escondido à esquerda */
        transition: transform 0.3s ease-in-out;
        z-index: 999;
    }

    /* Quando ativo, o menu desliza para dentro da tela */
    .nav-wrapper.active {
        transform: translateX(0);
    }

    /* Ajusta os itens do menu para o layout vertical */
    .main-nav, .header-right {
        flex-direction: column;
        width: 100%;
        gap: 20px;
        align-items: center;
    }
    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }
    .main-nav ul li {
        padding: 12px 0;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
    }
    .social-icons {
        margin-top: 15px;
        color: var(--cor-fundo);
    }

    /* Comportamento do Dropdown no Mobile */
    .main-nav .dropdown-menu {
        position: static;
        display: none; /* Escondido por padrão */
        background-color: rgba(0,0,0,0.2);
        box-shadow: none;
        width: 100%;
    }
    .main-nav .dropdown.open .dropdown-menu {
        display: block; /* Mostra o submenu quando clicado (via JS) */
    }
}

@media screen and (max-width: 768px) {
    .hero-content h1 { font-size: 2.5rem; }
    .lanchonete-container { flex-direction: column; }
    #carrinho-sidebar { width: 100%; position: static; margin-top: 40px; }
    .login-page-container { flex-direction: column; }
    .profile-edit-grid { grid-template-columns: 1fr; }
    .dashboard-header { flex-direction: column; gap: 15px; }
    .campaign-grid { grid-template-columns: 1fr; }
    .campaign-donation-card { position: static; }
    .transparency-details { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; /* Colunas do rodapé empilhadas */ text-align: center;}
    .footer-social { margin-bottom: 20px; }
}

@media screen and (max-width: 480px) {
    .container { width: 95%; }
    .hero-content h1 { font-size: 2rem; }
    .baluartes-grid, .user-grid-admin, .blog-grid { grid-template-columns: 1fr; }
    .curso-card { flex: 0 0 180px; width: 180px; }
}

/* ==========================================================================
   RESPONSIVO: DASHBOARD E ÁREA DE CURSOS (NOVO)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- Ajustes Dashboard (Busca e Avisos) --- */
    .busca-container {
        max-width: 100%; /* Ocupa a largura total */
        margin-bottom: 30px; /* Menos margem */
    }

    #caixa-busca {
        padding: 15px 20px; /* Padding um pouco menor para telas pequenas */
        font-size: 1rem;
    }

    .avisos-section {
        padding: 20px; /* Reduz padding interno */
        margin: 20px 0;
        border-left-width: 4px; /* Borda lateral um pouco mais fina */
    }

    .avisos-section h3 {
        font-size: 1.2rem;
    }

    /* --- Ajustes Cards de Curso (Carousel) --- */
    .curso-card {
        flex: 0 0 180px; /* Cards menores no celular para ver mais itens ao deslizar */
        width: 180px; 
    }

    .curso-card img {
        height: 240px; /* Ajusta a altura da imagem proporcionalmente */
    }

    .curso-card h4 {
        font-size: 0.95rem; /* Fonte do título do card levemente menor */
        padding: 30px 10px 10px 10px;
    }

    /* --- Ajustes Ver Curso (Cinema Mode Mobile) --- */
    .course-view-container {
        padding: 20px 15px; /* Reduz drasticamente o padding lateral para ganhar espaço */
        margin-top: 20px;
        border: none; /* Remove borda lateral para parecer app nativo */
        box-shadow: none; /* Remove sombra pesada no mobile */
        background-color: transparent; /* Integra com o fundo no mobile */
    }

    .course-title {
        font-size: 1.8rem; /* Reduz título gigante */
        line-height: 1.2;
        margin-bottom: 20px;
        text-align: center; /* Centraliza no mobile fica mais elegante */
    }

    .video-container {
        border-radius: 8px; /* Cantos menos arredondados para maximizar área */
        margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Sombra mais leve */
    }

    /* --- Barra de Ações (Botões empilhados) --- */
    .course-actions {
        flex-direction: column; /* Empilha os botões */
        padding: 15px;
        gap: 15px;
        background-color: rgba(255,255,255,0.05); /* Fundo mais sutil */
        border-radius: 8px;
    }

    .course-actions .botao-progresso,
    .course-actions .botao-destaque {
        width: 100%; /* Botões ocupam largura total (fácil de tocar com o dedo) */
        justify-content: center; /* Centraliza ícone e texto */
        padding: 15px; /* Área de toque maior */
    }

    /* --- Descrição e Comentários --- */
    .course-description {
        padding: 20px;
        font-size: 1rem;
    }

    .comment-item {
        padding: 15px;
        border-left-width: 3px;
    }

    .comment-header {
        flex-direction: column; /* Autor em cima, data embaixo */
        align-items: flex-start;
        gap: 5px;
    }
    
    .comment-actions {
        justify-content: space-between; /* Espalha os botões de ação */
        margin-top: 15px;
    }
}

/* Ajustes finos para telas muito pequenas (iPhone SE, Galaxy Fold fechado) */
@media screen and (max-width: 380px) {
    .curso-card {
        flex: 0 0 150px;
        width: 150px;
    }
    .curso-card img {
        height: 200px;
    }
}