/* CRM33 Comercial — orçamento assistido (.oa-) e emissão de guia (.gu-).
 * Só layout: cores, superfícies e selos vêm de tokens.css e base.css. */

/* ---------- Orçamento assistido (aba Orçamentos da ficha): lista de exames e revisão ---------- */
.oa { display: flex; flex-direction: column; gap: 10px; min-height: 0; height: 100%; }
.oa-cab { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; container-type: inline-size; }
.oa-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 10px; }
.oa-rodape { flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.oa-info { display: flex; flex-direction: column; gap: 6px; }
.oa-totais { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.oa-total { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.oa-total strong { font-size: var(--fs-4); }
.oa-total .small { font-size: var(--fs-1); }
.oa-hint { margin: 0; font-size: var(--fs-1); color: var(--ink-faint); line-height: 1.4; }
.oa-hint.oa-erro { color: var(--danger); }
.oa-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.oa-botoes .oa-principal { flex: 1 1 100%; }
.oa-botoes .btn { flex: 1 1 auto; }

.oa-etapa { margin: 0; font-size: var(--fs-1); color: var(--ink-soft); }
.oa-vazio { padding: 18px 12px; font-size: var(--fs-2); }
.oa-lendo { display: flex; flex-direction: column; gap: 10px; }
.oa-skel { height: 56px; }
.oa-trava {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink);
  font-size: var(--fs-2);
}
.oa-trava .small { margin-left: auto; }
.oa-trava.is-erro { background: var(--danger-soft); color: var(--danger); }

/* Lista de exames: cartões com alça, ordem, linha lida e corpo do estado */
.oa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oa-item {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.oa-item.is-pendente { border-color: var(--warn); background: var(--warn-soft); }
.oa-item.is-ambiguo { border-color: var(--info); }
.oa-item.is-arrastando { box-shadow: var(--shadow); z-index: 2; background: var(--surface); }
.oa-item-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oa-ordem {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-muted); color: var(--ink-soft); font-size: var(--fs-1);
}
.oa-alca { flex: none; cursor: grab; touch-action: none; color: var(--ink-faint); }
.oa-alca:active { cursor: grabbing; }
.oa-lido {
  flex: 1; min-width: 0; font-size: var(--fs-1); color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oa-exame { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.oa-nome { font-weight: var(--fw-2); min-width: 0; overflow-wrap: anywhere; }
.oa-valor { white-space: nowrap; font-weight: var(--fw-2); }
.oa-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.oa-linha .select { flex: 1 1 200px; min-width: 0; height: var(--control-h-sm); font-size: var(--fs-1); }
.oa-prest-unico { font-size: var(--fs-1); color: var(--ink-soft); }
.oa-obs { margin: 0; font-size: var(--fs-1); color: var(--ink-soft); }
.oa-aviso { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--fs-2); }
.oa-motivo { font-size: var(--fs-2); color: var(--warn); font-weight: var(--fw-2); }
.oa-codigo { font-size: var(--fs-1); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.oa-pendente-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.oa-pode { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.oa-pode-opcao {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%;
  padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; text-align: left; font-size: var(--fs-1); color: var(--ink);
}
.oa-pode-opcao:hover { border-color: var(--accent); background: var(--accent-softer); }
.oa-pode-opcao small { color: var(--ink-soft); }
.oa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-chip { height: 28px; }
.oa-chip:disabled { opacity: .5; cursor: not-allowed; }
.oa-modo { align-self: flex-start; }

/* Linha de quantidade e data/hora do item */
.oa-rodape-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding-top: 8px; border-top: 1px dashed var(--line);
}
.oa-qtd { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); }
.oa-qtd-in { width: 68px; height: var(--control-h-sm); font-size: var(--fs-1); text-align: center; }
.oa-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oa-acoes-fim { margin-left: auto; }

/* Data e hora: botão + popover com calendário do mês (desenho do CRM33) */
.oa-agenda { position: relative; }
.oa-agenda-gatilho { gap: 6px; color: var(--ink-soft); }
.oa-agenda-gatilho.is-com-data { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-softer); }
.oa-agenda-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 292px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.oa-agenda-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oa-agenda-cab div { display: flex; flex-direction: column; gap: 2px; }
.oa-agenda-cab small { font-size: var(--fs-1); }
.oa-cal { display: flex; flex-direction: column; gap: 6px; }
.oa-cal-mes { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oa-cal-mes strong { font-size: var(--fs-2); font-weight: var(--fw-2); }
.oa-cal-semana, .oa-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.oa-cal-semana span { text-align: center; font-size: var(--fs-1); color: var(--ink-faint); padding: 2px 0; }
.oa-cal-dia {
  height: 32px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: var(--fs-2); color: var(--ink); font-variant-numeric: tabular-nums;
}
.oa-cal-dia:hover { background: var(--surface-muted); }
.oa-cal-dia.is-hoje { box-shadow: inset 0 0 0 1px var(--accent); }
.oa-cal-dia.is-sel, .oa-cal-dia[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.oa-agenda-hora { display: flex; align-items: center; gap: 8px; }
.oa-agenda-hora .small { margin-right: auto; }
.oa-agenda-hora .select { width: 74px; height: var(--control-h-sm); font-size: var(--fs-2); }
.oa-agenda-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.oa-agenda-foot .btn { min-width: 84px; }

/* Topo do editor: "Prestador" e "Buscar exame" numa linha só (como o CRM33). Quando a ficha passa
 * `topo`, esta linha gruda abaixo da faixa de orçamentos. O resultado abre por baixo, sobre os itens,
 * sem empurrá-los. Estreito (< 300 px): empilha. */
.oa-busca-linha { display: grid; grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.6fr) auto; gap: 6px; align-items: center; min-width: 0; }
@container (max-width: 299px) { .oa-busca-linha { grid-template-columns: minmax(0, 1fr); } }
.oa-prest { position: relative; min-width: 0; }
.oa-prest-in { height: var(--control-h-sm); font-size: var(--fs-1); }
.oa-busca-campo { min-width: 0; }
.oa-busca-campo .input { width: 100%; min-width: 0; height: var(--control-h-sm); font-size: var(--fs-2); }
/* Anel de foco dentro da caixa (não estoura o campo) */
.oa-busca-campo .input:focus, .oa-prest-in:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.oa-opcoes {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-width: 320px; max-height: 240px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.oa-opcoes[hidden] { display: none; }
.oa-opcao { padding: 6px 8px; border-radius: var(--radius-xs); font-size: var(--fs-1); color: var(--ink); cursor: pointer; }
.oa-opcao.is-ativo { background: var(--accent-soft); }
.oa-opcao.is-sel { font-weight: var(--fw-2); }
.oa-opcao[aria-disabled="true"] { cursor: default; color: var(--ink-faint); }
.oa-res-bloco {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 25;
  display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.oa-res-bloco:empty { display: none; }
.oa-res-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.oa-resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.oa-res {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px;
  padding: 6px 8px; border-radius: var(--radius-xs); cursor: pointer; color: var(--ink);
}
.oa-res:hover { background: var(--surface-muted); }
.oa-res.is-ativo, .oa-res.is-ativo:hover { background: var(--accent-soft); }
.oa-res.is-bloq:hover { background: transparent; }
.oa-res.is-sel .oa-res-nome { color: var(--accent); }
.oa-res[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; }
.oa-res-nome { font-weight: var(--fw-2); font-size: var(--fs-2); }
.oa-res-sub { font-size: var(--fs-1); color: var(--ink-soft); }
.oa-res-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 6px 8px; font-size: var(--fs-1); }
.oa-alvo { margin: 0; font-size: var(--fs-1); color: var(--accent); }
.oa-etapa-campo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-1); }
.oa-etapa-campo .select { height: var(--control-h-sm); font-size: var(--fs-1); max-width: 170px; min-width: 0; padding-right: 26px; }

/* ---------- Emissão de guia (modal) ---------- */
.gu { display: flex; flex-direction: column; gap: 12px; }
.gu-resumo { margin: 0; }
.gu-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); }
.gu-itens li { display: flex; justify-content: space-between; gap: 8px; }
.gu-total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.gu-total strong { font-size: var(--fs-4); }
.gu-form { display: flex; flex-direction: column; gap: 10px; }
.gu-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gu-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gu-etapa { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2); }
.gu-etapa[data-estado="espera"] { color: var(--ink-faint); }
.gu-etapa[data-estado="ativo"] { color: var(--warn); }
.gu-etapa[data-estado="ok"] { color: var(--ok); }
.gu-etapa[data-estado="erro"] { color: var(--danger); }
.gu-etapa[data-estado="ativo"] .gu-ico { animation: girar 0.9s linear infinite; }
.gu-ico { display: inline-flex; width: 18px; justify-content: center; flex: none; }
.gu-ok { display: flex; flex-direction: column; gap: 4px; }
.gu-dica { margin: 0; font-size: var(--fs-1); color: var(--ink-faint); }
.gu-rodape { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; width: 100%; }
.gu-cenario { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1 1 200px; }
.gu-cenario .select { height: var(--control-h-sm); font-size: var(--fs-1); }
.gu-botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

