/* 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; }
/* Vida: total do cliente em destaque (v-valor, grande); repasse é metadado legível, sem disputar com o total. */
.oa-total .small, .oa-total .v-meta { font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.oa-total .num { font-size: var(--fs-2); font-weight: var(--fw-2); color: var(--ink); }
.oa-total .oa-cliente { font-size: 18px; font-weight: 700; line-height: 1.2; }
.oa-total-sec .oa-repasse { font-size: var(--fs-1); font-weight: 600; color: var(--ink-soft); }
.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; align-items: center; gap: 8px; }
/* Uma ação principal ocupa o espaço; as demais têm a largura do texto ou do ícone (32px). */
.oa-botoes .oa-principal { flex: 1 1 200px; }
.oa-botoes .btn { flex: 0 0 auto; }
.oa-botoes .btn-icon { width: 32px; height: 32px; }
@media (max-width: 600px) {
  /* Celular: a ação principal cresce e os ícones ficam na mesma linha dela */
  .oa-botoes .oa-principal { flex: 1 1 auto; }
}

/* Pessoa do orçamento: seletor na linha de busca (ver .oa-busca-linha). Sem pessoa, o orçamento é local. */
.oa .oa-pessoa-sel { min-width: 0; width: 100%; height: var(--control-h-sm); font-size: var(--fs-1); text-overflow: ellipsis; }
.oa .oa-pessoa-sel:disabled { opacity: .85; }
/* Seletor e ícone numa célula só. Escopo em .oa-cab: na ficha o cabeçalho sai de .oa (vai para a faixa do topo).
 * Abaixo de 360 px, "Outra pessoa…" vira só o ícone user-plus (com title e aria-label); o seletor encolhe. */
.oa-cab .oa-pessoa { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.oa-cab .oa-pessoa-sel { flex: 1 1 0; min-width: 0; }
.oa-cab .oa-pessoa-outra { display: none; flex: none; width: var(--control-h-sm); height: auto; align-self: stretch; padding: 0; }
@media (max-width: 359px) {
  .oa-cab .oa-pessoa-outra { display: inline-flex; align-items: center; justify-content: center; }
  .oa-cab .oa-pessoa-sel { padding-left: 6px; padding-right: 24px; }
}

.oa-etapa { margin: 0; font-size: var(--fs-1); color: var(--ink-soft); }
/* Lista vazia: uma linha de texto, sem bloco alto (vence o .empty e o .fi .empty da ficha) */
.oa .oa-vazio, .fi .oa .oa-vazio { display: block; margin: 0; padding: 4px 0; text-align: left; font-size: var(--fs-2); color: var(--ink-soft); }
.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-alca { flex: none; cursor: grab; touch-action: none; color: var(--ink-faint); }
.oa-alca:active { cursor: grabbing; }
.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-motivo { font-size: var(--fs-2); color: var(--warn); font-weight: var(--fw-2); }
.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; }
.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; }

/* 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(0, 0.9fr) minmax(96px, 0.9fr) minmax(0, 1.5fr) auto; gap: 6px; align-items: center; min-width: 0; }
@container (max-width: 299px) { .oa-busca-linha { grid-template-columns: minmax(0, 1fr); } }
/* Janela de novo orçamento (.modal) estreita: pessoa, Prestador e Buscar exame numa linha só. Vence a regra de
 * duas colunas de operacao.css (mais específica). A ficha, fora do modal, continua empilhando abaixo de 300 px. */
@container (max-width: 359px) { .modal .oa .oa-busca-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.2fr); } }
.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; }
/* "Ler pedido": ação secundária na mesma linha do campo de busca de exames. Em linha estreita fica só o ícone
 * (o aria-label e o title dizem "Ler pedido de exame"). */
