/* ============================================================================
   UY3 API Docs — Design System
   Alinhado a identidade do site institucional (uy3.com.br/site_v2): fundo
   quase-preto acastanhado, laranja de marca como acento, tipografia geometrica,
   formas em pill e atmosfera de malha de particulas.

   O ESCURO E O TEMA CANONICO. E ele que carrega a identidade do site — o
   #0c0500 e o theme-color oficial. O claro continua inteiro, um clique de
   distancia, servindo a leitura em ambiente iluminado e a impressao.

   Paleta da marca: laranja #ff7a1a / #f97316, degrade para #e2590a.
   No tema CLARO o laranja fica em #f46c00 (Pantone 1505C, o hex do asset de
   marca): sobre branco ele da 3.0:1 e reprova AA para texto pequeno, entao ali
   e acento e nunca texto corrido — quem precisa de texto usa --brand-strong ou
   --link. No ESCURO essa restricao cai: #ff7a1a sobre #0c0500 da 7.8:1, e o
   laranja pode ser link, numero e palavra destacada de headline.

   Tokens em :root (claro) e :root[data-theme="dark"] (escuro, PADRAO).
   Nenhuma cor hardcoded em componente: tudo passa por token.
   Nenhuma dependencia de runtime: a fonte e auto-hospedada em /fonts, nao vem
   de CDN. Ver nota em --font.

   revise com a TEC UY3
   ============================================================================ */

