/* Estilos do Mini Dashboard */
            .dashboard-mini-panel {
                background-color: #f7f9fc;
                padding: 12px 18px;
                border-radius: 15px;
                margin: 15px 5px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                border: 8px solid var(--color-menu);
            }

            .dashboard-title {
                font-size: .85em;
                font-weight: bold;
                color: #333;
                margin-bottom: 8px;
                padding-bottom: 5px;
                border-bottom: 1px solid #e0e0e0;
                text-align: center;
                line-height: 1.2;
            }

            .dashboard-item {
                display: flex;
                align-items: center;
            }

            .dashboard-value {
                font-size: 1.2em;
                font-weight: bold;
                width: 30%;
                text-align: center;
            }

            .dashboard-label {
                font-size: 0.8em;
                color: #292323;
                width: 63%;
                /* Dedica 70% da largura à legenda */
                text-align: left;
                /* padding-right: 5px; */
                border-bottom: 1px solid #292323;
                line-height: 1.2;
            }
            
            .provisorio a {
                display: flex;
                font-size: .7em;
                font-style: italic;
                border: 2px outset #fff;
                padding: 10PX;
                width: fit-content;
                margin: 15px auto;
                box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
                border-radius: 6px;
            }

            .provisorio a:hover {
                color: var(--color-van); 
                background: #fff;
                font-weight: 600;
            }

            .titDenuncia {
                padding: 20px; 
                margin-bottom: 30px; 
                text-align: center; 
                border-bottom: 1px solid #ddd;
            }
            .titDenuncia p {
                margin-top: 25px; 
                font-size: 1.1em; 
                color: #fff;
            }

            .cardsDenuncias {
                display: flex; 
                gap: 10px;
            }

            .cardFormDenuncia {
                max-width: 450px; 
                margin: 0 auto; 
                padding: 30px; 
                border-radius: 15px; 
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
                background-color: #ffffff; 
                border-left: 5px solid #1D4ED8;
            }
            
            .cardFormDenuncia h3 {
                font-size: 1.5em; 
                font-weight: bold; 
                color: #1D4ED8; 
                margin-bottom: 15px;
                line-height: 1.2;
            }

            .cardFormDenuncia p {
                margin-bottom: 25px; 
                color: #333;
                line-height: 1.2;
            }

            .alinkCardDenun {
                display: inline-flex; 
                align-items: center; 
                justify-content: center; 
                padding: 12px 15px; 
                background-color: #F59E0B; 
                color: white; 
                border-radius: 8px; 
                font-weight: bold; 
                text-decoration: none; 
                height: 63%;
                transition: background-color 0.3s, transform 0.1s; 
                box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
                font-size: 1.1rem;
                line-height: 1.4;
            }

            .alinkCardsForms {
                display: inline-flex; 
                align-items: center; 
                justify-content: center; 
                padding: 12px 15px; 
                background-color: #F59E0B; 
                color: white; 
                border-radius: 8px; 
                font-weight: bold; 
                text-decoration: none; 
                height: 30%;
                /* width: max-content; */
                line-height: 1.3;
                transition: background-color 0.3s, transform 0.1s; 
                box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
            }

            .cardsNumbers0800 {
                gap: 15px;
                display: grid;
            }

            .cards0800 {
                max-width: 450px; 
                margin: 0 auto; 
                padding: 30px; 
                border-radius: 15px; 
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
                background-color: #ffffff; 
                border-left: 5px solid #1D4ED8;
            }

            .cards0800 h3 {
                font-size: 1.5em; 
                font-weight: bold; 
                color: #1D4ED8; 
                margin-bottom: 15px;
                line-height: 1.2;
            }

            .cards0800 p {
                margin-bottom: 25px; 
                color: #333;
                line-height: 1.2;
            }

            /* MODAL */
            /* Classe para o Overlay do Modal (Fundo Escuro) */
            :root {
                /* Cores de cinza (replicando um pouco o Tailwind) */
                --gray-400: #9ca3af;
                --gray-500: #6b7280;
                --gray-600: #4b5563;
                --gray-700: #374151;
                --gray-900: #111827;

            /* Cores para o Modal Ouvidoria */
                --red-50: #fef2f2;
                --red-200: #fecaca;
                --red-600: #dc2626;
                --red-700: #b91c1c;
                --red-800: #991b1b;

                /* Cores para o Modal Acolhimento */
                --teal-50: #f0fdfa;
                --teal-200: #a7f3d0;
                --teal-600: #0d9488;
                --teal-700: #0f766e;
                --teal-800: #115e59;
                
                /* Azul padrão Preventiva */
                --color-van: #1a1bad;
            } 


                /* 1. Modal Overlay (Fundo Escuro Transparente): */
                .modal-overlay {
                    position: fixed;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.7);
                    /* Fundo escuro semi-transparente */
                    display: flex;
                    /* Para centralizar o modal-content */
                    align-items: center;
                    /* Centraliza verticalmente */
                    justify-content: center;
                    /* Centraliza horizontalmente */
                    z-index: 1000;
                    /* Garante que o modal esteja acima de todo o resto */
                    opacity: 1;
                    /* Padrão, para a transição */
                    transition: opacity 0.3s ease;
                    /* Para suavizar o aparecimento/desaparecimento */
                    /* transition: opacity 0.3s ease-in-out; */
                }

                /* 2. Modal Content (Container do Conteúdo do Modal): */
                .modal-content {
                    background-color: #fff;
                    border-radius: 0.75rem;
                    /* rounded-xl (12px) */
                    padding: 2rem;
                    /* p-8 (32px) */
                    width: 91.666667%;
                    /* w-11/12 */
                    margin-left: auto;
                    /* mx-auto */
                    margin-right: auto;
                    /* mx-auto */
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                    /* shadow-2xl */
                    transform: translateY(0);
                    /* Estado inicial para a transição */
                    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
                    /* Transição para entrada/saída */
                    max-width: 384px;
                    /* md:max-w-sm (Tailwind sm breakpoint é 640px, max-w-sm é 24rem ou 384px) */
                    /* transition: transform 0.3s ease-in-out; */
                }

                /* Para a animação de saída/entrada (geralmente gerida por JS) */
                .modal-overlay.hidden-modal .modal-content {
                    transform: translateY(-20px);
                    /* Move para cima ao sair */
                    opacity: 0;
                }

                /* 3. Cabeçalho do Modal: */
                .modal-header {
                    display: flex;
                    justify-content: space-between;
                    /* justify-between */
                    align-items: center;
                    /* items-center */
                    margin-bottom: 1.5rem;
                    /* mb-6 (24px) */
                }

                /* 4. Títulos (h3) nos Modals: */
                .modal-title {
                    font-size: 1.5rem;
                    /* text-2xl (24px) */
                    font-weight: 800;
                    /* font-extrabold */
                }

                /* Cores específicas para cada modal, se o título tiver um ID ou classe específica */
                #titleOuvidoria {
                    color: var(--red-800);
                    /* text-red-600 */
                }

                #titleAcolhimento {
                    color: var(--teal-800);
                    /* text-teal-600 */
                }

                /* 5. Botão Fechar Modal: */
                .modal-close-button {
                    color: var(--gray-400);
                    /* text-gray-400 */
                    padding: 0.25rem;
                    /* p-1 (4px) */
                    transition: color 0.15s ease-in-out;
                    /* transition (padrão do Tailwind para cor) */
                    background: none;
                    /* Remove background padrão de botão */
                    border: none;
                    /* Remove borda padrão de botão */
                    cursor: pointer;
                    /* Indica que é clicável */
                    font-size: 1.5rem;
                    /* Opcional: para um 'X' de texto */
                    line-height: 1;
                    /* Opcional: para alinhar o 'X' */
                }

                .modal-close-button:hover {
                    color: var(--gray-700);
                    /* hover:text-gray-700 */
                }

                /* 6. Ícone SVG do Botão Fechar: */
                .modal-close-button svg {
                    width: 1.75rem;
                    /* w-7 (28px) */
                    height: 1.75rem;
                    /* h-7 (28px) */
                }

                /* 7. Parágrafos de Texto: */
                /* Para o texto do 0800 */
                .modal-text-intro {
                    color: var(--gray-600);
                    /* text-gray-600 */
                    margin-bottom: 1rem;
                    /* mb-4 (16px) */
                    font-size: 1.125rem;
                    /* text-lg (18px) */
                }

                /* Para o texto pequeno de rodapé */
                .modal-text-small {
                    font-size: 0.875rem;
                    /* text-sm (14px) */
                    color: var(--gray-500);
                    /* text-gray-500 */
                    margin-top: 1rem;
                    /* mt-4 (16px) */
                }

                /* Div do centro do modal */
                .modal-body-center {
                    text-align: center;
                    /* text-center */
                }

                /* 8. Caixa do Número 0800: */
                .modal-0800-box {
                    padding: 1rem;
                    /* p-4 (16px) */
                    border-radius: 0.5rem;
                    /* rounded-lg (8px) */
                    border-width: 1px;
                    /* border (padrão Tailwind) */
                    border-style: solid;
                    /* border */
                }

                /* Cores específicas para cada modal */
                .modal-ouvidoria .modal-0800-box {
                    /* Adicione uma classe no .modal-content para diferenciar */
                    /*background-color: var(--red-50);*/
                    /* bg-red-50 */
                    border-color: var(--red-200);
                    /* border-red-200 */
                    background-color: #323131;
                }

                .modal-acolhimento .modal-0800-box {
                    /* Adicione uma classe no .modal-content para diferenciar */
                    /*background-color: var(--teal-50);*/
                    /* bg-teal-50 */
                    /*border-color: var(--teal-200);*/
                    /* border-teal-200 */
                    background-color: #323131;
                }

                /* 9. Número 0800: */
                .modal-0800-number {
                    display: block;
                    /* block */
                    font-size: 2.25rem;
                    /* text-4xl (36px) */
                    font-weight: 900;
                    /* font-black */
                    letter-spacing: 0.05em;
                    /* tracking-wider */
                    color: #fff;
                }

                /* Cores específicas para cada modal */
                .modal-ouvidoria .modal-0800-number {
                    /*color: var(--red-800);*/
                    /* text-red-800 */
                    font: #fff;
                }

                .modal-acolhimento .modal-0800-number {
                    /*color: var(--teal-800);*/
                    /* text-teal-800 */
                    font: #fff;
                }

                /* Classe para esconder o modal (geralmente adicionada/removida por JS) */
                .hidden-modal {
                    opacity: 0;
                    pointer-events: none;
                    /* Impede cliques no fundo quando escondido */
                    visibility: hidden;
                    /* Opcional: para garantir que não ocupe espaço ou seja acessível */
                }

                .shadow-2xl {
                    border: 1px solid #000;
                    background-color: #fff;
                }

                /* Estado ativo do modal */
                .show-modal {
                    display: flex !important;;
                    /* Garante que o flex para centralizar funcione */
                    opacity: 1;
                }

                /* Transformações para a animação */
                .transform-out {
                    transform: scale(0.9);
                }

                .transform-in {
                    transform: scale(1.0);
                }


                /* Estilos globais para SVGs, se necessário (boa prática) */
