/* ==========================================
                   1. VARIÁVEIS GLOBAIS
                   ========================================== */
                :root {
                    --verde-ifmg: #009a44;
                    --verde-escuro: #007236;
                    --cinza-escuro: #333333;
                    --cinza-medio: #666666;
                    --cinza-claro: #f2f2f2;
                    --branco: #ffffff;
                    --azul: #0066cc;
                    --amarelo: #ffcc00;
                    --laranja: #ff9900;
                    --vermelho: #cc0000;
                    --preto: #000000;
                    --sombra: 0 4px 6px rgba(0, 0, 0, 0.1);
                    --transicao: all 0.3s ease;
                }
                
                /* ==========================================
                   2. ESTILOS BASE
                   ========================================== */


                /* RESET E CONFIGURAÇÕES BÁSICAS Segoe UI */
                body {
                    font-family: 'open_sansextrabold', Tahoma, Geneva, Verdana, sans-serif;
                    margin: 0;
                    padding: 0;
                    background-color: var(--cinza-claro);
                    color: var(--cinza-escuro);
                    line-height: 1.6;
                }
                                
                /* ==========================================
                   3. COMPONENTES DE CONTROLE
                   ========================================== */
                
                /* CONTAINER PRINCIPAL */
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 10 20px;
                }
                
                /* WRAPPER DOS CONTROLES */
                .controls-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    margin-bottom: 30px;
                    width: 100%;
                }
                
                /* BARRA DE BUSCA */
                .search-container {
                    width: 100%;
                }
                
                .search-box {
                    position: relative;
                }
                
                .search-box input {
                    width: 100%;
                    padding: 12px 15px 12px 40px;
                    border: 1px solid var(--cinza-medio);
                    border-radius: 6px;
                    font-size: 16px;
                    transition: var(--transicao);
                    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
                    box-sizing: border-box;
                }
                
                .search-box input:focus {
                    border-color: var(--verde-ifmg);
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(0, 154, 68, 0.2);
                }
                
                .search-box i {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--cinza-medio);
                }
                
                /* CONTROLES SECUNDÁRIOS */
                .secondary-controls {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    flex-wrap: wrap;
                    width: 100%;
                }
                
                /* ORDENAÇÃO */
                .sort-container {
                    min-width: 200px;
                    max-width: 300px;
                    margin: 0;
                }
                
                .sort-box {
                    position: relative;
                }
                
                .sort-box i {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--cinza-medio);
                    z-index: 1;
                }
                
                .sort-box select {
                    width: 100%;
                    padding: 12px 15px 12px 40px;
                    border: 1px solid var(--cinza-medio);
                    border-radius: 6px;
                    font-size: 16px;
                    transition: var(--transicao);
                    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
                    appearance: none;
                    background-color: var(--branco);
                    cursor: pointer;
                }
                
                .sort-box select:focus {
                    border-color: var(--verde-ifmg);
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(0, 154, 68, 0.2);
                }
                
                /* LINHA DE FILTROS */
                .filters-row {
                    display: flex;
                    gap: 15px;
                    align-items: center;
                    flex-wrap: wrap;
                }
                
                /* CONTAINER DOS FILTROS */
                .filter-container {
                    flex: 1;
                    min-width: 200px;
                    max-width: 250px;
                }
                
                /* ESTILO COMUM PARA TODAS AS CAIXAS DE FILTRO */

.film-genres {
    margin-top: 8px;
}

