/* ============================================================
   Velmo Design System — theme.css  (v1.0.0 · calm competence)
   LEGADO, escrito à mão (#4830): nenhum script gera este arquivo;
   tokens.json só lhe dá a versão. O DS novo é design-system/meuvelmo/.
   Doctrine: the chrome is pure monochrome — warm ink on warm
   paper. There is NO brand accent color. Color belongs to the
   client's data (the ramp, inside charts only) and to functional
   truth (petróleo action, amber attention, rare red error).
   Light-only: the dark theme was retired in the 2026-07 rebrand.
   Two layers:
     1. PRIMITIVES  (--vl-*)        raw ink ramp + data ramp
     2. SEMANTIC    (--vl-color-*)  role-based
   Surfaces should consume the SEMANTIC layer, not primitives.
   ============================================================ */

/* Fonte (#4831): a pilha do sistema do DS novo (--mv-font-sans), que não baixa
   arquivo nenhum — página assinada não pede fonte a terceiro (#318) e também não
   serve fonte própria: o self-host de fonte saiu. */

:root {
  /* ---- primitive: cool ink ramp (all chrome hierarchy lives here) ----
     1.1.0 (#2628/#2684): portada do projeto Claude Design — mesmos passos de
     luminosidade da rampa warm, viés amarelo removido, leve azul, então toda
     superfície preserva suas relações de contraste. */
  --vl-neutral-0:#ffffff;
  --vl-neutral-50:#fbfbfd;   /* canvas — cold daylight, not paper */
  --vl-neutral-100:#f4f5f7;
  --vl-neutral-200:#e8e9ed;
  --vl-neutral-300:#d6d8de;
  --vl-neutral-400:#b0b3bc;
  --vl-neutral-500:#8a8d96;
  --vl-neutral-600:#676a72;
  --vl-neutral-700:#45474e;
  --vl-neutral-800:#2b2c31;
  --vl-neutral-900:#1c1c1e;  /* ink */

  /* ---- primitive: hairline (1px borders everywhere) ---- */
  --vl-hairline:rgba(28,28,30,.08);
  --vl-hairline-strong:rgba(28,28,30,.16);

  /* ---- primitive: semantic status (the ONLY hues in chrome) ---- */
  --vl-action:#10635c;  --vl-action-soft:#e7efee;  /* petróleo: invites action on pending items */
  --vl-warning:#9a6e1b; --vl-warning-soft:#f5eddd; /* quiet amber: passive attention (Estimado/Hipótese) */
  --vl-danger:#8e3b30;  --vl-danger-soft:#f6e7e4;  /* calm rare red: true errors only */

  /* ---- primitive: comparison accents (#2628 decisão 2 / #2684) ----
     Dois acentos com encoding FIXO, escopados à seção de comparação/oferta da
     Carteira. Cada um codifica UMA coisa: verde = o lado administrado da
     comparação + a ação de destaque da oferta; roxo = o que a carteira do
     cliente viveu de fato (pior queda) + a porta da oferta ("E agora?").
     A doutrina monocromática permanece intacta fora desse escopo — nunca use
     estes tokens para status, ganho/perda, marca ou qualquer outra superfície. */
  --vl-administered:#1a8f2e;
  --vl-lived:#6d28d9;

  /* ---- primitive: data ramp — the only polychromy in the product.
          Flat and matte, never gradients. Inside charts only, never chrome. ---- */
  --vl-data-1:#3e4a5c; /* ardósia  */
  --vl-data-2:#4e5c44; /* musgo    */
  --vl-data-3:#6e2a3c; /* bordeaux */
  --vl-data-4:#8a6d3f; /* bronze   */
  --vl-data-5:#10635c; /* petróleo */
  --vl-data-6:#5f5e5a; /* grafite — reserved for "outros" */

  /* ---- DEPRECATED primitives (pre-rebrand aliases) ----
     Kept so existing surfaces keep rendering until each screen is redone
     (wealth-green → ink, mint → warm gray, teal hero → ink, pink dot → ink).
     Do not use in new code; each screen PR removes its usages. */
  --vl-primary-50:var(--vl-neutral-100);  --vl-primary-100:var(--vl-neutral-100);
  --vl-primary-200:var(--vl-neutral-200); --vl-primary-300:var(--vl-neutral-300);
  --vl-primary-400:var(--vl-neutral-500); --vl-primary-500:var(--vl-neutral-600);
  --vl-primary-600:var(--vl-neutral-700); --vl-primary-700:var(--vl-neutral-900);
  --vl-primary-800:#000000;               --vl-primary-900:var(--vl-neutral-900);
  --vl-mint-300:var(--vl-neutral-300); --vl-mint-400:var(--vl-neutral-400);
  --vl-mint-500:var(--vl-neutral-500);
  --vl-hero-1:var(--vl-neutral-900); --vl-hero-2:var(--vl-neutral-800);
  --vl-lockup-pink:var(--vl-neutral-900);
  --vl-success:var(--vl-neutral-900); --vl-success-soft:var(--vl-neutral-100);
  --vl-info:var(--vl-neutral-700);    --vl-info-soft:var(--vl-neutral-100);
  --vl-gain:var(--vl-neutral-900); --vl-loss:var(--vl-neutral-900); --vl-flat:var(--vl-neutral-500);

  /* ---- primitive: type — ONE family, hierarchy by size/weight only ---- */
  --vl-font-sans:var(--mv-font-sans); /* #4831: a fonte do sistema do DS novo */
  --vl-font-serif:var(--vl-font-sans); /* deprecated alias — no serif in the system */
  --vl-font-mono:var(--vl-font-sans);  /* deprecated alias — money is sans + tabular-nums */
  --vl-text-xs:12px; --vl-text-sm:13px; --vl-text-base:15px; --vl-text-md:17px;
  --vl-text-lg:19px; --vl-text-xl:22px; --vl-text-2xl:26px; --vl-text-3xl:34px;
  --vl-text-4xl:44px; --vl-text-5xl:56px;
  --vl-fw-regular:400; --vl-fw-medium:500; --vl-fw-semibold:600; --vl-fw-bold:700; --vl-fw-heavy:800;
  --vl-lh-tight:1.08; --vl-lh-snug:1.25; --vl-lh-normal:1.5; --vl-lh-relaxed:1.65;
  --vl-ls-tighter:-0.025em; --vl-ls-tight:-0.015em; --vl-ls-normal:0;
  --vl-ls-wide:0.05em; --vl-ls-wider:0.08em;

  /* ---- primitive: space / containers / radius / border ---- */
  --vl-space-0:0; --vl-space-1:4px; --vl-space-2:8px; --vl-space-3:12px;
  --vl-space-4:16px; --vl-space-5:20px; --vl-space-6:24px; --vl-space-8:32px;
  --vl-space-10:40px; --vl-space-12:48px; --vl-space-16:64px; --vl-space-20:80px;
  --vl-space-24:96px;
  --vl-container-wide:1140px;   /* dashboards */
  --vl-container-narrow:920px;  /* flows & lists */
  --vl-measure:68ch;            /* max line length for running prose */
  --vl-radius-sm:8px; --vl-radius-md:12px; --vl-radius-lg:14px; --vl-radius-xl:20px;
  --vl-radius-pill:999px;
  --vl-border-hairline:1px; --vl-border-thick:2px;

  /* ---- primitive: shadow (soft ink, never colored) ---- */
  --vl-shadow-sm:0 1px 2px rgba(28,28,30,.05);
  --vl-shadow-md:0 4px 16px rgba(28,28,30,.06);
  --vl-shadow-lg:0 24px 48px rgba(28,28,30,.10);
  --vl-shadow-focus:0 0 0 3px rgba(28,28,30,.16);

  /* ---- primitive: motion / z-index ---- */
  --vl-dur-fast:120ms; --vl-dur-base:220ms; --vl-dur-slow:300ms; --vl-dur-reveal:280ms;
  --vl-ease:cubic-bezier(.22,1,.36,1);
  --vl-ease-settle:cubic-bezier(.3,.9,.3,1.02);
  --vl-z-base:0; --vl-z-sticky:100; --vl-z-overlay:800; --vl-z-modal:1000; --vl-z-toast:1100;

  /* ============ SEMANTIC (light — the only theme) ============
     #4831: fundo, tinta, texto secundário e linha leem o DS novo (--mv-*, de
     design-system/meuvelmo/tokens.css, que o build concatena depois deste
     arquivo). Troca de VALOR, nome mantido: os renderers seguem lendo
     --vl-color-*. Só os pares de mesmo papel; o resto (surface, info, action,
     warning, danger, acentos) é estrutura ou veredito e fica no legado. */
  --vl-color-bg:           var(--mv-ground);
  --vl-color-surface:      var(--vl-neutral-0);
  --vl-color-surface-alt:  var(--vl-neutral-100);
  /* Sticky bars over scrolling content: paper (bg) at .86 so the page
     ghosts through. The only alpha surface in chrome (#1772). */
  --vl-color-surface-translucent: color-mix(in srgb, var(--mv-ground) 86%, transparent);
  --vl-color-border:       var(--mv-hairline);
  --vl-color-border-strong:var(--mv-rule-control);
  --vl-color-text:         var(--mv-ink);
  --vl-color-text-soft:    var(--mv-ink-2);
  --vl-color-text-muted:   var(--mv-ink-2);
  --vl-color-text-on-brand:var(--mv-on-ink);

  /* "brand" = ink. Primary actions are ink pills; there is no accent hue.
     Names kept for surface compatibility. */
  --vl-color-brand:        var(--mv-ink);
  --vl-color-brand-hover:  var(--mv-ink);
  --vl-color-brand-soft:   var(--vl-neutral-100);
  --vl-color-accent:       var(--mv-ink);

  /* Confirmed/complete is INK, not green — order is perceived, not celebrated. */
  --vl-color-success:      var(--mv-ink);
  --vl-color-success-soft: var(--vl-neutral-100);
  --vl-color-info:         var(--vl-neutral-700);
  --vl-color-info-soft:    var(--vl-neutral-100);
  --vl-color-action: var(--vl-action);  --vl-color-action-soft: var(--vl-action-soft);
  --vl-color-warning:var(--vl-warning); --vl-color-warning-soft:var(--vl-warning-soft);
  --vl-color-danger: var(--vl-danger);  --vl-color-danger-soft: var(--vl-danger-soft);

  /* Money deltas: direction is typography (sign + glyph), never hue.
     Negative values are neutral with a minus sign, never red. */
  --vl-color-gain:var(--mv-ink);
  --vl-color-loss:var(--mv-ink);
  --vl-color-flat:var(--vl-neutral-500);

  /* Acentos da comparação — ver o bloco primitivo acima para o encoding e o
     escopo. Consuma SEMPRE a camada semântica. */
  --vl-color-administered:var(--vl-administered);
  --vl-color-lived:var(--vl-lived);

  /* Procedência (#4891): o pixel de «estimado» do ProvenanceMark. Um ponteiro
     só; os outros `prov-*` entram quando alguma página desenhar essas marcas. */
  --vl-color-prov-estimated:var(--mv-prov-estimated);
  /* ★ #5243: os outros três pixels, que a tabela da Carteira passa a desenhar
     antes de todo valor (d4), e o marcador laranja da comparação (d11). */
  --vl-color-prov-open-finance:var(--mv-prov-open-finance);
  --vl-color-prov-client:var(--mv-prov-client);
  --vl-color-prov-document:var(--mv-prov-document);
  --vl-color-prov-needs-you:var(--mv-prov-needs-you);
  --vl-color-fill-orange:var(--mv-fill-orange);
  /* ★ #5244: o menu que abre pelo nome (C1b, d13) tem o canto do painel. */
  --vl-radius-panel:var(--mv-radius-panel);

  /* Largura da página (#5037): a mesma medida do AppHeader, para o miolo da
     página nova alinhar com a barra. Um ponteiro, pelo mesmo mapa. */
  --vl-page-max:var(--mv-measure-max);

  /* O fim do cabeçalho do site (#6000, AssetTable da rev. 18 da Carteira): o
     AppHeader publica a própria altura em `--mv-sticky-top` em tempo de
     execução, e o que fica preso no topo para logo abaixo dele. Um ponteiro,
     com o zero de quem não tem cabeçalho preso. */
  --vl-sticky-top:var(--mv-sticky-top,0px);

  /* O «trabalhando» (#5195, f4 do alvo `primeira-sessao-fluxo.html`): o pixel
     `violet-500` que anda, na Conversa. Um ponteiro, pelo mesmo mapa. */
  --vl-color-trabalhando:var(--mv-violet-500);

  /* O campo da Conversa (#5230, P1 do alvo `conversa-pagina.html`): o «+» da
     ação em `fill-lime`, e o campo fora do ar em `ink-disabled`. Dois
     ponteiros, pelo mesmo mapa. */
  --vl-color-fill-lime:var(--mv-fill-lime);
  --vl-color-text-disabled:var(--mv-ink-disabled);

  /* A sua mensagem na Conversa (#5236, c1 do alvo): o fundo `fill-you` e o
     raio `radius-message`. Dois ponteiros, pelo mesmo mapa. */
  --vl-color-fill-you:var(--mv-fill-you);
  --vl-radius-message:var(--mv-radius-message);

  /* O assunto da Conversa aberta por uma linha da Carteira (#6099, G1 do alvo
     `app-em-duas-paginas.html`): o «Sobre: ‹ativo›» e a linha marcada no
     `fill-callout`, com o raio `radius-callout`. Dois ponteiros, pelo mesmo mapa. */
  --vl-color-fill-callout:var(--mv-fill-callout);
  --vl-radius-callout:var(--mv-radius-callout);

  /* O sinal do Prêmio sobre o Tesouro (#5578, D1 do alvo): o «+» em
     `sign-positive` e o «−» em `sign-negative`. Só o glifo do sinal, nunca o
     valor nem um marcador. Dois ponteiros, pelo mesmo mapa. */
  --vl-color-sign-positive:var(--mv-sign-positive);
  --vl-color-sign-negative:var(--mv-sign-negative);
}

