/* =======================================================================
 * dh-experience.css  ·  DataHub — Ondas 20 a 24
 * Aprimoramento profundo de UX, navegabilidade, elementos visuais e
 * animacao, destilado do curso "Frontends com vibecoding".
 *
 * Principios herdados do curso:
 *   - Animacao a servico da clareza; nunca esconder conteudo via JS/CSS.
 *   - Contraste AA nos dois temas; foco visivel com anel de 2px.
 *   - Apenas transform/opacity em animacao (orcamento de INP/CLS).
 *   - prefers-reduced-motion respeitado em tudo.
 *   - Zero CDN: SVG + CSS + tokens existentes. Reuso do design system.
 *
 * Escopo: paginas /datahub/ (body[data-portal="datahub"]). Idempotente
 * por convencao de classe (prefixo dh-). Nao sobrescreve waves 15-19.
 * ===================================================================== */

/* ---- tokens locais de acento por pilar (reusa a paleta dh- existente) -- */
body[data-portal="datahub"]{
  --dhx-accent: var(--green, #00A868);
  --dhx-accent-ink: var(--green-dark, #008550);
  --dhx-surface: var(--card, #fff);
  --dhx-line: var(--line, #E2E8F0);
  --dhx-ink: var(--ink, #0F172A);
  --dhx-ink-2: var(--ink-3, #374151);
  --dhx-muted: var(--muted, #64748B);
  --dhx-soft: var(--green-soft, #E6F5EE);
  --dhx-ease: cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
 * WAVE 20 — Capsula de resposta (answer-first) + KPI hero
 * ===================================================================== */
body[data-portal="datahub"] .dh-answer{
  position:relative; margin:26px 0 8px; padding:20px 22px 20px 56px;
  background:linear-gradient(180deg,var(--dhx-soft),transparent);
  border:1px solid var(--dhx-line); border-left:4px solid var(--dhx-accent);
  border-radius:14px; color:var(--dhx-ink-2);
}
body[data-portal="datahub"] .dh-answer::before{
  content:""; position:absolute; left:18px; top:20px; width:24px; height:24px;
  background:var(--dhx-accent); border-radius:7px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/><path d='M12 16v-4'/><path d='M12 8h.01'/></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' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>") center/contain no-repeat;
}
body[data-portal="datahub"] .dh-answer__kicker{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--dhx-accent-ink); margin-bottom:6px;
}
body[data-portal="datahub"] .dh-answer p{margin:0; font-size:16.5px; line-height:1.62}
body[data-portal="datahub"] .dh-answer strong{color:var(--dhx-ink)}

/* KPI hero strip — reaproveita .dh-count (count-up do wave 17) */
body[data-portal="datahub"] .dh-kpi-hero{
  margin:24px 0 10px;
}
body[data-portal="datahub"] .dh-kpi-hero__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:0 0 14px; flex-wrap:wrap;
}
body[data-portal="datahub"] .dh-kpi-hero__title{
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--dhx-accent-ink); margin:0;
}
body[data-portal="datahub"] .dh-kpi-hero__src{font-size:12px; color:var(--dhx-muted)}
body[data-portal="datahub"] .dh-kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
}
body[data-portal="datahub"] .dh-kpi{
  position:relative; background:var(--dhx-surface);
  border:1px solid var(--dhx-line); border-top:3px solid var(--dhx-accent);
  border-radius:12px; padding:16px 16px 14px; overflow:hidden;
  transition:transform .25s var(--dhx-ease), box-shadow .25s var(--dhx-ease), border-color .25s var(--dhx-ease);
}
body[data-portal="datahub"] .dh-kpi:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,70,30,.10);
  border-top-color:var(--dh-mint,#00D700);
}
body[data-portal="datahub"] .dh-kpi__ico{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--dhx-soft); color:var(--dhx-accent-ink); margin-bottom:10px;
}
body[data-portal="datahub"] .dh-kpi__ico svg{width:17px; height:17px}
body[data-portal="datahub"] .dh-kpi .dh-count{display:block}
body[data-portal="datahub"] .dh-kpi .dh-count__num{
  font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.05;
  color:var(--dhx-accent-ink); font-variant-numeric:tabular-nums;
}
body[data-portal="datahub"] .dh-kpi .dh-count__label{
  display:block; font-size:12.5px; color:var(--dhx-ink-2); margin-top:5px; line-height:1.35;
}
body[data-portal="datahub"] .dh-kpi__spark{
  position:absolute; right:-6px; bottom:-6px; width:64px; height:64px;
  opacity:.06; color:var(--dhx-accent); pointer-events:none;
}

/* =====================================================================
 * WAVE 21 — Visualizacao de cobertura dos pillars (barras animadas)
 * ===================================================================== */
body[data-portal="datahub"] .dh-pillarviz{
  margin:22px 0 30px; padding:20px 20px 16px;
  background:var(--dhx-surface); border:1px solid var(--dhx-line);
  border-radius:14px;
}
body[data-portal="datahub"] .dh-pillarviz__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:14px;
}
body[data-portal="datahub"] .dh-pillarviz__title{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dhx-accent-ink);
}
body[data-portal="datahub"] .dh-pillarviz__total{
  font-size:12.5px; color:var(--dhx-muted);
}
body[data-portal="datahub"] .dh-pillarviz__total b{color:var(--dhx-ink); font-size:15px}
body[data-portal="datahub"] .dh-pbar{
  display:grid; grid-template-columns:minmax(140px,200px) 1fr auto; align-items:center;
  gap:12px; padding:7px 0; text-decoration:none;
}
body[data-portal="datahub"] .dh-pbar + .dh-pbar{border-top:1px solid var(--dhx-line)}
body[data-portal="datahub"] .dh-pbar__label{
  font-size:13px; color:var(--dhx-ink); font-weight:600;
  display:flex; align-items:center; gap:8px; min-width:0;
}
body[data-portal="datahub"] .dh-pbar__label span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body[data-portal="datahub"] .dh-pbar__dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--dh-accent,var(--dhx-accent));
}
body[data-portal="datahub"] .dh-pbar__track{
  position:relative; height:14px; border-radius:7px;
  background:var(--pill,#F1F5F1); overflow:hidden;
}
body[data-portal="datahub"] .dh-pbar__fill{
  position:absolute; inset:0 auto 0 0; width:0;
  border-radius:7px; transform-origin:left center;
  background:linear-gradient(90deg,var(--dhx-accent),var(--dh-mint,#A5FA00));
  transition:width 1.1s var(--dhx-ease);
}
body[data-portal="datahub"] .dh-pbar__val{
  font-size:13px; font-weight:700; color:var(--dhx-accent-ink);
  font-variant-numeric:tabular-nums; min-width:3ch; text-align:right;
}
body[data-portal="datahub"] .dh-pbar:hover .dh-pbar__label{color:var(--dhx-accent-ink)}
body[data-portal="datahub"] .dh-pbar:hover .dh-pbar__track{box-shadow:0 0 0 2px var(--dhx-soft)}
body[data-portal="datahub"] .dh-pbar:focus-visible{outline:2px solid var(--dhx-accent); outline-offset:3px; border-radius:8px}

/* =====================================================================
 * WAVE 22 — Indice navegavel e filtravel
 * ===================================================================== */
body[data-portal="datahub"] .dh-filter{
  position:sticky; top:74px; z-index:8;
  margin:26px 0 18px; padding:14px 16px;
  background:color-mix(in srgb, var(--dhx-surface) 90%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--dhx-line); border-radius:14px;
}
body[data-portal="datahub"] .dh-filter__row{display:flex; gap:10px; align-items:center}
body[data-portal="datahub"] .dh-filter__field{
  position:relative; flex:1 1 auto; display:flex; align-items:center;
}
body[data-portal="datahub"] .dh-filter__field svg{
  position:absolute; left:12px; width:18px; height:18px; color:var(--dhx-muted); pointer-events:none;
}
body[data-portal="datahub"] .dh-filter__input{
  width:100%; padding:11px 38px 11px 38px; font-size:15px;
  color:var(--dhx-ink); background:var(--bg,#FAFAF7);
  border:1px solid var(--dhx-line); border-radius:10px;
  font-family:inherit; transition:border-color .2s, box-shadow .2s;
}
body[data-portal="datahub"] .dh-filter__input:focus{
  outline:none; border-color:var(--dhx-accent);
  box-shadow:0 0 0 3px var(--dhx-soft);
}
body[data-portal="datahub"] .dh-filter__clear{
  position:absolute; right:8px; width:24px; height:24px; border-radius:6px;
  display:none; place-items:center; color:var(--dhx-muted);
  background:transparent; border:0; cursor:pointer;
}
body[data-portal="datahub"] .dh-filter__clear.is-on{display:grid}
body[data-portal="datahub"] .dh-filter__clear:hover{color:var(--dhx-ink); background:var(--pill)}
body[data-portal="datahub"] .dh-filter__count{
  font-size:12.5px; color:var(--dhx-muted); white-space:nowrap; font-variant-numeric:tabular-nums;
}
body[data-portal="datahub"] .dh-filter__count b{color:var(--dhx-accent-ink)}
body[data-portal="datahub"] .dh-filter__chips{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:11px;
}
body[data-portal="datahub"] .dh-fchip{
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid var(--dhx-line); background:var(--dhx-surface);
  color:var(--dhx-ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:background .18s, color .18s, border-color .18s, transform .12s;
}
body[data-portal="datahub"] .dh-fchip:hover{transform:translateY(-1px)}
body[data-portal="datahub"] .dh-fchip__dot{width:8px; height:8px; border-radius:50%; background:var(--dhx-muted)}
body[data-portal="datahub"] .dh-fchip[aria-pressed="true"]{
  background:var(--dhx-accent); color:#fff; border-color:var(--dhx-accent);
}
body[data-portal="datahub"] .dh-fchip[aria-pressed="true"] .dh-fchip__dot{background:#fff}
body[data-portal="datahub"] .dh-fchip:focus-visible{outline:2px solid var(--dhx-accent); outline-offset:2px}
body[data-portal="datahub"] .dh-hideblock{display:none !important}
body[data-portal="datahub"] .dh-empty{
  margin:18px 0; padding:22px; text-align:center; color:var(--dhx-muted);
  border:1px dashed var(--dhx-line); border-radius:12px; display:none;
}
body[data-portal="datahub"] .dh-empty.is-on{display:block}
body[data-portal="datahub"] mark.dh-mark{background:var(--dh-mint,#D2FF7D); color:inherit; border-radius:3px; padding:0 1px}

/* =====================================================================
 * WAVE 23 — Card-ify dos produtos + micro-interacoes
 * ===================================================================== */
body[data-portal="datahub"] .dh-prodcard{
  position:relative; margin:14px 0 !important; padding:18px 18px 16px;
  background:var(--dhx-surface); border:1px solid var(--dhx-line);
  border-left:3px solid var(--dhx-line); border-radius:12px;
  transition:transform .25s var(--dhx-ease), box-shadow .25s var(--dhx-ease), border-color .25s var(--dhx-ease);
}
body[data-portal="datahub"] .dh-prodcard:hover{
  transform:translateY(-3px); border-left-color:var(--dhx-accent);
  box-shadow:0 12px 28px rgba(0,70,30,.10);
}
body[data-portal="datahub"] .dh-prodcard > h3{margin-top:0 !important}
body[data-portal="datahub"] .dh-prodcard .dh-prodcard__more{
  display:inline-flex; align-items:center; gap:4px; font-weight:700;
}
body[data-portal="datahub"] .dh-prodcard .dh-prodcard__more .dh-ar{
  transition:transform .2s var(--dhx-ease); display:inline-block;
}
body[data-portal="datahub"] .dh-prodcard:hover .dh-prodcard__more .dh-ar{transform:translateX(4px)}

/* seta deslizante em links internos /datahub/ dentro do corpo */
body[data-portal="datahub"] .article-body.justify a[href^="/datahub/"]:not(.dh-chip):not(.dh-pbar){
  transition:color .18s;
}

/* sublinhado animado nos H2 de secao */
body[data-portal="datahub"] .article-body.justify h2[id]{position:relative}
body[data-portal="datahub"] .article-body.justify h2[id]::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0;
  background:linear-gradient(90deg,var(--dhx-accent),var(--dh-mint,#A5FA00));
  border-radius:2px; transition:width .6s var(--dhx-ease);
}
body[data-portal="datahub"] .article-body.justify h2[id].dh-visible::after{width:54px}

/* chips de pillar (H3 de pillar com "· NN") recebem ponto colorido + badge */
body[data-portal="datahub"] .dh-pill-h3{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
body[data-portal="datahub"] .dh-pill-h3__dot{
  width:9px; height:9px; border-radius:50%; background:var(--dh-accent,var(--dhx-accent)); flex-shrink:0;
}
body[data-portal="datahub"] .dh-pill-h3__badge{
  font-size:11px; font-weight:700; color:var(--dhx-accent-ink);
  background:var(--dhx-soft); border-radius:999px; padding:2px 9px; letter-spacing:.02em;
}

/* =====================================================================
 * WAVE 24 — Reveal dos novos blocos, dark, reduced-motion, mobile, print
 * ===================================================================== */
body[data-portal="datahub"] .dh-answer,
body[data-portal="datahub"] .dh-kpi-hero,
body[data-portal="datahub"] .dh-pillarviz,
body[data-portal="datahub"] .dh-filter{
  opacity:1; /* base sempre visivel; reveal so adiciona translate sutil */
}
body[data-portal="datahub"] .dhx-reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--dhx-ease), transform .6s var(--dhx-ease)}
body[data-portal="datahub"] .dhx-reveal.dh-visible{opacity:1; transform:none}

/* Dark theme — superficie/linhas adaptadas (tokens ja viram dark globalmente) */
[data-theme="dark"] body[data-portal="datahub"] .dh-answer{background:linear-gradient(180deg,rgba(0,168,104,.10),transparent)}
[data-theme="dark"] body[data-portal="datahub"] .dh-kpi,
[data-theme="dark"] body[data-portal="datahub"] .dh-pillarviz,
[data-theme="dark"] body[data-portal="datahub"] .dh-prodcard{background:var(--card); border-color:var(--line)}
[data-theme="dark"] body[data-portal="datahub"] .dh-kpi .dh-count__num,
[data-theme="dark"] body[data-portal="datahub"] .dh-pbar__val,
[data-theme="dark"] body[data-portal="datahub"] .dh-pillarviz__title,
[data-theme="dark"] body[data-portal="datahub"] .dh-kpi-hero__title{color:var(--stone-lime,#A5FA00)}
[data-theme="dark"] body[data-portal="datahub"] .dh-pbar__track{background:rgba(255,255,255,.06)}
[data-theme="dark"] body[data-portal="datahub"] .dh-filter{background:color-mix(in srgb, var(--card) 88%, transparent)}
[data-theme="dark"] body[data-portal="datahub"] .dh-filter__input{background:rgba(255,255,255,.04)}
[data-theme="dark"] body[data-portal="datahub"] .dh-fchip{background:var(--card); border-color:var(--line)}
[data-theme="dark"] body[data-portal="datahub"] mark.dh-mark{background:rgba(165,250,0,.28); color:var(--ink)}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-answer{background:linear-gradient(180deg,rgba(0,168,104,.10),transparent)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-kpi,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-pillarviz,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-prodcard{background:var(--card); border-color:var(--line)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-kpi .dh-count__num,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-pbar__val,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-pillarviz__title,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-kpi-hero__title{color:var(--stone-lime,#A5FA00)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-pbar__track{background:rgba(255,255,255,.06)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-filter__input{background:rgba(255,255,255,.04)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-fchip{background:var(--card); border-color:var(--line)}
}

/* Mobile */
@media(max-width:640px){
  body[data-portal="datahub"] .dh-kpi-grid{grid-template-columns:repeat(2,1fr); gap:10px}
  body[data-portal="datahub"] .dh-kpi .dh-count__num{font-size:22px}
  body[data-portal="datahub"] .dh-pbar{grid-template-columns:1fr auto; gap:8px 10px}
  body[data-portal="datahub"] .dh-pbar__track{grid-column:1 / -1; order:3}
  body[data-portal="datahub"] .dh-filter{top:62px; padding:12px}
  body[data-portal="datahub"] .dh-filter__count{display:none}
  body[data-portal="datahub"] .dh-answer{padding:16px 16px 16px 48px}
}

/* Reduced motion — mostra estado final, sem deslocamento */
@media(prefers-reduced-motion:reduce){
  body[data-portal="datahub"] .dhx-reveal{opacity:1 !important; transform:none !important; transition:none !important}
  body[data-portal="datahub"] .dh-pbar__fill{transition:none !important}
  body[data-portal="datahub"] .dh-kpi,
  body[data-portal="datahub"] .dh-prodcard,
  body[data-portal="datahub"] .dh-fchip{transition:none !important}
  body[data-portal="datahub"] .article-body.justify h2[id]::after{transition:none !important}
}

/* Print — limpa interatividade, mostra tudo */
@media print{
  body[data-portal="datahub"] .dh-filter,
  body[data-portal="datahub"] .dh-kpi__spark{display:none !important}
  body[data-portal="datahub"] .dhx-reveal{opacity:1 !important; transform:none !important}
  body[data-portal="datahub"] .dh-hideblock{display:block !important}
  body[data-portal="datahub"] .dh-pbar__fill{transition:none !important}
  body[data-portal="datahub"] .dh-kpi,
  body[data-portal="datahub"] .dh-prodcard,
  body[data-portal="datahub"] .dh-pillarviz{break-inside:avoid}
}