/* ═══════════════════════════════════════════════════════════════════
   PAPEL TIMBRADO — 10 modelos (v2.19.0-nutriflow.5)

   O QUE ESTE ARQUIVO RESOLVE

   Até aqui todo documento impresso do painel — plano, treino,
   prescrição, exames, proposta — saía com o MESMO cabeçalho: logo
   centralizada, nome, uma linha de apoio. Funcionava, mas era o
   cabeçalho do sistema, não o papel timbrado dela. E papel timbrado é
   coisa pessoal: é o que o paciente leva para casa, mostra no
   laboratório e guarda numa pasta.

   Aqui estão dez modelos de verdade, cada um com uma ideia própria de
   como a identidade ocupa a folha. A profissional escolhe um, ajusta a
   cor, escolhe quais linhas aparecem, e pronto — todos os documentos
   dela passam a sair assim.

   COMO ESTÁ ORGANIZADO

   A MARCAÇÃO é sempre a mesma (a monta `71_timbre.js`): o cabeçalho
   tem `.tb-cab` com `.tb-marca` (logo + identidade) e `.tb-contato`; o
   rodapé tem `.tb-rod` com `.tb-ass` (assinatura e carimbo),
   `.tb-rod-contato` e `.tb-legal`. O que muda de um modelo para o
   outro é SÓ o CSS, escolhido por `[data-timbre="…"]` na folha.

   Marcação igual para dez visuais diferentes não é economia: é o que
   permite trocar de modelo sem reimprimir nada, sem migrar dado e sem
   que um documento antigo quebre.

   MEDIDA DE PAPEL, NÃO DE TELA

   A `.folha` do sistema mede 460 px de largura. Na tela isso é uma
   prévia; no papel, o navegador reescalava e as margens saíam
   imprevisíveis. Aqui a folha com timbre passa a ter medida de papel
   (210 mm) e `@page` declarado — que até esta versão não existia em
   lugar nenhum do projeto.

   TINTA

   Nenhum modelo pinta a folha inteira. Fundo colorido em documento
   impresso é gasto de tinta, atravessa o papel e, em impressora
   doméstica, sai borrado. O que existe é traço, filete, faixa estreita
   e, no máximo, um bloco de rodapé. A cor é uma só — a que ela
   escolher — e entra por `--tb-cor`.
   ═══════════════════════════════════════════════════════════════════ */

/* ── a folha ──────────────────────────────────────────────────────
   `[data-timbre]` é o interruptor: sem ele, nada nesta folha muda e o
   documento continua exatamente como era antes desta versão. */
.folha[data-timbre] {
  --tb-cor: #5B5FE0;
  /* preto ou branco, escolhido por luminância em `timbreSobreCor()`.
     Escrever SEMPRE em branco fazia o nome sumir quando a cor era
     clara: um amarelo dava 1,29:1 de contraste. */
  --tb-sobre-cor: #FFFFFF;
  --tb-tinta: #1A1A1F;
  --tb-cinza: #5A5A66;
  --tb-linha: #DCDCE4;
  --tb-margem-t: 18mm;
  --tb-margem-l: 18mm;
  --tb-margem-b: 16mm;
  color: var(--tb-tinta);
  background: #FFF;
  position: relative;
  box-sizing: border-box;
  padding: var(--tb-margem-t) var(--tb-margem-l) var(--tb-margem-b);
  /* a prévia na tela encolhe; a medida de papel vale na impressão */
  max-width: 210mm;
  font-family: var(--tb-fonte, inherit);
}

/* ── cabeçalho, estrutura comum ───────────────────────────────── */
.folha[data-timbre] .tb-cab { margin-bottom: 9mm; }
.folha[data-timbre] .tb-marca { display: flex; align-items: center; gap: 12px; }
.folha[data-timbre] .tb-logo { max-height: 17mm; max-width: 52mm; object-fit: contain; display: block; }
.folha[data-timbre] .tb-mono {
  width: 15mm; height: 15mm; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tb-cor); color: #FFF; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.folha[data-timbre] .tb-id { min-width: 0; }