/* MeuVelmo Design System — GERADO por scripts/build_design_system_css.py a partir de
   design-system/meuvelmo/tokens.json (cópia sem edição do artifact). Não edite. */
:root {
  --mv-ground: #f4f4f0;
  --mv-ink: #161614;
  --mv-ink-2: #66665f;
  --mv-ink-disabled: #9c9c95;
  --mv-on-ink: #f4f4f0;
  --mv-ink-3: #b5b5ae;
  --mv-hairline: #dad9d3;
  --mv-fill-you: #e7e6e0;
  --mv-fill-callout: #ecebe5;
  --mv-rule-control: #7a7a73;
  --mv-dark-ink-2: #a3a39c;
  --mv-dark-rule-control: #8c8c85;
  --mv-dark-hairline: #3a3a36;
  --mv-dark-fill-callout: #262623;
  --mv-surface-ink: var(--mv-ink);
  --mv-fill-lime: #ccff00;
  --mv-accent-lime: #83c900;
  --mv-fill-orange: #ff8c1a;
  --mv-accent-orange: #ff7222;
  --mv-violet-500: #7b26ff;
  --mv-violet-200: #b79ffd;
  --mv-violet-400: #8d65ff;
  --mv-violet-700: #5a17c9;
  --mv-violet-900: #3b0a8a;
  --mv-purple-300: #c084fc;
  --mv-purple-700: #890185;
  --mv-prov-open-finance: var(--mv-violet-500);
  --mv-prov-client: var(--mv-purple-700);
  --mv-prov-document: var(--mv-ink);
  --mv-prov-estimated: var(--mv-ink-3);
  --mv-prov-needs-you: var(--mv-fill-lime);
  --mv-sign-positive: #639909;
  --mv-sign-negative: #d85a08;
  --mv-key-formula: var(--mv-violet-200);
  --mv-key-fontes: var(--mv-violet-400);
  --mv-key-janela: var(--mv-purple-300);
  --mv-space-1: 4px;
  --mv-space-2: 8px;
  --mv-space-3: 12px;
  --mv-space-4: 16px;
  --mv-space-5: 24px;
  --mv-space-6: 32px;
  --mv-space-7: 48px;
  --mv-space-8: 64px;
  --mv-space-9: 96px;
  --mv-measure-max: 1120px;
  --mv-radius-none: 0;
  --mv-radius-pill: 999px;
  --mv-radius-card: 16px;
  --mv-radius-tooltip: 12px;
  --mv-radius-message: 16px;
  --mv-radius-callout: 16px;
  --mv-radius-panel: 16px;
  --mv-stroke-hairline: 1px;
  --mv-stroke-chart: 2.5px;
  --mv-stroke-drawing: 1.25px;
  --mv-stroke-focus: 2px;
  --mv-shadow-none: none;
  --mv-shadow-portrait: 3px 5px 30px 0 rgba(22, 22, 20, 0.22);
  --mv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mv-text-display: 400 64px/1 var(--mv-font-sans);
  --mv-text-heading: 600 24px/1.25 var(--mv-font-sans);
  --mv-text-body: 400 16px/1.5 var(--mv-font-sans);
  --mv-text-label: 400 13px/1.4 var(--mv-font-sans);
}

