/* Telas que vieram do Hubmed (área js/areas/hubmed). Medidas do Design System Hubmed v1.0. */
.hm-tela { overflow: hidden; }
.hm-tela-topo { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex: none; }
.hm-tela-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 4px; }
.hm-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.hm-hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font: 600 12px var(--font); text-transform: none; cursor: pointer; box-shadow: none; border: 1px solid transparent; transition: all 150ms cubic-bezier(.4,0,.2,1); white-space: nowrap; }
.hm-hbtn:active { transform: scale(.95); }
.hm-hbtn--add { background: #3949ab; color: #fff; border: 0; box-shadow: none; }
.hm-hbtn--add:hover { background: #303f9f; }
.hm-hbtn--navy { background: #1f2a5b; color: #fff; border: 0; box-shadow: none; }
.hm-hbtn--refresh { background: #e3f2fd; color: #1f2a5b; border-color: #90caf9; }
.hm-hbtn--refresh:hover { background: #1f2a5b; color: #fff; }
.hm-hbtn--pdf { background: #fef2f2; color: #3f3f46; border-color: #fecaca; }
.hm-hbtn--pdf .ico { color: #dc2626; }
.hm-hbtn--pdf:hover { background: #fee2e2; }
.hm-hbtn--excel { background: #e8f5e9; color: #1e6d41; font-weight: 700; font-size: 12px; }
.hm-hbtn--excel:hover { background: #c8e6c9; }
.hm-hbtn--warning { background: #fff8e1; color: #ffa000; border-color: #ffe082; letter-spacing: .05em; }
.hm-hbtn--success { background: #059669; color: #fff; border-color: #a7f3d0; letter-spacing: .05em; }
.hm-hbtn--danger { background: #dc2626; color: #fff; border: 0; }
.hm-hbtn--purple { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }
.hm-pilula { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 11px var(--font); text-transform: none; border: 1px solid; }
.hm-pilula--navy { background: #e3f2fd; border-color: #90caf9; color: #1f2a5b; }
.hm-pilula--verde { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }

.hm-cartao { background: #fff; border: 1px solid rgba(225,231,239,.6); border-radius: 16px; box-shadow: none; }
.hm-barra { padding: 16px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; flex: none; }
.hm-busca { position: relative; flex: 1 1 auto; min-width: 0; }
.hm-busca .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #a1a1aa; }
.hm-input { height: 44px; width: 100%; border-radius: 12px; border: 1px solid rgba(225,231,239,.9); background: rgba(250,250,250,.6); padding: 0 14px; font: 500 14px var(--font); color: #18181b; transition: all 150ms; }
.hm-busca .hm-input { padding-left: 40px; }
.hm-input:focus { outline: none; border-color: #3f51b5; box-shadow: inset 0 0 0 1px #3f51b5; background: #fff; }
.hm-campo { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.hm-campo > span { font: 700 12px var(--font); color: #64748b; }

.hm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; flex: none; }
.hm-kpi { --c: #1f2a5b; background: #fff; border: 1px solid rgba(225,231,239,.8); border-left: 3px solid var(--c); border-radius: 12px; padding: 16px 18px; box-shadow: 0 2px 10px -4px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 6px; transition: box-shadow 150ms, transform 150ms; }
.hm-kpi:hover { box-shadow: 0 4px 20px -4px rgba(0,0,0,.1); transform: translateY(-1px); }
.hm-kpi.is-destaque { border: 1.5px solid #1f2a5b; border-left-width: 3px; }
.hm-kpi--verde { --c: #059669; } .hm-kpi--navy { --c: #1f2a5b; } .hm-kpi--ambar { --c: #ffb300; } .hm-kpi--vermelho { --c: #dc2626; } .hm-kpi--indigo { --c: #3949ab; } .hm-kpi--azul { --c: #1976d2; }
.hm-kpi-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hm-kpi-rot { font: 600 12px var(--font); color: #65758b; }
.hm-kpi-ico { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); flex: none; }
.hm-kpi-valor { font: 900 22px var(--font); letter-spacing: -.4px; color: #18181b; font-variant-numeric: tabular-nums; }
.hm-kpi-sub { font: 500 11px var(--font); color: #64748b; }
.hm-pos { color: #059669; } .hm-neg { color: #dc2626; }
.hm-pilha { display: flex; flex-direction: column; gap: 12px; flex: none; }

.hm-tabela-cartao { padding: 16px; display: flex; flex-direction: column; min-height: 0; flex: none; }
.hm-tabela-wrap { overflow-x: auto; }
.hm-tabela { width: 100%; border-collapse: collapse; font: 500 13px var(--font); color: #52525b; }
.hm-tabela th { background: #fafafa; border-bottom: 1px solid rgba(225,231,239,.6); padding: 10px 12px; text-align: left; font: 600 11px var(--font); letter-spacing: 0; text-transform: none; color: #71717a; white-space: nowrap; }
.hm-tabela td { padding: 12px; height: 56px; }
.hm-tabela tbody tr:nth-child(odd) { background: #fff; }
.hm-tabela tbody tr:nth-child(even), .hm-tabela tbody tr:hover { background: #fafafa; }
.hm-tabela td b { color: #3f3f46; font-weight: 700; }
.hm-tabela tbody tr:hover td b { color: #3949ab; }
.hm-tabela .hm-c { text-align: center; } .hm-tabela .hm-d { text-align: right; }
.hm-tabela tr.is-cancelada { background: #fef2f2 !important; }
.hm-tabela tr.is-cancelada td b { color: #dc2626; font-weight: 900; }
.hm-sub { display: block; font-size: 11px; color: #64748b; font-weight: 500; }

.hm-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 600 11px var(--font); text-transform: none; letter-spacing: 0; border: 1px solid; white-space: nowrap; }
.hm-selo--ok { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.hm-selo--navy { background: #e3f2fd; color: #1f2a5b; border-color: #3dbdec; }
.hm-selo--neutro { background: #f4f4f5; color: #566173; border-color: #e4e4e7; border-radius: 10px; }
.hm-selo--perigo { background: #fef2f2; color: #dc2626; border-color: #fee2e2; }
.hm-selo--aviso { background: #fff8e1; color: #ffa000; border-color: #ffe082; }
.hm-selo--roxo { background: #f3e5f5; color: #7b1fa2; border-color: #e1bee7; }

.hm-avatar { width: 36px; height: 36px; border-radius: 12px; background: #e8eaf6; border: 1px solid #c5cae9; color: #3949ab; font: 900 12px var(--font); display: inline-grid; place-items: center; flex: none; }
.hm-pessoa { display: flex; align-items: center; gap: 12px; }

.hm-acoes-linha { display: inline-flex; gap: 8px; }
/* Ações de linha (rodada S1): ícone sem caixa colorida; cor só no hover (vermelho só na destrutiva). */
.hm-row-action { width: 33px; height: 33px; border-radius: 10px; border: 1px solid transparent; background: none; color: #65758b; display: inline-grid; place-items: center; cursor: pointer; box-shadow: none; transition: all 150ms; }
.hm-row-action:hover { background: #f4f4f5; color: #1f2a5b; }
.hm-row-action--excluir:hover { background: #fef2f2; color: #dc2626; }
.hm-row-action--baixar { color: #65758b; }

.hm-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(225,231,239,.4); flex-wrap: wrap; }
.hm-rodape-info { font: 700 12px var(--font); color: #64748b; }
.hm-paginas { display: flex; gap: 4px; }
.hm-pg { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 10px; border: 0; background: transparent; font: 900 11px var(--font); color: #71717a; cursor: pointer; display: inline-grid; place-items: center; }
.hm-pg:hover:not(:disabled) { background: #f4f4f5; }
.hm-pg[aria-current="page"] { background: #1f2a5b; color: #fff; box-shadow: 0 1px 2px #90caf9; }
.hm-pg:disabled { opacity: .35; cursor: default; }

.hm-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 16px; text-align: center; }
.hm-vazio-ico { width: 64px; height: 64px; border-radius: 50%; background: #fafafa; border: 1px solid #f4f4f5; display: grid; place-items: center; color: #a1a1aa; margin-bottom: 10px; }
.hm-vazio b { font: 600 13px var(--font); text-transform: none; letter-spacing: 0; color: #27272a; }
.hm-vazio span { font: 500 12px var(--font); color: #71717a; }

.hm-segmento { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-muted); }
.hm-segmento button { border: 0; background: none; padding: 8px 14px; border-radius: 10px; font: 700 12px var(--font); color: var(--ink-soft); cursor: pointer; }
.hm-segmento button[aria-pressed="true"] { background: var(--surface); color: var(--seg-ativo); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.05); }

@media (max-width: 767px) {
  .hm-tela-topo { justify-content: flex-start; }
  .hm-hbtn span { display: none; }
  .hm-hbtn { padding: 0 12px; }
}
/* Com botões no cabeçalho, some a etiqueta de demonstração e o seletor de unidade encolhe */
.topbar:has(.hm-no-cab .hm-hbtn) .demo-tag, .topbar:has(.hm-no-cab .hm-hbtn) .health { display: none; }

/* Densidade Hubmed, com ações dentro da própria tela. */
[data-visual="hubmed"] .hm-tela-topo { gap: 6px; }
[data-visual="hubmed"] .hm-tela-topo:has(.hm-acoes:empty):not(:has(.hm-pilula)) { display: none; }
[data-visual="hubmed"] .hm-tela-corpo { gap: 10px; }
[data-visual="hubmed"] .hm-hbtn { height: 34px; padding: 0 12px; font-size: 10px; gap: 6px; border-radius: 10px; }
[data-visual="hubmed"] .hm-barra { padding: 12px; gap: 8px; }
[data-visual="hubmed"] .hm-input { height: 36px; font-size: 12px; }
[data-visual="hubmed"] .hm-campo { min-width: 130px; flex: 0 1 160px; gap: 4px; }
[data-visual="hubmed"] .hm-campo > span { font-size: 12px; }
[data-visual="hubmed"] .hm-tabela-cartao { padding: 10px; }
/* Tabela longa: o cartão usa a altura que sobra e rola nas duas direções, com o cabeçalho fixo.
 * Antes a barra horizontal ficava no fim da lista — era preciso descer a página para achar o scroll. */
[data-visual="hubmed"] .hm-tabela-cartao { flex: 1 1 auto; min-height: 0; }
/* O slot da tabelaViva também precisa ser flex para o cartão caber na altura da tela. */
[data-visual="hubmed"] .hm-tela-corpo > div:has(> .hm-tabela-cartao) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
[data-visual="hubmed"] .hm-tabela-cartao .hm-tabela-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
[data-visual="hubmed"] .hm-tabela thead th { position: sticky; top: 0; z-index: 2; }
/* Em cartão estreito (pela largura do cartão, não da janela) a tabela vira ficha:
 * antes, numa janela média, as 9 colunas não cabiam e a coluna de ações estourava. */
[data-visual="hubmed"] .hm-tabela-cartao { container-type: inline-size; container-name: hm-tabela; }
[data-visual="hubmed"] .hm-tabela { font-size: 12px; }
[data-visual="hubmed"] .hm-tabela th { padding: 10px 8px; font-size: 12px; }
[data-visual="hubmed"] .hm-tabela td { padding: 8px; height: 44px; }
[data-visual="hubmed"] .hm-kpis { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
[data-visual="hubmed"] .hm-kpi { padding: 12px; gap: 4px; min-width: 0; }
[data-visual="hubmed"] .hm-kpi-link { color: inherit; text-decoration: none; cursor: pointer; }
[data-visual="hubmed"] .hm-kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-visual="hubmed"] .hm-kpi-link:active { transform: translateY(0); }
[data-visual="hubmed"] .hm-ajustar-linha { color: var(--warn); background: var(--warn-soft); }
[data-visual="hubmed"] .hm-orc-guia-coluna .op-acoes { flex-wrap: nowrap; }
[data-visual="hubmed"] .hm-orc-guia-mobile { display: none; }
[data-visual="hubmed"] .hm-contexto-modal:has([data-guia-form]) { height: auto; }
[data-visual="hubmed"] .hm-kpi-rot { font-size: 10px; }
[data-visual="hubmed"] .hm-kpi-valor { font-size: 21px; overflow-wrap: anywhere; }
[data-visual="hubmed"] .hm-kpi-ico { width: 28px; height: 28px; border-radius: 9px; }
[data-visual="hubmed"] .hm-acoes-linha { gap: 5px; }
[data-visual="hubmed"] .hm-row-action { width: 30px; height: 30px; border-radius: 9px; }
[data-visual="hubmed"] .hm-dash-periodo { display: flex; flex-direction: row; align-items: end; flex-wrap: wrap; padding: 10px 12px; gap: 8px; flex: none; }
[data-visual="hubmed"] .hm-dash-periodo > .small { margin-right: auto; align-self: center; }
[data-visual="hubmed"] .hm-dash-periodo .field { flex: 0 1 150px; min-width: 0; }
[data-visual="hubmed"] .hm-dash-periodo .field > span { font-size: 10px; color: var(--ink-soft); }
[data-visual="hubmed"] .hm-dash-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-visual="hubmed"] .hm-dash-atendimento { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-visual="hubmed"] .hm-dash-atendimento .panel-head { flex-wrap: wrap; gap: 6px 10px; }
[data-visual="hubmed"] .hm-dash-atendimento .panel-head > .small { margin-left: auto; }
[data-visual="hubmed"] .hm-dash-atendimento .panel-title { display: flex; align-items: center; gap: 8px; }
[data-visual="hubmed"] .hm-dash-atendimento .panel-title > .ico { color: var(--accent); }
[data-visual="hubmed"] .hm-atendimento-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
[data-visual="hubmed"] .hm-atendimento-numero { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 12px; min-width: 0; }
[data-visual="hubmed"] .hm-atendimento-numero:nth-child(2n) { border-left: 1px solid var(--line); }
[data-visual="hubmed"] .hm-atendimento-numero:nth-child(n+3) { border-top: 1px solid var(--line); }
[data-visual="hubmed"] .hm-atendimento-rotulo { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 10px; }
[data-visual="hubmed"] .hm-atendimento-rotulo .ico { color: var(--accent); flex: none; }
[data-visual="hubmed"] .hm-atendimento-numero > b { font-size: 25px; line-height: 1.25; font-weight: 900; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-visual="hubmed"] .hm-atendimento-numero:nth-child(2) > b { color: var(--ok); }
[data-visual="hubmed"] .hm-fila-principal { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
[data-visual="hubmed"] .hm-widget-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--warn); background: var(--warn-soft); flex: none; }
[data-visual="hubmed"] .hm-fila-principal > div { display: flex; flex-direction: column; color: var(--ink-soft); font-size: 11px; }
[data-visual="hubmed"] .hm-fila-principal b { font-size: 30px; line-height: 1.25; font-weight: 900; color: var(--navy); }
[data-visual="hubmed"] .hm-fila-detalhes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid var(--line); gap: 12px; }
[data-visual="hubmed"] .hm-fila-detalhes > div { display: flex; flex-direction: column; gap: 4px; }
[data-visual="hubmed"] .hm-fila-detalhes span { font-size: 10px; color: var(--ink-soft); }
[data-visual="hubmed"] .hm-fila-detalhes b { font-size: 19px; color: var(--navy); }
[data-visual="hubmed"] .hm-fila-equipe { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 14px 0 0; list-style: none; }
[data-visual="hubmed"] .hm-fila-equipe li { display: flex; align-items: center; gap: 8px; font-size: 10px; border-radius: 6px; padding: 5px 8px; background: var(--surface-muted); color: var(--ink-soft); }
[data-visual="hubmed"] .hm-fila-equipe b { color: var(--navy); }
[data-visual="hubmed"] .hm-equipe-ordem { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 10px; }
[data-visual="hubmed"] .hm-equipe-ordem .select { height: 30px; font-size: 11px; }
[data-visual="hubmed"] .hm-dash-bloco { min-height: 0; }
[data-visual="hubmed"] .hm-dash-bloco .panel-body { padding: 12px 14px; }
/* Cartão só com aviso ("sem fonte no contrato ainda") não precisa da altura de um gráfico:
 * vira uma linha só, com o traço ao lado do texto. */
[data-visual="hubmed"] .hm-dash-bloco:has(.empty) .panel-body { padding: 6px 12px; }
[data-visual="hubmed"] .hm-dash-bloco .empty { padding: 6px 8px; flex-direction: row; justify-content: center; gap: 6px; }
[data-visual="hubmed"] .hm-dash-barras { display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none; }
[data-visual="hubmed"] .hm-dash-barras li > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
[data-visual="hubmed"] .hm-dash-barras progress { display: block; height: 6px; width: 100%; margin-top: 5px; appearance: none; border: 0; border-radius: 9px; overflow: hidden; background: var(--accent-soft); }
[data-visual="hubmed"] .hm-dash-barras progress::-webkit-progress-bar { background: var(--accent-soft); }
[data-visual="hubmed"] .hm-dash-barras progress::-webkit-progress-value { background: var(--accent); border-radius: 9px; }
[data-visual="hubmed"] .hm-contexto-modal { height: min(65dvh, 600px); display: flex; flex-direction: column; }
[data-visual="hubmed"] .modal:has(.hm-contexto-modal) { width: min(950px, calc(100vw - 24px)); }
[data-visual="hubmed"] .hm-guia-busca { padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
[data-visual="hubmed"] .hm-guia-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
[data-visual="hubmed"] .hm-dash-exportar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
[data-visual="hubmed"] .topbar:has(.hm-periodo) :is(.demo-tag, .health) { display: none; }
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-atendimento-numero { padding: 10px 8px; }
  [data-visual="hubmed"] .hm-atendimento-numero > b { font-size: 22px; }
  [data-visual="hubmed"] .hm-equipe-ordem { margin-left: 0; }
  [data-visual="hubmed"] .hm-orc-guia-coluna .op-acoes { flex-wrap: nowrap; }
  [data-visual="hubmed"] .op-table .hm-orc-guia-coluna { display: none; }
  [data-visual="hubmed"] .hm-orc-guia-mobile { display: flex; align-items: center; gap: 6px; }
  [data-visual="hubmed"] .hm-orc-guia-mobile .btn { min-width: 36px; min-height: 36px; }
  [data-visual="hubmed"] .op-table:not(.op-compacto) td { height: auto; min-height: 42px; }
  [data-visual="hubmed"] .topbar:has(.hm-periodo) .hm-cab-textos { flex-basis: 60px; }
}
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-tela-topo { justify-content: flex-start; }
  [data-visual="hubmed"] .hm-acoes { gap: 6px; }
  [data-visual="hubmed"] .hm-hbtn { min-height: 38px; padding: 0 10px; }
  [data-visual="hubmed"] .hm-hbtn span { display: inline; }
  [data-visual="hubmed"] .hm-barra { padding: 10px; }
  [data-visual="hubmed"] .hm-campo { flex: 1 1 130px; min-width: 0; }
  [data-visual="hubmed"] .hm-input { min-width: 0; }
  [data-visual="hubmed"] .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-visual="hubmed"] .hm-kpi { padding: 10px; }
  [data-visual="hubmed"] .hm-kpi-valor { font-size: 19px; }
  [data-visual="hubmed"] .hm-kpi-topo { gap: 4px; }
  [data-visual="hubmed"] .hm-kpi-ico { display: none; }
  [data-visual="hubmed"] .hm-tabela-cartao { padding: 8px; }
  [data-visual="hubmed"] .hm-row-action { width: 36px; height: 36px; }
  [data-visual="hubmed"] .hm-pg { min-width: 34px; height: 34px; }
  [data-visual="hubmed"] .hm-dash-periodo > .small { flex-basis: 100%; }
  [data-visual="hubmed"] .hm-dash-periodo .field { flex: 1 1 120px; }
  [data-visual="hubmed"] .hm-dash-grade { grid-template-columns: minmax(0, 1fr); }
  [data-visual="hubmed"] .hm-dash-bloco { min-height: 0; }
  [data-visual="hubmed"] .hm-segmento { flex-wrap: wrap; max-width: 100%; }
}

/* Catálogo (Exames e Prestadores): aviso da correção, linhas inativas e ações desabilitadas. */
:root[data-visual="hubmed"] .hm-catalogo-aviso { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid #ffe082; background: #fff8e1; color: #8a5b00; font: 600 12px var(--font); }
:root[data-visual="hubmed"] .hm-tabela tr.hm-inativo { background: var(--surface-2); }
:root[data-visual="hubmed"] .hm-row-action:disabled { opacity: .4; cursor: not-allowed; }

/* Guias (HubMed): busca pelo número e Ajustar numa linha; editor de ajuste sem estilo inline. */
:root[data-visual="hubmed"] .hm-guias-tabela .op-table td[data-label="Ações"] { white-space: nowrap; }
:root[data-visual="hubmed"] .hm-guia-tit-menor { font-size: 16px; }
:root[data-visual="hubmed"] .hm-guia-resultado { margin-top: 16px; }
:root[data-visual="hubmed"] .hm-guia-cartao { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
:root[data-visual="hubmed"] .hm-guia-cabecalho { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
:root[data-visual="hubmed"] .hm-guia-acoes-linha { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
/* Gestão de guias: o campo do número tem no máximo 280 px (no desktop estava com 420). No celular vale a regra de 200 px, abaixo. */
:root[data-visual="hubmed"] .hm-datas-guias .hm-guia-busca .hm-busca { flex: 0 1 280px; max-width: 280px; }
/* Área vazia de Gestão de guias: uma linha de instrução, sem bloco alto. */
:root[data-visual="hubmed"] .hm-datas-guias .hm-guia-instrucao { margin: 0; padding: 4px; font-size: 13px; line-height: 1.4; color: #71717a; }

/* Dashboard: período no mesmo seletor de Resultados, com aparência HubMed. */
:root[data-visual="hubmed"] .hm-dash-periodo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; margin-bottom: 10px; }
:root[data-visual="hubmed"] .hm-dash-periodo .res-seg button { font-size: 11px; font-weight: 800; }
:root[data-visual="hubmed"] .hm-dash-esqueleto { height: 130px; border-radius: 12px; background: var(--surface-2, #eef1f6); }

/* HubMed › Guias: ações secundárias (Agenda, Ajustar guia) em contorno, sem cor cheia */
.hm-guias .op-barra .op-hbtn-contorno { background: transparent; color: #1f2a5b; border: 1px solid #c5cbe0; box-shadow: none; }
.hm-guias .op-barra .op-hbtn-contorno:hover { background: #f1f3f9; }

/* ---------- Compacto (27/10): menos espaço vazio, controles na mesma linha ---------- */
[data-visual="hubmed"] .hm-tela-topo { flex-wrap: nowrap; gap: 8px; }
[data-visual="hubmed"] .hm-tela-topo > .hm-acoes { margin-left: auto; flex-wrap: nowrap; }
[data-visual="hubmed"] .hm-tela-corpo { gap: 8px; }
[data-visual="hubmed"] .hm-cartao { border-radius: 12px; }
[data-visual="hubmed"] .hm-barra { padding: 10px 12px; gap: 8px; align-items: flex-end; }
[data-visual="hubmed"] .hm-campo { flex: 0 1 148px; min-width: 118px; }
[data-visual="hubmed"] .hm-input { border-color: #cbd5e1; background: #fff; }
[data-visual="hubmed"] .hm-kpis { gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
[data-visual="hubmed"] .hm-kpi { padding: 10px 12px; border-radius: 10px; gap: 3px; }
[data-visual="hubmed"] .hm-kpi-rot { color: #475569; font-size: 10px; }
[data-visual="hubmed"] .hm-kpi-valor { font-size: 19px; }
[data-visual="hubmed"] .hm-kpi-ico { width: 26px; height: 26px; border-radius: 8px; }
[data-visual="hubmed"] .hm-tabela-cartao { padding: 10px 12px; }
[data-visual="hubmed"] .hm-tabela th { padding: 8px 10px; color: #4b5563; }
[data-visual="hubmed"] .hm-tabela td { padding: 7px 10px; height: 40px; }
[data-visual="hubmed"] .hm-rodape { padding-top: 10px; }
[data-visual="hubmed"] .hm-vazio { padding: 32px 12px; }
[data-visual="hubmed"] .hm-segmento { padding: 3px; }
[data-visual="hubmed"] .hm-segmento button { padding: 6px 12px; }
[data-visual="hubmed"] .cfg-body { max-width: 980px; gap: 12px; }
[data-visual="hubmed"] .cfg-sec { gap: 8px; }
[data-visual="hubmed"] .cfg-form { max-width: none; gap: 8px; }
[data-visual="hubmed"] .cfg-form .field { max-width: 420px; }
[data-visual="hubmed"] .cfg-form .field:has(textarea) { max-width: 100%; }
[data-visual="hubmed"] .cfg-limites { max-width: 720px; }
[data-visual="hubmed"] .cfg-sec .table select.select { min-width: 132px; }
[data-visual="hubmed"] .cfg-grupo { margin-bottom: 6px; }
[data-visual="hubmed"] .cfg-nav { padding: 8px 6px; }

@media (max-width: 900px) {
  [data-visual="hubmed"] .hm-tela-topo { flex-wrap: wrap; }
  [data-visual="hubmed"] .hm-tela-topo > .hm-acoes { margin-left: 0; flex-wrap: wrap; }
  [data-visual="hubmed"] .hm-campo { flex: 1 1 132px; }
}

/* Contraste AA nos textos pequenos (antes #a1a1aa sobre branco ficava em 2,6:1). */
[data-visual="hubmed"] :is(.hm-campo > span, .hm-sub, .hm-kpi-sub, .hm-vazio span, .hm-vazio-ico) { color: #71717a; }
[data-visual="hubmed"] .hm-selo--neutro { color: #52525b; }
[data-visual="hubmed"] .hm-hbtn--warning { color: #b45309; }

/* Relatórios mantêm sua apresentação compacta própria no celular. */
@media (max-width: 767px) {
  /* Relatórios são números: no celular, uma linha compacta por registro. */
  [data-visual="hubmed"] .hm-relatorio .hm-tabela-wrap { display: none; }
  [data-visual="hubmed"] .hm-relatorio .hm-segmento { flex: 1 1 100%; justify-content: space-between; }
}

.hm-rel-mobile { display: none; }
/* Uma regra por largura do cartão evita a disputa entre media/container queries.
 * O conteúdo de cada célula fica em um elemento, sem nós de texto soltos na grade. */
[data-visual="hubmed"] .hm-tabela td > .hm-celula { min-width: 0; overflow-wrap: anywhere; }
[data-visual="hubmed"] .hm-acoes-linha { flex-shrink: 0; align-items: center; }
[data-visual="hubmed"] .hm-row-action { flex: none; }
[data-visual="hubmed"] .hm-row-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-visual="hubmed"] .hm-row-action--editar { color: #92400e; }
[data-visual="hubmed"] .hm-rodape-info { color: #64748b; }
@container hm-tabela (max-width: 720px) {
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela { display: block; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela :is(tbody, tr, td) { display: block; width: 100%; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela thead { display: none; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela td { display: grid; grid-template-columns: minmax(85px, 32%) minmax(0, 1fr); align-items: center; gap: 8px; padding: 4px 0; min-height: 28px; height: auto; text-align: left; overflow-wrap: anywhere; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela td::before { content: attr(data-rotulo); font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: none; }
  [data-visual="hubmed"] .hm-tabela td > * { min-width: 0; }
  [data-visual="hubmed"] .hm-row-action { width: 36px; height: 36px; }
}
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-rel-mobile { display: flex; flex-direction: column; gap: 5px; }
  [data-visual="hubmed"] .hm-rel-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 11px; }
  [data-visual="hubmed"] .hm-rel-linha b { font-size: 12px; color: var(--navy); min-width: 82px; }
  [data-visual="hubmed"] .hm-rel-linha span { color: #52525b; }
  [data-visual="hubmed"] .hm-rel-linha i { font-style: normal; font-weight: 800; color: var(--ink-soft); font-size: 11px; text-transform: none; letter-spacing: 0; }
}

/* ---------- Busca recolhível (um componente, todas as telas HubMed; comum.js › buscaRecolhivel) ----------
 * Em barra larga o campo fica visível, com largura do conteúdo. Em barra estreita (menos de 600 px, medidos
 * pela própria barra e não pela janela) some e fica só a lupa; a lupa abre o campo já focado. */
.hm-barra { container: hm-barra / inline-size; }
.hm-busca-caixa { display: flex; align-items: center; flex: 0 1 240px; min-width: 0; max-width: 320px; }
.hm-busca-caixa .hm-busca { flex: 1 1 auto; min-width: 0; }
.hm-busca-lupa {
  display: none; width: 36px; height: 36px; flex: none; place-items: center; padding: 0;
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #52525b; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.hm-busca-lupa:hover { background: #f4f4f5; color: #18181b; }
.hm-busca-lupa:focus-visible { outline: 2px solid #3f51b5; outline-offset: 2px; }
@container hm-barra (max-width: 600px) {
  /* Recolhida, a lupa fica junto de Atualizar, à direita (sem vão vazio no meio da barra). */
  .hm-busca-caixa { flex: 0 0 auto; max-width: none; margin-left: auto; }
  [data-visual="hubmed"] .hm-barra > .hm-barra-acoes { margin-left: 0; }
  .hm-busca-lupa { display: inline-grid; }
  .hm-busca-caixa:not(.is-aberta):not(.tem-valor) .hm-busca { display: none; }
  .hm-busca-caixa:is(.is-aberta, .tem-valor) .hm-busca-lupa { display: none; }
  .hm-busca-caixa:is(.is-aberta, .tem-valor) { flex: 1 1 240px; max-width: 340px; }
}
@media (max-width: 767px) {
  .hm-busca-caixa:is(.is-aberta, .tem-valor) { flex: 1 1 100%; max-width: none; }
}

/* Balão com o texto completo (comum.js › ligarBalao). Fica fora da tabela, que corta o que passa da largura. */
.hm-balao {
  position: fixed; z-index: 90; max-width: min(320px, calc(100vw - 16px)); padding: 7px 10px;
  border-radius: 8px; background: #18181b; color: #fff; font: 500 12px/1.4 var(--font);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .2); pointer-events: none; white-space: normal; overflow-wrap: anywhere;
}
.hm-balao[hidden] { display: none; }

/* Celular: as ações do topo dividem a linha (sem um botão sozinho no canto) e os selects da barra não se esticam
 * até 100%: ficam com a largura do conteúdo. */
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-tela-topo > .hm-acoes { width: 100%; }
  [data-visual="hubmed"] .hm-tela-topo > .hm-acoes > .hm-hbtn { flex: 1 1 auto; justify-content: center; }
  [data-visual="hubmed"] .hm-barra > .hm-campo { flex: 0 1 170px; }
  /* Guias: Lista e Calendário, quando quebram a linha, viram um controle de largura total (não um par solto). */
}

/* Guias (HubMed): motivo do cancelamento em uma linha, com reticências; o texto completo fica no balão. */
:root[data-visual="hubmed"] .hm-guias-tabela .op-motivo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; cursor: help; }
:root[data-visual="hubmed"] .hm-guias-tabela .op-motivo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
:root[data-visual="hubmed"] .hm-guias-tabela td[data-label="Situação"] > div { max-width: 170px; }
/* Linhas mais baixas: a altura vem do conteúdo, sem o mínimo de 42 px da tabela da casca. */
:root[data-visual="hubmed"] .hm-guias-tabela .op-table td { height: auto; padding-top: 5px; padding-bottom: 5px; line-height: 1.3; }
/* Ações da guia (lote B): visíveis sempre. Em repouso 70% (antes 45%, que sumia); 100% no hover, foco ou toque.
 * Ícones em cinza-escuro e o cancelar só fica vermelho no hover. */
:root[data-visual="hubmed"] .hm-guias-tabela .op-acoes { opacity: .7; }
:root[data-visual="hubmed"] .hm-guias-tabela tr:is(:hover, :focus-within) .op-acoes { opacity: 1; }
@media (hover: none) { :root[data-visual="hubmed"] .hm-guias-tabela .op-acoes { opacity: 1; } }
:root[data-visual="hubmed"] .hm-guias-tabela .op-acoes .btn { color: #3f3f46; }
:root[data-visual="hubmed"] .hm-guias-tabela .op-acoes .btn:hover:not(:disabled) { background: #f4f4f5; color: #18181b; }
:root[data-visual="hubmed"] .hm-guias-tabela .op-acoes .op-perigo:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
/* Status (antes Pagamento): o ícone do estado só aparece na tabela estreita (diagramacao.css); o texto fica para leitor de tela. */
:root[data-visual="hubmed"] .hm-guias-tabela .hm-st-ico { display: none; }

/* ---- Ajustes das anotações (painéis, filtros, barra de ações, cartões compactos, Configurações) ---- */
/* Dashboard: o painel de Atendimentos e a Fila não encostam na grade de cima. */
[data-visual="hubmed"] .hm-dash-grade { margin-bottom: 10px; }

/* Atualizar e Excel no canto da barra de filtros, só com ícone e em uma linha. */
[data-visual="hubmed"] .hm-barra-acoes { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: nowrap; }
[data-visual="hubmed"] .hm-barra-acoes .hm-hbtn { width: 36px; height: 36px; padding: 0; justify-content: center; }
[data-visual="hubmed"] .hm-barra-acoes .hm-hbtn span { display: none; }

/* Filtros de situação: o que não cabe é cortado com reticências; sem espaço, vira só ícone. */
[data-visual="hubmed"] .op-sit button { overflow: hidden; text-overflow: ellipsis; }
.op-sit-ico { display: inline-flex; flex: none; }

/* Cards de guia: cabem duas colunas mesmo em tela estreita. */
[data-visual="hubmed"] .op-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* Caixa: cada lançamento ocupa no máximo duas linhas no cartão. */
@container hm-tabela (max-width: 720px) {
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: 2px 10px; align-items: center; padding: 8px 10px; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td { display: block; width: auto; padding: 0; min-height: 0; height: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td::before { display: none; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(1) { grid-column: 1; grid-row: 1; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(4) { grid-column: 2 / span 4; grid-row: 1; font-weight: 700; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(8) { grid-column: 6; grid-row: 1; justify-self: end; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(2) { grid-column: 1; grid-row: 2; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(3) { grid-column: 2; grid-row: 2; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(5) { grid-column: 3; grid-row: 2; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(6) { grid-column: 4; grid-row: 2; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(7) { grid-column: 5; grid-row: 2; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(9) { grid-column: 6; grid-row: 2; justify-self: end; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(9) { grid-column: 6; grid-row: 2; justify-self: end; }
}
@container hm-tabela (max-width: 480px) {
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(6) { display: none; }
  [data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(5) { display: none; }
}


/* Visualizador da guia (Orçamentos › Ver guia). */
.vg-pdf { width: 100%; height: 68vh; border: 0; border-radius: 8px; background: var(--surface-soft); }
.vg-vazio { display: flex; flex-direction: column; gap: 6px; padding: 24px 8px; text-align: center; }

/* Configurações: campos com largura padrão (a grade de campos relacionados está em configuracoes.css). */
.cfg-form .input { max-width: 320px; }

/* ---- Rodada 3: telas estreitas e janelas divididas (medido pelo espaço da própria tela, não pela janela) ---- */
[data-visual="hubmed"] .main { container: hm-corpo / inline-size; }  /* área de todas as telas HubMed, incluindo o dashboard */

/* Respiro entre indicadores e o bloco de baixo (grade do dashboard, tabela de guias canceladas). */
[data-visual="hubmed"] .hm-kpis { margin-bottom: 12px; }

/* Barra de filtros: uma linha só, no PC e no celular. Com a tela menor, tudo encolhe. */
[data-visual="hubmed"] .hm-barra { flex-wrap: nowrap; align-items: center; }
[data-visual="hubmed"] .hm-barra > * { min-width: 0; }
[data-visual="hubmed"] .hm-barra .seg { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
[data-visual="hubmed"] .hm-barra .seg::-webkit-scrollbar { display: none; }
@container hm-corpo (max-width: 900px) {
  [data-visual="hubmed"] .hm-barra { gap: 6px; padding: 8px; }
  [data-visual="hubmed"] .hm-barra .seg button { font-size: 11px; padding: 4px 6px; }
  [data-visual="hubmed"] .hm-barra .hm-barra-acoes { gap: 4px; }
  [data-visual="hubmed"] .hm-barra .hm-barra-acoes .hm-hbtn { width: 32px; height: 32px; }
}
@container hm-corpo (max-width: 600px) {
  [data-visual="hubmed"] .hm-barra .seg button { font-size: 10.5px; padding: 4px 5px; }
  [data-visual="hubmed"] .hm-barra .hm-busca-caixa { flex: 0 0 auto; }
  [data-visual="hubmed"] .hm-dash-periodo { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 8px; }
  [data-visual="hubmed"] .hm-dash-periodo > .small { display: none; }
  [data-visual="hubmed"] .hm-dash-periodo .seg button { font-size: 10.5px; padding: 4px 5px; }
  [data-visual="hubmed"] .hm-dash-periodo > .btn span { display: none; }
}

/* Indicadores em telas estreitas: três por linha, cada um só com o que cabe. */
@container hm-corpo (max-width: 560px) {
  [data-visual="hubmed"] .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  [data-visual="hubmed"] .hm-kpi { padding: 6px 8px; border-radius: 9px; min-width: 0; }
  [data-visual="hubmed"] .hm-kpi-ico { display: none; }
  [data-visual="hubmed"] .hm-kpi-rot,
  [data-visual="hubmed"] .hm-kpi-sub { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-visual="hubmed"] .hm-kpi-valor { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Tabelas em cartão (guias canceladas, afiliados…): o nome numa linha; os demais campos seguem em linha, só com
 * o rótulo curto; a ação fica à direita. Cartão com duas ou três linhas, no lugar de um campo por linha. */
@container hm-tabela (max-width: 720px) {
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela tr { display: flow-root; padding: 8px 10px; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td {
    display: inline-block; vertical-align: top; width: auto; min-width: 0; min-height: 0; height: auto; padding: 0;
    margin: 0 14px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td > .hm-celula { display: inline; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td::before { font-size: 9px; margin-right: 4px; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td:first-child { display: block; margin-right: 0; white-space: normal; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td:first-child > .hm-celula { display: block; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td:first-child::before,
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td:last-child::before { display: none; }
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)):not(.hm-caixa-lista):not(.hm-pacientes-tabela) .hm-tabela td:last-child { float: right; margin: 0 0 4px 8px; }
}

/* Pacientes: nome e olho na primeira linha; contato (só o cadastrado) e lápis na segunda. */
[data-visual="hubmed"] .hm-row-action { width: 28px; height: 28px; border-radius: 9px; }
[data-visual="hubmed"] .hm-pacientes-tabela .hm-pac-nome { font-size: 14px; font-weight: 700; color: #18181b; }
[data-visual="hubmed"] .hm-pacientes-tabela .hm-pac-dados { font-size: 12px; color: #52525b; }
[data-visual="hubmed"] .hm-pacientes-tabela .hm-pac-linha--oculto .hm-pac-nome { color: #71717a; font-weight: 600; text-decoration: line-through; }
[data-visual="hubmed"] .hm-pacientes-tabela .hm-pac-ocultos { white-space: nowrap; }
/* Ficha do paciente (modal), formulário de cadastro a partir do HubMed. */
[data-visual="hubmed"] .hm-pac-ficha { display: grid; gap: 12px; }
[data-visual="hubmed"] .hm-pac-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
[data-visual="hubmed"] .hm-pac-dados > div { min-width: 0; }
[data-visual="hubmed"] .hm-pac-dados dt { font-size: 12px; font-weight: 600; color: #64748b; }
[data-visual="hubmed"] .hm-pac-dados dd { margin: 2px 0 0; font-size: 14px; color: #18181b; overflow-wrap: anywhere; }
[data-visual="hubmed"] .hm-pac-bloco { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #e4e4e7; }
[data-visual="hubmed"] .hm-pac-bloco h3 { margin: 0; font-size: 13px; font-weight: 800; color: #1f2a5b; }
[data-visual="hubmed"] .hm-pac-bloco p, [data-visual="hubmed"] .hm-pac-dica { margin: 0; font-size: 13px; color: #52525b; }
[data-visual="hubmed"] .hm-pac-acoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
[data-visual="hubmed"] .hm-pac-acoes .btn { white-space: nowrap; }
[data-visual="hubmed"] .hm-pac-form { display: grid; gap: 10px; }
[data-visual="hubmed"] .hm-pac-erro { margin: 0; font-size: 13px; color: #dc2626; }
[data-visual="hubmed"] .hm-pac-erro:empty { display: none; }
@container hm-tabela (max-width: 720px) {
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td { display: block; width: auto; min-width: 0; height: auto; min-height: 0; padding: 0; border: 0; white-space: normal; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td::before { display: none; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(1) { grid-column: 1; grid-row: 1; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(2) { grid-column: 1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(3) { grid-column: 2; grid-row: 1; }
  [data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* Caixa em tela estreita: as cinco formas de pagamento numa linha só; os três totais abaixo. */
@container hm-corpo (max-width: 560px) {
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child { gap: 3px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi { padding: 5px 4px; border-radius: 8px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi-rot { font-size: 8px; letter-spacing: 0; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi-valor { font-size: 9.5px; letter-spacing: -.3px; }
}

/* Orçamentos em tela estreita: indicadores em três colunas, calendário e cartões em largura total, período e
 * visão na mesma linha, e a atualização em texto miúdo. */
@container hm-corpo (max-width: 560px) {
  [data-visual="hubmed"] .op-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
  [data-visual="hubmed"] .op-resumo .kpi { padding: 6px 8px; min-width: 0; }
  [data-visual="hubmed"] .op-resumo .kpi-num { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-visual="hubmed"] .op-cal-split { grid-template-columns: minmax(0, 1fr); }
  [data-visual="hubmed"] .op-cal-grade, [data-visual="hubmed"] .op-cal-semana { gap: 2px; }
  [data-visual="hubmed"] .op-cal-dia { min-height: 30px; }
  [data-visual="hubmed"] .op-cards { grid-template-columns: minmax(0, 1fr); }
  [data-visual="hubmed"] .op-barra { gap: 6px; padding: 8px; }
  [data-visual="hubmed"] .op-barra .op-periodo-host .seg button { font-size: 10.5px; padding: 3px 4px; }
  [data-visual="hubmed"] .op-barra .op-vistas { flex: none; }
  [data-visual="hubmed"] .op-barra .op-vistas button { padding: 3px 6px; }
  [data-visual="hubmed"] .op-frescor-slot { font-size: 10px; }
}

/* Telas com ações no topo e filtros segmentados em tela estreita: ações só com ícone, um só nível de linha. */
@container hm-corpo (max-width: 560px) {
  [data-visual="hubmed"] .hm-tela-topo .hm-hbtn { padding: 0 10px; }
  [data-visual="hubmed"] .hm-tela-topo .hm-hbtn span { display: none; }
  [data-visual="hubmed"] .hm-tela-topo .hm-hbtn--add span { display: inline; }
  [data-visual="hubmed"] .hm-barra .seg { flex-wrap: nowrap; }
  [data-visual="hubmed"] .hm-barra .seg button { white-space: nowrap; }
}

/* Célula sem valor não mostra o rótulo sozinho (ex.: "SITUAÇÃO" sem selo). */
@container hm-tabela (max-width: 720px) {
  [data-visual="hubmed"] :where(.hm-tabela-cartao:not(.hm-relatorio)) .hm-tabela td:empty { display: none; }
}

/* ---- Rodada 4 · Catálogo (Exames e Prestadores) ----
 * Celular: abas, contador discreto e "+" na mesma linha, com alvos de 40 px; o "+" fica só com ícone (título e nome para leitor).
 * Cartões: linhas rotuladas (Prestador, Preço do paciente, Repasse, Lucro, Situação), sem texto cortado à direita. */
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { min-height: 40px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-pilula { white-space: nowrap; }
@container hm-corpo (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo { flex-wrap: nowrap; gap: 6px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento { flex: 1 1 auto; min-width: 0; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 12px; white-space: nowrap; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > [data-contagem] { flex: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-pilula { font-size: 9px; padding: 3px 7px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-acoes { flex: none; margin-left: 0; width: auto; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn--add { width: 40px; height: 40px; padding: 0; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn--add span { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-barra .hm-funil,
  :root[data-visual="hubmed"] .hm-catalogo .hm-barra-acoes .hm-hbtn { width: 40px; height: 40px; }
}
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; align-items: start; padding: 10px 12px;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: auto; min-width: 0; height: auto; min-height: 0; padding: 0; margin: 0; float: none; max-width: none;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td > .hm-celula { display: block; min-width: 0; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td::before {
    display: block; content: attr(data-rotulo); font: 600 11px var(--font); letter-spacing: 0; text-transform: none; color: #71717a;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:first-child::before,
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:last-child::before { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:has(> .hm-celula:empty) { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(1),
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(2) { grid-column: 1 / -1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(3),
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(5) { grid-column: 1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(4),
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:nth-child(6) { grid-column: 2; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:last-child {
    grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 2px;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td:last-child > .hm-celula { display: flex; justify-content: flex-end; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-row-action { width: 40px; height: 40px; }
}


/* ---- Pacientes (HubMed): nome com nascimento na mesma linha; contato com reticências (texto completo no title);
 * respiro antes do rodapé da lista. ---- */
[data-visual="hubmed"] .hm-pac-linha { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
[data-visual="hubmed"] .hm-pac-linha .hm-pac-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-visual="hubmed"] .hm-pac-nasc { flex: none; font-size: 11px; color: #52525b; white-space: nowrap; }
[data-visual="hubmed"] .hm-pac-so-crm { flex: none; align-self: center; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #eef2ff; color: #3730a3; white-space: nowrap; }
[data-visual="hubmed"] .hm-pac-dados { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td > .hm-celula { min-width: 0; }
.hm-pac-rodape { margin-top: 10px; padding-top: 10px; }

/* ---- Rodada 4 · Relatórios, Caixa e Dashboard (HubMed) ---- */
/* Caixa: a data fica numa linha só (sem "03/11," quebrado sobre "08:26"). */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela tbody td:nth-child(7) { white-space: nowrap; }
}
/* Caixa no celular: os três totais voltam a ser legíveis (a regra de cinco colunas de antes encolhia o texto). */
@container hm-corpo (max-width: 560px) {
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi { padding: 6px 8px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi-rot { font-size: 9px; letter-spacing: .2px; }
  [data-visual="hubmed"] .hm-caixa-totais > .hm-kpis:first-child .hm-kpi-valor { font-size: 14px; letter-spacing: -.2px; }
}
/* Dashboard: nome de grupo ou exame longo quebra em duas linhas, em vez de cortar com reticências. */
[data-visual="hubmed"] .hm-dash-barras li > div > span { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Alvos de toque ≥ 40 px nas telas HubMed (rodada 5, alvos-hubmed) ----------
 * A área extra vem de ::after absoluto com inset negativo: o desenho e o layout não mudam.
 * Onde dois alvos ficam lado a lado, o vão entre eles (gap) limita a expansão, para não se sobreporem. */
[data-visual="hubmed"] :is(.hm-row-action, .hm-pg, .hm-hbtn, .hm-busca-lupa, .res-seg button, .hm-segmento button,
  .op-sit button, .op-vistas button, .hm-dash-periodo .btn, .hm-dash-exportar, .op-funil, .op-frescor .btn,
  .hm-equipe-ordem button) { position: relative; }
[data-visual="hubmed"] :is(.hm-row-action, .hm-pg, .hm-hbtn, .hm-busca-lupa, .res-seg button, .hm-segmento button,
  .op-sit button, .op-vistas button, .hm-dash-periodo .btn, .hm-dash-exportar, .op-funil, .op-frescor .btn,
  .hm-equipe-ordem button)::after { content: ""; position: absolute; }
/* Ações de linha (28 px com borda de 1 px): a área de dentro da borda é 26; 26 + 2×7 = 40. Por isso o vão entre elas sobe para 12 px nas telas de lista. */
[data-visual="hubmed"] :is(.hm-pacientes-tabela, .hm-procedimentos, .hm-catalogo) .hm-row-action::after { inset: -7px; }
[data-visual="hubmed"] :is(.hm-pacientes-tabela, .hm-procedimentos, .hm-catalogo) .hm-acoes-linha { gap: 12px; }
/* Paginação (34 px): 34 + 2×3 = 40; vão de 6 px entre os números. */
[data-visual="hubmed"] .hm-pg::after { inset: -3px; }
[data-visual="hubmed"] .hm-paginas { gap: 6px; }
/* Botões de barra (com borda de 1 px): ::after cobre a área interna; a expansão leva a caixa a 40 px. */
[data-visual="hubmed"] .hm-hbtn::after { inset: -2px -3px; }
[data-visual="hubmed"] :is(.hm-hbtn--refresh, .hm-hbtn--excel, .hm-hbtn--discreto, .op-hbtn-contorno)::after { inset: -2px -5px; }
[data-visual="hubmed"] .hm-busca-lupa::after { inset: -3px; }
/* Período (30 px de altura, 36 de largura no personalizado) e segmentos de 26 px. */
[data-visual="hubmed"] .res-seg button::after { inset: -5px 0; }
[data-visual="hubmed"] .res-seg .res-seg-cal::after { inset: -5px -4px -5px 0; }
[data-visual="hubmed"] .hm-segmento button::after { inset: -7px 0; }
[data-visual="hubmed"] .hm-guias .res-seg button::after { inset: -9px 0; }
[data-visual="hubmed"] .hm-guias .op-sit button::after { inset: -11px 0; }
[data-visual="hubmed"] :is(.op-funil, .hm-dash-periodo .btn, .hm-dash-exportar, .op-frescor .btn)::after { inset: -6px; }
[data-visual="hubmed"] .hm-equipe-ordem button::after { inset: -5px 0; }
/* Botões de barra no celular: o vão entre eles sobe para 10 px, para as áreas de 40 px não se sobreporem. */
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-barra .hm-barra-acoes { gap: 10px; }
}
/* Campo de busca em Pacientes: mesma altura dos controles da barra (32 px, sistema-alvo da S9). */
:root[data-visual="hubmed"] .hm-busca-caixa .hm-input { height: var(--ctl); }
/* Dias do calendário de guias: 30 px de altura viram 40 no celular (linhas ficam mais legíveis). */
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-guias .op-cal-dia { min-height: 40px; }
}

/* ---- Rodada 6 (densidade-hubmed): cartões de Procedimentos e Catálogo (exames) na faixa estreita ----
 * Procedimentos (lote D2: sem a coluna Prestadores): nome na primeira linha; categoria à esquerda e ações à direita, na segunda.
 * Catálogo: preço do paciente, repasse e lucro numa faixa de 3 colunas (rótulo pequeno em cima, valor embaixo). */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 8px; row-gap: 4px; align-items: center; padding: 8px 10px;
  }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela td { display: block; margin: 0; float: none; max-width: none; width: auto; }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela td:nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela td:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }

  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 6px;
    align-items: center; padding: 8px 10px;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td {
    display: block; margin: 0; float: none; text-align: left;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(6) { grid-column: 3; grid-row: 2; justify-self: end; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(3) { grid-column: 1; grid-row: 3; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(4) { grid-column: 2; grid-row: 3; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(5) { grid-column: 3; grid-row: 3; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(7) { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(3)::before,
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(4)::before,
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(5)::before { display: block; margin: 0; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:is(:nth-child(3), :nth-child(4), :nth-child(5)) > .hm-celula { display: block; }
}

/* Relatórios: Excel, PDF e Atualizar ficam na linha do período, só com ícone. No celular a barra tem duas linhas: período + ações; abas na de baixo. */
[data-visual="hubmed"] .hm-rel-filtros .hm-barra-acoes { gap: 4px; }
[data-visual="hubmed"] .hm-rel-filtros .hm-barra-acoes .hm-hbtn { width: 32px; height: 32px; }
/* Encolher para 32 px é só no desenho: a área de toque destes botões continua em 40 px (rodada 5). */
[data-visual="hubmed"] .hm-rel-filtros .hm-barra-acoes .hm-hbtn::after { inset: -4px; }
@container hm-corpo (max-width: 900px) {
  [data-visual="hubmed"] .hm-rel-filtros .op-periodo-host .seg button { padding: 3px 4px; }
  [data-visual="hubmed"] .hm-rel-filtros .hm-barra-acoes { order: 0; }
}

/* ---- Rodada 7 · Catálogo (HubMed): cartões compactos, ações na faixa dos dados ----
 * Exame: nome e situação na 1ª faixa; prestador e ações na 2ª (ações à direita, sem vazio à esquerda);
 * preço do paciente, repasse e lucro na 3ª. Cartão sem a faixa de ações sozinha embaixo.
 * Prestador: nome; CNPJ e filial; faturamento e exames; situação e ações na última faixa. */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="Preço do paciente"]) td:nth-child(7) { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; margin-top: 0; }

  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 6px;
    align-items: center; padding: 8px 10px;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td {
    display: block; margin: 0; float: none; text-align: left; min-width: 0;
  }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(2) { grid-column: 1; grid-row: 2; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(3) { grid-column: 2; grid-row: 2; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(4) { grid-column: 1; grid-row: 3; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(5) { grid-column: 2; grid-row: 3; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(6) { grid-column: 1; grid-row: 4; justify-self: start; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela tr:has(> td[data-rotulo="CNPJ"]) td:nth-child(7) { grid-column: 2; grid-row: 4; justify-self: end; align-self: center; margin-top: 0; }
}

/* Estados e foco das telas de leitura do HubMed (rodada 8, estados-hubmed): ação dentro do vazio e do erro; foco visível de 2px. */
.hm-vazio-acao { margin-top: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
[data-visual="hubmed"] :is(.hm-dashboard, .hm-guias, .hm-procedimentos, .hm-tela[data-tela="caixa"], .hm-tela[data-tela="pacientes"], .hm-tela[data-tela="relatorios"], .hm-tela[data-tela="catalogo"]) :is(button, a, select, input):focus-visible { outline: 2px solid #3f51b5; outline-offset: 2px; }

/* ---- Rodada 9: Mensagens e Logs (HubMed). Barra em 2 linhas no celular e 1 no tablet/desktop; Atualizar dentro da tela. ---- */
/* Mensagens: os quatro filtros de situação cabem numa linha com a lupa e Atualizar; KPIs em uma fileira no tablet. */
@media (min-width: 768px) {
  :root[data-visual="hubmed"] .hm-tela-mensagens .hm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* Quatro numa fileira: o rótulo quebra em duas linhas em vez de cortar com reticências. */
  :root[data-visual="hubmed"] .hm-tela-mensagens .hm-kpi-rot { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
}
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-tela-mensagens .hm-barra { padding: 8px; gap: 6px; }
  [data-visual="hubmed"] .hm-tela-mensagens .hm-barra > .hm-segmento { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  [data-visual="hubmed"] .hm-tela-mensagens .hm-barra > .hm-segmento::-webkit-scrollbar { display: none; }
  [data-visual="hubmed"] .hm-tela-mensagens .hm-barra > .hm-segmento button { flex: none; padding: 4px 6px; font-size: 10.5px; white-space: nowrap; }
  [data-visual="hubmed"] .hm-tela-mensagens .hm-tela-corpo { gap: 6px; }
}

/* Logs: período numa linha cheia; lupa, usuário e Atualizar na segunda linha, à direita. */
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-tela-logs .hm-barra { flex-wrap: wrap; padding: 8px; gap: 6px; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .op-periodo-host { order: 0; flex: 1 1 100%; min-width: 0; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .op-periodo-host .res-seg { display: flex; width: 100%; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .op-periodo-host .res-seg button { flex: 1 1 0; min-width: 0; padding: 4px 4px; font-size: 11px; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .hm-busca-caixa { order: 1; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .hm-campo { order: 1; flex: 1 1 0; min-width: 0; }
  [data-visual="hubmed"] .hm-tela-logs .hm-barra > .hm-barra-acoes { order: 1; }
  [data-visual="hubmed"] .hm-tela-logs .hm-tela-corpo { gap: 6px; }
}

/* ---- Rodada 9 (contas-guias): Contas a pagar, Guias canceladas e Gestão de guias, no celular de 390 px ---- */
/* Contas a pagar: Excel, Atualizar, Novo registro e Classificações ficam na linha dos filtros, à direita (ícone + tip).
 * Sem a linha de botões do topo, o conteúdo sobe. Campos encolhem antes de quebrar: no celular a barra usa 2 linhas. */
/* :root + atributo: a diagramação (hubmed-diagramacao.css) define a barra com a mesma especificidade e carrega depois. */
:root[data-visual="hubmed"] .hm-contas-pagar .hm-barra { flex-wrap: wrap; row-gap: 6px; gap: 4px; }
:root[data-visual="hubmed"] .hm-contas-pagar .hm-barra-acoes { margin-left: auto; }
@container hm-barra (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra > .hm-campo { flex: 1 1 100px; width: auto; min-width: 0; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra > .hm-campo:has(select) { flex: 0 0 104px; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra .hm-input { padding: 0 6px; font-size: 12px; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra select.hm-input { width: 100%; min-width: 0; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra-acoes { gap: 3px; }
}
@media (max-width: 767px) {
  /* Mais específico que a regra de diagramação (auto-fit 150px), que venceria por ordem de carga.
   * Dois cartões na primeira fileira; "Em aberto" ocupa a largura toda, em uma faixa baixa (valor e legenda lado a lado). */
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-tela-corpo { gap: 6px; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-kpi { padding: 5px 10px; gap: 2px; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-kpis { row-gap: 4px; }
  :root[data-visual="hubmed"] .hm-contas-pagar .hm-barra { padding: 8px; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-kpi-valor { font-size: 15px; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-kpi:last-child { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-kpi:last-child .hm-kpi-topo { width: 100%; }
  [data-visual="hubmed"] .hm-contas-pagar .hm-kpi-sub { font-size: 10px; }
}

/* Guias canceladas: uma linha só (lupa, período na faixa do calendário, Atualizar, PDF e Excel). Com a faixa
 * aberta, o período ocupa a linha de baixo (regra da faixa em hubmed-diagramacao.css, "Rodada L1"). */
[data-visual="hubmed"] .hm-guias-canceladas .hm-barra:not(.is-faixa-periodo):not(:has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active)))) { flex-wrap: nowrap; }
[data-visual="hubmed"] .hm-guias-canceladas .hm-barra-acoes { margin-left: auto; }

/* Gestão de guias: localizar pelo número com campo e Buscar lado a lado, centralizados, e cartão mais baixo. */
@media (max-width: 767px) {
  [data-visual="hubmed"] .hm-datas-guias .hm-guia-busca { padding: 12px; gap: 8px; }
  [data-visual="hubmed"] .hm-datas-guias .hm-guia-busca[hidden] { display: none; }
  :root[data-visual="hubmed"] .hm-datas-guias .hm-guia-busca { flex-wrap: nowrap; align-items: center; }
  :root[data-visual="hubmed"] .hm-datas-guias .hm-guia-busca .hm-busca { flex: 0 1 200px; max-width: 200px; }
  :root[data-visual="hubmed"] .hm-datas-guias .hm-guia-busca .hm-hbtn { flex: none; }
}

/* Procedimentos: Editar e Vincular à vista; o resto no ⋯ da linha. O menu abre logo abaixo do ⋯, dentro da própria célula. */
:root[data-visual="hubmed"] .hm-procedimentos .hm-tabela td:last-child { overflow: visible; } /* o balão do ⋯ não pode ser cortado pela célula */
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais { position: relative; display: inline-flex; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais-pop { display: none; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais.is-aberto .hm-mais-pop { display: flex; flex-direction: column; gap: 2px; position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 230px; padding: 4px; background: #fff; border: 1px solid #e1e7ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #1f2a5b; font: 500 13px var(--font); white-space: nowrap; cursor: pointer; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais-item:hover:not(:disabled) { background: #f4f4f5; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-mais-item:disabled { color: #a1a1aa; cursor: not-allowed; }

/* Procedimentos, barra estreita: o contador some (o rodapé já mostra o total) e os filtros abrem num balão sob a barra,
 * sem quebrar a linha. */
:root[data-visual="hubmed"] .hm-procedimentos .hm-barra { position: relative; }
@container hm-barra (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-procedimentos .hm-barra [data-contagem] { display: none; }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-barra.is-filtros-abertos .hm-campo[data-campo] { position: absolute; top: calc(100% + 6px); left: 12px; right: 12px; z-index: 30; flex: none; min-width: 0; padding: 8px; background: #fff; border: 1px solid #e1e7ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
  :root[data-visual="hubmed"] .hm-procedimentos .hm-barra.is-filtros-abertos .hm-campo[data-campo] select { width: 100%; max-width: none; min-width: 0; }
}

/* Coluna Guia de Orçamentos (HubMed): "—" quando não emitida; os botões da guia só aparecem no hover
 * ou no foco da linha. No toque (sem hover) ficam à vista. */
[data-visual="hubmed"] .hm-orc-guia-coluna .op-acoes { opacity: 0; transition: opacity var(--dur) var(--ease); }
[data-visual="hubmed"] tr.op-linha:hover .hm-orc-guia-coluna .op-acoes,
[data-visual="hubmed"] tr.op-linha:focus-within .hm-orc-guia-coluna .op-acoes { opacity: 1; }
@media (hover: none) { [data-visual="hubmed"] .hm-orc-guia-coluna .op-acoes { opacity: 1; } }

/* ---- Lote D2 (canário): Exames (catálogo) e Procedimentos ----
 * A tabela ocupa a largura do painel em qualquer janela, sem rolagem horizontal. Na faixa larga (acima de 720 px do
 * cartão), procedimento e prestador dividem o que sobra em proporção; preço, repasse, lucro, situação e ações ficam na
 * largura do conteúdo, e o cabeçalho pode quebrar em duas linhas. Procedimento e prestador: no máximo duas linhas,
 * depois reticências; o texto completo fica no title. Procedimentos: nome numa linha só, sem a coluna Prestadores.
 * Abaixo de 900 px do cartão a fonte vai a 11 px. A faixa estreita (cartões) segue as regras da Rodada 6 e 7. */
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela th { white-space: normal; }
@container hm-tabela (min-width: 721px) {
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela { width: 100%; table-layout: auto; font-size: 12px; }
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela td { white-space: nowrap; padding: 4px 8px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td[data-rotulo="Procedimento"] { width: 34%; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td[data-rotulo="Prestador"]:has(> .hm-celula > .hm-clamp2) { width: 22%; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tabela-cartao .hm-tabela td[data-rotulo="Prestador"]:has(.hm-pessoa),
  :root[data-visual="hubmed"] .hm-procedimentos .hm-tabela-cartao .hm-tabela td[data-rotulo="Procedimento"] { max-width: 0; width: 100%; }
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela td:is([data-rotulo="Categoria"], [data-rotulo="Preço do paciente"], [data-rotulo="Repasse"], [data-rotulo="Lucro"], [data-rotulo="Situação"], [data-rotulo="Ações"], [data-rotulo="CNPJ"], [data-rotulo="Filial"], [data-rotulo="Faturamento"], [data-rotulo="Exames"]) { width: 1%; }
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela td[data-rotulo="Categoria"] > .hm-celula { max-width: 130px; }
}
@container hm-tabela (min-width: 721px) and (max-width: 900px) {
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela-cartao .hm-tabela { font-size: 11px; }
}
:root[data-visual="hubmed"] .hm-catalogo .hm-clamp2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.3; max-width: 100%;
}
:root[data-visual="hubmed"] .hm-catalogo td[data-rotulo="Categoria"] > .hm-celula > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-tabela td .ellipsis { display: block; max-width: 100%; }
:root[data-visual="hubmed"] .hm-procedimentos td[data-rotulo="Categoria"] > .hm-celula > span { display: block; max-width: 100%; overflow: hidden; }
:root[data-visual="hubmed"] .hm-procedimentos .hm-selo { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Prestadores: nome e razão social, cada um numa linha com reticências (duas linhas no total). */
:root[data-visual="hubmed"] .hm-catalogo .hm-pessoa { min-width: 0; max-width: 100%; }
:root[data-visual="hubmed"] .hm-catalogo .hm-pessoa-texto { min-width: 0; max-width: 100%; }
:root[data-visual="hubmed"] .hm-catalogo .hm-pessoa-texto > b,
:root[data-visual="hubmed"] .hm-catalogo .hm-pessoa-texto > .hm-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Situação e ação de ativar/inativar: ícone em cor com contraste e sem esmaecer. A cor da ação vem da classe ac-* (base.css). */
:root[data-visual="hubmed"] .hm-catalogo .hm-sit-ok { display: inline-flex; color: #047857; }
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela .hm-acoes-linha .hm-row-action { opacity: 1; }
@media (hover: none) { :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tabela .hm-acoes-linha .hm-row-action { opacity: 1; } }

/* Ações da linha ficam à vista, mas em segundo plano até a linha receber o ponteiro ou o foco:
   o olho lê primeiro o nome e o valor. No toque, seguem com contraste total. */
@media (hover: hover) and (pointer: fine) {
  [data-visual="hubmed"] .hm-tabela tr .hm-row-action { opacity: .5; transition: opacity 150ms, background 150ms, color 150ms; }
  [data-visual="hubmed"] .hm-tabela tr:is(:hover, :focus-within) .hm-row-action { opacity: 1; }
}