/* ============================================================ SKIP LINK ============================================================ */ .skip-link { position: fixed; top: -60px; left: 8px; background: #155e21; color: #fff !important; padding: 10px 18px; text-decoration: none !important; border-radius: 0 0 6px 6px; font-weight: 600; font-size: 0.9rem; z-index: 100000; transition: top 0.2s ease !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .skip-link:focus { top: 0 !important; outline: 3px solid #ffd600; outline-offset: 2px; } /* ============================================================ BARRA DE ACESSIBILIDADE ============================================================ */ #barra-acessibilidade { background: #fff; border-bottom: 2px solid #155e21; padding: 5px 16px; display: flex; align-items: center; gap: 6px; z-index: 9990; flex-wrap: wrap; width: 100%; box-sizing: border-box; } #barra-acessibilidade .barra-label { color: #155e21; font-weight: 600; font-size: 0.78rem; margin-right: 4px; white-space: nowrap; } .barra-grupo { display: inline-flex; align-items: center; gap: 2px; border-right: 1px solid #dee2e6; padding-right: 8px; margin-right: 2px; } #barra-acessibilidade button { background: transparent; border: 1px solid #c8d0d8; border-radius: 4px; padding: 3px 9px; cursor: pointer; font-size: 0.78rem; color: #2c3e50; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.4; } #barra-acessibilidade button:hover, #barra-acessibilidade button:focus { background: #155e21; color: #fff; border-color: #155e21; outline: none; } #barra-acessibilidade button:focus-visible { outline: 3px solid #ffd600 !important; outline-offset: 2px; } #barra-acessibilidade button[aria-pressed="true"] { background: #155e21; color: #fff; border-color: #155e21; } #barra-acessibilidade button:disabled { opacity: 0.4; cursor: default; } #btn-fonte-diminuir { font-size: 0.65rem !important; font-weight: 700; } #btn-fonte-aumentar { font-size: 1rem !important; font-weight: 700; } @media (max-width: 480px) { #barra-acessibilidade .barra-label { display: none; } } /* ============================================================ FOCO GLOBAL APRIMORADO ============================================================ */ :focus-visible { outline: 3px solid #155e21 !important; outline-offset: 3px !important; border-radius: 2px; } /* ============================================================ DARK MODE (data-theme="dark" no ) Abordagem abrangente: cobre todos os contêineres com base escura, depois restaura elementos específicos (sidebar, botões, etc.) ============================================================ */ /* 1 ── Todos os contêineres e células ganham fundo escuro */ [data-theme="dark"] body, [data-theme="dark"] div, [data-theme="dark"] nav, [data-theme="dark"] li, [data-theme="dark"] ol, [data-theme="dark"] section, [data-theme="dark"] article, [data-theme="dark"] main, [data-theme="dark"] aside, [data-theme="dark"] header, [data-theme="dark"] footer, [data-theme="dark"] table, [data-theme="dark"] tr, [data-theme="dark"] td, [data-theme="dark"] th { background-color: #1a1d23 !important; color: #e2e8f0 !important; } /* 2 ── Textos inline */ [data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3, [data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6, [data-theme="dark"] p,[data-theme="dark"] span,[data-theme="dark"] label, [data-theme="dark"] strong,[data-theme="dark"] em,[data-theme="dark"] b, [data-theme="dark"] small,[data-theme="dark"] cite,[data-theme="dark"] q, [data-theme="dark"] i,[data-theme="dark"] u { color: #e2e8f0 !important; background-color: transparent !important; } /* 3 ── Links genéricos */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.sidebar-brand):not(.skip-link) { color: #63b3ed !important; } /* 4 ── Bordas e separadores */ [data-theme="dark"] hr { border-top-color: #2d3748 !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-right, [data-theme="dark"] .border-left { border-color: #2d3748 !important; } /* 5 ── Topbar: levemente diferente para criar separação visual */ [data-theme="dark"] .topbar { background-color: #1e2330 !important; border-bottom: 1px solid #2d3748 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .topbar h4 { color: #4cbb6e !important; } /* 6 ── Cards: plano levemente diferente do fundo */ [data-theme="dark"] .card, [data-theme="dark"] .card-body { background-color: #252a34 !important; border-color: #2d3748 !important; } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: #1e2330 !important; border-color: #2d3748 !important; } /* 7 ── Modais */ [data-theme="dark"] .modal-content { background-color: #252a34 !important; border-color: #2d3748 !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: #2d3748 !important; } /* 8 ── Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: #252a34 !important; border-color: #2d3748 !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #2d3748 !important; color: #fff !important; } [data-theme="dark"] .dropdown-divider { border-top-color: #2d3748 !important; } /* 9 ── Formulários */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]), [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .custom-select, [data-theme="dark"] .input-group-text { background-color: #1e2330 !important; border-color: #2d3748 !important; color: #e2e8f0 !important; } [data-theme="dark"] .form-control:focus { border-color: #2d9e45 !important; box-shadow: 0 0 0 0.2rem rgba(45,158,69,0.25) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #718096 !important; } /* 10 ── Tabelas */ [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.04) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.07) !important; } /* 11 ── SIDEBAR: restaura gradiente escuro (sidebar é