/* ============================================================
   Velmo Design System — components.css (v1.0.0 · calm competence)
   Depends on theme.css. Uses ONLY semantic tokens (--vl-color-*).
   Prefix: .vl-  — safe to drop alongside any existing styles.
   Grammar: monochrome ink chrome; primary action = ink pill;
   sentence case everywhere (no uppercase micro-labels, hierarchy
   is size/weight only); resolved provenance prints nothing on a line,
   only what needs the client carries color (amber/red); money is
   sans + tabular-nums; motion 200–300ms ease-out with subtle spring.
   ============================================================ */

.vl-root, .vl-app {
  font-family: var(--vl-font-sans);
  color: var(--vl-color-text);
  background: var(--vl-color-bg);
  font-size: var(--vl-text-base);
  line-height: var(--vl-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography helpers (sentence case; size/weight only) ---- */
.vl-h1{font-size:var(--vl-text-4xl);line-height:var(--vl-lh-tight);letter-spacing:var(--vl-ls-tighter);font-weight:var(--vl-fw-heavy);margin:0}
.vl-h2{font-size:var(--vl-text-2xl);line-height:var(--vl-lh-snug);letter-spacing:var(--vl-ls-tight);font-weight:var(--vl-fw-bold);margin:0}
.vl-h3{font-size:var(--vl-text-lg);letter-spacing:var(--vl-ls-tight);font-weight:var(--vl-fw-semibold);margin:0}
.vl-body{font-size:var(--vl-text-base);color:var(--vl-color-text-soft)}
.vl-muted{font-size:var(--vl-text-sm);color:var(--vl-color-text-muted)}
/* Kicker: quiet sentence-case eyebrow — never uppercase, never tracked. */
.vl-kicker{font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);color:var(--vl-color-text-muted)}
.vl-num{font-family:var(--vl-font-sans);font-variant-numeric:tabular-nums;letter-spacing:0}
.vl-measure{max-width:var(--vl-measure)}

/* ---- Page containers (two widths only) ---- */
.vl-container-wide{width:min(var(--vl-container-wide),calc(100vw - 40px));margin-inline:auto}
.vl-container-narrow{width:min(var(--vl-container-narrow),calc(100vw - 40px));margin-inline:auto}

/* ---- Buttons: primary action is the INK PILL ---- */
.vl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--vl-space-2);
  font-family:inherit;font-size:var(--vl-text-base);font-weight:var(--vl-fw-semibold);
  padding:10px 18px;border-radius:var(--vl-radius-pill);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--vl-dur-base) var(--vl-ease),transform var(--vl-dur-fast) var(--vl-ease),box-shadow var(--vl-dur-base) var(--vl-ease);
}
.vl-btn:active{transform:translateY(1px)}
.vl-btn:focus-visible{outline:none;box-shadow:var(--vl-shadow-focus)}
.vl-btn--primary{background:var(--vl-color-brand);color:var(--vl-color-text-on-brand)}
.vl-btn--primary:hover{background:var(--vl-color-brand-hover)}
.vl-btn--ghost{background:transparent;color:var(--vl-color-brand);border-color:var(--vl-color-border-strong)}
.vl-btn--ghost:hover{background:var(--vl-color-brand-soft)}
.vl-btn--subtle{background:var(--vl-color-surface-alt);color:var(--vl-color-text)}
.vl-btn--subtle:hover{background:var(--vl-color-border)}
.vl-btn--danger{background:var(--vl-color-danger);color:var(--vl-color-text-on-brand)}
.vl-btn--danger:hover{background:color-mix(in srgb,var(--vl-color-danger) 88%,#000)}
.vl-btn--sm{padding:6px 12px;font-size:var(--vl-text-sm)}
.vl-btn--lg{padding:13px 24px;font-size:var(--vl-text-md)}
.vl-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- Inputs ---- */
.vl-field{display:flex;flex-direction:column;gap:var(--vl-space-2)}
.vl-label{font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);color:var(--vl-color-text-soft)}
.vl-input,.vl-select,.vl-textarea{
  font-family:inherit;font-size:var(--vl-text-base);color:var(--vl-color-text);
  background:var(--vl-color-surface);border:1px solid var(--vl-color-border-strong);
  border-radius:var(--vl-radius-sm);padding:10px 12px;width:100%;
  transition:border-color var(--vl-dur-base) var(--vl-ease),box-shadow var(--vl-dur-base) var(--vl-ease);
}
.vl-input:focus,.vl-select:focus,.vl-textarea:focus{outline:none;border-color:var(--vl-color-brand);box-shadow:var(--vl-shadow-focus)}
.vl-input::placeholder{color:var(--vl-color-text-muted)}

/* ---- Card ---- */
.vl-card{
  background:var(--vl-color-surface);border:1px solid var(--vl-color-border);
  border-radius:var(--vl-radius-lg);padding:var(--vl-space-6);box-shadow:var(--vl-shadow-sm);
}
.vl-card--raised{box-shadow:var(--vl-shadow-md)}
.vl-card__title{font-size:var(--vl-text-md);font-weight:var(--vl-fw-semibold);margin:0 0 var(--vl-space-2)}

/* ---- Chip (neutral pill; active = ink) ---- */
.vl-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);
  padding:4px 11px;border-radius:var(--vl-radius-pill);background:var(--vl-color-surface-alt);color:var(--vl-color-text-soft);
  border:1px solid transparent;white-space:nowrap}
