/* =========================================== ACCESSIBILITY STYLES - Assembleia Legislativa do Paraná =========================================== */ /* =========================================== DARK MODE STYLES =========================================== */ .dark-mode { /* Transição suave para mudança de modo */ transition: background-color 0.3s ease, color 0.3s ease; } /* Background principal */ /* ✅ CORRIGIDO: quando a classe está no , use body.dark-mode */ body.dark-mode { background-color: #111315 !important; color: #e5e5e5 !important; } /* Sobrescrever CSS inline do body em modo escuro */ body.dark-mode { background-color: #111315 !important; } /* Header */ .dark-mode header { background-color: #232628 !important; color: white !important; border-bottom: 1px solid #3a3d40; } /* Botões */ .dark-mode button:not(.noaccessbilitycss) { color: white !important; background-color: transparent; border-color: #3a3d40; } .dark-mode button:hover:not(.noaccessbilitycss) { background-color: #3a3d40 !important; } .dark-mode a.bg-primary { background-color: #1a1d21 !important; } /* Links */ .dark-mode a { color: #60a5fa !important; /* Azul claro para melhor contraste */ } .dark-mode a.link-button { color: white !important; } .dark-mode a:hover { color: #93c5fd !important; } /* Indicador de tamanho de fonte */ .dark-mode span.font-size-indicator { color: inherit !important; } .agenda-home-wrapper { max-height: 340px; } .agenda-home-content { height: 310px; overflow-y: scroll; } /* Classes específicas do Tailwind/Bootstrap em dark mode */ .dark-mode .bg-white:not(.noaccessbilitycss) { background-color: #232628 !important; } .dark-mode .bg-gray-50 { background-color: #111315 !important; } .dark-mode .bg-gray-100 { background-color: #1f2225 !important; } .dark-mode .bg-gray-200 { background-color: #3a3d40 !important; } .dark-mode .bg-secondary { background-color: #1e7e34 !important; /* Verde mais escuro para contraste */ } .dark-mode .text-primary:not(.noaccessbilitycss) { color: #60a5fa !important; } .dark-mode .text-gray-700 { color: #e5e5e5 !important; } .dark-mode .text-gray-600:not(.noaccessbilitycss) { color: #d1d5db !important; } .dark-mode .text-gray-500 { color: #9ca3af !important; } .dark-mode .text-gray-400 { color: #6b7280 !important; } .dark-mode .text-gray-300 { color: #d1d5db !important; } .dark-mode .text-gray-900 { color: #f9fafb !important; } .dark-mode .text-gray-800, .dark-mode .text-blue-700 { color: white !important; } .dark-mode .text-blue-500 { color: white !important; } .dark-mode footer .bg-blue-500 { background-color: #232628 !important; } .dark-mode .bg-blue-50 { background-color: #111315 !important; } .bg-tabs { background-color: #E5F3ED; } .dark-mode .bg-tabs { background-color: #111315 !important; } .blue-degrade { background: linear-gradient(180deg, #054F70 0%, #003A54 100%) !important; } .dark-mode .blue-degrade { background: linear-gradient(175deg, #384046 0%, #232628 100%) !important; } /* Bordas */ .dark-mode .border-gray-200, .dark-mode .border-gray-300 { border-color: #3a3d40 !important; } .dark-mode hr, .dark-mode .border-t, .dark-mode .border-b { border-color: #3a3d40 !important; } /* Inputs e forms */ .dark-mode input[type="text"], .dark-mode input[type="search"] { background-color: #1f2225 !important; border-color: #3a3d40 !important; color: #e5e5e5 !important; } .dark-mode input[type="text"]::placeholder, .dark-mode input[type="search"]::placeholder { color: #9ca3af !important; } .dark-mode input[type="text"]:focus, .dark-mode input[type="search"]:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important; } /* Footer */ .dark-mode footer { background-color: #0f1419 !important; } .dark-mode footer .bg-primary { background-color: #1a1d21 !important; } .dark-mode footer .bg-blue-800 { background-color: #0f1419 !important; } /* Controles de acessibilidade */ .dark-mode .font-size-controls { background-color: #1f2225 !important; border-color: #3a3d40 !important; } .dark-mode .font-size-controls:hover { border-color: #60a5fa !important; background-color: #232628 !important; } /* Ícones */ .dark-mode .bi { color: inherit; } /* Sombras em dark mode */ .dark-mode .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; } .dark-mode .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important; } .dark-mode .bg-blue-800 { background-color: #0f1419 !important; } /* =========================================== FOCUS STATES E NAVEGAÇÃO POR TECLADO =========================================== */ button:focus, input:focus, a:focus { outline: 3px solid #0066cc; outline-offset: 2px; } .dark-mode button:focus, .dark-mode input:focus, .dark-mode a:focus { outline: 3px solid #60a5fa; outline-offset: 2px; } /* =========================================== SKIP NAVIGATION =========================================== */ .skip-navigation { position: absolute; top: -40px; left: 6px; background: #000000; color: #ffffff; padding: 8px; text-decoration: none; z-index: 1000; border-radius: 0 0 4px 4px; } .skip-navigation:focus { top: 0; } /* =========================================== TOOLTIP ACCESSIBILITY - ✅ CORRIGIDO =========================================== */ .tooltip { pointer-events: none; animation: fadeIn 0.3s ease-in-out; white-space: nowrap; position: absolute; z-index: 9999; padding: 8px 12px; border-radius: 6px; font-size: 13px; line-height: 1.4; font-weight: 500; } /* ✅ MODO CLARO (padrão) - Fundo branco e texto escuro (mesmo se vier bg-gray-800/text-white) */ body:not(.dark-mode) .tooltip, .light-mode .tooltip { background-color: #ffffff !important; color: #1f2937 !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.12) !important; } /* ✅ Sobrescreve Tailwind no modo claro */ body:not(.dark-mode) .tooltip.bg-gray-800, body:not(.dark-mode) .tooltip.text-white, body:not(.dark-mode) .tooltip.bg-gray-800.text-white, .light-mode .tooltip.bg-gray-800, .light-mode .tooltip.text-white, .light-mode .tooltip.bg-gray-800.text-white { background-color: #ffffff !important; color: #1f2937 !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; } /* 🌙 MODO ESCURO - Tooltip CLARO */ .dark-mode .tooltip.bg-gray-200, .dark-mode .tooltip { background-color: #e5e7eb !important; color: #1f2937 !important; box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); } .dark-mode .tooltip.bg-gray-200.text-gray-800 { background-color: #e5e7eb !important; color: #1f2937 !important; } /* Sobrescrever classes Tailwind do tooltip */ .tooltip.text-white { color: #ffffff !important; } /* ✅ No modo claro, força texto escuro mesmo se tiver text-white */ body:not(.dark-mode) .tooltip.text-white, .light-mode .tooltip.text-white { color: #1f2937 !important; } .dark-mode .tooltip.text-gray-800 { color: #1f2937 !important; } .tooltip.px-2 { padding-left: 8px !important; padding-right: 8px !important; } .tooltip.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; } .tooltip.rounded { border-radius: 6px !important; } .tooltip.text-sm { font-size: 13px !important; } .tooltip.max-w-xs { max-width: 300px !important; } .tooltip.z-50 { z-index: 9999 !important; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Tooltip sai suavemente */ .tooltip.fade-out { animation: fadeOut 0.2s ease-in-out forwards; } @keyframes fadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-5px) scale(0.95); } } /* =========================================== FIX DEFINITIVO - TEXTO DENTRO DA BOLHA =========================================== */ .tooltip { display: inline-block !important; /* 🔑 força cálculo correto da altura */ box-sizing: border-box !important; padding: 8px 12px !important; line-height: 1.4 !important; height: auto !important; min-height: unset !important; white-space: normal !important; max-width: min(320px, 90vw) !important; overflow: visible !important; /* evita corte do texto */ word-break: break-word !important; overflow-wrap: anywhere !important; text-align: center; /* combina com ícone */ } /* Garante que nenhum filho "empurre" o texto */ .tooltip * { line-height: inherit !important; font-size: inherit !important; } /* Evita conflito se tooltip estiver dentro de botão */ button .tooltip, a .tooltip { position: absolute !important; } /* =========================================== FONT SIZE CONTROLS =========================================== */ @media (max-width: 768px) { .agenda-home-wrapper { max-height: 540px; } .agenda-home-content { height: 510px; overflow-y: scroll; } .font-size-controls { display: flex; } .mobile-font-control { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; border-radius: 4px; background: #f5f5f5; margin: 0 2px; } .dark-mode .mobile-font-control { background-color: #1f2225 !important; border-color: #3a3d40 !important; color: #e5e5e5 !important; } /* Tooltip responsivo em mobile */ .tooltip { font-size: 12px; padding: 6px 10px; max-width: 250px; } } @media (max-width: 480px) { .tooltip { font-size: 11px; padding: 5px 8px; max-width: 200px; white-space: normal; } } /* =========================================== PRINT ACCESSIBILITY =========================================== */ @media print { .acessibilidade, .font-size-controls, .bi-list { display: none !important; } header { background: white !important; -webkit-print-color-adjust: exact; } .dark-mode header { background: white !important; color: black !important; } /* ✅ CORRIGIDO: body.dark-mode */ body.dark-mode { background: white !important; color: black !important; } } /* =========================================== UTILITY CLASSES PARA ACESSIBILIDADE =========================================== */ /* Classe para forçar texto branco em dark mode */ .dark-mode .force-white-text { color: #ffffff !important; } /* Classe para cards/containers em dark mode */ .dark-mode .card, .dark-mode .container-dark { background-color: #324551 !important; border-color: #3a3d40 !important; } /* Seções de conteúdo em dark mode */ .dark-mode .hero-section .bg-white:not(.noaccessbilitycss), .dark-mode .bg-white:not(.noaccessbilitycss) { background-color: #232628 !important; } /* Main content específico */ main.dark-mode { background-color: transparent !important; color: #e5e5e5 !important; } main.dark-mode .container { background-color: transparent !important; } /* =========================================== LOGOS E TRANSIÇÕES SUAVES =========================================== */ .logo { transition: opacity 0.3s ease-in-out; } .logo:hover { opacity: 0.9; } /* Otimização para evitar layout shift durante troca de logo */ .logo[data-logo-base] { will-change: opacity; } /* =========================================== MOTION REDUCED ACCESSIBILITY =========================================== */ @media (prefers-reduced-motion: reduce) { .tooltip, .logo, .dark-mode { transition: none; animation: none !important; } .tooltip.fade-out { animation: none !important; opacity: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } } /* =========================================== ALTO CONTRASTE - Preferência do Sistema =========================================== */ @media (prefers-contrast: high) { .tooltip { border-width: 2px !important; font-weight: 600 !important; } /* ✅ No modo claro, tooltip preto (alto contraste) */ body:not(.dark-mode) .tooltip { border-color: #000000 !important; } .dark-mode .tooltip { border-color: #ffffff !important; background-color: #ffffff !important; color: #000000 !important; } }