/* Outfit — grotesca geometrica, a familia do site institucional. Auto-hospedada
   em wwwroot/fonts (46KB nos dois arquivos, variavel 300..800) porque o portal
   nao faz chamada de saida em runtime: puxar de fonts.googleapis.com quebraria
   o requisito de funcionar com egress bloqueado (ver docs/DEPLOY-APP-SERVICE.md).
   font-display: swap — a pilha de sistema desenha o primeiro paint. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Marca ---------------------------------------------------------- */
  --brand: #f46c00;          /* acento: bordas, icones, marcadores. 3.0:1 no branco */
  --brand-2: #d04d27;
  --brand-strong: #b83f1c;   /* branco sobre esta cor = 5.6:1 (AA) */
  --brand-soft: #fef2e9;     /* fundo de realce, hover, callout */
  --brand-grad: linear-gradient(120deg, #f46c00 0%, #d04d27 100%);
  --brand-grad-strong: linear-gradient(120deg, #d04d27 0%, #b83f1c 100%);

  /* Texto SOBRE superficie de marca / de erro. Nao e sempre branco: no tema
     escuro o --brand-strong clareia para nao vibrar, e branco sobre ele cai para
     2.2:1. Sem este token, todo badge e pill preenchido reprovava AA no escuro. */
  --on-brand: #ffffff;       /* sobre --brand-strong #b83f1c = 5.6:1 */
  --on-danger: #ffffff;      /* sobre --danger #b91c1c = 6.5:1 */

  /* Preenchimento solido de marca (CTA em pill, pill ativa). No claro NAO e o
     #f46c00: branco sobre ele da 3.0:1 e reprova AA. Entra o --brand-strong,
     que e o mesmo laranja escurecido ate 5.6:1. No escuro este token vira o
     laranja cheio — ver o bloco do tema escuro. */
  --brand-fill: #b83f1c;
  --surface-glass: rgba(255, 255, 255, .78);  /* navbar com backdrop-blur */

  /* ---- Neutros --------------------------------------------------------
     Branco dominante, cinza muito claro nas superficies secundarias. Frios e
     quase neutros, como o site — a base quente anterior puxava a pagina para
     bege e competia com o laranja da marca. */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --sidebar-bg: #fafafb;
  --border: #e8e8ea;
  --border-strong: #d4d4d8;
  --ink: #0f0f10;            /* titulos, near-black. 18.9:1 no branco */
  --text: #27272a;           /* corpo. 14.9:1 no branco */
  --muted: #52525b;          /* 7.7:1 */
  --faint: #6b6b74;          /* rotulos pequenos + placeholders. 5.3:1 (AA) */
  --link: #c24310;           /* links no corpo. 5.1:1 (AA) */
  --danger: #b91c1c;

  /* ---- CTA primario ---------------------------------------------------
     Fundo near-black com texto branco, como o "Abra sua conta" do site. O
     laranja fica para o acento; botao laranja disputava com ele. */
  --cta-bg: #0f0f10;
  --cta-fg: #ffffff;
  --cta-bg-hover: #27272a;

  /* ---- Barra superior --------------------------------------------------
     Clara no tema claro, acompanhando o header do site. */
  --topbar: #ffffff;
  --topbar-border: #e8e8ea;
  --topbar-fg: #27272a;
  --topbar-fg-strong: #0f0f10;
  --topbar-fg-muted: #52525b;
  --topbar-hover: #f4f4f5;
  --topbar-brand: #b83f1c;   /* "UY3" na marca: AA sobre topbar clara */
  --topbar-focus: #f46c00;

  /* ---- Codigo ---------------------------------------------------------
     O <pre> e DELIBERADAMENTE escuro nos dois temas — ver nota no fim do
     arquivo. O <code> inline acompanha a pagina. */
  --code-bg: #f4f4f5;
  --code-fg: #a8390f;        /* 6.1:1 sobre #f4f4f5 */
  --pre-bg: #1b1b1f;
  --pre-fg: #e8e8ea;         /* 13.3:1 sobre #1b1b1f */
  --pre-border: #2e2e34;
  --pre-chrome: rgba(255, 255, 255, .10);
  --pre-chrome-border: rgba(255, 255, 255, .22);

  /* ---- Callouts -------------------------------------------------------- */
  --callout-bg: #fef2e9;
  --callout-border: #f6cdae;

  /* ---- Formas ---------------------------------------------------------- */
  --radius: 12px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --pill: 999px;
  /* Curva e duracao unicas das micro-interacoes. 150-250ms ease-out: rapido o
     bastante para nao atrasar o clique, longo o bastante para ler a mudanca. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .15s;
  --t: .22s;
  /* Glow laranja difuso dos elementos interativos. No claro ele e discreto —
     sobre branco um halo forte le como borrao, nao como luz. */
  --glow: 0 0 0 1px rgba(244, 108, 0, .18), 0 10px 30px rgba(244, 108, 0, .14);
  --glow-strong: 0 0 0 1px rgba(244, 108, 0, .3), 0 14px 40px rgba(244, 108, 0, .22);
  /* Atmosfera do hero: gradiente radial quente atras do titulo. */
  --hero-glow: radial-gradient(60% 70% at 12% 0%, rgba(244, 108, 0, .10) 0%, transparent 70%);
  /* Malha de particulas (canvas). No CLARO ela e bem mais fraca que no escuro:
     sobre branco um ponto laranja opaco le como sujeira na tela, nao como luz.
     Os pares fortes estao no bloco do tema escuro, onde a malha e o efeito. */
  --fx-dot: rgba(244, 108, 0, .3);
  --fx-line: rgba(244, 108, 0, .09);
  --shadow-sm: 0 1px 2px rgba(15, 15, 16, .05);
  --shadow: 0 1px 2px rgba(15, 15, 16, .04), 0 10px 28px rgba(15, 15, 16, .08);
  --shadow-lg: 0 24px 60px rgba(15, 15, 16, .18);
  --overlay: rgba(15, 15, 16, .45);

  /* ---- Tipografia ------------------------------------------------------
     Outfit (auto-hospedada, ver @font-face no topo) e a grotesca geometrica do
     site institucional. A pilha de sistema fica atras dela como fallback e
     desenha o primeiro paint — nao ha flash de texto invisivel.
     A regra "nenhuma dependencia externa em runtime" (README) continua valendo:
     os dois .woff2 estao no repositorio, nao num CDN. */
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --topbar-h: 60px;
}

/* ---------------------------------------------------------------------------
   TEMA ESCURO — o canonico, e o que carrega a identidade do site.

   O fundo e o #0c0500 do site institucional: quase-preto ACASTANHADO, nao
   grafite. Ele nao e preto puro (que produz halo em OLED e cansa em leitura
   longa) e nao e neutro — o leve viés quente e o que faz o laranja da marca
   assentar no fundo em vez de flutuar sobre ele.

   As superficies elevadas sobem em marrom-escuro, nao em cinza: cada nivel
   acrescenta luz na mesma temperatura do fundo.

   As bordas sao rgba de branco/laranja em baixa opacidade, e nao hex opaco: no
   escuro a borda tem de ler como uma aresta de luz, e sobre superficies de
   elevacoes diferentes o mesmo rgba se resolve sozinho.

   REGRA DO LARANJA, no escuro: #ff7a1a sobre #0c0500 da 7.8:1 e #ff8c3a da
   8.7:1 — os dois passam AA para texto pequeno. Aqui, ao contrario do claro,
   o laranja PODE ser link, metrica e palavra destacada de headline.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --brand: #ff7a1a;          /* 7.8:1 sobre --bg — acento E texto */
  --brand-2: #e2590a;
  --brand-strong: #ff8c3a;   /* 8.7:1 — texto de destaque, numeros, eyebrow */
  --brand-soft: #24140a;     /* fundo de realce, hover, callout */
  --brand-grad: linear-gradient(120deg, #ff8c3a 0%, #e2590a 100%);
  --brand-grad-strong: linear-gradient(120deg, #ff7a1a 0%, #d14e05 100%);
  --on-brand: #0c0500;       /* sobre o preenchimento laranja #f97316 = 7.2:1 */
  --on-danger: #0c0500;      /* sobre --danger #f87171 = 6.5:1 */
  /* Preenchimento solido de marca (CTA primario, pill ativa). E o unico lugar
     onde o laranja e FUNDO: com --on-brand escuro por cima, passa AA. */
  --brand-fill: #f97316;

  --bg: #0c0500;             /* theme-color oficial do site */
  --surface: #150d05;        /* card, painel */
  --surface-2: #1f1409;      /* superficie de segundo nivel, celula de tabela */
  --surface-glass: rgba(26, 15, 5, .72);  /* navbar/pill com backdrop-blur */
  --sidebar-bg: #090300;
  --border: rgba(255, 255, 255, .085);
  --border-strong: rgba(255, 140, 58, .26);
  --ink: #f5f0eb;            /* titulos, off-white do site. 18.4:1 sobre --bg */
  --text: #e4d9cf;           /* corpo, bege claro. 15.2:1 */
  --muted: #b8aca0;          /* 9.4:1 */
  --faint: #8b8078;          /* rotulos pequenos + placeholders. 5.2:1 (AA) */
  --link: #ff8c3a;           /* 8.7:1 (AA) */
  --danger: #f87171;

  /* CTA primario: laranja SOLIDO, como o do site. No claro ele e near-black
     porque um botao laranja sobre branco disputa com o acento; no escuro o
     laranja e a unica coisa luminosa da pagina, e o CTA e o lugar dela. */
  --cta-bg: #f97316;
  --cta-fg: #0c0500;
  --cta-bg-hover: #ff8c3a;

  /* Barra superior: pill flutuante translucida. O fundo vem do --surface-glass
     e o blur do componente .topbar. */
  --topbar: transparent;
  --topbar-border: rgba(255, 255, 255, .09);
  --topbar-fg: #e4d9cf;
  --topbar-fg-strong: #ffffff;
  --topbar-fg-muted: #b8aca0;
  --topbar-hover: rgba(255, 140, 58, .12);
  --topbar-brand: #ff8c3a;
  --topbar-focus: #ff7a1a;

  --code-bg: #1f1409;
  --code-fg: #ffab6b;        /* 9.9:1 sobre --code-bg */
  --pre-bg: #080300;         /* terminal: mais fundo que a pagina */
  --pre-fg: #e4d9cf;
  --pre-border: rgba(255, 140, 58, .2);
  --pre-chrome: rgba(255, 140, 58, .12);
  --pre-chrome-border: rgba(255, 140, 58, .3);

  --callout-bg: #1a0f05;
  --callout-border: rgba(255, 140, 58, .24);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 36px rgba(0, 0, 0, .55);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .7);
  --overlay: rgba(6, 2, 0, .72);

  /* Glow: no escuro ele e o efeito principal de hover, e nao um detalhe. */
  --glow: 0 0 0 1px rgba(255, 122, 26, .3), 0 12px 34px rgba(255, 122, 26, .16);
  --glow-strong: 0 0 0 1px rgba(255, 122, 26, .5), 0 16px 46px rgba(255, 122, 26, .26);
  --hero-glow: radial-gradient(65% 75% at 14% -5%, rgba(255, 122, 26, .20) 0%, rgba(226, 89, 10, .07) 38%, transparent 72%);
  --fx-dot: rgba(255, 138, 46, .62);
  --fx-line: rgba(255, 122, 26, .13);
}

/* ---------- Base / reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--link); }

/* Foco de teclado visivel e consistente (WCAG 2.4.7) */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
.topbar :focus-visible { outline-color: var(--topbar-focus); }

/* ---------- Barra superior ----------
   Translucida com backdrop-blur, no padrao do header do site: o conteudo passa
   por baixo dela desfocado em vez de bater numa faixa opaca. Os itens sao pills.

   Ela continua sticky em LARGURA CHEIA nas paginas com navegacao lateral, e nao
   como pill flutuante: a coluna lateral e o TOC grudam em `top: var(--topbar-h)`,
   e uma barra destacada da borda desalinharia as tres colunas. A pill flutuante
   do site aparece na landing, onde nao ha coluna sticky — ver .topbar.float. */
.topbar {
  display: flex; align-items: center; gap: 8px; min-height: var(--topbar-h); padding: 0 24px;
  background: var(--surface-glass); color: var(--topbar-fg);
  border-bottom: 1px solid var(--topbar-border);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  position: sticky; top: 0; z-index: 50;
}
/* Landing: pill flutuante centralizada, como a navbar do site.
   Sem vao acima: ela nasce encostada no topo da viewport. Havia 14px de margem
   ali (e o mesmo valor no offset do sticky), que era o "flutuante" levado ao pe
   da letra — mas na tela lia como margem sobrando antes do conteudo comecar, e
   no scroll deixava uma fresta por onde o texto passava acima da barra.
   Com `top: 0` ela tambem gruda limpa ao rolar. */
.topbar.float {
  max-width: 1120px; margin: 0 auto; padding: 0 10px 0 18px;
  border: 1px solid var(--topbar-border);
  /* Cantos arredondados so embaixo: em cima a barra encosta na borda da
     viewport, e curva contra a borda da tela le como pill cortada. */
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  border-top: 0;
  box-shadow: var(--shadow-sm); top: 0; min-height: 56px;
  width: calc(100% - 32px);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
  letter-spacing: .2px; color: var(--topbar-fg); text-decoration: none; margin-right: 6px; flex: 0 0 auto;
}
/* Logo oficial (wwwroot/img, baixado de uy3.com.br/site_v2 — nao ha hotlink).
   Sao DUAS imagens, uma por tema, e nao um src trocado por JS: o data-theme ja
   esta no <html> antes do primeiro paint, entao o CSS escolhe a versao certa sem
   flash. O traçado branco em fundo claro (ou o escuro em fundo escuro) sumiria. */
.brand .logo { height: 22px; width: auto; display: block; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root:not([data-theme="dark"]) .brand .logo-dark { display: none; }
/* "API Docs" ao lado da marca: o logo diz UY3, repetir a palavra e ruido. */
.brand b {
  color: var(--topbar-fg-muted); font-weight: 600; font-size: 13px;
  padding-left: 11px; margin-left: 1px; border-left: 1px solid var(--topbar-border);
}
.spacer { flex: 1; }
.menu-toggle {
  display: none; background: transparent; border: 1px solid var(--topbar-border); color: var(--topbar-fg);
  width: 36px; height: 34px; border-radius: var(--pill); cursor: pointer; font-size: 16px;
  align-items: center; justify-content: center;
}
/* Itens do menu em pill, com o ativo preenchido no laranja da marca. */
.tl {
  color: var(--topbar-fg-muted); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--pill); white-space: nowrap; flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tl:hover { background: var(--topbar-hover); color: var(--topbar-fg-strong); }
.tl.active {
  color: var(--on-brand); background: var(--brand-fill); font-weight: 600;
  box-shadow: 0 4px 16px rgba(249, 115, 22, .28);
}
.themebtn {
  background: transparent; border: 1px solid var(--topbar-border); color: var(--topbar-fg);
  width: 34px; height: 34px; border-radius: var(--pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.themebtn:hover { background: var(--topbar-hover); border-color: var(--brand); box-shadow: var(--glow); }
.themebtn svg { width: 17px; height: 17px; }

/* ---------- Toolbar secundaria (Referência de API) ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: var(--topbar-h); z-index: 40;
}
.nav-item {
  color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  transition: background .15s, border-color .15s, color .15s;
}
.nav-item:hover { border-color: var(--brand); color: var(--ink); }
.nav-item.active { background: var(--brand-strong); color: var(--on-brand); border-color: transparent; }
.envs { display: flex; gap: 6px; }
.env {
  color: var(--muted); text-decoration: none; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  padding: 5px 11px; min-height: 24px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px; font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.env:hover { border-color: var(--brand); color: var(--ink); }
.env.active { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.btn-ghost {
  color: var(--brand-strong); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 6px 12px; min-height: 24px; display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--callout-bg); border-color: var(--brand); }

/* ---------- Layout de documentação ---------- */
.layout { display: flex; align-items: flex-start; }
.side {
  width: 292px; flex: 0 0 292px; height: calc(100vh - var(--topbar-h));
  overflow-y: auto; position: sticky; top: var(--topbar-h);
  border-right: 1px solid var(--border); background: var(--sidebar-bg); padding: 14px 12px 40px;
}
.side-backdrop {
  display: none; position: fixed; inset: var(--topbar-h) 0 0 0; background: var(--overlay); z-index: 55;
}
.side-search {
  width: 100%; margin: 4px 2px 12px; padding: 9px 12px; font-size: 13px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.side-search:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.side-search::placeholder { color: var(--faint); }
.sec { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); margin: 18px 10px 6px; font-weight: 700; display: flex; align-items: center; }
.nav-ic { width: 15px; height: 15px; margin-right: 8px; color: var(--brand); flex: 0 0 auto; }
.sec .nav-ic { color: var(--faint); }
/* Item ativo: MARCADOR laranja + texto laranja forte, nao bloco solido. O bloco
   preenchido criava uma mancha de cor no meio de uma navegacao clara e disputava
   atencao com o titulo da pagina; o marcador diz a mesma coisa e some no fundo. */
.gi {
  display: block; color: var(--text); text-decoration: none; font-size: 14px;
  padding: 7px 11px; border-radius: 8px; border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.gi:hover { background: var(--surface-2); color: var(--ink); }
.gi.active {
  background: var(--brand-soft); color: var(--brand-strong); font-weight: 600;
  border-left-color: var(--brand);
}
.gi.sub { padding-left: 20px; font-size: 13px; color: var(--muted); }
.gi.sub:hover { color: var(--ink); }
.gi.sub.active { color: var(--brand-strong); }
.mod { margin: 1px 0; }
.mod > summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); padding: 7px 11px; border-radius: 8px; display: flex; align-items: center; }
.mod > summary::-webkit-details-marker { display: none; }
.mod > summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; color: var(--brand); transition: transform .15s; font-size: 11px; }
.mod[open] > summary::before { transform: rotate(90deg); }
.mod > summary:hover { background: var(--callout-bg); }
/* Grupo colapsavel de topo (Credito / Banking / Cobranca) */
.group { margin: 2px 0 4px; }
.group > summary {
  list-style: none; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--ink); font-weight: 800; padding: 10px 10px 8px; display: flex; align-items: center;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: '\25B8'; margin-right: 8px; color: var(--brand); font-size: 11px; transition: transform .15s; }
.group[open] > summary::before { transform: rotate(90deg); }
.group > .mod, .group > .gi, .group > .subsec { margin-left: 4px; }
/* Sub-rotulo dentro de um grupo (Cadastros, Operacoes...) */
.subsec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin: 12px 10px 4px; font-weight: 700; }