.vl-chip.is-active{background:var(--vl-color-brand-soft);color:var(--vl-color-brand);border-color:var(--vl-color-border-strong)}

/* ---- KPI tile (financial) ---- */
.vl-kpi{display:flex;flex-direction:column;gap:var(--vl-space-1);
  background:var(--vl-color-surface);border:1px solid var(--vl-color-border);
  border-radius:var(--vl-radius-lg);padding:var(--vl-space-5) var(--vl-space-6)}
.vl-kpi__label{font-size:var(--vl-text-sm);color:var(--vl-color-text-muted);font-weight:var(--vl-fw-medium)}
.vl-kpi__value{font-family:var(--vl-font-sans);font-variant-numeric:tabular-nums;font-size:var(--vl-text-3xl);font-weight:var(--vl-fw-bold);color:var(--vl-color-text);letter-spacing:var(--vl-ls-tight)}
.vl-kpi__delta{font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);display:inline-flex;align-items:center;gap:4px}

/* Monetary deltas: direction is typography (sign + glyph), never hue. */
.vl-gain{color:var(--vl-color-gain)}
.vl-loss{color:var(--vl-color-loss)}
.vl-flat{color:var(--vl-color-flat)}

/* ---- Badge / pill: three tones only (neutral · warning · danger).
        Legacy brand/success/info render as neutral — confirmed is ink. ---- */