.genre-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 12px;
    background-color: #f0f0f0;
    font-size: 0.9em;
    color: #666;
}

                .filter-box {
                    position: relative;
                }
                
                .filter-box i {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--cinza-medio);
                    z-index: 1;
                }
                
                .filter-box select {
                    width: 100%;
                    padding: 12px 15px 12px 40px;
                    border: 1px solid var(--cinza-medio);
                    border-radius: 6px;
                    font-size: 16px;
                    transition: var(--transicao);
                    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
                    appearance: none;
                    background-color: var(--branco);
                    cursor: pointer;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 15px center;
                    background-size: 15px;
                }
                
                .filter-box select:focus {
                    border-color: var(--verde-ifmg);
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(0, 154, 68, 0.2);
                }
                        
                /* CONTADOR DE RESULTADOS */
                .results-counter {
                    background-color: var(--verde-ifmg);
                    color: var(--branco);
                    padding: 8px 15px;
                    border-radius: 20px;
                    font-size: 14px;
                    box-shadow: var(--sombra);
                    white-space: nowrap;
                    margin-left: auto;
                }
                
                .results-counter.sem-resultados {
                    background-color: var(--vermelho);
                }
                
                .results-counter.com-resultados {
                    background-color: var(--verde-ifmg);
                }
                
                #filmsCount {
                    font-weight: bold;
                    font-size: 16px;
                    transition: all 0.3s ease;
                    display: inline-block;
                }
                
                #filmsCount.updated {
                    transform: scale(1.2);
                    color: var(--amarelo);
                }
                
                /* ==========================================
                   4. FILTROS DE GÊNERO
                   ========================================== */
                
                /* CONTAINER DE FILTROS */
                .genre-filter-container {
                    background-color: var(--branco);
                    padding: 15px;
                    border-radius: 8px;
                    box-shadow: var(--sombra);
                    margin-bottom: 30px;
                }
                
                .genre-filter-title {
                    font-weight: bold;
                    font-size: 16px;
                    color: var(--cinza-escuro);
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                
                .genre-tags {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                }
                
                .genre-tag {
                    display: inline-block;
                    padding: 6px 12px;
                    background-color: var(--cinza-claro);
                    color: var(--cinza-escuro);
                    border-radius: 20px;
                    font-size: 14px;
                    cursor: pointer;
                    transition: var(--transicao);
                    border: 1px solid var(--cinza-medio);
                }
                
                .genre-tag:hover {
                    background-color: var(--verde-ifmg);
                    color: var(--branco);
                    border-color: var(--verde-escuro);
                }
                
                .genre-tag.active {
                    background-color: var(--verde-ifmg);
                    color: var(--branco);
                    border-color: var(--verde-escuro);
                    font-weight: bold;
                }
                
                /* ==========================================
                   5. GRID DE FILMES
                   ========================================== */
                
                /* GRID PRINCIPAL */
                .film-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                    gap: 30px;
                    margin-bottom: 30px;
                }
                
                /* CARTÃO DE FILME */
                .film-card {
                    background-color: var(--branco);
                    border-radius: 8px;
                    overflow: hidden;
                    box-shadow: var(--sombra);
                    transition: var(--transicao);
                    cursor: pointer;
                    position: relative;
                }
                
                .film-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
                }
                
                /* POSTER DO FILME */
                .film-poster {
    width: auto;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
                   /*transform: translateX(50%); /* Começa mostrando a borda direita */*/
    transition: transform 0.3s ease; 
                  
}

.film-poster-container {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--verde-ifmg);
}
                
                .film-poster-controls,
.modal-poster-controls  {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                   opacity: 0;
    transition: opacity 0.3s ease;
                }

.film-poster-container:hover .film-poster-controls,
.modal-poster-container:hover .modal-poster-controls {
    opacity: 1;
}

                .film-poster-control,
.modal-poster-control {
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    border: none;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    margin: 0 10px;
                    transition: var(--transicao);
                    z-index: 2;
                }
                
                .film-poster-control:hover,
