/*
 * Biblioteca de componentes extraida de
 * design_system/Gestao Odonto - Design System.html (secao #componentes).
 * O design system usa 100% estilo inline; aqui os mesmos valores viram
 * classes reutilizaveis (decisao documentada no plano de port do frontend).
 */

/* Botoes */
/* O botao neutro do design system JA TEM caixa: fundo `--surface`, borda
 * `--border-2` e texto `--text`. Deixar a base transparente fazia `.btn` sem
 * modificador de cor sair como texto solto (o "Prontuario completo (PDF)" do
 * cartao EXPORTAR e o "Voltar ao prontuario" das paginas de impressao viravam
 * link azul). `.btn--secondary` continua existindo como nome explicito; os
 * outros modificadores vem depois e sobrescrevem esta base. */
.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: 9px;
  height: 38px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
}
.btn:hover {
  background: var(--surface-2);
}

.btn--sm {
  height: 30px;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12px;
}

.btn--lg {
  height: 46px;
  border-radius: 11px;
  padding: 0 18px;
  font-size: 15px;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-2);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--text);
}
.btn--secondary:hover {
  background: var(--surface-2);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn--ghost:hover {
  background: var(--surface-2);
}

.btn--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn--danger:hover {
  background: var(--danger-soft);
}

/* Acao destrutiva de destaque (design system: "+ Emergência" na fila) --
 * diferente de .btn--danger, o fundo ja vem preenchido. */
.btn--danger-solid {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
}
.btn--danger-solid:hover {
  background: var(--danger);
  color: var(--surface);
}

/* Alturas de controle do design system: 34px na barra de ferramentas de
 * tela, 32px dentro de card/painel. */
.btn--bar {
  height: 34px;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 12.5px;
}
.btn--panel {
  height: 32px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 12px;
}

.btn:disabled {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-3);
  cursor: not-allowed;
}

/* Badges de status */
.badge {
  display: inline-block;
  border-radius: 99px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge--ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); }
.badge--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); }
.badge--danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); }
.badge--info { color: var(--info); background: var(--info-soft); border-color: var(--info); }
.badge--plan { color: var(--plan); background: var(--plan-soft); border-color: var(--plan); }
.badge--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.badge--muted { color: var(--text-3); background: var(--surface-2); border-color: var(--border); }

/* Etiqueta solida -- irma de `.badge`, mesmo vocabulario de tokens e papel
   oposto. `.badge` e o ESTADO do registro (Aguardando, Em atendimento): pilula
   grande, fundo suave, borda. `.tag` e a CLASSIFICACAO cadastrada (tipo de
   atendimento, marcador do paciente): pequena, solida, para caber colada ao
   nome sem competir com ele.

   As metricas sao as da badge URGÊNCIA do design system (fila da recepcao),
   que era a unica instancia desta forma -- 9px/700, padding 2px 6px, raio 99px,
   fundo solido no token, texto em --surface. `.tag-urgent` e `.tag-priority`
   eram essa mesma regra escrita duas vezes com a cor cravada; viraram
   `.tag--danger` e `.tag--warn` quando o tipo passou a ser cadastrado e a cor
   deixou de ser decidida em CSS. */
.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 99px;
  white-space: nowrap;
  flex: none;
  color: var(--surface);
  background: var(--text-3);
}

.tag--danger { background: var(--danger); }
.tag--warn   { background: var(--warn); }
.tag--info   { background: var(--info); }
.tag--plan   { background: var(--plan); }
.tag--ok     { background: var(--ok); }
.tag--accent { background: var(--accent); color: var(--on-accent); }
/* Neutro nao tem token proprio de fundo: e o unico que inverte, texto escuro
   sobre superficie, porque cinza solido com texto em --surface some nos dois
   temas. */
.tag--muted  { background: var(--surface-3); color: var(--text-2); }

/* Fileira de etiquetas ao lado de um nome. O `min-width:0` e do vizinho que
   tem o texto: sem ele o nome empurra as etiquetas para fora do `.panel` em
   vez de ser truncado. */
.tagrow { display: inline-flex; align-items: center; gap: 5px; flex: none; }
/* Lista de marcadores no cadastro do paciente: colunas automaticas para a
   caixa nao virar uma tira de 12 linhas quando a rede cadastrar muitos. */
.taglist {
  display: grid; gap: 8px 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* Campos de formulario */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--pad);
}

.field__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
}

.field__input,
.field__select {
  height: 38px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  padding: 0 10px;
}

.field__input:focus,
.field__select:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-soft);
}

.field--error .field__input {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field__help {
  font-size: 11px;
  color: var(--text-3);
}

.field__help--error {
  color: var(--danger);
}

.field__help--warn {
  color: var(--warn);
}

/* Tabela / lista de linhas */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table__header th {
  height: 36px;
  background: var(--surface-2);
  font-size: 10px;
  font-family: var(--mono);
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0 var(--pad);
}

.table__row td {
  padding: 0 var(--pad);
}

.table__row {
  min-height: var(--rowh);
  border-bottom: 1px solid var(--border);
}
.table__row:hover {
  background: var(--surface-2);
}

/* Empty state */
.empty-state {
  padding: 32px 16px;
  text-align: center;
}

.empty-state__title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
}

.empty-state__desc {
  font-size: 11.5px;
  color: var(--text-2);
  margin: 0;
}

/* A saida do estado vazio. O design system a desenha em `--accent` de contorno
   (arquivo de telas, "Nenhum paciente encontrado" da lista de pacientes) e nao
   por acaso: enquanto ha resultados, cadastrar e uma saida discreta ao lado da
   busca; quando a busca nao acha ninguem, cadastrar VIRA a acao, e o unico
   lugar onde ela cabe e aqui, sem lista para enterra-la. */
.empty-state__action {
  display: inline-flex; align-items: center; margin-top: 8px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font); font-size: 11.5px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.empty-state__action:hover { background: var(--accent-soft); }

/* ---- Paginacao ----
 * Copia da barra do arquivo de telas ("Contas a pagar", pe da grade): faixa
 * `--surface-2` colada no ultimo registro, com a FAIXA a esquerda ("1-25 de
 * 132"), a pagina como informacao secundaria depois de um ponto medio, e as
 * setas empurradas para a direita por `margin-left: auto`.
 *
 * Duas coisas que a barra antiga errava. A faixa vem antes da pagina porque
 * "25 de 132" e o que a operacao pergunta ("ja vi tudo?"); "pagina 2 de 6" e
 * so o endereco. E a seta indisponivel nao some -- `--off` a apaga no lugar,
 * senao a barra troca de largura a cada clique e as setas trocam de posicao
 * entre a primeira pagina e a segunda. */
.pagination {
  padding: 11px 15px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination__label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}

.pagination__sep { font-size: 11px; color: var(--text-3); }

.pagination__page {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

.pagination__nav {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  gap: 6px; flex-wrap: wrap;
}

.pagination__btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.pagination__btn:hover { border-color: var(--accent); color: var(--accent); }
.pagination__btn--off { opacity: 0.4; pointer-events: none; }

/* Numero de pagina. O design system so desenha `‹ ›`, entao o numero veste o
 * componente mais proximo em vez de um padrao novo: a MESMA caixa da seta, com
 * o numero em mono (digito e dado, como o "1-25 de 34" ao lado) e largura que
 * cresce sozinha quando a lista passa de 99 paginas.
 *
 * A pagina atual usa o preenchimento com que o design system marca escolha
 * numa fileira de opcoes -- `--text` solido com texto `--surface`, o mesmo do
 * "Todas" nas pilulas de filtro e do `.chip--active`. Nao e `--accent`: o
 * acento aqui e a cor do hover, e as duas juntas fariam o botao parecer que
 * esta sendo apontado. */
.pagination__btn--page {
  width: auto;
  min-width: 28px;
  padding: 0 7px;
  font-family: var(--mono);
  font-size: 11px;
}
.pagination__btn--page.is-current {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
  cursor: default;
}

/* O miolo elidido. Ponto de reticencias solto, sem caixa: caixa leria como
 * botao, e ali nao ha nada para clicar. */
.pagination__gap {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 0 1px;
}

/* Avatar (quadrado arredondado para pessoas em listas) */
.avatar {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--surface-3); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; flex-shrink: 0;
}

