/* Diagramação da skin HubMed (28/10/2026). Carregada por último: uma escala só de espaço, tipo e
 * controle sobre as camadas anteriores (tema-hubmed.css e hubmed-telas.css), sem trocar a identidade
 * (navy, indigo, Inter, rótulos em caixa alta, cartões com borda colorida).
 *
 * Escala (S9, igual à Moderna no sistema-alvo de SERIE2.md):
 *          espaço 4 · 8 · 12 · 16 · 24   |   controle 32 px (denso 28)   |   raio 8 controle · 12 cartão
 *          texto 13 · apoio/rótulo 11–12, sem caixa alta · título de painel 13/600 · título da página 17 · número 21
 */
:root[data-visual="hubmed"] {
  --d1: 4px; --d2: 8px; --d3: 12px; --d4: 16px; --d5: 24px;
  --ctl: 32px; --ctl-sm: 28px;
  --r-ctl: 8px; --r-cartao: 14px;
  --t-txt: 13px; --t-apoio: 12px; --t-rot: 11px;
  --control-h: var(--ctl); --control-h-sm: var(--ctl-sm);
  --table-row-h: 38px;
  --topbar-h: 56px;
}

/* ---------- Casca ---------- */
:root[data-visual="hubmed"] .topbar { padding: 8px 16px; gap: 10px; }
:root[data-visual="hubmed"] .hm-cab-icone { width: 34px; height: 34px; border-radius: var(--r-ctl); }
:root[data-visual="hubmed"] .hm-cab-icone .ico { width: 18px; height: 18px; }
:root[data-visual="hubmed"] .topbar-title { font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -0.4px; }
/* O subtítulo repetia o que o título e o menu já dizem. */
:root[data-visual="hubmed"] .hm-cab-sub { display: none; }
:root[data-visual="hubmed"] .hm-cab-textos { justify-content: center; }
/* A versão aparecia duas vezes no rodapé do menu. */
:root[data-visual="hubmed"] .rail .rail-versao { display: none; }
:root[data-visual="hubmed"] .main { padding: var(--d3); gap: var(--d3); }

/* ---------- Ritmo vertical das telas ---------- */
:root[data-visual="hubmed"] .hm-tela-corpo { gap: var(--d3); }
:root[data-visual="hubmed"] .hm-kpis { margin: 0; }
:root[data-visual="hubmed"] .hm-dashboard .page-scroll { display: flex; flex-direction: column; gap: var(--d3); }
:root[data-visual="hubmed"] .hm-dashboard [data-financeiro] { display: flex; flex-direction: column; gap: var(--d3); }
:root[data-visual="hubmed"] :is(.hm-dash-periodo, .hm-dash-grade) { margin: 0; }