svg {
    /*display: block;  Garante que o SVG se comporte como um bloco */
    display: inline-block;
    vertical-align: middle; /* Ajuda a alinhar com texto se estiver inline-block */
    /* Remove qualquer estilo de borda remanescente do reset Tailwind se ainda estiver lá */
    border-width: 0;
    border-style: none;
    border-color: transparent;
}

/* Estilo para ícones padrão (setas de navegação) */
.size-6 {
    width: 2rem;   /* Tamanho padrão para telas maiores (ex: 32px se 1rem=16px) */
    height: 2rem;
    flex-shrink: 0; /* Impede que o SVG seja "espremido" em layouts flexbox */
}

/* Estilo para o ícone de telefone (se for maior ou diferente) *
/* svg.phone0800 {*/
.phone0800 {
    width: 2.2rem; /* Um pouco menor que o size-6, por exemplo */
    height: auto;
    margin-right: 0.6rem; /* Mantenha o espaçamento, ajustado para rem */
    flex-shrink: 0;
}

/* svg.formIcone { */
.formIcone {
    width: 6rem; /* Um pouco menor que o size-6, por exemplo */
    height: auto;
    margin-right: 0.6rem; /*Mantenha o espaçamento, ajustado para rem */
    flex-shrink: 0;
}

/* MEDIA QUERIES para telas menores */
/* @media (max-width: 1024px) { /* Exemplo para tablets e laptops pequenos *
    .size-6 {
        width: 1.75rem; /* Levemente menor *
        height: 1.75rem;
    }
    .phone0800 {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 0.5rem;
    }
} */

@media (max-width: 768px) { /* Exemplo para telas de celular em modo paisagem */
    .size-6 {
        width: 1.5rem; /* Um pouco menor */
        height: 1.5rem;
    }
    .phone0800 {
        width: 1.4rem;
        height: 1.4rem;
        margin-right: 0.4rem;
    }
}

@media (max-width: 480px) { /* Exemplo para telas de celular pequenas em modo retrato */
    .size-6 {
        width: 1.25rem; /* Ainda menor */
        height: 1.25rem;
    }
    .phone0800 {
        width: 1.2rem;
        height: 1.2rem;
        margin-right: 0.3rem;
    }
}

/* Você pode adicionar mais media queries ou ajustar os valores conforme necessário */