/* Orçamentos e Guias (área Operação): só layout. Cores de status vêm de tokens.css; botões,
 * seg, select, tabela, painel e kpi vêm de base.css. Espaçamento: 12 px entre painéis; 12 px
 * dentro. Botões de 28 px (btn-sm) e ícones de 14 px. Quebra de linha por container query no
 * painel (.op-panel), não pela janela. */

.page.op-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }

/* Cabeçalho da área: abas à esquerda, "Novo orçamento" em destaque no canto */
.op-cab { flex: none; flex-direction: row; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px 0 0; }
.op-abas { flex: 1; min-width: 0; border-bottom: 0; padding: 0 0 0 10px; }
.op-btn-novo { flex: none; }
.op-leitura {
  flex: none; white-space: nowrap; font-size: var(--fs-1); color: var(--ink-soft);
  background: var(--surface-muted); border-radius: var(--radius-pill); padding: 4px 10px; margin-right: 4px;
}
.op-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.op-panel { flex: 1; min-height: 0; container-type: inline-size; }
.op-body { flex: 1; min-height: 0; overflow: auto; padding: 0; }

/* Barra de filtros: uma linha (situação, período, filtros de lista, visão, selo do HubMed) */
.op-barra {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 12px; background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.op-barra .seg button { padding: 3px 10px; font-size: var(--fs-1); white-space: nowrap; }
.op-periodo-host, .op-filtros { display: contents; }
.op-barra .op-periodo-host .seg { flex: none; }
.op-campo { min-width: 0; display: flex; }
.op-campo .select {
  height: var(--control-h-sm); min-width: 150px; max-width: 210px; padding: 0 26px 0 8px;
  font-size: var(--fs-1);
}
.op-campo .select:focus-visible { outline-offset: -2px; }
.op-funil { display: none; position: relative; }
.op-funil.is-ativo::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}
.op-vistas { flex: none; }
.op-vistas button { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; line-height: 0; }
.op-frescor-slot { display: flex; align-items: center; margin-left: auto; min-width: 0; }
.op-frescor { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.op-frescor .freshness { font-size: var(--fs-1); color: var(--ink-faint); white-space: nowrap; }

/* Painel estreito (< 1260 px): filtros de lista recolhem no funil e abrem numa toolbar */
@container (max-width: 1259px) {
  .op-filtros { display: none; }
  .op-funil { display: inline-flex; }
  .op-barra.funil-aberto .op-filtros {
    display: flex; flex: 1 1 100%; order: 10; flex-wrap: wrap; gap: 8px;
    padding-top: 8px; border-top: 1px solid var(--line);
  }
  .op-barra.funil-aberto .op-campo .select { min-width: 0; max-width: none; flex: 1 1 180px; }
}

/* Painel muito estreito (celular): situação ocupa a linha; período e visão dividem a seguinte */
@container (max-width: 639px) {
  .op-sit { flex: 1 1 100%; display: flex; }
  .op-sit button { flex: 1 1 auto; padding: 4px 4px; }
  .op-barra .op-periodo-host .seg { flex: 1 1 auto; min-width: 0; }
  .op-barra .op-periodo-host .seg button { flex: 1 1 auto; padding: 3px 5px; }
  .op-frescor-slot { flex: 1 1 100%; margin-left: 0; }
  .op-barra.funil-aberto .op-filtros { order: 11; }
}

/* Resumo (mesmo padrão dos números de Resultados: cartões .kpi) */
.page .op-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
  padding: 10px 12px 0; flex: none;
}
.op-resumo .kpi { padding: 8px 12px; }
.op-resumo .kpi-num { font-size: var(--fs-4); }