.vl-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);
  padding:4px 10px;border-radius:var(--vl-radius-pill);background:var(--vl-color-surface-alt);color:var(--vl-color-text-soft)}
.vl-badge--brand,.vl-badge--success,.vl-badge--info{background:var(--vl-color-surface-alt);color:var(--vl-color-text-soft)}
.vl-badge--warning{background:var(--vl-color-warning-soft);color:var(--vl-color-warning)}
.vl-badge--danger{background:var(--vl-color-danger-soft);color:var(--vl-color-danger)}
.vl-dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---- Table (sentence-case headers, tabular money) ---- */
.vl-table{width:100%;border-collapse:collapse;font-size:var(--vl-text-sm)}
.vl-table th{text-align:left;font-weight:var(--vl-fw-semibold);color:var(--vl-color-text-muted);
  font-size:var(--vl-text-xs);
  padding:var(--vl-space-3) var(--vl-space-4);border-bottom:1px solid var(--vl-color-border-strong)}
.vl-table td{padding:var(--vl-space-3) var(--vl-space-4);border-bottom:1px solid var(--vl-color-border);color:var(--vl-color-text)}
.vl-table tr:hover td{background:var(--vl-color-surface-alt)}
/* ★ #3708 — a coluna numérica é CENTRADA, com o número alinhado à direita
   DENTRO do bloco; a primeira coluna fica à esquerda. Decisão do responsável
   (11/09/2026), sobre o artboard consolidado.

   O bloco é o ponto: centrar a coluna sem ele desencontraria as casas decimais
   de linha em linha, que é a única razão de a lista ter colunas. `inline-block`
   com `text-align:right` mantém as casas alinhadas entre si e centra o conjunto
   na coluna. */
.vl-table td.vl-num,.vl-table th.vl-num{text-align:center}
.vl-table td.vl-num>*,.vl-table .vl-num__block{display:inline-block;text-align:right;min-width:0}
.vl-table tr>td:first-child,.vl-table tr>th:first-child{text-align:left}
.vl-table--num td:last-child,.vl-table--num th:last-child{text-align:right}

/* ---- Alert / callout: neutral · warning · danger (info renders neutral) ---- */
.vl-alert{display:flex;gap:var(--vl-space-3);padding:var(--vl-space-4);border-radius:var(--vl-radius-md);
  border:1px solid var(--vl-color-border);background:var(--vl-color-surface-alt);font-size:var(--vl-text-base)}
