/* Destaques da tela de entrada (auth/_destaques.html).
   O estado padrão é o FINAL: sem JS ou com movimento reduzido tudo aparece.
   login-destaques.js põe .dx-anima na seção e .is-on no painel visível; só
   então valem os estados iniciais das animações. Cores sólidas, sem degradê. */

.dx {
  --dx-ink: #151824;
  --dx-muted: #5c6070;
  --dx-faint: #8b8f9c;
  --dx-surface: #ffffff;
  --dx-soft: #eef6fc;
  --dx-line: #dfe7ee;
  /* Paleta da seção, derivada do azul PRISMA #0881c8. */
  --dx-brand: #0881c8;      /* azul PRISMA */
  --dx-solido: #0881c8;     /* fundo dos cartões sólidos: igual nos dois temas */
  --dx-brand-ink: #055f94;  /* azul profundo: destaque sobre fundo claro */
  --dx-navy: #0b3a5e;       /* marinho */
  --dx-agua: #0e9488;       /* verde-água (análogo) */
  --dx-eco: #1e8f57;        /* verde (análogo) */
  --dx-laranja: #ec7a1c;    /* laranja (complementar) */
  --dx-laranja-ink: #c9600c;
  /* Par da barra empilhada: azul × laranja, separáveis em qualquer daltonismo. */
  --dx-s1: var(--dx-brand);
  --dx-s2: var(--dx-laranja);
  --dx-shadow: 0 1px 2px rgba(20, 24, 40, .05), 0 12px 32px -12px rgba(20, 24, 40, .14);
  width: 100%; max-width: 1600px; margin: 0 auto 88px; padding: 0 24px;
  color: var(--dx-ink);
}
.dark .dx {
  --dx-ink: #e8eaf0;
  --dx-muted: #a3a9b8;
  --dx-faint: #7c8394;
  --dx-surface: #1b2029;
  --dx-soft: #1d2a36;
  --dx-line: #2a3542;
  --dx-brand: #2a9be0;
  --dx-brand-ink: #8fd0f5;
  --dx-laranja: #e07020;
  --dx-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5);
}

/* ── Cabeçalho ─────────────────────────────────────────────── */
.dx-head { text-align: center; margin-bottom: 28px; }
.dx-kicker { margin: 0 0 6px; color: var(--dx-muted); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
.dx-titulo { margin: 0; color: var(--dx-brand); font-size: clamp(30px, 3.4vw, 44px); font-weight: 850;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.05; }
.dark .dx-titulo { color: var(--dx-brand-ink); }

/* ── Abas: controle segmentado com pílula deslizante ───────── */
.dx-tabs { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 32px;
  padding: 6px; gap: 4px; border: 1px solid var(--dx-line); border-radius: 9999px;
  background: var(--dx-surface); box-shadow: var(--dx-shadow); }
.dx-tabs-pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); border-radius: 9999px;
  background: var(--dx-solido); transform: translateX(var(--x, 0)); opacity: 0;
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1), background-color .3s; }
.dx-tabs.is-pronto .dx-tabs-pill { opacity: 1; }
.dx-tabs[data-tema="eco"] .dx-tabs-pill { background: var(--dx-eco); }
.dx-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px;
  border: 0; border-radius: 9999px; background: transparent; color: var(--dx-ink); cursor: pointer; text-align: left;
  transition: color .25s; }
.dx-tab-ico { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: var(--dx-soft); color: var(--dx-brand); font-size: 18px;
  transition: background-color .25s, color .25s, transform .3s; }
.dx-tab[data-tema="eco"] .dx-tab-ico { color: var(--dx-eco); }
.dx-tab-txt { display: flex; flex-direction: column; line-height: 1.15; }
.dx-tab-txt b { font-size: 15.5px; font-weight: 800; }
.dx-tab-txt small { margin-top: 2px; color: var(--dx-muted); font-size: 12px; font-weight: 600; transition: color .25s; }
.dx-tab:hover .dx-tab-ico { transform: scale(1.08); }
.dx-tab[aria-selected="true"] { color: #fff; }
.dx-tab[aria-selected="true"] .dx-tab-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.dx-tab[aria-selected="true"] .dx-tab-txt small { color: rgba(255, 255, 255, .82); }
/* Sem JS a pílula não se posiciona: o próprio botão ganha o fundo. */
.dx-tabs:not(.is-pronto) .dx-tab[aria-selected="true"] { background: var(--dx-solido); }
.dx-tabs:not(.is-pronto) .dx-tab[data-tema="eco"][aria-selected="true"] { background: var(--dx-eco); }
.dx-tab:focus-visible, .dx-painel:focus-visible, .dx-coluna:focus-visible { outline: 3px solid var(--dx-s1); outline-offset: 3px; }
.dx-painel { border-radius: 20px; }

/* ── Botão "Abrir" de cada cartão (detalhes carregados sob demanda) ── */
.dx-card { --dx-abrir-cor: var(--dx-brand-ink); }
.dx-abrir { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 1px solid var(--dx-line); border-radius: 999px; background: var(--dx-surface);
  color: var(--dx-abrir-cor); font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.dx-abrir .bi { font-size: 12px; transition: transform .25s; }
.dx-abrir:hover, .dx-abrir:focus-visible { background: var(--dx-solido); border-color: var(--dx-solido); color: #fff;
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8, 129, 200, .3); }
.dx-abrir:hover .bi { transform: scale(1.2); }
.dx-abrir:focus-visible { outline: 3px solid var(--dx-s1); outline-offset: 2px; }
.dx-abrir-mini { top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; justify-content: center; }
.dx-ritmo .dx-abrir, .dx-eco .dx-abrir { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.dx-ritmo .dx-abrir:hover, .dx-eco .dx-abrir:hover,
.dx-ritmo .dx-abrir:focus-visible, .dx-eco .dx-abrir:focus-visible { background: #fff; border-color: #fff; color: var(--dx-navy); }
.dx-abrir.is-carregando .bi { animation: dx-gira .8s linear infinite; }
@keyframes dx-gira { to { transform: rotate(360deg); } }
/* O título não passa por baixo do botão. */
.dx-card > .dx-pergunta, .dx-card-head > .dx-pergunta, .dx-eco-hero-txt > .dx-pergunta { padding-right: 96px; }
.dx-card.is-origem { visibility: hidden; }

/* ── Grade (bento) ─────────────────────────────────────────── */
.dx-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.dx-card { position: relative; min-width: 0; padding: 24px; border: 1px solid var(--dx-line); border-radius: 20px;
  background: var(--dx-surface); box-shadow: var(--dx-shadow); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease; }
.dx-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(20,24,40,.05), 0 20px 40px -14px rgba(20,24,40,.22); }
.dx-serie { grid-column: span 6; grid-row: span 2; display: flex; flex-direction: column; }
.dx-ritmo { grid-column: span 3; grid-row: span 2; }
.dx-composicao { grid-column: span 3; }
.dx-tile { grid-column: span 3; }

.dx-pergunta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--dx-ink);
  font-size: 16px; font-weight: 800; line-height: 1.3; }
