/* ==========================================
                   1. VARIÁVEIS GLOBAIS
                   ========================================== */
                /* VARIÁVEIS MOVIDAS PARA themes.css E comum.css PARA SUPORTE A TEMAS */

                /* ==========================================
                   2. ESTILOS BASE
                   ========================================== */


                /* RESET E CONFIGURAÇÕES BÁSICAS */
                body {
                    font-family: var(--fonte-corpo), '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;
                    background-color: var(--cor-fundo-secundario);
                    color: var(--cinza-medio);
                    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(--cor-secundaria);
                    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(--cor-fundo-secundario);
                    cursor: pointer;
                }

                .sort-box select:focus {
                    border-color: var(--cor-secundaria);
                    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: var(--cor-fundo-secundario);
                    font-size: 0.9em;
                    color: var(--cor-texto-suave);
                }

                .filter-box {
                    position: relative;
                }

                .filter-box i {
                    position: absolute;
                    left: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--cor-texto-suave);
                    z-index: 1;
                }

                .filter-box select {
                    width: 100%;
                    padding: 12px 15px 12px 40px;
                    border: 1px solid var(--cinza-medio);
                    color: var(--cor-texto-suave);
                    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(--cor-fundo-secundario);
                    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(--cor-secundaria);
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(0, 154, 68, 0.2);
                }

                /* CONTADOR DE RESULTADOS */
                .results-counter {
                    background-color: var(--cor-secundaria);
                    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(--cor-secundaria);
                }

                #filmsCount, #gamesCount {
                    font-weight: bold;
                    font-size: 16px;
                    transition: all 0.3s ease;
                    display: inline-block;
                }

                #filmsCount.updated, #gamesCount.updated {
                    transform: scale(1.2);
                    color: var(--amarelo);
                }

                /* ==========================================
                   4. FILTROS DE GÊNERO
                   ========================================== */

                /* CONTAINER DE FILTROS */
                .genre-filter-container {
                    background-color: var(--cor-fundo-secundario);
                    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(--cor-secundaria);
                    color: var(--fundo-secundario);
                    border-color: var(--cor-primaria);
                }

                .genre-tag.active {
                    background-color: var(--cor-secundaria);
                    color: var(--fundo-secundario);
                    border-color: var(--cor-primaria);
                    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(--fundo-secundario);
                    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;
                    /* object-fit: cover;  Faz a imagem preencher o container */
                    /*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(--cor-secundaria);*/
                }

                .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-director {
                    color: var(--cinza-medio);
                    font-size: 14px;
                    margin: 2px 0 8px 0;
                    line-height: 1.2;
                }

                .film-details {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 12px;
                    color: var(--cinza-medio);
                    margin-top: auto;
                }

                .film-duration,
                .film-year {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }

                .film-duration i,
                .film-year i {
                    font-size: 11px;
                }

                .director-link {
                    color: var(--cor-secundaria);
                    text-decoration: none;
                    transition: var(--transicao);
                }

                .director-link:hover {
                    color: var(--cor-primaria);
                    text-decoration: underline;
                }

                .film-title {
                    font-weight: bold;
                    margin: 0 0 5px 0;
                    color: var(--cor-primaria);
                    font-size: 16px;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2; /* Compatibilidade padrão */
                    -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);
                }

                /* CLASSIFICAÇÕES OBSOLETAS REMOVIDAS - AGORA USANDO IMAGENS SVG */
                /* As classificações indicativas agora são exibidas através de imagens SVG */
                /* definidas em classification-images.css */

                /* ==========================================
                   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(--cor-fundo);
                    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(--cor-primaria);
                }

                /* 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(--cor-secundaria);
                    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(--cor-primaria);
                    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(--cor-primaria);
                    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(--cor-primaria);
                    margin-top: 0;
                    margin-bottom: 10px;
                }

                .modal-themes .theme-tag {
                    display: inline-block;
                    background-color: var(--cor-secundaria);
                    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(--cor-primaria);
                    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(--cor-secundaria);
                    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(--cor-primaria);
                    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(--cor-fundo-secundario);
                    cursor: pointer;
                    color: var(--cinza-claro);
                    transition: var(--transicao);
                    min-width: 40px;
                }

                .pagination button:hover {
                    background-color: var(--cor-primaria);
                }

                .pagination button.active {
                    background-color: var(--cor-secundaria);
                    color: var(--branco);
                    border-color: var(--cinza-medio);
                }

                .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: var(--cor-fundo-secundario);
                    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(--fundo-secundario);
                    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: var(--cor-fundo-secundario);
                    border-radius: 6px;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
                }

                .modal-teaching-plans h3,
                .modal-other-materials h3 {
                    color: var(--cor-primaria);
                    margin-bottom: 15px;
                }

                .teaching-plan-card,
                .other-material-card {
                    background: var(--cor-fundo);
                    border-radius: 4px;
                    padding: 15px;
                    margin-bottom: 10px;
                    border-bottom: 1px dashed var(--cor-texto-suave);
                }

                .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: var(--cor-primaria);
                    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(--cor-secundaria);
                    color: white;
                    /* Cor diferente do link padrão */
                    border: 1px solid var(--cor-secundaria);
                    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(--cor-secundaria);
                    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: var(--cor-primaria);
                    /* cor primária do tema */
                    transition: color 0.2s;
                    text-decoration: underline;
                }

                a:hover,
                a:focus {
                   color: var(--cor-texto-suave);
                    /* cor secundária do tema */
                }

                /* 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(--cor-fundo-secundario);
                    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(--cor-secundaria);
                }

                .view-switcher button.active {
                    background-color: var(--cor-secundaria);
                    color: var(--branco);
                    border-color: var(--cor-primaria);
                    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(--cor-fundo-secundario);
                    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(--cor-secundaria);
                    padding: 12px 15px;
                    font-weight: bold;
                    color: var(--branco);
                    border-bottom: 2px solid var(--cor-cinza-medio-sistema);
                    font-size: 0.9em;
                }

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

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

                .list-item:hover {
                    background-color: var(--cor-fundo-secundario);
                }

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

                .col-title {
                    flex: 1;
                    font-size: 7px;
                    /* 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: var(--cor-fundo-secundario);
                    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(--cor-primaria);
                }

                .list-item-info p {
                    margin: 2px 0 0 0;
                    font-size: 1.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;
                    position: relative; /* ADICIONADO PARA POSICIONAMENTO RELATIVO */
                    overflow: hidden; /* ADICIONADO PARA CORTAR CONTEÚDO QUE ULTRAPASSE OS LIMITES */
                }

                /* ESTILO PARA POPUPS DE FILMES NO MAPA */
                .filme-popup {
                    max-width: 300px;
                    padding: 10px;
                }

                .filme-popup h5 {
                    margin: 0 0 10px 0;
                   color: var(--cor-texto-suave);
                    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(--cor-secundaria);
                    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(--cor-primaria);
                    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 */
                }

                /* 16. MENSAGEM DE AVISO NO MAPA */
                /* ==================================================================== */
                #map-warning {
                    position: absolute;
                    top: 10px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 1000; /* Garante que fique sobre o mapa */
                    background-color: var(--cor-amarelo-fundo-sistema); /* Amarelo claro do sistema */
                    color: var(--cor-amarelo-texto-sistema); /* Texto amarelo escuro do sistema */
                    padding: 12px 20px;
                    border-radius: 8px;
                    border: 1px solid var(--cor-amarelo-sistema); /* Borda amarela do sistema */
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                    font-size: 14px;
                    max-width: 90%;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    gap: 10px;
                }