/* Chip / segmento */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 5px 11px; font-size: 12px; color: var(--text-2);
  text-decoration: none; background: var(--surface);
}
.chip:hover { background: var(--surface-2); }
.chip--active {
  background: var(--text); color: var(--surface);
  border-color: var(--text); font-weight: 600;
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: var(--pad-lg);
}

/* ------------------------------------------------------------------ *
 * Campos dentro de modal / formulario interno
 *
 * O design system usa dois tratamentos de campo: o `.field` (label 11.5px)
 * das paginas antigas e o campo de modal, com rotulo mono/maiusculo e
 * altura 36px -- este bloco. Referencia: "todas as telas", modal "Nova
 * conta a pagar".
 * ------------------------------------------------------------------ */
.formstack { display: flex; flex-direction: column; gap: 16px; }
.formgrid { display: grid; gap: 12px; }
.formgrid--2 { grid-template-columns: 1fr 1fr; }
.formgrid--3 { grid-template-columns: repeat(3, 1fr); }

.formfield { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formfield__head { display: flex; align-items: baseline; gap: 6px; }
.formfield__label {
  font-size: 10px; font-family: var(--mono); color: var(--text-3);
  letter-spacing: 0.05em; text-transform: uppercase;
}
/* Campo obrigatorio e marcado com a palavra, nao com asterisco. */
.formfield__req { font-size: 10px; color: var(--danger); }
.formfield__input,
.formfield__select {
  height: 36px; padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-family: var(--font); font-size: 12.5px; width: 100%;
}
.formfield__input:focus,
.formfield__select:focus { outline: none; border-color: var(--accent); }
.formfield__input--mono { font-family: var(--mono); }
.formfield__input--money { font-family: var(--mono); font-size: 13.5px; font-weight: 700; }
.formfield__textarea {
  min-height: 72px; padding: 10px 11px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-family: var(--font); font-size: 12.5px;
  width: 100%; line-height: 1.6; resize: vertical;
}
/* Valor que o modal mostra mas nao deixa editar (a origem ja escolhida):
 * mesma metrica do campo, sem a afordancia de digitar. */
.formfield__static {
  height: 36px; display: flex; align-items: center; padding: 0 11px;
  border-radius: 10px; border: 1px dashed var(--border-2); background: var(--surface-2);
  font-size: 12.5px; color: var(--text-2);
}
.formfield__error { font-size: 11px; color: var(--danger); line-height: 1.5; }
.formfield__help { font-size: 11px; color: var(--text-3); line-height: 1.5; }

/* Campo de data (design system: modal de cadastro de paciente, "Data de
 * nascimento", e o calendario da coluna lateral do modal "Nova conta a
 * pagar"). O design system nao usa o seletor nativo do navegador em lugar
 * nenhum: o campo e uma caixa com a data em mono e um icone de calendario,
 * e o calendario e um balao desenhado com os tokens do projeto.
 *
 * Nao e preciosismo: o `<input type="date">` desenha um widget diferente em
 * cada navegador, ignora os tokens (inclusive no tema escuro) e escreve a
 * data no formato da maquina do usuario -- num sistema em que toda data e
 * lida em mono no formato brasileiro, ele e o unico controle que foge.
 * ------------------------------------------------------------------ */
.datefield { position: relative; min-width: 0; }
/* 38px e raio 9px: as DUAS referencias do campo dizem isso (o cadastro de
 * paciente no arquivo de telas e o modal de execucao na pasta `modal/`).
 * O 36px/raio 10 daqui vinha da familia `.formfield`, nao do desenho. */
.datefield__trigger {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
}
/* Dentro de um `.formfield` (modal de contrato, renegociacao) o campo se
 * alinha aos irmaos da familia -- 36px e raio 10 -- em vez de ficar 2px mais
 * alto que o `<select>` ao lado. Mesma decisao ja tomada em
 * `.recfield__input--sm`: a caixa em que o campo vive manda na metrica. */
.formfield .datefield__trigger { height: 36px; border-radius: 10px; }
.datefield__trigger:hover { border-color: var(--accent); }
.datefield__trigger:focus-visible { outline: none; border-color: var(--accent); }
/* Aberto, o campo se acende: e a origem do balao, e sem isso os dois parecem
 * dois objetos soltos na tela. */
.datefield__trigger.is-open { border-color: var(--accent); background: var(--accent-soft); }
/* O dia da semana e conferencia, nao dado: "21/08" com "sex" ao lado evita
 * lancar a sessao no dia errado sem precisar abrir o calendario. */
.datefield__weekday { flex: none; font-size: 10px; color: var(--text-3); }
.datefield__value {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--text);
}
/* Vazio e falta de resposta, nao valor: fica no cinza dos placeholders. */
.datefield__value--empty { color: var(--text-3); }
.datefield__icon { flex: none; color: var(--text-3); }

.datepop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: 262px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-lg); padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
}
/* Perto da borda direita (campo em coluna estreita) o balao abre para dentro. */
.datepop--right { left: auto; right: 0; }
.datepop__head { display: flex; align-items: center; gap: 5px; }
.datepop__nav {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border-2);
  background: transparent; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-2); cursor: pointer;
}
.datepop__nav:hover { background: var(--surface-2); }
/* O titulo e o zoom (dias -> meses -> anos). Cinco anos para tras na seta de
 * mes seriam 60 cliques; assim sao dois. */
.datepop__title {
  flex: 1; height: 26px; border: 0; border-radius: 7px; background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font); font-size: 12.5px; font-weight: 700; color: var(--text);
  cursor: pointer;
}
.datepop__title:hover:not(:disabled) { background: var(--surface-2); }
.datepop__title:disabled { cursor: default; }
.datepop__zoom { font-size: 8px; color: var(--text-3); }
.datepop__grid--zoom { grid-template-columns: repeat(6, 1fr); gap: 4px; }
.datepop__zoomcell {
  height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--text);
  cursor: pointer;
}
.datepop__zoomcell--mono { font-family: var(--mono); }
.datepop__zoomcell:hover:not(:disabled) { background: var(--surface-2); }
.datepop__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepop__dow {
  height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-family: var(--mono); color: var(--text-3);
}
.datepop__day {
  height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer;
}
.datepop__day:hover { background: var(--surface-2); }
.datepop__day--weekend { color: var(--text-3); }
/* Hoje e referencia (fundo suave e contorno); o escolhido e resposta
 * (preenchido). Os dois precisam ser distinguiveis a um metro de distancia. */
.datepop__day--today {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent); font-weight: 700;
}
.datepop__day--on {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); font-weight: 700;
}
/* Fora da faixa permitida continua visivel -- some seria esconder o
 * calendario do mes. Orientar antes de bloquear: aparece apagado e nao
 * responde ao clique. */
/* Apagado e a COR (`--text-3`), como nas duas referencias -- o `opacity`
 * somava por cima e deixava o dia bloqueado quase invisivel. */
