/* O widget `documento` (FeitoWeb.Widgets.Documento, docs/telas.md §2). O texto de um artigo da base de conhecimento
   (o Markdown desenhado: os títulos, os parágrafos, as listas, as citações, o código, as tabelas, os links e os blocos
   de arquivo) e o trecho de uma busca (as palavras achadas em <mark>). Novo (base de conhecimento, 26/10/2026), com o
   prefixo .documento: o texto na largura boa de ler, o título do Markdown dois níveis abaixo (o # é h3), a tabela que
   rola de lado sem empurrar a página. Regra (docs/telas.md §4, o teste test/feito_web/widgets_regra_test.exs): cor só
   por token (var(--…), com a cor de hoje como reserva); cor nova é token novo, no style.css (claro) e no temas.css
   (escuro e acrílico). Ligado no layout raiz logo depois do style.css (FeitoWeb.Widgets.folhas/0): as camadas da casca
   (visual.css, componentes.css, navegacao.css, temas.css, fonte.css e a escala gerada por `mix casca.escala`) vestem
   por cima, como vestem tudo. Mudou este arquivo: `mix casca.escala` (o ./servidor faz sozinho). */

.documento { max-width: 760px; min-width: 0; color: var(--tinta); line-height: 1.6; overflow-wrap: anywhere; }
.documento > :first-child { margin-top: 0; }
/* o texto depois dos botões do cartão (o trecho da busca, numa célula, não) */
.documento:not(.documento-trecho):not(:first-child) { margin-top: var(--v-esp-3, 12px); }
.documento > :last-child { margin-bottom: 0; }
.documento-vazio { color: var(--suave); font-style: italic; }

/* os títulos do texto (o # do Markdown é o h3: a página e o título do artigo vêm antes) */
.documento h3, .documento h4, .documento h5, .documento h6 { margin: var(--v-esp-4, 16px) 0 var(--v-esp-2, 8px);
  color: var(--tinta); line-height: 1.3; }
.documento h3 { font-size: 1.3rem; }
.documento h4 { font-size: 1.12rem; }
.documento h5 { font-size: 1rem; }
.documento h6 { font-size: .92rem; color: var(--suave); }

.documento p, .documento ul, .documento ol, .documento blockquote, .documento pre, .documento-tabela {
  margin: 0 0 var(--v-esp-3, 12px); }
.documento ul, .documento ol { padding-left: 1.5em; }
.documento li + li { margin-top: 2px; }
.documento li > ul, .documento li > ol { margin: 2px 0 0; }
.documento-item-tarefa { list-style: none; margin-left: -1.3em; }
.documento-tarefa { display: inline-grid; place-items: center; width: 1em; height: 1em; margin-right: 4px;
  border: 1px solid var(--linha); border-radius: 3px; vertical-align: -2px; font-size: .9em; line-height: 1; }
.documento-tarefa.feita { border-color: var(--verde); background: var(--verde); color: var(--e-sobre-cor, #fff); }

.documento blockquote { padding: 2px 0 2px var(--v-esp-3, 12px); border-left: 3px solid var(--linha);
  color: var(--suave); }
.documento hr { margin: var(--v-esp-4, 16px) 0; border: 0; border-top: 1px solid var(--linha); }
.documento a { color: var(--azul); text-decoration: underline; }
.documento img { display: block; max-width: 100%; height: auto; margin: var(--v-esp-2, 8px) 0;
  border-radius: var(--v-raio-ctrl, 6px); }

/* o código: a linha (a crase) e o bloco (as cercas), que rola de lado */
.documento code { padding: 1px 5px; border-radius: 4px; background: var(--e-sutil, #eef1f0);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.documento pre { overflow-x: auto; padding: var(--v-esp-3, 12px); border: 1px solid var(--linha);
  border-radius: var(--v-raio-ctrl, 6px); background: var(--e-sutil, #eef1f0); line-height: 1.45; }
.documento pre code { padding: 0; background: none; font-size: .85rem; white-space: pre; }

/* a tabela do texto: a borda fina, o cabeçalho cinza; rola de lado na tela estreita */
.documento-tabela { overflow-x: auto; }
.documento-tabela table { border-collapse: collapse; min-width: 50%; font-size: .9rem; }
.documento-tabela th, .documento-tabela td { padding: 6px 10px; border: 1px solid var(--linha); text-align: left;
  vertical-align: top; }
.documento-tabela th { background: var(--v-cab, #f4f7f5); font-weight: 600; }
.documento-tabela .documento-centro { text-align: center; }
.documento-tabela .documento-direita { text-align: right; }

/* o arquivo do artigo no texto ([[image fileId=…]]): a pílula com o tipo, o nome e o tamanho */
.documento-anexo { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 10px;
  border: 1px solid var(--linha); border-radius: var(--v-raio-pilula, 999px); background: var(--e-cartao, #fff);
  color: var(--suave); font-size: .85rem; }
.documento-anexo b { color: var(--tinta); font-weight: 600; }
.documento-anexo.ausente { border-style: dashed; }
/* (frente D) a imagem do artigo desenhada pelo link temporário (só sem Bitrix24): a figura com a legenda e o «Baixar» */
.documento-imagem { margin: .9rem 0; }
.documento-imagem img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linha);
  border-radius: var(--raio); }
.documento-imagem figcaption { margin-top: .35rem; color: var(--suave); font-size: .82rem; }
.documento-baixar { font-weight: 600; }

/* o trecho da busca: uma linha corrida, as palavras achadas marcadas */
.documento-trecho { max-width: none; color: var(--suave); font-size: .88rem; line-height: 1.5; }
.documento-trecho mark { padding: 0 2px; border-radius: 3px; background: var(--amarelo-f); color: var(--tinta);
  font-weight: 600; }