/* =======================================================================
 * dh-experience-2.css  ·  DataHub — Ondas 25 a 29
 * Camada de interatividade rica: explorador de ontologia, jornadas por
 * persona, glossario inline, permalinks de secao e trilho contextual.
 * Destilado do curso "Frontends com vibecoding".
 *
 * Reusa os tokens e o tema escuro existentes. Zero CDN. Idempotente por
 * classe (prefixo dh-). Escopo /datahub/ (body[data-portal="datahub"]).
 * Animacao so transform/opacity; prefers-reduced-motion respeitado.
 * ===================================================================== */

body[data-portal="datahub"]{
  --dh2-accent: var(--green, #00A868);
  --dh2-accent-ink: var(--green-dark, #008550);
  --dh2-surface: var(--card, #fff);
  --dh2-line: var(--line, #E2E8F0);
  --dh2-ink: var(--ink, #0F172A);
  --dh2-ink-2: var(--ink-3, #374151);
  --dh2-muted: var(--muted, #64748B);
  --dh2-soft: var(--green-soft, #E6F5EE);
  --dh2-ease: cubic-bezier(.22,.61,.36,1);
}

/* =====================================================================
 * WAVE 25 — Explorador de ontologia
 * ===================================================================== */
body[data-portal="datahub"] .dh-onto{
  margin:22px 0 30px; border:1px solid var(--dh2-line); border-radius:16px;
  background:var(--dh2-surface); overflow:hidden;
}
body[data-portal="datahub"] .dh-onto__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding:16px 18px 0;
}
body[data-portal="datahub"] .dh-onto__title{
  margin:0; font-size:13px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dh2-accent-ink);
}
body[data-portal="datahub"] .dh-onto__hint{font-size:12px; color:var(--dh2-muted)}
body[data-portal="datahub"] .dh-onto__grid{
  display:grid; grid-template-columns:minmax(190px,260px) 1fr; gap:0;
  margin-top:14px;
}
body[data-portal="datahub"] .dh-onto__tabs{
  display:flex; flex-direction:column; gap:2px; padding:6px;
  border-right:1px solid var(--dh2-line); background:var(--bg,#FAFAF7);
}
body[data-portal="datahub"] .dh-onto__node{
  display:flex; align-items:center; gap:9px; padding:9px 11px; border:0;
  border-radius:9px; background:transparent; cursor:pointer; text-align:left;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--dh2-ink-2);
  transition:background .15s, color .15s;
}
body[data-portal="datahub"] .dh-onto__node:hover{background:var(--dh2-soft); color:var(--dh2-accent-ink)}
body[data-portal="datahub"] .dh-onto__node[aria-selected="true"]{
  background:var(--dh2-soft); color:var(--dh2-accent-ink);
  box-shadow:inset 3px 0 0 var(--dh-dot,var(--dh2-accent));
}
body[data-portal="datahub"] .dh-onto__node:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:-2px}
body[data-portal="datahub"] .dh-onto__nd{width:10px; height:10px; border-radius:50%; background:var(--dh-dot,var(--dh2-accent)); flex-shrink:0}
body[data-portal="datahub"] .dh-onto__panel{padding:18px 20px; min-height:180px}
body[data-portal="datahub"] .dh-onto__pname{margin:0 0 4px; font-size:18px; font-weight:800; color:var(--dh2-ink); letter-spacing:-.01em}
body[data-portal="datahub"] .dh-onto__pkind{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dh2-muted)}
body[data-portal="datahub"] .dh-onto__pdesc{margin:10px 0 14px; font-size:15px; line-height:1.6; color:var(--dh2-ink-2)}
body[data-portal="datahub"] .dh-onto__rels-lead{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dh2-muted); margin-bottom:8px}
body[data-portal="datahub"] .dh-onto__rels{display:flex; flex-wrap:wrap; gap:7px}
body[data-portal="datahub"] .dh-onto__rel{
  font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px;
  border:1px solid var(--dh2-line); background:var(--bg,#FAFAF7); color:var(--dh2-ink-2);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .12s, border-color .15s, color .15s;
}
body[data-portal="datahub"] .dh-onto__rel:hover{transform:translateY(-1px); border-color:var(--dh2-accent); color:var(--dh2-accent-ink)}
body[data-portal="datahub"] .dh-onto__rel:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:2px}
body[data-portal="datahub"] .dh-onto__rel i{width:7px; height:7px; border-radius:50%; background:var(--dh-dot,var(--dh2-accent))}
@media(max-width:640px){
  body[data-portal="datahub"] .dh-onto__grid{grid-template-columns:1fr}
  body[data-portal="datahub"] .dh-onto__tabs{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--dh2-line)}
  body[data-portal="datahub"] .dh-onto__node[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--dh-dot,var(--dh2-accent))}
}

/* =====================================================================
 * WAVE 26 — Seletor de persona / jornada
 * ===================================================================== */
body[data-portal="datahub"] .dh-persona{margin:24px 0 28px}
body[data-portal="datahub"] .dh-persona__head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
body[data-portal="datahub"] .dh-persona__title{margin:0; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dh2-accent-ink)}
body[data-portal="datahub"] .dh-persona__hint{font-size:12px; color:var(--dh2-muted)}
body[data-portal="datahub"] .dh-persona__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); gap:12px}
body[data-portal="datahub"] .dh-persona__card{
  position:relative; display:flex; flex-direction:column; gap:7px; text-align:left;
  padding:16px; border:1px solid var(--dh2-line); border-radius:13px;
  background:var(--dh2-surface); cursor:pointer; font:inherit;
  transition:transform .22s var(--dh2-ease), box-shadow .22s var(--dh2-ease), border-color .22s var(--dh2-ease);
}
body[data-portal="datahub"] .dh-persona__card:hover{transform:translateY(-3px); border-color:var(--dh2-accent); box-shadow:0 12px 28px rgba(0,70,30,.10)}
body[data-portal="datahub"] .dh-persona__card:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:2px}
body[data-portal="datahub"] .dh-persona__ico{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--dh2-soft); color:var(--dh2-accent-ink)}
body[data-portal="datahub"] .dh-persona__ico svg{width:19px; height:19px}
body[data-portal="datahub"] .dh-persona__role{font-size:15px; font-weight:700; color:var(--dh2-ink); letter-spacing:-.01em}
body[data-portal="datahub"] .dh-persona__pain{font-size:13px; color:var(--dh2-ink-2); line-height:1.45}
body[data-portal="datahub"] .dh-persona__go{margin-top:auto; font-size:12.5px; font-weight:700; color:var(--dh2-accent-ink); display:inline-flex; align-items:center; gap:5px}
body[data-portal="datahub"] .dh-persona__go .dh-ar{transition:transform .2s var(--dh2-ease)}
body[data-portal="datahub"] .dh-persona__card:hover .dh-persona__go .dh-ar{transform:translateX(4px)}