.datepop__day--off { color: var(--text-3); cursor: not-allowed; }
.datepop__day--off:hover { background: transparent; }
.datepop__day--blank { visibility: hidden; }
.datepop__foot {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.datepop__jumps { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.datepop__jump {
  padding: 5px 8px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--font); font-size: 10.5px; font-weight: 700; color: var(--text-2);
  cursor: pointer;
}
.datepop__jump:hover { border-color: var(--accent); color: var(--accent); }
.datepop__jump--now {
  border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent);
}
/* Quem sabe a data digita -- continua sendo o caminho mais rapido, e o
 * calendario e para quem precisa procurar. */
.datepop__typed { display: flex; align-items: center; gap: 7px; }
.datepop__typedinput {
  flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--surface);
  color: var(--text); font-family: var(--mono); font-size: 11.5px;
}
.datepop__typedinput:focus { outline: none; border-color: var(--accent); }
.datepop__typedinput.is-bad { border-color: var(--danger); }
.datepop__typedhint { flex: none; font-size: 10px; color: var(--text-3); }

/* Campo de hora (design system: modal "Registrar execucao do procedimento").
 * Mesma familia do campo de data, e pela mesma razao: o `<input type="time">`
 * nativo desenha um widget por navegador e escreve AM/PM em maquina
 * configurada em ingles.
 * ------------------------------------------------------------------ */
.timefield { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.timefield__label { font-size: 10.5px; color: var(--text-2); }
.timefield__box {
  height: 38px; border-radius: 9px; border: 1px solid var(--border-2);
  background: var(--surface-2); display: flex; align-items: center; overflow: hidden;
}
.timefield__box.is-open { border-color: var(--accent); background: var(--accent-soft); }
.timefield__value {
  flex: 1; min-width: 0; height: 100%; padding: 0 10px;
  display: flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text);
}
.timefield__value { cursor: text; }
/* O campo digitavel herda a metrica da caixa: mono 12.5px, sem borda propria
 * -- quem desenha a borda e o `.timefield__box`. */
.timefield__input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
  background: transparent; color: inherit;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
}
.timefield__input::placeholder { color: var(--text-3); }
.timefield__value.is-bad .timefield__input { color: var(--danger); }
.timefield__dot {
  width: 14px; height: 14px; border-radius: 99px;
  border: 1.5px solid var(--accent); flex: none;
}
/* Os passos moram DENTRO da borda, como no design: um par de setas coladas ao
 * campo de que elas falam, em vez de dois botoes soltos ao lado. */
.timefield__step {
  width: 24px; height: 100%; flex: none;
  border: 0; border-left: 1px solid var(--border); background: transparent;
  font-size: 13px; color: var(--text-2); cursor: pointer;
}
.timefield__step:hover { background: var(--surface-2); color: var(--text); }

.timepop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; width: 306px;
  border: 1px solid var(--accent-line); border-radius: 12px; background: var(--surface);
  box-shadow: var(--shadow-md); padding: 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.timepop__head { display: flex; align-items: baseline; gap: 8px; }
.timepop__title {
  font-size: 10.5px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.05em;
}
.timepop__value {
  margin-left: auto; font-family: var(--mono); font-size: 13px;
  font-weight: 700; color: var(--accent);
}
.timepop__section {
  margin-top: 3px;
  font-size: 9.5px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.05em;
}
.timepop__hours { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.timepop__minutes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.timepop__cell {
  height: 30px; border-radius: 8px; border: 1px solid var(--border); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--text);
  cursor: pointer;
}
.timepop__cell:hover { border-color: var(--accent); }
.timepop__cell.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.timepop__foot {
  display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border);
}
.timepop__quick {
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--font); font-size: 10.5px; font-weight: 700; color: var(--text-2);
  cursor: pointer;
}
.timepop__quick:hover { border-color: var(--accent); color: var(--accent); }

/* Listas de escolha (unidades, especialidades, permissoes) */
.checklist { display: flex; flex-direction: column; gap: 7px; }
.checklist--inline { flex-direction: row; flex-wrap: wrap; gap: 9px 16px; }
.checkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.checkline { display: flex; align-items: center; gap: 9px; font-size: 12px; cursor: pointer; }
.checkline__meta { font-size: 10px; font-family: var(--mono); color: var(--text-3); }
/* Linha de marcar como ITEM DE LISTA (modal "o que vai ser feito agora"), e
 * nao como opcao solta dentro de um campo: ganha respiro proprio e separador,
 * na densidade das listas do design system. */
.checkline--pad {
  padding: 9px 2px; border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.checkline--pad:last-of-type { border-bottom: 0; }
/* O que ja esta em andamento: aparece para dizer que o relogio corre, nunca
 * como caixa a marcar -- remarcar reiniciaria o tempo contado. */
.checkline--muted { color: var(--text-2); cursor: default; }
/* Aviso de ordem do plano clinico colado a linha de que ele fala: o
 * separador desce para baixo do aviso, e o texto alinha com o nome (caixa de
 * 17px + gap de 9px + respiro de 2px). Orienta, nao bloqueia. */
.checkline--pad:has(+ .checkline__warn) { border-bottom: 0; padding-bottom: 3px; }
.checkline__warn {
  font-size: 10.5px; line-height: 1.5; color: var(--warn);
  padding: 0 2px 9px 28px; border-bottom: 1px solid var(--border);
}

/* Caixa de marcar do design system (modal "Nova conta a pagar", secao OPCOES
 * DO LANCAMENTO): quadrado de 17px, raio 5px, borda `--border-2` quando
 * desmarcada e `--accent` cheia com um ✓ quando marcada.
 *
 * `accent-color` sozinho so tinge a caixa NATIVA -- o desenho continua sendo
 * o do sistema operacional, que muda de Windows para Mac e nao tem nada a ver
 * com o resto da interface. Aqui a caixa e desenhada, mas continua sendo
 * <input type="checkbox"> de verdade: mesma decisao das pilulas sobre radio
 * real (teclado, formulario e leitor de tela seguem funcionando).
 *
 * `.permline` mora em screens.css e usa esta mesma caixa -- uma definicao so,
 * senao as duas divergem na primeira correcao. */
.checkline input[type="checkbox"],
.permline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: none;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--border-2);
  border-radius: 5px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: transparent;
}
.checkline input[type="checkbox"]::after,
.permline input[type="checkbox"]::after {
  content: "✓";
  line-height: 1;
}
.checkline input[type="checkbox"]:hover,
.permline input[type="checkbox"]:hover {
  border-color: var(--accent);
}
.checkline input[type="checkbox"]:checked,
.permline input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.checkline input[type="checkbox"]:focus-visible,
.permline input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Revelacao progressiva: o detalhe abre indentado sob a opcao que o abriu */
.reveal {
  margin-left: 25px; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; flex-direction: column; gap: 9px;
}

/* Consequencia antes do clique */
.consequence {
  border: 1px solid var(--warn); border-radius: 12px; background: var(--warn-soft);
  padding: 13px; display: flex; flex-direction: column; gap: 6px;
}
.consequence--info { border-color: var(--info); background: var(--info-soft); }
.consequence--danger { border-color: var(--danger); background: var(--danger-soft); }
/* Aviso: a acao segue, mas com uma consequencia que a pessoa precisa ver
 * antes -- lancamento retroativo, por exemplo. */
.consequence--warn { border-color: var(--warn); background: var(--warn-soft); }
.consequence__tag {
  font-size: 9.5px; font-family: var(--mono); font-weight: 700;
  color: var(--warn); letter-spacing: 0.05em;
}
.consequence--info .consequence__tag { color: var(--info); }
.consequence--danger .consequence__tag { color: var(--danger); }
.consequence--warn .consequence__tag { color: var(--warn); }
.consequence__text { font-size: 11.5px; color: var(--text); line-height: 1.6; }
/* Confirmacao dentro da propria faixa: a acao destrutiva fica ao lado da
 * consequencia, nunca num alert() do navegador. */