.dx-pergunta .bi { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--dx-soft); color: var(--dx-brand); font-size: 15px; }
.dark .dx-pergunta .bi { color: var(--dx-brand-ink); }
.dx-lead { margin: -8px auto 26px; max-width: 760px; color: var(--dx-muted); font-size: 17px; line-height: 1.5; text-align: center; }
.dx-hero { margin: 0; font-size: clamp(36px, 4vw, 54px); font-weight: 850; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--dx-brand); white-space: nowrap; }
.dark .dx-hero { color: var(--dx-brand-ink); }
.dx-sub { margin: 10px 0 0; color: var(--dx-muted); font-size: 14.5px; line-height: 1.5; }
.dx-sub b { color: var(--dx-ink); }
.dx-num { display: inline-block; }

/* ── Série anual ───────────────────────────────────────────── */
.dx-chart { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 18px; }
.dx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.dx-grade { stroke: var(--dx-line); stroke-width: 1; stroke-dasharray: 3 4; }
.dx-base { stroke: var(--dx-faint); stroke-width: 1; }
.dx-tick, .dx-ano { fill: var(--dx-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dx-alvo { fill: transparent; }
.dx-barra { fill: var(--dx-brand); transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), fill .2s; transition-delay: calc(var(--i, 0) * 70ms); }
.dx-coluna.is-pico .dx-barra { fill: var(--dx-brand-ink); }
.dark .dx-coluna.is-pico .dx-barra { fill: var(--dx-brand-ink); }
/* O preenchimento hachurado vem no style do path (padrão com id por gráfico). */
.dx-coluna.is-parcial .dx-barra { stroke: var(--dx-brand); stroke-width: 1.5; }
.dx-hachura-fundo { fill: color-mix(in srgb, var(--dx-brand) 18%, var(--dx-surface)); }
.dx-hachura-linha { stroke: var(--dx-brand); stroke-width: 2.4; }
.dx-coluna { cursor: default; outline: none; }
.dx-coluna:hover .dx-barra, .dx-coluna:focus-visible .dx-barra { fill: var(--dx-s2); transition-delay: 0s; }
.dx-coluna.is-parcial:hover .dx-barra { stroke: var(--dx-s2); }
.dx-rotulo { fill: var(--dx-ink); font-size: 13px; font-weight: 800; transition: opacity .4s; transition-delay: calc(var(--i, 0) * 70ms + .6s); }
.dx-legenda-parcial { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--dx-muted); font-size: 12.5px; }
.dx-amostra-parcial { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--dx-brand);
  background: repeating-linear-gradient(45deg, var(--dx-brand) 0 2px, transparent 2px 5px); }
