/* ==========================================================================
   TERMO + ANAMNESE OBJETIVA (31Q) EM PDF — a faixa dos botões e o quadro de assinatura (03/11/2026)
   ==========================================================================
   Mora FORA de /css/ pelo mesmo motivo da ficha-suspensa.css e da
   /vidro-assinatura/: a camada clara do ERP (css/tema-claro*.css) é GERADA
   das folhas de /css/, e esta já traz os dois temas.
   Os botões são .an-btn (css/anamnese-erp.css), que já têm os dois temas;
   aqui só a faixa e o quadro. O quadro é BRANCO nos dois temas: é o papel
   onde o paciente assina, e o traço vai assim para o PDF.
   ========================================================================== */

/* Os tokens da folha da anamnese moram em .an-corpo (css/anamnese-erp.css); a faixa fica AO LADO
   dele e o quadro pode entrar em qualquer modal — sem esta cópia, o .an-btn--primario fica com
   fundo transparente e texto preto (ilegível no escuro; medido em 390 px, 03/11/2026). */
.acp-faixa, .acp-quadro {
  --an-ouro: #FFD700;
  --an-caramelo: #D4A373;
  --an-texto: #F5EFE6;
  --an-texto-suave: rgba(245, 239, 230, 0.68);
  --an-borda: rgba(212, 163, 115, 0.42);
  --an-vidro-forte: rgba(255, 255, 255, 0.09);
  --an-raio: 8px;
  --an-fonte: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html.tema-claro .acp-faixa, html.tema-claro .acp-quadro {
  --an-ouro: #715613;
  --an-ouro--fundo: #FFD700;
  --an-ouro--bordaforte: #97720F;
  --an-caramelo: #7C5020;
  --an-texto: #1A1A1A;
  --an-texto-suave: #423F3A;
  --an-borda: #CC9B6B;
  --an-borda--bordaforte: #9C6E3F;
  --an-vidro-forte: rgba(0, 0, 0, 0.038);
}

.acp-faixa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(212, 163, 115, 0.45); border-top-color: rgba(255, 215, 0, 0.55); border-left-color: rgba(255, 215, 0, 0.55);
  background: rgba(255, 255, 255, 0.03);
}
.acp-faixa-rotulo {
  flex: 1 1 220px; font: 600 12px/1.3 var(--an-fonte, system-ui, sans-serif); letter-spacing: 0.4px;
  color: var(--an-texto-suave, rgba(255, 255, 255, 0.72));
}
.acp-faixa .an-btn { white-space: normal; text-align: left; line-height: 1.25; min-height: 40px; }
html.tema-claro .acp-faixa { background: #FFFDF8; border-color: #CC9B6B; border-top-color: #CD9D20; border-left-color: #CD9D20; }
html.tema-claro .acp-faixa-rotulo { color: #5F5A50; }

/* ── quadro de assinatura (tablet da recepção) ── */
.acp-quadro { display: flex; flex-direction: column; gap: 6px; }
.acp-quadro-tela {
  display: block; width: 100%; height: 170px; cursor: crosshair;
  /* a linha-guia é só fundo de CSS: não entra no PNG da assinatura */
  background: linear-gradient(transparent calc(100% - 36px), rgba(212, 163, 115, 0.7) calc(100% - 36px),
    rgba(212, 163, 115, 0.7) calc(100% - 35px), transparent calc(100% - 35px)) no-repeat 0 0 / 100% 100%, #FFFFFF;
  border: 1px dashed #D4A373; border-radius: 10px; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.acp-quadro-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.acp-quadro-dica { flex: 1 1 200px; font: 12px/1.3 var(--an-fonte, system-ui, sans-serif); color: var(--an-texto-suave, rgba(255, 255, 255, 0.72)); }
html.tema-claro .acp-quadro-dica { color: #5F5A50; }
.acp-quadro-limpar { min-height: 40px; }

/* ── celular e tablet: botões de dedo, um por linha ── */
@media (max-width: 640px) {
  .acp-faixa { padding: 10px; }
  .acp-faixa .an-btn { flex: 1 1 100%; justify-content: center; text-align: center; min-height: 44px; }
}