/* =====================================================================
 * WAVE 29 — Painel "Comece por aqui" (guia)
 * ===================================================================== */
body[data-portal="datahub"] .dh-guide{
  margin:22px 0 26px; padding:18px 20px; border-radius:14px;
  background:linear-gradient(180deg,var(--dh2-soft),transparent);
  border:1px solid var(--dh2-line);
}
body[data-portal="datahub"] .dh-guide__title{margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dh2-accent-ink)}
body[data-portal="datahub"] .dh-guide__steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; list-style:none; margin:0; padding:0; counter-reset:dhg}
body[data-portal="datahub"] .dh-guide__step{position:relative}
body[data-portal="datahub"] .dh-guide__step a{
  display:flex; flex-direction:column; gap:4px; height:100%; padding:13px 14px 13px 44px;
  border:1px solid var(--dh2-line); border-radius:11px; background:var(--dh2-surface);
  text-decoration:none; transition:transform .2s var(--dh2-ease), border-color .2s;
}
body[data-portal="datahub"] .dh-guide__step a::before{
  counter-increment:dhg; content:counter(dhg); position:absolute; left:12px; top:13px;
  width:22px; height:22px; border-radius:50%; background:var(--dh2-accent); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center;
}
body[data-portal="datahub"] .dh-guide__step a:hover{transform:translateY(-2px); border-color:var(--dh2-accent)}
body[data-portal="datahub"] .dh-guide__st{font-size:14px; font-weight:700; color:var(--dh2-ink)}
body[data-portal="datahub"] .dh-guide__sd{font-size:12.5px; color:var(--dh2-ink-2); line-height:1.4}