/* ---------- Conteudo ----------
   Centralizado na coluna disponivel (entre nav e TOC) e com teto de largura para a
   linha de texto continuar legivel. Mais largo que antes para as tabelas de campos
   caberem sem scroll na maioria das telas. */
.content { flex: 1; min-width: 0; padding: 30px 48px 80px; max-width: 1060px; margin: 0 auto; }
/* Breadcrumb como EYEBROW: o padrão de seção do site é rótulo pequeno em caps,
   com o item corrente em laranja de marca, e logo abaixo o título grande preto.
   A trilha é a categoria; o h1 é o título. Só apresentação — o texto da trilha é
   exatamente o mesmo que o servidor já emitia. */
.breadcrumb {
  font-size: 11px; color: var(--faint); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .9px; font-weight: 700;
}
.breadcrumb a { color: var(--faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-strong); }
.breadcrumb .sep { margin: 0 6px; opacity: .5; }
.breadcrumb .cur { color: var(--brand-strong); }

/* 32ch, e nao ~22: os titulos da Referencia vem do contrato e sao longos ("Cria
   uma nova solicitacao de operacao de credito..."). Com o teto apertado eles
   quebravam em tres linhas e a pagina abria com um bloco de texto no lugar de um
   titulo. */
.content h1 { font-size: 38px; line-height: 1.15; margin: .06em 0 .5em; color: var(--ink); letter-spacing: -1px; font-weight: 800; max-width: 32ch; }
.content h2 { font-size: 23px; margin: 1.8em 0 .5em; padding-bottom: .3em; color: var(--ink); border-bottom: 1px solid var(--border); scroll-margin-top: 80px; letter-spacing: -.3px; font-weight: 700; }
.content h3 { font-size: 17.5px; margin: 1.5em 0 .4em; color: var(--ink); scroll-margin-top: 80px; font-weight: 700; }
.content h4 { font-size: 15px; margin: 1.2em 0 .3em; color: var(--ink); font-weight: 700; }
/* Linha de leitura com teto: acima de ~80ch o olho perde a volta da linha. */
.content p, .content li { line-height: 1.72; font-size: 15.5px; color: var(--text); }
.content > p, .content > ul, .content > ol { max-width: 80ch; }
.content ul, .content ol { padding-left: 22px; }
.content li { margin: .25em 0; }
.content strong { color: var(--ink); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.content a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
.content a:hover { border-bottom-color: currentColor; }

/* Um componente em FORMA DE BOTAO dentro do conteudo nao e um link de texto.
   `.content a` tem especificidade (0,0,1,1) e vencia `.btn-pill-primary`
   (0,0,1,0): o texto do pill primario saia em var(--link) — laranja SOBRE o
   preenchimento laranja, ilegivel — e os ghost pills saiam com cor de link, em
   vez de cor de texto, lendo como link e nao como botao. O sublinhado de hover
   do link tambem vazava para card e chip, desenhando um risco na borda de baixo
   do bloco inteiro.
   Os seletores levam o `a.` para chegar a (0,0,2,1) e ganhar de `.content a`
   sem precisar de !important. As cores continuam definidas UMA vez, no
   componente; aqui so se restaura a que o link havia sobrescrito. */
.content a.btn-pill, .content a.card, .content a.chip, .content a.pagenav-i,
.content a.btn-ghost, .content .mod-actions a, .content .routelist a,
.content .llm-item-actions a, .content .cards a {
  border-bottom: 0;
}
.content a.btn-pill-primary { color: var(--on-brand); }
.content a.btn-pill-ghost { color: var(--ink); }
.content code { background: var(--code-bg); color: var(--code-fg); padding: 2px 6px; border-radius: 6px; font-size: 12.75px; font-family: var(--mono); }
.content pre { background: var(--pre-bg); color: var(--pre-fg); padding: 18px; border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--pre-border); box-shadow: var(--shadow-sm); line-height: 1.55; }
.content pre code { background: none; color: inherit; padding: 0; font-size: 13px; }

