/* 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: título à 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-cab-texto { display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 12px; }
.op-cab-rotulo { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-2); }
.op-btn-novo { flex: none; margin-left: auto; }
.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 (Orçamentos, Guias e Agenda): sempre uma linha, de 1440 a 320 px. Ordem:
 * [situação] [período] [funil] [lista/calendário] [atualizar]. Os cortes usam a largura do painel (container),
 * não a da janela:
 *   1500 px ou mais: o selo "HubMed · atualizado" aparece como texto ao lado do atualizar;
 *   1260 px ou mais: filtros de lista na própria barra; abaixo disso, ficam atrás do funil;
 *   1100 a 1259: situação com texto; legenda das guias oculta;
 *   640 a 1099: situação só com ícone (tip); período com texto;
 *   480 a 639: tudo compacto, com o período em texto;
 *   340 a 639: nas guias, a situação mostra legenda pequena ao lado do ícone;
 *   abaixo de 480 (celular): o período vira o ícone de calendário e abre a faixa logo abaixo da linha.
 * A barra só ganha segunda linha enquanto o funil ou a faixa do período estiverem abertos. */
.op-barra {
  flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 8px;
  padding: 8px 10px; background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.op-barra.funil-aberto, .op-barra.is-op-faixa-periodo { flex-wrap: wrap; }
.op-barra .seg { flex: none; }
.op-barra .seg button { padding: 3px 9px; font-size: var(--fs-1); white-space: nowrap; line-height: 1.2; }
.op-sit button { display: inline-flex; align-items: center; gap: 5px; }
.op-sit-ico { display: inline-flex; flex: none; }
.op-periodo-host, .op-filtros { display: contents; }
.op-barra .op-periodo-host .seg button { padding: 3px 9px; }
.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; }
/* Contador de filtros ativos no funil (vazio = sem contador) */
.op-funil-n { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.op-funil-n:empty { display: none; }
.op-vistas { flex: none; }
.op-vistas button { display: inline-flex; align-items: center; justify-content: center; padding: 3px 9px; line-height: 0; }
.op-sit { gap: 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 { display: none; font-size: var(--fs-1); color: var(--ink-faint); white-space: nowrap; }
/* Botões de ícone da barra não encolhem (sem isto, o funil e o atualizar viravam 0 px na HubMed em 320 px) */
.op-faixa, .op-funil, .op-frescor-slot { flex: none; }

/* 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; }
}
@container (min-width: 1500px) { .op-frescor .freshness { display: inline; } }

/* Situação só com ícone (tip) quando o painel não comporta o texto */
@container (max-width: 1099px) { .op-sit-txt { display: none; } .op-sit button { padding: 3px 8px; } }
/* 1100 a 1259: o nome da situação aparece reduzido e corta com reticências (o título completo fica no tip) */
@container (min-width: 1100px) and (max-width: 1259px) { .op-sit-txt { font-size: 10.5px; } }
/* Barra com funil sempre (HubMed › Guias): prestador e pagamento só abrem pelo funil, com o contador */
.op-barra.funil-sempre .op-funil { display: inline-flex; }
.op-barra.funil-sempre .op-filtros { display: none; }
.op-barra.funil-sempre.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-sempre.funil-aberto .op-campo .select { min-width: 0; max-width: none; flex: 1 1 180px; }
/* Até 759 px de painel (antes 639): entre 640 e 760 px, com o período inteiro na linha, a barra passava da
 * borda direita e escondia Novo e Atualizar (HubMed em 768 px com o menu recolhido). */
@container (max-width: 759px) {
  .op-barra { gap: 4px; padding: 6px 8px; }
  .op-barra .seg button { padding: 3px 5px; font-size: 10.5px; }
  .op-barra .op-periodo-host .seg button { padding: 3px 5px; }
  .op-barra .op-periodo-host .seg .res-seg-cal { padding: 3px 6px; }
  .op-vistas { margin-left: auto; }
  .op-vistas button { padding: 3px 5px; }
  .op-sit button { padding: 3px 4px; }
  .op-barra .seg { padding: 2px; }
  .op-frescor-slot { margin-left: 0; }
}
/* Guias (duas situações): a legenda aparece ao lado do ícone quando o painel tem 340 px ou mais */
@container (min-width: 340px) and (max-width: 639px) {
  .op-sit-curto .op-sit-txt { display: inline; }
  .op-sit-curto button { padding: 3px 6px; }
}
/* Faixa do período: abaixo de 480 px o período vira o ícone de calendário e abre a faixa acima do conteúdo.
 * A faixa é a própria linha do seletor, em largura total, logo abaixo da barra. */
.op-faixa { display: none; position: relative; }
/* HubMed › Guias traz a própria faixa do período (hubmed/guias.js, marcada com data-na-faixa): a daqui não aparece nela */
.op-barra:has(> [data-na-faixa]) > [data-op-faixa-btn] { display: none; }
.op-faixa::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
.op-faixa[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
@container (max-width: 479px) {
  .op-faixa { display: inline-flex; }
  .op-barra > [data-op-na-faixa="periodo"] { display: none; }
  .op-barra.is-op-faixa-periodo > [data-op-na-faixa="periodo"] {
    display: flex; flex: 1 1 100%; width: 100%; min-width: 0; order: 10;
    padding-top: 8px; border-top: 1px solid var(--line);
  }
  .op-barra.is-op-faixa-periodo > [data-op-na-faixa="periodo"] > .seg { flex: 1 1 auto; width: 100%; min-width: 0; }
}

/* Resumo: uma faixa baixa com os números em linha (valor e rótulo lado a lado), sem caixas altas.
 * Os .kpi continuam os de Resultados; aqui só o contêiner e o espaçamento mudam. */
.page .op-resumo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  margin: 8px 12px 0; padding: 4px; flex: none;
  background: var(--surface-soft); border-radius: var(--radius-sm);
}
.op-resumo .kpi {
  container-type: normal; flex: 0 0 auto; align-items: center; gap: 6px; max-height: 32px;
  padding: 2px 14px; background: none; border-radius: 0; box-shadow: none;
}
.op-resumo .kpi + .kpi { border-left: 1px solid var(--line); }
/* Alerta (ex.: pendente) segue colorido, só que dentro da faixa */
.op-resumo .kpi.is-atencao, .op-resumo .kpi.is-alerta { background: var(--warn-soft); border-radius: var(--radius-sm); }
.op-resumo .kpi.is-alerta { background: var(--danger-soft); }
.op-resumo .kpi-num { font-size: var(--fs-2); }
.op-resumo .kpi-rot { flex: none; overflow: visible; }

/* Lista: ordenação no cabeçalho e ações na linha */
.op-sort {
  /* font não cobre caixa nem espaçamento: sem isto "Data" e "Total" saíam fora do padrão do cabeçalho */
  border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit;
  text-transform: inherit; letter-spacing: inherit;
  /* nome da coluna numa linha só: quando a coluna aperta, a tabela rola em vez de quebrar "Criado em" */
  white-space: nowrap;
  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-table tbody tr.op-linha { cursor: pointer; }
.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). Só o período e a atualização, numa linha só.
 * O texto da idade do dado cabe a partir de 480 px; abaixo disso fica só o ícone de atualizar (com tip). */
@container (min-width: 480px) { .op-agenda-barra .op-frescor .freshness { display: inline; } }
.op-agenda-periodo button { padding: 3px 10px; font-size: var(--fs-1); white-space: nowrap; }
.op-agenda { display: flex; flex-direction: column; gap: 10px; padding: 10px 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: 6px 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; gap: 4px; justify-content: flex-end; align-items: center; }
/* Conversa e orçamento da agenda: ícones discretos, sem caixa; o destaque fica só no hover */
.op-agenda-acoes .btn { background: transparent; border-color: transparent; box-shadow: none; }
.op-agenda-topo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.op-agenda-topo .badge { flex: none; }
.op-agenda-topo .op-agenda-paciente { flex: 0 1 auto; min-width: 0; }
.op-agenda-acoes .btn:hover, .op-agenda-acoes .btn:focus-visible { color: var(--accent); background: var(--surface-muted); }
/* Celular: a hora, o nome e os atalhos (ícones) ficam na mesma linha; nada de linha de botão sozinha */
@container (max-width: 639px) {
  .op-agenda-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
}
.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-soft); 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: 32px; }
.op-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--st, var(--ink-faint)); }
.op-dia { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.op-dia-grupo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.op-dia-grupo + .op-dia-grupo .op-dia-tit { font-size: var(--fs-2); color: var(--ink-soft); }
.op-dia-tit { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-2); display: flex; align-items: baseline; gap: 6px; }
.op-dia-n { font-size: var(--fs-1); font-weight: var(--fw-1); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* Desktop: o calendário fica parado e só a área dos dias rola, por dentro. Os dias se encaixam lado a lado
 * (cada grupo tem a largura dos seus cartões) para usar a largura em vez de empilhar um cartão por linha. */
@container (min-width: 760px) {
  .op-cal-split { grid-template-rows: minmax(0, 1fr); align-self: stretch; }
  .op-cal-split > .op-dia {
    align-self: stretch; min-height: 0; overflow: auto; padding-right: 4px;
    flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: 14px 18px;
  }
  .op-dia > .op-dia-grupo { flex: 0 1 auto; max-width: 100%; }
  .op-dia > .op-dia-grupo + .op-dia-grupo .op-dia-tit { font-size: var(--fs-2); }
  html:root .op-dia-grupo > .op-cards { display: flex; flex-wrap: wrap; gap: 8px; }
  .op-dia-grupo > .op-cards > .op-card { width: 256px; flex: none; }
  .op-dia-grupo > .op-cards > .op-card-guia { width: 184px; }
}
.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; }
/* Uma linha só: hora e atendente encolhem com reticências; ícones e "Reativar venda" ficam à direita. */
.op-card-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; margin-top: 2px; min-width: 0; }
.op-card-acoes > .op-card-quando { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-card-acoes > .btn { flex: none; }
.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-reativar { --st: var(--warn); --st-soft: var(--warn-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-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-editor { min-width: 0; }

/* Tela do novo orçamento: o paciente é escolhido dentro dela, no topo (antes vinha uma lista antes) */
.op-novo-paciente { min-width: 0; }
.op-novo-busca { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pessoa-atalho { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pessoa-atalho .oa-chips { min-width: 0; }
.pessoa-chip { height: 28px; }
.pessoa-busca details { display: flex; flex-direction: column; }
.pessoa-busca details summary { display: flex; align-items: center; gap: 4px; order: 2; cursor: pointer; font-size: var(--fs-1); color: var(--ink-soft); list-style: none; }
.pessoa-busca details summary::-webkit-details-marker { display: none; }
.pessoa-busca .pessoa-cadastro-corpo { order: 1; }
.pessoa-busca .pessoa-cadastro-seta { transition: transform 120ms ease; }
.pessoa-busca details[open] .pessoa-cadastro-seta { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .pessoa-busca .pessoa-cadastro-seta { transition: none; } }
.pessoa-busca details[open] summary { margin-bottom: 6px; }
.pessoa-busca details label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-1); margin-bottom: 6px; }
.op-novo-rotulo { font-size: var(--fs-1); font-weight: var(--fw-2); color: var(--ink-soft); }
.op-novo-escolhido {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft);
}
.op-novo-escolhido > .strong { min-width: 0; }
.op-novo-escolhido > .small { min-width: 0; }
.op-novo-escolhido .btn { margin-left: auto; flex: none; }
@media (max-width: 767px) {
  .op-novo-escolhido { flex-wrap: wrap; }
  .op-novo-escolhido .btn { margin-left: 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-leitura { font-size: 11px; padding: 3px 8px; }
  .op-main { gap: 0; }
  .op-page .op-resumo { margin: 8px 10px 0; padding: 3px; }
  .op-resumo .kpi { padding: 2px 8px; }
  .op-resumo .kpi + .kpi { border-left: 0; }
  .op-resumo .kpi-rot { white-space: normal; line-height: 1.2; }
  .op-cal-split { gap: 12px; padding: 10px; }
  .op-cal-dia { min-height: 36px; }
  .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%; }

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

/* ---- Tablet e painel médio: colunas secundárias saem antes de a linha quebrar ----
 * Largura do painel entre 400 e 639 px (tablet). As colunas somem; o detalhe da linha (orçamentos) mostra tudo.
 * Ações ficam numa linha só: na tabela, o botão de reativar vira ícone com tip. */
@container (min-width: 400px) and (max-width: 759px) {
  .op-so-larga, .op-cpf { display: none; }
  .op-table.op-compacto td { height: 36px; }
  .op-table:not(.op-compacto) td { padding-left: 6px; padding-right: 6px; }
  .op-table:not(.op-compacto) th { padding-left: 6px; padding-right: 6px; }
}
.op-acoes { flex-wrap: nowrap; }
.op-table td .op-acoes .btn { flex: none; }

/* ---- Proporções e ações da lista (Operação, nas duas skins) ----
 * Número e ações têm largura fixa; Cliente e Atendente ocupam fração do painel; Itens fica com a sobra
 * (com reticências), para não sobrar vazio nem um cliente enorme. Ações: três slots de 28 px alinhados à
 * direita, então dois ou três ícones ficam sempre no mesmo lugar. */
@container (min-width: 640px) {
  .op-table .op-col-no { width: 64px; }
  .op-table .op-col-cli { width: 22%; }
  .op-table .op-col-atend { width: 13%; }
  .op-table .op-col-total { width: 104px; }
  .op-table .op-col-criado { width: 116px; }
  .op-table .op-col-estado { width: 92px; }
  .op-table .op-col-guia { width: 96px; }
  .op-table:not(.op-guias) .op-col-acoes { width: 108px; }
  .op-table:not(.op-guias) .op-col-acoes .op-acoes { width: 100px; margin-left: auto; }
  .op-table:not(.op-guias) .op-col-acoes .op-acoes .btn-icon { width: 28px; padding: 0; }
  .op-table td.op-col-cli > .ellipsis, .op-table td.op-col-itens > .ellipsis { max-width: none; }
  .op-table.op-guias .op-col-guia { width: 96px; }
  .op-table.op-guias .op-col-prest { width: 24%; }
  .op-table.op-guias .op-col-data, .op-table.op-guias .op-col-total { width: 104px; }
  .op-table.op-guias .op-col-cli > .ellipsis, .op-table.op-guias .op-col-prest > .ellipsis { max-width: none; }
  .op-table.op-guias .op-col-acoes .op-acoes { margin-left: auto; }
}
/* Ações da linha: apagadas (.45) e acesas no hover, foco ou detalhe aberto; no toque ficam sempre acesas */
.op-acoes { opacity: 1; transition: opacity var(--dur) var(--ease); }
tr.op-linha:hover .op-acoes, tr.op-linha:focus-within .op-acoes, tr.op-linha.aberto .op-acoes,
tr.op-linha-guia:hover .op-acoes, tr.op-linha-guia:focus-within .op-acoes, tr.op-linha.op-destacada .op-acoes { opacity: 1; }
@media (hover: none) { .op-acoes { opacity: 1; } }

/* ---- Skin HubMed: a barra e as tabelas usam o mesmo desenho, com a densidade da skin ----
 * html:root vence as regras de hubmed-telas.css e hubmed-diagramacao.css (que usam :root[data-visual]). */
html:root[data-visual="hubmed"] .op-barra .seg button { min-height: 0; height: auto; font-size: 11px; font-weight: 700; border-radius: 8px; }
html:root[data-visual="hubmed"] .op-barra .op-hbtn-contorno { height: 32px; padding: 0 10px; font-size: 10px; border-radius: 8px; }
html:root[data-visual="hubmed"] .op-barra .op-hbtn-contorno span { display: none; }
@container (min-width: 1100px) { html:root[data-visual="hubmed"] .op-barra .op-hbtn-contorno span { display: inline; } }
@container (max-width: 1099px) { html:root[data-visual="hubmed"] .op-barra .op-sit button { padding: 3px 8px; } }
/* Ícones da barra sem o padding da skin (os 8 px laterais sobravam dentro de 28 px) */
html:root[data-visual="hubmed"] .op-barra :is(.op-faixa, .op-funil, .op-frescor .btn) { padding: 0; }
@container (max-width: 639px) {
  html:root[data-visual="hubmed"] .op-barra { gap: 4px; padding: 6px 8px; }
  /* Sem o ponto de cor (o ícone e o estado pressionado já dizem a situação), cada botão cabe em ~22 px */
  html:root[data-visual="hubmed"] .op-barra .op-sit button::before { display: none; }
  html:root[data-visual="hubmed"] .op-barra .seg { padding: 2px; }
  html:root[data-visual="hubmed"] .op-barra .seg button { font-size: 10.5px; padding: 3px 5px; }
  html:root[data-visual="hubmed"] .op-barra .op-sit button { padding: 3px 4px; }
  html:root[data-visual="hubmed"] .op-barra .op-periodo-host .seg button { padding: 3px 5px; }
  html:root[data-visual="hubmed"] .op-barra .op-vistas button { padding: 3px 5px; }
  html:root[data-visual="hubmed"] .op-barra .op-hbtn-contorno { padding: 0 8px; }
}
html:root[data-visual="hubmed"] .hm-guias-tabela .op-btn-txt { display: none; }
html:root[data-visual="hubmed"] .hm-orc-guia-coluna .op-acoes { flex-wrap: nowrap; }

/* ---- Guias compactas ----
 * Cartão pequeno (nº, total, paciente, pagamento); o resto abre na janela da guia (abrirGestaoGuia).
 * O prefixo html:root vence os ajustes da skin HubMed (hubmed-telas.css e hubmed-diagramacao.css),
 * que são carregados depois e usam :root[data-visual]. */
.op-table.op-guias tbody tr[data-abrir-guia] { cursor: pointer; }
.op-card-guia { gap: 1px; padding: 5px 8px 5px 9px; cursor: pointer; font-size: var(--fs-1); }
.op-card-guia:hover { background: var(--surface-soft); }
.op-card-guia:focus-visible, .op-table.op-guias tbody tr[data-abrir-guia]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.op-card-guia .op-card-topo { gap: 6px; flex-wrap: nowrap; }
.op-card-guia .op-card-cli { font-size: var(--fs-1); }
.op-card-guia .op-card-rod .badge { font-size: 10px; padding: 0 6px; height: 16px; }
/* Cartão compacto: Cancelar só com o ícone (title "Cancelar guia"), na ponta direita. Com o texto dentro de um
 * botão de ícone de largura fixa, o X vazava para cima do selo de pagamento. */
.op-card-guia .op-card-rod .op-btn-txt { display: none; }
.op-card-guia .op-card-rod .op-perigo { margin-left: auto; }
html:root .op-cards:has(> .op-card-guia) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.op-gestao-guia .op-pag { display: inline-flex; }

@media (max-width: 767px) {
  html:root .op-cards:has(> .op-card-guia) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Lista no celular: dois cartões por linha, três linhas curtas cada, sem rótulos nem botões */
  html:root .op-table.op-guias:not(.op-compacto) tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 8px; }
  html:root .op-table.op-guias:not(.op-compacto) tr {
    grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; align-content: start; margin: 0;
    padding: 5px 8px 5px 9px; border-left: 3px solid var(--st, var(--line-strong)); background: var(--surface);
  }
  html:root .op-table.op-guias:not(.op-compacto) td {
    display: block; height: auto; min-height: 0; padding: 0; font-size: var(--fs-1); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html:root .op-table.op-guias:not(.op-compacto) td::before { content: none; }
  html:root .op-table.op-guias:not(.op-compacto) td:is([data-label="Prestador"], [data-label="Situação"], [data-label="Ações"]),
  html:root .op-table.op-guias .op-cpf, html:root .op-table.op-guias .op-pag .faint { display: none; }
  html:root .op-table.op-guias:not(.op-compacto) td[data-label="Guia"] { grid-column: 1; grid-row: 1; }
  html:root .op-table.op-guias:not(.op-compacto) td[data-label="Total"] { grid-column: 2; grid-row: 1; font-weight: var(--fw-2); text-align: right; }
  html:root .op-table.op-guias:not(.op-compacto) td[data-label="Paciente"] { grid-column: 1 / -1; grid-row: 2; }
  html:root .op-table.op-guias:not(.op-compacto) td[data-label="Data"] { grid-column: 1; grid-row: 3; color: var(--ink-soft); }
  html:root .op-table.op-guias:not(.op-compacto) td[data-label="Pagamento"] { grid-column: 2; grid-row: 3; }
  html:root .op-table.op-guias .op-pag .badge { font-size: 10px; padding: 0 6px; height: 16px; }
}

/* Alvos de toque (rodada 5, alvos-casca): dias do calendário com 40 px de altura no celular.
 * Seletor com três níveis para vencer o min-height de 30 px de hubmed-telas.css. */
@media (max-width: 600px) {
  .op-cal-split .op-cal .op-cal-dia { min-height: 40px; }
}

/* Rodada 8 (estados-moderna): vazio com ação (Limpar filtro / Ver outro dia) */
.op-vazio-acao { margin-top: 10px; display: flex; justify-content: center; }

/* Novo orçamento (janela): a linha "Prestador" + "Buscar exame" fica numa linha mesmo em 320 px.
 * Só na janela (.modal): o editor da ficha continua empilhando abaixo de 300 px (orcamento.css). */
@container (max-width: 299px) {
  .modal .oa-busca-linha { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
  .modal .oa-busca-linha:has(> .btn) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto; }
}

/* Janela de orçamento e de guia: ←/→ no cabeçalho (contador "3 de 40") sem fechar a janela */
.jan-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 4px; }
.jan-nav[hidden] { display: none; }
.jan-nav .btn:disabled { opacity: 0.35; cursor: default; }
.jan-pos { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Tabela sem nenhuma ação disponível: a coluna não ocupa espaço. */
table.sem-acoes .op-col-acoes { display: none; }
/* Ação principal da tela na ponta direita da barra de filtros (visual HubMed, ver encaixarNaBarra). */
.op-barra .op-acao-barra { margin-left: auto; flex: none; white-space: nowrap; }
.op-barra .op-acao-barra + .op-frescor-slot { margin-left: 0; }
/* Na barra o botão fala só "Novo" (o title diz o resto); em barra estreita fica só o ícone. */
.op-barra .op-acao-barra .op-novo-txt { font-size: 0; }
.op-barra .op-acao-barra .op-novo-txt::before { content: "Novo"; font-size: var(--fs-2); }
@container (max-width: 760px) { .op-barra .op-acao-barra .op-novo-txt { display: none; } }
/* Aviso de leitura consolidada: ícone + texto; em barra estreita fica só o ícone (title e aria-label dizem o resto). */
.op-leitura { display: inline-flex; align-items: center; gap: 6px; }
.op-leitura > .ico { display: none; }
@container (max-width: 760px) {
  .op-barra .op-leitura { padding: 4px 6px; margin-right: 0; }
  .op-barra .op-leitura > .ico { display: inline-block; }
  .op-barra .op-leitura-txt { display: none; }
}

/* HubMed, painel até 759 px: do período ficam o calendário e o atalho escolhido ("30 dias"); com o calendário
 * aberto, os atalhos voltam (a barra quebra a linha, regra da Rodada D1). Antes Novo e Atualizar saíam da tela. */
@container (max-width: 759px) {
  html:root[data-visual="hubmed"] .op-barra:not(:has(.res-seg-cal[aria-expanded="true"])) .op-periodo-host .seg > button:not(.res-seg-cal):not([aria-pressed="true"]) { display: none; }
}

/* Celular de 320 a 390 px: a barra (situação, período, funil, lista/calendário, ação, atualizar) não cabe numa linha
 * sem empurrar o atualizar para fora da tela (em 375 e 390 px ele saía 15 a 30 px da borda; gate_estreito);
 * então quebra em duas linhas, com a ação e o atualizar à direita. */
@container (max-width: 399px) {
  .op-barra { flex-wrap: wrap; gap: 6px; }}

/* =====================================================================================================
 * Design system 90 (visual Moderno): barra única, chips com sentido, volume em vez de contorno.
 * Tudo com o prefixo html:root:not([data-visual]) — o HubMed (data-visual="hubmed") fica como está.
 * Blocos da barra: [título · busca] · [chips de situação + período] · [utilitários + Novo orçamento].
 * Cortes pela largura do painel (container): >= 1560 uma linha só; abaixo, linha 1 = identidade, busca e
 * ações; linha 2 = chips de situação (carrossel) e período; < 760 o período vira botão com menu (sempre
 * no máximo 2 linhas, sem faixa extra); < 520 a busca vira lupa.
 * ===================================================================================================== */
html:root:not([data-visual]) .op-barra-ds {
  position: relative; flex-wrap: wrap; gap: 8px; padding: 8px 12px; background: none; border: 0; align-items: center; row-gap: 6px;
}
html:root:not([data-visual]) .op-barra-ds > .op-barra-tit { order: 0; flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-3); font-weight: 650; color: var(--ink); }
html:root:not([data-visual]) .op-barra-ds > .op-barra-tit svg { color: var(--accent); }
html:root:not([data-visual]) .op-barra-ds .op-barra-util { order: 4; margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }

/* Busca flexível */
html:root:not([data-visual]) .op-busca {
  order: 1; flex: 1 1 220px; min-width: 140px; max-width: 260px; height: var(--control-h); padding: 0 10px;
  display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); background: var(--tonal); color: var(--ink-faint);
  cursor: text; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html:root:not([data-visual]) .op-busca:hover { background: var(--tonal-hover); }
html:root:not([data-visual]) .op-busca:focus-within { background: var(--surface); box-shadow: var(--anel-foco); color: var(--accent); }
html:root:not([data-visual]) .op-busca svg { flex: none; }
html:root:not([data-visual]) .op-busca .input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; outline: none; font-size: var(--fs-2); color: var(--ink);
}
html:root:not([data-visual]) .op-busca .input::placeholder { color: var(--ink-faint); }
html:root:not([data-visual]) .op-busca .input::-webkit-search-cancel-button { cursor: pointer; }

/* Chips de situação (carrossel): bolinha com a cor de sentido + contador */
html:root:not([data-visual]) .op-barra-ds .op-sit {
  order: 2; flex: 1 1 0; min-width: 0; gap: 6px; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
html:root:not([data-visual]) .op-barra-ds .op-sit button {
  --st: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-h); min-height: 0; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--tonal); color: var(--ink-soft); box-shadow: none;
  font-size: var(--fs-2); font-weight: var(--fw-2); line-height: 1; white-space: nowrap;
}
html:root:not([data-visual]) .op-barra-ds .op-sit button:hover { background: var(--tonal-hover); color: var(--ink); }
html:root:not([data-visual]) .op-barra-ds .op-sit button[aria-pressed="true"] {
  background: var(--surface); color: var(--st); box-shadow: var(--brilho), var(--elev-1);
}
html:root:not([data-visual]) .op-barra-ds .op-sit button:focus-visible { box-shadow: var(--anel-foco); outline: none; }
html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="aberto"] { --st: var(--info); }
html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="agendado"], html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="emitida"] { --st: var(--ok); }
html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="cancelado"], html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="cancelada"] { --st: var(--danger); }
html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="finalizado"] { --st: var(--accent); }
html:root:not([data-visual]) .op-barra-ds .op-sit [data-sit="reativar"] { --st: var(--warn); }
html:root:not([data-visual]) .op-sit-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st, var(--ink-faint)); }
html:root:not([data-visual]) .op-barra-ds .op-sit .op-sit-ico { display: none; }
html:root:not([data-visual]) .op-barra-ds .op-sit .op-sit-txt { display: inline; font-size: inherit; }
html:root:not([data-visual]) .op-n { font-size: 11px; font-weight: var(--fw-2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
html:root:not([data-visual]) .op-n:empty { display: none; }
html:root:not([data-visual]) .op-sit button[aria-pressed="true"] .op-n { color: var(--st); }

/* Período compacto (7/30/90 + calendário) e o botão-menu do celular */
html:root:not([data-visual]) .op-barra-ds > .op-periodo-host { display: contents; }
html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg,
html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo {
  order: 3; margin-left: auto; display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--tonal); box-shadow: none;
}
html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg button,
html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo button {
  height: var(--control-h-sm); min-height: 0; padding: 0 10px; border-radius: 6px; background: transparent; color: var(--ink-soft);
  box-shadow: none; font-size: var(--fs-2); font-weight: var(--fw-2); white-space: nowrap; line-height: 1;
}
html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg button:hover,
html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo button:hover { background: var(--tonal-hover); color: var(--ink); }
html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg button[aria-pressed="true"],
html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo button[aria-pressed="true"] {
  background: var(--surface); color: var(--accent); box-shadow: var(--brilho), var(--elev-1);
}
html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg .res-seg-cal { padding: 0 7px; }
html:root:not([data-visual]) .op-per-btn { display: inline-flex; order: 3; flex: none; gap: 6px; padding: 0 10px; font-size: var(--fs-2); }

html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo + .op-barra-util { margin-left: 0; }

/* Utilitários: um grupo tonal de ícones (visão, filtros, atualizar) e a idade do dado, curta */
html:root:not([data-visual]) .op-barra-ds .grupo-icones { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--tonal); }
html:root:not([data-visual]) .op-barra-ds .grupo-icones .op-vistas { display: contents; }
html:root:not([data-visual]) .op-barra-ds .grupo-icones :is(.op-frescor-slot, .op-frescor) { display: contents; margin: 0; }
html:root:not([data-visual]) .op-barra-ds .grupo-icones :is(.op-vistas button, .op-funil, .op-frescor .btn) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--control-h-sm); height: var(--control-h-sm); min-height: 0;
  padding: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); box-shadow: none; line-height: 0;
}
html:root:not([data-visual]) .op-barra-ds .grupo-icones .op-frescor .btn svg { width: 16px; height: 16px; }
html:root:not([data-visual]) .op-barra-ds .grupo-icones :is(.op-vistas button, .op-funil, .op-frescor .btn):hover { background: var(--tonal-hover); color: var(--ink); }
html:root:not([data-visual]) .op-barra-ds .grupo-icones .op-vistas button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--brilho), var(--elev-1); }
/* Funil aceso com filtro ativo (antes .is-ativo não tinha regra nenhuma) */
html:root:not([data-visual]) .op-barra-ds .grupo-icones .op-funil.is-ativo,
html:root:not([data-visual]) .op-barra-ds .grupo-icones .op-funil.is-ativo:hover { background: var(--accent-soft); color: var(--accent); }
html:root:not([data-visual]) .op-barra-ds .op-funil-n {
  top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill);
  font-size: 11px; line-height: 16px; box-shadow: 0 0 0 2px var(--tonal);
}
html:root:not([data-visual]) .op-barra-ds .op-funil { display: inline-flex; }
html:root:not([data-visual]) .op-barra-ds .op-filtros { display: none; }
/* Idade do dado: "há 5 min" a partir de 900 px; com o prefixo ("HubMed · atualizado") só em painel largo */
html:root:not([data-visual]) .op-barra-ds .op-barra-util > .freshness { display: none; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
html:root:not([data-visual]) .op-barra-ds .op-barra-util > .freshness .fr-pre { display: none; }
@container (min-width: 900px) { html:root:not([data-visual]) .op-barra-ds .op-barra-util > .freshness { display: inline; } }
@container (min-width: 1500px) { html:root:not([data-visual]) .op-barra-ds .op-barra-util > .freshness .fr-pre { display: inline; } }
/* Primária à direita: Novo orçamento (sólido, com rótulo) */
html:root:not([data-visual]) .op-barra-ds .op-novo-barra { flex: none; height: var(--control-h); padding: 0 14px; font-size: var(--fs-2); gap: 6px; white-space: nowrap; }
html:root:not([data-visual]) .op-barra-ds .op-novo-barra svg { width: 16px; height: 16px; }

/* Uma linha só em qualquer painel de 900 px ou mais: os chips são um carrossel (flex-basis 0 fecha a linha) e o
 * período vira botão único com menu; só em painel largo (1700+) ele volta a ser o grupo de atalhos. */
@container (max-width: 1699px) {
  html:root:not([data-visual]) .op-barra-ds .op-periodo-host .seg { display: none; }
}
@container (min-width: 1700px) {
  html:root:not([data-visual]) .op-per-btn { display: none; }
}
@container (max-width: 899px) {
  html:root:not([data-visual]) .op-barra-ds .op-sit { order: 5; flex: 1 1 100%; }
}
/* Painel de 760 a 1199 px (ex.: 1366 com zoom de 125 %): a identidade, a busca e o período cedem espaço para
 * os chips de situação mostrarem mais opções (o carrossel segue lá para o resto, com o esbatido da borda). */
@container (min-width: 760px) and (max-width: 1199px) {
  html:root:not([data-visual]) .op-barra-ds > .op-barra-tit { display: none; }
  html:root:not([data-visual]) .op-busca { flex: 0 1 160px; min-width: 120px; }
  html:root:not([data-visual]) .op-barra-ds .op-sit { gap: 4px; }
  html:root:not([data-visual]) .op-barra-ds .op-sit button { padding: 0 10px; gap: 5px; }
  html:root:not([data-visual]) .op-per-btn { padding: 0 8px; gap: 4px; }
}
/* Celular e tablet estreito: período vira botão com menu; título só no ícone */
@container (max-width: 759px) {
  html:root:not([data-visual]) .op-barra-ds { padding: 6px 10px; gap: 6px; }
  html:root:not([data-visual]) .op-barra-ds .op-barra-util > .freshness { display: none; }
  html:root:not([data-visual]) .op-barra-ds > .op-barra-tit { display: none; }
  html:root:not([data-visual]) .op-barra-ds .op-novo-barra .op-novo-txt { display: none; }
  html:root:not([data-visual]) .op-barra-ds .op-novo-barra { width: var(--control-h); padding: 0; justify-content: center; }
  html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo { flex: 1 1 100%; order: 5; margin-left: 0; }
  html:root:not([data-visual]) .op-barra-ds > .op-agenda-periodo button { flex: 1 1 0; }
}
/* Busca vira lupa em tela muito estreita e abre quando recebe foco */
@container (max-width: 519px) {
  html:root:not([data-visual]) .op-busca { flex: 0 0 var(--control-h); min-width: var(--control-h); padding: 0; justify-content: center; }
  html:root:not([data-visual]) .op-busca .input { width: 0; flex: 0 0 0; opacity: 0; }
  /* Foco: o campo se abre por cima da barra (position absolute), sem mexer no fluxo; nada refluí sob o dedo. */
  html:root:not([data-visual]) .op-busca:focus-within { background: var(--tonal); box-shadow: none; color: var(--ink-faint); }
  html:root:not([data-visual]) .op-busca:focus-within .input {
    position: absolute; z-index: 2; left: 10px; right: 10px; top: 6px; width: auto; height: var(--control-h); padding: 0 12px;
    opacity: 1; border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--anel-foco);
  }
}

