/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENTO — abas Tese e Trimestre da página do ativo
   ═══════════════════════════════════════════════════════════════════════════
   Porte do specimen "Tese e Trimestre.html" (projeto de design). A mudança de
   fundo é que as duas abas deixam de ser uma GRADE DE CARDS e viram um
   documento com ordem: numeral + título por seção, prosa em serifa, e uma
   faixa de números ancorando o texto nos dados que ele comenta.

   O que a grade de cards não conseguia dizer:
   - ORDEM. Nove caixas de mesmo peso não têm começo nem fim; o leitor escolhe
     a ordem e o argumento se perde. A numeração 01..04 é o que transforma as
     caixas num encadeamento.
   - CONCLUSÃO. "Valor a destravar" abria a tese, ou seja, abria pela resposta;
     agora fecha, depois de estabelecidos negócio, fosso e risco.
   - RESPOSTA. A aba Trimestre não tinha onde dizer se o trimestre foi bom. O
     veredito e o resumo (migration 0049) existem por causa deste specimen.

   Tokens (--paper/--ink/--rule/--verde/--vermelho) vêm do :root do base.html.
   Tudo aqui é escopado em `.doc` — `.lede`, `.prosa` e `.itens` são nomes
   genéricos demais para viverem soltos numa folha global.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc {
  max-width: 53rem;
  color: var(--ink);
  padding-bottom: 28px;
}

/* ── Abertura ───────────────────────────────────────────────────────────────
   A frase que define a empresa (ou o trimestre) antes de qualquer número.
   Medida curta de propósito: é para ser lida de uma vez, como uma legenda. */
.doc .lede {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.32rem; line-height: 1.5; font-weight: 400;
  color: var(--ink); margin: 16px 0 0; max-width: 34ch;
}
.doc .lede:empty { display: none; }

/* ── Prosa ──────────────────────────────────────────────────────────────────
   Serifa e medida de 34em, como a tela de estudo: os campos narrativos da tese
   são texto para ler, não rótulos de interface. Vem do filtro `em_paragrafos`
   (um <p> por parágrafo), e não do `em_itens` — prosa quebrada em um marcador
   por frase vira lista de afirmações soltas e perde o encadeamento. */
.doc .prosa {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17.5px; line-height: 1.65; color: var(--ink);
  max-width: 34em; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto;
}
.doc .prosa p { margin: 0 0 1.1em; }
.doc .prosa p:last-child { margin-bottom: 0; }
.doc .prosa strong { font-weight: 600; }
.doc .prosa em { font-style: italic; color: var(--ink-soft); }

/* ── Seção ──────────────────────────────────────────────────────────────────
   Numeral + título com filete acima. O numeral é o que dá ordem ao conjunto —
   sem ele são caixas em sequência arbitrária. */
.doc .sec { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.doc .sec-top { display: flex; align-items: baseline; gap: 11px; margin-bottom: 14px; }
.doc .sec-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; color: var(--gold); letter-spacing: .04em;
}
.doc .sec-h {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink); margin: 0;
}
.doc .sec-hint {
  font-size: 11px; color: var(--ink-faint);
  margin: -8px 0 15px; max-width: 52ch; line-height: 1.5;
}

/* ── Faixa de números ───────────────────────────────────────────────────────
   Ancora a prosa nos dados de que ela fala. A tese antiga não mostrava um
   número sequer: flutuava solta da valuation que ela justifica. */