/* Lista: ordenação no cabeçalho e ações na linha */
.op-sort {
  border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.op-table td { height: 34px; }
.op-table th { height: 32px; }
.op-table th.num { text-align: right; }
.op-table th.num .op-sort { width: 100%; justify-content: flex-end; }
.op-table .op-itens { max-width: 260px; }
.op-table td > .ellipsis { max-width: 220px; }
.op-table td { white-space: nowrap; }
.op-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.op-table td .op-aviso { white-space: normal; max-width: 240px; }
.op-aviso { font-size: var(--fs-1); color: var(--warn); }
.op-motivo { white-space: normal; max-width: 220px; }
.op-acoes { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
.op-dica { display: inline-flex; }
.op-saindo { opacity: 0; transform: translateX(-12px); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.op-skel { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.op-skel-linha { height: 36px; }
.op-det { display: none; }
.op-table tbody tr.op-linha { cursor: pointer; }
.op-table tbody tr.op-linha.aberto + tr.op-det { display: table-row; }
.op-table tr.op-det > td { height: auto; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); white-space: normal; background: var(--surface-soft); }
.op-det-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; font-size: var(--fs-2); }
.op-det-kv dt { color: var(--ink-faint); font-size: var(--fs-1); padding-top: 2px; }
.op-det-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.op-det-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.op-pag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-btn-novo[hidden] { display: none !important; }

/* Ações: ícones de 14 px (title e aria-label dizem a ação). O texto aparece nos cartões, no celular
 * e nas telas largas (painel com 1100 px ou mais); estreito, fica só o ícone com title e aria-label. */
.op-acoes .op-btn-txt { display: none; }
.op-card-acoes .op-btn-txt { display: inline; }
.op-acoes .btn[aria-busy="true"] { width: auto; padding: 0 8px; }
.op-perigo { color: var(--danger); }
@container (min-width: 1100px) {
  .op-acoes .op-btn-txt { display: inline; }
  .op-acoes .btn-icon { width: auto; padding: 0 8px; gap: 4px; }
}
.op-exame { font-size: var(--fs-1); }

/* Agenda: horários por dia (operacao/agenda.js) */
.op-agenda-barra { flex-wrap: wrap; }
.op-agenda-periodo button { padding: 3px 10px; font-size: var(--fs-1); white-space: nowrap; }
.op-agenda { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.op-agenda-dia { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-agenda-dia-tit { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-2); color: var(--ink-soft); }
.op-agenda-lista {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface);
}
.op-agenda-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 12px; min-width: 0; border-bottom: 1px solid var(--line);
}
.op-agenda-item:last-child { border-bottom: 0; }
.op-agenda-hora { font-variant-numeric: tabular-nums; }
.op-agenda-corpo { display: flex; flex-direction: column; min-width: 0; }
.op-agenda-paciente, .op-agenda-exame { min-width: 0; }
.op-agenda-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@container (max-width: 639px) {
  .op-agenda-item { grid-template-columns: 48px minmax(0, 1fr); }
  .op-agenda-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}
.op-table .op-cli .op-aviso { margin-top: 1px; }

/* Calendário: quadro pequeno das semanas do período; ao lado (abaixo no celular), os cartões do dia */
.op-cal-split {
  flex: 1; display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 16px; align-items: start; padding: 12px; min-height: 0;
}
@container (max-width: 759px) { .op-cal-split { grid-template-columns: minmax(0, 1fr); } }
.op-cal { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-cal-semana, .op-cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.op-cal-semana { font-size: var(--fs-1); color: var(--ink-faint); text-align: center; padding-bottom: 2px; }
.op-cal-dia {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 32px; padding: 2px 0; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--ink-faint); cursor: pointer; font: inherit; font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.op-cal-dia.tem { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.op-cal-dia:hover { background: var(--surface-muted); }
.op-cal-dia:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.op-cal-dia.is-hoje .op-cal-num { color: var(--accent); font-weight: var(--fw-2); }
.op-cal-dia[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.op-cal-num { font-size: var(--fs-2); line-height: 1; }
.op-cal-pontos { display: flex; gap: 2px; height: 5px; align-items: center; }
.op-cal-vazio { min-height: 36px; }
.op-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--st, var(--ink-faint)); }
.op-dia { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.op-dia-tit { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-2); }
.op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 320px)); justify-content: start; gap: 8px; }
.op-vazio { margin: 4px 0; }