/* ---------- Tabelas ----------
   Um unico estilo para as tabelas geradas (Referência e Operações, com .table-wrap
   vindo do servidor) e para as tabelas dos guias em Markdown (app.js embrulha em
   .table-wrap no carregamento). O scroll horizontal fica SEMPRE contido na tabela;
   o corpo da pagina nunca rola na horizontal. */
.table-wrap {
  margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto; background: var(--surface); box-shadow: var(--shadow-sm);
  max-height: min(72vh, 900px);
}
.content table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 0;
  font-size: 13.75px; display: table; border: 0;
}
.content thead th {
  background: var(--surface-2); color: var(--ink); font-weight: 700; text-align: left;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--border-strong);
}
.content th, .content td { padding: 10px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr:nth-child(even) td { background: var(--surface-2); }
.content tbody tr:hover td { background: var(--surface-2); }

/* Alinhamento por coluna: numero a direita, marcador ao centro, texto a esquerda. */
.content th.num, .content td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.content th.mid, .content td.mid { text-align: center; }

/* Primeira coluna com peso: e por ela que se procura a linha. */
.content .tbl-fields td:first-child, .content .tbl-ops td:first-child { color: var(--ink); }
.content .tbl td code { white-space: nowrap; }
.content .tbl-fields td:nth-child(4) code { white-space: normal; }

/* Segunda linha dentro da celula (resumo, ordinal): hierarquia sem poluir. */
.cell-sub { display: block; margin-top: 3px; color: var(--faint); font-size: 12px; line-height: 1.4; }

/* Linha escondida pelo filtro. */
.content tbody tr[hidden] { display: none; }

/* Callouts (blockquote) */
.content blockquote { border: 1px solid var(--callout-border); border-left: 4px solid var(--brand); margin: 16px 0; padding: 12px 18px; background: var(--callout-bg); border-radius: var(--radius-sm); color: var(--text); }
.content blockquote p { margin: .4em 0; }
.content blockquote strong:first-child { color: var(--brand-strong); }

/* ---------- TOC (direita) ---------- */
.tocwrap { width: 220px; flex: 0 0 220px; position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 30px 18px; }
.toc-h { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); font-weight: 700; margin-bottom: 10px; }
#toc a { display: block; color: var(--muted); text-decoration: none; font-size: 13px; padding: 6px 0 6px 12px; border-left: 2px solid var(--border); line-height: 1.35; }
#toc a:hover { color: var(--brand-strong); border-left-color: var(--brand); }
#toc a.active { color: var(--brand-strong); border-left-color: var(--brand); font-weight: 600; }
#toc a.toc-3 { padding-left: 24px; font-size: 12px; }

.notice { max-width: 620px; margin: 72px auto; text-align: center; color: var(--muted); }
.notice h2 { color: var(--ink); border: 0; }

/* ============================================================================
   Atmosfera: malha de particulas + gradiente radial quente
   ============================================================================
   O canvas fica FIXO atras de tudo, com z-index negativo e pointer-events: none
   — ele nunca intercepta clique nem entra na ordem de foco. O gradiente radial
   e do CSS (nao do canvas): e estatico, e pintar degrade em canvas a cada frame
   custaria mais que o resto do desenho junto.

   So a landing declara o <canvas class="fx"> (o app.js anima o que encontrar):
   nas paginas de documentacao a area de leitura e opaca de ponta a ponta, e a
   malha ficaria invisivel atras do conteudo — pagando GPU a cada frame, numa
   sessao de leitura que dura horas, para nao aparecer. O gradiente radial do
   body::before, que e estatico e de graça, fica em todas. */
/* As DUAS variantes compartilham o que as torna inofensivas: z-index negativo
   (atras de tudo) e pointer-events: none (nunca intercepta clique nem entra na
   ordem de foco).
   Declarado num seletor comum de proposito. Estava so no `.fx`, e a `.fx-soft`
   — que e uma classe separada, nao um modificador — nasceu sem os dois: com
   `position: absolute` e `z-index: auto` ela pintava ACIMA do conteudo e matava
   o clique numa faixa de 560px em toda pagina de documentacao. Quem acrescentar
   uma terceira variante herda a garantia em vez de ter de lembrar dela. */
.fx, .fx-soft {
  z-index: -2; pointer-events: none; display: block;
}

.fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
}

/* Versao DISCRETA, para as paginas de documentacao.
   Tres diferencas em relacao a da landing, todas em nome da leitura:
     1. `absolute` e nao `fixed` — a malha fica ancorada no topo do documento e
        SAI de cena no scroll. Fixa, ela ficaria atras do texto tecnico durante
        toda a leitura, que e exatamente o que nao pode acontecer.
     2. altura limitada a faixa do cabecalho da pagina, com mask que dissolve a
        borda de baixo — sem corte visivel onde ela termina.
     3. opacidade reduzida, e menos particulas (o app.js le o data-fx).
   O `.content` e transparente: sem essas tres, a malha apareceria por tras de
   cada tabela de campos. */
.fx-soft {
  position: absolute; top: 0; left: 0; right: 0; height: 560px;
  width: 100%; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
/* Gradiente radial quente ATRAS DO HERO — ancorado no topo do DOCUMENTO, nao na
   viewport. Como `fixed` ele acompanhava o scroll e tingia de marrom a pagina
   inteira: numa pagina de guia de 3000px, o texto todo era lido sobre o brilho
   em vez de sobre o #0c0500. Ancorado, o brilho fica onde a atmosfera serve (a
   abertura) e a area de leitura longa assenta no fundo escuro puro. */
body { position: relative; }
body::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 820px;
  z-index: -1; background: var(--hero-glow); pointer-events: none;
}

