/* ============================================================ e-SIC — Estilos complementares ao Tailwind Paleta padrão Gov.br + componentes de acessibilidade ============================================================ */ :root { --cor-primaria: #1351B4; --cor-secundaria: #155BCB; --cor-acento: #2670E8; --cor-sucesso: #168821; --cor-alerta: #FFCD07; --cor-perigo: #E52207; --cor-fundo: #F8F8F8; --cor-texto: #1B1B1B; --cor-borda: #D4D4D4; } /* ---------- Ajuste de fonte (barra de acessibilidade) ---------- 3 níveis de aumento controlados via classe no */ html { font-size: 100%; } html.fonte-nivel-1 { font-size: 112.5%; } html.fonte-nivel-2 { font-size: 125%; } html.fonte-nivel-3 { font-size: 137.5%; } /* ---------- Alto contraste ---------- Tema escuro de alto contraste (eMAG/WCAG 1.4.3) */ html.alto-contraste, html.alto-contraste body { background-color: #000000 !important; color: #FFFFFF !important; } html.alto-contraste * { background-color: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: none !important; } html.alto-contraste a, html.alto-contraste button, html.alto-contraste summary { color: #FFFF00 !important; text-decoration: underline !important; } html.alto-contraste input, html.alto-contraste select, html.alto-contraste textarea { background-color: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; } html.alto-contraste img { filter: grayscale(100%) contrast(120%); } html.alto-contraste .badge { border: 1px solid #FFFF00 !important; } /* ---------- Foco visível (WCAG 2.4.7) ---------- */ .focus-visivel:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #FFCD07 !important; outline-offset: 2px; border-radius: 2px; } /* ---------- Alvo de toque mínimo 44x44px (WCAG 2.5.5) ---------- */ .alvo-toque { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ---------- Badges de prazo e status ---------- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 9999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } /* Prazo: verde > 5 dias, amarelo 2–5, vermelho < 2 ou vencido. Texto + cor (nunca só cor — WCAG 1.4.1) */ .badge-verde { background-color: #E3F5E1; color: #168821; } .badge-amarelo { background-color: #FFF5C2; color: #6b5d00; } .badge-vermelho { background-color: #FDE7E7; color: #E52207; } .badge-status-pendente { background-color: #FFF5C2; color: #6b5d00; } .badge-status-em_andamento { background-color: #E8F0FB; color: #1351B4; } .badge-status-respondido { background-color: #E3F5E1; color: #168821; } .badge-status-prorrogado { background-color: #FFF5C2; color: #6b5d00; } .badge-status-indeferido { background-color: #FDE7E7; color: #E52207; } .badge-status-encaminhado { background-color: #EDE7F6; color: #5E35B1; } .badge-status-reencaminhado { background-color: #EDE7F6; color: #5E35B1; } /* ---------- Toast notifications ---------- */ .toast { background-color: #FFFFFF; border-left: 4px solid var(--cor-primaria); } .toast-sucesso { border-left-color: var(--cor-sucesso); } .toast-erro { border-left-color: var(--cor-perigo); } .toast-alerta { border-left-color: var(--cor-alerta); } /* ---------- Timeline vertical ---------- */ .timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 28px; } .timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 3px; background-color: var(--cor-borda); } .timeline-item { position: relative; padding-bottom: 20px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-marcador { position: absolute; left: -28px; top: 6px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 0 0 2px var(--cor-borda); } /* ---------- Gráfico de barras (dashboard, sem biblioteca) ---------- */ .grafico-barras { display: flex; align-items: flex-end; gap: 8px; min-height: 190px; overflow-x: auto; padding-bottom: 4px; } .grafico-coluna { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 44px; flex: 1; } .grafico-barra { width: 100%; max-width: 48px; background-color: var(--cor-primaria); border-radius: 4px 4px 0 0; } .grafico-valor { font-size: 0.75rem; font-weight: 700; margin-bottom: 2px; } .grafico-rotulo { font-size: 0.7rem; margin-top: 4px; color: #555; } /* ---------- Tabelas responsivas ---------- */ .tabela-responsiva { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabela-responsiva table { min-width: 640px; } /* ---------- Skeleton loading ---------- */ .skeleton { background: linear-gradient(90deg, #EEEEEE 25%, #F8F8F8 50%, #EEEEEE 75%); background-size: 200% 100%; animation: skeleton-pulso 1.4s ease-in-out infinite; border-radius: 4px; color: transparent !important; pointer-events: none; } @keyframes skeleton-pulso { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---------- Modal de confirmação ---------- */ .modal-fundo { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal-caixa { background-color: #FFFFFF; border-radius: 8px; max-width: 28rem; width: 100%; padding: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } /* ---------- Movimento reduzido (WCAG 2.3.3) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Impressão ---------- */ @media print { header nav, footer, #regiao-toast, .alvo-toque, [role="region"][aria-label="Barra de acessibilidade"] { display: none !important; } body { background: #FFFFFF; } }