MOBILE FIXES — max-width: 767px
           ============================================================ */
        @media (max-width: 767px) {

            /* --- 1. MODAIS: Largura 95vw, sem overflow horizontal --- */
            /* Modal principal de detalhes da multa (Resan) */
            #modalDetalhesMultaAdmin > div > div:last-child {
                width: 95vw !important;
                max-width: 95vw !important;
                margin: 0 !important;
            }
            /* Ajustar padding interno do modal em mobile */
            #modalDetalhesMultaAdmin .px-6 {
                padding-left: 0.875rem !important;
                padding-right: 0.875rem !important;
            }
            /* Altura máxima do corpo do modal aumentada ligeiramente */
            #modalDetalhesMultaAdmin .max-h-\[78vh\] {
                max-height: 80dvh !important;
            }
            /* Modal de lista de modelos salvos */
            #modal-lista-modelos-admin > div:last-child {
                width: 95vw !important;
                max-width: 95vw !important;
            }
            /* Tabela interna do modal de modelos — scroll horizontal */
            #modal-lista-modelos-admin .max-h-\[60vh\] {
                overflow-x: auto !important;
            }
            #modal-lista-modelos-admin table {
                min-width: 480px;
            }

            /* --- 2. BOTÕES DO EDITOR dentro do modal: quebrar em múltiplas linhas --- */
            #modalDetalhesMultaAdmin .flex.flex-wrap.items-center.gap-2 {
                gap: 0.35rem !important;
            }
            /* Nome do modelo: ocupar largura total em mobile */
            #modelo-nome-admin {
                width: 100% !important;
                margin-bottom: 0.25rem;
            }

            /* --- 3. TABELAS: evitar overflow da tela --- */
            /* Qualquer tabela dentro de .overflow-x-auto mantém scroll interno */
            section .overflow-x-auto {
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
            }
            /* Impedir que cards de paginação estourem */
            .flex.items-center.justify-between.border-t {
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            /* --- 4. FILTROS: layout compacto em mobile --- */
            /* Botões Aplicar/Limpar do dashboard: full-width */
            #btn-aplicar-filtros,
            #btn-limpar-filtros {
                width: 100%;
                justify-content: center;
            }
            /* Seção de filtros do dashboard: ocultar por padrão (toggle via JS) */
            #filtros-dashboard-section {
                display: none;
            }
            #filtros-dashboard-section.mobile-aberto {
                display: grid !important;
            }
            /* Botão toggle de filtros: só visível em mobile */
            #mobile-filter-toggle {
                display: block;
            }

            /* --- 5. CARDS DE ESTATÍSTICAS / KPI: empilhar em 1 coluna --- */
            /* KPIs do dashboard que ficam em 2 colunas a partir de sm (640px) */
            section.mb-8 > div[id^="kpi-"],
            /* Garante que seções com muitos KPI cards não fiquem esmagadas */
            .sm\:grid-cols-2 {
                grid-template-columns: 1fr !important;
            }

            /* --- 6. HEADER: ajustes menores --- */
            #main-header .mx-auto.flex {
                gap: 0.5rem;
            }
            /* Ocultar texto do header em telas muito pequenas para dar espaço */
            #main-header .flex.flex-col.text-sm span:first-child {
                display: none;
            }
            /* Tema: label mais curto em mobile */
            #theme-select {
                min-width: 100px;
                font-size: 0.6rem;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            /* --- 7. SIDEBAR push: garantir conteúdo não empurrado em mobile --- */
            #sidebar + main,
            body main {
                margin-left: 0 !important;
            }

            /* --- 8. LISTA DE MULTAS: filtro de status full-width em mobile --- */
            /* O container de filtros da lista de multas */
            #filtro-status {
                width: 100%;
                max-width: 100%;
            }
            /* Seção de cabeçalho da lista de multas: empilhar verticalmente */
            .flex.flex-col.md\:flex-row.md\:items-center.justify-between.gap-4 {
                flex-direction: column !important;
            }
            /* Seção de importação: botão full-width */
            .rounded-3xl .flex.flex-col.gap-2 a.rounded-xl {
                width: 100%;
                text-align: center;
                justify-content: center;
            }

            /* --- 9. EDITOR TOOLBAR: quebrar em mobile para evitar overflow --- */
            #toolbar-container-recurso {
                overflow-x: auto !important;
                white-space: nowrap;
            }

            /* --- 10. DOSSIÊ: cards de arquivos em mobile --- */
            #dossie-arquivos {
                gap: 0.5rem !important;
            }

            /* --- 11. PAGINAÇÃO: botões centralizados em mobile --- */
            #btn-pagina-anterior,
            #btn-proxima-pagina {
                flex: 1;
                justify-content: center;
            }
        }

        /* Botão toggle de filtros: esconder em desktop */
        @media (min-width: 768px) {
            #mobile-filter-toggle {
                display: none !important;
            }
            #filtros-dashboard-section {
                display: grid !important;
            }
        }

        /* ============================