/* =====================================================================
 * WAVE 27 — Tooltips de glossario inline
 * ===================================================================== */
body[data-portal="datahub"] .dh-term{
  border-bottom:1.5px dotted var(--dh2-accent); cursor:help;
  text-underline-offset:2px; position:relative;
}
body[data-portal="datahub"] .dh-term:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:2px; border-radius:3px}
body[data-portal="datahub"] .dh-term__pop{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:60;
  width:max-content; max-width:280px; padding:10px 12px;
  background:var(--dh2-ink); color:#fff; border-radius:10px;
  font-size:12.5px; line-height:1.5; font-weight:400; text-align:left;
  box-shadow:0 10px 30px rgba(15,23,42,.28);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:opacity .16s, transform .16s;
}
body[data-portal="datahub"] .dh-term__pop b{color:var(--stone-lime,#A5FA00)}
body[data-portal="datahub"] .dh-term__pop::after{
  content:""; position:absolute; left:14px; top:100%; border:6px solid transparent; border-top-color:var(--dh2-ink);
}
body[data-portal="datahub"] .dh-term:hover .dh-term__pop,
body[data-portal="datahub"] .dh-term:focus .dh-term__pop,
body[data-portal="datahub"] .dh-term.is-open .dh-term__pop{opacity:1; transform:translateY(0); pointer-events:auto}

/* =====================================================================
 * WAVE 28 — Permalinks de secao + toast
 * ===================================================================== */
body[data-portal="datahub"] .article-body.justify h2[id],
body[data-portal="datahub"] .article-body.justify h3[id]{position:relative}
body[data-portal="datahub"] .dh-anchor{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:8px; vertical-align:middle;
  border-radius:7px; border:1px solid var(--dh2-line); background:var(--dh2-surface);
  color:var(--dh2-muted); cursor:pointer; opacity:0;
  transition:opacity .15s, color .15s, border-color .15s, background .15s;
  -webkit-print-color-adjust:exact;
}
body[data-portal="datahub"] h2:hover > .dh-anchor,
body[data-portal="datahub"] h3:hover > .dh-anchor,
body[data-portal="datahub"] .dh-anchor:focus-visible{opacity:1}
body[data-portal="datahub"] .dh-anchor:hover{color:var(--dh2-accent-ink); border-color:var(--dh2-accent); background:var(--dh2-soft)}
body[data-portal="datahub"] .dh-anchor:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:2px}
body[data-portal="datahub"] .dh-anchor svg{width:14px; height:14px}
@media(hover:none){ body[data-portal="datahub"] .dh-anchor{opacity:.6} }

body[data-portal="datahub"] .dh-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px);
  z-index:10050; padding:11px 18px; border-radius:999px;
  background:var(--dh2-ink); color:#fff; font-size:13.5px; font-weight:600;
  box-shadow:0 12px 34px rgba(15,23,42,.3); display:flex; align-items:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