.modal-poster-control:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                    transform: scale(1.1);
                }
                
                .film-card:hover .film-poster {
                    opacity: 0.9;
                }
                
                /* INFORMAÇÕES DO FILME */
                .film-info {
                    padding: 15px;
                }
                
                .film-title {
                    font-weight: bold;
                    margin: 0 0 5px 0;
                    color: var(--verde-escuro);
                    font-size: 16px;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    min-height: 2.6em;
                }
                
                .film-meta {
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    color: var(--cinza-medio);
                }
                
                .film-badge {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background-color: transparent;
                    padding: 0;
                    z-index: 1;
                }
                
                /* CLASSIFICAÇÕES */
                .classification {
                    position: absolute; /* Garante que z-index funcione */
                    top: 15px;
                    right: 15px;
                    z-index: 2; /* Aumenta o z-index */
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 36px;
                    height: 36px;
                    border-radius: 4px;
                    font-weight: bold;
                    font-size: 22px;
                    /* margin-right removido pois position:absolute o torna irrelevante */
                    color: white;
                    border: 1px solid rgba(0,0,0,0.1);
                }
                
                .classification.L { 
                    background-color: var(--verde-ifmg);
                }
                
                .classification.ten { 
                    background-color: var(--azul);
                }
                
                .classification.twelve { 
                    background-color: var(--amarelo);
                    color: var(--cinza-escuro);
                }
                
                .classification.fourteen { 
                    background-color: var(--laranja);
                }
                
                .classification.sixteen { 
                    background-color: var(--vermelho);
                }
                
                .classification.eighteen { 
                    background-color: var(--preto);
                }
                        
                /* ==========================================
                   6. MODAL E DETALHES
                   ========================================== */
                
                /* MODAL BASE */
                .modal {
                    display: none;
                    position: fixed;
                    z-index: 1000;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.8);
                    overflow: auto;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
                
                .modal.show {
                    opacity: 1;
                }
                
                /* CONTEÚDO DO MODAL */
                .modal-content {
                    background-color: var(--branco);
                    margin: 5% auto;
                    padding: 30px;
                    width: 70%;
                    max-width: 800px;
                    border-radius: 8px;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
                    position: relative;
                    transform: translateY(-20px);
                    transition: transform 0.3s ease;
                }
                
                .modal.show .modal-content {
                    transform: translateY(0);
                }
                
                .close {
                    position: absolute;
                    top: 15px;
                    right: 25px;
                    font-size: 28px;
                    font-weight: bold;
                    color: var(--cinza-medio);
                    cursor: pointer;
                    transition: color 0.2s;
                }
                
                .close:hover {
                    color: var(--verde-escuro);
                }
                
                /* POSTER NO MODAL */
                .modal-poster {
    width: auto;
    height: 100%;
    position: absolute;
    right: 0; /* Adicionar esta linha */
    top: 0;
    transition: transform 0.5s ease;
    object-fit: cover; /* Adicionar esta linha */
}

.modal-poster-container {
    float: left;
    width: 200px;
    height: 280px;
    position: relative;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 3px solid var(--verde-ifmg);
    border-radius: 4px;
    box-shadow: var(--sombra);
}
                
                .modal-poster-controls {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    pointer-events: none;
                }
                
                .modal-poster-control {
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    border: none;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    pointer-events: auto;
                    margin: 0 5px;
                    transition: var(--transicao);
                    z-index: 2;
                }
                
                .modal-poster-control:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                    transform: scale(1.1);
                }
                
                /* DETALHES DO MODAL */
                .modal-title {
                    color: var(--verde-escuro);
                    margin-top: 0;
                    border-bottom: 2px solid var(--cinza-claro);
                    padding-bottom: 10px;
                    margin-bottom: 15px;
                    font-size: 24px;
                }
                
                .modal-details {
                    margin-bottom: 20px;
                }
                
                .modal-details p {
                    margin: 8px 0;
                    font-size: 15px;
                    line-height: 1.5;
                }
                
                .modal-details strong {
                    color: var(--cinza-escuro);
                }
                
                /* SINOPSE E TEMAS */
                .modal-synopsis {
                    clear: both;
                    line-height: 1.6;
                }
                
                .modal-synopsis h3 {
                    color: var(--verde-escuro);
                    margin-bottom: 10px;
                }
                
                .modal-synopsis p {
                    font-size: 15px;
                    line-height: 1.6;
                }
                
                .modal-themes {
                    margin: 15px 0;
                    padding: 15px;
                    background-color: var(--cinza-claro);
                    border-radius: 6px;
                }
                
                .modal-themes h3 {
                    color: var(--verde-escuro);
                    margin-top: 0;
                    margin-bottom: 10px;
                }
                
                .modal-themes .theme-tag {
                    display: inline-block;
                    background-color: var(--verde-ifmg);
                    color: white;
                    padding: 4px 8px;
                    border-radius: 4px;
                    margin-right: 5px;
                    margin-bottom: 5px;
                    font-size: 13px;
                }
                
                /* INFORMAÇÕES ADICIONAIS */
                .modal-additional {
                    margin-top: 20px;
                    padding-top: 15px;
                    border-top: 1px dashed var(--cinza-medio);
                }
                
                .modal-additional h3 {
                    color: var(--verde-escuro);
                    margin-top: 0;
                    margin-bottom: 10px;
                }
                
                .modal-additional p {
                    margin: 8px 0;
                    font-size: 15px;
                    line-height: 1.5;
                }