/* Resumo: sem fio vertical entre os números, só respiro */
html:root:not([data-visual]) .op-resumo .kpi + .kpi { border-left: 0; }
/* Três tiles tonais lado a lado (escala de tipo: número fs-3, rótulo fs-1), sem faixa de fundo */
html:root:not([data-visual]) .page .op-resumo { gap: 8px; padding: 0; background: none; flex-wrap: nowrap; }
html:root:not([data-visual]) .op-resumo .kpi {
  flex: 1 1 0; min-width: 0; justify-content: center; height: 32px; max-height: 32px; padding: 0 12px;
  border-radius: var(--radius-sm); background: var(--tonal);
}
html:root:not([data-visual]) .op-resumo .kpi.is-atencao { background: var(--warn-soft); }
html:root:not([data-visual]) .op-resumo .kpi.is-alerta { background: var(--danger-soft); }
html:root:not([data-visual]) .op-resumo .kpi-num { font-size: var(--fs-3); font-weight: 700; font-variant-numeric: tabular-nums; }
html:root:not([data-visual]) .op-resumo .kpi-rot { font-size: var(--fs-1); }
html:root:not([data-visual]) .op-body:has(.op-cal-split, .op-agenda) { background: var(--surface-soft); }

/* Tabela: sem filete em toda linha; zebra leve, hover tonal e divisor só sob o cabeçalho */
html:root:not([data-visual]) .op-table tbody td { border-bottom: 0; }
html:root:not([data-visual]) .op-table thead th { border-bottom: 1px solid var(--line-hair); background: var(--surface-soft); }
html:root:not([data-visual]) .op-table tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--ink) 2.5%, var(--surface)); }
html:root:not([data-visual]) .op-table tbody tr:hover > td { background: var(--tonal); }
html:root:not([data-visual]) .op-table tbody tr.op-linha.op-destacada > td { background: var(--accent-softer); box-shadow: none; }
html:root:not([data-visual]) .op-table tbody tr.op-linha.op-destacada > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Cartões: volume (brilho + elevação); a situação fica no selo colorido, sem faixa lateral, sem moldura dupla.
 * Grade: as colunas dividem a largura toda (sem sobra vazia à direita). */
