/* Onclick · camada de enriquecimento visual (didatica + andragogia)
   Aprimora os capitulos do portal /onclick/ sem alterar a estrutura canonica:
   contadores animados, players de fluxo "rodar simulacao", icones de secao,
   aneis de progresso, linhas do tempo, reveal em cascata e cartoes de proximos passos.
   Zero CDN. Tokens Stone (com fallback). Acessivel. Respeita prefers-reduced-motion.
   Escopo de uso: apenas paginas /onclick/ (ativado por /js/onclick-enhance.js). */

/* ---------- icones de secao (h2) ---------- */
.article-body .oce-h2{display:flex;align-items:flex-start;gap:11px}
.article-body .oce-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;margin-top:2px;
  background:linear-gradient(160deg,var(--stone-mint,#D2FF7D),var(--stone-cinza-0,#F5FFF5));
  border:1px solid var(--line,#E2E8F0);color:var(--stone-green-deep,#00461E)}
.article-body .oce-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- KPI: contador + barra de acento + hover ---------- */
.oc-kpi{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.oc-kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm,0 6px 18px rgba(15,23,42,.08))}
.oc-kpi-v.oce-counting{font-variant-numeric:tabular-nums}
.oc-kpi .oce-ring{position:absolute;top:10px;right:10px;width:42px;height:42px;opacity:.92}
.oc-kpi .oce-ring circle{fill:none;stroke-width:5}
.oc-kpi .oce-ring .oce-ring-bg{stroke:var(--line,#E2E8F0)}
.oc-kpi .oce-ring .oce-ring-fg{stroke:var(--stone-green,#00D700);stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}

/* ---------- player de fluxo "rodar simulacao" ---------- */
.oce-flowplayer{margin:26px 0;border:1px solid var(--line,#E2E8F0);border-radius:14px;
  background:linear-gradient(180deg,#FAFFFA,#fff);overflow:hidden;max-width:100%}
.oce-flowplayer .oc-flow,.oce-flowplayer figure{margin:0;border:0;border-radius:0;background:transparent}
.oce-fp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-bottom:1px solid var(--line,#E2E8F0);background:#fff}
.oce-fp-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:0;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;
  color:#fff;background:var(--stone-green-deep,#00461E);transition:filter .2s ease,transform .1s ease}
.oce-fp-btn:hover{filter:brightness(1.12)}.oce-fp-btn:active{transform:scale(.97)}
.oce-fp-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.oce-fp-title{font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--stone-green-deep,#00461E)}
.oce-fp-meters{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.oce-meter{display:flex;flex-direction:column;line-height:1.1}
.oce-meter b{font-size:18px;font-weight:800;color:var(--stone-green-deep,#00461E);
  font-variant-numeric:tabular-nums}
.oce-meter span{font-size:11px;color:var(--muted,#64748B)}
.oce-fp-stage{padding:14px;overflow-x:auto}
/* token que percorre o fluxo */
.oce-token{fill:var(--stone-green,#00D700);stroke:#fff;stroke-width:1.5;
  filter:drop-shadow(0 1px 2px rgba(0,70,30,.4))}
/* destaque de no aceso */
.oce-lit{animation:oceLit 1s ease}
@keyframes oceLit{0%{filter:none}35%{filter:drop-shadow(0 0 7px var(--stone-lime,#A5FA00))}100%{filter:none}}

/* ---------- linha do tempo / passos ---------- */
.oce-steps{list-style:none;margin:24px 0 8px;padding:0;position:relative}
.oce-steps::before{content:"";position:absolute;left:17px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--stone-green,#00D700),var(--stone-mint,#D2FF7D))}
.oce-steps li{position:relative;padding:0 0 18px 50px;font-size:14.5px;line-height:1.55;
  color:var(--ink-2,#1F2937);text-align:left}
.oce-steps li::before{content:counter(oce-step);counter-increment:oce-step;
  position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  color:var(--stone-green-deep,#00461E);background:#fff;
  border:2px solid var(--stone-green,#00D700)}
.oce-steps{counter-reset:oce-step}

/* ---------- conclusoes com check ---------- */
.oc-takeaways ul{list-style:none;padding-left:0}
.oc-takeaways li{position:relative;padding-left:30px}
.oc-takeaways li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;
  border-radius:50%;background:var(--stone-green,#00D700);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>") center/14px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/></svg>") center/14px no-repeat}

/* ---------- proximos passos como cartoes ---------- */
.next-steps ul.oce-cards{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;padding:0;margin:14px 0 0}
.next-steps ul.oce-cards li{margin:0}
.next-steps ul.oce-cards a{display:flex;align-items:center;gap:10px;height:100%;
  padding:14px 16px;border:1px solid var(--line,#E2E8F0);border-radius:12px;background:#fff;
  color:var(--ink,#0F172A);text-decoration:none;font-weight:600;font-size:14px;line-height:1.4;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.next-steps ul.oce-cards a:hover{border-color:var(--stone-green,#00D700);
  box-shadow:var(--shadow-sm,0 6px 18px rgba(15,23,42,.08));transform:translateY(-2px)}
.next-steps ul.oce-cards a::after{content:"";flex:0 0 auto;width:18px;height:18px;margin-left:auto;
  background:var(--stone-green-deep,#00461E);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M5 12h12M13 6l6 6-6 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M5 12h12M13 6l6 6-6 6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}

/* ---------- FAQ: marcador de pergunta ---------- */
.oc-faq-item h3{position:relative;padding-left:28px}
.oc-faq-item h3::before{content:"?";position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;
  font-weight:800;color:#fff;background:var(--stone-green-2,#007D00)}
.oc-faq{display:grid;gap:18px;margin-top:14px}
.oc-faq-item{margin:0;padding:18px 20px;border:1px solid var(--line,#E2E8F0);border-radius:14px;
  background:linear-gradient(180deg,#fff,#FBFFFB);box-shadow:0 8px 24px rgba(15,23,42,.04)}
.oc-faq-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:5px 10px;
  border-radius:999px;background:#ECFDF3;color:var(--stone-green-deep,#00461E);font-size:11px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.oc-faq-item h3{margin:12px 0 10px;font-size:19px;line-height:1.35;color:var(--ink,#0F172A)}
.oc-faq-item p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:var(--ink-2,#1F2937);text-align:left}
.oc-faq-bullets{margin:14px 0 0;padding-left:20px}
.oc-faq-bullets li{margin:7px 0;font-size:14px;line-height:1.55;color:var(--ink-2,#1F2937)}
.oc-faq-table{margin:16px 0 0}
.oc-faq-table figcaption{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--stone-green-deep,#00461E)}
.oc-faq-table-scroll{overflow-x:auto;border:1px solid var(--line,#E2E8F0);border-radius:12px;
  background:#fff;-webkit-overflow-scrolling:touch}
.oc-faq-table table{width:100%;border-collapse:collapse;min-width:520px}
.oc-faq-table th{background:var(--stone-green-deep,#00461E);color:#fff;font-size:12.5px;
  font-weight:700;text-align:left;padding:10px 12px}
.oc-faq-table td{padding:10px 12px;border-bottom:1px solid var(--line,#E2E8F0);font-size:13px;
  line-height:1.45;color:var(--ink-2,#1F2937);vertical-align:top}
.oc-faq-table tbody tr:nth-child(even) td{background:#FAFFFA}
.oc-faq-table-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted,#64748B);text-align:left}
.oc-copy-block{margin-top:16px;padding:14px 16px;border:1px solid #CDE9CF;border-radius:12px;
  background:linear-gradient(180deg,#F7FFF7,#EFFBF0)}
.oc-copy-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.oc-copy-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--stone-green-deep,#00461E)}
.oc-copy-title{display:block;margin:10px 0 8px;font-size:14px;line-height:1.45;color:var(--ink,#0F172A)}
.oc-copy-text{padding:12px 14px;border:1px dashed #99C99D;border-radius:10px;background:#fff;
  white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--ink-2,#1F2937)}
.oc-copy-note{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted,#64748B);text-align:left}
.oc-copy-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:0;
  border-radius:999px;background:var(--stone-green-deep,#00461E);color:#fff;font-size:12.5px;
  font-weight:800;cursor:pointer;transition:filter .2s ease,transform .1s ease}
.oc-copy-btn:hover{filter:brightness(1.08)}
.oc-copy-btn:active{transform:scale(.98)}
.oc-copy-btn:focus-visible{outline:2px solid var(--stone-green,#00D700);outline-offset:2px}

/* ---------- cards comerciais / printáveis ---------- */
.oc-sales-kit{margin:34px 0}
.oc-sales-head{margin-bottom:16px}
.oc-sales-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:#ECFDF3;color:var(--stone-green-deep,#00461E);font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.oc-sales-head h2{margin:10px 0 8px;font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--ink,#0F172A)}
.oc-sales-head p{margin:0;max-width:820px;font-size:15px;line-height:1.65;color:var(--ink-2,#1F2937);text-align:left}
.oc-sales-grid{display:grid;grid-template-columns:1fr;gap:14px}
.oc-sales-card{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;min-height:430px;
  padding:18px;border:1px solid var(--line,#E2E8F0);border-radius:14px;
  background:linear-gradient(180deg,#fff,#F8FFF4);box-shadow:0 10px 26px rgba(15,23,42,.05)}
.oc-sales-kicker{display:inline-flex;align-items:center;width:max-content;padding:5px 10px;border-radius:999px;
  background:#E9FFF0;color:var(--stone-green-deep,#00461E);font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.oc-sales-card h3{margin:0;font-size:18px;line-height:1.28;color:var(--ink,#0F172A)}
.oc-sales-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2,#1F2937);text-align:left}
.oc-sales-points{margin:0;padding-left:20px}
.oc-sales-points li{margin:7px 0;font-size:13.5px;line-height:1.55;color:var(--ink-2,#1F2937)}
.oc-sales-card .oc-copy-block{margin-top:auto}
.oc-sales-foot{font-size:12px;line-height:1.5;color:var(--muted,#64748B)}

/* ---------- reveal em cascata (complementa o .oc-reveal existente) ---------- */
.oce-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.oce-reveal.is-visible{opacity:1;transform:none}

@media (min-width:720px){
  .oc-sales-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* aspect-ratio fixo travava a altura em 430px e o conteúdo (645px) vazava
     sobre os cards vizinhos e sobre o próximo H2; altura automática resolve. */
  .oc-sales-card{min-height:0;height:auto}
}
@media (min-width:1500px){
  .oc-sales-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .oce-fp-meters{margin-left:0;width:100%}
  .article-body .oce-ico{width:30px;height:30px}
  .oc-faq-item{padding:16px}
  .oc-copy-head{align-items:flex-start}
  .oc-sales-card{min-height:0}
}
@media print{
  .oc-sales-grid{grid-template-columns:1fr 1fr}
  .oc-sales-card,.oc-faq-item{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  .oc-copy-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  .oce-reveal,.oc-kpi{transition:none!important}
  .oce-reveal{opacity:1!important;transform:none!important}
  .oc-kpi .oce-ring .oce-ring-fg{transition:none!important}
  .oce-lit{animation:none!important}
}

/* ========== DARK MODE — onclick-enhance.css ========== */
/* Ativa com [data-theme="dark"] no :root (via toggle) ou prefers-color-scheme:dark */

/* Mixin auxiliar: aplica os overrides a ambas as condições */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --oc-bg-card: #1E293B;
  --oc-bg-kpi: linear-gradient(160deg,#162032,#1a2840);
  --oc-bg-tldr: rgba(0,70,30,.25);
  --oc-bg-pull: #00461E;
  --oc-bg-cmp-head: #00461E;
  --oc-bg-faq: #1E293B;
  --oc-bg-sales: #162032;
  --oc-bg-steps-line: linear-gradient(180deg,#00D700,#A5FA00);
}}
[data-theme="dark"] {
  --oc-bg-card: #1E293B;
  --oc-bg-kpi: linear-gradient(160deg,#162032,#1a2840);
  --oc-bg-tldr: rgba(0,70,30,.25);
  --oc-bg-pull: #00461E;
  --oc-bg-cmp-head: #00461E;
  --oc-bg-faq: #1E293B;
  --oc-bg-sales: #162032;
  --oc-bg-steps-line: linear-gradient(180deg,#00D700,#A5FA00);
}

/* KPI cards */
[data-theme="dark"] .oc-kpi,
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .oc-kpi}{}
[data-theme="dark"] .oc-kpi { background: var(--oc-bg-kpi, linear-gradient(160deg,#162032,#1a2840)); border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-kpi { background: linear-gradient(160deg,#162032,#1a2840); border-color: #334155; } }
[data-theme="dark"] .oc-kpi-v { color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-kpi-v { color: #4ade80; } }
[data-theme="dark"] .oc-kpi-l { color: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-kpi-l { color: #94A3B8; } }

/* TL;DR */
[data-theme="dark"] .oc-tldr { background: rgba(0,70,30,.28); border-left-color: #00D700; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-tldr { background: rgba(0,70,30,.28); border-left-color: #00D700; } }
[data-theme="dark"] .oc-tldr p { color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-tldr p { color: #CBD5E1; } }

/* Pull quote */
[data-theme="dark"] .oc-pull { background: #0f2d1a; color: #E2E8F0; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-pull { background: #0f2d1a; color: #E2E8F0; } }

/* Nuvini badge */
[data-theme="dark"] .oc-nuvini { background: #162032; border-color: #334155; color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-nuvini { background: #162032; border-color: #334155; color: #CBD5E1; } }
[data-theme="dark"] .oc-nuvini strong { color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-nuvini strong { color: #4ade80; } }

/* Takeaways */
[data-theme="dark"] .oc-takeaways { background: #1a2536; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-takeaways { background: #1a2536; border-color: #334155; } }
[data-theme="dark"] .oc-takeaways li { color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-takeaways li { color: #CBD5E1; } }

/* Cards .oc-card */
[data-theme="dark"] .oc-card { background: #1E293B; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-card { background: #1E293B; border-color: #334155; } }
[data-theme="dark"] .oc-card h4 { color: #E2E8F0; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-card h4 { color: #E2E8F0; } }
[data-theme="dark"] .oc-card p { color: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-card p { color: #94A3B8; } }

/* Flow player */
[data-theme="dark"] .oce-flowplayer { background: linear-gradient(180deg,#162032,#1E293B); border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oce-flowplayer { background: linear-gradient(180deg,#162032,#1E293B); border-color: #334155; } }
[data-theme="dark"] .oce-fp-bar { background: #1E293B; border-bottom-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oce-fp-bar { background: #1E293B; border-bottom-color: #334155; } }

/* Ícones de seção */
[data-theme="dark"] .article-body .oce-ico { background: linear-gradient(160deg,#1a3020,#162032); border-color: #334155; color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .article-body .oce-ico { background: linear-gradient(160deg,#1a3020,#162032); border-color: #334155; color: #4ade80; } }

/* FAQ items */
[data-theme="dark"] .oc-faq-item { background: linear-gradient(180deg,#1E293B,#162032); border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-item { background: linear-gradient(180deg,#1E293B,#162032); border-color: #334155; } }
[data-theme="dark"] .oc-faq-item h3 { color: #E2E8F0; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-item h3 { color: #E2E8F0; } }
[data-theme="dark"] .oc-faq-item p { color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-item p { color: #CBD5E1; } }
[data-theme="dark"] .oc-faq-badge { background: rgba(0,70,30,.35); color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-badge { background: rgba(0,70,30,.35); color: #4ade80; } }

/* Copy block */
[data-theme="dark"] .oc-copy-block { background: linear-gradient(180deg,#162032,#1a2840); border-color: #2d4a30; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-copy-block { background: linear-gradient(180deg,#162032,#1a2840); border-color: #2d4a30; } }
[data-theme="dark"] .oc-copy-text { background: #0F172A; border-color: #334155; color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-copy-text { background: #0F172A; border-color: #334155; color: #CBD5E1; } }

/* Sales kit cards */
[data-theme="dark"] .oc-sales-card { background: linear-gradient(180deg,#1E293B,#162032); border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-sales-card { background: linear-gradient(180deg,#1E293B,#162032); border-color: #334155; } }
[data-theme="dark"] .oc-sales-card h3 { color: #E2E8F0; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-sales-card h3 { color: #E2E8F0; } }
[data-theme="dark"] .oc-sales-card p { color: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-sales-card p { color: #94A3B8; } }
[data-theme="dark"] .oc-sales-foot { color: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-sales-foot { color: #94A3B8; } }

/* Next-steps cartões */
[data-theme="dark"] .next-steps ul.oce-cards a { background: #1E293B; border-color: #334155; color: #E2E8F0; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .next-steps ul.oce-cards a { background: #1E293B; border-color: #334155; color: #E2E8F0; } }
[data-theme="dark"] .next-steps ul.oce-cards a:hover { border-color: #00D700; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .next-steps ul.oce-cards a:hover { border-color: #00D700; } }

/* Comparativo table */
[data-theme="dark"] .oc-cmp-scroll { background: #1E293B; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp-scroll { background: #1E293B; border-color: #334155; } }
[data-theme="dark"] .oc-cmp tbody th { background: #162032; color: #E2E8F0; border-bottom-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp tbody th { background: #162032; color: #E2E8F0; border-bottom-color: #334155; } }
[data-theme="dark"] .oc-cmp tbody td { color: #CBD5E1; border-bottom-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp tbody td { color: #CBD5E1; border-bottom-color: #334155; } }
[data-theme="dark"] .oc-cmp tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); } }
[data-theme="dark"] .oc-cmp tbody tr:hover td { background: rgba(0,215,0,.06); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp tbody tr:hover td { background: rgba(0,215,0,.06); } }
[data-theme="dark"] .oc-cmp tbody tr.oc-cmp-hl th,
[data-theme="dark"] .oc-cmp tbody tr.oc-cmp-hl td { background: rgba(0,70,30,.3); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-cmp tbody tr.oc-cmp-hl th, :root:not([data-theme="light"]) .oc-cmp tbody tr.oc-cmp-hl td { background: rgba(0,70,30,.3); } }

/* Charts */
[data-theme="dark"] .oc-chart { background: #1E293B; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-chart { background: #1E293B; border-color: #334155; } }
[data-theme="dark"] .oc-bl { fill: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-bl { fill: #94A3B8; } }
[data-theme="dark"] .oc-bv { fill: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-bv { fill: #4ade80; } }

/* Flow diagram */
[data-theme="dark"] .oc-flow { background: #162032; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-flow { background: #162032; border-color: #334155; } }

/* OC-Grid section cards index */
[data-theme="dark"] .oc-pill { background: rgba(0,70,30,.35); color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-pill { background: rgba(0,70,30,.35); color: #4ade80; } }

/* Disclaimer inline */
[data-theme="dark"] .disclaimer-inline { background: #2D2400; border-color: #5A4500; color: #FDE68A; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .disclaimer-inline { background: #2D2400; border-color: #5A4500; color: #FDE68A; } }
[data-theme="dark"] .disclaimer-inline strong { color: #FDE68A; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .disclaimer-inline strong { color: #FDE68A; } }

/* Steps (timeline) */
[data-theme="dark"] .oce-steps::before { background: linear-gradient(180deg,#00D700,#A5FA00); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oce-steps::before { background: linear-gradient(180deg,#00D700,#A5FA00); } }
[data-theme="dark"] .oce-steps li { color: #CBD5E1; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oce-steps li { color: #CBD5E1; } }
[data-theme="dark"] .oce-steps li::before { background: #1E293B; border-color: #00D700; color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oce-steps li::before { background: #1E293B; border-color: #00D700; color: #4ade80; } }

/* Tag badges */
[data-theme="dark"] .tag { background: rgba(0,70,30,.35); color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tag { background: rgba(0,70,30,.35); color: #4ade80; } }

/* Next-steps widget */
[data-theme="dark"] .next-steps { background: #1E293B; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .next-steps { background: #1E293B; border-color: #334155; } }

/* CTA "Ler artigo" e rótulos de cópia — verde-escuro #00461E fica invisível no escuro */
[data-theme="dark"] .oc-card-cta { color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-card-cta { color: #4ade80; } }
[data-theme="dark"] .oc-copy-label { color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-copy-label { color: #4ade80; } }

/* FAQ/steps tables — sem variante dark ficavam com fundo branco e texto claro invisível */
[data-theme="dark"] .oc-faq-table-scroll { background: #1E293B; border-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table-scroll { background: #1E293B; border-color: #334155; } }
[data-theme="dark"] .oc-faq-table table { background: transparent; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table table { background: transparent; } }
[data-theme="dark"] .oc-faq-table td { color: #E2E8F0; border-bottom-color: #334155; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table td { color: #E2E8F0; border-bottom-color: #334155; } }
[data-theme="dark"] .oc-faq-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); } }
[data-theme="dark"] .oc-faq-table figcaption { color: #4ade80; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table figcaption { color: #4ade80; } }
[data-theme="dark"] .oc-faq-table-note { color: #94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-faq-table-note { color: #94A3B8; } }

/* Texto muted (slate-500 #64748B) fica abaixo do AA no escuro (3,1-3,8:1).
   Eleva o token global --muted para slate-400 (#94A3B8 ~5:1) em /onclick/. */
[data-theme="dark"] { --muted:#94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) { --muted:#94A3B8; } }
[data-theme="dark"] .oc-hero-count, [data-theme="dark"] .oc-pillar-sub { color:#94A3B8; }
@media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .oc-hero-count, :root:not([data-theme="light"]) .oc-pillar-sub { color:#94A3B8; } }
/* ========== FIM DARK MODE onclick-enhance.css ========== */

/* ---------- barra de progresso de leitura ---------- */
#oc-read-progress{position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--stone-green,#00D700),var(--stone-lime,#A5FA00));
  z-index:9999;transition:width .1s linear;pointer-events:none}
[data-theme="dark"] #oc-read-progress{background:linear-gradient(90deg,#4ade80,#a3e635)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #oc-read-progress{background:linear-gradient(90deg,#4ade80,#a3e635)}}

/* ---------- botao voltar ao topo ---------- */
.oc-back-top{position:fixed;bottom:28px;right:24px;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--stone-green-deep,#00461E);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,70,30,.28);opacity:0;visibility:hidden;
  transform:translateY(12px);transition:opacity .25s ease,visibility .25s ease,transform .25s ease;
  z-index:9990}
.oc-back-top--visible{opacity:1;visibility:visible;transform:translateY(0)}
.oc-back-top:hover{filter:brightness(1.15)}
.oc-back-top:focus-visible{outline:2px solid var(--stone-green,#00D700);outline-offset:2px}
.oc-back-top svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
[data-theme="dark"] .oc-back-top{background:#4ade80;color:#0b1f17}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .oc-back-top{background:#4ade80;color:#0b1f17}}

/* ---------- tempo de leitura ---------- */
.oc-read-time{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;
  color:var(--muted,#64748B);font-weight:500;letter-spacing:.01em}
.oc-read-time::before{content:"";display:inline-block;width:13px;height:13px;
  background:var(--stone-green-deep,#00461E);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' d='M12 7v5l3 3'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path fill='none' stroke='white' stroke-width='2' stroke-linecap='round' d='M12 7v5l3 3'/></svg>") center/contain no-repeat}
[data-theme="dark"] .oc-read-time{color:#94A3B8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .oc-read-time{color:#94A3B8}}

/* ---------- TOC scroll-spy ---------- */
.toc a.toc-active{color:var(--stone-green-deep,#00461E);font-weight:700;
  border-left:2px solid var(--stone-green,#00D700);padding-left:6px;margin-left:-8px}
[data-theme="dark"] .toc a.toc-active{color:#4ade80}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .toc a.toc-active{color:#4ade80}}

/* ============================================================
   ONCLICK · WAVES 20-32 (vistoria de UX, navegabilidade, dataviz)
   Tokens locais que adaptam a tema; componentes usam só var(--oce-*).
   ============================================================ */
:root{
  --oce-surface:#fff; --oce-surface-2:#FBFFFB; --oce-border:var(--line,#E2E8F0);
  --oce-ink:var(--ink,#0F172A); --oce-ink-2:var(--ink-2,#1F2937); --oce-muted:var(--muted,#64748B);
  --oce-accent:var(--stone-green-deep,#00461E); --oce-accent-2:var(--stone-green,#00D700);
  --oce-on-accent:#fff; --oce-chip-bg:#ECFDF3; --oce-chip-ink:var(--stone-green-deep,#00461E);
}
[data-theme="dark"]{
  --oce-surface:#1E293B; --oce-surface-2:#162032; --oce-border:#334155;
  --oce-ink:#E2E8F0; --oce-ink-2:#CBD5E1; --oce-muted:#94A3B8;
  --oce-accent:#4ade80; --oce-accent-2:#00D700; --oce-on-accent:#06210f;
  --oce-chip-bg:rgba(0,70,30,.35); --oce-chip-ink:#4ade80;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --oce-surface:#1E293B; --oce-surface-2:#162032; --oce-border:#334155;
  --oce-ink:#E2E8F0; --oce-ink-2:#CBD5E1; --oce-muted:#94A3B8;
  --oce-accent:#4ade80; --oce-accent-2:#00D700; --oce-on-accent:#06210f;
  --oce-chip-bg:rgba(0,70,30,.35); --oce-chip-ink:#4ade80;
}}

/* ---------- W1: faixa de salto rápido (dh-map-strip) como chips no onclick ----------
   styles.css só estiliza .dh-map-strip dentro de body[data-portal="datahub"];
   em /onclick/ os links caíam no estilo de link inline (texto colado e sublinhado). */
.dh-map-strip{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px;padding:0;list-style:none}
.dh-map-strip a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:var(--oce-chip-bg);color:var(--oce-chip-ink);font-size:13px;font-weight:600;line-height:1.2;
  text-decoration:none!important;border:1px solid transparent;
  transition:border-color .18s ease,transform .12s ease,filter .18s ease}
.dh-map-strip a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--oce-accent-2);
  flex:0 0 auto}
.dh-map-strip a:hover{border-color:var(--oce-accent-2);transform:translateY(-1px);filter:brightness(1.02)}
.dh-map-strip a:focus-visible{outline:2px solid var(--oce-accent-2);outline-offset:2px}

/* ---------- W1: blindagem de overflow nos grids ---------- */
.oc-grid{min-width:0}
.oc-grid>*{min-width:0}
/* FAQ transbordava no mobile: o grid item não encolhia abaixo da largura
   mínima da tabela interna (min-width:520px). minmax(0,1fr)+min-width:0 no
   wrapper de scroll deixam o item encolher e a tabela rolar dentro dele. */
.oc-faq{grid-template-columns:minmax(0,1fr)}
.oc-faq-item{min-width:0}
.oc-faq-table-scroll{min-width:0}
.oc-faq-item p,.oc-faq-item li{overflow-wrap:break-word}

/* ---------- W2: localizador (busca + chips de pilar + contador) ---------- */
.oce-finder{margin:30px 0 14px;padding:16px 18px;border:1px solid var(--oce-border);border-radius:16px;
  background:linear-gradient(180deg,var(--oce-surface),var(--oce-surface-2));
  box-shadow:0 6px 20px rgba(15,23,42,.05)}
.oce-finder-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.oce-search{position:relative;flex:1 1 280px;min-width:0}
.oce-search input{width:100%;box-sizing:border-box;padding:12px 40px 12px 42px;border:1px solid var(--oce-border);
  border-radius:10px;background:var(--oce-surface);color:var(--oce-ink);font-size:15px;font-family:inherit;
  transition:border-color .18s ease,box-shadow .18s ease}
.oce-search input::placeholder{color:var(--oce-muted)}
.oce-search input:focus{outline:none;border-color:var(--oce-accent-2);box-shadow:0 0 0 3px rgba(0,215,0,.16)}
.oce-search>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  stroke:var(--oce-muted);fill:none;stroke-width:2;pointer-events:none}
.oce-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  cursor:pointer;color:var(--oce-muted);width:28px;height:28px;border-radius:50%;display:none;
  align-items:center;justify-content:center;font-size:20px;line-height:1}
.oce-search-clear.is-on{display:inline-flex}
.oce-search-clear:hover{background:var(--oce-chip-bg);color:var(--oce-accent)}
.oce-search-clear:focus-visible{outline:2px solid var(--oce-accent-2);outline-offset:2px}
.oce-count{font-size:13px;color:var(--oce-muted);font-weight:600;white-space:nowrap}
.oce-count b{color:var(--oce-accent);font-variant-numeric:tabular-nums}
.oce-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.oce-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--oce-border);background:var(--oce-surface);color:var(--oce-ink-2);font-size:13px;
  font-weight:600;font-family:inherit;line-height:1.2;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}
.oce-chip:hover{border-color:var(--oce-accent-2);transform:translateY(-1px)}
.oce-chip[aria-pressed="true"]{background:var(--oce-accent);color:var(--oce-on-accent);border-color:var(--oce-accent)}
.oce-chip .oce-chip-n{font-size:11px;opacity:.72;font-variant-numeric:tabular-nums}
.oce-chip:focus-visible{outline:2px solid var(--oce-accent-2);outline-offset:2px}
.oce-empty{display:none;margin:18px 0;padding:26px;text-align:center;border:1px dashed var(--oce-border);
  border-radius:14px;color:var(--oce-muted);font-size:15px;background:var(--oce-surface-2)}
.oce-empty.is-on{display:block}
.oce-empty b{color:var(--oce-ink)}
.oc-card-link.oce-hidden,.oce-sec-hidden{display:none!important}

/* ---------- W3: badge de contagem por seção ---------- */
/* o h2 de seção vira display:flex (ícone via sectionIcons); sem wrap o badge
   não quebra de linha e estourava no mobile — flex-wrap deixa ele descer. */
.article-body .oce-h2{flex-wrap:wrap}
.oce-secount{display:inline-flex;align-items:center;justify-content:center;margin-left:11px;padding:2px 11px;
  border-radius:999px;background:var(--oce-chip-bg);color:var(--oce-chip-ink);font-size:13px;font-weight:700;
  vertical-align:middle;font-variant-numeric:tabular-nums;line-height:1.7;max-width:100%}

/* ---------- W3: mapa de cobertura do portal (mini bullet por pilar) ---------- */
.oce-portalmap{margin:28px 0;padding:20px;border:1px solid var(--oce-border);border-radius:16px;
  background:linear-gradient(180deg,var(--oce-surface),var(--oce-surface-2))}
.oce-portalmap h3{margin:0 0 4px;font-size:16px;color:var(--oce-ink);font-weight:700}
.oce-pm-sub{margin:0 0 16px;font-size:13px;color:var(--oce-muted);text-align:left}
.oce-pm-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:680px){.oce-pm-grid{grid-template-columns:1fr 1fr;gap:8px 26px}}
.oce-pm-row{display:grid;grid-template-columns:128px 1fr 38px;align-items:center;gap:10px;
  text-decoration:none!important;padding:6px 8px;border-radius:9px;transition:background .15s ease}
.oce-pm-row:hover{background:var(--oce-chip-bg)}
.oce-pm-row:focus-visible{outline:2px solid var(--oce-accent-2);outline-offset:1px}
.oce-pm-name{font-size:13px;font-weight:600;color:var(--oce-ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.oce-pm-track{height:9px;border-radius:999px;background:var(--oce-border);overflow:hidden;min-width:0}
.oce-pm-fill{display:block;height:100%;border-radius:999px;width:0;
  background:linear-gradient(90deg,var(--oce-accent),var(--oce-accent-2));
  transition:width 1s cubic-bezier(.2,.7,.2,1)}
.oce-pm-val{font-size:13px;font-weight:700;color:var(--oce-accent);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- W4: hover refinado dos cards de artigo ---------- */
.oc-grid .oc-card-link{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.oc-grid .oc-card-link:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.10);
  border-color:var(--oce-accent-2)}
.oc-grid .oc-card-link .oc-card-cta{transition:color .2s ease}
.oc-grid .oc-card-link:hover .oc-card-cta{color:var(--oce-accent)}

/* ---------- W4: reveal em cascata dos cards (estado-base VISÍVEL; só anima via JS) ---------- */
.oce-card-reveal{opacity:0;transform:translateY(14px)}
.oce-card-reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* ---------- W4: flash suave no destino ao saltar via chip/strip ---------- */
@keyframes oceFlash{0%{background:var(--oce-chip-bg)}100%{background:transparent}}
.oce-flash{animation:oceFlash 1.5s ease}

@media(max-width:640px){
  .oce-finder{padding:14px}
  .oce-pm-row{grid-template-columns:108px 1fr 34px}
  .oce-secount{margin-left:8px;font-size:12px;padding:2px 9px}
}
@media print{
  .oce-finder,.dh-map-strip,.oce-portalmap .oce-pm-fill{box-shadow:none}
  .oce-finder,.oce-search-clear{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .oce-card-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .oce-pm-fill{transition:none!important}
  .oce-flash{animation:none!important}
  .oc-grid .oc-card-link:hover{transform:none}
}
/* ============== FIM WAVES 20-32 ============== */