.oa-busca-par { display: flex; align-items: center; gap: 6px; min-width: 0; container: oa-par / inline-size; }
.oa-busca-par .oa-busca-campo { flex: 1 1 auto; }
.oa-busca-par .oa-ler-pedido { flex: none; height: var(--control-h-sm); gap: 6px; }
@container oa-par (max-width: 300px) { .oa-ler-pedido-txt { display: none; } }
.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-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-requisitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gu-requisito { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-2); }
.gu-requisito > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gu-requisito[data-ok="true"] .gu-ico { color: var(--ok); }
.gu-requisito[data-ok="false"] .gu-ico { color: var(--warn); }
.gu-form .gu-dica { display: block; margin-top: 4px; }
.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; }
}
/* Botões só com ícone na janela de guia: não esticam como os de texto */
.gu-botoes .btn-icon { flex: 0 0 auto; }
/* Janela do orçamento (operação) no celular: a folha tem a altura do conteúdo, sem faixa vazia abaixo do rodapé.
 * base.css dá 100dvh a toda janela .jan; só esta (op-gestao-orc) volta à altura do conteúdo. */
@media (max-width: 767px) {
  :root .modal-backdrop .modal.jan.op-gestao-orc { height: auto; max-height: calc(100dvh - 32px); border-radius: 14px 14px 0 0; }
}

/* Cartões compactos: duas linhas por item */
.oa-item { padding: 8px 10px; gap: 6px; }
.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-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-linha { gap: 6px 8px; }
.oa-linha .select.oa-prest { flex: 0 1 230px; height: 28px; }
.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-motivo { margin: 0; font-size: var(--fs-1); color: var(--warn); font-weight: var(--fw-2); }

/* 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 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: 4; grid-row: 1; 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; }
.oa-qtd-txt { font-size: var(--fs-1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }


/* 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); }

/* ---------- Passada S6 / R4-1 (editor denso): exame resolvido com o nome na largura principal ----------
 * Duas linhas com papéis fixos. Linha 1: nome (quebra por palavra) e valor à direita. Linha 2: prestador
 * (com reticências) e ações (quantidade, data, trocar, remover). Valor e ações têm colunas próprias: não
 * espremem o nome. Finalizado (leitura): sem alça nem ações; nome e prestador à esquerda, valor e
 * quantidade à direita. Ações aparecem no hover ou no foco; no toque ficam com opacidade .45. */
.oa-item.is-resolvido { min-height: 36px; padding: 4px 6px; gap: 0; border-radius: var(--radius-xs); }
.oa-item.is-resolvido > .oa-row-res {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 6px; row-gap: 2px; min-height: 30px;
}
/* .oa-titulo some (display: contents): nome e prestador viram itens da grade */
.oa-item.is-resolvido > .oa-row-res > .oa-titulo { display: contents; }
.oa-item.is-resolvido > .oa-row-res > .oa-alca { grid-column: 1; grid-row: 1 / span 2; width: 16px; height: 24px; }
.oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-nome {
  grid-column: 2; grid-row: 1; min-width: 0;
  font-size: var(--fs-2); line-height: 1.2; font-weight: var(--fw-2); overflow-wrap: break-word;
}
.oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-prest-txt {
  grid-column: 2; grid-row: 2; min-width: 0;
  font-size: var(--fs-1); line-height: 1.2; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oa-item.is-resolvido > .oa-row-res > .oa-valor { grid-column: 3; grid-row: 1; justify-self: end; }
.oa-item.is-resolvido > .oa-row-res > .oa-ctrl { grid-column: 3; grid-row: 2; justify-self: end; }
.oa-item.is-resolvido .oa-valor { display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; font-size: var(--fs-2); }
.oa-item.is-resolvido .oa-valor-unit { font-size: var(--fs-1); }
.oa-item.is-resolvido .oa-ctrl {
  display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity var(--dur) var(--ease);
}
.oa-item.is-resolvido:hover .oa-ctrl,
.oa-item.is-resolvido:focus-within .oa-ctrl { opacity: 1; }
.oa-item.is-resolvido .oa-lixo:hover { color: var(--danger); }
.oa-item.is-resolvido > .oa-row-res > .oa-lixo { flex: none; }
@media (hover: none) {
  .oa-item.is-resolvido .oa-ctrl { opacity: .45; }
}
/* Finalizado (leitura): sem alça nem ações. A grade é só nome/prestador à esquerda e valor/quantidade à direita. */
.oa-item.is-resolvido.is-leitura > .oa-row-leitura { grid-template-columns: minmax(0, 1fr) auto; }
.oa-item.is-resolvido.is-leitura > .oa-row-leitura > .oa-titulo > .oa-nome { grid-column: 1; grid-row: 1; }
.oa-item.is-resolvido.is-leitura > .oa-row-leitura > .oa-titulo > .oa-prest-txt { grid-column: 1; grid-row: 2; }
.oa-item.is-resolvido.is-leitura > .oa-row-leitura > .oa-valor { grid-column: 2; grid-row: 1; }
.oa-item.is-resolvido.is-leitura > .oa-row-leitura > .oa-qtd-txt { grid-column: 2; grid-row: 2; justify-self: end; }

/* Novo orçamento (passada S7): topo mais enxuto; a lista de pessoas tem altura máxima e rola. */
.op-novo.op-novo { gap: 8px; }
.op-novo-busca.op-novo-busca { gap: 4px; }
.op-novo .op-pick-lista { min-height: 0; max-height: 160px; overflow: auto; }

/* Emissão de guia (passada S6): CPF em linha quando conhecido; rótulos 12px sem caixa alta */
.gu-cpf-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 32px; font-size: var(--fs-2); }
.gu-cpf-linha.hidden, .gu-cpf-campo.hidden { display: none; }
.gu-cpf-rotulo { font-size: var(--fs-1); color: var(--ink-soft); }
.gu-cpf-valor { font-weight: var(--fw-2); margin-right: auto; }
.gu .field > .label, .gu .gu-cpf-rotulo { text-transform: none; letter-spacing: 0; font-size: var(--fs-1); }