.folha[data-timbre] .tb-nome { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.folha[data-timbre] .tb-titulo { font-size: 10.5px; color: var(--tb-cinza); line-height: 1.5; }
.folha[data-timbre] .tb-reg { font-size: 10.5px; color: var(--tb-cinza); line-height: 1.5; font-variant-numeric: tabular-nums; }
.folha[data-timbre] .tb-esp { font-size: 10.5px; color: var(--tb-cinza); line-height: 1.5; }
.folha[data-timbre] .tb-contato { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 9.5px; color: var(--tb-cinza); line-height: 1.6; }
.folha[data-timbre] .tb-contato .tb-c { white-space: nowrap; }

/* ── corpo ────────────────────────────────────────────────────── */
.folha[data-timbre] .tb-corpo { min-height: 60mm; }
.folha[data-timbre] .tb-titulo-doc {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; margin: 0 0 6mm; color: var(--tb-tinta);
}
.folha[data-timbre] .tb-paciente {
  display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: baseline;
  border: 1px solid var(--tb-linha); border-radius: 4px; padding: 7px 10px; margin-bottom: 6mm; font-size: 10.5px;
}
.folha[data-timbre] .tb-paciente b { font-size: 12px; }
.folha[data-timbre] .tb-paciente .tb-rot { color: var(--tb-cinza); font-size: 9.5px; }

/* ── rodapé, estrutura comum ──────────────────────────────────── */
.folha[data-timbre] .tb-rod { margin-top: 10mm; }
.folha[data-timbre] .tb-ass { text-align: center; margin: 14mm auto 0; max-width: 78mm; }
.folha[data-timbre] .tb-ass-linha { border-top: 1px solid var(--tb-tinta); margin-bottom: 4px; }
.folha[data-timbre] .tb-ass-nome { font-size: 11px; font-weight: 600; line-height: 1.4; }
.folha[data-timbre] .tb-ass-reg { font-size: 9.5px; color: var(--tb-cinza); line-height: 1.5; }
.folha[data-timbre] .tb-ass-carimbo {
  margin-top: 5mm; border: 1px dashed var(--tb-linha); border-radius: 4px;
  height: 16mm; display: flex; align-items: center; justify-content: center;
  font-size: 8.5px; color: #9A9AA6; letter-spacing: .08em; text-transform: uppercase;
}
.folha[data-timbre] .tb-rod-contato { display: none; }

/* ── assinatura e carimbo em imagem (v2.19.0-nutriflow.7) ─────────
   A assinatura fica ACIMA da linha, encostada nela — é onde a caneta
   encosta no papel. `margin-bottom` negativo aproxima o traço da linha
   sem mexer na altura do bloco.
   `print-color-adjust: exact` porque o navegador, na impressão, clareia
   imagem por economia de tinta: uma assinatura azul-clara sai quase
   invisível sem isto. */
.folha[data-timbre] .tb-ass-img,
.folha[data-timbre] .tb-ass-carimbo-img {
  display: block; margin-left: auto; margin-right: auto;
  /* 150 mm, não 100 % dos 78 mm do bloco. Com 78 mm, uma assinatura
     larga (6:1, que é o que sai de uma prancheta de 560 × 190) batia no
     teto de largura, o `object-fit` a encolhia por dentro da caixa, e o
     controle de altura passava a mentir: a caixa crescia até 40 mm e a
     tinta ficava nos mesmos 15 mm. A folha tem 174 mm úteis. */
  max-width: 150mm; width: auto;
  object-fit: contain;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre] .tb-ass-img { margin-bottom: -2mm; }
.folha[data-timbre] .tb-ass-carimbo-img { margin-top: 4mm; }
/* com imagem, o bloco de assinatura começa mais cedo (a margem de 14 mm
   existia para dar espaço à caneta) e pode passar dos 78 mm de largura */
.folha[data-timbre] .tb-ass-com-img { margin-top: 8mm; max-width: 150mm; }

/* ── duas assinaturas lado a lado (v2.19.0-nutriflow.24) ──────────
   O treino sai assinado pela nutricionista (CRN) e pelo profissional de
   Educação Física (CREF). Cada bloco fica com metade da largura útil;
   as imagens encolhem para caber em 80 mm, sem mudar a altura pedida. */
.folha[data-timbre] .tb-ass-duas { display: flex; gap: 10mm; justify-content: space-between; align-items: flex-end; }
.folha[data-timbre] .tb-ass-duas > .tb-ass { flex: 1 1 0; min-width: 0; max-width: none; margin-left: 0; margin-right: 0; }
.folha[data-timbre] .tb-ass-duas .tb-ass-img,
.folha[data-timbre] .tb-ass-duas .tb-ass-carimbo-img { max-width: 80mm; }
.folha[data-timbre="rodape"] .tb-ass-duas { order: 1; }

/* ── QR de validação (v2.19.0-nutriflow.6) ────────────────────────
   Ao lado da assinatura, que é onde quem confere já está olhando. O QR
   tem 22 mm: abaixo de 20 mm, câmera de celular antigo em papel
   impresso a laser começa a errar, e este papel vai ser lido num balcão
   de laboratório, não num estúdio. */
.folha[data-timbre] .tb-val {
  margin: 8mm auto 0; max-width: 120mm;
  display: flex; align-items: flex-start; gap: 5mm;
  padding-top: 4mm; border-top: 1px solid var(--tb-linha);
}
.folha[data-timbre] .tb-val-qr { flex: none; width: 22mm; height: 22mm; }
.folha[data-timbre] .tb-val-qr svg { width: 100%; height: 100%; display: block; }
/* `overflow-wrap` porque o endereço do consultório pode ser bem mais
   comprido que o do teste, e a coluna ao lado do QR tem menos de 100 mm */
.folha[data-timbre] .tb-val-txt { min-width: 0; overflow-wrap: anywhere; }
.folha[data-timbre] .tb-val-rot {
  font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-cinza); margin-bottom: 2px;
}
.folha[data-timbre] .tb-val-cod {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  color: var(--tb-tinta); line-height: 1.2;
}
.folha[data-timbre] .tb-val-como { margin: 3px 0 0; font-size: 8.5px; line-height: 1.5; color: var(--tb-cinza); }
/* A frase que separa conferência de assinatura é a mais importante do
   bloco — é ela que evita a confusão que obrigou Memed e ProDoctor a
   publicar artigo de ajuda depois do estrago. Estava em 7,5 px e #8A8A96:
   3,4:1 de contraste, abaixo do mínimo de 4,5:1. A frase que mais precisa
   ser lida não pode ser a menos legível do papel. */
.folha[data-timbre] .tb-val-nota { margin: 3px 0 0; font-size: 8px; line-height: 1.5; color: var(--tb-cinza); }

/* v29 (A6-06) — o QR AO LADO da assinatura, como o comentário acima
   sempre disse e o CSS nunca fez: ele saía EMBAIXO, somava ~30 mm ao pé
   e, num receituário de um suplemento e dois exames, empurrava a base
   legal e o aviso de sigilo para uma 2ª folha sozinhos (9 dos 10
   modelos). Com UMA assinatura, as duas colunas dividem a mesma faixa;
   com duas assinaturas (treino) nada muda — o QR continua embaixo. */
.folha[data-timbre] .tb-rod:has(> .tb-val):has(> .tb-ass) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8mm; align-items: center;
}
.folha[data-timbre] .tb-rod:has(> .tb-val):has(> .tb-ass) > * { grid-column: 1 / -1; }
.folha[data-timbre] .tb-rod:has(> .tb-val):has(> .tb-ass) > .tb-ass { grid-column: 1; grid-row: 1; width: 100%; }
.folha[data-timbre] .tb-rod:has(> .tb-val):has(> .tb-ass) > .tb-val {
  grid-column: 2; grid-row: 1; margin: 14mm 0 0; max-width: none;
  border-top: 0; padding-top: 0; padding-left: 5mm; border-left: 1px solid var(--tb-linha);
}