.consequence__actions {
  display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap;
}
/* Onde o gatilho LEVA, ao lado do gatilho. So existe para a acao que troca de
 * tela: quem resolve num modal aqui mesmo nao precisa ser avisado de nada. */
.consequence__note { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

/* Cartao de resumo da coluna lateral do modal */
.sidecard {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  padding: 13px; display: flex; flex-direction: column; gap: 7px;
}
.sidecard--dashed { border-style: dashed; background: var(--surface); }
.sidecard__label {
  font-size: 10px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.05em;
}
.sidecard__row { display: flex; align-items: baseline; gap: 8px; }
.sidecard__key { font-size: 11px; color: var(--text-3); width: 92px; flex: none; }
.sidecard__value { font-size: 11.5px; font-weight: 600; flex: 1; min-width: 0; }
.sidecard__text { font-size: 11.5px; color: var(--text-2); line-height: 1.55; }

/* ------------------------------------------------------------------ *
 * Lacuna de modelo de documento
 *
 * Mesma caixa do `.docsource` da aba Documentos -- rotulo curto e
 * explicacao numa linha, clicavel, numa coluna lateral de modal. O que
 * muda e o conteudo: aqui a primeira linha e o TOKEN em mono, porque e
 * ele que se escreve no corpo do documento.
 * ------------------------------------------------------------------ */
.mergefields { display: flex; flex-direction: column; gap: 5px; }
.mergefield {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
  border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.mergefield:hover { border-color: var(--accent); }
.mergefield:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mergefield__token { font-size: 11px; font-family: var(--mono); color: var(--accent); }
.mergefield__label { font-size: 10.5px; color: var(--text-2); line-height: 1.4; }
.mergetag {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 99px;
  border: 1px dashed var(--border-2); background: var(--surface-2);
  font-size: 10.5px; font-family: var(--mono); color: var(--text-2);
}

/* ------------------------------------------------------------------ *
 * Campo de cadastro extenso
 *
 * Terceiro tratamento de campo do design system, usado no modal "Novo
 * paciente" (arquivo de telas): rotulo em caixa mista de 11px e controle
 * de 38px -- mais denso que o `.field` da pagina e mais legivel que o
 * rotulo mono do `.formfield`, porque aqui sao ~20 campos numa tela so.
 * ------------------------------------------------------------------ */
.recfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.recfield__head { display: flex; align-items: center; gap: 7px; }
.recfield__label { font-size: 11px; font-weight: 700; }
.recfield__label--muted { color: var(--text-3); }
.recfield__badge {
  font-size: 10px; font-family: var(--mono); font-weight: 700; white-space: nowrap;
  padding: 2px 6px; border-radius: 99px;
  background: var(--surface-3); color: var(--text-2);
}
.recfield__input,
.recfield__select {
  height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-family: var(--font); font-size: 13px; width: 100%;
}
.recfield__input:focus,
.recfield__select:focus,
.recfield__textarea:focus { outline: none; border-color: var(--accent); }
.recfield__input--mono { font-family: var(--mono); }
/* Campos dentro de um `.recbox` -- fundo claro sobre o cartao cinza. */
.recfield__input--sm { height: 36px; font-size: 12.5px; background: var(--surface); }
.recfield__textarea {
  min-height: 74px; padding: 11px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-family: var(--font); font-size: 12.5px;
  width: 100%; line-height: 1.6; resize: vertical;
}
/* Valor que o sistema gera, nao a recepcao (numero do prontuario). */
.recfield__static {
  height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px dashed var(--border-2); background: var(--surface-2);
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--text-3);
}
.recfield__error { font-size: 11px; color: var(--danger); line-height: 1.5; }

/* Escolha em pilulas: alternativa ao select quando as opcoes cabem na
 * linha e a recepcao escolhe olhando, nao abrindo lista. */
/* 6px deixava as pilulas se lendo como um bloco unico -- com raio 99px e
   fundo transparente, a borda de uma quase encostava na da vizinha. 8px
   continua na grade de 4px e separa sem espalhar. */
.pillpick { display: flex; gap: 8px; flex-wrap: wrap; }
.pillpick__opt {
  display: inline-flex; align-items: center; border-radius: 99px;
  padding: 7px 11px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border-2); background: transparent;
  color: var(--text-2); cursor: pointer;
  /* `font-family` porque a pilula tambem nasce como <button> (a troca de tipo
   * da visita, onde o clique JA e a decisao e nao ha o que confirmar depois);
   * botao nao herda fonte sozinho e sairia em Arial no meio da fileira. */
  font-family: inherit;
}
.pillpick__opt:hover { border-color: var(--accent); color: var(--accent); }
.pillpick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pillpick__opt:has(input:checked) {
  background: var(--text); border-color: var(--text); color: var(--surface);
}
.pillpick__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Escolhida sem radio dentro: a fileira que grava no clique nao tem o que
 * marcar, entao o estado atual e uma pilula que NAO e botao -- mesma pintura
 * de `:has(input:checked)`, sem cursor nem hover, porque nao ha gesto nela. */
.pillpick__opt--on {
  background: var(--text); border-color: var(--text); color: var(--surface);
  cursor: default;
}
.pillpick__opt--on:hover { border-color: var(--text); color: var(--surface); }
.pillpick--lg .pillpick__opt { padding: 8px 13px; font-size: 12px; }
/* Opcao que existe mas nao pode ser escolhida agora (cadeira ocupada na
 * distribuicao da fila). Continua na fileira, no lugar dela, porque sumir
 * embaralharia a ordem fisica que a recepcao usa para ler a sala -- e o
 * proprio rotulo diz o motivo. Tracejada e em `--text-3`: o mesmo tratamento
 * que `.filter-pill--dashed` e `.docsource--off` dao ao que esta la sem estar
 * disponivel. Sem hover de acento: nada acontece no clique. */
.pillpick__opt--off {
  border-style: dashed; color: var(--text-3); cursor: not-allowed;
}
.pillpick__opt--off:hover { border-color: var(--border-2); color: var(--text-3); }
/* O apoio dentro da pilula: de quem e a cadeira agora, quem esta nela. Pesa
 * menos por OPACIDADE e nao por cor propria -- a pilula escolhida inverte o
 * fundo, e uma cor fixa some la dentro. E a mesma receita do
 * `.filter-pill__count`, que carrega numero ao lado de rotulo pelo mesmo
 * motivo. */
.pillpick__note { opacity: 0.68; margin-left: 4px; white-space: nowrap; }
/* Estado ligado sem input: usado quando a pilula e um atalho que escreve
 * noutro campo (ex.: duracoes do modal de agendamento). */
.pillpick__opt.is-on { background: var(--text); border-color: var(--text); color: var(--surface); }
/* A pilula tambem serve como link (troca de tabela que recarrega a lista). */
a.pillpick__opt { text-decoration: none; }

/* Pilula que carrega a cor de um cadastro (tipo de atendimento no modal do
 * balcao): a mesma tinta da etiqueta `.tag--*` que a fila vai mostrar. A cor
 * so aparece na ESCOLHIDA -- com todas coloridas ninguem sabia qual estava
 * marcada. Soltas continuam neutras; o hover ja antecipa a cor do tipo.
 * `--tone`/`--tone-on` saem dos tokens semanticos, entao os dois temas
 * funcionam sem regra propria. */
.pillpick__opt--danger { --tone: var(--danger); --tone-on: var(--surface); }
.pillpick__opt--warn   { --tone: var(--warn);   --tone-on: var(--surface); }
.pillpick__opt--info   { --tone: var(--info);   --tone-on: var(--surface); }
.pillpick__opt--plan   { --tone: var(--plan);   --tone-on: var(--surface); }
.pillpick__opt--ok     { --tone: var(--ok);     --tone-on: var(--surface); }
.pillpick__opt--accent { --tone: var(--accent); --tone-on: var(--on-accent); }
.pillpick__opt--muted  { --tone: var(--text-2); --tone-on: var(--surface); }
/* O hover vale so para as SOLTAS: na escolhida o fundo ja e `--tone`, e texto
 * `--tone` por cima some. */