.vl-alert--info{background:var(--vl-color-surface-alt);border-color:var(--vl-color-border);color:var(--vl-color-text)}
.vl-alert--warning{background:var(--vl-color-warning-soft);border-color:transparent;color:var(--vl-color-warning)}
.vl-alert--danger{background:var(--vl-color-danger-soft);border-color:transparent;color:var(--vl-color-danger)}

/* ---- Client review page primitives ---- */
.vl-page-card{background:var(--vl-color-surface);border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-lg);box-shadow:var(--vl-shadow-sm)}
.vl-page-card--compact{border-radius:var(--vl-radius-md);padding:var(--vl-space-4)}
/* Texto que existe só para leitor de tela. Usado pelo `<h1>` das páginas cuja
   pílula do header já escreve o título (Início · Despesas · Carteira): o
   documento continua tendo um título, a tela não repete a palavra. */
.vl-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vl-page-intro{margin:0 0 var(--vl-space-4)}
/* Cabeçalho sem conteúdo visível (só o h1 de leitor de tela) não reserva
   espaço — senão a página abre com a margem de um bloco vazio. */
.vl-page-intro[data-bare]{margin:0}
.vl-page-intro h1{font-size:28px;font-weight:var(--vl-fw-bold);line-height:var(--vl-lh-tight);letter-spacing:var(--vl-ls-tight);margin:0 0 7px;color:var(--vl-color-text)}
.vl-page-intro p{margin:0;font-size:14px;line-height:var(--vl-lh-normal);color:var(--vl-color-text-soft)}
.vl-page-section-title{font-size:var(--vl-text-xl);font-weight:var(--vl-fw-bold);line-height:var(--vl-lh-snug);letter-spacing:var(--vl-ls-tight);margin:0}
.vl-page-section-note{font-size:var(--vl-text-sm);line-height:var(--vl-lh-normal);color:var(--vl-color-text-muted);margin:0}
.vl-section-head{display:flex;align-items:center;gap:9px;margin:24px 2px 12px}
.vl-section-head h2{margin:0;font-size:var(--vl-text-xl);font-weight:var(--vl-fw-bold);letter-spacing:var(--vl-ls-tight)}
/* Cabeçalho de página colapsável ("Entenda"): o subtítulo é UMA frase e o
   cliente pode escondê-la. Antes cada página reimplementava este details/summary
   (onboarding_render, classification_review_static, portfolio_components_static
   tinham três cópias das mesmas 6 regras). */
.vl-page-help{border:0;background:transparent;padding:0;margin:0}
.vl-page-help>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.vl-page-help>summary::-webkit-details-marker{display:none}
.vl-page-help__toggle{flex:none;font-size:var(--vl-text-sm);font-weight:var(--vl-fw-semibold);color:var(--vl-color-text-soft)}
.vl-page-help .vl-page-help__open{display:none}
.vl-page-help[open] .vl-page-help__open{display:inline}
.vl-page-help[open] .vl-page-help__closed{display:none}
.vl-page-help>p{margin-top:8px}
.vl-surface-panel{background:var(--vl-color-surface);border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-lg);box-shadow:var(--vl-shadow-sm)}
/* Product hero (#1018): painel CLARO — o bloco de tinta foi aposentado junto
   com o gradiente. Doutrina calm competence: chrome é tinta-sobre-papel; tile
   escuro não existe nas páginas hi-fi (Visão geral = cards claros com hairline). */
.vl-product-hero{color:var(--vl-color-text);background:var(--vl-color-surface);border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-lg);box-shadow:var(--vl-shadow-sm)}
.vl-product-hero__kicker{font-size:var(--vl-text-sm);font-weight:var(--vl-fw-medium);color:var(--vl-color-text-muted)}
.vl-product-hero__number{font-family:var(--vl-font-sans);font-variant-numeric:tabular-nums;font-weight:var(--vl-fw-bold);letter-spacing:var(--vl-ls-tight);line-height:1.05}
.vl-product-hero__stats{display:flex;flex-direction:column;gap:var(--vl-space-2);min-width:178px}
.vl-product-hero__stat{background:var(--vl-color-surface-alt);border:1px solid var(--vl-color-border);border-radius:11px;padding:11px 13px}
.vl-product-hero__stat-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--vl-text-xs);color:var(--vl-color-text-muted)}
.vl-product-hero__stat-value{display:block;font-family:var(--vl-font-sans);font-size:var(--vl-text-md);font-weight:var(--vl-fw-semibold);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--vl-color-text);margin-top:3px}

/* ---- Provenance seals: quiet resolved, loud pending (the honesty layer).
        Display rule v2 — a seal is the EXCEPTION, not the default. On a line
        (most of the page) fato/classificado print NOTHING; estimado/hipótese
        recede to the amber dot (--mark); falta keeps the red pill, because it
        is the only seal that asks the client for something. The full word
        comes back on a headline number and wherever provenance is the subject
        (asset sheet, the `i` lightbox). The renderer decides via
        render_helpers.seal_display_mode — never per component. ---- */
