/* Chassi de papel A4 dos documentos médicos — receita hoje; atestado e
   encaminhamento reusam depois sem tocar aqui.
   Layout copiado dos modelos aprovados pelo Cássio (modelos/receituario.html e
   o encaminhamento de psicologia); o accent segue o AZUL de marca do app
   (decisão do Cássio, 2026-08-13 — antes era o verde-petróleo dos modelos).
   Cor fixa, sem token de style.css: papel impresso não tem tema claro/escuro. */

.folha {
  --ink: #1a2b32;
  --ink-soft: #3a4a50;
  --muted: #7c8b90;
  --accent: #2F80ED;
  --hairline: #c4cfd1;
  --paper: #ffffff;
}

/* A folha existe no DOM só para ser impressa: fora da impressão não ocupa espaço. */
#folha-impressao { display: none; }

.sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 18mm 18mm 16mm;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ---------- Cabeçalho ---------- */
.folha .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.folha .doc-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px; font-weight: 700; line-height: 1.15;
}
.folha .doc-reg { font-size: 13px; color: var(--ink-soft); margin-top: 4px; letter-spacing: .01em; }
.folha .rx-mark { font-family: Georgia, serif; font-size: 40px; color: var(--accent); line-height: 1; }

.folha .rule { height: 2px; background: var(--accent); margin-top: 14px; }
.folha .rule.thin { height: 1px; background: var(--hairline); }

.folha .doc-title {
  text-align: center; font-family: Georgia, serif; font-weight: 700;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); margin: 24px 0 2px;
}
.folha .doc-subtitle {
  text-align: center; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 4px;
}

/* ---------- Linha paciente / data ---------- */
.folha .patient-row { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 8px; }
.folha .patient-row .f { display: flex; align-items: baseline; gap: 8px; }
.folha .patient-row .grow { flex: 1 1 58%; }
.folha .label {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.folha .patient-row .hand { flex: 1; border-bottom: 1px solid var(--ink); min-height: 1.35em; }
.folha .patient-row .f:not(.grow) .hand { min-width: 130px; }
.folha .patient-row .filled { font-size: 14.5px; font-weight: 600; padding-bottom: 1px; }

/* ---------- Corpo: prescrição agrupada por via ---------- */
/* O contador vive na LISTA INTEIRA, não em cada via: a numeração corre 1,2,3…
   pelo documento todo. Reiniciando por via, "1)" apareceria duas vezes na mesma
   receita e a conferência na farmácia viraria adivinhação. */
.folha .rx-list { flex: 1; margin-top: 16px; display: flex; flex-direction: column; gap: 15px; counter-reset: rx; }
.folha .via-tit {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 7px;
}
.folha .itens {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.folha .itens li {
  counter-increment: rx; position: relative; padding-left: 23px;
  font-size: 13.5px; line-height: 1.55;
  /* Um medicamento não pode partir entre páginas: a posologia ficaria órfã
     da linha que diz a qual fármaco pertence. */
  break-inside: avoid;
}
.folha .itens li::before {
  content: counter(rx) ")"; position: absolute; left: 0; top: 0;
  color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums;
}
.folha .item-nome { font-weight: 700; }
.folha .item-nome .qtd { font-weight: 400; color: var(--ink-soft); }
.folha .item-pos { color: var(--ink-soft); }

.folha .orient { border-top: 1px solid var(--hairline); padding-top: 11px; }
.folha .orient ul { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.folha .orient li { margin-bottom: 3px; }

/* ---------- Local, data e assinatura ---------- */
.folha .place-date { font-size: 13.5px; margin-top: 18px; text-align: right; line-height: 1.8; }
.folha .signblock { margin-top: 26px; text-align: center; break-inside: avoid; }
.folha .sign-line { width: 72mm; margin: 0 auto; border-top: 1px solid var(--ink); padding-top: 6px; }
.folha .sign-name { font-family: Georgia, serif; font-weight: 700; font-size: 14px; }
.folha .sign-caption {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px;
}

.folha .foot {
  margin-top: auto; padding-top: 12px; font-size: 12px;
  color: var(--muted); text-align: center; line-height: 1.6;
}
.folha .foot .rule.thin { margin-bottom: 10px; }

/* ---------- Impressão ---------- */
@media print {
  @page { size: A4; margin: 0; }
  /* Só a folha imprime. `body > *` cobre o shell inteiro sem depender de conhecer
     o id de cada tela — telas novas do app nunca vazam para o papel por esquecimento. */
  body > *:not(#folha-impressao) { display: none !important; }
  /* ...mas pseudo-elemento NÃO é filho, então o `body > *` acima passa por cima dele:
     o `body::before` de style.css (position: fixed, gradiente de tela cheia, z-index -1)
     seguia vivo no papel. Chromium engole isso em ~37ms, mas o WebKit em PWA standalone
     usa outro caminho de impressão e lá o custo aparece — é a hipótese do "demora
     absurdamente para abrir" que só acontece no app da tela inicial, nunca no Safari.
     Some sem efeito visual: a impressão já pinta o fundo de branco na linha abaixo. */
  body::before, body::after { display: none !important; }
  body { background: #fff; }
  #folha-impressao { display: block; }
  .sheet {
    width: auto; min-height: auto; margin: 0;
    padding: 11mm 17mm 6mm;
    box-shadow: none;
  }
  /* Duas vias (antimicrobiano): cada folha começa em página nova. */
  .sheet + .sheet { break-before: page; }
}