.pillpick__opt[class*="pillpick__opt--"]:not(.pillpick__opt--on):not(.pillpick__opt--off):not(:has(input:checked)):hover {
  border-color: var(--tone); color: var(--tone);
}
.pillpick__opt[class*="pillpick__opt--"]:has(input:checked) {
  background: var(--tone); border-color: var(--tone); color: var(--tone-on);
}

/* Grade de dentes FDI em pilulas: substitui o <select> de 32 opcoes, que
 * esconde a escolha atras de um clique e nao mostra o arco. */
.toothpick { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; margin-top: 6px; }
.toothpick__opt {
  display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border-2); background: var(--surface-2);
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
}
.toothpick__opt:hover { border-color: var(--accent); color: var(--accent); }
.toothpick__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.toothpick__opt:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.toothpick__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lista de procedimentos do modal (etapa "achar o procedimento") */
.proclist {
  border: 1px solid var(--border); border-radius: 11px; overflow: hidden;
  max-height: 340px; overflow-y: auto;
}
.procpick {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  text-decoration: none; color: inherit;
}
.procpick:last-child { border-bottom: 0; }
.procpick:hover { background: var(--accent-soft); }
.procpick__code {
  font-size: 10.5px; font-family: var(--mono); color: var(--text-3);
  width: 78px; flex: none;
}
.procpick__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.procpick__name { font-size: 12.5px; font-weight: 600; }
.procpick__meta { font-size: 10.5px; color: var(--text-3); }
.procpick__price {
  font-size: 12px; font-family: var(--mono); font-weight: 600; flex: none;
}

/* Procedimento ja escolhido, no topo da etapa 2 */
.pickedproc {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
}
.pickedproc__code { font-size: 10.5px; font-family: var(--mono); color: var(--accent); }
.pickedproc__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }

.qtyrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* Caixa numerica na metrica do projeto (a mesma de `.agd-durfree input` no
   modal de agendamento): estreita, centralizada, mono. As setinhas de
   <input type="number"> continuam escondidas -- sao cromo do sistema
   operacional dentro de um modal que nao tem nenhum outro, e so aparecem no
   hover. No lugar delas vem o `.qtystep` abaixo, desenhado com os tokens
   daqui. */
.qtyrow__input { width: 76px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qtyrow__input::-webkit-outer-spin-button,
.qtyrow__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Subir e descer de um em um, que e como a quantidade quase sempre anda --
   digitar o numero era o unico caminho. O design system nao desenha um
   stepper; o componente mais proximo sao os icone-botoes de 26-28px (as
   setas de ordem do plano clinico, `.linkbtn--icon`), entao a seta segue
   aquele desenho em miniatura em vez de inventar um padrao novo. Fica
   DENTRO da borda do campo, como a do navegador ficaria: duas caixas
   separadas leriam como dois controles. */
.qtystep { position: relative; display: inline-flex; }
.qtystep .qtyrow__input { padding-right: 24px; }
.qtystep__arrows {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 21px;
  display: flex; flex-direction: column; overflow: hidden;
  border-left: 1px solid var(--border-2); border-radius: 0 9px 9px 0;
}
.qtystep__btn {
  flex: 1; min-height: 0; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-3);
}
.qtystep__btn + .qtystep__btn { border-top: 1px solid var(--border-2); }
.qtystep__btn:hover { color: var(--accent); }
/* Dentro de um `.formfield` o campo e uma coluna do formulario, e nao a
   caixinha estreita da linha de quantidade: `.qtyrow__input` tem 76px fixos
   e as setas sao absolutas na borda do `.qtystep`, entao sem isto elas
   descolavam do campo e ficavam boiando na direita da coluna. */
.formfield > .qtystep { width: 100%; }
.formfield > .qtystep .qtyrow__input { width: 100%; text-align: left; }
/* ------------------------------------------------------------------ *
 * Modal de item da tabela
 * (design_system/modal/Gestão Odonto - Modal Item da Tabela.dc.html)
 *
 * Um bloco só, usado pelo modal de item do orçamento e pelo de indicação.
 * O arquivo do design system é 100% style inline: os valores abaixo são os
 * dele (38px de campo, raio 9px, 12.5px de texto, 10.5px de rótulo mono),
 * traduzidos para tokens — cor literal não entra, senão o tema escuro morre.
 * ------------------------------------------------------------------ */

