/* TreeSec — tema. Escuro = estado nativo das páginas. Claro = override abaixo (padrão). */

/* Botão de tema */
.theme-toggle{width:42px;height:42px;border-radius:12px;border:1px solid var(--ring);background:transparent;color:#e5e7eb;cursor:pointer;display:inline-grid;place-items:center;transition:background .2s,border-color .2s;margin-right:10px;flex-shrink:0}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .sun{display:none}
.theme-toggle:hover{background:rgba(255,255,255,.06)}
@media (max-width:760px){ .theme-toggle{width:40px;height:40px;margin-right:6px} }

html.light .theme-toggle{color:#334155}
html.light .theme-toggle:hover{background:rgba(15,23,42,.05);border-color:rgba(4,107,210,.30)}
html.light .theme-toggle .moon{display:none}
html.light .theme-toggle .sun{display:block}

/* ==================== TEMA CLARO (override, padrão) ==================== */
html.dark{ color-scheme:dark; }
html.light{ color-scheme:light; --bg:#f5f7fb; --muted:#54617a; --ring:rgba(15,23,42,.10); --accent:#046bd2; --shadow:0 10px 30px rgba(2,8,23,.08); }
html.light body{ background:#f5f7fb; color:#33415a; }
html.light a{ color:#0b1220; }
html.light h1, html.light h2, html.light h3, html.light h4{ color:#0b1220; }
html.light .culture .item b{ color:#0b1220; }   /* rotulo em negrito da box: no escuro e' #fff; no claro seria branco-no-branco (invisivel) */

/* Header / navegação */
html.light header{ background:rgba(255,255,255,.72); }
html.light nav a:hover{ background:rgba(15,23,42,.05); }
html.light .has-sub>ul.sub{ background:rgba(255,255,255,.98); box-shadow:0 16px 40px rgba(2,8,23,.12); }
html.light .has-sub>ul.sub li a{ color:#1e293b; }
html.light .has-sub>ul.sub li a:hover{ background:rgba(15,23,42,.05); }
@media (max-width:760px){ html.light nav#mainnav{ background:rgba(255,255,255,.98); } }
html.light nav#mainnav .has-sub>ul.sub li a{ color:#475569; }

/* Botões com gradiente mantêm texto branco */
html.light .cta, html.light .btn.primary{ color:#fff; }
html.light .btn.secondary{ color:#334155; }
html.light .btn.secondary:hover{ background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.16); }

/* Superfícies (cartões/painéis) -> branco */
html.light .card, html.light .box, html.light .about .box, html.light .stat,
html.light .input, html.light .hero-card, html.light .tier,
html.light .pillar, html.light .step, html.light .item, html.light .list .item,
html.light .vp-item, html.light .tl-body, html.light .ctx-card, html.light .compare .box,
html.light .term, html.light .entry,
html.light .eco-strip .e, html.light .refresh, html.light .more-btn, html.light .tabs,
html.light .fchip, html.light .cycle .step{ background:#ffffff; }

/* Textos secundários que eram claros -> escuros */
html.light .lead{ color:#475569; }
html.light .chip{ color:#334155; }
html.light .chip.crit{ background:rgba(224,53,53,.08); border-color:rgba(224,53,53,.35); color:#b91c1c; }
html.light .chip.danger{ background:rgba(224,53,53,.07); border-color:rgba(224,53,53,.28); color:#b91c1c; }
html.light .chip.warn{ background:rgba(180,120,0,.10); border-color:rgba(180,120,0,.35); color:#92600a; }
html.light .card-icon{ color:#334155; }
html.light .tier p, html.light .tier .name, html.light .pillar p, html.light .step p,
html.light .vp-item p, html.light .tl-body p, html.light .compare li, html.light .card p,
html.light .entry-src, html.light .ts-read p, html.light .list .item{ color:#475569; }

/* Selos de código monospace (SCAN/SHIELD/tiers R1-R4/etapas) */
html.light .step-code, html.light .tier-code, html.light .cycle .step-code,
html.light .card .step-code{ color:#1e293b; }

/* Cards de insight (destaque + lista): fundo branco e resumo legível */
html.light .article-card, html.light .article-body{ background:#ffffff; }
html.light .article-card p, html.light .article-body p{ color:#475569; }

/* Corpo dos artigos de insight (páginas de leitura) */
html.light .article, html.light .article p, html.light .article li,
html.light .article blockquote p, html.light .article td{ color:#334155; }
html.light .article strong, html.light .article b{ color:#0b1220; }

/* Chips ataque/defesa */
html.light .chip.ataque{ color:#b42318; background:rgba(224,53,53,.10); border-color:rgba(224,53,53,.28); }
html.light .chip.defesa{ color:#1d4ed8; background:rgba(4,107,210,.10); border-color:rgba(4,107,210,.30); }

/* Kicker realçado (pílula azul da marca) */
html.light .kicker{ color:#0a5cb8; border-color:rgba(4,107,210,.22); background:rgba(4,107,210,.07); font-weight:600; }

/* Rodapé */
html.light footer{ background:#eef2f8; }
html.light footer a{ color:#0b1220; }
html.light footer .muted{ color:#54617a; }
/* Links com cor inline (CNPJ, copyright) precisam de !important p/ vencer o style inline */
html.light footer .muted a{ color:#475569 !important; }
html.light footer .wrapper[style*="color"]{ color:#64748b !important; }
html.light footer .wrapper[style*="color"] a{ color:#475569 !important; }

/* Formulário */
html.light .input{ color:#1e293b; }
html.light .input::placeholder{ color:#94a3b8; }
html.light .msg.ok{ color:#15803d; }
html.light .msg.err{ color:#dc2626; }

/* Logos monocromáticos (badges e selo) -> invertidos p/ aparecer no claro */
html.light .logos img{ filter:invert(1); opacity:.8; }
html.light footer img[alt*="Assespro" i]{ filter:invert(1); }

/* Banner de cookies */
html.light #ts-cookie{ background:rgba(255,255,255,.96); color:#1e293b; }
html.light #ts-cookie a{ color:#475569; }

/* material-gratuito.html — cards, preview e formulário */
html.light .mat-card{ background:#ffffff; border-color:rgba(15,23,42,.10); }
html.light .mat-card:hover{ border-color:rgba(4,107,210,.25); }
html.light .mat-card .card-icon svg{ color:#475569; }
html.light .highlight .preview{ background:rgba(15,23,42,.04); border-color:rgba(15,23,42,.10); }
html.light .highlight .preview li{ color:#334155; border-bottom-color:rgba(15,23,42,.06); }
html.light .form-info .checklist li{ color:#334155; }
html.light .mat-card .included{ border-top-color:rgba(15,23,42,.08); color:#54617a; }
html.light .form-input{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.12); color:#1e293b; }
html.light .form-input::placeholder{ color:#94a3b8; }
html.light .form-input:focus{ border-color:rgba(4,107,210,.40); }
html.light .form-card{ background:#ffffff; border-color:rgba(15,23,42,.10); }

/* Badges de tipo (material-gratuito + obrigado-materiais): pastel → cor com contraste */
html.light .badge-relatorio{ color:#1d4ed8; background:rgba(4,107,210,.10); border-color:rgba(4,107,210,.25); }
html.light .badge-checklist{ color:#15803d; background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.25); }
html.light .badge-guia{ color:#7e22ce; background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.25); }
html.light .badge-template{ color:#c2410c; background:rgba(251,146,60,.12); border-color:rgba(251,146,60,.25); }
html.light .badge-interativo{ color:#be185d; background:rgba(236,72,153,.10); border-color:rgba(236,72,153,.25); }
html.light .bt-pdf{ color:#1d4ed8; } html.light .bt-html{ color:#15803d; } html.light .bt-inter{ color:#be185d; }
html.light .dl-icon svg{ color:#475569; }
html.light .dl-card{ background:#ffffff; border-color:rgba(15,23,42,.10); }
html.light .dl-info b{ color:#0b1220; }
html.light .dl-info span{ color:#475569; }
html.light .dl-btn{ color:#334155; }
html.light .dl-btn.primary{ color:#fff; }
html.light .dl-btn.secondary{ border-color:rgba(15,23,42,.16); }
html.light .dl-btn.secondary:hover{ background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.22); }

/* obrigado-materiais.html — cards de insights relacionados */
html.light .next-card{ background:#ffffff; border-color:rgba(15,23,42,.10); }
html.light .next-card b{ color:#0b1220; }
html.light .next-card span{ color:#475569; }
html.light .next-card:hover{ border-color:rgba(4,107,210,.25); }

/* Texto de corpo genérico (cobre p, li { color:#cbd5e1 } definido em CSS local de páginas) */
html.light main p{ color:#334155; }
html.light main li{ color:#334155; }

/* Nav links com cor inline — link da página ativa marcado via style="color:..." */
html.light nav a[style*="color"]{ color:#0b1220 !important; }

/* 404.html */
html.light .quick a{ color:#0b1220; }

/* politica-privacidade.html — rodapé .foot (usa seletor diferente do padrão) */
html.light .foot{ color:#54617a; }
html.light .foot a{ color:#475569 !important; }

/* intel.html — elementos do feed de ameaças */
html.light .tab{ color:#334155; }
html.light .tab[aria-selected="true"]{ color:#fff; }
html.light .tab .badge{ background:rgba(15,23,42,.10); color:#475569; }
html.light .tab[aria-selected="true"] .badge{ background:rgba(0,0,0,.20); color:#fff; }
html.light .fchip{ color:#334155; }
html.light .fchip[aria-pressed="true"]{ color:#1d4ed8; background:rgba(4,107,210,.12); border-color:rgba(4,107,210,.40); }
html.light .eco-strip .e{ color:#334155; }
html.light .srcbtn{ color:#475569; }
html.light .refresh{ color:#334155; }
html.light .livepill{ color:#475569; border-color:rgba(15,23,42,.12); }
html.light .feed-note a{ color:#475569; }
html.light .entry-title{ color:#0b1220; }
html.light .ecochip{ color:#1d4ed8; background:rgba(4,107,210,.08); border-color:rgba(4,107,210,.22); }
html.light .epss-hi{ color:#b91c1c; background:rgba(224,53,53,.10); border-color:rgba(224,53,53,.28); }
html.light .epss-mid{ color:#b45309; background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.30); }
html.light .epss-lo{ color:#1d4ed8; background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.24); }
html.light .pkg{ color:#1e293b; }
html.light .malflag{ color:#dc2626; background:rgba(224,53,53,.10); border-color:rgba(224,53,53,.35); }
html.light .sev.crit .score, html.light .sev.crit .word{ color:#991b1b; }
html.light .sev.high .score, html.light .sev.high .word{ color:#b91c1c; }
html.light .sev.med .score, html.light .sev.med .word{ color:#b45309; }
html.light .sev.low .score, html.light .sev.low .word{ color:#15803d; }
html.light .sev.mal .score, html.light .sev.mal .word{ color:#991b1b; }
html.light .sev.info .score, html.light .sev.info .word{ color:#475569; }
html.light .term{ background:#eef4fc; }
html.light .term-bar{ background:rgba(15,23,42,.03); border-color:rgba(15,23,42,.08); }
html.light .term-line .ok{ color:#15803d; }
html.light .term-line .crit{ color:#dc2626; }
html.light .term-line .warn{ color:#b45309; }

/* quem-somos.html */
html.light .mvv-card .icon{ background:linear-gradient(135deg, rgba(4,107,210,.12), rgba(224,53,53,.08)); border-color:rgba(15,23,42,.10); }
html.light .mvv-card .icon svg{ color:#1d4ed8; }

/* radar.html — blocos de contexto */
html.light .ctx-block li{ color:#334155; }
html.light .ctx-block .tag{ color:#475569; }
html.light .ctx-card .ctx-status{ color:#475569; }

/* insight-checklist-lgpd.html */
html.light .ctrl-tag{ color:#1d4ed8; background:rgba(4,107,210,.10); border-color:rgba(4,107,210,.25); }
html.light .legal-callout strong{ color:#dc2626; }

/* insight-writeup-rce-roteador.html + insight-cve-2026-12582 */
html.light .item-card{ background:#ffffff; }
html.light .item-card .sev{ color:#1d4ed8; }

/* insight-time-to-exploit-negativo.html */
html.light table.data td{ color:#334155; }
html.light table.data .bad{ color:#b91c1c; }
html.light .chart-title{ color:#0b1220; }
html.light figure.chart svg .cv{ fill:#0b1220; }
html.light figure.chart svg .cx{ fill:#54617a; }
html.light figure.chart svg .cv-neg{ fill:#dc2626; }
html.light figure.chart svg .cann{ fill:rgba(220,38,38,.85); }

/* insight-buffer-overflow-explicado.html — blocos sem cor legível no claro (.toc/.sources/.barrier-table) */
html.light .toc{ background:#ffffff; }
html.light .toc a{ color:#334155; }
html.light .sources{ background:#ffffff; }
html.light .barrier-table td{ color:#334155; }
html.light .barrier-table strong{ color:#0b1220; }

/* ==================== PÁGINAS DE SERVIÇO — seção "Na prática" ====================
   Os mockups de ferramenta (Burp, terminal, dashboard) são escuros de propósito e
   PERMANECEM escuros nos dois temas. Já as caixas explicativas que ficam SOBRE o fundo
   da página (anotações numeradas, cadeia de ataque, caixa de bypass) foram escritas só
   para o tema escuro: texto branco/cinza-claro sobre fundo translúcido. No claro ficavam
   invisíveis. Abaixo, o tratamento para o modo claro dessas caixas. */

/* Anotações numeradas abaixo dos mockups (web-api, infra, mobile, phishing, análise) */
html.light .annotation{ background:#ffffff; border-color:rgba(15,23,42,.10); box-shadow:0 1px 3px rgba(2,8,23,.05); }
html.light .annotation .txt{ color:#334155; }
html.light .annotation .txt strong{ color:#0b1220; }

/* Cadeia de ataque (pentest-infra) — nomes e tipos de nó */
html.light .chain-name{ color:#334155; }
html.light .chain-type{ color:#64748b; }

/* pentest-web-api — caixa "Como o bypass funciona" */
html.light .bypass-box p{ color:#475569 !important; }   /* vence o color:var(--ts-text-dim) inline */
html.light .bypass-step{ background:#ffffff; border-color:rgba(15,23,42,.08); }
html.light .bypass-step code{ color:#0b1220; }
html.light .bypass-step .strike{ color:#94a3b8; }

/* Títulos DENTRO dos mockups escuros (dashboards/terminais) precisam continuar claros no
   tema claro. A regra global `html.light h1..h4{color:#0b1220}` os deixava pretos sobre o
   fundo escuro do mockup (ex.: "Taxa de clique por departamento", "Resultados individuais",
   "Bloqueados por categoria"). Estes containers são sempre escuros nos dois temas. */
html.light :is(.gp-dash, .cf-dashboard, .burp-window, .bh-window, .term-window, .as-window, .hm, .tracker) :is(h1,h2,h3,h4){ color:#fff; }

/* ==================== MOBILE / RESPONSIVIDADE (vale para todas as páginas) ==================== */
/* Logo nunca é comprimido pelo flex quando a barra fica apertada */
.brand img{ flex-shrink:0 }

/* Botão hambúrguer — antes quase invisível (borda branca a 8% no escuro, ícone branco no claro).
   Agora tem preenchimento e contraste nos dois temas. */
.nav-toggle{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#e5e7eb }
.nav-toggle:hover{ background:rgba(255,255,255,.12); border-color:rgba(99,179,255,.5) }
html.light .nav-toggle{ background:rgba(15,23,42,.04); border-color:rgba(15,23,42,.14); color:#334155 }
html.light .nav-toggle:hover{ background:rgba(15,23,42,.07); border-color:rgba(4,107,210,.35) }

/* Padding lateral do rodapé consistente em TODAS as páginas.
   Algumas (politica-privacidade, 404, artigos de insight) não traziam a regra e o
   conteúdo colava na borda; o !important vence o `padding:16px 0` inline da barra de copyright. */
footer .wrapper{ padding-left:28px !important; padding-right:28px !important }
@media (min-width:1025px){ footer .wrapper{ padding-left:20px !important; padding-right:20px !important } }

/* Nada de rolagem horizontal da página no celular */
main p, main li, main h1, main h2, main h3{ overflow-wrap:break-word }  /* quebra palavras longas em vez de vazar */
main pre{ max-width:100%; overflow-x:auto }                             /* bloco de código rola dentro de si */
@media (max-width:760px){
  header .cta{ display:none }               /* CTA saía da margem no mobile; o menu já cobre a navegação */
  main table{ display:block; overflow-x:auto; max-width:100% }          /* tabela rola dentro de si, não empurra a página */
  main :where(section,div,article,figure,ul,ol){ min-width:0 }          /* mata o "grid/flex blowout": itens podem encolher abaixo do min-content */
  main img{ max-width:100%; height:auto }                               /* imagem nunca ultrapassa a largura da tela */
}