/* ---------- Inicio (landing) ----------
   Hero no padrao do site: eyebrow em pill, headline em duas frases curtas com
   UMA palavra em laranja, paragrafo curto e dois CTAs em pill.

   TODOS os componentes abaixo sao da PLATAFORMA, nao da landing: os seletores
   nao estao aninhados em .hero justamente para que a Referencia, o catalogo de
   Operacoes, a tela de LLM e o estado do MCP usem os mesmos. Quem os emite e
   Reference/Ui.cs — ha uma implementacao de cada um, no HTML e no CSS. */
.hero { max-width: 1120px; margin: 0 auto; padding: 84px 44px 12px; position: relative; }

/* ---------- Cabecalho de pagina (Ui.PageHead) ----------
   O equivalente do hero nas paginas internas: eyebrow + H1 + lead, e a acao que
   vale para a pagina inteira na MESMA LINHA do titulo. */
.page-head { margin: 0 0 6px; }
.page-head h1 { margin-top: .18em; }
.page-head .lead { margin-top: -.2em; }
/* Titulo e acao lado a lado. A acao encolhe primeiro (flex 0 0 auto no titulo
   seria o contrario) e cai para baixo do titulo quando nao couber. */
.ph-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
/* 24ch, e nao os 32ch de `.content h1`: com 32ch o titulo mais a acao passavam
   da largura da coluna por uma dezena de pixels, e a acao envolvia para a linha
   de baixo — onde ela encostava no lead e deixava de ler como acao do titulo.
   Estreitar o titulo tambem o deixa em duas linhas, como o da landing. */
.ph-row h1 { flex: 1 1 auto; min-width: 0; max-width: 24ch; }
.ph-act { flex: 0 0 auto; display: flex; gap: 10px; align-items: center; padding-top: .5em; }

/* Eyebrow: UPPERCASE, letter-spacing largo, ponto laranja a esquerda — o badge
   "● CREDIT AS A SERVICE" do site. Componente da plataforma: a landing e toda
   pagina interna usam este mesmo seletor. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--brand-strong); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 6px 15px 6px 12px; border-radius: var(--pill);
  border: 1px solid var(--border-strong); background: var(--brand-soft);
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 10px var(--brand); flex: 0 0 auto;
}
/* Nas paginas internas o eyebrow e um pouco menor: ali ele convive com o
   breadcrumb logo acima, e no mesmo tamanho da landing os dois competiam. */
.content .eyebrow { font-size: 10.5px; letter-spacing: 1.6px; padding: 5px 13px 5px 10px; }
.hero h1 {
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; font-weight: 700;
  /* 24ch cabe a frase mais longa das duas em UMA linha. Mais estreito que isso
     e a headline vira tres linhas e deixa de ler como duas frases curtas. */
  margin: 22px 0 18px; color: var(--ink); letter-spacing: -1.6px; max-width: 24ch;
}
/* A palavra destacada da headline. O gradiente laranja->ambar e recortado no
   texto; o `color` fica como fallback para onde background-clip: text nao pega. */
.hl {
  color: var(--brand-strong);
  background: linear-gradient(96deg, #ff9a4d 0%, #f97316 55%, #e2590a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root:not([data-theme="dark"]) .hl {
  background: linear-gradient(96deg, #d85e11 0%, #b83f1c 100%);
  -webkit-background-clip: text; background-clip: text;
}
.hero p { font-size: 17.5px; color: var(--muted); max-width: 62ch; line-height: 1.62; margin: 0; }
.hero .bar { height: 5px; width: 96px; background: var(--brand-grad); border-radius: 4px; margin: 22px 0 4px; }

/* CTAs em pill: primario laranja solido com seta, secundario outline. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 4px; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  /* `font: inherit` porque o pill tambem e usado em <button> (Copiar tudo, Copiar
     por pacote): botao NAO herda font-family do documento, e sem isto esses
     saiam na fonte padrao do navegador ao lado de pills identicos em Outfit. */
  font: inherit;
  font-size: 14.5px; font-weight: 600; padding: 12px 24px; border-radius: var(--pill);
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-pill .arrow { transition: transform var(--t) var(--ease); }
.btn-pill:hover .arrow { transform: translateX(4px); }
.btn-pill-primary { background: var(--brand-fill); color: var(--on-brand); box-shadow: 0 8px 26px rgba(249, 115, 22, .26); }
.btn-pill-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-strong); }
.btn-pill-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-pill-ghost:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--glow); }
/* Estado PRESSIONADO. O pill subia 2px no hover e nao tinha :active, entao o
   clique nao devolvia nada — o botao parecia inerte mesmo funcionando. Aqui ele
   afunda para baixo da posicao de repouso, e a sombra recolhe: o movimento diz
   "recebi o clique" nos ~100ms antes da pagina responder. Vale para <a> e
   <button>, que e o mesmo componente. */
.btn-pill:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

/* A esteira, na ordem oficial: pills ligadas por uma seta laranja. A ORDEM e a
   informacao — por isso as etapas nao quebram para uma lista vertical no mobile,
   elas rolam na horizontal e continuam em sequencia. */
.esteira {
  display: flex; align-items: center; gap: 26px; margin: 34px 0 0;
  overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none;
}
.esteira::-webkit-scrollbar { height: 0; }
.esteira .et {
  position: relative; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 6px 13px; border-radius: var(--pill);
  border: 1px solid var(--border); background: var(--surface);
  white-space: nowrap; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.esteira .et:hover { color: var(--brand-strong); border-color: var(--brand); }
/* A seta vive no espaco ENTRE as pills, como pseudo-elemento da segunda: um
   separador como elemento proprio entraria na leitura de tela como conteudo. */
.esteira .et + .et::before {
  content: '\2192'; position: absolute; left: -20px; top: 50%;
  transform: translateY(-50%); color: var(--brand); opacity: .75; font-size: 12.5px;
}

/* Metricas do hero: numero grande com o sufixo em laranja, padrao "200+". */
.hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 46px 0 0; }
.hero-stats .st { display: flex; flex-direction: column; gap: 2px; }
.hero-stats .st-n { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -1px; line-height: 1.1; }
.hero-stats .st-n em { font-style: normal; color: var(--brand); }
.hero-stats .st-l { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--faint); font-weight: 600; }

.grid { max-width: 1120px; margin: 0 auto; padding: 30px 44px 24px; position: relative; }
.area { margin-top: 38px; }
.area h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); margin: 0 0 16px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 18px; }
/* Cards: borda 1px sutil, cantos arredondados grandes. Repousam PLANOS — no
   site a sombra e do hover, e a sombra permanente engrossava a grade inteira.
   No hover: elevacao + glow laranja + faixa de degrade no topo. */