/* Rótulos da busca de pessoa sem caixa-alta ("Buscar pessoa", não "BUSCAR PESSOA"). A regra de origem
 * (.op-novo-rotulo em operacao.css) fica como está; aqui a classe dobrada vence sem mexer nela. */
.op-novo-rotulo.op-novo-rotulo { text-transform: none; letter-spacing: 0; }

/* ---------- Revisão 07/11/2026: item resolvido em uma linha, como no CRM 33 Maringá ----------
 * Alça · nome · prestador (logo depois, mais claro) · valor. As ações (quantidade, data, trocar, remover)
 * aparecem sobre o fim da linha no hover/foco, sem ocupar coluna própria. Lista sem caixas: filete fino. */
:root .oa-lista { gap: 0; }
:root .oa-item.is-resolvido {
  position: relative; min-height: 32px; padding: 4px 6px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-hair); background: transparent; box-shadow: none;
}
:root .oa-item.is-resolvido:last-child { border-bottom: 0; }
:root .oa-item.is-resolvido > .oa-row-res {
  display: flex; align-items: center; gap: 6px; min-height: 24px; grid-template-rows: none;
}
:root .oa-item.is-resolvido > .oa-row-res > .oa-alca { flex: none; width: 16px; height: 22px; }
:root .oa-item.is-resolvido > .oa-row-res > .oa-titulo {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px; flex: 1 1 auto; min-width: 0;
}
:root .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-nome {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal;
}
:root .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-prest-txt { flex: 0 3 auto; width: auto; max-width: none; min-width: 0; color: var(--ink-faint); }
:root .oa-item.is-resolvido > .oa-row-res > .oa-valor { flex: none; margin-left: auto; }
:root .oa-item.is-resolvido > .oa-row-res > .oa-ctrl {
  /* Sem transform aqui: um transform no ancestral prende o popover de data ao controle e ele rola com a lista. */
  position: absolute; right: 4px; top: 4px; bottom: 4px; display: flex; align-items: center;
  padding: 0 2px 0 10px; background: linear-gradient(90deg, transparent, var(--surface) 12px);
  pointer-events: none;
}
:root .oa-agenda-pop { pointer-events: auto; }
:root .oa-item.is-resolvido:hover > .oa-row-res > .oa-ctrl,
:root .oa-item.is-resolvido:focus-within > .oa-row-res > .oa-ctrl { pointer-events: auto; }
:root .oa-item.is-resolvido.is-leitura > .oa-row-leitura > .oa-qtd-txt { flex: none; color: var(--ink-faint); }
@media (hover: none) {
  :root .oa-item.is-resolvido > .oa-row-res > .oa-ctrl { position: static; background: none; padding: 0; pointer-events: auto; }
}