/* BOTÃO DE PÁGINA COMPLETA */
.modal-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--cinza-medio);
    text-align: center;
}

.btn-full-page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--verde-ifmg);
    color: var(--branco);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    /*transition: var(--transicao)*/;
  transition: background-color 0.3s ease;
}

.btn-full-page:hover {
    background-color: var(--verde-escuro);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-full-page i {
    font-size: 0.9em;
}
            
                /* ==========================================
                   7. ELEMENTOS DE PAGINAÇÃO
                   ========================================== */
                
                .pagination {
                    display: flex;
                    justify-content: center;
                    gap: 10px;
                    margin-bottom: 30px;
                    flex-wrap: wrap;
                }
                
                .pagination button {
                    padding: 8px 12px;
                    border: 1px solid var(--cinza-medio);
                    border-radius: 4px;
                    background-color: var(--branco);
                    cursor: pointer;
                    transition: var(--transicao);
                    min-width: 40px;
                }
                
                .pagination button:hover {
                    background-color: var(--cinza-claro);
                }
                
                .pagination button.active {
                    background-color: var(--verde-ifmg);
                    color: var(--branco);
                    border-color: var(--verde-escuro);
                }
                
                .pagination span {
                    padding: 8px 12px;
                    display: flex;
                    align-items: center;
                }
                        
                                
                /* ==========================================
                   9. UTILITÁRIOS E ESTADOS
                   ========================================== */
                
                /* LOADING E SKELETON */
                .loading {
                    text-align: center;
                    padding: 40px;
                    font-size: 1.2em;
                    color: var(--cinza-medio);
                }
                
                .skeleton {
                    background-color: #e0e0e0;
                    border-radius: 4px;
                    overflow: hidden;
                    position: relative;
                }
                
                .skeleton::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
                    animation: shimmer 1.5s infinite;
                }
                
                /* ESTADOS SEM RESULTADO */
                .no-results {
                    grid-column: 1 / -1;
                    text-align: center;
                    padding: 40px;
                    background: var(--branco);
                    border-radius: 8px;
                    box-shadow: var(--sombra);
                }
                
                .no-results i {
                    font-size: 40px;
                    color: var(--cinza-medio);
                    margin-bottom: 15px;
                }
                
                .no-results p {
                    margin: 0;
                    font-size: 16px;
                }
                
                /* ANIMAÇÕES */
                @keyframes shimmer {
                    0% { transform: translateX(-100%); }
                    100% { transform: translateX(100%); }
                }
                
                /* ==========================================
                   10. MEDIA QUERIES
                   ========================================== */
                
                @media (max-width: 900px) {
                    .modal-content {
                        width: 90%;
                        padding: 20px;
                    }
                    
                    .modal-poster-container {
                        float: none;
                        width: 100%;
                        height: auto;
                        max-height: 400px;
                        margin-right: 0;
                        margin-bottom: 15px;
                    }
                    
                    .film-grid {
                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
                        gap: 20px;
                    }
                    
                    .film-poster-container {
                        height: 280px;
                    }
                }
                
                @media (max-width: 768px) {
                    .secondary-controls {
                        flex-direction: column;
                        align-items: stretch;
                        width: 100%;
                    }
                
                    .sort-container {
                        max-width: none;
                        width: 100%;
                    }
                
                    .results-counter {
                        text-align: center;
                    }
                }
                
                @media (max-width: 600px) {
                    h1 {
                        font-size: 2em;
                    }
                    
                    .film-grid {
                        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                        gap: 15px;
                    }
                    
                    .film-poster-container {
                        height: 220px;
                    }
                    
                    .film-title {
                        font-size: 14px;
                    }
                    
                    .film-meta {
                        font-size: 12px;
                    }
                    
                    .pagination {
                        gap: 5px;
                    }
                    
                    .pagination button, 
                    .pagination span {
                        padding: 6px 8px;
                        min-width: 30px;
                    }
                }
                        
                /* RESPONSIVIDADE */
                @media (max-width: 768px) {
                    .filters-row {
                        flex-direction: column;
                        gap: 10px;
                    }
                
                    .filter-container {
                        width: 100%;
                        max-width: none;
                    }
                
                    .results-counter {
                        margin-left: 0;
                        text-align: center;
                        width: 100%;
                    }
                }  