@media (max-width: 480px) {
  .gu-duas { grid-template-columns: 1fr; }
  .gu-botoes .btn { flex: 1 1 auto; }
}

/* Cartões compactos: duas linhas por item */
.oa-item { padding: 8px 10px; gap: 6px; }
.oa-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oa-alca { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; padding: 0; cursor: grab; color: var(--ink-faint); touch-action: none; }
.oa-alca:hover { color: var(--ink-soft); }
.oa-ordem { width: 20px; height: 20px; font-size: var(--fs-1); }
.oa-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oa-titulo .oa-nome { font-size: var(--fs-2); line-height: 1.3; overflow-wrap: anywhere; }
.oa-lido { font-size: var(--fs-1); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-head .oa-valor { font-size: var(--fs-2); }
.oa-linha { gap: 6px 8px; }
.oa-linha .select.oa-prest { flex: 0 1 230px; height: 28px; }
.oa-qtd { font-size: var(--fs-1); }
.oa-qtd-in { width: 56px; height: 28px; }
.oa-agenda-gatilho { height: 28px; }
.oa-agenda-pop { left: auto; right: 0; }
.oa-fim { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.oa-lixo { width: 28px; height: 28px; }
.oa-linha .btn-sm { height: 28px; }
.oa-escolha { display: flex; flex-direction: column; gap: 6px; }
.oa-escolha-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oa-escolha-titulo { font-weight: var(--fw-2); font-size: var(--fs-2); }
.oa-escolha-cab .oa-modo { margin-left: auto; }
.oa-motivo { margin: 0; font-size: var(--fs-1); color: var(--warn); font-weight: var(--fw-2); }
.oa-obs { font-size: var(--fs-1); }

/* Rodada 3: item em uma linha (como o CRM33), busca com grupo, anel de foco contido */
.oa-item { padding: 6px 8px; gap: 4px; }
.oa-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Nome do exame inteiro: quebra de linha entre palavras, sem cortar (pedido dos atendentes) */
.oa-row .oa-nome { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); line-height: 1.25; overflow-wrap: break-word; }
.oa-row .oa-prest-txt { flex: 0 1 96px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-1); color: var(--ink-faint); }
.oa-row .oa-prest-txt.is-indisp { color: var(--warn); }
.oa-row .oa-valor { flex: none; font-size: var(--fs-2); font-weight: var(--fw-2); }
.oa-row .oa-qtd-in { flex: none; width: 44px; height: 26px; padding: 0 4px; text-align: center; font-size: var(--fs-1); }
.oa-row .btn-icon { width: 26px; height: 26px; }
.oa-row .oa-fim { display: inline-flex; align-items: center; gap: 2px; margin-left: 0; flex: none; }
.oa-row .oa-agenda-gatilho { width: 26px; height: 26px; padding: 0; justify-content: center; }
.oa-row .oa-agenda-gatilho.is-com-data { color: var(--accent); }
.oa-row .oa-alca { width: 18px; height: 26px; }
.oa-motivo { font-size: var(--fs-1); }
.oa-escolha { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; }
.oa-hint-curta { font-size: var(--fs-1); }
.oa-escolhidos { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: var(--fs-1); }
.oa-agenda-pop { overflow: visible; }

