/* ================================================================== A FICHA
   O orçamento rápido no formato de "previsão de honorários": odontograma,
   paciente e profissional, tabela por etapa, total, desconto à vista e o
   rodapé de validade. Um arquivo só, carregado pelo app (tela e PDF) e pela
   página do paciente — ver ficha.js.

   A medida é a largura da FICHA, não da janela (container query): dentro do
   app ela mora numa coluna, e no celular ocupa a tela toda. */
.ficha{
  container-type:inline-size;
  font-family:"DM Sans",sans-serif;
  color:var(--green-900);
  margin:0 0 8px;
}
.ficha-rotulo{
  margin:0 0 16px;
  text-align:center;
  font:700 var(--text-xs)/1.3 "DM Sans",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--clay-600, #8a4a33);
}

/* ------------------------------------------------------- ODONTOGRAMA
   Dezesseis colunas por arcada, na ordem da ficha clínica (18→28 em cima,
   48→38 embaixo). Os números se encontram no meio, na linha da mordida. A
   arte vem com a coroa para cima — posição da arcada de baixo —, então a de
   cima é a mesma imagem virada. */
.ficha-odonto{display:grid;gap:2px;max-width:640px;margin:0 auto 20px}
.ficha-arcada{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));align-items:end;column-gap:1px}
.ficha-arcada + .ficha-arcada{align-items:start}
.ficha-dente{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.ficha-dente img{
  display:block;
  height:clamp(30px, 9cqi, 64px);
  width:auto;
  max-width:100%;
  object-fit:contain;
}
.ficha-dente:not(.is-inf) img{transform:scaleY(-1)}
.ficha-dente i{
  font:500 clamp(8px, 1.7cqi, 11px)/1 "DM Mono",monospace;
  font-style:normal;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.ficha-dente.is-on i{color:var(--green-700, #1f5c55);font-weight:700}
.ficha-odonto-dec{display:grid;gap:2px;margin-top:10px}
.ficha-odonto-dec .ficha-arcada{grid-template-columns:repeat(10,minmax(0,1fr));width:64%;margin:0 auto}

/* ------------------------------------------------ PACIENTE E PROFISSIONAL */
.ficha-pessoas{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--green-600);
}
.ficha-pessoas p{margin:0;display:grid;gap:2px}
.ficha-pessoas span{font:700 var(--text-2xs, 11px) "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.ficha-pessoas b{font:600 var(--text-base) "DM Sans",sans-serif}

/* --------------------------------------------------------------- TABELA */
.ficha-tabela-caixa{overflow-x:auto}
.ficha-tabela{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ficha-tabela th,
.ficha-tabela td{
  border:1px solid var(--green-600);
  padding:11px 12px;
  text-align:center;
  vertical-align:middle;
  line-height:1.4;
}
.ficha-tabela thead th{
  border:0;
  border-bottom:2px solid var(--green-600);
  font:700 var(--text-sm) "DM Sans",sans-serif;
  padding-top:4px;
}
.ficha-tabela tbody th{font-weight:700}
.ficha-tabela td{color:var(--text-strong, #2b4a44)}
.ficha-etapa th{
  font-style:italic;
  font-weight:600;
  background:var(--lime-100);
  padding:9px 12px;
}
.ficha-etapa small{font-style:normal;font-weight:400;color:var(--text-muted);margin-left:6px}

/* OPÇÃO A, OPÇÃO B. A faixa da etapa é itálica e discreta porque etapa é
   continuação; opção é uma escolha, e precisa de peso para o paciente ver
   que ali começa outro caminho — não a sequência do mesmo. */
.ficha-opcao th{
  font-style:normal;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:var(--text-xs);
  background:var(--green-600);
  color:#fff;
}
/* Em opções não há soma: a caixa do total anuncia a escolha e a faixa. */
.ficha-total-op{max-width:520px}
.ficha-total-op span{font-weight:600}

/* As condições de cada opção, uma caixa por caminho. Sem a separação, as
   linhas "à vista" de duas opções ficariam encostadas e o paciente leria o
   desconto de uma como se fosse da outra. */
.ficha-op-pagar{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--border);
}
.ficha-op-pagar>span{
  display:block;
  font:700 var(--text-xs) "DM Sans",sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-600);
}
.ficha-op-pagar .ficha-avista{margin-top:6px;font-size:var(--text-sm)}
.ficha-custo{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.ficha-vazio{color:var(--text-muted)}

/* ---------------------------------------------------- TOTAL E PAGAMENTO */
.ficha-total{
  display:flex;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 14px;
  margin:22px auto 0;
  padding:12px 0;
  max-width:460px;
  border-top:1px solid var(--green-600);
  border-bottom:1px solid var(--green-600);
  font:700 var(--text-base) "DM Sans",sans-serif;
}
.ficha-total b{font-size:var(--text-lg);font-variant-numeric:tabular-nums}
.ficha-avista{margin:16px 0 0;font:700 var(--text-base)/1.4 "DM Sans",sans-serif}
.ficha-avista b,.ficha-outras b{font-variant-numeric:tabular-nums}
.ficha-pix{display:block;margin-top:4px;color:var(--text-muted);font-size:var(--text-xs)}
.ficha-outras{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:var(--text-sm)}
.ficha-outras small{color:var(--text-muted)}
.ficha-pagar{
  display:inline-block;
  margin-left:8px;
  padding:3px 10px;
  border-radius:999px;
  background:var(--green-600);
  color:#fff;
  font:600 var(--text-xs)/1.5 "DM Sans",sans-serif;
  text-decoration:none;
  vertical-align:middle;
}
.ficha-pagar:hover{background:var(--green-700, #1f5c55)}

/* --------------------------------------------------------------- RODAPÉ */
.ficha-rodape{margin-top:28px;display:grid;gap:6px}
.ficha-rodape b{justify-self:end;font:700 var(--text-sm) "DM Sans",sans-serif}
.ficha-rodape small{text-align:center;font-size:var(--text-xs);line-height:1.5;color:var(--text-muted)}

/* ------------------------------------------------ FICHA ESTREITA (celular)
   Três colunas não cabem em 360px sem virar coluna de uma palavra por linha.
   Abaixo de 460px de FICHA, cada tratamento vira um cartão: nome e custo na
   primeira linha, descrição embaixo. */
@container (max-width:460px){
  .ficha-tabela thead{display:none}
  .ficha-tabela,
  .ficha-tabela tbody{display:block}
  .ficha-tabela tr{
    display:grid;
    grid-template-columns:1fr auto;
    border:1px solid var(--green-600);
    border-top:0;
  }
  .ficha-tabela tbody tr:first-child{border-top:1px solid var(--green-600)}
  .ficha-tabela th,
  .ficha-tabela td{border:0;text-align:left;padding:8px 12px}
  .ficha-tabela tbody th{grid-column:1}
  .ficha-tabela td.ficha-custo{grid-column:2;grid-row:1;text-align:right}
  .ficha-tabela td[data-rotulo="Descrição"]{grid-column:1 / -1;padding-top:0;font-size:var(--text-xs)}
  .ficha-etapa{display:block}
  .ficha-etapa th{display:block;text-align:left}
}

/* ------------------------------------ O QUE A FICHA JÁ DIZ SAI DA PÁGINA */
#proposal-document.is-ficha .document-hero,
#proposal-document.is-ficha .includes-section,
#proposal-document.is-ficha .notes-section,
#proposal-document.is-ficha .investment,
#proposal-document.is-ficha #document-payment-options,
#proposal-document.is-ficha #document-gallery-section{display:none}

#patient-page.is-ficha .patient-hero,
#patient-page.is-ficha #patient-includes-section,
#patient-page.is-ficha #patient-notes-wrap,
#patient-page.is-ficha .patient-investment,
#patient-page.is-ficha #patient-payment-options,
#patient-page.is-ficha #patient-gallery-section{display:none}

/* O endereço do link só aparece no papel (impressão e PDF do celular). */
.ficha-link{display:none}
.ficha-com-endereco .ficha-pagar{display:none}
.ficha-com-endereco .ficha-link,
.ficha-link.is-visivel{
  display:block;
  margin-top:2px;
  font:600 var(--text-xs) "DM Sans",sans-serif;
  color:var(--green-700, #1f5c55);
  text-decoration:underline;
  word-break:break-all;
}

@media print{
  .ficha-pagar{display:none}
  .ficha-link{
    display:block;
    margin-top:2px;
    font:600 var(--text-xs) "DM Sans",sans-serif;
    color:var(--green-700, #1f5c55);
    text-decoration:underline;
    word-break:break-all;
  }
  .ficha-tabela tr,.ficha-odonto{break-inside:avoid}
}