/* ---------- Controles: mesma altura em todas as telas ---------- */
:root[data-visual="hubmed"] :is(.hm-input, .input, .select) { height: var(--ctl); border-radius: var(--r-ctl); font-size: var(--t-txt); }
:root[data-visual="hubmed"] textarea.input { height: auto; }
:root[data-visual="hubmed"] .hm-hbtn { height: var(--ctl); border-radius: var(--r-ctl); padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
:root[data-visual="hubmed"] .btn:not(.btn-sm) { min-height: var(--ctl); border-radius: var(--r-ctl); }
:root[data-visual="hubmed"] .btn-sm { min-height: var(--ctl-sm); border-radius: 8px; }
:root[data-visual="hubmed"] .seg { padding: 3px; border-radius: var(--r-ctl); }
:root[data-visual="hubmed"] .seg button { min-height: calc(var(--ctl) - 6px); padding: 0 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
/* Selects da barra com a largura do texto: antes cortavam ("Todas as categori"). */
:root[data-visual="hubmed"] .hm-barra > .hm-campo { flex: 0 0 auto; min-width: 0; }
:root[data-visual="hubmed"] .hm-campo > select.hm-input { width: auto; min-width: 150px; max-width: 260px; padding-right: 30px; }
:root[data-visual="hubmed"] .hm-campo { gap: 3px; }
:root[data-visual="hubmed"] .hm-campo > span { font-size: var(--t-apoio); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ---------- Cartões e painéis ---------- */
:root[data-visual="hubmed"] :is(.hm-cartao, .panel) { border-radius: var(--r-cartao); }
:root[data-visual="hubmed"] .panel-head { padding: 6px 10px; min-height: 42px; align-items: center; }
:root[data-visual="hubmed"] .panel-title { font-size: var(--t-txt); font-weight: 600; letter-spacing: 0; text-transform: none; display: flex; align-items: center; gap: 6px; }
:root[data-visual="hubmed"] .panel-title > .ico { color: var(--accent); flex: none; }
:root[data-visual="hubmed"] .panel-body { padding: var(--d3); }
:root[data-visual="hubmed"] .hm-barra { padding: var(--d2) var(--d3); gap: var(--d2); }

/* ---------- Indicadores ---------- */
:root[data-visual="hubmed"] .hm-kpis { gap: var(--d2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
:root[data-visual="hubmed"] .hm-kpi { padding: 10px 12px; gap: 2px; border-radius: var(--r-ctl); }
:root[data-visual="hubmed"] .hm-kpi-rot { font-size: var(--t-rot); font-weight: 700; letter-spacing: .4px; color: #52606d; }
:root[data-visual="hubmed"] .hm-kpi-valor { font-size: 21px; font-weight: 800; letter-spacing: -.3px; line-height: 1.2; }
:root[data-visual="hubmed"] .hm-kpi-sub { font-size: 11px; color: #71717a; }
:root[data-visual="hubmed"] .hm-kpi-ico { width: 26px; height: 26px; border-radius: 8px; }
:root[data-visual="hubmed"] .hm-kpi.is-vazio { box-shadow: none; }
:root[data-visual="hubmed"] .hm-kpi.is-vazio .hm-kpi-valor { color: #a1a1aa; }
:root[data-visual="hubmed"] .hm-kpi.is-vazio .hm-kpi-ico { filter: grayscale(1); opacity: .55; }

/* ---------- Tabelas: texto legível, linha de 38 px (34–40 do sistema-alvo), números à direita ---------- */
:root[data-visual="hubmed"] .hm-tabela { font-size: var(--t-txt); }
:root[data-visual="hubmed"] .hm-tabela th { padding: 8px 10px; font-size: var(--t-apoio); font-weight: 600; letter-spacing: 0; text-transform: none; }
:root[data-visual="hubmed"] .hm-tabela td { padding: 4px 10px; height: var(--table-row-h); }
:root[data-visual="hubmed"] .hm-tabela td.hm-d, :root[data-visual="hubmed"] .hm-tabela th.hm-d { font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-tabela-cartao { padding: var(--d2) var(--d3); }
:root[data-visual="hubmed"] .hm-rodape { padding-top: var(--d2); margin-top: 0; }
:root[data-visual="hubmed"] .hm-rodape-info { font-size: var(--t-apoio); font-weight: 600; letter-spacing: 0; text-transform: none; }
:root[data-visual="hubmed"] .table td { font-size: var(--t-txt); }
:root[data-visual="hubmed"] .table th { font-size: var(--t-apoio); font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Relatórios: o dia ocupa o espaço; as colunas de número ficam juntas, à direita, como num extrato. */
:root[data-visual="hubmed"] .hm-relatorio .hm-tabela :is(th, td):not(:first-child) { width: 150px; }

/* ---------- Dashboard ---------- */
:root[data-visual="hubmed"] .hm-dash-periodo { padding: 6px 10px; gap: var(--d2); align-items: center; }
:root[data-visual="hubmed"] .hm-dash-periodo > .hm-dash-intervalo { margin-right: 0; }
:root[data-visual="hubmed"] .hm-dash-grade { gap: var(--d3); }
:root[data-visual="hubmed"] .hm-dash-grade.is-unico { grid-template-columns: minmax(0, 1fr); }
:root[data-visual="hubmed"] .hm-dash-exportar { margin-left: auto; }
:root[data-visual="hubmed"] .hm-dash-carregando { font-size: var(--t-apoio); color: #a1a1aa; padding: 4px 0; }
:root[data-visual="hubmed"] .hm-dash-barras { gap: 10px; }
:root[data-visual="hubmed"] .hm-dash-barras li > div { font-size: var(--t-apoio); }
:root[data-visual="hubmed"] .hm-dash-barras li > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-dash-grade.is-unico .hm-dash-barras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; }
/* Nove números em grade 3×3, separados por linhas finas, sem a frase de explicação embaixo de cada um. */
:root[data-visual="hubmed"] .hm-atendimento-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); padding: 0; }
:root[data-visual="hubmed"] .hm-atendimento-numero { background: var(--surface); padding: 10px 12px; gap: 2px; border: 0 !important; cursor: help; }
:root[data-visual="hubmed"] .hm-atendimento-numero > b { font-size: 20px; line-height: 1.2; font-weight: 800; }
:root[data-visual="hubmed"] .hm-atendimento-rotulo { font-size: var(--t-rot); font-weight: 600; }
:root[data-visual="hubmed"] .hm-fila-principal { margin-bottom: var(--d3); }
:root[data-visual="hubmed"] .hm-fila-principal b { font-size: 26px; }
:root[data-visual="hubmed"] .hm-widget-icone { width: 38px; height: 38px; border-radius: var(--r-ctl); }
:root[data-visual="hubmed"] .hm-fila-detalhes b { font-size: 17px; }
:root[data-visual="hubmed"] .hm-fila-resumo .panel-body > p { margin: var(--d3) 0 0; }
:root[data-visual="hubmed"] .hm-equipe-ordem { margin-left: auto; }

/* ---------- Guias: busca, agenda, situação e filtros na mesma barra ---------- */
/* A barra de Guias vira o contêiner da busca recolhível: em barra estreita fica só a lupa, como nas outras telas. */
:root[data-visual="hubmed"] .hm-guias .op-barra { container: hm-barra / inline-size; }
:root[data-visual="hubmed"] .hm-guias .op-frescor-slot { margin-left: auto; }

/* ---------- Caixa: totais no topo, formas de pagamento numa faixa ---------- */
:root[data-visual="hubmed"] .hm-caixa-totais { gap: var(--d2); }
:root[data-visual="hubmed"] .hm-caixa-totais .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-visual="hubmed"] .hm-formas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
:root[data-visual="hubmed"] .hm-formas li { display: inline-flex; align-items: baseline; gap: 8px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
:root[data-visual="hubmed"] .hm-formas span { font-size: var(--t-rot); font-weight: 700; color: #52606d; }
:root[data-visual="hubmed"] .hm-formas b { font-size: var(--t-txt); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
:root[data-visual="hubmed"] .hm-formas li.is-zero { opacity: .5; }

/* ---------- Orçamentos: cartões sem quebra de número e valor ---------- */
:root[data-visual="hubmed"] .op-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--d2); }
:root[data-visual="hubmed"] .op-card-topo { flex-wrap: wrap; row-gap: 4px; }
:root[data-visual="hubmed"] .op-card-topo > .strong:first-child { white-space: nowrap; }
:root[data-visual="hubmed"] .op-card-total { margin-left: auto; white-space: nowrap; }
:root[data-visual="hubmed"] .op-card-acoes { flex-wrap: nowrap; }
:root[data-visual="hubmed"] .op-card-quando { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Configurações: as seções ficam no topo, sem a grade esticar as linhas até o fim do painel ---------- */
:root[data-visual="hubmed"] .cfg-body { align-content: start; }
:root[data-visual="hubmed"] .cfg-body.cfg-colunas { gap: var(--d4) var(--d5); }

/* ---------- Telas estreitas ---------- */
@media (max-width: 1100px) {
  :root[data-visual="hubmed"] .hm-atendimento-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root[data-visual="hubmed"] { --ctl: 36px; --topbar-h: 52px; }
  :root[data-visual="hubmed"] .main { padding: var(--d2); gap: var(--d2); }
  :root[data-visual="hubmed"] .topbar-title { font-size: 16px; }
  /* Cabeçalho no celular: margens menores e o título cede (ellipsis) para os botões caberem a 320 px. */
  :root[data-visual="hubmed"] .topbar { padding: 6px 8px; gap: 6px; }
  :root[data-visual="hubmed"] .topbar > .hm-cab-textos { flex: 0 1 auto; min-width: 0; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-kpi-valor { font-size: 15px; }
  :root[data-visual="hubmed"] .hm-kpi-valor { font-size: 18px; }
  :root[data-visual="hubmed"] .hm-relatorio .hm-tabela :is(th, td):not(:first-child) { width: auto; }
  :root[data-visual="hubmed"] .op-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Rodada de passadas (dashboard, relatórios, caixa, pacientes, catálogo, procedimentos) ----------
 * Carregada por último: as regras :root[data-visual] daqui vencem as de hubmed-telas.css e as genéricas. */

/* Dashboard: indicadores em três colunas e enxutos no celular; a legenda "no período" fica só no desktop. */
@container hm-corpo (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-periodo { padding: 4px 6px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi { padding: 7px 9px; gap: 1px; min-width: 0; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-ico,
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-sub { display: none; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-rot { font-size: 9px; line-height: 1.2; white-space: normal; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-valor { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Rodada G3 · Relatórios (barra com Financeiro, Caixa, Repasse e Categorias). Regra do dono: cabeçalho e barra de
 * filtros numa linha só, em qualquer largura (320 a 1440 px). Nenhuma aba some: a faixa de abas rola na horizontal,
 * sem barra à vista, e o degradê à direita (is-cortada, ligado por relatorios.js) avisa que há mais abas.
 * Ordem da barra: período · lupa (ou campo) · abas · Excel, PDF e Atualizar, sempre à direita.
 * Só a faixa do período, aberta pelo calendário, põe a barra em duas linhas (regra L1, mais abaixo). */
:root[data-visual="hubmed"] .hm-rel-filtros .hm-barra { flex-wrap: nowrap; }
:root[data-visual="hubmed"] .hm-rel-filtros .hm-busca-caixa { flex: 1 1 120px; min-width: 120px; max-width: 290px; margin-left: 0; }
/* ".hm-barra > " na frente deste seletor para ganhar da regra geral de ações (margin-left auto e order 20, mais abaixo). */
:root[data-visual="hubmed"] .hm-rel-filtros .hm-barra > .hm-barra-acoes { margin-left: 0; }
:root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento {
  flex: 0 1 auto; min-width: 0; margin-left: auto; flex-wrap: nowrap; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
:root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento::-webkit-scrollbar { display: none; }
:root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento button { flex: 0 0 auto; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento.is-cortada { mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
:root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento.is-cortada.is-fim { mask-image: none; -webkit-mask-image: none; }
@container hm-barra (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-busca-caixa:not(.is-aberta):not(.tem-valor) { flex: 0 0 auto; min-width: 0; max-width: none; }
  /* Campo aberto: ocupa até 112 px; as abas ficam com o que sobra e rolam. */
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-busca-caixa:is(.is-aberta, .tem-valor) { flex: 0 1 112px; min-width: 0; max-width: none; }
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento { flex: 1 1 0; margin-left: 0; order: 2; }
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento button { padding: 5px 6px; font-size: 11px; }
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-barra > .hm-barra-acoes { order: 3; margin-left: 0; }
}
/* Barra estreita (celular): as abas ganham uma linha própria, inteiras e sem rolagem lateral. */
@media (max-width: 480px) {
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-barra { flex-wrap: wrap; }
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento { flex: 1 1 100%; order: 9; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  :root[data-visual="hubmed"] .hm-rel-filtros .hm-segmento button { flex: 1 1 0; min-width: 0; }
}
/* Caixa: a busca e as ações numa linha; o período ocupa a linha de baixo, com os quatro atalhos e o calendário. */
@container hm-corpo (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-barra-periodo { flex-wrap: wrap; row-gap: 6px; }
  /* O host do período é display: contents: o seletor (.res-seg) é o item da barra. */
  :root[data-visual="hubmed"] .hm-barra-periodo .res-seg { order: 1; flex: 1 1 100%; width: 100%; min-width: 0; display: flex; }
  :root[data-visual="hubmed"] .hm-barra-periodo .res-seg button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
}
@container hm-tabela (max-width: 720px) {
  /* A coluna da forma de pagamento (pílula) tem a largura do conteúdo: a pílula não invade a data. */
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela tr { grid-template-columns: auto minmax(max-content, 1fr) auto auto auto auto; column-gap: 4px; padding-inline: 8px; }
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(7) { font-size: 11px; }
}

/* Pacientes: ficha e cadastro na mesma célula, lado a lado; no celular a célula ocupa a segunda linha à direita. */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Catálogo e Procedimentos: ações secundárias em contorno, só com ícone no celular (com dica); "Novo" é o destaque. */
:root[data-visual="hubmed"] .hm-hbtn--discreto { background: #fff; color: #1f2a5b; border: 1px solid #c5cbe0; box-shadow: none; }
:root[data-visual="hubmed"] .hm-hbtn--discreto:hover:not(:disabled) { background: #f1f3f9; }
:root[data-visual="hubmed"] .hm-hbtn--discreto[aria-pressed="true"] { background: #fff8e1; color: #b45309; border-color: #ffe082; }
:root[data-visual="hubmed"] .hm-hbtn--discreto:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 767px) {
  :root[data-visual="hubmed"] .hm-tela-topo > .hm-acoes > .hm-hbtn--discreto { flex: none; }
}
@container hm-corpo (max-width: 560px) {
  :root[data-visual="hubmed"] .hm-tela-topo .hm-hbtn--discreto { width: 36px; padding: 0; }
}

/* Catálogo (Exames): o funil abre os filtros secundários em tela estreita da barra. */
.hm-funil { display: none; }
:root[data-visual="hubmed"] .hm-barra.is-filtros-abertos { flex-wrap: wrap; row-gap: 6px; } /* a própria barra é o contêiner: a regra fica fora do @container */
@container hm-barra (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-barra .hm-funil { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none; }
  :root[data-visual="hubmed"] .hm-barra:not(.is-filtros-abertos) .hm-campo[data-campo] { display: none; }
  :root[data-visual="hubmed"] .hm-barra.is-filtros-abertos .hm-campo:not([hidden]) { display: flex; flex: 1 1 150px; }
}

/* ---------- Rodada 2 (hubmed-r2): topo em duas linhas, ações neutras e telas enxutas ----------
 * Catálogo e Procedimentos: linha 1 = abas/contagem e Novo; linha 2 = barra (busca, funil, ações). */
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo { flex-wrap: nowrap; gap: var(--d2); }
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo > .hm-acoes { width: auto; margin-left: auto; flex: none; flex-wrap: nowrap; }
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo > .hm-acoes > .hm-hbtn { flex: none; }
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo .hm-pilula { white-space: nowrap; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento { flex: none; }

/* Ações das linhas: mesmo estilo neutro de ícone (com dica); só a ação destrutiva fica vermelha. */
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-row-action:is(.hm-row-action--editar, .hm-row-action--ver, .hm-row-action--neutra),
:root[data-visual="hubmed"] .hm-pacientes-tabela .hm-row-action--ver {
  background: #fff; color: #1f2a5b; border: 1px solid #c5cbe0; box-shadow: none;
}
:root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-row-action:is(.hm-row-action--editar, .hm-row-action--ver, .hm-row-action--neutra):hover:not(:disabled),
:root[data-visual="hubmed"] .hm-pacientes-tabela .hm-row-action--ver:hover {
  background: #f1f3f9; color: #1f2a5b;
}

/* Dashboard: barra de período e indicadores mais baixos; no tablet os cinco indicadores cabem numa linha. */
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-periodo { padding: 3px 8px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-periodo > .btn-icon { width: 30px; height: 30px; min-height: 30px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi { padding: 7px 10px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi-valor { font-size: 19px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi-topo { min-height: 0; }
:root[data-visual="hubmed"] .hm-dashboard .panel-head { padding: 6px 12px; min-height: 36px; }
@container hm-corpo (min-width: 480px) and (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi { padding: 6px 7px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-valor { font-size: 13px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-rot { font-size: 9px; white-space: normal; }
}
/* Valores de dinheiro nunca são cortados: no celular os cartões viram duas colunas (o último ocupa a linha) e
 * o valor encolhe com a largura do cartão (clamp), sem reticências. */
@container hm-corpo (max-width: 479px) {
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-kpi-valor { font-size: clamp(14px, 5cqi, 19px); white-space: nowrap; overflow: visible; text-overflow: clip; }
}

/* Caixa: a faixa de formas de pagamento ocupa menos linhas (cinco colunas no tablet, três no celular). */
@container hm-corpo (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas li { min-width: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 8px; border-radius: 8px; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas b { font-size: 12px; white-space: nowrap; }
}
@container hm-corpo (min-width: 480px) and (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-formas b { font-size: 11px; }
}

/* Caixa no tablet: o período fica na mesma linha da busca (cabe na largura da coluna); no celular, na linha de baixo. */
@container hm-corpo (min-width: 480px) and (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-barra-periodo { flex-wrap: nowrap; }
  :root[data-visual="hubmed"] .hm-barra-periodo .res-seg { order: 0; flex: 0 0 auto; width: auto; }
  :root[data-visual="hubmed"] .hm-barra-periodo .res-seg button { flex: 0 0 auto; padding-inline: 8px; }
}

/* Celular: "Novo" vira só o "+" (a dica traz o nome), e a linha das abas/contagem cabe numa linha. */
@container hm-corpo (max-width: 480px) {
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo .hm-hbtn--add { width: 36px; padding: 0; }
  :root[data-visual="hubmed"] :is(.hm-catalogo, .hm-procedimentos) .hm-tela-topo .hm-hbtn--add span { display: none; }
}
/* Dashboard: o espaço entre os blocos cai de 12 para 8 px (a primeira faixa de conteúdo sobe). */
:root[data-visual="hubmed"] .hm-dashboard .page-scroll { gap: var(--d2); }
/* Relatórios no tablet: os quatro indicadores numa linha só. */
@container hm-corpo (min-width: 480px) and (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-rel-filtros + .hm-pilha .hm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  :root[data-visual="hubmed"] .hm-rel-filtros + .hm-pilha .hm-kpi { padding: 6px 8px; }
  :root[data-visual="hubmed"] .hm-rel-filtros + .hm-pilha .hm-kpi-valor { font-size: 15px; }
}
/* Dashboard no desktop: indicadores um pouco mais baixos (ícone de 22 px, linha do valor mais fechada). */
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi { padding: 6px 10px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi-ico { width: 22px; height: 22px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-kpi-valor { line-height: 1.1; }
/* Pacientes em celular: cada cartão ocupa só as duas linhas do conteúdo (antes, 40 px de altura mínima por célula). */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td { padding: 0; height: auto; min-height: 0; }
  :root[data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela tr { padding: 6px 10px; gap: 1px 8px; }
  :root[data-visual="hubmed"] .hm-pacientes-tabela .hm-tabela td:nth-child(3) { align-self: center; }
}
/* Caixa em cartão: valor e repasse têm a largura do próprio texto (ex.: "Não informado" em cancelamento) e não invadem o nome. */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:is(:nth-child(8), :nth-child(9)) { min-width: max-content; overflow: visible; font-size: 12px; white-space: nowrap; }
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(1) { min-width: max-content; overflow: visible; }
  /* Data em duas linhas (dia e hora) em vez de cortada. */
  :root[data-visual="hubmed"] .hm-caixa-lista .hm-tabela td:nth-child(7) { white-space: normal; line-height: 1.2; min-width: 52px; }
}

/* ---- Série 2 · S2/S3 (HubMed): catálogo numa linha só, filtros no funil, linha de 36px, ações no hover;
 * KPIs e cartões do dashboard em faixa baixa e sem borda colorida pesada. ---- */
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo { flex-wrap: nowrap; align-items: center; gap: 6px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa { margin-left: auto; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { min-height: 32px; padding: 0 12px; font-size: 12px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > [data-contagem] { flex: none; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn:not(.hm-hbtn--add) {
  width: 32px; height: 32px; padding: 0; justify-content: center; background: none; border-color: transparent; color: #52606d;
}
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn:not(.hm-hbtn--add):hover { background: #f4f4f5; color: #1f2a5b; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn:not(.hm-hbtn--add) span { display: none; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn--add { height: 32px; font-size: 12px; padding: 0 12px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil.tem-filtro { color: #3949ab; background: #e8eaf6; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-wrap { position: relative; display: flex; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: grid; gap: 6px; min-width: 220px; padding: 10px;
  background: #fff; border: 1px solid rgba(225,231,239,.9); border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.22);
}
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop[hidden] { display: none; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop .hm-input { width: 100%; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-corpo > .hm-tabela-cartao,
:root[data-visual="hubmed"] .hm-catalogo [data-corpo] { margin-top: 6px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tabela td { height: 36px; padding: 4px 10px; }
:root[data-visual="hubmed"] .hm-catalogo .hm-discreto { font-size: 12px; color: #71717a; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-catalogo .hm-row-action {
  width: 28px; height: 28px; border: 0; background: none; box-shadow: none; opacity: 1; transition: opacity .15s, background .15s;
}
:root[data-visual="hubmed"] .hm-catalogo tbody tr:hover .hm-row-action,
:root[data-visual="hubmed"] .hm-catalogo tbody tr:focus-within .hm-row-action,
:root[data-visual="hubmed"] .hm-catalogo .hm-row-action:focus-visible { opacity: 1; }
:root[data-visual="hubmed"] .hm-catalogo .hm-row-action:hover { background: #f4f4f5; }
:root[data-visual="hubmed"] .hm-catalogo .hm-row-action *,
:root[data-visual="hubmed"] .hm-catalogo .hm-hbtn * { outline: 0; border: 0; box-shadow: none; }
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-row-action { width: 40px; height: 40px; border: 0; background: none; opacity: 1; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-row-action:hover,
  :root[data-visual="hubmed"] .hm-catalogo .hm-row-action:active { background: none; }
}

/* KPIs do dashboard e cartões de número: uma faixa de até 44px (rótulo, valor e detalhe na mesma linha). */
:root[data-visual="hubmed"] .hm-kpis { gap: 8px; }
:root[data-visual="hubmed"] .hm-kpi {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px;
  height: 44px; max-height: 44px; padding: 0 12px; border-radius: 10px; box-shadow: none; transform: none;
  border: 1px solid rgba(225,231,239,.8); border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent);
}
:root[data-visual="hubmed"] .hm-kpi:hover { box-shadow: none; transform: none; }
:root[data-visual="hubmed"] .hm-kpi.is-destaque { border: 1px solid rgba(225,231,239,.8); border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent); }
:root[data-visual="hubmed"] .hm-kpi-topo { display: contents; }
:root[data-visual="hubmed"] .hm-kpi-ico { display: none; }
:root[data-visual="hubmed"] .hm-kpi-rot { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-visual="hubmed"] .hm-kpi-valor { font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-kpi-sub { display: none; }
:root[data-visual="hubmed"] .res-stat { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; height: 44px; max-height: 44px; padding: 0 2px; border-top: 0; }
:root[data-visual="hubmed"] .res-stat-cab { font-size: 11px; }
:root[data-visual="hubmed"] .res-stat-cab > svg { display: none; }
:root[data-visual="hubmed"] .res-stat-num { font-size: 15px; line-height: 1; }
:root[data-visual="hubmed"] .res-stat-det { font-size: 11px; }
@media (max-width: 760px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo { flex-wrap: wrap; row-gap: 6px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > [data-contagem] { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento { flex: 0 0 auto; width: auto; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { flex: 0 0 auto; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa { margin-left: 0; flex: 1 1 120px; min-width: 120px; max-width: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa .hm-busca { width: 100%; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-acoes { margin-left: 0; }
}
:root[data-visual="hubmed"] .hm-catalogo .hm-funil { display: inline-grid; place-items: center; }
:root[data-visual="hubmed"] .hm-catalogo .hm-row-action:is(.hm-row-action--editar, .hm-row-action--ver, .hm-row-action--neutra, .hm-row-action--excluir) { background: none; border: 0; box-shadow: none; }
:root[data-visual="hubmed"] .hm-catalogo tbody .hm-row-action:is(.hm-row-action--editar, .hm-row-action--ver, .hm-row-action--neutra):hover:not(:disabled) { background: #f4f4f5; color: #1f2a5b; }

/* Passada S3/S4 (dashboard): faixa de indicadores, barras finas numa linha, atendimento e fila em faixas baixas.
 * Seletores só das telas do dashboard (.hm-dashboard, .hm-dash-*, .hm-atendimento-*, .hm-fila-*, .hm-equipe-*). */
:root[data-visual="hubmed"] .hm-dashboard { text-transform: none; }
:root[data-visual="hubmed"] .hm-dashboard .page-scroll { gap: 8px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-periodo { padding: 6px 10px; margin-bottom: 0; gap: 8px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-intervalo { font-size: 11px; }
:root[data-visual="hubmed"] .hm-dashboard [data-financeiro] { gap: 8px; }
:root[data-visual="hubmed"] .hm-dash-faixa { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi { display: flex; grid-template-columns: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; min-width: 0; box-shadow: none; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi:hover { transform: none; box-shadow: none; }
:root[data-visual="hubmed"] .hm-dash-kpi-rot { font-size: 11px; font-weight: 600; color: #52606d; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-dash-kpi-valor { font-size: 14px; font-weight: 800; color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi.is-vazio .hm-dash-kpi-valor { color: #a1a1aa; }
:root[data-visual="hubmed"] .hm-dash-grade { gap: 8px; }
:root[data-visual="hubmed"] .hm-dash-bloco .panel-head { min-height: 34px; padding: 6px 10px; }
:root[data-visual="hubmed"] .hm-dash-bloco .panel-body { padding: 8px 10px; }
:root[data-visual="hubmed"] .hm-dash-barras { display: flex; flex-direction: column; gap: 3px; }
:root[data-visual="hubmed"] .hm-dash-barras li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, .9fr) auto; align-items: center; gap: 10px; min-height: 22px; font-size: 12px; }
:root[data-visual="hubmed"] .hm-dash-barras .hm-dash-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
:root[data-visual="hubmed"] .hm-dash-barras progress { height: 3px; margin: 0; }
:root[data-visual="hubmed"] .hm-dash-barras li > b { font-size: 12px; font-weight: 700; min-width: 2.5em; text-align: right; font-variant-numeric: tabular-nums; }
:root[data-visual="hubmed"] .hm-dash-grade.is-unico .hm-dash-barras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 3px 24px; }
/* Atendimentos: uma faixa de células baixas, sem ícones */
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-numeros { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0; }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-numero { padding: 6px 8px; gap: 0; }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-rotulo { font-size: 10px; color: var(--ink-soft); }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-rotulo > svg, :root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-rotulo > .ico { display: none; }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-numero > b { font-size: 15px; line-height: 1.3; }
/* Fila agora: uma linha de resumo */
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-principal { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-principal > .hm-widget-icone { display: none; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-principal > div { flex-direction: row; align-items: baseline; gap: 6px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-principal b { font-size: 15px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-detalhes { display: flex; gap: 14px; padding-top: 0; border-top: 0; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-detalhes > div { flex-direction: row; align-items: baseline; gap: 6px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-detalhes b { font-size: 13px; }
:root[data-visual="hubmed"] .hm-dashboard .hm-fila-equipe { margin-top: 6px; gap: 4px; }
/* Por atendente: uma linha densa por pessoa (cartão achatado em grade) */
:root[data-visual="hubmed"] .hm-dashboard .hm-equipe-painel .panel-body { padding: 0; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi { text-decoration: none; }
:root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi:hover { text-decoration: none; }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-numeros { background: transparent; }
:root[data-visual="hubmed"] .hm-dashboard .hm-atendimento-numero { background: transparent; border-top: 1px solid var(--line) !important; border-left: 0 !important; }
/* Caixa (S3): selos em caixa baixa e cancelado só na linha */
:root[data-visual="hubmed"] .hm-caixa-lista .hm-selo { text-transform: none; }
:root[data-visual="hubmed"] .hm-caixa-lista tr.is-cancelada td { color: var(--ink-soft); }
:root[data-visual="hubmed"] .hm-formas span { text-transform: none; }
/* Mensagens (S3): status e ações discretos; ações da linha sobem no hover ou foco */
:root[data-visual="hubmed"] .hm-tela-mensagens .hm-selo { font-size: 11px; font-weight: 600; padding: 1px 8px; }
:root[data-visual="hubmed"] .hm-tela-mensagens .hm-row-action { opacity: .5; transition: opacity .15s; }
:root[data-visual="hubmed"] .hm-tela-mensagens tbody tr:hover .hm-row-action, :root[data-visual="hubmed"] .hm-tela-mensagens tbody tr:focus-within .hm-row-action { opacity: 1; }
@media (max-width: 760px) {
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi { display: flex; grid-template-columns: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: auto; min-height: 36px; padding: 5px 8px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-dash-kpi-valor { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Rodada S5 (atendimento, datas de guias, linha clicável). Só as telas do dashboard de atendimento,
 * Datas de guias e tabelas com abrirPor (Pacientes, Mensagens, Exames, Prestadores, Procedimentos). */
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 0; padding: 0; background: none; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-numero { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 10px; min-width: 0; background: none; border: 0 !important; border-left: 1px solid var(--line) !important; cursor: default; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-numero:first-child { border-left: 0 !important; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-rotulo { font-size: 11px; font-weight: 600; color: var(--ink-soft); min-width: 0; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-rotulo > .ico { display: none; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-atendimento-numero > b { font-size: 14px; line-height: 1.2; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-equipe-tabela { border: 0; box-shadow: none; background: none; }
:root[data-visual="hubmed"] .hm-dash-atendimento .hm-equipe-tabela td { white-space: nowrap; }
:root[data-visual="hubmed"] .hm-guia-busca { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; }
:root[data-visual="hubmed"] .hm-guia-busca[hidden] { display: none; }
:root[data-visual="hubmed"] .hm-guia-busca .hm-busca { flex: 1 1 auto; min-width: 0; max-width: 420px; }
:root[data-visual="hubmed"] .hm-guia-busca .hm-input { width: 100%; }
:root[data-visual="hubmed"] .hm-tela .hm-tabela tbody tr.is-clicavel { cursor: pointer; }
:root[data-visual="hubmed"] .hm-tela .hm-tabela tbody tr.is-clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Celular (S7): indicadores sem valor cortado ----------
 * Na faixa de 44px o rótulo e o valor dividem a mesma linha e o valor vira reticências ("R$ 7.1…").
 * Abaixo de 480px cada indicador é um cartão em coluna (rótulo em cima, valor embaixo, inteiro) e
 * a grade é de duas colunas; o último ímpar ocupa a largura toda. O caixa mantém as três colunas. */
@container hm-corpo (max-width: 479px) {
  :root[data-visual="hubmed"] .hm-kpis:not(.hm-caixa-totais .hm-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  :root[data-visual="hubmed"] .hm-kpis:not(.hm-caixa-totais .hm-kpis) > .hm-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :root[data-visual="hubmed"] .hm-kpi { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; height: auto; max-height: none; min-height: 44px; padding: 5px 8px; column-gap: 0; }
  :root[data-visual="hubmed"] .hm-kpi-rot { font-size: 10px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
  :root[data-visual="hubmed"] .hm-kpi-valor { font-size: clamp(13px, 4.2cqi, 17px); line-height: 1.25; white-space: nowrap; overflow: visible; text-overflow: clip; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-kpi { flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding: 6px 8px; }
  :root[data-visual="hubmed"] .hm-caixa-totais .hm-kpi-valor { font-size: clamp(12px, 3.9cqi, 15px); }
}

/* ---------- Rodada L1 (cabeçalhos e filtros HubMed: uma linha de 1440 a 320 px) ----------
 * Quando a linha da barra não cabe, o período abre numa faixa pelo calendário e os demais filtros pelo funil
 * (botaoFaixa e faixasDaBarra em comum.js). A barra segue numa linha; a faixa aberta vira uma segunda linha,
 * só enquanto estiver aberta. Os limiares são a largura da própria barra (container hm-barra). */
:root[data-visual="hubmed"] .hm-dash-periodo { container: hm-barra / inline-size; }
:root[data-visual="hubmed"] .hm-faixa-btn { display: none; }
:root[data-visual="hubmed"] .hm-faixa-btn[aria-expanded="true"] { background: #e8eaf6; color: #3949ab; border-color: #c5cae9; }

/* Barra com a faixa do período aberta: quebra de linha (a barra é o próprio contêiner, por isso fica fora do @container). */
:root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo):has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active))) { flex-wrap: wrap; }

/* ---------- Rodada D1 (período): um ícone só, o calendário ----------
 * O calendário abre o período personalizado e, ao lado dele, os atalhos Hoje, 7, 30 e 90 dias. Em tela estreita
 * a faixa fica numa linha cheia logo abaixo da barra. A faixa está aberta enquanto o calendário estiver aberto
 * (aria-expanded) ou um atalho estiver com foco: o clique no atalho fecha o calendário, e o foco mantém a faixa
 * até o clique aplicar o período. O botão de faixa antigo (comum.js, guias, dashboard) fica oculto: duplicava o ícone. */
:root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo) .res-seg > button.res-seg-cal { order: -1; flex: 0 0 auto; }
@container hm-barra (max-width: 900px) {
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo):not(:has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active)))) [data-na-faixa="periodo"] button:not(.res-seg-cal) { display: none; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo):not(:has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active)))) :is([data-na-faixa="periodo"] .res-seg, .res-seg[data-na-faixa="periodo"]) { flex: 0 0 auto; width: auto; min-width: 0; order: 0; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo):has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active))) > [data-na-faixa="periodo"] { display: flex; flex: 1 1 100%; width: 100%; min-width: 0; order: 30; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo) > [data-na-faixa="periodo"] > .res-seg { flex: 1 1 auto; width: 100%; min-width: 0; }
}
@container hm-barra (max-width: 560px) {
  :root[data-visual="hubmed"] .hm-faixa-btn[data-faixa-btn="filtros"] { display: inline-grid; place-items: center; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra) > [data-na-faixa="filtros"] { display: none; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra).is-faixa-filtros { flex-wrap: wrap; }
  :root[data-visual="hubmed"] :is(.hm-barra, .op-barra).is-faixa-filtros > [data-na-faixa="filtros"] { display: flex; flex: 1 1 100%; width: 100%; min-width: 0; order: 31; }
}
/* Telas que tinham a barra em duas linhas por regra própria: fechada, a barra fica numa linha só. */
:root[data-visual="hubmed"] :is(.hm-tela-mensagens, .hm-tela-logs, .hm-contas-pagar, [data-tela="caixa"]) .hm-barra:not(.is-faixa-periodo):not(.is-faixa-filtros):not(:has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active)))) { flex-wrap: nowrap; }


/* Ações secundárias das barras (Excel, PDF, Atualizar): só o ícone, sem cor de fundo; o título diz a função. */
:root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-tela-logs, .hm-afiliados, [data-tela="relatorios"], [data-tela="caixa"]) .hm-barra-acoes :is(.hm-hbtn--refresh, .hm-hbtn--pdf) {
  background: #fff; color: #1f2a5b; border: 1px solid #c5cbe0; box-shadow: none;
}
:root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-tela-logs, .hm-afiliados, [data-tela="relatorios"], [data-tela="caixa"]) .hm-barra-acoes :is(.hm-hbtn--refresh, .hm-hbtn--pdf):hover:not(:disabled) {
  background: #f1f3f9; color: #1f2a5b;
}

/* Barra de Guias: fechada, fica numa linha (o funil abre a sua faixa; a faixa do período também).
 * Em barra estreita, as situações viram só ícone (com título) e os botões de ícone ficam em 32 px. */
:root[data-visual="hubmed"] .hm-guias .op-barra:not(.is-faixa-periodo):not(.funil-aberto):not(:has(:is(.res-seg-cal[aria-expanded="true"], .res-seg > button:not(.res-seg-cal):is(:focus, :active)))) { flex-wrap: nowrap; }
@container hm-barra (max-width: 480px) {
  :root[data-visual="hubmed"] .hm-guias .op-sit .op-sit-txt { display: none; }
  :root[data-visual="hubmed"] .hm-guias .op-sit button { padding: 3px 7px; }
  :root[data-visual="hubmed"] .hm-guias .op-barra { gap: 4px; padding: 6px; }
  :root[data-visual="hubmed"] .hm-guias .op-barra .hm-faixa-btn,
  :root[data-visual="hubmed"] .hm-guias .op-barra .op-hbtn-contorno { width: 32px; padding: 0; justify-content: center; }
  :root[data-visual="hubmed"] .hm-guias .op-vistas button { padding: 3px 6px; }
}
@container hm-corpo (max-width: 900px) {
  /* O CPF sai da célula da tabela (fica no título da célula): a coluna Ações cabe ao lado do ⋯. */
  :root[data-visual="hubmed"] .hm-guias-tabela .op-cpf { display: none; }
}

/* Guias: Cancelar guia sai da linha da tabela e fica no ⋯ quando a tabela é estreita (hm-guias.js › acoesEmMais).
 * Largo: o botão fica na linha, como estava. Estreito: o ⋯ abre o botão logo abaixo, na mesma linha de guia. */
.hm-mais { display: contents; }
.hm-mais-btn { display: none; }
@container hm-corpo (max-width: 900px) {
  :root[data-visual="hubmed"] .hm-guias-tabela .hm-mais { display: inline-flex; flex-direction: column; align-items: flex-end; }
  :root[data-visual="hubmed"] .hm-guias-tabela .hm-mais-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
  :root[data-visual="hubmed"] .hm-guias-tabela .hm-mais-pop { display: none; }
  :root[data-visual="hubmed"] .hm-guias-tabela .hm-mais.is-aberto .hm-mais-pop { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
}

/* Tabela de guias (lote B): a tabela ocupa a largura do painel em qualquer janela, sem rolagem da página.
 * Colunas curtas têm largura fixa por faixa de largura do painel; Paciente e Prestador dividem a sobra e
 * cortam o fim do texto com reticências (o nome completo fica no title). Abaixo de 768 px da janela, a
 * tabela vira cartões (bloco logo abaixo). Status: ícone e sem forma de pagamento na tabela estreita. */
@media (min-width: 768px) {
  :root[data-visual="hubmed"] .hm-guias-tabela table.op-table { table-layout: fixed; width: 100%; }
  :root[data-visual="hubmed"] .hm-guias-tabela .op-table :is(th, td) { box-sizing: border-box; padding-left: 8px; padding-right: 8px; }
  @container (max-width: 599px) { :root[data-visual="hubmed"] .hm-guias-tabela .op-table :is(th, td) { padding-left: 6px; padding-right: 6px; } }
  :root[data-visual="hubmed"] .hm-guias-tabela .op-table td { white-space: nowrap; }
  :root[data-visual="hubmed"] .hm-guias-tabela .op-table td > .ellipsis { max-width: 100%; min-width: 0; }
  :root[data-visual="hubmed"] .hm-guias-tabela .op-so-larga { display: table-cell; }
  :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-cli,
  :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-prest { width: auto; }
  @container (min-width: 900px) {
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-guia { width: 76px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-data { width: 100px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-total { width: 112px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-pag { width: 140px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-acoes { width: 120px; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-pag { flex-wrap: nowrap; min-width: 0; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-pag .faint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
  @container (min-width: 600px) and (max-width: 899px) {
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-guia { width: 68px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-data { width: 88px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-total { width: 92px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-pag { width: 84px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-acoes { width: 104px; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-pag .faint { display: none; }
  }
  @container (max-width: 599px) {
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-guia { width: 56px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-data { width: 80px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-total { width: 80px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-pag { width: 44px; }
    :root[data-visual="hubmed"] .hm-guias-tabela :is(th, td).op-col-acoes { width: 84px; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-pag .faint { display: none; }
    :root[data-visual="hubmed"] .hm-guias-tabela .hm-st-ico { display: inline-flex; }
    :root[data-visual="hubmed"] .hm-guias-tabela .hm-st-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-pag .badge { position: relative; padding: 0 4px; }
    :root[data-visual="hubmed"] .hm-guias-tabela .op-motivo { display: none; }
  }
}

/* Cartões de guia (celular, até 767 px da janela): Ações, que antes sumia, vira a última linha do cartão. */
@media (max-width: 767px) {
  html:root[data-visual="hubmed"] .hm-guias-tabela .op-table.op-guias td[data-label="Ações"] { display: flex; justify-content: flex-end; align-items: center; grid-column: 1 / -1; grid-row: 4; padding-top: 2px; }
  html:root[data-visual="hubmed"] .hm-guias-tabela .op-table.op-guias .op-acoes { justify-content: flex-end; gap: 4px; }
}

/* Cartões de Contas e Mensagens em modo ficha: cada célula deixa 14 px de vão à direita; uma célula sozinha no fim
 * da linha passava dessa largura em 3 px e criava uma rolagem que não existe. O limite conta o vão. */
@container hm-tabela (max-width: 720px) {
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens) .hm-tabela td { max-width: calc(100% - 14px); }
}

/* Indicadores em 390 px: uma faixa de colunas que cabem (rótulo em cima, valor embaixo), sem empilhar em coluna. */
@container hm-corpo (max-width: 479px) {
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-afiliados, [data-tela="relatorios"]) .hm-kpis:not(.hm-caixa-totais .hm-kpis) { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; }
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-afiliados, [data-tela="relatorios"]) .hm-kpis:not(.hm-caixa-totais .hm-kpis) > .hm-kpi:last-child:nth-child(odd) { grid-column: auto; }
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-afiliados, [data-tela="relatorios"]) .hm-kpi { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: auto; max-height: none; min-height: 42px; padding: 4px 8px; min-width: 0; }
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-afiliados, [data-tela="relatorios"]) .hm-kpi-rot { font-size: 10px; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; }
  :root[data-visual="hubmed"] :is(.hm-contas-pagar, .hm-tela-mensagens, .hm-afiliados, [data-tela="relatorios"]) .hm-kpi-valor { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: visible; text-overflow: clip; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; height: auto; min-height: 40px; padding: 4px 8px; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-kpi:last-child:nth-child(odd) { grid-column: auto; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-dash-kpi-rot { font-size: 10px; white-space: normal; overflow: visible; text-overflow: clip; }
  :root[data-visual="hubmed"] .hm-dashboard .hm-dash-faixa .hm-dash-kpi-valor { font-size: 13px; white-space: nowrap; overflow: visible; text-overflow: clip; }
  :root[data-visual="hubmed"] .hm-guias .op-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 4px 8px; }
  :root[data-visual="hubmed"] .hm-guias .op-resumo .kpi { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 0; padding: 2px 6px; }
  :root[data-visual="hubmed"] .hm-guias .op-resumo .kpi-num { font-size: 13px; white-space: nowrap; }
  :root[data-visual="hubmed"] .hm-guias .op-resumo .kpi-rot { font-size: 10px; white-space: normal; }
}

/* ---------- Rodada R2-B (catálogo e guias canceladas): cabeçalho e filtros numa linha, de 1440 a 320 px ----------
 * Catálogo: abas compactas e sem quebra; controles de 32 px; a busca recolhe na lupa e, aberta, ocupa a linha de baixo.
 * Em barra estreita (menos de 600 px), Correção e Reajustar vão para o funil (catalogo.js › arrumarAcoes), com rótulo.
 * Guias canceladas: o período abre na faixa do calendário (regra "Rodada L1" acima). */
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento { flex: 0 0 auto; width: auto; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { flex: 0 0 auto; min-height: 32px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn:not(.hm-hbtn--add) { width: 32px; height: 32px; min-height: 32px; padding: 0; }
:root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn--add { height: 32px; min-height: 32px; padding: 0 12px; }
/* No funil, Correção e Reajuste são linhas com rótulo (o topo as deixa só com ícone). Especificidade igual à do topo, e esta regra vem depois. */
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop .hm-hbtn:not(.hm-hbtn--add) { width: 100%; height: 32px; min-height: 32px; padding: 0 10px; justify-content: flex-start; font-size: 12px; background: #fff; border: 1px solid #c5cbe0; color: #1f2a5b; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop .hm-hbtn:not(.hm-hbtn--add):hover:not(:disabled) { background: #f1f3f9; }
:root[data-visual="hubmed"] .hm-catalogo .hm-funil-pop .hm-hbtn:not(.hm-hbtn--add) span { display: inline; }
@container hm-corpo (max-width: 600px) {
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo { flex-wrap: wrap; gap: 4px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento { gap: 2px; padding: 3px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-segmento button { padding: 0 6px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > [data-contagem] { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa { flex: 0 0 auto; min-width: 0; max-width: none; margin-left: auto; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa .hm-busca-lupa { display: inline-grid; width: 32px; height: 32px; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa:not(.is-aberta):not(.tem-valor) .hm-busca { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa:is(.is-aberta, .tem-valor) .hm-busca-lupa { display: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo > .hm-busca-caixa:is(.is-aberta, .tem-valor) { flex: 1 1 100%; order: 9; max-width: none; }
  :root[data-visual="hubmed"] .hm-catalogo .hm-tela-topo .hm-hbtn--add { width: 32px; padding: 0; }
}
/* Guias canceladas: com a faixa do período aberta, a barra quebra e o período ocupa a linha de baixo, com os quatro
 * atalhos e o calendário cabendo na largura (a barra é o próprio contêiner, então a quebra vale fora do @container). */
:root[data-visual="hubmed"] .hm-guias-canceladas .hm-barra.is-faixa-periodo { flex-wrap: wrap; }
@container hm-barra (max-width: 900px) {
  :root[data-visual="hubmed"] .hm-guias-canceladas [data-na-faixa="periodo"] .res-seg { display: flex; width: 100%; }
  :root[data-visual="hubmed"] .hm-guias-canceladas [data-na-faixa="periodo"] .res-seg button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }
}

/* ---------- Rodada 3 · lote R3-4 (mensagens, pacientes, afiliados) ---------- */
/* Mensagens: a contagem de cada aba (Recebidas, Novas, Lidas, Respondidas) fica discreta ao lado do rótulo. */
:root[data-visual="hubmed"] .hm-segmento .hm-seg-n:not(:empty) { margin-left: 4px; font-size: 11px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
/* Pacientes: ações da linha só com ícone, 32 px, sem caixa. Visíveis em repouso, na cor da função (ac-abrir, ac-ligar, ac-desligar). */
:root[data-visual="hubmed"] .hm-pacientes-tabela .hm-row-action { width: 32px; height: 32px; border: 0; background: none; box-shadow: none; opacity: 1; transition: background-color .15s; }
:root[data-visual="hubmed"] .hm-pacientes-tabela .hm-row-action::after { inset: 0; }
:root[data-visual="hubmed"] .hm-pacientes-tabela .hm-row-action:hover:not(:disabled) { background: #f4f4f5; }
/* Afiliados: "Novo afiliado" mostra o texto no desktop; no celular fica só o "+" (com title e aria-label). */
:root[data-visual="hubmed"] .hm-afiliados .hm-barra-acoes .hm-hbtn--add span { display: inline; }
@media (min-width: 768px) { :root[data-visual="hubmed"] .hm-afiliados .hm-barra-acoes .hm-hbtn--add { width: auto; min-width: max-content; flex: none; padding: 0 12px; white-space: nowrap; } }
@media (max-width: 767px) { :root[data-visual="hubmed"] .hm-afiliados .hm-barra-acoes .hm-hbtn--add span { display: none; } }

/* ---------- Rodada D1 (barra de ações): Excel verde e Atualizar à direita ---------- */
/* Excel: verde de sucesso em todas as telas com o botão (cheio, com texto e ícone brancos: 5,3:1; hover 6,1:1). */
:root[data-visual="hubmed"] .hm-hbtn--excel,
:root[data-visual="hubmed"] .hm-barra-acoes .hm-hbtn--excel { background: #257a4f; border-color: #257a4f; color: #fff; }
:root[data-visual="hubmed"] .hm-hbtn--excel:hover:not(:disabled),
:root[data-visual="hubmed"] .hm-barra-acoes .hm-hbtn--excel:hover:not(:disabled) { background: #1f6f4a; border-color: #1f6f4a; color: #fff; }
:root[data-visual="hubmed"] .hm-hbtn--excel:focus-visible { outline: 2px solid #1f6f4a; outline-offset: 2px; }
/* Exportar de cada painel do dashboard: ícone verde escuro (6,3:1 sobre branco). */
:root[data-visual="hubmed"] .hm-dash-exportar { color: #1e6d41; }
:root[data-visual="hubmed"] .hm-dash-exportar:hover:not(:disabled) { background: #e8f5e9; color: #185c3c; }
/* Dashboard: Atualizar vai para o canto direito da barra de período. */
:root[data-visual="hubmed"] .hm-dash-periodo > [data-atualizar] { margin-left: auto; }
/* Ações sempre à direita, também quando a barra quebra em tela estreita; o grupo da esquerda (busca, período) fica à esquerda. */
:root[data-visual="hubmed"] .hm-barra > .hm-barra-acoes { margin-left: auto; order: 20; }
:root[data-visual="hubmed"] .hm-barra > .hm-busca-caixa { margin-left: 0; }
/* O calendário é o alvo de toque do período: pelo menos 36 px de largura. */
:root[data-visual="hubmed"] :is(.hm-barra, .op-barra, .hm-dash-periodo) .res-seg > button.res-seg-cal { min-width: 36px; }
/* Guias e Agenda trazem data-op-na-faixa (barra.js e agenda.js), que a Operação esconde em tela estreita: aqui o período
 * fica na barra. Só essas duas: Orçamentos usa a mesma barra e precisa da faixa do período abaixo de 480 px (operacao.css). */
:root[data-visual="hubmed"] :is(.hm-guias .op-barra, .op-agenda-barra) > [data-op-na-faixa="periodo"] { display: contents; }

/* Lote Vida 3 (Guias, Caixa, Contas a pagar, Mensagens, Logs, Atendimento): ações de linha visíveis e com a cor
 * da função (ver, pagar, responder), mensagem nova com marca âmbar, caixa sem tinta de linha cancelada. */
:root[data-visual="hubmed"] :is(.hm-guias, .hm-guias-canceladas, .hm-caixa-lista, .hm-contas-pagar, .hm-tela-mensagens, .hm-tela-logs) .hm-tabela .hm-row-action { opacity: 1; }
:root[data-visual="hubmed"] .hm-guias .op-acoes .ac-abrir { color: var(--accent); }
:root[data-visual="hubmed"] .hm-guias .op-acoes .ac-desligar { color: var(--danger); }
:root[data-visual="hubmed"] .hm-guias-tabela td.v-valor { font-weight: 700; color: var(--ink); }
:root[data-visual="hubmed"] :is(.hm-guias-canceladas, .hm-caixa-lista, .hm-tela-mensagens) .hm-row-action:is(.hm-row-action--ver, .hm-row-action--lida, .hm-row-action--responder) { color: var(--accent); }
:root[data-visual="hubmed"] .hm-contas-pagar .hm-row-action--pagar { color: var(--ok); }
:root[data-visual="hubmed"] .hm-contas-pagar .hm-row-action--pagar:hover:not(:disabled) { background: var(--ok-soft); color: var(--ok); }
:root[data-visual="hubmed"] :is(.hm-guias-canceladas, .hm-caixa-lista, .hm-tela-mensagens) .hm-row-action:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
:root[data-visual="hubmed"] .hm-caixa-lista tbody tr.is-cancelada,
:root[data-visual="hubmed"] .hm-caixa-lista tbody tr.is-cancelada td { background: transparent !important; }
:root[data-visual="hubmed"] .hm-tela-mensagens tbody tr.is-nova td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ---------- Passada de padrão visual (referência CRM Maringá, design/MARINGA-PARA-HUBMED.md, seção 11) ----------
 * Itens 1–5, 7–13. O item 6 (ações de linha com opacidade 0.45) não entra: as ações ficam visíveis e coloridas por função.
 * Cores de estado (verde, âmbar, vermelho), v-forte, v-valor e selos não mudam. */

/* Item 1: indicadores sem borda colorida e sem ciclo de cinco cores. O significado fica no número (recebido verde,
 * pendente âmbar, cancelado vermelho) e no ícone; navy, índigo e azul ficam em tinta normal. */
:root[data-visual="hubmed"] .hm-kpi,
:root[data-visual="hubmed"] .hm-kpi.is-destaque { border-left: 1px solid rgba(225,231,239,.8); }
:root[data-visual="hubmed"] .hm-kpi-valor,
:root[data-visual="hubmed"] .hm-dash-kpi-valor { color: var(--ink); }
:root[data-visual="hubmed"] .hm-kpi--verde :is(.hm-kpi-valor, .hm-dash-kpi-valor) { color: #047857; }
:root[data-visual="hubmed"] .hm-kpi--ambar :is(.hm-kpi-valor, .hm-dash-kpi-valor) { color: #8a5300; }
:root[data-visual="hubmed"] .hm-kpi--vermelho :is(.hm-kpi-valor, .hm-dash-kpi-valor) { color: #dc2626; }
:root[data-visual="hubmed"] .hm-kpi.is-vazio :is(.hm-kpi-valor, .hm-dash-kpi-valor) { color: #a1a1aa; }
:root[data-visual="hubmed"] .res-stat { border-left: 1px solid rgba(225,231,239,.8); }
:root[data-visual="hubmed"] .res-stat.is-atencao .res-stat-num { color: #8a5300; }
:root[data-visual="hubmed"] .res-stat.is-alerta .res-stat-num { color: #dc2626; }

/* Item 2: tabelas sem zebra e sem cabeçalho cinza. Linha fina separa as linhas; hover continua. */
:root[data-visual="hubmed"] :is(.table, .hm-tabela) th { background: transparent; border-bottom: 1px solid var(--line); }
:root[data-visual="hubmed"] :is(.table, .hm-tabela) tbody tr:not([aria-selected="true"]) { background: transparent; }
:root[data-visual="hubmed"] :is(.table, .hm-tabela) tbody tr:not([aria-selected="true"]) > td { border-bottom: 1px solid var(--line); }
:root[data-visual="hubmed"] :is(.table, .hm-tabela) tbody tr:not([aria-selected="true"]):hover { background: #f4f4f5; }

/* Item 3: cabeçalho de página mais leve. Título 17/700 e ícone em accent, sem moldura. */
:root[data-visual="hubmed"] .topbar-title { font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: 0; }
:root[data-visual="hubmed"] .hm-cab-icone { background: transparent; border: 0; box-shadow: none; color: var(--accent); }

/* Item 4: painel com a sombra suave do Maringá. */
:root[data-visual="hubmed"] .panel { box-shadow: 0 14px 36px rgba(16,50,48,.10); }

/* Item 7: botão de recolher sem círculo navy e sem sombra; fica como ícone no topo do menu. */
:root[data-visual="hubmed"] .hm-recolher { background: none; color: var(--ink-soft); border: 0; box-shadow: none; }
:root[data-visual="hubmed"] .hm-recolher:hover { background: var(--surface-muted); color: var(--ink); }

/* Item 8: peso máximo 800 em números; contagem e avatar em 700. */
:root[data-visual="hubmed"] .res-stat-num,
:root[data-visual="hubmed"] .hm-fila-principal b { font-weight: 800; }
:root[data-visual="hubmed"] .badge-count { font-weight: 700; }
:root[data-visual="hubmed"] .avatar { font-weight: 700; }

/* Item 9: fundo e sombra de modal e menu do Maringá. */
:root[data-visual="hubmed"] .modal-backdrop { background: rgba(4,12,15,.54); backdrop-filter: blur(5px); }
@media (min-width: 768px) { :root[data-visual="hubmed"] .modal-backdrop.is-lateral { background: rgba(15, 23, 42, 0.08); backdrop-filter: none; } }
:root[data-visual="hubmed"] .modal { box-shadow: 0 24px 70px rgba(0,0,0,.34); }
:root[data-visual="hubmed"] .menu { box-shadow: 0 14px 36px rgba(16,50,48,.14); }

/* Item 10: seleção sem anel duplo. A opção ativa tem fundo branco e borda fina. */
:root[data-visual="hubmed"] :is(.seg, .hm-segmento) button { border: 1px solid transparent; }
:root[data-visual="hubmed"] :is(.seg, .hm-segmento) button[aria-pressed="true"] { box-shadow: none; border-color: #e4e4e7; }

/* Item 11: números do atendimento em cartões com borda simples, sem grade de linhas de 1 px. */
:root[data-visual="hubmed"] .hm-atendimento-numeros { gap: var(--d2); background: none; padding: var(--d2); }
:root[data-visual="hubmed"] .hm-atendimento-numero { border: 1px solid var(--line) !important; border-radius: var(--r-cartao); }

/* Item 12: primeira coluna em 600 e cor normal. v-forte mantém o próprio peso. */
:root[data-visual="hubmed"] :is(.table, .hm-tabela) td:first-child:not(.v-forte) { font-weight: 600; color: #3f3f46; }

/* Item 13: rótulos de formas de pagamento e de dados do paciente sem caixa alta. */
:root[data-visual="hubmed"] .hm-formas span { text-transform: none; letter-spacing: 0; }
:root[data-visual="hubmed"] .hm-pac-dados dt { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Resumo da lista: valor em atenção com contraste suficiente sobre o fundo âmbar claro. */
:root[data-visual="hubmed"] .op-resumo .kpi.is-atencao .kpi-num { color: #8a5300; }

/* Resumo das listas (Orçamentos, Agenda) no celular igual ao de Guias: três colunas numa faixa só,
   valor em cima e rótulo embaixo, em vez de uma linha por número. */
@media (max-width: 767px) {
  :root[data-visual="hubmed"] .op-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px 8px; }
  :root[data-visual="hubmed"] .op-resumo .kpi { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-width: 0; padding: 2px 6px; }
  :root[data-visual="hubmed"] .op-resumo .kpi-num { font-size: 13px; white-space: nowrap; }
  :root[data-visual="hubmed"] .op-resumo .kpi-rot { font-size: 10px; white-space: normal; }
}

/* Pacientes: filtros e tabela numa superfície só. A barra é o cabeçalho da tabela: sem vão entre as duas,
 * cantos retos na emenda e uma divisória fina no lugar da borda dupla (vale em todas as larguras). */
:root[data-visual="hubmed"] .hm-tela[data-tela="pacientes"] .hm-tela-corpo { gap: 0; }
:root[data-visual="hubmed"] .hm-tela[data-tela="pacientes"] .hm-barra { border-radius: 12px 12px 0 0; border-bottom-color: var(--line); flex: none; }
:root[data-visual="hubmed"] .hm-tela[data-tela="pacientes"] .hm-tabela-cartao { border-top: 0; border-radius: 0 0 12px 12px; }
:root[data-visual="hubmed"] .hm-tela[data-tela="pacientes"] .hm-pac-rodape { margin-top: 8px; }