/* ============================================================ Assistência Hub — Modo noturno (Design System) Remapeia as classes do Tailwind quando . Carregado em todas as páginas; só atua com a classe .dark. ============================================================ */ html.dark { color-scheme: dark; } /* ============================================================ Foco de teclado — anel da marca, reaproveitável em todas as telas. Só aparece na navegação por teclado (:focus-visible), não no clique de mouse. Azul Assistência Hub no claro; tom mais vivo no escuro para manter o contraste. ============================================================ */ :focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 6px; } html.dark :focus-visible { outline-color: #60A5FA; } /* elementos que já rolam/são contêineres não precisam do anel */ :focus:not(:focus-visible) { outline: none; } /* ---- Fundo da página e superfícies ---- */ /* o body sempre fica no tom mais escuro (mesmo quando tem classe bg-white), para que os cartões bg-white tenham contraste */ html.dark body { background-color: #1c1c1e !important; } html.dark .bg-haze { background-color: #1c1c1e; } html.dark .bg-white { background-color: #2c2c2e; } html.dark .bg-gray-50, html.dark .bg-gray-100 { background-color: #3a3a3c; } /* superfícies translúcidas (sidebar, header, navs) */ html.dark .bg-haze\/95 { background-color: rgba(28,28,30,0.95); } html.dark .bg-white\/80 { background-color: rgba(28,28,30,0.80); } html.dark .bg-white\/95 { background-color: rgba(28,28,30,0.95); } html.dark .bg-white\/70 { background-color: rgba(28,28,30,0.70); } /* ---- Texto ---- */ html.dark .text-ink { color: #f5f5f7; } html.dark .text-ink\/70 { color: rgba(245,245,247,0.72); } html.dark .text-ink\/60 { color: rgba(245,245,247,0.65); } /* hover para texto-tinta (ex.: links do menu do site) → branco no modo noturno */ html.dark .hover\:text-ink:hover { color: #ffffff !important; } html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: #f5f5f7; } html.dark .text-sub, html.dark .text-gray-600, html.dark .text-gray-500 { color: #aeaeb2; } html.dark .text-gray-400, html.dark .text-gray-300, html.dark .text-zinc-400 { color: #8e8e93; } html.dark .text-\[\#86868b\] { color: #8e8e93; } html.dark .text-\[\#b8b8bd\] { color: #6e6e73; } /* ---- Bordas ---- */ html.dark .border-line { border-color: rgba(255,255,255,0.16); } html.dark .border-black\/10 { border-color: rgba(255,255,255,0.12); } html.dark .border-black\/5 { border-color: rgba(255,255,255,0.09); } html.dark .border-black\/\[0\.04\] { border-color: rgba(255,255,255,0.07); } html.dark .border-gray-100 { border-color: rgba(255,255,255,0.08); } html.dark .border-gray-200, html.dark .border-gray-300 { border-color: rgba(255,255,255,0.16); } /* ---- Hover ---- */ html.dark .hover\:bg-black\/5:hover { background-color: rgba(255,255,255,0.07); } html.dark .hover\:bg-black\/\[0\.03\]:hover { background-color: rgba(255,255,255,0.05); } html.dark .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,0.07); } html.dark .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.09); } /* ---- Navegação ---- */ html.dark .nav-ativa { background: rgba(37,99,235,0.15) !important; color: #60A5FA !important; } html.dark .nav-ativa i { color: #60A5FA !important; } /* ---- Campos de formulário ---- */ html.dark input, html.dark select, html.dark textarea { background-color: #2c2c2e; color: #f5f5f7; border-color: rgba(255,255,255,0.16); } html.dark input::placeholder, html.dark textarea::placeholder { color: #8e8e93; } html.dark .placeholder-\[\#86868b\]::placeholder { color: #8e8e93; } html.dark select option { background-color: #2c2c2e; color: #f5f5f7; } /* ---- Scrollbar ---- */ html.dark ::-webkit-scrollbar-thumb { background: #48484a; } /* ---- Sombras ---- */ html.dark .shadow-card { box-shadow: 0 2px 14px rgba(0,0,0,0.45); } html.dark .shadow-2xl { box-shadow: 0 20px 50px rgba(0,0,0,0.6); } /* ---- Marca (azul) — fundo claro vira translúcido ---- */ html.dark .bg-brand-light { background-color: rgba(37,99,235,0.18); } html.dark .hover\:bg-brand-light:hover { background-color: rgba(37,99,235,0.24); } /* ============================================================ Badges / status coloridos (bg-{cor}-100/50, text-{cor}-800) No escuro viram fundo translúcido + texto claro. ============================================================ */ html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.18); } html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249,115,22,0.18); } html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(59,130,246,0.18); } html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34,197,94,0.18); } html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16,185,129,0.18); } html.dark .bg-violet-50, html.dark .bg-violet-100 { background-color: rgba(139,92,246,0.20); } html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239,68,68,0.18); } html.dark .bg-gray-200 { background-color: rgba(255,255,255,0.12); } html.dark .text-amber-800, html.dark .text-amber-600 { color: #fcd34d; } html.dark .text-orange-800, html.dark .text-orange-600 { color: #fdba74; } html.dark .text-blue-800, html.dark .text-blue-600 { color: #93c5fd; } html.dark .text-green-800, html.dark .text-green-600 { color: #86efac; } html.dark .text-emerald-800, html.dark .text-emerald-600 { color: #6ee7b7; } html.dark .text-violet-800, html.dark .text-violet-600 { color: #c4b5fd; } html.dark .text-red-700, html.dark .text-red-600 { color: #fca5a5; } html.dark .border-amber-200 { border-color: rgba(245,158,11,0.35); } html.dark .border-orange-200 { border-color: rgba(249,115,22,0.35); } html.dark .border-blue-200 { border-color: rgba(59,130,246,0.35); } html.dark .border-green-200 { border-color: rgba(34,197,94,0.35); } html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.35); } html.dark .border-violet-200 { border-color: rgba(139,92,246,0.40); } html.dark .border-red-200 { border-color: rgba(239,68,68,0.35); } html.dark .border-gray-300 { border-color: rgba(255,255,255,0.16); } html.dark .ring-violet-200 { --tw-ring-color: rgba(139,92,246,0.40); } /* ---- Botão de tema ---- */ .btn-tema { color: #6e6e73; } html.dark .btn-tema { color: #f5c542; } /* ---- Assistência Hub texture background (todas as telas) ---- */ :root { --ah-bg-texture: url('../../assets/assistencia-texture.jpg'); --ah-bg-mask-light: linear-gradient(rgba(236,245,255,.90), rgba(226,239,253,.92)); --ah-bg-mask-dark: linear-gradient(rgba(5,19,35,.88), rgba(7,31,53,.92)); } body, body.bg-haze, body.tela-bg { background-image: var(--ah-bg-mask-light), var(--ah-bg-texture) !important; background-size: cover !important; background-position: center top !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } html.dark body, html.dark body.bg-haze, html.dark body.tela-bg { background-image: var(--ah-bg-mask-dark), var(--ah-bg-texture) !important; background-size: cover !important; background-position: center top !important; background-attachment: fixed !important; background-repeat: no-repeat !important; } /* superfícies principais mantêm legibilidade sem apagar totalmente a textura */ body .bg-haze\/95 { background-color: rgba(248,250,252,.90) !important; backdrop-filter: blur(12px); } body .bg-white\/80 { background-color: rgba(255,255,255,.84) !important; backdrop-filter: blur(10px); } body .bg-white\/95 { background-color: rgba(255,255,255,.92) !important; backdrop-filter: blur(10px); } body .bg-white\/70 { background-color: rgba(255,255,255,.74) !important; backdrop-filter: blur(10px); } html.dark body .bg-haze\/95 { background-color: rgba(13,27,43,.90) !important; } html.dark body .bg-white\/80 { background-color: rgba(20,35,52,.82) !important; } html.dark body .bg-white\/95 { background-color: rgba(20,35,52,.92) !important; } html.dark body .bg-white\/70 { background-color: rgba(20,35,52,.72) !important; } /* ============================================================ Impressão: a via da OS sai sempre clara, mesmo no modo escuro. O JS remove a classe .dark antes de imprimir, mas estas regras cobrem casos em que o JS não consiga removê-la a tempo. ============================================================ */ @media print { html, html.dark, body, html.dark body { background: #fff !important; color: #000 !important; color-scheme: light !important; } html.dark input, html.dark select, html.dark textarea { background-color: #fff !important; color: #000 !important; border-color: #ccc !important; } #print-area, #print-area * { color: #000 !important; background-color: transparent !important; border-color: #ddd !important; } }