/* Trava do laboratório em uma linha; "Trocar" no fim. */
:root .oa-trava { flex-wrap: nowrap; padding: 5px 6px 5px 10px; gap: 6px; }
:root .oa-trava-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .oa-trava .oa-trava-trocar { flex: none; height: 24px; padding: 0 8px; }

/* Data e hora do item: só o ícone, sem borda. */
:root .oa-agenda-gatilho { border-color: transparent; background: transparent; box-shadow: none; }
:root .oa-agenda-gatilho:hover { background: var(--surface-muted); }
:root .oa-agenda-gatilho.is-com-data { border-color: transparent; background: var(--accent-softer); }
:root .oa-item:not(.is-resolvido) { margin: 4px 0; }
/* Sem a pessoa na linha (ela foi para a faixa da ficha): prestador e busca dividem a largura. */
:root .oa-busca-linha:not(:has(> .oa-pessoa)) { grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.6fr) auto; }
/* O popover de data fica dentro do controle da linha: o fade vai para os botões de ação, não para o
 * contêiner. Com opacity no contêiner, o calendário sumia quando o foco saía do botão de data. */
:root .oa-item.is-resolvido .oa-ctrl { opacity: 1; transition: none; }
:root .oa-item.is-resolvido .oa-ctrl > :not(.oa-agenda) { opacity: 0; transition: opacity var(--dur) var(--ease); }
:root .oa-item.is-resolvido:hover .oa-ctrl > :not(.oa-agenda),
:root .oa-item.is-resolvido:focus-within .oa-ctrl > :not(.oa-agenda) { opacity: 1; }
@media (hover: none) {
  :root .oa-item.is-resolvido .oa-ctrl > :not(.oa-agenda) { opacity: .45; }
}