html:root:not([data-visual]) .op-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); justify-content: stretch; }
@container (min-width: 760px) {
  html:root:not([data-visual]) .op-dia-grupo > .op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
  html:root:not([data-visual]) .op-dia-grupo > .op-cards > .op-card { width: auto; }
  html:root:not([data-visual]) .op-dia > .op-dia-grupo { flex: 1 1 280px; }
  html:root:not([data-visual]) .op-dia-grupo > .op-cards:has(> .op-card-guia) { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
}
html:root:not([data-visual]) .op-card.op-card-3l, html:root:not([data-visual]) .op-card {
  border: 0; border-radius: var(--radius-sm); background: var(--textura, var(--surface));
  box-shadow: var(--brilho), var(--elev-1);
}
html:root:not([data-visual]) .op-card.op-card-3l:hover, html:root:not([data-visual]) .op-card:hover { box-shadow: var(--brilho), var(--elev-2); }
html:root:not([data-visual]) .op-card.op-destacada { box-shadow: var(--brilho), var(--elev-2), 0 0 0 2px var(--accent); }
html:root:not([data-visual]) .op-card .op-st-badge { background: none; padding: 0; height: auto; color: var(--st); font-weight: 650; }
html:root:not([data-visual]) .op-st-agendado { --st: var(--ok); --st-soft: var(--ok-soft); }
html:root:not([data-visual]) .op-st-finalizado { --st: var(--accent); --st-soft: var(--accent-soft); }

/* Calendário: dias tonais, hoje com acento, selecionado com anel; dias com registro ganham pontos coloridos */
html:root:not([data-visual]) .op-cal-dia { border: 0; background: none; }
html:root:not([data-visual]) .op-cal-dia.tem { background: var(--tonal); border: 0; color: var(--ink); }
html:root:not([data-visual]) .op-cal-dia:hover { background: var(--tonal-hover); }
html:root:not([data-visual]) .op-cal-dia.is-hoje { background: var(--accent-soft); }
html:root:not([data-visual]) .op-cal-dia.is-hoje .op-cal-num { color: var(--accent); font-weight: 650; }
html:root:not([data-visual]) .op-cal-dia[aria-pressed="true"] { border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--brilho), var(--elev-1), inset 0 0 0 2px var(--accent); }
html:root:not([data-visual]) .op-cal-dia .op-dot { width: 6px; height: 6px; }
html:root:not([data-visual]) .op-cal-pontos { height: 6px; }