.vl-prov{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:var(--vl-fw-medium);letter-spacing:0;line-height:1.4;vertical-align:middle}
.vl-prov--fact,.vl-prov--classified{padding:0;background:none;color:var(--vl-color-text-muted)}
.vl-prov--fact::before,.vl-prov--classified::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.vl-prov--fact::before{background:var(--vl-color-text)}
.vl-prov--classified::before{background:var(--vl-color-text-soft)}
/* v2 display rule: on a LINE an estimate is just the amber dot. Declared
   after the pills so it wins the cascade without !important; the label
   stays in the DOM (font-size:0, not display:none) so the title and the
   screen reader still say "Estimado". */
.vl-prov--mark{padding:0;background:none;border:0;gap:0;font-size:0;margin-inline-end:5px}
.vl-prov--mark::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.vl-prov--estimated,.vl-prov--hypothesis,.vl-prov--missing{font-weight:var(--vl-fw-semibold);padding:2px 9px;border-radius:var(--vl-radius-pill);border:1px solid transparent}
.vl-prov--estimated,.vl-prov--hypothesis{color:var(--vl-color-warning);background:var(--vl-color-warning-soft);border-color:color-mix(in srgb,var(--vl-color-warning) 28%,var(--vl-color-warning-soft))}
.vl-prov--missing{color:var(--vl-color-danger);background:var(--vl-color-danger-soft);border-color:color-mix(in srgb,var(--vl-color-danger) 24%,var(--vl-color-danger-soft))}

/* ---- Copiloto conversational card ---- */
.vl-copilot{background:var(--vl-color-surface-alt);border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-lg);padding:14px 15px;box-shadow:var(--vl-shadow-sm)}
.vl-copilot__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vl-copilot__avatar{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:9px;background:var(--vl-color-surface);border:1px solid var(--vl-color-border-strong);color:var(--vl-color-text);font-weight:var(--vl-fw-bold)}
.vl-copilot__bubble{font-size:var(--vl-text-sm);line-height:var(--vl-lh-normal);color:var(--vl-color-text);background:var(--vl-color-surface);border:1px solid var(--vl-color-border);border-radius:12px;padding:9px 12px}
.vl-copilot__chip,.vl-class-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:var(--vl-fw-semibold);border-radius:var(--vl-radius-pill);padding:6px 12px;background:var(--vl-color-surface);border:1px solid var(--vl-color-border);color:var(--vl-color-text-soft)}
.vl-copilot__chip:hover,.vl-class-chip:hover{border-color:var(--vl-color-border-strong);color:var(--vl-color-text)}

/* ---- Classification / bucket chips ---- */
.vl-class-chip--brand{color:var(--vl-color-brand);background:var(--vl-color-brand-soft);border-color:transparent}
.vl-class-chip--warning{color:var(--vl-color-warning);background:var(--vl-color-warning-soft);border-color:transparent}
.vl-class-chip--danger{color:var(--vl-color-danger);background:var(--vl-color-danger-soft);border-color:transparent}
.vl-toggle-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:var(--vl-fw-semibold);padding:7px 11px;border-radius:var(--vl-radius-sm);background:var(--vl-color-surface-alt);border:1px solid var(--vl-color-border);color:var(--vl-color-text-soft)}
.vl-toggle-chip.on,.vl-toggle-chip.is-on{background:var(--vl-color-brand-soft);border-color:var(--vl-color-border-strong);color:var(--vl-color-brand)}
.vl-toggle-chip.neg,.vl-toggle-chip.is-warning{background:var(--vl-color-warning-soft);color:var(--vl-color-warning)}
.vl-segmented{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 2px 4px}
.vl-segmented__button{flex-shrink:0;cursor:pointer;font-family:inherit;font-size:var(--vl-text-sm);font-weight:var(--vl-fw-medium);padding:8px 15px;border-radius:var(--vl-radius-pill);border:1px solid var(--vl-color-border);background:var(--vl-color-surface);color:var(--vl-color-text-soft)}
.vl-segmented__button.on,.vl-segmented__button.is-active{background:var(--vl-color-brand);border-color:var(--vl-color-brand);color:var(--vl-color-text-on-brand)}
/* Sub-menu de PÁGINA (`velmo_page_views_html`): trilho único, como o controle
   Passado/Futuro do Despesas — que era `.profit-view-tablist`, desenho só dele.
   Ele é o sub-menu porque precisa se distinguir da nav do header, que também é
   pílula: pílula solta preta = você mudou de página; pílula clara dentro de um
   trilho = você mudou a lente da MESMA página. Com o filtro de período (`Tudo ·
   12 meses · 3 meses`) usando o `.vl-segmented` cru logo abaixo, a diferença de
   forma é o que separa "trocar de visão" de "filtrar a lista". */