.folha[data-timbre] .tb-legal {
  margin-top: 8mm; padding-top: 4mm; border-top: 1px solid var(--tb-linha);
  font-size: 8px; line-height: 1.55; color: #7A7A86; text-align: justify;
}
.folha[data-timbre] .tb-legal p { margin: 0 0 3px; }
.folha[data-timbre] .tb-legal p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   1 · CLÁSSICO
   Tudo centralizado, um filete fino embaixo. É o timbrado que toda
   clínica já teve: ninguém estranha, ninguém repara — e é exatamente
   esse o ponto de um documento que precisa ser aceito no balcão.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="classico"] .tb-marca { flex-direction: column; text-align: center; gap: 7px; }
.folha[data-timbre="classico"] .tb-logo { margin: 0 auto; }
.folha[data-timbre="classico"] .tb-nome { font-size: 17px; letter-spacing: .01em; }
.folha[data-timbre="classico"] .tb-contato { justify-content: center; margin-top: 7px; }
.folha[data-timbre="classico"] .tb-cab {
  border-bottom: 1px solid var(--tb-linha); padding-bottom: 5mm;
  box-shadow: 0 2px 0 -1px var(--tb-cor);
}

/* ═══════════════════════════════════════════════════════════════
   2 · INSTITUCIONAL
   Identidade à esquerda, contatos alinhados à direita, um traço
   grosso na cor embaixo. É o formato que parece papel de empresa —
   bom para quem atende convênio e emite muito documento.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="institucional"] .tb-cab {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  border-bottom: 2.5pt solid var(--tb-cor); padding-bottom: 4mm;
}
.folha[data-timbre="institucional"] .tb-contato { flex-direction: column; text-align: right; gap: 1px; flex: none; }

/* ═══════════════════════════════════════════════════════════════
   3 · FAIXA
   Uma tarja na cor atravessa o topo com o nome em branco. É o mais
   marcante dos dez — e o único que gasta tinta de propósito, porque
   quem escolhe este modelo quer ser reconhecida de longe.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="faixa"] { padding-top: 0; }
.folha[data-timbre="faixa"] .tb-cab {
  background: var(--tb-cor); color: #FFF;
  margin: 0 calc(var(--tb-margem-l) * -1) 8mm;
  padding: 7mm var(--tb-margem-l) 6mm;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre="faixa"] .tb-nome,
.folha[data-timbre="faixa"] .tb-titulo,
.folha[data-timbre="faixa"] .tb-reg,
.folha[data-timbre="faixa"] .tb-esp,
.folha[data-timbre="faixa"] .tb-contato { color: var(--tb-sobre-cor, #FFF); }
.folha[data-timbre="faixa"] .tb-titulo,
.folha[data-timbre="faixa"] .tb-reg,
.folha[data-timbre="faixa"] .tb-esp,
.folha[data-timbre="faixa"] .tb-contato { opacity: .88; }
.folha[data-timbre="faixa"] .tb-mono { background: rgba(127,127,127,.28); color: var(--tb-sobre-cor, #FFF); }
.folha[data-timbre="faixa"] .tb-contato { flex-direction: column; text-align: right; gap: 1px; flex: none; }
.folha[data-timbre="faixa"] .tb-titulo-doc { color: var(--tb-cor); }

/* ═══════════════════════════════════════════════════════════════
   4 · LATERAL
   Uma barra estreita na cor desce pela borda esquerda, de cima a
   baixo da página. O texto recua e ganha ar. Fica elegante em folha
   com pouco conteúdo — um pedido de exame, por exemplo.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="lateral"] { --tb-margem-l: 24mm; padding-left: var(--tb-margem-l); }
.folha[data-timbre="lateral"]::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6mm;
  background: var(--tb-cor);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre="lateral"] .tb-cab { border-bottom: 1px solid var(--tb-linha); padding-bottom: 4mm; }
.folha[data-timbre="lateral"] .tb-contato { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════
   5 · ESSENCIAL
   Sem traço nenhum. Nome em caixa alta espaçada, logo pequena, muito
   branco. É o modelo para quem acha que papel timbrado bonito é o que
   não se nota — e para quem imprime em impressora preto e branco.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="essencial"] { --tb-margem-t: 24mm; --tb-margem-l: 22mm; }
.folha[data-timbre="essencial"] .tb-marca { flex-direction: column; align-items: flex-start; gap: 9px; }
.folha[data-timbre="essencial"] .tb-logo { max-height: 12mm; }
.folha[data-timbre="essencial"] .tb-nome {
  font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
}
.folha[data-timbre="essencial"] .tb-titulo,
.folha[data-timbre="essencial"] .tb-reg,
.folha[data-timbre="essencial"] .tb-esp { font-size: 9.5px; letter-spacing: .04em; }
.folha[data-timbre="essencial"] .tb-contato { margin-top: 8px; font-size: 9px; letter-spacing: .02em; }
.folha[data-timbre="essencial"] .tb-cab { margin-bottom: 12mm; }
.folha[data-timbre="essencial"] .tb-titulo-doc { text-align: left; letter-spacing: .18em; }
.folha[data-timbre="essencial"] .tb-paciente { border: 0; border-left: 2px solid var(--tb-cor); border-radius: 0; padding-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   6 · MOLDURA
   Um fio fino contorna a folha inteira e o nome se apoia na borda de
   cima. Dá cara de certificado — combina com laudo, relatório e
   declaração, documentos que a pessoa guarda.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="moldura"] { --tb-margem-t: 16mm; --tb-margem-l: 16mm; --tb-margem-b: 16mm; }
.folha[data-timbre="moldura"]::before {
  content: ''; position: absolute; inset: 7mm; border: 1px solid var(--tb-cor);
  border-radius: 2px; pointer-events: none;
}
.folha[data-timbre="moldura"] .tb-cab {
  position: relative; text-align: center; padding-bottom: 4mm; margin-bottom: 8mm;
}
.folha[data-timbre="moldura"] .tb-marca { flex-direction: column; text-align: center; gap: 6px; }
.folha[data-timbre="moldura"] .tb-logo { margin: 0 auto; }
.folha[data-timbre="moldura"] .tb-contato { justify-content: center; margin-top: 6px; }
.folha[data-timbre="moldura"] .tb-cab::after {
  content: ''; display: block; width: 22mm; height: 1px; background: var(--tb-cor); margin: 4mm auto 0;
}

/* ═══════════════════════════════════════════════════════════════
   7 · BOTÂNICO
   Uma folha desenhada, bem clara, no canto superior direito, e tons
   quentes. É o modelo mais "consultório de nutrição" dos dez — e o
   desenho é vetorial, então não borra nem pesa no arquivo.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="botanico"] { --tb-cor: #5C8A5E; }
.folha[data-timbre="botanico"]::after {
  content: ''; position: absolute; top: 6mm; right: 6mm; width: 38mm; height: 38mm;
  opacity: .13; pointer-events: none;
  background: var(--tb-cor);
  -webkit-mask: var(--tb-folha-svg) center/contain no-repeat;
  mask: var(--tb-folha-svg) center/contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre="botanico"] .tb-cab { border-bottom: 1px solid var(--tb-cor); padding-bottom: 4mm; }
.folha[data-timbre="botanico"] .tb-nome { color: #2F4A31; }
.folha[data-timbre="botanico"] .tb-contato { margin-top: 6px; }
.folha[data-timbre="botanico"] .tb-titulo-doc { color: #2F4A31; }

/* ═══════════════════════════════════════════════════════════════
   8 · MONOGRAMA
   Um círculo na cor com as iniciais, e a identidade ao lado. Serve
   para quem ainda não tem logo — o monograma é montado com as
   iniciais do nome e já parece marca.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="monograma"] .tb-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-bottom: 4mm; border-bottom: 1px solid var(--tb-linha);
}
.folha[data-timbre="monograma"] .tb-mono { width: 17mm; height: 17mm; font-size: 17px; }
.folha[data-timbre="monograma"] .tb-logo { max-height: 17mm; }
.folha[data-timbre="monograma"] .tb-contato { flex-direction: column; text-align: right; gap: 1px; flex: none; }
.folha[data-timbre="monograma"] .tb-ass-linha { border-top-color: var(--tb-cor); }

/* ═══════════════════════════════════════════════════════════════
   9 · COLUNAS
   Logo e nome à esquerda, contatos numa coluna à direita, separados
   por um fio vertical. Bom para quem tem muito contato para mostrar
   (dois endereços, telefone, site, rede social).
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre="colunas"] .tb-cab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: center;
  padding-bottom: 5mm; border-bottom: 1px solid var(--tb-linha);
}
.folha[data-timbre="colunas"] .tb-contato {
  flex-direction: column; text-align: right; gap: 2px; flex: none;
  border-left: 1px solid var(--tb-linha); padding-left: 14px; align-self: stretch; justify-content: center;
}
.folha[data-timbre="colunas"] .tb-nome { font-size: 17px; }

/* ═══════════════════════════════════════════════════════════════
   10 · RODAPÉ
   O topo leva só o nome; toda a identidade — endereço, telefone,
   e-mail, registro — vai para um bloco no pé da página. Sobra muito
   espaço em cima para o conteúdo, que é o que importa num receituário
   comprido.
   ═══════════════════════════════════════════════════════════════ */