.itemfield { display: flex; flex-direction: column; gap: 7px; position: relative; }
.itemfield__head { display: flex; align-items: baseline; gap: 8px; }
.itemfield__label {
  font-size: 10.5px; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.05em;
}
.itemfield__req {
  font-size: 9.5px; font-family: var(--mono); color: var(--danger); letter-spacing: 0.04em;
}
.itemfield__req--off { color: var(--text-3); }
.itemfield__meta {
  margin-left: auto; font-size: 10px; font-family: var(--mono); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.itemfield__meta--strong { font-size: 10.5px; color: var(--text-2); }

/* O campo fechado é um <button>, não um <div> com onClick: ele abre um menu,
   e teclado e leitor de tela precisam alcançá-lo. */
.itemfield__box {
  width: 100%; height: 38px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface);
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--font); color: var(--text); text-align: left;
}
.itemfield__box:hover { border-color: var(--accent); }
.itemfield__box.is-open { border-color: var(--accent); background: var(--accent-soft); }
.itemfield__box--locked,
.itemfield__box--empty { cursor: default; background: var(--surface-2); }
.itemfield__box--locked:hover,
.itemfield__box--empty:hover { border-color: var(--border-2); }
.itemfield__box--empty { font-size: 12px; color: var(--text-3); }
.itemfield__value {
  font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.itemfield__value--grow { flex: 1; min-width: 0; }
.itemfield__price { margin-left: auto; font-size: 12px; font-family: var(--mono); font-weight: 700; flex: none; }
/* O ▾ e o do arquivo do design system, nao um SVG: no tamanho dele o
   triangulo cheio le melhor que um chevron de 1.7px. */
.itemfield__caret { margin-left: auto; font-size: 9px; color: var(--text-3); flex: none; }
.itemfield__value--grow ~ .itemfield__price,
.itemfield__price ~ .itemfield__caret { margin-left: 0; }
.itemfield__kind {
  font-size: 10px; font-family: var(--mono); padding: 3px 7px; border-radius: 6px; flex: none;
  background: var(--surface-3); color: var(--text-2);
}
.itemfield__kind--accent { background: var(--accent-soft); color: var(--accent); }
.itemfield__kind--info { background: var(--info-soft); color: var(--info); }
.itemfield__kind--warn { background: var(--warn-soft); color: var(--warn); }
.itemfield__kind--plan { background: var(--plan-soft); color: var(--plan); }
.itemfield__help { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

/* O menu é sobreposto, não empurra o corpo: o arquivo do design system o
   desenha empurrando, mas ali o modal era um mock de altura livre. Aqui o
   corpo rola, e empurrar faria a lista nascer fora da área visível. */
.itemdrop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 5px;
  border-radius: 12px; border: 1px solid var(--accent-line); background: var(--surface);
  box-shadow: var(--shadow-md); padding: 7px;
  display: flex; flex-direction: column; gap: 2px;
}
/* Enquanto não há procedimento escolhido não existe corpo para empurrar: a
   lista É o corpo do modal. Aí ela volta a ser o que o design system desenha
   -- em fluxo, sem sobrepor nada -- e não precisa caber sobre um modal curto,
   que é o que a faria nascer cortada pela rolagem. */
/* `z-index: auto` não é redundante: em fluxo isto vira FLEX ITEM do
   `.itemfield`, e em flex item o z-index vale mesmo sem `position`. Herdando o
   5 do `.itemdrop`, esta lista empatava com o menu de tabelas -- que é
   posicionado, tem o mesmo 5 e vem ANTES no DOM, então perdia o desempate e
   abria por baixo, invisível. */
.itemdrop--inline {
  position: static; margin-top: 0; z-index: auto; flex: 1; min-height: 0;
}
/* Ela ocupa o que sobra do corpo, em vez de parar num teto fixo: o modal tem
   altura estável (`.modal--item`), e uma lista curta deixaria um vazio embaixo
   exatamente onde os campos vão nascer.

   `.modal--item` no seletor NÃO é decoração: esta regra só funciona onde o
   contêiner tem altura FIXA, porque é dela que o `flex: 1` tira o tamanho.
   Solta, ela vale para qualquer hospedeiro do seletor -- e nos que têm altura
   de conteúdo (o modal da conta da visita, o painel de emergência do
   prontuário) o `flex: 1` resolve para a altura do CONTEÚDO: com 110
   procedimentos a lista virou 5168px, parou de rolar dentro de si e passou a
   empurrar tudo o que vinha depois para fora da tela. Fora do `.modal--item`
   vale o teto de 244px do dropdown normal, e a rolagem fica onde a busca e os
   chips de especialidade trabalham. */
.itemfield:has(> .itemdrop--inline) { flex: 1; min-height: 0; }
.modal--item .itemdrop--inline .itemdrop__list { flex: 1; max-height: none; min-height: 0; }
.itemdrop__search {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px;
  margin-bottom: 4px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface-2);
}
.itemdrop__search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font-family: var(--font); font-size: 12px;
}
.itemdrop__count { font-size: 9.5px; font-family: var(--mono); color: var(--text-3); flex: none; }
.itemdrop__chips { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 2px 5px; }
.itemdrop__chip {
  font-family: var(--font); font-size: 10.5px; font-weight: 600; padding: 5px 9px;
  border-radius: 99px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.itemdrop__chip.is-on { border-color: var(--text); background: var(--text); color: var(--surface); }
/* `overscroll-behavior`: chegar ao fim da lista nao passa a rolar o modal
 * por baixo -- a lista mora dentro de corpo de modal que rola. */
.itemdrop__list {
  max-height: 244px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
}
.itemdrop__row {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); color: var(--text); text-align: left;
}
.itemdrop__row:hover { background: var(--surface-2); }
.itemdrop__row.is-on { background: var(--accent-soft); }
.itemdrop__code { font-size: 9.5px; font-family: var(--mono); color: var(--text-3); width: 52px; flex: none; }
.itemdrop__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.itemdrop__name {
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.itemdrop__meta { font-size: 10px; font-family: var(--mono); color: var(--text-3); }
.itemdrop__price { font-size: 11.5px; font-family: var(--mono); font-weight: 700; flex: none; }
.itemdrop__mark { font-size: 10.5px; font-weight: 700; color: var(--accent); width: 12px; flex: none; }
.itemdrop__blank { padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.itemdrop__blank strong { font-size: 12px; }
.itemdrop__blank span { font-size: 10.5px; color: var(--text-2); line-height: 1.5; }
.itemdrop__note {
  font-size: 10px; color: var(--text-3); line-height: 1.5;
  padding: 7px 9px 3px; border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------
 * Dropdown pesquisável genérico (`templates/widgets/choice_select.html`)
 * -- o substituto do `<select>` nativo em lista de 6+ opções. Reusa o
 * `.itemfield__box` e o `.itemdrop` acima, que já são a anatomia do design
 * system; o que muda é só o lugar do menu: aqui ele abre EM FLUXO,
 * empurrando o que vem depois ("dentro de modal rolável, abre em fluxo --
 * não flutuante"), porque este widget mora em modal, composer e painel.
 * ------------------------------------------------------------------ */
.sselect { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sselect .itemdrop { position: static; margin-top: 5px; z-index: auto; }
.sselect__placeholder { color: var(--text-3); font-weight: 500; }
/* A lupa do design system: um anel de 10px, não um ícone. */
.sselect__lens {
  width: 10px; height: 10px; border-radius: 99px; flex: none;
  border: 1.5px solid var(--text-3);
}
/* A família do campo manda na métrica (CLAUDE.md, "a métrica é do desenho; a
 * cor é da caixa"): em `.formfield` o fechado é o `.formfield__select`
 * (36px, raio 10, `--surface-2`); em `.field` (tela), o `.field__select`. */
.formfield .sselect .itemfield__box {
  height: 36px; border-radius: 10px; background: var(--surface-2);
}
.field .sselect .itemfield__box { height: 38px; border-radius: 9px; background: var(--surface-2); }

/* Cor da opção, dentro da pílula de escolha de cor: a mesma tinta da
 * etiqueta (`.tag--*`), para quem escolhe ver o que a fila vai mostrar. */
.pillpick__dot {
  width: 9px; height: 9px; border-radius: 99px; flex: none; margin-right: 6px;
  box-shadow: 0 0 0 1px var(--border);
}

/* Cartão do local e cartão da quantidade: a mesma caixa. */
.itemcard {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm);
}

/* Segmentado dos três modos — é escolha única e mutuamente exclusiva, então
   o desenho é o de um seletor, não o de três botões soltos. */
.itemseg {
  display: flex; gap: 2px; padding: 3px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.itemseg__opt {
  flex: 1; text-align: center; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  padding: 7px 8px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-3); cursor: pointer;
}
.itemseg__opt.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.itemwarn {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 10px;
  background: var(--warn-soft); border: 1px solid var(--warn);
}
.itemwarn__tag {
  font-size: 9.5px; font-family: var(--mono); font-weight: 700; color: var(--warn);
  letter-spacing: 0.05em; flex: none; margin-top: 2px;
}
.itemwarn__text { font-size: 11.5px; line-height: 1.55; flex: 1; }
.itemwarn__back {
  font-family: var(--font); font-size: 11px; font-weight: 700; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--warn); background: var(--surface);
  color: var(--warn); cursor: pointer; flex: none; white-space: nowrap;
}

.iteminfo,
.itemerror {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 10px;
}
.iteminfo { background: var(--info-soft); border: 1px solid var(--info); }
.itemerror { background: var(--danger-soft); border: 1px solid var(--danger); }
.iteminfo__tag,
.itemerror__tag {
  font-size: 9.5px; font-family: var(--mono); font-weight: 700; letter-spacing: 0.05em;
  flex: none; margin-top: 2px;
}
.iteminfo__tag { color: var(--info); }
.itemerror__tag { color: var(--danger); }
.iteminfo__text,
.itemerror__text { font-size: 11.5px; line-height: 1.55; flex: 1; }

.itemsite { display: flex; flex-direction: column; gap: 9px; }
.itemsite__head { display: flex; align-items: center; gap: 8px; }
.itemsite__head .itemtoggle { margin-left: auto; }
.itemsite__group { display: flex; flex-direction: column; gap: 5px; }
.itemsite__pills { display: flex; gap: 5px; flex-wrap: wrap; }
.itemsite__hint { font-size: 10.5px; color: var(--text-3); line-height: 1.5; }

.itemtoggle {
  display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.itemtoggle__opt {
  font-family: var(--font); font-size: 10.5px; font-weight: 700; padding: 4px 9px;
  border-radius: 6px; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.itemtoggle__opt.is-on { background: var(--accent); color: var(--on-accent); }

/* Grade FDI do modal — é a do arquivo do design system (duas fileiras, meia
   arcada de cada lado da linha média), e não o widget do odontograma, que
   desenha faces e estado. Aqui só se marca número. */
.fdi { display: flex; flex-direction: column; gap: 5px; }
.fdi__row { display: flex; align-items: center; gap: 7px; }
.fdi__side { font-size: 9px; font-family: var(--mono); color: var(--text-3); width: 22px; flex: none; }
.fdi__half { flex: 1; display: flex; gap: 3px; }
.fdi__mid { width: 1px; height: 22px; background: var(--border-2); flex: none; }
.fdi__tooth {
  flex: 1; min-width: 0; height: 31px; border-radius: 7px; padding: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--mono); font-weight: 500; cursor: pointer;
}
.fdi__tooth:hover { border-color: var(--accent); }
.fdi__tooth.is-on {
  border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.fdi__quick { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.fdi__shortcut {
  font-family: var(--font); font-size: 10.5px; font-weight: 600; padding: 5px 9px;
  border-radius: 7px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.fdi__shortcut:hover { border-color: var(--accent); color: var(--accent); }

.regionpick {
  font-family: var(--font); font-size: 11.5px; font-weight: 600; padding: 7px 11px;
  border-radius: 8px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.regionpick:hover { border-color: var(--accent); }
.regionpick.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.regionpick__teeth { font-size: 9.5px; font-family: var(--mono); opacity: 0.7; margin-left: 6px; }

.itemsplit { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; align-items: start; }
.itemsplit--even { grid-template-columns: 1fr 1fr; }

/* Quantidade em tamanho de leitura (42px), com − e + nas pontas: aqui ela é
   o assunto do cartão, e não um campo no meio de um formulário como no
   `.qtystep`. */
.qtybig {
  height: 42px; border-radius: 10px; border: 1px solid var(--border-2);
  background: var(--surface); display: flex; align-items: center; overflow: hidden;
}
.qtybig__btn {
  width: 38px; align-self: stretch; display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 16px; color: var(--text-2);
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.qtybig__btn:first-child { border-right: 1px solid var(--border); }
.qtybig__btn:last-child { border-left: 1px solid var(--border); }
.qtybig__btn:hover { background: var(--surface-2); color: var(--text); }
.qtybig__value { flex: 1; text-align: center; font-size: 17px; font-family: var(--mono); font-weight: 700; }
.qtybig__presets { display: flex; gap: 5px; flex-wrap: wrap; }
.qtybig__preset {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; padding: 5px 9px;
  border-radius: 7px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.qtybig__preset.is-on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

.itempreview {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.itempreview__title { font-size: 13px; font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.itempreview__row { display: flex; gap: 9px; font-size: 11.5px; line-height: 1.5; }
.itempreview__label { color: var(--text-3); width: 76px; flex: none; }
.itempreview__value { color: var(--text-2); flex: 1; min-width: 0; }
.itempreview__value--mono { font-family: var(--mono); }
.itempreview__total {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 9px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 700;
}
.itempreview__sum { margin-left: auto; font-size: 16px; font-family: var(--mono); font-weight: 700; }

.qtyrow__price { margin-left: auto; display: flex; flex-direction: column; gap: 3px; text-align: right; }
.qtyrow__value { font-size: 18px; font-family: var(--mono); font-weight: 700; }

/* Chave liga/desliga (secoes opcionais do cadastro) */
.switch {
  width: 32px; height: 18px; border-radius: 99px; flex: none;
  border: 0; padding: 0; position: relative; cursor: pointer;
  background: var(--surface-3);
}
.switch--on { background: var(--accent); }
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: left 0.12s ease;
}
.switch--on .switch__knob { left: 16px; }

/* ------------------------------------------------------------------ *
 * Atalho de desenvolvimento
 *
 * Nao faz parte do design system: e um controle que so existe com
 * DEBUG=True (ver core.context_processors.dev_tools). Tracejado e em
 * --warn de proposito, para nunca ser confundido com acao de producao.
 * ------------------------------------------------------------------ */
.devbtn {
  flex: none; height: 24px; padding: 0 9px; border-radius: 7px;
  border: 1px dashed var(--warn); background: transparent;
  color: var(--warn); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.03em; cursor: pointer; white-space: nowrap;
}
.devbtn:hover { background: var(--warn-soft); }
/* O mesmo atalho quando ele APAGA alguma coisa (recriar a fila da recepcao):
   dois tempos, e o segundo tempo mostra a consequencia escrita entre o "nao" e
   o "recriar". Fica na linha da barra de acoes, entao alinha como os botoes
   dela e nao quebra -- a barra ja tem quatro pecas e uma quinta que pula de
   linha faria a regua de datas dancar. */
.devreset { display: inline-flex; align-items: center; }
.devreset__ask { display: inline-flex; align-items: center; gap: 6px; }
.devreset__text {
  font-family: var(--mono); font-size: 10px; color: var(--text-3); white-space: nowrap;
}
/* O que executa se pinta, o que desiste fica vazado: a diferenca entre os dois
   tempos tem de ser visivel sem ler. */
.devreset__go { background: var(--warn-soft); font-weight: 600; }
.devbtn:disabled { opacity: 0.55; cursor: progress; }

/* ================= Barra de rolagem ================= */
/* O design system nao desenha barra de rolagem -- a unica mencao que ele faz
 * e para ESCONDER a da tira de abas do prontuario. Entao aqui nao ha o que
 * copiar: a regra e nao inventar cor nem peso, e sim reusar os tokens de
 * borda, para os dois temas sairem de graca.
 *
 * Trilho transparente de proposito: a barra aparece dentro de cartao, modal e
 * painel, cada um com fundo diferente -- um trilho pintado viraria um risco
 * atravessando componentes que nao tem risco nenhum no design.
 *
 * O polegar tem 12px de canaleta e 3px de borda transparente com
 * `background-clip: padding-box`: sobra uma pilula de 6px que flutua com
 * respiro, em vez de encostar na parede do container. E `--border-2` (a mesma
 * borda dos controles) porque a rolagem e cromo, nao conteudo: ela escurece
 * para `--text-3` no hover, quando a pessoa esta mirando nela.
 *
 * A tira de abas continua sem barra: ela zera o proprio pseudo-elemento, e
 * seletor de classe vence o `*` daqui. */
/* `scrollbar-color`/`scrollbar-width` e a via PADRAO, e o Chrome moderno faz
 * uma troca ao ve-los: passa a desenhar a barra nativa dele e IGNORA os
 * `::-webkit-scrollbar` daqui. O resultado era a barra fina do sistema com a
 * nossa cor -- sem raio, sem respiro e sem hover. Entao a via padrao fica
 * cercada para quem nao tem os pseudo-elementos (Firefox), e o Chromium e o
 * WebKit seguem pelo desenho abaixo. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
  }
}
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--border-2);
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background: var(--text-2);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==== AVISO QUE SOME SOZINHO ==============================================
 * `data-flash` é o aviso do que ACABOU de acontecer — o cartão `.notecard--ok`
 * do prontuário e a faixa `.warnbar--ok` das abas. Ele não tem desenho próprio:
 * a moldura continua sendo a do componente, e o atributo só acrescenta a saída.
 * Quem conta o tempo (e quem segura a contagem com o ponteiro em cima) é
 * `static/js/flash.js`; os 0.4s aqui são os mesmos do `SAIDA` de lá.
 *
 * A saída recolhe a altura junto com a opacidade porque o aviso mora no topo
 * de uma pilha: sumir só com opacidade deixaria um buraco do tamanho dele e
 * depois puxaria a lista para cima de uma vez. Padding e borda vão a zero na
 * mesma transição — senão a caixa vazia ainda ocuparia ~28px no fim.
 */
[data-flash] {
  overflow: hidden;
  transition: opacity 0.4s ease, height 0.4s ease, margin 0.4s ease,
    padding 0.4s ease, border-width 0.4s ease;
}
[data-flash].is-leaving {
  /* O aviso e item de uma pilha em coluna (`.chart-stack`), e item de flex nao
   * encolhe abaixo do proprio conteudo sem isto (`min-height: auto` e o
   * padrao): medido, a altura ficava nos 64px e a saida virava um corte seco. */
  min-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
/* Menos animação: `flash.js` remove o elemento direto, sem passar por aqui. */
/* Seletor de arquivo (templates/components/_filepick.html). Substitui o
 * <input type=file> nativo, que saia com o botao cinza do sistema e fonte
 * fora do design system. Zona tracejada no tom de `--surface-2`, botao neutro
 * `.btn--sm`; ao escolher, vira a lista dos arquivos com extensao e tamanho. */
.filepick {
  position: relative;
  display: block;
  border: 1px dashed var(--border-2);
  border-radius: 11px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.filepick:hover { border-color: var(--accent-line); }
.filepick--over { border-color: var(--accent); background: var(--accent-soft); }
.filepick--filled { border-style: solid; border-color: var(--border); background: var(--surface); }
.filepick:focus-within { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.filepick__input {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.filepick__zone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px; text-align: center;
}
.filepick__icon { color: var(--accent); margin-bottom: 2px; }
.filepick__title { font-size: 13px; font-weight: 600; color: var(--text); }
.filepick__hint { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.filepick__btn { margin-top: 8px; pointer-events: none; }
.filepick__list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.filepick__item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 7px; font-size: 12px; min-width: 0;
}
.filepick__ext {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 5px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent-2);
}
.filepick__name {
  flex: 1; min-width: 0; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filepick__size { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.filepick__change {
  align-self: flex-start; margin: 4px 8px 4px; font-size: 12px; font-weight: 600;
  color: var(--accent);
}
.filepick:hover .filepick__change { color: var(--accent-2); }
@media (max-width: 720px) {
  .filepick__zone { padding: 16px 12px; }
  .filepick__btn { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-flash] { transition: none; }
}

/* ==== CELULAR ============================================================
 * Fronteira de 720px, a mesma de `shell.css` e `screens.css`.
 */
/* ------------------------------------------------------------------ */
/* Tela do paciente (`budgets/patient_view.html`). Superfície pública,
 * muitas vezes lida por idoso: piso de 18px em qualquer texto, e tudo
 * multiplicado por `--pv` (A−/A+, de 1 a 1,5). Sem diagnóstico, sem código,
 * sem tabela — ver `docs/decisoes/orcamento-e-financeiro.md`. */
.pview-page { background: var(--bg); }
.pview {
  --pv: 1;
  max-width: 760px; margin: 0 auto; padding: 28px 20px 150px;
  display: flex; flex-direction: column; gap: 18px;
  font-size: calc(18px * var(--pv)); color: var(--text);
}
.pview__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pview__who { display: flex; flex-direction: column; gap: 4px; }
.pview__clinic, .pview__sub { font-size: calc(18px * var(--pv)); color: var(--text-2); }
.pview__title {
  margin: 0; font-size: calc(40px * var(--pv)); font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.1;
}
.pview__zoom {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface);
  font-size: 18px; color: var(--text-2);
}
.pview__zoom > span { padding: 0 8px; }
.pview__zoombtn {
  width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.pview__zoombtn--on { background: var(--text); border-color: var(--text); color: var(--surface); font-size: 24px; }
.pview__list { display: flex; flex-direction: column; gap: 12px; }
.pview__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface);
}
.pview__itemtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pview__itemname { font-size: calc(22px * var(--pv)); font-weight: 700; }
.pview__itemwhere { font-size: calc(18px * var(--pv)); color: var(--text-2); }
.pview__itemprice { font-size: calc(24px * var(--pv)); font-weight: 800; white-space: nowrap; }
.pview__notes {
  padding: 18px 22px; border-radius: 16px;
  border: 2px solid var(--accent-line); background: var(--accent-soft);
}
.pview__noteslabel { font-size: calc(18px * var(--pv)); font-weight: 700; margin-bottom: 6px; }
.pview__notes p { margin: 0; line-height: 1.5; }
.pview__separate {
  padding: 16px 22px; border-radius: 16px; border: 1px dashed var(--border-2); background: var(--surface);
}
.pview__separaterow {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: calc(20px * var(--pv)); padding: 4px 0;
}
.pview__separatenote { margin: 6px 0 0; color: var(--text-2); }
.pview__faq { display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.pview__faq p { margin: 0; }
.pview__legal { margin: 0; color: var(--text-2); }
.pview__bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px max(20px, calc((100vw - 760px) / 2));
  border-top: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lg);
}
.pview__bartotal { display: flex; flex-direction: column; gap: 2px; font-size: 18px; color: var(--text-2); }
.pview__bartotal strong { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text); }
.pview__accept {
  height: 64px; padding: 0 32px; border-radius: 16px; border: 0;
  background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 24px; font-weight: 800; cursor: pointer;
}
.pview__barok { font-size: 20px; font-weight: 700; color: var(--ok); }
.pview__barerror { font-size: 18px; color: var(--danger); }

/* Icone do WhatsApp ao lado do telefone (`partials/whatsapp_link.html`, no
   prontuario e no popup do agendamento) -- o gesto do Clinicorp. O logo e o
   da marca; a cor e --ok, porque cor literal quebraria o tema escuro. 24px de
   alvo em volta do glifo de 15px, raio de pilula como os icones-botao. */
.wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 99px; flex: none;
  color: var(--ok); text-decoration: none; vertical-align: middle;
}
.wa-link:hover { background: var(--ok-soft); }

@media (max-width: 720px) {
  /* Tabela de verdade (<table>) rola de lado com as colunas inteiras. O
   * `display: block` faz a própria tabela virar o container de rolagem — o
   * navegador gera a caixa de tabela anônima em volta de thead/tbody, então
   * as colunas continuam alinhadas. Sem isto, sete colunas de orçamento
   * estouram a largura e o que passa dos 390px fica inalcançável, porque o
   * `.card` em volta tem `overflow: hidden`. */
  .table { display: block; overflow-x: auto; }
  .table__header th,
  .table__row td { white-space: nowrap; }

  /* Alvo de toque: no design system o botão do telefone tem 42–50px de
   * altura, contra os 30–34px do computador. Dedo não é ponteiro. */
  .btn { height: 44px; }
  .btn--bar,
  .btn--panel { height: 40px; }
  .btn--sm { height: 36px; }

  /* Campo de formulário empilha. Duas colunas em 390px dão ~168px por campo:
   * cabe a caixa, não cabe o que se digita nela — e o rótulo, que é o que
   * diz o que digitar, quebra em três linhas. */
  .formgrid--2,
  .formgrid--3,
  .checkgrid { grid-template-columns: 1fr; }

  /* A seta e o número da paginação são os alvos mais fáceis de errar com o
   * dedo: 28px de lado no computador, e nada em volta deles para corrigir o
   * toque. Sobem para 40px — a mesma altura do `.btn--bar` do telefone. A
   * fileira quebra em duas linhas quando não cabe (`flex-wrap` no `__nav`);
   * encolher o alvo para caber seria desfazer justamente o que esta regra
   * está fazendo. */
  .pagination__btn { width: 40px; height: 40px; }
  .pagination__btn--page { width: auto; min-width: 40px; }

  /* Tela do paciente: a barra empilha, e o botão ocupa a largura. */
  .pview__title { font-size: calc(32px * var(--pv)); }
  .pview__item { flex-direction: column; gap: 8px; }
  .pview__bar { flex-direction: column; align-items: stretch; }
  .pview__accept { width: 100%; }
}