.card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; background: var(--surface); transition: box-shadow var(--t) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--brand-grad); opacity: 0; transition: opacity var(--t) var(--ease); }
.card:hover { border-color: var(--brand); box-shadow: var(--glow); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card b { color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.card span { color: var(--muted); font-size: 13.25px; line-height: 1.55; }
.card .go { color: var(--brand-strong); font-size: 13px; font-weight: 600; margin-top: auto; padding-top: 12px; }
/* Metadado do card (paginas do modulo): terceiro nivel de hierarquia, discreto. */
.card .card-meta { color: var(--faint); font-size: 11.5px; margin-top: 10px; letter-spacing: .2px; }


/* ============================================================================
   Referência de API (gerada do spec) — badges, callouts, chips, cópia
   ============================================================================ */
/* Subtítulo do endpoint / lead abaixo do H1 */
.content .lead { font-size: 16.5px; color: var(--muted); line-height: 1.55; margin: -.2em 0 1.1em; max-width: 70ch; }

/* Bloco método + rota em destaque, sempre na mesma posição (topo da página) */
.ep-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.ep-route { background: none; color: var(--ink); font-family: var(--mono); font-size: 14.5px; padding: 0; font-weight: 600; word-break: break-all; }

/* Badge de método HTTP */
.m { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .3px; color: #fff; padding: 4px 10px; border-radius: 7px; min-width: 58px; text-align: center; }
.m.sm { font-size: 10.5px; padding: 2px 6px; min-width: 46px; border-radius: 5px; }
.m-get { background: #1a7f4b; }
.m-post { background: #1d4ed8; }
.m-put { background: #b45309; }
.m-patch { background: #0f766e; }
.m-delete { background: #b91c1c; }
:root[data-theme="dark"] .m-get { background: #2ea36a; }
:root[data-theme="dark"] .m-post { background: #3b6ff5; }
:root[data-theme="dark"] .m-put { background: #d08420; }
:root[data-theme="dark"] .m-patch { background: #159c90; }
:root[data-theme="dark"] .m-delete { background: #d84343; }

.ep-flag { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--on-danger); background: var(--danger); padding: 3px 9px; border-radius: 999px; }

/* Chips de obrigatoriedade nas tabelas */
.req { font-size: 11.5px; font-weight: 700; color: var(--brand-strong); white-space: nowrap; }
.opt { font-size: 11.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.content td .muted, .content .muted { color: var(--faint); font-size: 12.5px; }

/* Callouts padronizados (limites, idempotência, assíncrono, deprecação) */
.callout { border: 1px solid var(--callout-border); border-left: 4px solid var(--brand); margin: 16px 0; padding: 12px 18px; background: var(--callout-bg); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; line-height: 1.6; }
.callout code { font-size: 12.5px; }
.callout-info { border-left-color: #2563eb; }
.callout-async { border-left-color: #0f766e; }
.callout-dep, .callout-warn { border-left-color: var(--danger); }

/* Ações da visão geral */
.ref-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 8px; align-items: center; }

/* ---------- Artefatos de integração na visão geral do módulo ----------
   Três cartões no topo da página de visão geral: contexto para LLM, collection do Postman
   e MCP. O integrador que abre o produto pela primeira vez precisa ver de imediato o que
   pode baixar — antes de ler o fluxo. O cartão .soon é o recurso ainda indisponível:
   aparece com a mesma forma dos outros, sem prometer que funciona. */
.mod-actions {
  display: grid; gap: 12px; margin: 22px 0 28px;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}
.mod-actions a, .mod-actions span.soon {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card-bg, transparent);
  transition: border-color .15s, background .15s, transform .1s;
}
.mod-actions a { border-left: 3px solid var(--brand); }
.mod-actions a:hover { border-color: var(--brand); background: var(--callout-bg); transform: translateY(-1px); }
.mod-actions b { font-size: 14px; color: var(--brand-strong); font-weight: 700; }
.mod-actions span.d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mod-actions span.soon { border-left: 3px solid var(--border-strong); opacity: .78; }
.mod-actions span.soon b { color: var(--muted); }
.mod-actions span.soon .tag {
  align-self: flex-start; margin-top: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px;
}
.mod-actions span.soon a { border: 0; padding: 0; background: none; display: inline; }

/* Bloco de downloads (collection do Postman, arquivo para LLM). Presente na visão geral
   e em TODA página de endpoint: quem chega por busca não passa pela visão geral. */
.ref-downloads {
  margin: 18px 0 8px; padding: 14px 18px;
  border: 1px solid var(--border-strong); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: var(--callout-bg);
}
.ref-downloads > p:first-child { margin: 0 0 8px; }
.ref-downloads ul { margin: 0; padding-left: 20px; }
.ref-downloads li { margin: 4px 0; }
.ref-downloads a { color: var(--brand-strong); font-weight: 600; }
.ref-downloads .muted { margin: 10px 0 0; font-size: 13px; }

/* Botão "Copiar para LLM" — CTA primário.
   Fundo near-black com texto branco, no padrão do "Abra sua conta" do site. Era
   um gradiente laranja: numa página que usa laranja como acento, um botão cheio
   de laranja passa a competir com todo o resto que é laranja de verdade. */
.btn-llm { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cta-fg); background: var(--cta-bg); border: 0; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s, transform .1s; }
.btn-llm:hover { background: var(--cta-bg-hover); }
.btn-llm:active { transform: translateY(1px); }
.btn-llm.sm { padding: 7px 14px; font-size: 13px; }

/* Lista de pacotes "Copiar para LLM" (estilo QI) */
.llm-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 26px; }
.llm-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.llm-item:hover { border-color: var(--border-strong); }
.llm-item-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.llm-item-info b { color: var(--ink); font-size: 15px; }
.llm-item-info span { color: var(--muted); font-size: 12.5px; }
.llm-item-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 640px) { .llm-item { flex-direction: column; align-items: stretch; } .llm-item-actions { justify-content: flex-end; } }

/* Troca de API (pills) no topo da nav */
.ref-apis { display: flex; gap: 6px; margin: 0 2px 12px; flex-wrap: wrap; }
.ref-apis .pill { flex: 1 1 auto; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 999px; }
.ref-apis .pill:hover { border-color: var(--brand); color: var(--ink); }
.ref-apis .pill.active { background: var(--brand-strong); color: var(--on-brand); border-color: transparent; }

/* Endpoints na nav: chip de método + título */
.gi.sub .m.sm { margin-right: 7px; vertical-align: middle; }
.gi.sub .gi-t { vertical-align: middle; }
.gi.sub.dep .gi-t { text-decoration: line-through; opacity: .7; }
.mod > summary .mod-cnt { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; }
.content h4.subtype { color: var(--muted); font-weight: 600; margin-top: 1.1em; }

/* Botão copiar (injetado por app.js) */
.codewrap { position: relative; }
.codewrap .copy-btn { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--pre-fg); background: var(--pre-chrome); border: 1px solid var(--pre-chrome-border); border-radius: 7px; padding: 4px 9px; cursor: pointer; opacity: .85; transition: background .15s, opacity .15s; display: inline-flex; align-items: center; gap: 5px; }
.codewrap .copy-btn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.codewrap .copy-btn:hover { background: var(--pre-chrome-border); opacity: 1; }
.codewrap .copy-btn.done { background: var(--brand-strong); border-color: transparent; color: var(--on-brand); }

/* ============================================================================
   Componentes compartilhados (Reference/Ui.cs) — badge, chips, filtro, painel,
   passos, estados. Um estilo por componente, usado por todas as areas.
   ============================================================================ */

/* ---------- Badge de status/categoria ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-strong); color: var(--muted); background: var(--surface-2);
}
.badge-marca { background: var(--brand-strong); border-color: transparent; color: var(--on-brand); }
.badge-info { background: var(--callout-bg); border-color: var(--callout-border); color: var(--brand-strong); }
.badge-ok { background: var(--callout-bg); border-color: var(--callout-border); color: var(--link); }
.badge-alerta { background: var(--danger); border-color: transparent; color: var(--on-danger); }

/* ---------- Chips (relacoes entre eixos) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.chips-lg { gap: 9px; margin: 12px 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.75px; font-weight: 600;
  color: var(--text); text-decoration: none; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--callout-bg); }
.chips-lg .chip { font-size: 13.5px; padding: 7px 14px; }
.chip-n {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--faint);
  background: var(--surface-2); border-radius: 999px; padding: 1px 7px;
}
.chip:hover .chip-n { color: var(--brand-strong); }

/* ---------- Barra de filtro de tabela ---------- */
.filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 -4px; }
.filter-input {
  flex: 1 1 260px; max-width: 380px; padding: 9px 13px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.filter-input::placeholder { color: var(--faint); }
.filter-input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.filter-count { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.filter-count.none { color: var(--danger); font-weight: 600; }

/* Cabecalho ordenavel (app.js). O indicador segue o aria-sort — um estado so. */
.content th.sortable { cursor: pointer; user-select: none; }
.content th.sortable:hover { color: var(--brand-strong); }
.content th.sortable::after { content: '\2195'; margin-left: 6px; opacity: .35; font-size: 10px; }
.content th.sortable[aria-sort="ascending"]::after { content: '\2191'; opacity: 1; color: var(--brand); }
.content th.sortable[aria-sort="descending"]::after { content: '\2193'; opacity: 1; color: var(--brand); }

/* ---------- Estado vazio ---------- */
.empty {
  display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center;
  padding: 34px 20px; margin: 16px 0; border: 1px dashed var(--border-strong);
  border-radius: var(--radius); background: var(--surface-2);
}
.empty b { color: var(--ink); font-size: 14.5px; }
.empty span { color: var(--muted); font-size: 13px; max-width: 46ch; line-height: 1.55; }

/* ---------- Cards compactos / estaticos ---------- */
.cards-compact { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.card-static { cursor: default; }
.card-static:hover { transform: none; border-color: var(--border); box-shadow: var(--shadow-sm); }
.card-static:hover::before { opacity: 0; }

/* ---------- Navegacao entre as tres paginas de um tipo de operacao ---------- */
.pagenav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 34px 0 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.pagenav-i { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, background .15s; }
.pagenav-i:hover { border-color: var(--brand); background: var(--callout-bg); }
.pagenav-i b { color: var(--ink); font-size: 14px; }
.pagenav-i span { color: var(--muted); font-size: 12.25px; line-height: 1.45; }
.pagenav-i.active { border-color: transparent; background: var(--brand-strong); }
.pagenav-i.active b, .pagenav-i.active span { color: var(--on-brand); }
.pagenav-i.active span { opacity: .85; }

/* Card de saida da area, na landing: age como botao, sem anunciar contagem. */
.card-more { border-style: dashed; }
.card-more b { color: var(--brand-strong); }
.card-more:hover { border-style: solid; }

/* ---------- Lista de rotas ---------- */
.routelist { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.routelist li { padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.routelist a { text-decoration: none; border: 0; display: inline-flex; align-items: center; gap: 8px; }
.routelist code { white-space: normal; word-break: break-all; }

/* Codigo do enum ao lado do rotulo, na navegacao lateral. */
.gi.sub .gi-code { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.gi.sub { display: flex; align-items: center; gap: 8px; }
.gi.sub.active .gi-code { color: var(--brand-strong); opacity: .8; }

/* ============================================================================
   Os componentes da landing, dentro das paginas de conteudo
   ============================================================================
   Mesmos seletores, escala menor. A landing e uma vitrine e pode respirar; a
   pagina de endpoint tem conteudo tecnico denso logo abaixo, e o componente em
   tamanho de hero empurrava a primeira tabela para fora da primeira tela.
   Nenhum estilo e reescrito aqui — so a medida muda. */
.content .hero-stats { gap: 34px; margin: 20px 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.content .hero-stats .st-n { font-size: 23px; }
.content .hero-stats .st-l { font-size: 10.5px; letter-spacing: 1.1px; }
.content .hero-cta { margin: 18px 0 22px; }
.content .btn-pill { font-size: 13.5px; padding: 10px 19px; }
.btn-pill.sm { font-size: 12.5px; padding: 7px 15px; }
.content .esteira { margin: 20px 0 24px; }

/* Etapa atual da esteira: preenchida no laranja da marca. Usada quando a pagina
   sabe em que etapa esta (Ui.EsteiraDiagrama("Formalização")). */
.esteira .et.on {
  background: var(--brand-fill); color: var(--on-brand); border-color: transparent;
  box-shadow: 0 4px 18px rgba(249, 115, 22, .3);
}
.esteira .et.on:hover { color: var(--on-brand); }
.esteira-sm { gap: 22px; margin: 16px 0; }
.esteira-sm .et { font-size: 11px; padding: 4px 11px; }
.esteira-sm .et + .et::before { left: -17px; font-size: 11px; }

/* Icone do card: quadrado arredondado com o glifo em laranja. Gira e ganha glow
   no hover do card — micro-animacao de 220ms, nao um loop continuo. */
.card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 12px; align-self: flex-start;
  border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--brand-soft); color: var(--brand);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card-ic svg { width: 17px; height: 17px; }
.card:hover .card-ic { transform: translateY(-1px) rotate(-6deg); box-shadow: var(--glow); }

/* Itens da tela de LLM: mesma borda e mesmo glow de hover dos cards. Eram o
   unico bloco da plataforma com hover proprio (so troca de cor de borda). */
.llm-item {
  border-radius: var(--radius-lg);
  /* Alvo de ancora da navegacao lateral (RefRender.NavLlm): sem a margem de
     rolagem o item pulava para debaixo da barra superior, que e sticky. O valor
     acompanha o dos titulos (.content h2). */
  scroll-margin-top: 80px;
  transition: box-shadow var(--t) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* Realce momentaneo ao chegar por ancora: sem isso o leitor rola e nao sabe QUAL
   dos itens da lista era o alvo, porque todos tem a mesma forma. */
.llm-item:target { border-color: var(--brand); box-shadow: var(--glow-strong); }
.llm-item:hover { border-color: var(--brand); box-shadow: var(--glow); transform: translateY(-2px); }
.llm-item-info span a { font-weight: 600; }

/* ============================================================================
   Tabs de linguagem no bloco de codigo (Ui.CodeTabs)
   ============================================================================
   SEM JAVASCRIPT todos os paineis ficam visiveis, um sob o outro, cada um com o
   nome da linguagem escrito antes (o ::before do data-ct-fallback-label). A
   barra de tabs so aparece depois que o app.js assume o controle e marca o
   contêiner com data-ct-on — assim a pagina degrada para uma lista legivel em
   vez de esconder dois dos tres exemplos para sempre. */
.codetabs { margin: 14px 0 18px; }
.ct-bar { display: none; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.codetabs[data-ct-on] .ct-bar { display: flex; }
.ct-tab {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border-strong); border-radius: var(--pill);
  padding: 6px 15px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ct-tab:hover { color: var(--ink); border-color: var(--brand); }
.ct-tab.on {
  color: var(--on-brand); background: var(--brand-fill); border-color: transparent;
  box-shadow: 0 3px 14px rgba(249, 115, 22, .26);
}
/* Rotulo de fallback: some quando o JS liga as tabs, porque ai a tab ja diz. */
.ct-panel::before {
  content: attr(data-ct-fallback-label);
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--faint); margin: 12px 0 5px;
}
.codetabs[data-ct-on] .ct-panel::before { display: none; }

/* ============================================================================
   Rodape institucional — razao social e CNPJ
   ============================================================================
   Presente em TODA pagina, e nao so na landing: quem chega por busca cai numa
   pagina de endpoint, e e ali que precisa saber de que instituicao e a API que
   esta integrando. O texto e o mesmo do site (fonte unica em Program.cs). */
.sitefoot {
  border-top: 1px solid var(--border); margin-top: 12px;
  padding: 34px 44px 40px; background: var(--sidebar-bg);
}
.sitefoot-in {
  max-width: 1120px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.sitefoot-brand { display: flex; flex-direction: column; gap: 9px; }
.sitefoot .logo { height: 22px; width: auto; display: block; opacity: .9; }
:root[data-theme="dark"] .sitefoot .logo-light { display: none; }
:root:not([data-theme="dark"]) .sitefoot .logo-dark { display: none; }
.sitefoot .legal { font-size: 12.5px; color: var(--faint); line-height: 1.6; margin: 0; }
.sitefoot .legal b { color: var(--muted); font-weight: 600; }
.sitefoot .scd {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--brand-strong); font-weight: 600;
}
/* Dentro do layout de tres colunas o rodape fica FORA do .layout, largura cheia. */
.layout + .sitefoot { padding-left: 32px; padding-right: 32px; }

/* ============================================================================
   Scroll reveal — fade + translateY nas secoes
   ============================================================================
   A classe .rv marca o alvo; o app.js troca por .rv-in quando ele entra na
   viewport. O estado inicial NAO e aplicado por CSS puro: se o JS nao rodar
   (erro, bloqueio), tudo ficaria invisivel para sempre. Por isso o
   `opacity: 0` so vale quando o <html> tem data-rv="on", atributo que o proprio
   app.js escreve antes de observar — sem JS a pagina nasce visivel. */
:root[data-rv="on"] .rv {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
:root[data-rv="on"] .rv.rv-in { opacity: 1; transform: none; }

/* ============================================================================
   Bloco de codigo estilo terminal
   ============================================================================
   O <pre> e deliberadamente escuro nos dois temas (ver nota no fim do arquivo).
   Aqui ele ganha a barra de cromo do snippet do site: um badge de status a
   esquerda, escrito pelo servidor como data-status no .codewrap. */
/* Os dois pseudo-elementos do badge levam pointer-events: none. Sao decoracao
   sobreposta ao <pre>, e sem isso capturariam o clique e o arrasto de selecao na
   faixa de cima do bloco de codigo. */
.codewrap[data-status]::before {
  content: attr(data-status);
  position: absolute; top: 10px; left: 30px; z-index: 1; pointer-events: none;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .4px;
  color: #7ee2a8; opacity: .92;
}
/* Dot do badge, no padrao do snippet do site. Pulsa devagar: e o unico
   movimento continuo dentro da area de leitura, e 2.4s e lento o bastante para
   ler como "vivo" sem puxar o olho para fora do codigo. */
.codewrap[data-status]::after {
  content: ''; position: absolute; top: 15px; left: 16px; z-index: 1; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%; background: #7ee2a8;
  animation: uy3-pulse 2.4s var(--ease) infinite;
}
.codewrap[data-status] pre { padding-top: 36px; }

/* Badge de estado ao vivo (Ui.Badge(..., live: true)) — hoje so o "no ar" do
   servidor MCP. O dot pulsa pela MESMA keyframe do badge de codigo: um efeito,
   uma definicao. */
.badge-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor; animation: uy3-pulse 2.4s var(--ease) infinite;
}

@keyframes uy3-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: .45; box-shadow: 0 0 0 4px transparent; }
}

/* ---------- Logo: entrada e hover ----------
   A entrada e um fade+rise curto, e nao um "draw" de stroke-dashoffset: o logo
   da UY3 e feito de PATHS PREENCHIDOS (fill, sem stroke), e stroke-dash nao tem
   efeito sobre preenchimento — o desenho apareceria de uma vez no fim da
   animacao. Alem disso o SVG entra por <img>, que nao expoe os paths ao CSS da
   pagina; animar por dentro exigiria inline do SVG em toda pagina, trocando o
   cache do asset por markup repetido. O fade orquestrado da a mesma sensacao.
   A classe vem do app.js (data-logo="in"), para que sem JS o logo simplesmente
   esteja lá. */
:root[data-logo="in"] .brand .logo {
  animation: uy3-logo-in .55s var(--ease) both;
}
@keyframes uy3-logo-in {
  from { opacity: 0; transform: translateY(-4px) scale(.96); }
  to { opacity: 1; transform: none; }
}
/* Hover: glow laranja e um leve levantar. O `filter: drop-shadow` acompanha o
   traçado do logo, e nao a caixa da imagem — box-shadow desenharia um halo
   retangular em volta de um SVG transparente. */
.brand .logo { transition: transform var(--t) var(--ease), filter var(--t) var(--ease); }
.brand:hover .logo {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 9px rgba(255, 122, 26, .55));
}

/* Realce de sintaxe: laranja/ambar sobre o terminal escuro. As classes vem do
   Markdig (fences com linguagem) — sem highlighter em runtime, so a paleta. */
.content pre .k, .content pre .kw { color: #ffab6b; }
.content pre .s, .content pre .str { color: #ffd9a8; }
.content pre .n, .content pre .num { color: #ff9a4d; }
.content pre .c, .content pre .cm { color: #7a6c60; font-style: italic; }

/* ============================================================================
   Scrollbar e selecao de texto na cor da marca
   ============================================================================ */
::selection { background: rgba(249, 115, 22, .3); color: var(--ink); }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--pill);
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: padding-box; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) { .tocwrap { display: none; } }

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .side {
    position: fixed; top: var(--topbar-h); left: 0; height: calc(100vh - var(--topbar-h));
    width: min(300px, 82vw); transform: translateX(-100%); transition: transform .2s ease; z-index: 60;
    box-shadow: var(--shadow-lg);
  }
  .side.open { transform: none; }
  .side-backdrop.open { display: block; }
  .content { padding: 26px 28px 64px; }
  .hero, .grid, .sitefoot { padding-left: 28px; padding-right: 28px; }
  .hero { padding-top: 48px; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 6px; }
  .toolbar { position: static; gap: 8px; }
  .toolbar .spacer { display: none; }
  .content { padding: 20px 16px 56px; }
  .content h1 { font-size: 26px; letter-spacing: -.2px; }
  .hero { padding: 40px 16px 6px; }
  .hero h1 { letter-spacing: -.8px; max-width: none; }
  .hero p { font-size: 15.5px; }
  .hero-cta .btn-pill { flex: 1 1 100%; justify-content: center; }
  .hero-stats { gap: 24px 32px; margin-top: 32px; }
  .grid { padding: 12px 16px 24px; }
  .sitefoot { padding: 26px 16px 32px; }
  .sitefoot-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .topbar.float { border-radius: var(--radius-lg); }
}

/* Sem movimento: as transicoes e o parallax somem, e a malha de particulas NAO
   e desenhada (o app.js tambem nao a inicia). O scroll reveal desliga o estado
   inicial escondido — o conteudo tem de estar visivel, nao apenas parado. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .card:hover, .btn-pill:hover, .llm-item:hover { transform: none; }
  .card:hover .card-ic, .brand:hover .logo { transform: none; }
  .fx, .fx-soft { display: none; }
  :root[data-rv="on"] .rv { opacity: 1 !important; transform: none !important; }
  /* Os dots de estado ficam ESTATICOS e visiveis — o pulso era o enfeite, o
     dot e a informacao. `animation: none` acima ja para o movimento; aqui a
     opacidade volta ao cheio para o dot nao congelar no meio do fade. */
  .badge-live::before, .codewrap[data-status]::after { opacity: 1 !important; }
  /* Sem count-up: o numero final e escrito direto (o app.js nem inicia). */
}