/* ===================================================== BreveIA — Dark Mode System Estratégia: sobrescreve tokens CSS do :root Ativação: classe .dark no OU prefers-color-scheme: dark Toggle: salvo em localStorage via dark-mode.js ===================================================== */ /* -------------------------------------------------- 1. DARK por preferência do sistema (sem JS) -------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not(.light) { --fundo: #0A1326; --superficie: #131F38; --superficie-2: #1A2843; --superficie-3: #233354; --texto: #E7ECF8; --texto-secundario: #9BA7C0; --texto-muted: #6B768C; --borda: #26344F; --borda-leve: #1A2843; /* Marca: navy + azul-real vivido (re-baseado a partir do tom principal) */ --azul: #2E6BF0; --azul-escuro: #1E50C8; --azul-claro: #5B95F8; --azul-medio: #1E3A5F; --azul-fundo: #0E1E38; /* Violeta para gradiente dos CTAs (estilo IMG2) */ --violeta: #7C5CFF; --violeta-claro: #9A82FF; --grad-primary: linear-gradient(135deg, #2E6BF0 0%, #7C5CFF 100%); --grad-primary-hover: linear-gradient(135deg, #2660E0 0%, #6E4DF5 100%); /* Dourado */ --dourado: #E6BC55; --dourado-claro: #F2CE6E; --dourado-fundo: #2A1F00; /* Acentos vivos p/ dark */ --verde-claro: #0E2A1C; --verde-escuro: #22C55E; --laranja-claro: #2A1A00; --laranja-escuro: #E0A52A; --vermelho-claro: #2A0E10; --vermelho-escuro: #F87171; /* Sombras + foco azul (era dourado) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 16px rgba(0,0,0,0.45); --shadow-lg: 0 14px 36px rgba(0,0,0,0.55); --shadow-focus: 0 0 0 3px rgba(46,107,240,0.35); } } /* -------------------------------------------------- 2. DARK forçado via classe .dark no -------------------------------------------------- */ :root.dark { --fundo: #0A1326; --superficie: #131F38; --superficie-2: #1A2843; --superficie-3: #233354; --texto: #E7ECF8; --texto-secundario: #9BA7C0; --texto-muted: #6B768C; --borda: #26344F; --borda-leve: #1A2843; /* Marca: navy + azul-real vivido (re-baseado a partir do tom principal) */ --azul: #2E6BF0; --azul-escuro: #1E50C8; --azul-claro: #5B95F8; --azul-medio: #1E3A5F; --azul-fundo: #0E1E38; /* Violeta para gradiente dos CTAs (estilo IMG2) */ --violeta: #7C5CFF; --violeta-claro: #9A82FF; --grad-primary: linear-gradient(135deg, #2E6BF0 0%, #7C5CFF 100%); --grad-primary-hover: linear-gradient(135deg, #2660E0 0%, #6E4DF5 100%); /* Dourado */ --dourado: #E6BC55; --dourado-claro: #F2CE6E; --dourado-fundo: #2A1F00; /* Acentos vivos p/ dark */ --verde-claro: #0E2A1C; --verde-escuro: #22C55E; --laranja-claro: #2A1A00; --laranja-escuro: #E0A52A; --vermelho-claro: #2A0E10; --vermelho-escuro: #F87171; /* Sombras + foco azul (era dourado) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 16px rgba(0,0,0,0.45); --shadow-lg: 0 14px 36px rgba(0,0,0,0.55); --shadow-focus: 0 0 0 3px rgba(46,107,240,0.35); } /* -------------------------------------------------- 3. LIGHT forçado via classe .light no (sobrescreve prefers-color-scheme: dark) -------------------------------------------------- */ :root.light { --fundo: #F8FAFC; --superficie: #FFFFFF; --superficie-2: #F3F4F6; --superficie-3: #E5E7EB; --texto: #111827; --texto-secundario: #6B7280; --texto-muted: #9CA3AF; --borda: #E5E7EB; --borda-leve: #F3F4F6; --azul-fundo: #EFF6FF; --azul-claro: #3B82F6; --azul-medio: #1B3A5C; --dourado: #D4A63C; --dourado-claro: #E6BC55; --dourado-fundo: #FEF3C7; --verde-claro: #D1FAE5; --verde-escuro: #166534; --laranja-claro: #FEF3C7; --laranja-escuro: #92400E; --vermelho-claro: #FEE2E2; --vermelho-escuro: #991B1B; --shadow-sm: 0 1px 2px rgba(15,42,68,0.04); --shadow-md: 0 4px 12px rgba(15,42,68,0.08); --shadow-lg: 0 12px 32px rgba(15,42,68,0.12); --shadow-focus: 0 0 0 3px rgba(212,166,60,0.25); } /* -------------------------------------------------- 4. Ajustes globais dark — elementos que não pegam só via token (imagens, inputs, scrollbars) -------------------------------------------------- */ :root.dark body, @media (prefers-color-scheme: dark) { :root:not(.light) body } { color-scheme: dark; } :is(:root.dark, @media (prefers-color-scheme: dark) :root:not(.light)) img:not([src*=".svg"]) { opacity: .92; } /* Inputs e selects no dark */ :root.dark input, :root.dark textarea, :root.dark select { background-color: var(--superficie-2); color: var(--texto); border-color: var(--borda); } :root.dark input::placeholder, :root.dark textarea::placeholder { color: var(--texto-muted); } /* Cards e superfícies */ :root.dark .detail-card, :root.dark .breveia-chat { background: var(--superficie); border-color: var(--borda); } :root.dark .breveia-chat__msg--assistant { background: var(--superficie-2); border-color: var(--borda); color: var(--texto); } :root.dark .breveia-chat__msg--user { background: #1F4B8C; } :root.dark .breveia-chat__input { background: var(--superficie-2); color: var(--texto); border-color: var(--borda); } :root.dark .breveia-chat__header, :root.dark .breveia-chat__sugestoes, :root.dark .breveia-chat__input-area { background: var(--superficie); border-color: var(--borda); } :root.dark .breveia-chat__messages { background: var(--superficie-2); } :root.dark .breveia-chat__sugestao { background: var(--superficie-3); border-color: var(--borda); color: var(--texto-secundario); } :root.dark .breveia-chat__sugestao:hover { background: var(--azul-medio); border-color: var(--azul-claro); color: var(--azul-claro); } /* Upgrade CTA dark */ :root.dark .breveia-chat-upgrade { background: linear-gradient(135deg, #0E1E38 0%, #0A1326 100%); border-color: var(--borda); } :root.dark .breveia-chat-upgrade__title { color: var(--texto); } :root.dark .breveia-chat-upgrade__list li { color: var(--texto-secundario); } /* Scrollbar dark */ :root.dark ::-webkit-scrollbar-track { background: var(--superficie-2); } :root.dark ::-webkit-scrollbar-thumb { background: var(--borda); } :root.dark ::-webkit-scrollbar-thumb:hover { background: var(--texto-muted); } /* ── Correções dark mode — página do edital ── */ /* Badge tipo/número */ :root.dark .edital-detail__type-badge, @media (prefers-color-scheme:dark){:root:not(.light) .edital-detail__type-badge} { background: var(--superficie-3) !important; color: var(--texto) !important; } /* Título e org */ :root.dark .edital-detail__title, :root.dark .edital-detail__org, :root.dark .edital-detail__org strong { color: var(--texto) !important; } /* Botões ghost no dark */ :root.dark .btn--ghost { color: var(--texto) !important; border-color: var(--borda) !important; } :root.dark .btn--ghost:hover { background: var(--superficie-2) !important; } /* Badge UF */ :root.dark .badge--blue { background: var(--azul-medio) !important; color: var(--azul-claro) !important; } :root.dark .badge--neutral { background: var(--superficie-3) !important; color: var(--texto-secundario) !important; } /* Valor estimado na sidebar */ :root.dark .kv__value--money { color: var(--texto) !important; } /* Card propaganda */ :root.dark .propaganda-parceiro, :root.dark [class*="propaganda"] { background: var(--superficie-2) !important; border-color: var(--borda) !important; color: var(--texto) !important; } :root.dark [class*="propaganda"] p, :root.dark [class*="propaganda"] span, :root.dark [class*="propaganda"] a:not(.btn) { color: var(--texto-secundario) !important; } /* ── Correções dark mode — dashboard ── */ /* Título principal */ :root.dark .dashboard__title, :root.dark h1, :root.dark h2, :root.dark h3 { color: var(--texto) !important; } /* Badges de UF */ :root.dark .funil-uf__btn, :root.dark [class*="uf-btn"], :root.dark [class*="funil"] button { background: var(--superficie-3) !important; color: var(--texto) !important; border-color: var(--borda) !important; } /* Texto auxiliar / orientação */ :root.dark .funil-hint, :root.dark [class*="hint"], :root.dark [class*="orientacao"], :root.dark .dashboard__lead { color: var(--texto-secundario) !important; } /* Botão selecionado/ativo nos filtros */ :root.dark .btn--selected, :root.dark .btn.active, :root.dark [aria-pressed="true"] { background: var(--azul-medio) !important; color: var(--azul-claro) !important; border-color: var(--azul-claro) !important; } /* Filtros de texto */ :root.dark .filtros-rapidos button, :root.dark [class*="filtro"] button, :root.dark [class*="filter"] button { color: var(--texto) !important; border-color: var(--borda) !important; background: var(--superficie-2) !important; } /* Cards de edital */ :root.dark .card-edital__org, :root.dark .card-edital__uf, :root.dark [class*="card-edital"] [class*="uf"], :root.dark [class*="card-edital"] [class*="title"], :root.dark [class*="card-edital"] [class*="org"] { color: var(--texto) !important; } /* Título e objeto do card */ :root.dark .card-edital__objeto, :root.dark .card-edital__title { color: var(--texto) !important; } /* Links de ação no card (Resumo rápido / Analisar) */ :root.dark .card-edital__actions a, :root.dark .card-edital__actions button, :root.dark [class*="card"] [class*="action"] a, :root.dark [class*="card"] [class*="action"] button { color: var(--azul-claro) !important; } /* Contador de editais */ :root.dark .dashboard__count, :root.dark [class*="count-badge"], :root.dark .badge-count { background: var(--superficie-3) !important; color: var(--texto) !important; } /* Objeto do card (link) */ :root.dark a.edital-card__objeto, :root.dark .edital-card__objeto { color: var(--texto) !important; } :root.dark a.edital-card__objeto:hover { color: var(--azul-claro) !important; } /* Fundo dos filtros rápidos */ :root.dark .filtros-rapidos, :root.dark [class*="filtros"], :root.dark [class*="funil-filtros"], :root.dark .dashboard__filters { background: var(--superficie) !important; border-color: var(--borda) !important; } :root.dark .filtros-rapidos button, :root.dark [class*="filtros"] button { background: var(--superficie-2) !important; color: var(--texto) !important; border-color: var(--borda) !important; } /* Filtros — cabeçalho e grupo de UFs */ :root.dark div.filters__step-head { background: var(--superficie-2) !important; color: var(--texto) !important; border-color: var(--borda) !important; } :root.dark div.filters__group, :root.dark div.filters__group--ufs { background: var(--superficie) !important; border-color: var(--borda) !important; } :root.dark div.filters__group *, :root.dark div.filters__group--ufs * { color: var(--texto) !important; } :root.dark div.filters__group input, :root.dark div.filters__group select, :root.dark div.filters__group--ufs input { background: var(--superficie-2) !important; border-color: var(--borda) !important; color: var(--texto) !important; } /* Filtros — steps */ :root.dark section.filters__step { background: var(--superficie) !important; border-color: var(--borda) !important; } :root.dark section.filters__step * { color: var(--texto) !important; } :root.dark section.filters__step input, :root.dark section.filters__step select, :root.dark section.filters__step textarea { background: var(--superficie-2) !important; border-color: var(--borda) !important; color: var(--texto) !important; } :root.dark section.filters__step input::placeholder { color: var(--texto-muted) !important; } /* Step head — mesmo tom do section */ :root.dark div.filters__step-head { background: var(--superficie) !important; border-bottom-color: var(--borda) !important; } /* Ícone do órgão no card */ :root.dark div.edital-card__orgao-icon { background: var(--superficie-3) !important; color: var(--azul-claro) !important; border-color: var(--borda) !important; } /* Título do card de parceiro */ :root.dark h4.partner-ad__title { color: var(--texto) !important; } /* Filter pills */ :root.dark button.filter-pill { background: var(--superficie-2) !important; color: var(--texto) !important; border-color: var(--borda) !important; } :root.dark button.filter-pill:hover, :root.dark button.filter-pill.active, :root.dark button.filter-pill[aria-pressed="true"] { background: var(--azul-medio) !important; color: var(--azul-claro) !important; border-color: var(--azul-claro) !important; } /* Filter pill ativo */ :root.dark button.filter-pill.active { background: var(--azul-claro) !important; color: #0D1117 !important; border-color: var(--azul-claro) !important; } /* Strong no dark */ :root.dark strong { color: var(--texto) !important; font-weight: 700; } /* Ícones em li — inverter no dark */ :root.dark li { color: var(--texto) !important; } :root.dark li svg, :root.dark li img { filter: invert(1) !important; } :root.dark li a { color: var(--azul-claro) !important; } /* Spans no dark */ :root.dark span { color: var(--texto) !important; } :root.dark span[class*="badge"], :root.dark span[class*="tag"], :root.dark span[class*="label"], :root.dark span[class*="pill"] { background: var(--superficie-3) !important; color: var(--texto) !important; border-color: var(--borda) !important; } /* Título da seção do drawer */ :root.dark p.drawer-section__title { color: #E6EDF3 !important; font-weight: 600; opacity: 1 !important; } /* Score mini laranja — fundo mais claro no dark */ :root.dark span.score-mini.score-mini--orange, :root.dark span.score-mini--orange { background: #3D2200 !important; color: var(--laranja-escuro) !important; border-color: #5C3300 !important; } /* Meta label do drawer */ :root.dark span.drawer-meta__label { background: var(--superficie-3) !important; color: var(--texto-secundario) !important; border-color: var(--borda) !important; } /* Cabeçalho do drawer */ :root.dark header.breveia-drawer__head { background: var(--superficie) !important; border-bottom-color: var(--borda) !important; color: var(--texto) !important; } :root.dark header.breveia-drawer__head * { color: var(--texto) !important; } /* Meta label do drawer */ :root.dark span.drawer-meta__label { background: var(--superficie-3) !important; color: var(--texto-secundario) !important; border-color: var(--borda) !important; } /* Número das stats do drawer */ :root.dark div.drawer-stat__num.tabular { color: var(--texto) !important; } /* Dica do drawer — não usar branco puro */ :root.dark div.drawer-dica { background: var(--superficie-2) !important; border-color: var(--borda) !important; color: var(--texto-secundario) !important; } :root.dark div.drawer-dica * { color: var(--texto-secundario) !important; } /* Meta label drawer — tom mais escuro */ :root.dark span.drawer-meta__label { background: var(--azul-escuro) !important; color: var(--azul-claro) !important; border-color: var(--azul-medio) !important; } /* Drawer body e meta label — mesma cor de fundo */ :root.dark div.breveia-drawer__body { background: var(--superficie-2) !important; } :root.dark span.drawer-meta__label { background: var(--superficie-2) !important; color: var(--texto-secundario) !important; border-color: var(--borda) !important; } /* Stat do drawer — fundo azul escuro */ :root.dark div.drawer-stat { background: var(--azul-escuro) !important; border-color: var(--azul-medio) !important; } :root.dark div.drawer-stat * { color: var(--texto) !important; } /* Score mini — todas as variantes mais claras no dark */ :root.dark span.score-mini { opacity: 1 !important; } :root.dark span.score-mini--green { background: #0D3320 !important; color: #3FB950 !important; border-color: #1A4D2E !important; } :root.dark span.score-mini--orange { background: #3D2200 !important; color: #D29922 !important; border-color: #5C3300 !important; } :root.dark span.score-mini--red { background: #3D0A0A !important; color: #F85149 !important; border-color: #5C1010 !important; } :root.dark span.score-mini--yellow { background: #2A1F00 !important; color: #E3B341 !important; border-color: #3D2D00 !important; } :root.dark span.score-mini--blue { background: #0D1B2A !important; color: #58A6FF !important; border-color: #1F3A5C !important; } /* ── Correções dark mode — página de planos ── */ /* Card plano destaque */ :root.dark article.plan-card--featured { background: var(--azul-escuro) !important; border-color: var(--dourado) !important; box-shadow: 0 0 0 2px var(--dourado), var(--shadow-lg) !important; } /* Ícone feature — inverter */ :root.dark span.plan-card__feature-icon { filter: invert(1) !important; opacity: 0.9; } /* Botão gold — letra branca */ :root.dark button.btn.btn--gold.btn--lg, :root.dark a.btn.btn--gold.btn--lg, :root.dark .btn--gold { color: #0D1117 !important; background: var(--dourado) !important; border-color: var(--dourado) !important; } :root.dark .btn--gold:hover { background: var(--dourado-claro) !important; color: #0D1117 !important; } /* Preço e período — destaque */ :root.dark span.plan-card__price-value { color: var(--texto) !important; font-weight: 700; } :root.dark span.plan-card__price-period { color: var(--texto-secundario) !important; } /* Nome do plano */ :root.dark div.plan-card__name, :root.dark .plan-card__name { color: var(--texto) !important; font-weight: 700; } /* Ribbon do card — texto azul escuro */ :root.dark .plan-card__ribbon { color: var(--azul-escuro) !important; } /* Botão CTA bloqueado (locked) — texto SEMPRE legível no dark, normal E hover. Bug anterior: um segundo bloco forçava `color: var(--azul-escuro)` no estado normal (texto invisível sobre o fundo escuro), e o branco !important do dashboard.css só vencia no :hover. Consolidado num bloco único com cor clara nos dois estados; o :hover entra na MESMA regra de cor para não depender de desempate de cascata. (Correção na origem, no dark-mode.css — nunca no dashboard.css.) */ :root.dark a.edital-card__cta.edital-card__cta--locked, :root.dark a.edital-card__cta.edital-card__cta--locked:hover { color: var(--azul-claro) !important; } :root.dark a.edital-card__cta.edital-card__cta--locked { opacity: 0.85; } :root.dark a.edital-card__cta.edital-card__cta--locked:hover { opacity: 1; } /* Form wrap de autenticação */ :root.dark .auth__form-wrap { background: var(--superficie) !important; border-color: var(--borda) !important; } /* Form wrap — tom azul intermediário */ :root.dark .auth__form-wrap { background: var(--azul-medio) !important; border-color: var(--borda) !important; } /* Label KV — fundo mais escuro */ :root.dark span.kv__label { color: var(--texto-secundario) !important; background: transparent !important; } /* Critério label — fundo azul escuro padrão */ :root.dark .criterio__label { color: var(--texto) !important; background: transparent !important; } :root.dark .criterio { background: var(--superficie) !important; border-color: var(--borda) !important; } /* Critério — fundo mais escuro */ :root.dark .criterio { background: var(--fundo) !important; border-color: var(--borda) !important; } /* Critério label — fundo azul escuro padrão */ :root.dark .criterio__label { color: var(--texto) !important; background: transparent !important; } :root.dark .criterio { background: var(--superficie) !important; border-color: var(--borda) !important; } /* Critério — mesmo fundo do detail-card */ :root.dark .criterio { background: var(--superficie) !important; } /* Critério label — mesmo fundo do detail-card */ :root.dark span.criterio__label { background: var(--superficie) !important; color: var(--texto) !important; } /* Auth form wrap — dark */ :root.dark div.breveia-auth__form-wrap { background: var(--superficie) !important; border-color: var(--borda) !important; color: var(--texto) !important; } /* Links — branco no dark */ :root.dark a { color: var(--texto) !important; } :root.dark a:hover { color: var(--azul-claro) !important; } /* Tom base do dark — #091423 */ :root.dark { --fundo: #091423 !important; --superficie: #0D1B2A !important; --superficie-2: #111F2E !important; --superficie-3: #162535 !important; } /* Fundo principal da tela */ :root.dark main#breveia-main-content.breveia-main { background: #020B19 !important; } /* Score label — fundo tom base dark */ :root.dark span.score-label, :root.dark span.score-label--green, :root.dark span.score-label--orange, :root.dark span.score-label--red, :root.dark span.score-label--yellow { background: var(--superficie) !important; } /* Score badge value — tom base dark */ :root.dark span.score-badge__value { background: var(--superficie) !important; color: var(--texto) !important; } /* Profile tabs */ :root.dark button.profile-tab { color: var(--texto-secundario) !important; } :root.dark button.profile-tab.active { color: var(--texto) !important; font-weight: 700 !important; } /* Profile tab inativo — branco sem negrito */ :root.dark button.profile-tab:not(.active) { color: var(--texto) !important; font-weight: 400 !important; } /* Links do footer — cor suave compatível com dark */ :root.dark .breveia-footer a { color: var(--texto-secundario) !important; } :root.dark .breveia-footer a:hover { color: var(--texto) !important; } /* Profile wrap — fundo consistente */ :root.dark .profile-wrap { background: #020B19 !important; } /* Garantir que main cobre até o footer */ :root.dark .breveia-main { background: #020B19 !important; min-height: 100vh; } /* Barra de busca no header — mais clara */ :root.dark .breveia-header__search-input { background: rgba(255,255,255,0.1) !important; color: var(--texto) !important; border-color: rgba(255,255,255,0.15) !important; } :root.dark .breveia-header__search-input::placeholder { color: rgba(255,255,255,0.45) !important; } :root.dark .breveia-header__search-input:focus { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.3) !important; } /* Ocultar busca no header em mobile */ @media (max-width: 768px) { .breveia-header__search { display: none !important; } } /* Badge gold — ícone dourado no dark */ :root.dark span.badge.badge--gold, :root.dark span.badge--gold { background: var(--dourado-fundo) !important; color: var(--dourado) !important; border-color: var(--dourado) !important; } /* Resumo Rápido — texto branco e fundo destacado no dark */ :root.dark button.edital-card__cta.edital-card__cta--rapido { color: #ffffff !important; background: var(--azul-medio) !important; border-color: var(--azul-claro) !important; } :root.dark button.edital-card__cta.edital-card__cta--rapido:hover { background: var(--azul-claro) !important; color: #0D1117 !important; } /* Análise Completa — texto branco no dark */ :root.dark a.edital-card__cta.edital-card__cta--full { color: #ffffff !important; } :root.dark a.edital-card__cta.edital-card__cta--full:hover { color: var(--azul-claro) !important; } /* Filter pill hover — texto branco */ :root.dark button.filter-pill:hover { color: #ffffff !important; } /* Filter pill ativo — texto branco */ :root.dark button.filter-pill.active { color: #ffffff !important; } /* Filter pill ativo — fundo geral, texto e borda */ :root.dark button.filter-pill.active { background: #020B19 !important; color: var(--texto) !important; border-color: var(--azul-claro) !important; } /* ---------- TAG MATERIAL / SERVIÇO (dark) ---------- */ /* Os tons claros (texto #1D4ED8/#B45309/#0F766E) ficam ilegíveis no dark; sobe a luminosidade do texto e mantém o fundo translúcido. */ :root.dark .tag--matserv-m { color: #93C5FD !important; background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .45); } :root.dark .tag--matserv-s { color: #FCD34D !important; background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .45); } :root.dark .tag--matserv-ms { color: #5EEAD4 !important; background: rgba(20, 184, 166, .16); border-color: rgba(20, 184, 166, .45); } /* ---------- PILL "Só oportunidades" (dark) ---------- */ :root.dark .filter-pill--abertos.active { background: rgba(16, 185, 129, .16) !important; border-color: var(--verde) !important; color: #6EE7B7 !important; } :root.dark .filter-pill--abertos:hover { border-color: var(--verde) !important; color: #6EE7B7 !important; } /* ============================================================ CTAs PRIMÁRIOS — gradiente azul→violeta (identidade dark, IMG2) ============================================================ */ :root.dark .btn--primary, :root.dark button.btn--primary, :root.dark a.btn--primary { background: var(--grad-primary) !important; border: none !important; color: #fff !important; box-shadow: 0 4px 14px rgba(46,107,240,0.30); transition: box-shadow .18s ease, transform .18s ease, background .18s ease; } :root.dark .btn--primary:hover, :root.dark button.btn--primary:hover, :root.dark a.btn--primary:hover { background: var(--grad-primary-hover) !important; box-shadow: 0 6px 20px rgba(124,92,255,0.40); transform: translateY(-1px); color: #fff !important; } :root.dark .btn--primary:active, :root.dark button.btn--primary:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(46,107,240,0.28); } /* Botão dourado mantém identidade, mas com contraste melhor no navy */ :root.dark .btn--gold { color: #0A1326 !important; } /* ============================================================ CHROME UNIFICADO — header + sidebar + topbar = um único navy (o mesmo do corpo). Só os CARDS ficam mais claros (--superficie), então eles "saltam" no canvas. Resolve o degrau de cor entre a header e a sidebar (o "espaço perdido") e dá cor única, como no exemplo, aproveitando melhor a tela com os cards. ============================================================ */ :root.dark .breveia-header, :root.dark .edital-detail__sidebar, :root.dark .edital-detail__topbar { background: #0A1326 !important; } :root.dark .breveia-header { border-bottom: 1px solid var(--borda) !important; } :root.dark .edital-detail__sidebar { border-right: 1px solid var(--borda) !important; } :root.dark .edital-detail__topbar { border-bottom: 1px solid var(--borda) !important; } /* === FIX DEFINITIVO (07/06): sidebar fixa + linha da header some === */ :root.dark .breveia-header, :root.dark .breveia-header.scrolled, :root.dark .breveia-header__inner { border-bottom: none !important; box-shadow: none !important; } :root.dark .edital-detail__sidebar { position: fixed !important; top: var(--header-h) !important; left: 0 !important; width: 200px !important; height: calc(100vh - var(--header-h)) !important; } :root.dark .edital-detail__sidebar .sidebar-section:first-child { padding-top: var(--sp-3) !important; margin-top: 0 !important; } /* === Barra "Voltar ao dashboard" = mesmo fundo do título (hero) + sem linha === */ :root.dark .edital-detail__topbar { background: linear-gradient(135deg, var(--superficie) 0%, var(--azul-fundo) 100%) !important; border-bottom: none !important; } /* === Footer com a mesma cor do header === */ :root.dark .breveia-footer { background: #0A1326 !important; } /* === Linha branca separando a header do conteúdo (restaurada) === */ :root.dark .breveia-header { border-bottom: 1px solid rgba(255,255,255,0.14) !important; }