.doc .nums {
  display: flex; gap: 30px; flex-wrap: wrap; padding: 17px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 24px 0 0;
}
.doc .nums > div { min-width: 7.5em; }
.doc .nums .n {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; color: var(--ink);
}
.doc .nums .n .un { font-size: .6em; font-weight: 600; }
.doc .nums .n.g { color: var(--gold); }
.doc .nums .l {
  font-size: 10px; font-weight: 700; letter-spacing: .055em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 7px;
}
.doc .nums .s { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

/* A SETA diz se subiu, a COR diz se é boa notícia. Sinistralidade caindo é ▼ e
   verde ao mesmo tempo; um glifo só não daria conta das duas informações. */
.doc .delta { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.doc .delta.bom  { color: var(--verde); }
.doc .delta.ruim { color: var(--vermelho); }

/* ── Listas paralelas ───────────────────────────────────────────────────────
   Único momento de duas colunas: fossos e riscos (ou fortes e fracos) se leem
   EM PAR, não em sequência. Tudo o mais na página é uma coluna só. */
.doc .par { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.doc .par-h {
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 12px;
}

/* ── Declarado × praticado ──────────────────────────────────────────────────
   Os dois números com o MESMO peso tipográfico. Enquanto o praticado era um
   número pequeno no canto do card, a divergência — que é o conteúdo — não se
   lia. Ver a seção "Card Política de Dividendos" do AGENTS.md. */
.doc .dupla {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;
  margin: 20px 0 0; padding: 18px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.doc .dupla .lado .l {
  font-size: 10px; font-weight: 700; letter-spacing: .055em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.doc .dupla .lado .v {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  letter-spacing: -.025em; color: var(--ink);
}
.doc .dupla .lado .s { font-size: 11px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.doc .dupla .vs {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── Fecho ──────────────────────────────────────────────────────────────────
   A conclusão, no fim. É o argumento que só convence depois de estabelecidos
   negócio, fosso e risco — abrir com ele é abrir pela resposta. */
.doc .fecho {
  margin: 40px 0 0; padding: 22px 24px;
  background: var(--gold-bg); border: 1px solid var(--gold-border); border-radius: 11px;
}
.doc .fecho .l {
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.doc .fecho .prosa { max-width: 36em; }

.doc .stamp {
  margin: 36px 0 0; padding-top: 15px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--ink-faint); line-height: 1.6;
}
.doc .stamp a { color: var(--gold); text-decoration: none; }

/* ── Trimestre: veredito ────────────────────────────────────────────────────
   Responde "o trimestre foi bom?" antes de o leitor percorrer campo nenhum. */
.doc .verdict {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.doc .v-acima  { background: oklch(93% 0.06 142); color: oklch(33% 0.13 142); }
.doc .v-abaixo { background: oklch(94% 0.05 30);  color: oklch(38% 0.16 30); }
.doc .v-linha  { background: var(--surface-alt);  color: var(--text-muted); }
.doc .v-misto  { background: var(--gold-bg);      color: var(--gold); }
body.dark .doc .v-acima  { background: oklch(26% 0.08 142); color: oklch(76% 0.14 142); }
body.dark .doc .v-abaixo { background: oklch(26% 0.08 30);  color: oklch(78% 0.13 30); }

/* ── Trimestre: adiante ─────────────────────────────────────────────────────
   Guidance, catalisadores e projetos são FATOS declarados pela companhia, não
   avaliação. Tratamento visual distinto de propósito: informação com data não
   se lê com o mesmo olho que julgamento. */
.doc .trilha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin-top: 6px;
}
.doc .trilha > div { background: var(--paper); padding: 16px 18px; }
.doc .trilha .t {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 9px;
}
.doc .trilha .t .ic { color: var(--gold); font-size: 12px; }

/* ── Cerca de staff ─────────────────────────────────────────────────────────
   O conteúdo interno era um card tracejado no meio do fluxo do assinante.
   Agrupado numa faixa única e rotulada, fica claro o que é publicado e o que é
   bastidor — e some inteiro para quem não é staff. */
.doc .interno {
  margin: 40px 0 0; padding: 18px 20px;
  border: 1px dashed var(--ink-faint); border-radius: 11px;
  background: color-mix(in oklch, var(--surface-alt) 55%, transparent);
}
.doc .interno-h { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; flex-wrap: wrap; }
.doc .interno-h .l {
  font-size: 10px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.doc .interno-h .p { font-size: 10px; color: var(--ink-faint); font-style: italic; }
.doc .interno-campo { margin-top: 16px; }

@media (max-width: 760px) {
  .doc .par, .doc .dupla { grid-template-columns: 1fr; gap: 24px; }
  .doc .dupla .vs { display: none; }
  .doc .lede { font-size: 1.15rem; max-width: none; }
  .doc .nums { gap: 22px; }
  .doc .prosa { font-size: 16.5px; }
}

/* ── Ponte com o editor inline ──────────────────────────────────────────────
   Os campos são renderizados por partials/campo_editavel.html, que já existia e
   é o que dá o ✎ ao staff. Aqui só se ajusta o encaixe: sem rótulo (quem titula
   é o <h2> numerado da seção) e sem margem dupla.

   A lede é um campo como os outros — mas vestido de abertura. Escrever as
   regras aqui, e não uma classe .lede solta no HTML, é o que mantém a frase
   editável pelo mesmo caminho de todo o resto. */
.doc .lede-campo .prosa {
  font-size: 1.32rem; line-height: 1.5; max-width: 34ch; color: var(--ink);
}
.doc .lede-campo { margin-top: 14px; }
.doc .sec .campo-edit-corpo { margin-top: 0; }
.doc .trilha .campo-edit { margin: 0; }
.doc .interno .campo-edit .card-label { color: var(--ink-soft); }