/* Cartão de orçamento ou guia: a cor da borda e do selo vem do status (op-st-*) */
.op-card {
  --st: var(--line-strong); --st-soft: var(--surface-muted);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 8px 10px 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--st);
  border-radius: var(--radius-sm); background: var(--surface);
}
.op-card-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-card-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.op-card-cli { font-weight: var(--fw-2); min-width: 0; }
.op-card-rod { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-card-rod > .ellipsis { flex: 1 1 auto; min-width: 0; }
.op-card-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.op-card-acoes .btn-icon { width: auto; }
.op-card-quando { margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.op-card.op-saindo { opacity: 0; }

/* Aviso de orçamento (?orcamento=<id>): linha ou cartão em destaque até o filtro mudar */
.op-table tbody tr.op-linha.op-destacada td { background: var(--accent-softer); box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.op-table tbody tr.op-linha.op-destacada td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.op-card.op-destacada { box-shadow: 0 0 0 2px var(--accent); }

/* Status (cores de tokens.css; estados nunca usam a cor do tema, exceto o accent de "agendado") */
.op-st-aberto { --st: var(--info); --st-soft: var(--info-soft); }
.op-st-agendado { --st: var(--accent); --st-soft: var(--accent-soft); }
.op-st-finalizado { --st: var(--ok); --st-soft: var(--ok-soft); }
.op-st-cancelado, .op-st-cancelada { --st: var(--danger); --st-soft: var(--danger-soft); }
.op-st-emitida { --st: var(--ok); --st-soft: var(--ok-soft); }
.op-st-badge { background: var(--st-soft); color: var(--st); }

/* Novo orçamento (modal): escolha de cliente e, depois, o orçamento assistido */
.op-novo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.op-pick { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.op-pick > p { margin: 0; }
.op-pick-lista {
  display: flex; flex-direction: column; min-height: 96px; max-height: 52vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.op-pick-aviso { padding: 14px 12px; }
.op-pick-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 6px 12px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.op-pick-item:last-child { border-bottom: 0; }
.op-pick-item:hover:not(:disabled) { background: var(--surface-soft); }
.op-pick-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.op-pick-item:disabled { cursor: default; color: var(--ink-faint); }
.op-pick-txt { display: flex; flex-direction: column; min-width: 0; }
.op-pick-item .badge { flex: none; }
.op-pick-sub { font-size: var(--fs-1); color: var(--ink-soft); }
.op-novo-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.op-novo-topo > .strong { min-width: 0; }
.op-novo-editor { min-width: 0; }

/* Celular: linha compacta (nº · cliente · total · estado); tocar abre o detalhe */
.op-table.op-compacto td.op-cli { width: 100%; max-width: 0; }
.op-table.op-compacto td.op-cli .ellipsis { max-width: 100%; }

/* Guias (e outras listas em cartão) no celular: cada linha vira um cartão */
@media (max-width: 767px) {
  .op-cab { padding-right: 8px; gap: 8px; }
  .op-abas { padding-left: 4px; }
  .op-leitura { font-size: 11px; padding: 3px 8px; }
  .op-main { gap: 0; }
  .op-page .op-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
  .op-resumo .kpi { padding: 6px 8px; }
  .op-resumo .kpi-num { font-size: var(--fs-3); }
  .op-cal-split { gap: 12px; padding: 10px; }
  .op-cal-dia { min-height: 40px; }
  .op-cards { grid-template-columns: minmax(0, 1fr); }

  /* Orçamentos: linha compacta */
  .op-table.op-compacto td { height: 40px; padding: 0 8px; }
  .op-table.op-compacto th { padding: 0 8px; }
  .op-table.op-compacto .op-so-desk { display: none; }
  .op-table.op-compacto td.op-cli .strong { font-weight: var(--fw-2); }
  .op-table.op-compacto tbody tr.op-linha td { border-bottom: 0; }
  .op-table.op-compacto tbody tr.op-linha { border-bottom: 1px solid var(--line); cursor: pointer; }
  .op-table.op-compacto tbody tr.op-linha.aberto { background: var(--surface-soft); }
  .op-table.op-compacto tbody tr.op-linha td.num { width: 1%; }
  .op-table.op-compacto tbody tr.op-linha.aberto + tr.op-det { display: table-row; }
  .op-table.op-compacto tr.op-det > td { height: auto; padding: 8px 12px 14px; border-bottom: 1px solid var(--line); white-space: normal; background: var(--surface-soft); }
  .op-det-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 10px; font-size: var(--fs-2); }
  .op-det-kv dt { color: var(--ink-faint); font-size: var(--fs-1); padding-top: 2px; }
  .op-det-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
  .op-det-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

  /* Guias: cartão por linha com rótulo em cada campo */
  .op-table:not(.op-compacto) thead { display: none; }
  .op-table:not(.op-compacto), .op-table:not(.op-compacto) tbody { display: block; width: 100%; }
  .op-table:not(.op-compacto) tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 6px 8px;
    padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .op-table:not(.op-compacto) tbody tr:hover { background: var(--surface); }
  .op-table:not(.op-compacto) td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
    height: auto; padding: 0; border: 0; white-space: normal; text-align: left;
  }
  .op-table:not(.op-compacto) td::before { content: attr(data-label); font-size: var(--fs-1); color: var(--ink-faint); }
  /* Guia e Total dividem a primeira linha; paciente e ações ocupam a largura toda */
  .op-table:not(.op-compacto) td[data-label="Guia"] { grid-column: 1; grid-row: 1; }
  .op-table:not(.op-compacto) td[data-label="Total"] { grid-column: 2; grid-row: 1; }
  .op-table:not(.op-compacto) td[data-label="Paciente"], .op-table:not(.op-compacto) td[data-label="Ações"] { grid-column: 1 / -1; }
  .op-table:not(.op-compacto) td[data-label="Ações"] { flex-direction: row; align-items: center; }
  .op-table:not(.op-compacto) td[data-label="Ações"]::before { content: none; }
  .op-table:not(.op-compacto) td > .ellipsis { max-width: 100%; }
  .op-table:not(.op-compacto) .op-itens, .op-table:not(.op-compacto) td .op-aviso, .op-motivo { max-width: 100%; }
  .op-acoes { flex-wrap: wrap; justify-content: flex-start; }
  .op-acoes .op-btn-txt { display: inline; }
  .op-acoes .btn-icon { width: auto; padding: 0 8px; gap: 4px; }
}