.vl-segmented.vl-page-views{display:inline-flex;gap:2px;padding:3px;max-width:100%;border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-pill);background:var(--vl-color-surface-alt)}
.vl-page-views .vl-segmented__button{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--vl-color-text-muted);font-weight:var(--vl-fw-semibold);line-height:1.2;padding:var(--vl-space-2) var(--vl-space-4);text-decoration:none;white-space:nowrap}
.vl-page-views .vl-segmented__button.on,.vl-page-views .vl-segmented__button.is-active{background:var(--vl-color-surface);border-color:transparent;color:var(--vl-color-text);box-shadow:var(--vl-shadow-sm)}
@media (max-width:520px){.vl-page-views .vl-segmented__button{padding-inline:var(--vl-space-3)}}
.vl-action-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:var(--vl-fw-semibold);line-height:1.25;padding:5px 11px;border-radius:var(--vl-radius-pill);border:1px solid var(--vl-color-border);background:var(--vl-color-surface);color:var(--vl-color-text-soft);text-decoration:none}
.vl-action-chip:hover{border-color:var(--vl-color-border-strong);color:var(--vl-color-text)}
.vl-action-chip--brand{background:var(--vl-color-brand-soft);border-color:transparent;color:var(--vl-color-brand)}
.vl-action-chip--warning{background:var(--vl-color-warning-soft);border-color:transparent;color:var(--vl-color-warning)}
.vl-action-chip--danger{background:var(--vl-color-danger-soft);border-color:transparent;color:var(--vl-color-danger)}
.vl-inline-card{border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-md);background:var(--vl-color-surface-alt);padding:13px}
.vl-inline-card--brand{background:var(--vl-color-brand-soft);border-color:var(--vl-color-border-strong)}

/* ---- Financial chart primitives (data ramp lives here, never in chrome) ---- */
.vl-timeline-card{border:1px solid var(--vl-color-border);border-radius:var(--vl-radius-lg);padding:var(--vl-space-4);background:var(--vl-color-surface);box-shadow:var(--vl-shadow-sm)}
.vl-timeline-bars{display:flex;align-items:flex-end;gap:5px;position:relative}
.vl-timeline-segment{width:100%}
.vl-allocation-bar{position:relative;height:12px;border-radius:var(--vl-radius-pill);background:var(--vl-color-surface-alt);overflow:hidden}
.vl-allocation-bar__fill{height:100%;background:var(--vl-data-1);border-radius:var(--vl-radius-pill)}

/* ---- Motion: signature reveal (blur→sharp) + reduced-motion respect ---- */
.vl-reveal{animation:vl-reveal var(--vl-dur-reveal) var(--vl-ease) both}
@keyframes vl-reveal{from{opacity:.35;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion: reduce){
  .vl-reveal{animation:none}
  .vl-btn,.vl-input,.vl-select,.vl-textarea{transition:none}
}


    /* Velmo Design System: local aliases -> semantic tokens (shared shell). */
    :root { --ink: var(--vl-color-text); --muted: var(--vl-color-text-soft); --line: var(--vl-color-border); --soft: var(--vl-color-surface-alt);
            --accent: var(--vl-color-brand); --accent-deep: var(--vl-color-brand-hover); --gold: var(--vl-warning); --red: var(--vl-color-danger);
            --paper: var(--vl-color-bg); --serif: var(--vl-font-serif); }
    * { box-sizing: border-box; }
    body { margin: 0; color: var(--ink); font: 16px/1.62 var(--vl-font-sans); background: var(--paper); -webkit-font-smoothing: antialiased; }
    ::selection { background: color-mix(in srgb, var(--accent) 16%, transparent); }
    a { color: var(--accent-deep); }
    main { width: min(940px, calc(100vw - 40px)); margin: 0 auto; padding: 52px 0 72px; }
    h1 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; }
    h2 { margin: 0 0 14px; font-size: 25px; line-height: 1.2; }
    h3 { margin: 18px 0 8px; font-size: 15px; letter-spacing: .01em; }
    section { border-top: 1px solid var(--line); padding: 28px 0; }
    .hero { padding: 16px 0 30px; }
    .hero p { max-width: 850px; margin: 0 0 18px; color: var(--muted); font-size: 18px; }
    /* Kicker sentence-case: hierarquia é corpo/peso, nunca caps/tracking. */
    .eyebrow { margin: 0 0 8px !important; color: var(--muted) !important; font-weight: 600; font-size: 13px; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .chips span { border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; color: var(--muted); background: var(--vl-color-surface); font-size: 14px; }
    .columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .facts { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 10px 18px; }
    .facts dt { color: var(--muted); font-weight: 700; }
    .facts dd { margin: 0; }
    ul { margin: 0; padding-left: 22px; }
    li { margin: 6px 0; }
    details { margin-top: 18px; border: 1px solid var(--line); background: var(--soft); padding: 12px 14px; }
    summary { cursor: pointer; font-weight: 700; }
    pre { overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--soft); border: 1px solid var(--line); padding: 14px; }
    /* Utilitários editoriais herdados (selo/legenda/prioridade). O scaffold
       .c360-* do relatório Wealth X-Ray saiu daqui (#1391): a feature foi
       removida em jun/2026 (#789) e o CSS seguia embarcado em TODA página
       client-facing sem nenhum consumidor. */
    .serif { font-family: var(--serif); }

    .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 18px 0 0; }
    .legend span { display: inline-flex; align-items: center; gap: 6px; }
    .legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .dot.d-fact { background: var(--ink); } .dot.d-hyp { background: var(--gold); } .dot.d-gap { background: var(--red); }
    /* Selos de procedência: resolvido é quieto (tinta), pendente carrega cor. */
    .tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
    .tag-fact { color: var(--muted); background: var(--soft); border: 1px solid var(--line); }
    .tag-hyp { color: var(--gold); background: var(--vl-color-warning-soft); border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--vl-color-warning-soft)); }
    .velmo-viz { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0; }

    @media (max-width: 760px) { main { width: min(100vw - 28px, 1080px); padding-top: 24px; }
      .columns, .facts { grid-template-columns: 1fr; }
 }