/* Agenda: horários como cartões (sem caixa, sem grade de linhas), título do dia com contagem */
html:root:not([data-visual]) .op-agenda-lista { border: 0; border-radius: 0; background: none; gap: 6px; overflow: visible; }
html:root:not([data-visual]) .op-agenda-item {
  border: 0; border-radius: var(--radius-sm); background: var(--textura, var(--surface)); padding: 8px 12px;
  box-shadow: var(--brilho), var(--elev-1);
}
html:root:not([data-visual]) .op-agenda-item:last-child { border: 0; }
html:root:not([data-visual]) .op-agenda-hora { color: var(--ink-soft); font-weight: var(--fw-2); }
html:root:not([data-visual]) .op-agenda-dia-tit { display: flex; align-items: baseline; gap: 8px; }
html:root:not([data-visual]) .op-agenda-dia-tit.is-hoje { color: var(--accent); }
html:root:not([data-visual]) .op-agenda-dia-n { font-size: 11px; font-weight: var(--fw-1); color: var(--ink-faint); }
html:root:not([data-visual]) .op-agenda-acoes .btn { border: 0; }

/* Novo orçamento (escolha de cliente): preenchimento no lugar de molduras */
html:root:not([data-visual]) .op-pick-lista { border: 0; background: var(--tonal); }
html:root:not([data-visual]) .op-pick-item { border-bottom: 0; }
html:root:not([data-visual]) .op-novo-escolhido { border: 0; background: var(--tonal); }

/* Celular: linhas e cartões de guia sem filete nem moldura */
@media (max-width: 767px) {
  html:root:not([data-visual]) .op-table.op-compacto tbody tr.op-linha { border-bottom: 0; }
  html:root:not([data-visual]) .op-table:not(.op-compacto) tr { border: 0; background: var(--textura, var(--surface)); box-shadow: var(--brilho), var(--elev-1); }
  html:root:not([data-visual]) .op-table.op-guias:not(.op-compacto) tr { border-left: 0; box-shadow: var(--brilho), var(--elev-1), inset 3px 0 0 var(--st, var(--line-strong)); }
}

/* Celular: nada abaixo de 11 px */
@media (max-width: 767px) {
  html:root:not([data-visual]) .op-resumo .kpi-rot, html:root:not([data-visual]) .op-cal-semana { font-size: 11px; }
  html:root:not([data-visual]) .op-table .badge { font-size: 11px; }
}
/* Novo orçamento: cabeçalho do painel lateral de 44 px */
html:root:not([data-visual]) .modal-lateral:has(.op-novo) .modal-head { min-height: 0; padding-block: 6px; }
/* Ordenação da tabela: ícone legível e área de toque de 28 px */
html:root:not([data-visual]) .op-sort { min-height: 28px; }