:root {
            /* Altere este valor para o HEX exato da cor padrão do seu site */
            --cor-padrao-site: #085631; 
        }

        .select-ano-mobile { display: none; }
        .menu-links {padding: 0px 20px !important;}

       /* CSS do Filtro Efeito Sanfona (Anos) */
        .anos-accordion {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            overflow-x: auto; /* Habilita o scroll horizontal */
            padding-bottom: 12px; /* Dá espaço para a barra de rolagem não cobrir os cards */
            width: 100%; /* Limita a largura ao container pai */
            
            /* Estilização da barra de rolagem (Firefox) */
            scrollbar-width: thin;
            scrollbar-color: var(--cor-padrao-site) #f1f1f1;
        }

        /* Estilização da barra de rolagem (Chrome, Safari, Edge, Opera) */
        .anos-accordion::-webkit-scrollbar {
            height: 8px; /* Altura da barra horizontal */
        }
        .anos-accordion::-webkit-scrollbar-track {
            background: #f1f1f1; 
            border-radius: 10px;
        }
        .anos-accordion::-webkit-scrollbar-thumb {
            background: var(--cor-padrao-site); 
            border-radius: 10px;
        }
        .anos-accordion::-webkit-scrollbar-thumb:hover {
            background: #031435; /* Um tom levemente mais escuro ao passar o mouse */
        }

        .ano-card {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background: #fff;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 15px 10px;
            min-width: 80px;
            height: 120px;
            transition: all 0.3s ease;
            box-sizing: border-box;
            cursor: pointer;
            flex-shrink: 0; /* REGRA PRINCIPAL: Impede que os cards fiquem espremidos, forçando a barra de rolagem a aparecer */
        }

        .ano-card .icon-calendar {
            font-size: 20px;
            color: #d1d5db;
            margin-bottom: auto;
            align-self: center;
        }

        .ano-card .ano-texto {
            font-size: 20px;
            color: var(--cor-padrao-site);
            font-weight: 600;
            margin-top: auto;
            text-align: center;
        }

        .ano-card .btn-visualizar {
            display: none;
        }

        /* Efeito Ativo (Expandido) */
        .ano-card.active {
            background-color: var(--cor-padrao-site);
            border-color: var(--cor-padrao-site);
            flex-grow: 1; /* Ocupa o espaço disponível gerando o efeito sanfona */
            align-items: flex-start;
            padding: 15px 20px;
        }

        .ano-card.active .icon-calendar {
            color: #fff;
            align-self: flex-start;
        }

        .ano-card.active .ano-content {
            width: 100%;
            text-align: center;
            margin-top: auto;
        }

        .ano-card.active .ano-texto {
            color: #fff;
            font-size: 26px;
            display: block;
            margin-bottom: 5px;
        }

        .ano-card.active .btn-visualizar {
            display: block;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
        }

        .ano-card:hover:not(.active) {
            border-color: var(--cor-padrao-site);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        @media (max-width: 768px) {
            /* 1. Inversão do layout: joga o menu para o final */
            .grid-column-with-filters {
                display: flex !important;
                flex-direction: column-reverse; /* Conteúdo em cima, Menu embaixo */
                gap: 40px;
            }

            /* Garante que o container do menu exiba em lista */
            .menu-menu-principal-container,
            .transparencia-menu {
                display: block !important;
                width: 100%;
            }

            .select-ano-mobile { 
                display: block; /* Mostra o select no mobile */
                margin-bottom: 20px; 
            }
            .select-ano-mobile select {
                width: 100%;
                padding: 10px;
                border-radius: 5px;
                border: 1px solid #ccc;
                background-color: #fff;
                font-size: 16px;
            }

            /* 2. Reordenação do formulário SOMENTE no mobile via CSS Grid */
            .arq-list-filters-forms form {
                display: grid;
                grid-template-columns: 1fr auto; 
                gap: 15px 10px; 
                align-items: center;
            }

            .arq-list-filters-forms form label[for="busca"] {
                grid-column: 1 / 2;
                grid-row: 1;
                margin: 0;
                width: 100%;
            }
            .arq-list-filters-forms form .inputSearchTitle {
                width: 100%;
                margin: 0;
            }

            .arq-list-filters-forms form .btn-buscar-medicamento {
                grid-column: 2 / 3;
                grid-row: 1;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .arq-list-filters-forms form .select-filtro-data {
                grid-column: 1 / -1;
                grid-row: 2;
                width: 100%;
            }

            /* AJUSTE FILTRO DE DATA NO MOBILE */
            .arq-list-filters-forms form #wrapper_entre_datas {
                grid-column: 1 / -1;
                grid-row: 3;
                flex-direction: column; /* Coloca um input abaixo do outro */
                align-items: stretch !important;
                gap: 8px;
            }

            .arq-list-filters-forms form #wrapper_entre_datas input[type="date"] {
                width: 100%;
                box-sizing: border-box;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 4px;
            }

            .arq-list-filters-forms form #wrapper_entre_datas span {
                text-align: center;
                margin: 2px 0 !important;
            }

            .arq-list-filters-forms form .export-container {
                grid-column: 1 / -1;
                grid-row: 4;
            }
        }