body[data-portal="datahub"] .dh-toast.is-on{opacity:1; transform:translate(-50%,0)}
body[data-portal="datahub"] .dh-toast svg{width:16px; height:16px; color:var(--stone-lime,#A5FA00)}

/* =====================================================================
 * WAVE 29 — Trilho contextual de pillars (sticky, desktop largo, hub)
 * ===================================================================== */
body[data-portal="datahub"] .dh-rail{
  position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:30;
  display:none; flex-direction:column; gap:4px; padding:10px 8px;
  background:color-mix(in srgb, var(--dh2-surface) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--dh2-line); border-radius:999px;
  box-shadow:0 8px 28px rgba(15,23,42,.10);
}
@media(min-width:1400px){ body[data-portal="datahub"] .dh-rail{display:flex} }
body[data-portal="datahub"] .dh-rail__dot{
  position:relative; width:12px; height:12px; border:0; padding:0; cursor:pointer;
  background:transparent; display:grid; place-items:center;
}
body[data-portal="datahub"] .dh-rail__dot::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--dh2-line); transition:transform .18s, background .18s;
}
body[data-portal="datahub"] .dh-rail__dot:hover::before{background:var(--dh-dot,var(--dh2-accent)); transform:scale(1.25)}
body[data-portal="datahub"] .dh-rail__dot[aria-current="true"]::before{background:var(--dh-dot,var(--dh2-accent)); transform:scale(1.5)}
body[data-portal="datahub"] .dh-rail__dot:focus-visible{outline:2px solid var(--dh2-accent); outline-offset:2px; border-radius:50%}
body[data-portal="datahub"] .dh-rail__lbl{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-4px);
  white-space:nowrap; padding:5px 10px; border-radius:8px;
  background:var(--dh2-ink); color:#fff; font-size:12px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
}
body[data-portal="datahub"] .dh-rail__dot:hover .dh-rail__lbl,
body[data-portal="datahub"] .dh-rail__dot:focus-visible .dh-rail__lbl{opacity:1; transform:translateY(-50%) translateX(0)}

/* =====================================================================
 * Reveal (so blocos novos), dark, reduced-motion, print
 * ===================================================================== */
body[data-portal="datahub"] .dh2-reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--dh2-ease), transform .6s var(--dh2-ease)}
body[data-portal="datahub"] .dh2-reveal.dh-visible{opacity:1; transform:none}

[data-theme="dark"] body[data-portal="datahub"] .dh-onto,
[data-theme="dark"] body[data-portal="datahub"] .dh-persona__card,
[data-theme="dark"] body[data-portal="datahub"] .dh-guide__step a,
[data-theme="dark"] body[data-portal="datahub"] .dh-rail{background:var(--card); border-color:var(--line)}
[data-theme="dark"] body[data-portal="datahub"] .dh-onto__tabs,
[data-theme="dark"] body[data-portal="datahub"] .dh-onto__rel{background:rgba(255,255,255,.04)}
[data-theme="dark"] body[data-portal="datahub"] .dh-onto__title,
[data-theme="dark"] body[data-portal="datahub"] .dh-persona__title,
[data-theme="dark"] body[data-portal="datahub"] .dh-guide__title{color:var(--stone-lime,#A5FA00)}
[data-theme="dark"] body[data-portal="datahub"] .dh-anchor{background:var(--card); border-color:var(--line)}
[data-theme="dark"] body[data-portal="datahub"] .dh-term__pop,
[data-theme="dark"] body[data-portal="datahub"] .dh-toast{background:#020617; border:1px solid var(--line)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-onto,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-persona__card,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-guide__step a,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-rail{background:var(--card); border-color:var(--line)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-onto__tabs,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-onto__rel{background:rgba(255,255,255,.04)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-onto__title,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-persona__title,
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-guide__title{color:var(--stone-lime,#A5FA00)}
  :root:not([data-theme="light"]) body[data-portal="datahub"] .dh-anchor{background:var(--card); border-color:var(--line)}
}

@media(prefers-reduced-motion:reduce){
  body[data-portal="datahub"] .dh2-reveal{opacity:1 !important; transform:none !important; transition:none !important}
  body[data-portal="datahub"] .dh-persona__card,
  body[data-portal="datahub"] .dh-onto__rel,
  body[data-portal="datahub"] .dh-guide__step a,
  body[data-portal="datahub"] .dh-term__pop,
  body[data-portal="datahub"] .dh-toast,
  body[data-portal="datahub"] .dh-rail__dot::before{transition:none !important}
}

@media print{
  body[data-portal="datahub"] .dh-rail,
  body[data-portal="datahub"] .dh-anchor,
  body[data-portal="datahub"] .dh-toast{display:none !important}
  body[data-portal="datahub"] .dh-term{border-bottom:0}
  body[data-portal="datahub"] .dh-term__pop{display:none !important}
  body[data-portal="datahub"] .dh2-reveal{opacity:1 !important; transform:none !important}
  body[data-portal="datahub"] .dh-onto,
  body[data-portal="datahub"] .dh-persona__card,
  body[data-portal="datahub"] .dh-guide{break-inside:avoid}
}