.dx-tooltip { position: absolute; z-index: 5; padding: 8px 12px; border-radius: 10px; background: #151824; color: #fff;
  font-size: 13px; line-height: 1.35; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%);
  box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.dx-tooltip b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.dx-tooltip small { color: #b9bfd0; }
.dark .dx-tooltip { background: #f0f2f8; color: #151824; }
.dark .dx-tooltip small { color: #5c6070; }

.dx-marcos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
  margin: 20px 0 0; padding: 0; list-style: none; }
.dx-marcos li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: var(--dx-soft); }
.dx-marcos .bi { grid-row: span 3; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--dx-brand); color: #fff; font-size: 17px; }
.dx-marcos span { color: var(--dx-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dx-marcos b { font-size: 22px; font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dx-marcos small { color: var(--dx-faint); font-size: 12.5px; }

/* ── Ritmo (cartão sólido) ─────────────────────────────────── */
.dx-ritmo { display: flex; flex-direction: column; border: 0; background: var(--dx-solido); color: #fff; }
.dx-ritmo .dx-pergunta { color: #fff; }
.dx-ritmo .dx-pergunta .bi, .dx-eco .dx-pergunta .bi { background: rgba(255,255,255,.18); color: #fff; }
.dx-pulso { height: 64px; margin: 6px -24px 8px; }
.dx-pulso svg { width: 100%; height: 100%; max-width: none; }
.dx-ecg { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dx-ritmo-num { display: flex; align-items: baseline; gap: 10px; margin: 0; font-weight: 850; line-height: 1; }
.dx-ritmo-num .dx-num { font-size: clamp(64px, 7vw, 96px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dx-ritmo-a, .dx-ritmo-s { font-size: 18px; font-weight: 700; color: #fff; }
.dx-ritmo-txt { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: #fff; }
/* Contador "desde que você chegou": painel claro dentro do cartão azul. */
.dx-ao-vivo { margin: auto 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 12px;
  align-items: center; padding: 16px 18px; border-radius: 16px; background: #fff; color: var(--dx-navy); }
.dx-ao-vivo-n { min-width: 56px; height: 56px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--dx-soft); color: var(--dx-brand-ink); font-size: 30px; font-weight: 850;
  font-variant-numeric: tabular-nums; line-height: 1; }
.dx-ao-vivo-n.is-bump { animation: dx-bump .6s cubic-bezier(.3, 1.6, .5, 1); }
.dx-ao-vivo-txt { margin: 0; font-size: 14.5px; line-height: 1.35; color: #3b4a5a; }
.dx-ao-vivo-txt b { display: block; font-size: 16px; font-weight: 800; color: var(--dx-navy); }
.dx-ao-vivo-barra { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #e3eef6; overflow: hidden; }
.dx-ao-vivo-barra > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--dx-solido);
  transform: scaleX(0); transform-origin: left center; will-change: transform; }
/* Enche do zero ao cheio em um intervalo e recomeça; o JS ajusta duração e fase. */
.dx-ao-vivo-barra > span.is-correndo { animation: dx-enche 25s linear infinite; }
@keyframes dx-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .dx-ao-vivo-barra { display: none; } }
.dx-ao-vivo-nota { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12px; color: #5b6b7b; }
.dark .dx-ao-vivo { background: #13202c; color: #e8eaf0; }
.dark .dx-ao-vivo-n { background: #1d3446; color: #8fd0f5; }
.dark .dx-ao-vivo-txt { color: #b9c6d3; }
.dark .dx-ao-vivo-txt b { color: #fff; }
.dark .dx-ao-vivo-barra { background: #24384a; }
.dark .dx-ao-vivo-nota { color: #93a3b3; }

/* ── Composição (barra empilhada) ──────────────────────────── */
.dx-pilha { display: flex; gap: 2px; height: 18px; margin: 20px 0 14px; border-radius: 6px; overflow: hidden;
  background: var(--dx-soft); }
.dx-seg { width: var(--w); height: 100%; transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .25s; }
.dx-seg:first-child { border-radius: 6px 0 0 6px; }
.dx-seg:last-child { border-radius: 0 6px 6px 0; }
.dx-s1 { background: var(--dx-s1); }
.dx-s2 { background: var(--dx-s2); }
.dx-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none;
  color: var(--dx-muted); font-size: 13.5px; }
.dx-legenda li { display: flex; align-items: center; gap: 7px; }
.dx-legenda b { color: var(--dx-ink); font-variant-numeric: tabular-nums; }
.dx-legenda em { font-style: normal; color: var(--dx-faint); }
.dx-chip { width: 12px; height: 12px; border-radius: 4px; flex: none; }

/* ── Mosaicos ──────────────────────────────────────────────── */
.dx-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; }
.dx-tile-ico { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  grid-row: span 2; width: 56px; height: 56px; border-radius: 16px; color: #fff; font-size: 24px; background: var(--dx-cor);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dx-tile:hover .dx-tile-ico { transform: rotate(-8deg) scale(1.1); }
.dx-c1 { --dx-cor: var(--dx-brand); }
.dx-c2 { --dx-cor: var(--dx-agua); }
.dx-c3 { --dx-cor: var(--dx-laranja); }
.dx-c4 { --dx-cor: var(--dx-navy); }
.dark .dx-c4 { --dx-cor: #2f6a9a; }
.dx-tile-num { margin: 0; align-self: end; font-size: clamp(28px, 2.6vw, 36px); font-weight: 850; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-tile-rot { margin: 0; align-self: start; color: var(--dx-ink); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.dx-tile-rot span { display: block; color: var(--dx-muted); font-weight: 500; font-size: 13px; }

/* ── Sustentabilidade: cartões sólidos ─────────────────────── */
.dx-eco .dx-card { border: 0; color: #fff; }
.dx-eco .dx-pergunta { color: #fff; }
.dx-eco-extra { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25);
  font-size: 14.5px; color: rgba(255,255,255,.9); }
.dx-eco-extra b { font-size: 20px; color: #fff; }
.dx-eco .dx-hero { color: #fff; }
.dx-eco .dx-sub { color: rgba(255,255,255,.88); }
.dx-eco .dx-sub b { color: #fff; }
.dx-eco-unid { margin: 6px 0 0; font-size: 17px; font-weight: 750; }
.dx-eco-nota { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: rgba(255,255,255,.8); }
.dx-eco-hero { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  align-items: center; gap: 24px; background: #0d6e57; padding: 32px; }
.dx-eco-hero .dx-hero { font-size: clamp(48px, 6vw, 76px); }
.dx-eco-hero .dx-sub { font-size: 16.5px; max-width: 520px; }
.dx-arvores   { grid-column: span 3; background: var(--dx-eco); }
.dx-agua      { grid-column: span 3; background: var(--dx-solido); }
.dx-campos    { grid-column: span 3; background: var(--dx-agua); }
.dx-peso      { grid-column: span 3; background: var(--dx-navy); }
.dx-economia  { grid-column: span 4; background: var(--dx-laranja-ink); display: flex; flex-direction: column; }
.dx-economia .dx-cofre { height: 96px; }
.dx-economia .dx-porco { font-size: 76px; }
.dx-economia .dx-eco-extra { margin-top: auto; }

.dx-everest svg { display: block; width: 100%; height: auto; overflow: visible; }
.dx-everest-chao { stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.dx-montanha { fill: rgba(255,255,255,.28); }
.dx-neve { fill: #fff; }
.dx-papel { fill: #fff; transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .3s; }
.dx-papel-linha { stroke: #b6e0d4; stroke-width: 1; transition: opacity .4s 1.5s; }
.dx-everest-rot { fill: #fff; font-size: 12px; font-weight: 800; transition: opacity .4s 1.4s; }
.dx-everest-leg { fill: rgba(255,255,255,.75); font-size: 11px; }

.dx-grade-icones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.dx-grade-icones > * { display: inline-block; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
  transition-delay: calc(var(--i, 0) * 28ms + .35s); }
.dx-arvores .dx-grade-icones { font-size: 22px; color: #c8f0d6; }
.dx-arvores .dx-grade-icones > :nth-child(3n) { color: #fff; }
.dx-grade-campos svg { width: 30px; height: 20px; max-width: none; }
.dx-grade-campos rect { fill: #2fb3a6; stroke: #fff; stroke-width: 1.2; }
.dx-grade-campos line, .dx-grade-campos circle { fill: none; stroke: #fff; stroke-width: 1.2; }
.dx-grade-carretas { gap: 4px 6px; font-size: 17px; color: rgba(255,255,255,.9); }

.dx-agua-corpo { display: flex; align-items: center; gap: 16px; }
.dx-agua-corpo .dx-hero { font-size: clamp(34px, 3vw, 46px); }
.dx-gota { flex: none; width: 86px; height: auto; max-width: none; }
.dx-gota-fundo { fill: rgba(255,255,255,.16); stroke: rgba(255,255,255,.55); stroke-width: 2; }
.dx-onda { fill: #9adcff; }
.dx-onda-2 { fill: #d4efff; opacity: .7; }
.dx-onda-nivel { transform: translateY(0); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) .3s; }

.dx-cofre { position: relative; height: 70px; margin: 4px 0 10px; }
.dx-porco { position: absolute; left: 0; bottom: 0; font-size: 56px; line-height: 1; color: #ffe0c2; }
.dx-moeda { position: absolute; left: calc(18px + var(--i) * 12px); top: 4px; font-size: 18px; color: #ffd166; }
.dx-anima .dx-moeda { left: 22px; }

/* ── Metodologia e fonte ───────────────────────────────────── */
.dx-metodo { margin: 22px auto 0; max-width: 920px; border: 1px solid var(--dx-line); border-radius: 14px;
  background: var(--dx-surface); }
.dx-metodo summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; cursor: pointer;
  color: var(--dx-eco); font-size: 15px; font-weight: 800; list-style: none; }
.dark .dx-metodo summary { color: #45c486; }
.dx-metodo summary::-webkit-details-marker { display: none; }
.dx-chevron { margin-left: auto; font-size: 15px; transition: transform .25s; }
.dx-metodo[open] .dx-chevron { transform: rotate(180deg); }
.dx-metodo-corpo { padding: 0 22px 18px; color: var(--dx-muted); font-size: 14.5px; line-height: 1.6; }
.dx-metodo-corpo b { color: var(--dx-ink); }
.dx-metodo-corpo p { margin: 0 0 8px; }
.dx-metodo-corpo ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.dx-metodo-corpo li { margin-bottom: 4px; }
.dx-metodo-corpo a { color: var(--dx-s1); text-decoration: underline; }
.dx-fonte { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 24px 0 0;
  color: var(--dx-faint); font-size: 13px; }

/* ── Estados iniciais (só com .dx-anima) ───────────────────── */
.dx-anima .dx-card { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.dx-anima .dx-bento > :nth-child(2) { transition-delay: .08s; }
.dx-anima .dx-bento > :nth-child(3) { transition-delay: .16s; }
.dx-anima .dx-bento > :nth-child(4) { transition-delay: .24s; }
.dx-anima .dx-bento > :nth-child(n+5) { transition-delay: calc(.3s + var(--i, 0) * .07s); }
.dx-anima .dx-painel:not(.is-on) .dx-card { opacity: 0; transform: translateY(22px); }
.dx-anima .dx-painel:not(.is-on) .dx-barra { transform: scaleY(0); }
.dx-anima .dx-painel:not(.is-on) .dx-rotulo { opacity: 0; transition-delay: 0s; }
.dx-anima .dx-painel:not(.is-on) .dx-seg { width: 0; }
.dx-anima .dx-painel:not(.is-on) .dx-grade-icones > * { transform: scale(0); opacity: 0; transition-delay: 0s; }
.dx-anima .dx-painel:not(.is-on) .dx-papel { transform: scaleY(0); }
.dx-anima .dx-painel:not(.is-on) .dx-papel-linha,
.dx-anima .dx-painel:not(.is-on) .dx-everest-rot { opacity: 0; transition-delay: 0s; }
.dx-anima .dx-painel:not(.is-on) .dx-onda-nivel { transform: translateY(80px); }

/* Movimento contínuo: só quando a pessoa não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  .dx-anima .dx-ecg { stroke-dasharray: 260; animation: dx-ecg 2.4s linear infinite; }
  .dx-anima .dx-onda { animation: dx-onda 3.2s linear infinite; }
  .dx-anima .dx-onda-2 { animation-duration: 4.6s; animation-direction: reverse; }
  .dx-anima .dx-moeda { animation: dx-moeda 2.8s ease-in infinite; animation-delay: calc(var(--i) * .9s); }
  .dx-anima .dx-porco { animation: dx-porco 2.8s ease-in-out infinite; }
}
@keyframes dx-ecg { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes dx-onda { from { transform: translateX(0); } to { transform: translateX(100px); } }
@keyframes dx-moeda { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(34px); opacity: 1; } 70%, 100% { transform: translateY(34px); opacity: 0; } }
@keyframes dx-porco { 0%, 55%, 100% { transform: translateY(0) rotate(0); } 62% { transform: translateY(-3px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }
@keyframes dx-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .dx-serie { grid-column: span 8; }
  .dx-ritmo { grid-column: span 4; }
  .dx-composicao { grid-column: span 6; }
  .dx-arvores, .dx-agua, .dx-campos, .dx-peso { grid-column: span 6; }
}
@media (max-width: 1024px) {
  .dx-serie, .dx-ritmo { grid-column: span 12; grid-row: auto; }
  .dx-ritmo { min-height: 0; }
  .dx-tile { grid-column: span 6; }
  .dx-arvores, .dx-agua { grid-column: span 12; }
  .dx-campos, .dx-peso { grid-column: span 6; }
  .dx-eco-hero, .dx-economia { grid-column: span 12; }
  .dx-economia .dx-eco-extra { margin-top: 14px; }
}
@media (max-width: 680px) {
  .dx { padding: 0 16px; margin-bottom: 56px; }
  .dx-bento { gap: 14px; }
  .dx-card { padding: 20px; border-radius: 18px; }
  .dx-composicao, .dx-campos, .dx-peso { grid-column: span 12; }
  .dx-tile { grid-column: span 6; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .dx-tile-ico { margin-bottom: 6px; }
  .dx-tile-ico { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
  .dx-tile-num { font-size: 26px; }
  .dx-tabs { width: 100%; }
  .dx-tab { flex: 1 1 0; min-width: 0; padding: 6px 10px 6px 6px; gap: 8px; }
  .dx-tab-ico { width: 34px; height: 34px; font-size: 16px; }
  .dx-tab-txt b { font-size: 14px; }
  .dx-tab-txt small { display: none; }
  .dx-eco-hero { grid-template-columns: 1fr; padding: 24px; }
  .dx-everest { max-width: 300px; }
  .dx-agua-corpo { gap: 14px; }
  .dx-gota { width: 78px; }
  /* O SVG encolhe ~50% no celular: a fonte no viewBox compensa. */
  .dx-tick, .dx-ano { font-size: 17px; }
  .dx-rotulo { font-size: 19px; }
  .dx-ano.is-alt { display: none; }
  .dx-marcos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .dx-marcos li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px; }
  .dx-marcos .bi { width: 30px; height: 30px; margin-bottom: 4px; font-size: 14px; border-radius: 9px; }
  .dx-marcos span { font-size: 10.5px; }
  .dx-marcos b { font-size: 18px; }
  .dx-marcos small { font-size: 11.5px; }
}
/* Depois da entrada, hover sem o atraso escalonado. */
.dx-anima .is-assentado .dx-card, .dx-anima .is-assentado .dx-barra { transition-delay: 0s !important; }
/* O Tailwind compilado do login não traz .sr-only. */
.dx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Aba Diário Oficial ─────────────────────────────────────── */
.dx { --dx-cad1: #0881c8; --dx-cad2: #ec7a1c; --dx-cad3: #0b3a5e; --dx-cad4: #1e8f57; --dx-cad5: #8d939c; }
.dark .dx { --dx-cad1: #2a9be0; --dx-cad2: #e07020; --dx-cad3: #a9c7e8; --dx-cad4: #23a065; --dx-cad5: #9aa1ab; }
.dx-tabs[data-tema="do"] .dx-tabs-pill, .dx-tabs:not(.is-pronto) .dx-tab[data-tema="do"][aria-selected="true"] { background: var(--dx-navy); }
.dark .dx-tabs[data-tema="do"] .dx-tabs-pill { background: #2f6a9a; }
.dx-tab[data-tema="do"] .dx-tab-ico { color: var(--dx-navy); }
.dark .dx-tab[data-tema="do"] .dx-tab-ico { color: #a9c7e8; }
.dx-tab[data-tema="do"][aria-selected="true"] .dx-tab-ico { color: #fff; }

.dx-do-serie { grid-column: span 6; grid-row: span 2; }
.dx-do-horario { grid-column: span 6; }
.dx-do-atos, .dx-do-cadernos { grid-column: span 3; }
.dx-do-negocios { grid-column: span 8; }
.dx-do-valor { grid-column: span 4; display: flex; flex-direction: column; border: 0; background: var(--dx-navy); color: #fff; }
.dx-do-valor .dx-pergunta, .dx-do-valor .dx-hero { color: #fff; }
.dx-do-valor .dx-sub { color: rgba(255,255,255,.88); }
.dx-do-valor .dx-sub b { color: #fff; }
.dx-do-valor .dx-pergunta .bi { background: rgba(255,255,255,.18); color: #fff; }
.dx-do-valor .dx-abrir { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; }
.dx-do-valor .dx-abrir:hover, .dx-do-valor .dx-abrir:focus-visible { background: #fff; border-color: #fff; color: var(--dx-navy); }
.dark .dx-do-valor { background: #16324d; }

/* Mapa de calor 7 × 24 (dias × horas) */
.dx-do-hora-topo { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.dx-do-hora-topo .dx-sub { margin: 0; max-width: 440px; }
.dx-calor { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.dx-calor-h { color: var(--dx-faint); font-size: 10.5px; text-align: left; font-variant-numeric: tabular-nums; }
.dx-calor-dia { color: var(--dx-muted); font-size: 11.5px; font-weight: 700; }
.dx-calor-c { aspect-ratio: 1.25; border-radius: 3px; transition: transform .15s, opacity .4s; transition-delay: 0s, calc(var(--i, 0) * 18ms + .2s); }
.dx-calor-c:hover { transform: scale(1.35); }
.dx-calor .n0, .dx-calor-leg .n0 { background: #edf1f5; } .dx-calor .n1, .dx-calor-leg .n1 { background: #cfe8f7; }
.dx-calor .n2, .dx-calor-leg .n2 { background: #9ad0f0; } .dx-calor .n3, .dx-calor-leg .n3 { background: #4fade6; }
.dx-calor .n4, .dx-calor-leg .n4 { background: #0881c8; } .dx-calor .n5, .dx-calor-leg .n5 { background: #055f94; }
.dark .dx-calor .n0 { background: #222c37; } .dark .dx-calor .n1, .dark .dx-calor-leg .n1 { background: #173f5c; }
.dark .dx-calor .n2, .dark .dx-calor-leg .n2 { background: #1b5f8c; } .dark .dx-calor .n3, .dark .dx-calor-leg .n3 { background: #2384c0; }
.dark .dx-calor .n4, .dark .dx-calor-leg .n4 { background: #49a8e3; } .dark .dx-calor .n5, .dark .dx-calor-leg .n5 { background: #9fd6f7; }
.dx-calor-leg { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; color: var(--dx-faint); font-size: 12px; }
.dx-calor-leg span { width: 12px; height: 12px; border-radius: 3px; }

/* Prazos e modalidades: barras horizontais compactas */
.dx-prazos, .dx-mods { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dx-prazos li, .dx-mods li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 40px; align-items: center; gap: 10px;
  font-size: 13px; color: var(--dx-muted); }
.dx-prazos b, .dx-mods b { text-align: right; color: var(--dx-ink); font-variant-numeric: tabular-nums; }
.dx-prazo-barra, .dx-mod-barra { height: 10px; border-radius: 999px; background: var(--dx-soft); overflow: hidden; }
.dx-prazo-barra i, .dx-mod-barra i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--dx-s1);
  transition: width 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + .3s); }
.dx-prazos li:first-child .dx-prazo-barra i { background: var(--dx-laranja); }
.dx-atos li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 36px; }
.dx-atos li > span:first-child { color: var(--dx-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-mods li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 40px; }
.dx-mod-nome { color: var(--dx-ink); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-do-neg { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: center; }
.dx-do-neg .dx-mods { margin: 0; }

/* Cadernos: barra empilhada + legenda em coluna */
.dx-pilha-cad { margin-top: 8px; }
.dx-cad1 { background: var(--dx-cad1); } .dx-cad2 { background: var(--dx-cad2); } .dx-cad3 { background: var(--dx-cad3); }
.dx-cad4 { background: var(--dx-cad4); } .dx-cad5 { background: var(--dx-cad5); }
.dx-legenda-col { flex-direction: column; gap: 7px; }
.dx-legenda-col li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; }
.dx-leg-nome { color: var(--dx-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Entradas animadas (só com .dx-anima) */
.dx-anima .dx-painel:not(.is-on) .dx-prazo-barra i,
.dx-anima .dx-painel:not(.is-on) .dx-mod-barra i { width: 0; transition-delay: 0s; }
.dx-anima .dx-painel:not(.is-on) .dx-calor-c { opacity: 0; transition-delay: 0s; }

@media (max-width: 1279px) {
  .dx-do-serie { grid-column: span 12; grid-row: auto; }
  .dx-do-horario { grid-column: span 12; }
  .dx-do-atos, .dx-do-cadernos { grid-column: span 6; }
}
@media (max-width: 1024px) {
  .dx-do-negocios, .dx-do-valor { grid-column: span 12; }
}
@media (max-width: 680px) {
  .dx-do-atos, .dx-do-cadernos { grid-column: span 12; }
  .dx-do-neg { grid-template-columns: 1fr; gap: 16px; }
  .dx-do-hora-topo { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dx-calor { grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .dx-calor-h { font-size: 9px; }
}

/* Celulares estreitos (até 400px): o SVG do gráfico anual encolhe mais. */
@media (max-width: 400px) {
  .dx-tick, .dx-ano { font-size: 21px; }
  .dx-rotulo { font-size: 23px; }
  .dx-hero { font-size: 34px; }
  .dx-eco-hero .dx-hero { font-size: 44px; }
  .dx-marcos li { padding: 8px; }
  .dx-marcos b { font-size: 16px; }
}

/* Seletor Processos | Documentos no cartão do ritmo (fundo azul) */
/* Logo abaixo do texto, na mesma largura dele: duas metades iguais. */
.dx-ritmo-alt { display: flex; width: 100%; gap: 4px; margin: 16px 0 16px; padding: 4px; border-radius: 999px;
  background: rgba(3, 50, 82, .32); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.dx-ritmo-alt button { flex: 1 1 0; justify-content: center; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 800; cursor: pointer;
  transition: background-color .25s, color .25s, box-shadow .25s; }
.dx-ritmo-alt button:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.dx-ritmo-alt button[aria-pressed="true"] { background: #fff; color: var(--dx-navy); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.dx-ritmo-alt button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dx-ritmo-modo { animation: dx-ritmo-entra .35s ease both; }
@keyframes dx-ritmo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dx-ritmo-modo { animation: none; } }

/* ══ Seletor de sistema: Processos Eletrônicos | Processos Físicos ══ */
/* Físicos em azul escuro: mesma família do azul dos eletrônicos, bem mais
   fundo (validado: separa do #0881c8 inclusive para daltônicos e não se
   confunde com o marinho do Diário Oficial). Texto branco sobre ele (10,4:1).
   --dx-fis-solido é igual nos dois temas; --dx-fis (séries) clareia no escuro. */
.dx { --dx-fis: #1e3a8a; --dx-fis-ink: #1e3a8a; --dx-fis-forte: #14275e; --dx-fis-soft: #e8edf8; --dx-fis-solido: #1e3a8a; }
.dark .dx { --dx-fis: #c7d2fe; --dx-fis-ink: #c7d2fe; --dx-fis-forte: #e0e7ff; --dx-fis-soft: #1f2640; }
.dx-sistemas { position: relative; display: flex; width: max-content; max-width: 100%; margin: 0 auto 16px; padding: 6px; gap: 6px;
  border-radius: 22px; background: var(--dx-soft); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06); }
.dx-sistemas-pill { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); border-radius: 17px; background: var(--dx-solido);
  transform: translateX(var(--x, 0)); opacity: 0; box-shadow: 0 8px 20px -6px rgba(8, 129, 200, .5);
  transition: transform .5s cubic-bezier(.3, 1.25, .5, 1), width .5s cubic-bezier(.3, 1.25, .5, 1), background-color .35s, box-shadow .35s; }
.dx-sistemas.is-pronto .dx-sistemas-pill { opacity: 1; }
.dx-sistemas[data-tema="fis"] .dx-sistemas-pill { background: var(--dx-fis-solido); box-shadow: 0 8px 20px -6px rgba(30, 58, 138, .55); }
.dx-sistema { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 10px 24px 10px 10px; border: 0;
  border-radius: 17px; background: transparent; color: var(--dx-ink); cursor: pointer; text-align: left; transition: color .3s; }
.dx-sistema-ico { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px;
  background: var(--dx-surface); color: var(--dx-brand); font-size: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: background-color .3s, color .3s, transform .3s; }
.dx-sistema[data-tema="fis"] .dx-sistema-ico { color: var(--dx-fis-ink); }
.dx-sistema-txt { display: flex; flex-direction: column; line-height: 1.15; }
.dx-sistema-txt b { font-size: 16.5px; font-weight: 850; }
.dx-sistema-txt small { margin-top: 3px; color: var(--dx-muted); font-size: 12px; font-weight: 650; transition: color .3s; }
.dx-sistema:hover .dx-sistema-ico { transform: scale(1.06); }
.dx-sistema[aria-selected="true"] { color: #fff; }
.dx-sistema[aria-selected="true"] .dx-sistema-ico { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.dx-sistema[aria-selected="true"] .dx-sistema-txt small { color: rgba(255, 255, 255, .85); }
.dx-sistemas:not(.is-pronto) .dx-sistema[aria-selected="true"] { background: var(--dx-solido); }
.dx-sistemas:not(.is-pronto) .dx-sistema[data-tema="fis"][aria-selected="true"] { background: var(--dx-fis-solido); }
.dx-sistema:focus-visible { outline: 3px solid var(--dx-s1); outline-offset: 3px; }
.dx-grupo { animation: dx-grupo-entra .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dx-grupo-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Abas dos físicos em azul escuro */
.dx-tabs[data-tema="fis"] .dx-tabs-pill, .dx-tabs:not(.is-pronto) .dx-tab[data-tema="fis"][aria-selected="true"] { background: var(--dx-fis-solido); }
.dx-tab[data-tema="fis"] .dx-tab-ico { color: var(--dx-fis-ink); }
.dx-tab[data-tema="fis"][aria-selected="true"] .dx-tab-ico { color: #fff; }
.dx-fis .dx-hero { color: var(--dx-fis-ink); }
.dx-fis .dx-pergunta .bi { color: var(--dx-fis-ink); background: var(--dx-fis-soft); }
.dx-fis .dx-barra { fill: var(--dx-fis); }
.dx-fis .dx-coluna.is-pico .dx-barra { fill: var(--dx-fis-forte); }
.dx-fis .dx-coluna:hover .dx-barra, .dx-fis .dx-coluna:focus-visible .dx-barra { fill: var(--dx-s1); }
.dx-fis .dx-hachura-fundo { fill: color-mix(in srgb, var(--dx-fis) 18%, var(--dx-surface)); }
.dx-fis .dx-hachura-linha, .dx-fis .dx-coluna.is-parcial .dx-barra { stroke: var(--dx-fis-forte); }
.dx-fis .dx-marcos .bi { background: var(--dx-fis-solido); color: #fff; }
.dx-fis .dx-prazo-barra i, .dx-fis .dx-mod-barra i, .dx-fis .dx-prazos li:first-child .dx-prazo-barra i { background: var(--dx-fis); }
.dx-fis-cor { background: var(--dx-fis); }
.dx-sit-ativos { background: var(--dx-fis); } .dx-sit-encerrados { background: #8d939c; } .dx-sit-cancelados { background: var(--dx-s2); }
.dark .dx-sit-encerrados { background: #9aa1ab; }
.dx-fis .dx-abrir { --dx-abrir-cor: var(--dx-fis-ink); }
.dx-fis .dx-abrir:hover, .dx-fis .dx-abrir:focus-visible { background: var(--dx-fis-solido); border-color: var(--dx-fis-solido); color: #fff;
  box-shadow: 0 6px 16px rgba(30, 58, 138, .35); }

/* Grade dos físicos */
.dx-fis-onde { grid-column: span 7; }
.dx-fis-arquivo { grid-column: span 5; }
.dx-fis-idade, .dx-fis-parado { grid-column: span 6; }
.dx-fis-assuntos { grid-column: span 12; }
.dx-fis-transicao { grid-column: span 8; }
.dx-fis-tram { grid-column: span 4; display: flex; flex-direction: column; }
.dx-fis-ence, .dx-fis-conv { grid-column: span 6; }

/* Cartões sólidos azul escuro (ritmo e arquivo): texto branco */
.dx .dx-fis-ritmo, .dx .dx-fis-arquivo { border: 0; background: var(--dx-fis-solido); color: #fff; }
.dx .dx-fis-ritmo .dx-pergunta, .dx .dx-fis-arquivo .dx-pergunta, .dx .dx-fis-arquivo .dx-hero,
.dx .dx-fis-ritmo .dx-ritmo-a, .dx .dx-fis-ritmo .dx-ritmo-s, .dx .dx-fis-ritmo .dx-ritmo-txt,
.dx .dx-fis-ritmo .dx-ritmo-txt b, .dx .dx-fis-arquivo .dx-sub b { color: #fff; }
.dx .dx-fis-arquivo .dx-sub { color: rgba(255, 255, 255, .88); }
.dx .dx-fis-ritmo .dx-pergunta .bi, .dx .dx-fis-arquivo .dx-pergunta .bi { background: rgba(255, 255, 255, .16); color: #fff; }
.dx .dx-fis-ritmo .dx-abrir, .dx .dx-fis-arquivo .dx-abrir { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; }
.dx .dx-fis-ritmo .dx-abrir:hover, .dx .dx-fis-arquivo .dx-abrir:hover,
.dx .dx-fis-ritmo .dx-abrir:focus-visible, .dx .dx-fis-arquivo .dx-abrir:focus-visible { background: #fff; border-color: #fff; color: var(--dx-fis-solido); box-shadow: none; }
.dx-fis-arquivo { display: flex; flex-direction: column; }
.dx-fis-papel { display: flex; gap: 6px; margin: 4px 0 14px; font-size: 30px; color: #fff; }
.dx-fis-papel .bi:nth-child(2) { transform: rotate(-8deg) translateY(4px); opacity: .6; }
.dx-fis-papel .bi:nth-child(3) { transform: rotate(6deg); opacity: .35; }
.dx-fis-vs { margin-top: auto; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--dx-fis-solido); }
.dx-fis-vs p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.dx-fis-vs p b { color: var(--dx-solido); font-size: 18px; }
.dx-fis-vs-barras { display: flex; flex-direction: column; gap: 6px; }
.dx-fis-vs-l { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; color: #4a5d6e; }
.dx-fis-vs-l i { font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.dx-fis-vs-l > span { height: 12px; width: var(--w); min-width: 4px; border-radius: 999px; background: var(--dx-fis-solido); transition: width 1s cubic-bezier(.2, .8, .2, 1) .4s; }
.dx-fis-vs-l.is-sei > span { background: var(--dx-solido); }
.dark .dx-fis-vs { background: #16212c; color: #e8eaf0; }
.dark .dx-fis-vs-l { color: #a3b3c3; }
.dx-fis-caixas { display: grid; grid-template-columns: repeat(6, max-content); gap: 6px 10px; margin: 2px 0 16px; font-size: 26px; color: #fff; }
.dx-fis-caixas .bi:nth-child(odd) { opacity: .55; }

/* Mini colunas (conversões) */
.dx-mini-cols { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 16px; }
.dx-mini-cols > span { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.dx-mini-cols i { display: block; width: 100%; max-width: 40px; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--dx-fis);
  transition: height .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.dx-mini-cols > span:nth-last-child(1) i { opacity: .6; }
.dx-mini-cols small { color: var(--dx-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.dx-mini-cols b { font-size: 11.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dx-mini-cols-alta { height: 200px; }

/* Duplas papel × digital */
.dx-duplas { display: flex; align-items: stretch; gap: 8px; height: 250px; margin-top: 12px; }
.dx-dupla { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dx-dupla-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--dx-faint); }
.dx-dupla-barras span { width: min(42%, 22px); height: var(--h); border-radius: 5px 5px 0 0;
  transition: height 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 60ms + .2s); }
.dx-dupla.is-parcial .dx-dupla-barras span { opacity: .6; }
.dx-dupla small { color: var(--dx-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dx-dupla:hover .dx-dupla-barras span { filter: brightness(1.08); }
.dx-mods-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 4px; }

/* Entradas animadas (só com .dx-anima) */
.dx-anima .dx-painel:not(.is-on) .dx-mini-cols i,
.dx-anima .dx-painel:not(.is-on) .dx-dupla-barras span { height: 0; transition-delay: 0s; }
.dx-anima .dx-painel:not(.is-on) .dx-fis-vs-l > span { width: 0; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .dx-grupo { animation: none; } }

@media (max-width: 1279px) {
  .dx-fis-onde, .dx-fis-arquivo, .dx-fis-transicao, .dx-fis-tram { grid-column: span 12; }
}
@media (max-width: 1024px) {
  .dx-fis-idade, .dx-fis-parado, .dx-fis-ence, .dx-fis-conv { grid-column: span 12; }
}
@media (max-width: 680px) {
  .dx-sistemas { width: 100%; }
  .dx-sistema { flex: 1 1 0; min-width: 0; padding: 8px 10px 8px 8px; gap: 8px; }
  .dx-sistema-ico { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
  .dx-sistema-txt b { font-size: 13.5px; }
  .dx-sistema-txt small { display: none; }
  .dx-mods-2col { grid-template-columns: 1fr; }
  .dx-duplas { gap: 3px; height: 200px; }
  .dx-dupla small { font-size: 10.5px; writing-mode: vertical-rl; transform: rotate(180deg); }
  .dx-mini-cols b { font-size: 10.5px; }
}

/* Séries longas (mais de 16 anos): só os anos múltiplos de 5 e o último. */
.dx-ano.is-sem { display: none; }

/* Conversões por ano em telas estreitas: valor em duas linhas, sem vazar. */
@media (max-width: 400px) {
  .dx-mini-cols { gap: 4px; }
  .dx-mini-cols b { font-size: 10.5px; white-space: normal; text-align: center; line-height: 1.1; }
  .dx-mini-cols small { font-size: 10.5px; }
}

/* Documentos em papel (assunto >= 900): cartão à parte dos processos */
.dx-fis-docs { grid-column: span 12; }
.dx-fis-docs-corpo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.2fr); gap: 28px; align-items: center; }
.dx-fis-docs-corpo .dx-mods { margin: 0; }
.dx-fis-docs-ativos { margin: 12px 0 0; padding: 8px 12px; display: inline-block; border-radius: 10px; background: var(--dx-fis-soft);
  color: var(--dx-fis-ink); font-size: 13.5px; }
.dx-fis-docs-leg { margin: 0 0 6px; color: var(--dx-muted); font-size: 12.5px; font-weight: 700; }
.dx-mini-cols-densa { gap: 3px; height: 130px; margin-top: 0; }
.dx-mini-cols-densa > span { min-width: 0; }
/* O rótulo do ano não pode alargar a coluna: largura zero, texto transborda centrado. */
.dx-mini-cols-densa small { width: 0; display: flex; justify-content: center; overflow: visible; font-size: 10.5px; white-space: nowrap; }
@media (max-width: 1024px) { .dx-fis-docs-corpo { grid-template-columns: 1fr 1fr; } .dx-fis-docs-ano { grid-column: 1 / -1; } }
@media (max-width: 680px) { .dx-fis-docs-corpo { grid-template-columns: 1fr; gap: 18px; } }

/* ── Modo painel: um botão discreto, funções no menu ───────── */
.dx-head { position: relative; }
.dx-monitor { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 30; }
.dx-monitor[hidden] { display: none; }
.dx-mon-gatilho { position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--dx-line); border-radius: 12px; background: var(--dx-surface); color: var(--dx-muted);
  font-size: 17px; cursor: pointer; overflow: hidden; opacity: .75;
  transition: opacity .2s, color .2s, border-color .2s, background-color .2s; }
.dx-mon-gatilho:hover, .dx-mon-gatilho[aria-expanded="true"] { opacity: 1; color: var(--dx-brand); border-color: var(--dx-brand); }
.dx-monitor.is-rodando .dx-mon-gatilho { opacity: 1; color: var(--dx-brand); }
.dx-mon-gatilho:focus-visible, .dx-mon-item:focus-visible, .dx-mon-tempo select:focus-visible { outline: 3px solid var(--dx-s1); outline-offset: 2px; }
/* Andamento até a próxima troca: fio na base do botão, só com a rotação ligada. */
.dx-mon-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; }
.dx-mon-prog span { display: block; height: 100%; background: var(--dx-solido); transform: scaleX(0);
  transform-origin: 0 50%; transition: transform .25s linear; }
.dx-monitor.is-rodando .dx-mon-prog { opacity: 1; }
.dx-monitor.is-pausado .dx-mon-prog span { background: var(--dx-faint); }

.dx-mon-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; padding: 8px;
  border: 1px solid var(--dx-line); border-radius: 16px; background: var(--dx-surface); box-shadow: var(--dx-shadow);
  text-align: left; }
.dx-mon-menu[hidden] { display: none; }
.dx-mon-menu-tit { margin: 4px 8px 6px; color: var(--dx-faint); font-size: 11.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.dx-mon-item { width: 100%; display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center;
  padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--dx-ink); text-align: left; cursor: pointer; }
.dx-mon-item[hidden] { display: none; }
.dx-mon-item .bi { grid-row: span 2; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--dx-soft); color: var(--dx-brand); font-size: 15px; }
.dx-mon-item span { font-size: 14px; font-weight: 800; }
.dx-mon-item small { color: var(--dx-muted); font-size: 12px; }
.dx-mon-item:hover { background: var(--dx-soft); }
.dx-mon-item[aria-pressed="true"] .bi { background: var(--dx-solido); color: #fff; }
.dx-mon-tempo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 0;
  padding: 10px 8px 4px; border-top: 1px solid var(--dx-line); color: var(--dx-muted); font-size: 13px; font-weight: 700; }
.dx-mon-tempo select { height: 32px; padding: 0 8px; border: 1px solid var(--dx-line); border-radius: 8px;
  background: var(--dx-surface); color: var(--dx-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.dx-mon-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dx-mon-prog span { transition: none; } }
@media (max-width: 680px) { .dx-monitor { display: none; } }

/* Tela cheia (html.dx-painel-modo): só os gráficos. Fora Destaques e Memória
   Institucional nada aparece, e dentro deles saem título, abas, "Abrir" e
   botões de navegação. O botão do modo painel fica num canto, quase invisível
   até o mouse chegar perto; Esc também sai. Na vez da memória
   (html.dx-vez-memoria) os destaques somem e a memória ocupa a tela. */
html.dx-painel-modo { background: #f3f6f9; }
html.dark.dx-painel-modo { background: #11151c; }
html.dx-painel-modo body > :not(main):not(script) { display: none !important; }
html.dx-painel-modo main > :not(#destaques):not(#sobre) { display: none !important; }
html.dx-painel-modo main { min-height: 0; }
html.dx-painel-modo .dx { max-width: none; margin: 0; padding: 28px clamp(20px, 3vw, 56px) 32px; }
html.dx-painel-modo .dx-head { margin: 0; }
html.dx-painel-modo .dx-titulo,
html.dx-painel-modo .dx-lead,
html.dx-painel-modo .dx-sistemas,
html.dx-painel-modo .dx-tabs,
html.dx-painel-modo .dx-abrir,
html.dx-painel-modo .dx-fonte,
html.dx-painel-modo .dx-metodo,
html.dx-painel-modo .dx-painel details,
html.dx-painel-modo #sobre .institution-section-head,
html.dx-painel-modo #sobre .hx-story-btn,
html.dx-painel-modo #sobre .hx-era-nav-btn,
html.dx-painel-modo #sobre .hx-foot-row,
html.dx-painel-modo #sobre .hx-export-icon-btn,
html.dx-painel-modo #sobre .hx-details { display: none !important; }
html.dx-painel-modo .dx-card > .dx-pergunta, html.dx-painel-modo .dx-card-head > .dx-pergunta { padding-right: 0; }
html.dx-painel-modo .dx-monitor { position: fixed; top: auto; right: 16px; bottom: 16px; transform: none; z-index: 60; }
html.dx-painel-modo .dx-mon-gatilho { opacity: .25; }
html.dx-painel-modo .dx-monitor:hover .dx-mon-gatilho,
html.dx-painel-modo .dx-mon-gatilho:focus-visible,
html.dx-painel-modo .dx-mon-gatilho[aria-expanded="true"] { opacity: 1; }
html.dx-painel-modo .dx-mon-menu { top: auto; bottom: calc(100% + 8px); }
html.dx-painel-modo:not(.dx-vez-memoria) #sobre { display: none !important; }
html.dx-painel-modo #sobre { max-width: none; padding-top: 28px; }
html.dx-vez-memoria.dx-painel-modo .dx { padding: 0; }
html.dx-vez-memoria.dx-painel-modo .dx > :not(.dx-head) { display: none; }

/* Negócios no modo painel: só o Panorama geral, sem a ferramenta de busca.
   O panorama aparece mesmo que a pessoa estivesse em outra visão; as instruções
   de clique e os seletores somem, ficam os gráficos. */
html.dx-painel-modo #dx-painel-negocios .ng-hero,
html.dx-painel-modo #dx-painel-negocios .ng-barra,
html.dx-painel-modo #dx-painel-negocios .ng-filtros-painel,
html.dx-painel-modo #dx-painel-negocios .ng-retry,
html.dx-painel-modo #dx-painel-negocios .ng-leitura,
html.dx-painel-modo #dx-painel-negocios .ne-nav,
html.dx-painel-modo #dx-painel-negocios #ne-view-eventos,
html.dx-painel-modo #dx-painel-negocios #ne-view-leituras,
html.dx-painel-modo #dx-painel-negocios .ng-catalogo,
html.dx-painel-modo #dx-painel-negocios .ng-metodo,
html.dx-painel-modo #dx-painel-negocios .ng-toast,
html.dx-painel-modo #dx-painel-negocios .ng-metricas,
html.dx-painel-modo #dx-painel-negocios .ng-card-head p { display: none !important; }
html.dx-painel-modo #dx-painel-negocios #ne-view-panorama { display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
html.dx-painel-modo #ne-view-panorama > .ng-evolucao { grid-column: 1; grid-row: 1; }
html.dx-painel-modo #ne-view-panorama > .ng-card:not(.ng-evolucao):not(.ng-catalogo) { grid-column: 1; grid-row: 2; }
html.dx-painel-modo #ne-view-panorama > .ng-grid { display: contents; }
html.dx-painel-modo #ne-view-panorama > .ng-grid > .ng-card:first-child { grid-column: 2; grid-row: 1 / span 2; }
html.dx-painel-modo #ne-view-panorama > .ng-grid > .ng-card:last-child { grid-column: 3; grid-row: 1 / span 2; }
html.dx-painel-modo #ne-view-panorama .ng-card { margin: 0; }
html.dx-painel-modo #ne-view-panorama .ng-card-head { margin-bottom: 12px; }
html.dx-painel-modo #ne-view-panorama .ng-meses { height: 300px; overflow: hidden; }
@media (max-width: 1100px) {
  html.dx-painel-modo #dx-painel-negocios #ne-view-panorama { grid-template-columns: 1fr 1fr; }
  html.dx-painel-modo #ne-view-panorama > .ng-evolucao,
  html.dx-painel-modo #ne-view-panorama > .ng-card:not(.ng-evolucao):not(.ng-catalogo) { grid-column: 1 / -1; grid-row: auto; }
  html.dx-painel-modo #ne-view-panorama > .ng-grid > .ng-card:first-child { grid-column: 1; grid-row: auto; }
  html.dx-painel-modo #ne-view-panorama > .ng-grid > .ng-card:last-child { grid-column: 2; grid-row: auto; }
}