/* ---------- Design system 90 (E6): edição sempre aberta, sem contorno, totais em tile ---------- */
/* Lixeira de cada item sempre visível (a edição nunca fecha); as demais ações aparecem no hover/foco, à esquerda dela. */
:root .oa-item.is-resolvido > .oa-row-res > .oa-lixo { position: relative; z-index: 1; }
/* Rodapé: hierarquia clara (1 primária), utilitárias em grupo, opções de "Emitir guia" com alteração pendente. */
.oa-util { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.oa-emitir-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.oa-emitir-opcoes .btn { flex: 1 1 auto; white-space: normal; height: auto; min-height: var(--control-h); padding-top: 4px; padding-bottom: 4px; }
/* Etapa do orçamento: linha do tempo de bolinhas dentro do cartão */
.oa-etapas { padding: 2px 4px 6px; min-width: 0; }

/* Busca: Prestador e exame em 2 linhas abaixo de 460 px (pessoa + prestador em cima, busca embaixo). Só no Moderno. */
@container (max-width: 459px) {
  :root:not([data-visual]) .oa-busca-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :root:not([data-visual]) .oa-busca-linha:not(:has(> .oa-pessoa)) { grid-template-columns: minmax(0, 1fr); }
  :root:not([data-visual]) .oa-busca-linha > .oa-busca-par, :root:not([data-visual]) .oa-busca-linha > .oa-busca-campo { grid-column: 1 / -1; }
}
@container (max-width: 299px) {
  :root:not([data-visual]) .oa-busca-linha, :root:not([data-visual]) .oa-busca-linha:not(:has(> .oa-pessoa)) { grid-template-columns: minmax(0, 1fr); }
}

/* --- Visual Moderno: sem linha de contorno; tom, volume e cor com sentido (o HubMed fica como estava) --- */
:root:not([data-visual]) .oa-rodape {
  padding: 10px 12px; border-top: 0; border-radius: var(--radius);
  background: var(--textura); box-shadow: var(--brilho), var(--elev-1);
}
:root:not([data-visual]) .oa-totais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
/* Sem financeiro (só "Cliente"): o tile ocupa a linha. Etapas e selos sempre em linha própria. */
:root:not([data-visual]) .oa-totais:not(:has(.oa-total-sec)) > .oa-total { grid-column: 1 / -1; }
:root:not([data-visual]) .oa-totais > :not(.oa-total) { grid-column: 1 / -1; }
:root:not([data-visual]) .oa-total { padding: 6px 10px; border-radius: var(--radius-sm); background: var(--tonal); justify-content: center; }
:root:not([data-visual]) .oa-total .oa-cliente { font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; }
:root:not([data-visual]) .oa-total .oa-nota { font-size: 11px; line-height: 1.2; color: var(--warn); }
:root:not([data-visual]) .oa-totais > .badge {
  align-self: center; justify-self: start; height: 22px; padding: 0 10px; border: 0; border-radius: var(--radius-pill);
  font-size: var(--fs-1); font-weight: 650;
}
:root:not([data-visual]) .oa-etapas { grid-column: 1 / -1; order: -1; padding: 0 4px 4px; }
:root:not([data-visual]) .oa-botoes .btn { border: 0; }
:root:not([data-visual]) .oa-botoes .btn-icon { background: transparent; box-shadow: none; }
:root:not([data-visual]) .oa-botoes .btn-icon:hover:not(:disabled) { background: var(--tonal-hover); }
:root:not([data-visual]) .oa-util { padding: 2px; border-radius: var(--radius-sm); background: var(--tonal); }
:root:not([data-visual]) .oa-util .btn-icon { width: var(--control-h-sm); height: var(--control-h-sm); }

/* Itens: sem caixa contornada */
:root:not([data-visual]) .oa-item { border: 0; background: var(--tonal); box-shadow: none; }
:root:not([data-visual]) .oa-item.is-pendente { background: var(--warn-soft); }
:root:not([data-visual]) .oa-item.is-ambiguo { background: var(--info-soft); }
:root:not([data-visual]) .oa-item.is-arrastando { background: var(--surface); box-shadow: var(--elev-3); }
:root:not([data-visual]) .oa-item.is-resolvido { background: transparent; }
:root:not([data-visual]) .oa-pode-opcao { border: 0; background: var(--tonal); }
:root:not([data-visual]) .oa-pode-opcao:hover { background: var(--tonal-hover); }
:root:not([data-visual]) .oa-agenda-gatilho.is-com-data { background: var(--accent-soft); }

/* Popovers e listas flutuantes: volume em vez de contorno, fundo opaco */
:root:not([data-visual]) .oa-agenda-pop { border: 0; background: var(--surface); box-shadow: var(--elev-3); }
:root:not([data-visual]) .oa-opcoes, :root:not([data-visual]) .oa-res-bloco { border: 0; background: var(--surface); box-shadow: var(--elev-3); }
:root:not([data-visual]) .oa-agenda-foot, :root:not([data-visual]) .gu-total, :root:not([data-visual]) .oa-res-grupo { border-top-color: var(--line-hair); }

/* Campos de prestador e de busca: tonais, sem borda; foco = superfície + anel */
:root:not([data-visual]) input.input.oa-prest-in, :root:not([data-visual]) .oa-busca-campo input.input {
  border: 0; background: var(--tonal);
}
:root:not([data-visual]) input.input.oa-prest-in:hover, :root:not([data-visual]) .oa-busca-campo input.input:hover { background: var(--tonal-hover); }
:root:not([data-visual]) input.input.oa-prest-in:focus, :root:not([data-visual]) .oa-busca-campo input.input:focus {
  background: var(--surface); border: 0; outline: none; box-shadow: var(--anel-foco);
}
:root:not([data-visual]) .oa-qtd-in, :root:not([data-visual]) .oa-row-res .oa-qtd-in { border: 0; background: var(--tonal); }

/* Linha do exame (Moderno), como no CRM 33 antigo: UMA linha de ~36 px.
 * alça · nome (reticências + title) · clínica pequena · [Qtd · calendário · trocar] · valor · lixeira.
 * Ações numa coluna fixa à direita. Abaixo de ~420 px de painel (js: data-estreito no .oa-corpo) quebra em 2 linhas:
 * nome · valor · lixeira em cima; clínica · ações embaixo. */
:root:not([data-visual]) .oa-item.is-resolvido { padding: 4px 6px; min-height: 36px; }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) max-content max-content auto; grid-template-rows: auto;
  align-items: center; column-gap: 6px; row-gap: 2px; min-height: 28px;
}
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-alca { grid-column: 1; grid-row: 1; align-self: center; }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-titulo {
  grid-column: 2; grid-row: 1; display: flex; flex-direction: row; align-items: baseline; gap: 6px; min-width: 0;
}
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-nome {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; line-height: 1.25;
}
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-prest-txt {
  flex: 0 3 auto; min-width: 0; width: auto; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-1); color: var(--ink-faint); line-height: 1.25;
}
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-ctrl {
  grid-column: 3; grid-row: 1; position: static; inset: auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
  padding: 0; background: none; box-shadow: none; opacity: 1; pointer-events: auto; transition: none;
}
:root:not([data-visual]) .oa-item.is-resolvido .oa-ctrl > :not(.oa-agenda) { opacity: 1; }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-valor {
  grid-column: 4; grid-row: 1; margin: 0; justify-self: end; flex-direction: row; align-items: baseline; gap: 0; white-space: nowrap;
}
:root:not([data-visual]) .oa-item.is-resolvido .oa-valor-unit { display: none; }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-lixo { grid-column: 5; grid-row: 1; width: var(--control-h-sm); height: var(--control-h-sm); }
:root:not([data-visual]) .oa-item.is-resolvido .oa-qtd-in { width: 40px; height: var(--control-h-sm); padding: 0 2px; }
:root:not([data-visual]) .oa-item.is-resolvido .oa-agenda-gatilho {
  width: auto; min-width: var(--control-h-sm); height: var(--control-h-sm); padding: 0 6px; gap: 4px; justify-content: center; white-space: nowrap;
  background: transparent; border: 0; color: var(--ink-soft); font-size: var(--fs-1); font-weight: 560;
}
:root:not([data-visual]) .oa-item.is-resolvido .oa-agenda-gatilho:hover { background: var(--tonal-hover); }
:root:not([data-visual]) .oa-item.is-resolvido .oa-agenda-gatilho.is-com-data { background: var(--accent-soft); color: var(--accent); }
:root:not([data-visual]) .oa-item.is-resolvido .oa-agenda-gatilho svg { color: currentColor; flex: none; }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res .oa-ctrl > .btn-icon { width: var(--control-h-sm); height: var(--control-h-sm); }
:root:not([data-visual]) .oa-item.is-resolvido > .oa-row-res > .oa-ctrl > .oa-agenda { order: 0; }
/* Painel estreito (< ~420 px): 2 linhas. .oa-titulo some (display: contents) e nome/clínica viram itens da grade. */
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res { grid-template-columns: 18px minmax(0, 1fr) max-content auto; grid-template-rows: auto auto; row-gap: 0; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-alca { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-titulo { display: contents; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-nome { grid-column: 2; grid-row: 1; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-titulo > .oa-prest-txt { grid-column: 2; grid-row: 2; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-valor { grid-column: 3; grid-row: 1; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-lixo { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido > .oa-row-res > .oa-ctrl { grid-column: 3; grid-row: 2; justify-self: end; }
:root:not([data-visual]) .oa-item.is-resolvido .oa-trocar:hover { color: var(--ink); }
/* Primária de conteúdo (padding 0 12px), não esticada; ícones utilitários à direita. No celular ela cresce. */
:root:not([data-visual]) .oa-botoes .oa-principal { flex: 0 1 auto; }
:root:not([data-visual]) .oa-botoes .oa-util { margin-left: auto; }
:root:not([data-visual]) .oa-botoes .oa-situacao { display: inline-flex; align-items: center; }
@media (max-width: 420px) {
  :root:not([data-visual]) .oa-botoes .oa-principal { flex: 1 1 auto; }
}
:root:not([data-visual]) .oa:has(.oa-corpo[data-estreito]) .oa-botoes .oa-principal { flex: 1 1 auto; }
:root:not([data-visual]) .oa-corpo[data-estreito] .oa-item.is-resolvido { padding: 2px 6px; }
/* Totais: Cliente · Prestador · Lucro lado a lado */
:root:not([data-visual]) .oa-total-sec .oa-repasse { font-size: var(--fs-4); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
:root:not([data-visual]) .oa-lucro .oa-repasse { color: var(--ok); }
/* Aviso "exame adicionado" (aria-live): flutua sobre o fim do cabeçalho e não empurra a lista a cada inclusão. */
:root:not([data-visual]) .oa-anuncio {
  position: absolute; right: 6px; top: 100%; z-index: 3; margin: 2px 0 0; padding: 2px 10px; max-width: calc(100% - 12px);
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
}