/* A faixa de identidade precisa ser a ÚLTIMA coisa da folha — é o que
   faz dela um rodapé, e não uma tarja perdida no meio. Duas coisas
   garantem isso: o rodapé vira coluna flexível com a ordem invertida
   (texto legal antes, faixa depois), e a folha inteira estica o corpo
   para empurrar o pé até a borda de baixo da página. */
.folha[data-timbre="rodape"] {
  --tb-margem-b: 0;
  display: flex; flex-direction: column;
}
.folha[data-timbre="rodape"] .tb-corpo { flex: 1 0 auto; }
.folha[data-timbre="rodape"] .tb-rod { display: flex; flex-direction: column; }
/* `order` EXPLÍCITO nos quatro filhos. O bloco do QR não tinha nenhum, e
   `order: 0` o jogava para a frente de todos: no Rodapé forte o QR saía
   42 mm ACIMA da assinatura, contrariando a razão de ele estar ali —
   quem confere ler a assinatura e a prova de autenticidade na mesma
   olhada. Declarar os quatro impede que a próxima adição repita o furo. */
.folha[data-timbre="rodape"] .tb-ass { order: 1; }
.folha[data-timbre="rodape"] .tb-val { order: 2; }
.folha[data-timbre="rodape"] .tb-legal { order: 3; }
.folha[data-timbre="rodape"] .tb-rod-contato { order: 4; }
.folha[data-timbre="rodape"] .tb-cab { padding-bottom: 3mm; border-bottom: 1px solid var(--tb-linha); }
.folha[data-timbre="rodape"] .tb-cab .tb-contato,
.folha[data-timbre="rodape"] .tb-cab .tb-esp { display: none; }
.folha[data-timbre="rodape"] .tb-cab .tb-titulo,
.folha[data-timbre="rodape"] .tb-cab .tb-reg { display: inline; margin-right: 8px; }
.folha[data-timbre="rodape"] .tb-rod-contato {
  display: block; margin-top: 6mm; margin-bottom: 0;
  background: var(--tb-cor); color: #FFF;
  margin-left: calc(var(--tb-margem-l) * -1); margin-right: calc(var(--tb-margem-l) * -1);
  padding: 4mm var(--tb-margem-l);
  font-size: 9px; line-height: 1.7; text-align: center;
  color: var(--tb-sobre-cor, #FFF);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre="rodape"] .tb-rod-contato .tb-c { display: inline; }
.folha[data-timbre="rodape"] .tb-rod-contato .tb-c + .tb-c::before { content: ' · '; opacity: .6; }
.folha[data-timbre="rodape"] .tb-legal { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   BLOCO DE SOLICITAÇÃO DE EXAMES
   Fica logo abaixo do nome do paciente, como pedido: a finalidade, a
   lista do que foi marcado e — sempre — um espaço em branco pautado
   para escrever à mão o que faltou. Um formulário que não deixa
   escrever à mão obriga a voltar ao computador.
   ═══════════════════════════════════════════════════════════════ */
.folha[data-timbre] .tb-exames { margin-bottom: 6mm; }
.folha[data-timbre] .tb-exames-fin {
  font-size: 10px; line-height: 1.55; color: var(--tb-cinza);
  border-left: 2px solid var(--tb-cor); padding-left: 8px; margin-bottom: 4mm;
}
.folha[data-timbre] .tb-exames-lista { margin: 0 0 4mm; padding: 0; list-style: none; }
.folha[data-timbre] .tb-exames-lista li {
  font-size: 11px; line-height: 1.7; padding: 1px 0 1px 16px; position: relative; break-inside: avoid;
}
.folha[data-timbre] .tb-exames-lista li::before {
  content: ''; position: absolute; left: 0; top: 4px;
  width: 9px; height: 9px; border: 1px solid var(--tb-cinza); border-radius: 2px;
}
.folha[data-timbre] .tb-exames-lista li .tb-ex-sig { color: var(--tb-cinza); font-size: 9.5px; }
/* o espaço em branco: linhas pautadas de verdade, para caber a
   caneta. A altura é regulável (`--tb-linhas`) porque nem todo pedido
   precisa de meia folha sobrando. */
.folha[data-timbre] .tb-exames-branco {
  border: 1px solid var(--tb-linha); border-radius: 4px; padding: 6px 10px 2px;
  min-height: calc(var(--tb-linhas, 6) * 7mm);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(7mm - 1px), var(--tb-linha) calc(7mm - 1px), var(--tb-linha) 7mm);
  background-position: 0 6px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.folha[data-timbre] .tb-exames-branco .tb-rot-branco {
  font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; color: #9A9AA6; margin-bottom: 2px;
}
.folha[data-timbre] .tb-exames-branco[contenteditable] { outline: none; }
.folha[data-timbre] .tb-exames-preparo {
  margin-top: 4mm; font-size: 9.5px; line-height: 1.6; color: var(--tb-cinza);
  background: #F7F7FA; border-radius: 4px; padding: 6px 9px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── seções do corpo, comuns a todos os documentos ───────────── */
.folha[data-timbre] .tb-sec { font-size: 11px; font-weight: 700; margin: 5mm 0 2mm; color: var(--tb-tinta); }
.folha[data-timbre] .tb-item {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 3px 0; border-bottom: 1px solid #F0F0F4; font-size: 11px; break-inside: avoid;
}
.folha[data-timbre] .tb-item .tb-item-sub { font-size: 9.5px; color: var(--tb-cinza); }
.folha[data-timbre] .tb-texto { font-size: 11px; line-height: 1.7; }
.folha[data-timbre] .tb-texto ul, .folha[data-timbre] .tb-texto ol { margin: 4px 0; padding-left: 18px; }
.folha[data-timbre] .tb-texto h1, .folha[data-timbre] .tb-texto h2,
.folha[data-timbre] .tb-texto h3, .folha[data-timbre] .tb-texto h4 { font-size: 11.5px; font-weight: 700; margin: 5mm 0 1mm; }
.folha[data-timbre] .tb-texto table { width: 100%; border-collapse: collapse; margin: 3mm 0; font-size: 10px; }
.folha[data-timbre] .tb-texto th, .folha[data-timbre] .tb-texto td { border: 1px solid var(--tb-linha); padding: 4px 6px; text-align: left; }
.folha[data-timbre] .tb-texto hr { border: 0; border-top: 1px solid var(--tb-linha); margin: 4mm 0; }

/* ── o que a profissional pode editar direto na folha ─────────── */
.folha[data-timbre] [contenteditable="true"] { outline: none; }
.folha.tb-editando [contenteditable="true"] {
  outline: 1px dashed rgba(91, 95, 224, .45); outline-offset: 3px; border-radius: 3px;
}
.folha.tb-editando [contenteditable="true"]:focus {
  outline: 2px solid var(--tb-cor); outline-offset: 3px; background: rgba(91, 95, 224, .04);
}
.folha.tb-editando [contenteditable="true"]:empty::before {
  content: attr(data-vazio); color: #B4B4C0; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   PRÉVIA DOS MODELOS na tela de escolha
   Miniatura em proporção de folha A4, com o desenho de cada modelo
   sugerido por blocos. É uma maquete: mostra a FORMA do modelo, não
   o conteúdo — e por isso não carrega texto de verdade.
   ═══════════════════════════════════════════════════════════════ */
.tb-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tb-opcao {
  border: 2px solid var(--linha); border-radius: 10px; background: var(--superficie);
  padding: 9px; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s;
  display: block; width: 100%;
}
.tb-opcao:hover { border-color: var(--roxo-cla, #B9BBF2); transform: translateY(-2px); }
.tb-opcao.on { border-color: var(--roxo, #5B5FE0); box-shadow: 0 0 0 3px rgba(91, 95, 224, .12); }
.tb-mini {
  aspect-ratio: 210 / 297; background: #FFF; border-radius: 4px; overflow: hidden;
  position: relative; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); margin-bottom: 8px;
  padding: 9% 9% 7%; box-sizing: border-box; font-size: 0;
}
.tb-mini i { display: block; background: #D8D8E2; border-radius: 1px; height: 3px; margin-bottom: 3px; }
.tb-mini i.g { height: 5px; background: #26262E; width: 62%; }
.tb-mini i.c { background: var(--tb-mini-cor, #5B5FE0); }
.tb-mini i.p { width: 40%; }
.tb-mini i.m { width: 72%; }
.tb-mini .tb-mini-corpo { margin-top: 9%; }
.tb-mini .tb-mini-corpo i { opacity: .55; }
.tb-opcao .tb-opcao-n { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tb-opcao .tb-opcao-d { font-size: 10.5px; color: var(--cinza); line-height: 1.45; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   IMPRESSÃO — o `@page` que faltava no projeto inteiro

   Sem `@page`, cada navegador aplica a margem que quiser (o Chrome
   usa ~10 mm, o Safari ~12 mm) e o modelo Faixa, que sangra até a
   borda, saía com uma moldura branca em volta da tarja. Aqui a margem
   do PAPEL é zero e quem dá a margem é a folha — que é o único jeito
   de um timbrado sangrar de propósito.
   ═══════════════════════════════════════════════════════════════ */
/* `@page` não tem escopo: declarado uma vez, vale para TODA impressão
   do painel, inclusive a de uma tela comum feita com Ctrl+P. Por isso a
   margem zero vem acompanhada de uma compensação: quando a página
   impressa NÃO tem documento aberto, o corpo devolve a margem que o
   navegador daria. Assim o documento sangra de propósito e a tela
   continua imprimindo com respiro. */
@page { size: A4 portrait; margin: 0; }
@media print {
  body:not(:has(.folha[data-timbre])) { padding: 10mm !important; box-sizing: border-box; }
}

@media print {
  .folha[data-timbre] {
    width: 210mm !important; max-width: none !important;
    /* 297 mm CRAVADOS somavam com a borda de arredondamento do navegador
       e cada impressão cuspia uma segunda folha em branco. Um milímetro a
       menos não se vê no papel e resolve — o rodapé do modelo "Rodapé
       forte" continua encostando no pé da página. */
    min-height: 296mm;
    box-shadow: none !important; border-radius: 0 !important; margin: 0 !important;
    padding-bottom: var(--tb-margem-b);
  }
  /* o embrulho do modal não pode acrescentar altura nenhuma */
  .veu:has(#folhaImp) .split-d,
  .veu:has(#folhaImp) .rc-palco-imp { display: block !important; gap: 0 !important; }
  .veu:has(#folhaImp) #rcBarraImp,
  .veu:has(#folhaImp) #rcBarraFolha { display: none !important; }
  /* a tarja, a barra lateral e o rodapé coloridos só existem se o
     navegador for autorizado a imprimir cor de fundo */
  .folha[data-timbre] .tb-cab,
  .folha[data-timbre] .tb-rod-contato,
  .folha[data-timbre]::before,
  .folha[data-timbre]::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* o tracejado do carimbo e a pauta do campo em branco são guias de
     tela; no papel a pauta ajuda a escrever, o tracejado atrapalha */
  .folha[data-timbre] .tb-ass-carimbo { border-style: solid; border-color: #E4E4EC; }
  .folha.tb-editando [contenteditable="true"] { outline: none !important; background: none !important; }
  /* nada de quebrar assinatura, carimbo, QR ou base legal no meio.
     O bloco do QR faltava nesta lista: um QR partido entre duas páginas
     não é lido por câmera nenhuma, e com o rodapé maior (assinatura +
     carimbo) ele passou a ser candidato real à quebra. */
  .folha[data-timbre] .tb-ass,
  .folha[data-timbre] .tb-ass-duas,
  .folha[data-timbre] .tb-val,
  .folha[data-timbre] .tb-legal,
  .folha[data-timbre] .tb-exames-preparo { break-inside: avoid; page-break-inside: avoid; }
  .folha[data-timbre] .tb-cab { break-after: avoid; page-break-after: avoid; }
  /* v29 (A6-06): o pé inteiro (assinatura, QR, base legal, sigilo) fica
     na mesma folha — a base legal não vai sozinha para a página seguinte */
  .folha[data-timbre] .tb-rod { break-inside: avoid; page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   O COMPOSITOR DO RECEITUÁRIO
   Duas colunas: à esquerda o que se preenche, à direita a folha. A
   folha da direita é o MESMO documento que vai sair — mesma marcação,
   mesmo modelo, mesma ordem —, mas encolhido para caber na coluna: ela
   ocupa a largura disponível, e não os 210 mm do papel. Quem quiser ver
   o tamanho real usa "Salvar e imprimir", que abre a folha no tamanho
   de papel. É nela, aqui, que a profissional escreve quando liga o modo
   de edição.
   ═══════════════════════════════════════════════════════════════ */
/* A janela do receituário é mais larga que as outras do sistema, e a
   folha fica com a maior parte: é nela que se confere o documento e é
   nela que se escreve. Com a janela de 880 px do padrão a prévia saía
   com 410 px — metade do papel —, e não dava para ler nada. */
.modal.m-rc { width: min(1340px, 100%); }
.rc-col { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); align-items: start; gap: 20px; }
.rc-esq { min-width: 0; }
.rc-dir { min-width: 0; position: sticky; top: 0; }
.rc-palco {
  background: var(--fundo-2); border-radius: 12px; padding: 14px;
  max-height: min(74vh, 980px); overflow: auto;
  /* a calha da barra de rolagem fica sempre reservada: sem isso, a
     barra que aparece quando a folha cresce estreita a coluna, a
     redução muda e a folha "pula" de tamanho no meio da digitação */
  scrollbar-gutter: stable;
}

/* ── a tela de assinatura e carimbo (v2.19.0-nutriflow.7) ─────────── */
.ass-caixa {
  border: 1px solid var(--linha-2); border-radius: 10px; min-height: 92px;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  /* xadrez leve: sem ele, um PNG transparente sobre fundo branco não
     mostra se o fundo do papel foi mesmo removido */
  background-image:
    linear-gradient(45deg, var(--fundo-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--fundo-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--fundo-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--fundo-2) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.ass-caixa.vazia { background-image: none; background: var(--fundo-2); border-style: dashed; text-align: center; }
.ass-caixa.foto { background-image: none; background: var(--fundo-2); }
.ass-caixa img { max-height: 110px; max-width: 100%; object-fit: contain; display: block; }
.ass-antes-depois { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
/* a prancheta: alta o bastante para caber uma assinatura de verdade e
   não virar um risco apertado */
.ass-tela {
  width: 100%; height: 190px; display: block;
  border: 1px dashed var(--linha); border-radius: 10px;
  background: var(--superficie); cursor: crosshair;
  touch-action: none;
}
@media (max-width: 560px) {
  .ass-antes-depois { grid-template-columns: 1fr; }
  .ass-tela { height: 160px; }
}

/* o controlo de tamanho da prévia: menos, o valor (que volta a
   "ajustar à largura" quando clicado) e mais */
.rc-zoombar { display: inline-flex; align-items: stretch; border: 1px solid var(--linha-2); border-radius: 8px; overflow: hidden; }
.rc-zoombar button {
  border: 0; background: transparent; cursor: pointer; padding: 0 9px;
  font: inherit; font-size: 12px; color: var(--tinta); line-height: 26px;
}
.rc-zoombar button + button { border-left: 1px solid var(--linha-2); }
.rc-zoombar button:hover { background: var(--fundo-2); }
.rc-zoombar #rcZoomN { min-width: 56px; font-variant-numeric: tabular-nums; color: var(--cinza); }
/* A prévia é a folha de 210 mm REDUZIDA, não a folha espremida.
   Espremer (largura 100 % da coluna, fonte menor) quebrava o
   cabeçalho: com 410 px de coluna, "Dra. Ana Beatriz Moraes" caía
   uma palavra por linha nos modelos de duas colunas, e a
   profissional via um timbrado torto que na impressão saía certo.
   Reduzindo por `scale`, a proporção é a mesma do papel: o que ela
   vê aqui é o que sai na impressora. */
.rc-zoom-cx { position: relative; overflow: hidden; }
.rc-zoom {
  width: 210mm;
  transform-origin: top left;
  transform: scale(var(--rc-k, .5));
}
.rc-palco .folha {
  width: 210mm; max-width: none; min-height: auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}
.rc-palco-imp {
  background: var(--fundo-2); margin: -18px -20px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}

/* lista de exames: grupos que abrem e fecham, para 85 exames caberem
   sem virar uma parede de caixas de seleção */
.rc-grupo { border-bottom: 1px solid var(--linha-2); }
.rc-grupo > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 2px; cursor: pointer; list-style: none;
}
.rc-grupo > summary::-webkit-details-marker { display: none; }
.rc-grupo > summary::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid var(--cinza); border-bottom: 1.5px solid var(--cinza);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.rc-grupo[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.rc-grupo > summary:hover { color: var(--roxo); }
.rc-grupo > div { padding: 0 0 8px 2px; }

.rc-ex { padding: 5px 6px; width: 100%; border-radius: 7px; align-items: flex-start; gap: 8px; }
.rc-ex:hover { background: var(--fundo-2); }
.rc-ex.on { background: var(--roxo-cla, #EEF0FE); }
.rc-ex input { margin-top: 2px; flex: none; }

/* ── celular ──────────────────────────────────────────────────────
   Numa tela de 390 px não existe "lado a lado": a folha vai para
   baixo, e o palco deixa de ser grudento — folha grudenta em tela
   pequena come metade do que se está preenchendo. */
@media (max-width: 900px) {
  .rc-col { grid-template-columns: minmax(0, 1fr); }
  .rc-dir { position: static; }
  .rc-palco { max-height: none; }
  .tb-grade { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
  /* Os quatro tipos de documento somam 401 px lado a lado e a tela tem
     390: em vez de deixar o seletor vazar (ou virar uma barra que rola
     de lado, onde o quarto item fica escondido), viram dois por linha —
     escolher o tipo é a PRIMEIRA decisão do receituário, e o que está
     fora da tela não é escolhido. */
  #rcTipo { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  #rcTipo button { padding: 8px 6px; }
  /* a linha de adicionar item também não cabe em quatro colunas */
  #rcAddLinha { grid-template-columns: 1fr 1fr; }
  #rcAddLinha #rcN { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAPEL TIMBRADO PRÓPRIO (v2.19.0-nutriflow.8)

   A profissional envia a arte dela (PDF, JPEG, PNG ou foto do papel) e
   o sistema a usa como a folha inteira. `data-timbre="proprio"` não é
   um décimo-primeiro modelo: é o interruptor que desliga os dez de uma
   vez, porque TODA regra deste arquivo está presa a um `data-timbre`
   específico e nenhuma delas casa com `proprio`.

   As quatro margens chegam de `timbreAtributos()` como propriedades
   personalizadas, em milímetros, medidas pelo detector de área livre.
   Os valores de reserva existem para o caso de a arte estar gravada e
   as margens não — folha com texto em cima do desenho é pior do que
   folha com margem generosa demais.
   ═══════════════════════════════════════════════════════════════════ */
.folha[data-timbre="proprio"] {
  --tb-arte-topo: 42mm;
  --tb-arte-base: 28mm;
  --tb-arte-esq: 18mm;
  --tb-arte-dir: 18mm;
  padding: var(--tb-arte-topo) var(--tb-arte-dir) var(--tb-arte-base) var(--tb-arte-esq);
  /* 297 mm de altura MÍNIMA, e isto não é detalhe: a arte é uma folha
     A4 inteira e está fora do fluxo, então ela não empurra a folha para
     baixo. Sem este mínimo, a folha ficava com a altura do CONTEÚDO —
     medido, 723 px numa prescrição curta — e a arte de 1123 px sobrava
     106 mm para fora, passando por cima do que estivesse embaixo. Na
     impressão o `min-height: 296mm` da regra geral já salvava; na
     PRÉVIA, que é onde ela decide se o timbrado dela ficou bom, não. */
  min-height: 297mm;
  /* A assinatura desce até o pé da área livre em vez de boiar no meio.
     Numa prescrição curta o conteúdo ocupa 30 mm e o resto é vazio: com
     o rodapé logo abaixo do texto, sobrava um buraco de 15 cm até a
     arte do pé e o documento parecia inacabado. É a mesma solução que o
     modelo "Rodapé forte" já usa — padrão da casa, não invenção nova. */
  display: flex;
  flex-direction: column;
}

/* A prévia do compositor zera o `min-height` de propósito, para a folha
   acompanhar o conteúdo. Com arte isso não pode valer — e a disputa é
   um empate de especificidade (0,2,0 dos dois lados) decidido pela
   ordem no arquivo. Empate decidido por ordem quebra quando alguém
   reordena o CSS: deixado explícito de propósito. */
.rc-palco .folha[data-timbre="proprio"] { min-height: 297mm; }

/* A arte ignora o `padding` da folha porque está fora do fluxo — é
   exatamente o que se quer: o desenho ocupa os 210 × 297 mm inteiros e
   o padding vale só para o texto. `height` fixo em 297 mm, e não
   `100%`: num documento que passa de uma página a folha fica mais alta
   que o papel, e `100%` ESTICARIA a arte na vertical, entregando um
   timbrado deformado. */
.folha[data-timbre="proprio"] .tb-arte {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 297mm;
  object-fit: fill;
  z-index: 0;
  flex: none;
  pointer-events: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Sem isto o texto fica ATRÁS da arte. */
.folha[data-timbre="proprio"] .tb-corpo,
.folha[data-timbre="proprio"] .tb-rod { position: relative; z-index: 1; }
.folha[data-timbre="proprio"] .tb-corpo { flex: 1 1 auto; }
.folha[data-timbre="proprio"] .tb-rod { flex: 0 0 auto; margin-top: 10mm; }
.folha[data-timbre="proprio"] .tb-rod-contato { display: none; }

@media print {
  /* AQUI está a única parte deste recurso que depende de comportamento
     de navegador, e por isso é a mais documentada.

     Documento de mais de uma página: a arte precisa sair em TODAS as
     folhas, como o papel timbrado de verdade que se põe no maço da
     impressora. Não existe em CSS forma declarativa de dizer isso. O
     que existe é um comportamento de impressão especificado e
     implementado há muito: elemento `position: fixed` é pintado numa
     CAIXA DE PÁGINA, e o navegador repete a caixa de página em cada
     folha — o mesmo mecanismo do cabeçalho fixo de toda página
     impressa.

     Sólido no Chrome, que é onde isto foi medido. NÃO foi verificado em
     Safari nem em Firefox com impressora física; a documentação da
     entrega afirma só o que se mediu.

     Se falhar num navegador, o sintoma é brando e visível: a arte sai
     na primeira página e as seguintes saem em branco, com o texto no
     lugar certo. Nunca sai texto por cima do desenho. */
  .folha[data-timbre="proprio"] .tb-arte {
    position: fixed;
    top: 0; left: 0;
    width: 210mm;
    height: 297mm;
  }
  .folha[data-timbre="proprio"] {
    background: #FFF !important;
    box-shadow: none !important;
    /* v29 (A6-11): o padding (as faixas da arte) se repete em CADA
       página, não só no topo da primeira e no pé da última. Medido: sem
       isto, 45–70 palavras por página caíam na faixa do topo das páginas
       2 em diante e 29 na faixa do pé da página 1. */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* ── a tela de envio do papel próprio ──────────────────────────────
   A prévia é a peça que faz o recurso ser confiável: mostra, em cima da
   arte de verdade, onde o texto vai cair. `aspect-ratio` de A4 garante
   que a régua em % corresponda a milímetros na folha. */
.tp-previa {
  position: relative;
  aspect-ratio: 210 / 297;
  width: 100%;
  max-width: 230px;
  border: 1px solid var(--linha-2);
  border-radius: 8px;
  overflow: hidden;
  background: #FFF;
}
.tp-previa-g { max-width: 340px; }
.tp-previa img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* As faixas hachuradas são a ARTE (onde o texto não entra); o miolo
   claro é a área livre. Hachura em vez de cor chapada para a arte
   continuar visível por baixo — ela precisa ser conferida, não tapada. */
.tp-regua {
  position: absolute;
  background: repeating-linear-gradient(135deg,
    rgba(220, 38, 38, .16) 0 5px, rgba(220, 38, 38, .05) 5px 10px);
  border-color: rgba(220, 38, 38, .55);
  border-style: dashed;
  border-width: 0;
  pointer-events: none;
}
.tp-regua-topo { top: 0; left: 0; right: 0; border-bottom-width: 1px; }
.tp-regua-base { bottom: 0; left: 0; right: 0; border-top-width: 1px; }
.tp-regua-esq  { top: 0; bottom: 0; left: 0; border-right-width: 1px; }
.tp-regua-dir  { top: 0; bottom: 0; right: 0; border-left-width: 1px; }

.tp-alvo {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(30, 110, 60, .75);
  border: 1px dashed rgba(30, 110, 60, .5);
  background: rgba(34, 197, 94, .07);
  pointer-events: none;
}

.tp-col { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 760px) {
  .tp-col { grid-template-columns: 1fr; }
  .tp-previa-g { max-width: 260px; margin: 0 auto; }
}