/* ===========================
   11. PLANOS DE AULA NO MODAL
   =========================== */
.modal-teaching-plans,
.modal-other-materials {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.modal-teaching-plans h3,
.modal-other-materials h3 {
    color: #008445;
    margin-bottom: 15px;
}

.teaching-plan-card,
.other-material-card {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.teaching-plan-card:last-child,
.other-material-card:last-child {
    border-bottom: none;
}

.teaching-plan-card p,
.other-material-card p {
    margin: 5px 0;
}

.teaching-plan-card a,
.other-material-card a {
    color: #2196f3;
    text-decoration: none;
}

.teaching-plan-card a:hover,
.other-material-card a:hover {
    text-decoration: underline;
}


/* Ajustes para Mobile */
@media (max-width: 768px) {
    .feedback-modal-content {
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100vh - 20px);
        padding: 15px;
    }

    .feedback-button {
        bottom: 20px;
        right: 20px;
    }

    .feedback-button button {
        padding: 12px 20px;
        font-size: 14px;
    }

    .form-container iframe {
        min-height: 700px; /* aumenta a altura mínima em mobile */
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 480px) {
    .feedback-modal-content {
        margin: 5px;
        width: calc(100% - 10px);
        padding: 10px;
    }

    .form-container iframe {
        min-height: 800px; /* aumenta ainda mais a altura mínima */
    }
}



/* Ajusta botão 'Ver Mais' no modal */
.btn-ver-mais {
    display: inline-block;
    margin-top: 10px; /* Espaço acima do botão */
    margin-right: 10px; /* Espaço à direita, se houver outro botão */
    padding: 6px 12px;
    background-color: var(--verde-ifmg);
    color: white; /* Cor diferente do link padrão */
    border: 1px solid var(--verde-ifmg);
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal; /* Não negrito para diferenciar de links comuns */
    cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-ver-mais:hover {
    background-color: var(--verde-ifmg);
    color: var(--branco);
    text-decoration: none;
}

/* Ajusta container dos botões de ação no modal de planos de aula */
.modal-plan-actions {
    margin-top: 15px; /* Espaço acima do container */
    display: flex; /* Usa flexbox para alinhar botões */
    flex-wrap: wrap; /* Permite quebrar linha se não couber */
    align-items: center; /* Alinha itens verticalmente */
    gap: 10px; /* Espaço entre os botões */
}

/* Ajusta botão 'Enviar Plano' */
.btn-enviar-plano {
    /* Estilos já definidos inline, mas podemos garantir aqui se necessário */
    /* Exemplo: flex-shrink: 0; para não encolher */
}

/* Ajusta texto de colaboração */
.modal-plan-collab-text {
    font-size: 0.9em; 
    color: var(--cinza-medio);
    margin-top: 0; /* Remove margem superior padrão do <p> */
    flex-basis: 100%; /* Faz ocupar a linha inteira abaixo dos botões */
}

/* Garante que o z-index da classificação funcione */
.film-poster-container .classification {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}


/* Adiciona estilos para padronizar links e ajustar botões do modal */

/* Padroniza todos os links */
a {
    color: var(--azul); /* Cor azul padrão para links */
    text-decoration: none; /* Remove sublinhado padrão */
    font-weight: bold; /* Deixa links em negrito */
    transition: var(--transicao);
}

a:hover {
    color: var(--branco); /* Muda cor no hover */
    text-decoration: none; /* Adiciona sublinhado no hover */
}

/* Links em textos normais */
 a {
    color: #007bff; /* azul ou o padrão do seu tema */
    transition: color 0.2s;
    text-decoration: underline;
}

a:hover, a:focus {
    color: #0056b3; /* azul mais escuro, nunca branco */
}  

/* 11. SELETOR DE MODO DE VISUALIZAÇÃO */
/* ========================================== */
.view-switcher {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

.view-switcher button {
    padding: 8px 16px;
    font-size: 14px;
    border: 1px solid var(--cinza-medio);
    background-color: var(--branco);
    color: var(--cinza-escuro);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transicao);
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-switcher button:hover {
    background-color: var(--cinza-claro);
    border-color: var(--verde-ifmg);
}

.view-switcher button.active {
    background-color: var(--verde-ifmg);
    color: var(--branco);
    border-color: var(--verde-escuro);
    font-weight: bold;
}

/* 12. ESTILOS DA VISUALIZAÇÃO EM LISTA (ESTILO TABELA) */
/* ==================================================================== */

/* CONTÊINER PRINCIPAL DA LISTA */
.film-list {
    display: flex;
    flex-direction: column;
    background-color: var(--branco);
    border-radius: 8px;
    box-shadow: var(--sombra);
    overflow: hidden; /* PARA CANTOS ARREDONDADOS FUNCIONAREM */
    margin-bottom: 30px;
}

/* CABEÇALHO DA LISTA */
.list-header {
    display: flex;
    background-color: var(--verde-ifmg);
    padding: 12px 15px;
    font-weight: bold;
    color: var(--branco);
    border-bottom: 2px solid #ddd;
    font-size: 0.9em;
}

/* ITEM INDIVIDUAL DA LISTA (LINHA) */
.list-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    cursor: pointer;
}

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

.list-item:hover {
    background-color: #f5f5f5;
}

/* DEFINIÇÃO DAS COLUNAS */
.list-col {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.col-title {
    flex: 1; /* OCUPA A MAIOR PARTE DO ESPAÇO */
    min-width: 300px;
}
.col-year {
    flex-basis: 80px; /* LARGURA FIXA */
    justify-content: center;
}
.col-genre {
    flex-basis: 200px; /* LARGURA FIXA */
    flex-wrap: wrap; /* PERMITE QUE GÊNEROS QUEBREM A LINHA */
    gap: 5px;
}
.col-duration {
    flex-basis: 100px; /* LARGURA FIXA */
    justify-content: center;
}
.col-class {
    flex-basis: 60px; /* LARGURA FIXA */
    justify-content: center;
}

/* ESTILOS DOS ELEMENTOS DENTRO DAS COLUNAS */
.list-item-poster {
    width: 100px;
    height: 56px; 
    object-fit: contain; 
    background-color: #f0f0f0; 
    border-radius: 3px;
    margin-right: 15px;
    flex-shrink: 0;
}

.list-item-info {
    display: flex;
    flex-direction: column;
}

.list-item-info h4 {
    margin: 0;
    font-size: 1em;
    color: var(--verde-escuro);
}

.list-item-info p {
    margin: 2px 0 0 0;
    font-size: 0.85em;
    color: var(--cinza-medio);
}

/* AJUSTA A TAG DE CLASSIFICAÇÃO PARA A LISTA */
.list-col .classification {
    position: static; /* REMOVE O POSICIONAMENTO ABSOLUTO */
    width: 32px;
    height: 32px;
    font-size: 18px;
}

/* RESPONSIVIDADE PARA A LISTA */
@media (max-width: 900px) {
    .list-header .col-genre, .list-item .col-genre {
        display: none; /* ESCONDE A COLUNA DE GÊNERO EM TELAS MENORES */
    }
}

@media (max-width: 768px) {
    .list-header {
        display: none; /* ESCONDE O CABEÇALHO INTEIRO EM TELAS MUITO PEQUENAS */
    }
    .list-item {
        flex-wrap: wrap; /* PERMITE QUE AS COLUNAS QUEBREM A LINHA */
    }
    .col-title {
        flex-basis: 100%; /* TÍTULO OCUPA A LARGURA TODA */
        min-width: 0;
    }
    .col-year, .col-duration, .col-class {
        flex: 1; /* DISTRIBUI O ESPAÇO RESTANTE IGUALMENTE */
        flex-basis: auto;
        padding-top: 10px;
    }
}

/* 13. ESTILOS DA VISUALIZAÇÃO EM MAPA */
/* ========================================== */
#map {
    height: 75vh; /* ALTURA DO MAPA */
    min-height: 500px;
    border-radius: 8px;
    box-shadow: var(--sombra);
    z-index: 1; /* GARANTE QUE O MAPA FIQUE ACIMA DE OUTROS ELEMENTOS */
    margin-bottom: 30px;
}

/* ESTILO PARA POPUPS DE FILMES NO MAPA */
.filme-popup {
    max-width: 300px;
    padding: 10px;
}
.filme-popup h5 {
    margin: 0 0 10px 0;
    color: var(--verde-ifmg);
    font-size: 16px;
    line-height: 1.3;
}
.filme-popup p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.filme-popup .ver-mais {
    display: block; /* OCUPA A LARGURA TODA */
    background: var(--verde-ifmg);
    color: white !important; /* FORÇA A COR BRANCA */
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    transition: var(--transicao);
}
.filme-popup .ver-mais:hover {
    background: var(--verde-escuro);
    transform: translateY(-2px);
}



/* ESTILOS PARA CLUSTER DE MARCADORES 
.marker-cluster {
    background-color: rgba(0, 154, 68, 0.6);
    border-radius: 50%;
    border: 2px solid rgba(0, 154, 68, 0.8);
}
.marker-cluster div {
    background-color: rgba(0, 154, 68, 0.8);
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
}*/

/* 14. AJUSTES NA LINHA DE CONTROLES DE VISUALIZAÇÃO */
/* ==================================================================== */
.view-controls-row {
    display: flex;
    justify-content: space-between; /* ALINHA OS ITENS NAS EXTREMIDADES */
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* PERMITE QUEBRA DE LINHA EM TELAS MENORES */
    gap: 15px;
}

/* REMOVE A MARGEM DO CONTADOR QUANDO ESTÁ NESTA LINHA */
.view-controls-row .results-counter {
    margin-left: 0;
}

/* AJUSTA O SELETOR DE VISUALIZAÇÃO PARA NÃO TER MARGEM EXTRA */
.view-switcher {
    margin-bottom: 0;
}

/* 15. AJUSTES NOS MARCADORES DO MAPA */
/* ==================================================================== */

/* REMOVEMOS A REGRA ANTIGA COM 'filter' */
/* O ÍCONE SERÁ DEFINIDO VIA JAVASCRIPT */

/* ESTILOS PARA CLUSTER DE MARCADORES */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    color: var(--branco);
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* CLUSTER PEQUENO */
.marker-cluster-small {
    background-color: rgba(0, 154, 68, 0.6); /* VERDE IFMG COM TRANSPARÊNCIA */
}
.marker-cluster-small div {
    background-color: rgba(0, 154, 68, 0.8); /* VERDE IFMG MAIS SÓLIDO */
}

/* CLUSTER MÉDIO */
.marker-cluster-medium {
    background-color: rgba(0, 114, 54, 0.6); /* VERDE ESCURO COM TRANSPARÊNCIA */
}
.marker-cluster-medium div {
    background-color: rgba(0, 114, 54, 0.8); /* VERDE ESCURO MAIS SÓLIDO */
}

/* CLUSTER GRANDE */
.marker-cluster-large {
    background-color: rgba(2, 83, 16, 0.6); /* VERDE AINDA MAIS ESCURO COM TRANSPARÊNCIA */
}
.marker-cluster-large div {
    background-color: rgba(2, 83, 16, 0.8); /* VERDE AINDA MAIS ESCURO SÓLIDO */
}