/* ---------- Rodada 4 (painel estreito): nome inteiro, prestador abaixo, busca agrupada, foco visível ---------- */
/* Exame resolvido: nome em cima (até 2 linhas), prestador abaixo e menor; valor à direita;
 * controles (quantidade de 1 dígito, data, trocar, remover) numa linha só embaixo */
.oa-row-res { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: 4px 8px; }
.oa-row-res > .oa-alca { grid-row: 1 / span 2; align-self: start; height: 22px; }
.oa-row-res > .oa-titulo { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.oa-row-res > .oa-valor { grid-column: 3; grid-row: 1; padding-top: 1px; }
.oa-row-res > .oa-ctrl { grid-column: 2 / span 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.oa-row-res .oa-agenda { display: flex; }
.oa-row-res .oa-prest-txt {
  flex: none; width: 100%; height: auto; /* a regra antiga de .oa-row dava 96px de altura aqui */
  font-size: var(--fs-1); color: var(--ink-faint); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oa-row-res .oa-valor { font-size: var(--fs-2); font-weight: var(--fw-2); white-space: nowrap; }
.oa-row-res .oa-qtd-in {
  width: 36px; height: 26px; padding: 0; text-align: center; font-size: var(--fs-1);
  -moz-appearance: textfield; appearance: textfield;
}
.oa-row-res .oa-qtd-in::-webkit-inner-spin-button,
.oa-row-res .oa-qtd-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Finalizado (leitura): sem alça nem controles, nome+prestador, quantidade fixa, valor */
.oa-row-leitura { grid-template-columns: minmax(0, 1fr) auto auto; }
.oa-row-leitura > .oa-titulo { grid-column: 1; }
.oa-row-leitura > .oa-qtd-txt { grid-column: 2; grid-row: 1; }
.oa-qtd-txt { font-size: var(--fs-1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Total secundário (repasse ao prestador): menor e sem peso de "Cliente" */
.oa-total-sec .small { font-size: var(--fs-1); }
.oa-total-sec .num { font-size: var(--fs-1); color: var(--ink-soft); font-weight: var(--fw-1, 500); }

/* Campo de busca e prestador: anel de foco inteiro, visível */
.oa-busca-campo .input:focus, .oa-prest-in:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft), inset 0 0 0 1px var(--accent);
}
.oa-anuncio { margin: 0; color: var(--accent); }

/* Resultados: grupo por procedimento, colunas alinhadas, lista com rolagem visível */
.oa-res-bloco { scrollbar-gutter: stable; scrollbar-width: thin; }
.oa-res-grupo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 8px 2px; margin-top: 2px; border-top: 1px solid var(--line);
  font-size: var(--fs-1); color: var(--ink-soft); list-style: none;
}
.oa-res-grupo:first-child { border-top: 0; margin-top: 0; }
.oa-res-grupo-nome { font-weight: var(--fw-2); color: var(--ink); overflow-wrap: break-word; min-width: 0; }
.oa-res.is-grupo { padding-left: 16px; }
.oa-res-prest { grid-column: 2; font-size: var(--fs-1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-res-valor { grid-column: 3; font-size: var(--fs-2); font-weight: var(--fw-2); white-space: nowrap; text-align: right; }
.oa-res-nome {
  grid-column: 1; min-width: 0; font-size: var(--fs-2); line-height: 1.25; overflow-wrap: break-word;
}
.oa-res-sub { grid-column: 1 / -1; }
.oa-res-mais {
  position: sticky; bottom: 0; margin: 0; padding: 14px 8px 4px; text-align: center; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface) 60%);
}
.oa-res-mais[hidden] { display: none; }

.oa-row-res .oa-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.oa-valor-unit { font-size: var(--fs-1); color: var(--ink-soft); font-weight: var(--fw-1, 500); }
/* Prestadores e Buscar exame com o mesmo campo (vence o .input da skin sem !important) */
input.input.oa-prest-in, .oa-busca-campo input.input { box-sizing: border-box; height: var(--control-h-sm); border-radius: var(--radius-sm); background: var(--surface); border-color: var(--line-strong); }