/* ==========================================================================
   ABAS DA GESTÃO DE PACIENTES — Dashboard · Paciente · Atendimento · Relatórios
   (moradoras do item Recursos Humanos até 04/09/2026 — ver js/rh.js)
   Camada de aparência do módulo — carregada DEPOIS de liquid-glass-erp.css.
   ==========================================================================

   PALETA CORPORATIVA PEDIDA PELO DONO
     fundo    Preto Absoluto   #000000
     detalhe  Dourado Oficial  #FFD700
     detalhe  Amarelo Caramelo #D4A373

   POR QUE ESTES TOKENS SÃO LOCAIS (mesma razão de insumos.css)
   `css/liquid-glass.css` é ESPELHO: `assets/embutir-tema.mjs`, no repositório
   do site, reescreve o arquivo a cada geração de tema — token novo escrito lá
   desaparece no próximo deploy do site, sem erro e sem aviso. E mexer em
   `--lg-acento` repintaria o ERP inteiro: financeiro, gráficos, telas que
   ninguém mediu contra esta paleta. Por isso o dourado e o caramelo vivem
   AQUI, num arquivo que só este módulo carrega, e alcançam só `.rh-modulo`.

   O fundo já é #000000 desde o tema (`--lg-abismo`) — nada a fazer ali.

   POR QUE NÃO REAPROVEITA `.ins-modulo` DE insumos.css
   Seria uma folha só, e a tentação é grande — mas os dois módulos passariam a
   ter um dono comum invisível: ajustar o cartão do estoque mexeria na fila de
   espera, e a regressão apareceria numa tela que ninguém abriu no teste. Os
   valores são deliberadamente os MESMOS (a paleta é corporativa, não do
   módulo); o que não se compartilha é o seletor.

   MORFOLOGIA: retangular, fina, cantos de 8 a 12px. Sem forma orgânica, sem
   `border-radius` em porcentagem, sem animação de silhueta. Os três degraus
   abaixo cobrem o módulo inteiro; não use valor literal fora deles.
   ========================================================================== */

.rh-modulo {
  --rh-ouro: #FFD700;
  --rh-caramelo: #D4A373;
  --rh-preto: #000000;

  --rh-liga: linear-gradient(135deg, var(--rh-ouro) 0%, var(--rh-caramelo) 100%);
  --rh-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, 0.16) 0%, rgba(212, 163, 115, 0.16) 100%);

  /* Vidro jateado PLANO: película clara e uniforme, sem brilho especular
     rolando pela superfície — é o que separa "jateado" de "líquido". */
  --rh-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --rh-fosco: blur(18px) saturate(150%);

  --rh-borda: rgba(255, 215, 0, 0.28);
  --rh-borda-forte: rgba(255, 215, 0, 0.55);
  --rh-borda-caramelo: rgba(212, 163, 115, 0.34);

  /* Cantos: 8 · 10 · 12. Nada fora desta escala. */
  --rh-canto-1: 12px;   /* painel, modal */
  --rh-canto-2: 10px;   /* cartão, campo */
  --rh-canto-3: 8px;    /* botão, selo, aba */

  /* Sombra limpa: uma queda vertical e um fio de contorno. Sem halo colorido
     e sem sombra interna difusa — as duas coisas que fazem a peça "inchar". */
  --rh-sombra: 0 10px 30px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset;

  --rh-texto: #F5F1E6;
  --rh-texto-fraco: rgba(245, 241, 230, 0.62);

  /* Prioridade clínica — as únicas cores fora da paleta, e por necessidade:
     triagem que sinaliza urgência em dourado sobre dourado não sinaliza nada.
     Ficam contidas nos selos de prioridade. */
  --rh-urgente: #F87171;
  --rh-preferencial: #FBBF24;

  font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--rh-texto);
}

/* ─────────────────── Texto justificado (item 3 do pedido) ───────────────────
   `hyphens: auto` NÃO é enfeite e não é opcional aqui: é ele que cumpre o
   "evitar rios de espaço em branco". Justificar sem hifenização força o
   navegador a esticar os espaços da linha inteira para fechar a margem — e em
   coluna estreita (cartão, ficha, aviso) isso abre exatamente as faixas
   verticais de branco que o pedido manda evitar. Com hifenização a palavra
   quebra e o espaço volta ao normal.

   `lang="pt-BR"` no <html> já está posto (public/index.html) — sem o idioma
   declarado o navegador não sabe onde pode hifenizar e a regra vira inócua. */
.rh-modulo .rh-justificado,
.rh-modulo .rh-ficha-texto,
.rh-modulo .rh-aviso p,
.rh-modulo .rh-cartao-nota {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.62;

  /* A MEDIDA É A CAUSA RAIZ DOS RIOS, não a justificação em si. Numa linha de
     200 caracteres o navegador tem poucas palavras por linha para distribuir a
     sobra e abre faixas largas de branco; em ~78 caracteres a sobra por linha
     é pequena e some. Sem este limite, `hyphens: auto` sozinho não resolve num
     painel de 1600px. */
  max-width: 78ch;

  /* A última linha de um parágrafo justificado nunca é esticada — sem isto,
     uma linha final com duas palavras vira duas palavras nas pontas da coluna
     e um vazio no meio, que é o pior rio da página. */
  text-align-last: left;
}

/* ═══════════════════════ Painéis e cartões ═══════════════════════ */

.rh-modulo .rh-painel {
  background: var(--rh-vidro);
  background-color: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: var(--rh-fosco);
  backdrop-filter: var(--rh-fosco);
  border: 1px solid var(--rh-borda);
  border-radius: var(--rh-canto-1);
  box-shadow: var(--rh-sombra);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.rh-modulo .rh-painel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.rh-modulo .rh-painel-head h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--rh-ouro);
  text-transform: uppercase;
}

.rh-modulo .rh-painel-head .rh-sub {
  font-size: 12.5px;
  color: var(--rh-texto-fraco);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  margin-top: 3px;
}

/* Fio divisório na liga dourado→caramelo. 1px: "linhas finas e elegantes". */
.rh-modulo .rh-fio {
  height: 1px;
  border: 0;
  background: var(--rh-liga);
  opacity: .5;
  margin: 14px 0;
}

.rh-modulo .rh-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.rh-modulo .rh-cartao {
  background: var(--rh-vidro);
  background-color: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: var(--rh-fosco);
  backdrop-filter: var(--rh-fosco);
  border: 1px solid var(--rh-borda-caramelo);
  border-radius: var(--rh-canto-2);
  box-shadow: var(--rh-sombra);
  padding: 14px 16px;
}

.rh-modulo .rh-cartao .rh-rotulo {
  font-size: 11.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--rh-texto-fraco);
  margin-bottom: 6px;
}

.rh-modulo .rh-cartao .rh-valor {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rh-texto);
}

.rh-modulo .rh-cartao .rh-valor.ouro { color: var(--rh-ouro); }
.rh-modulo .rh-cartao .rh-valor.caramelo { color: var(--rh-caramelo); }
.rh-modulo .rh-cartao .rh-valor.alerta { color: var(--rh-urgente); }

.rh-modulo .rh-cartao-nota {
  font-size: 11.5px;
  color: var(--rh-texto-fraco);
  margin-top: 6px;
}

/* Cartão destacado: borda dourada cheia, para o indicador principal. */
.rh-modulo .rh-cartao.rh-destaque { border-color: var(--rh-borda-forte); }

/* ═══════════════════════════ Abas ═══════════════════════════ */
/* A BARRA de abas é desenhada por `renderPacientes` (js/app.js) desde
   04/09/2026, não por js/rh.js — e ela lista as 6 abas da tela, incluindo a
   Lista de pacientes e a Agenda semanal, que não são deste módulo.
   Lá a barra vem embrulhada num `.rh-modulo` que envolve SÓ ela: é o que faz
   estas regras valerem (todas exigem o ancestral) sem que os tokens do módulo
   desçam para o corpo da Lista e da Agenda, que continuam com a aparência do
   ERP. O corpo das quatro abas daqui tem a sua própria casca `.rh-modulo`. */

.rh-modulo .rh-abas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rh-modulo .rh-aba {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--rh-borda-caramelo);
  border-radius: var(--rh-canto-3);
  color: var(--rh-texto-fraco);
  padding: 9px 15px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

.rh-modulo .rh-aba:hover { color: var(--rh-texto); border-color: var(--rh-borda-forte); }

.rh-modulo .rh-aba[aria-selected="true"] {
  background: var(--rh-liga);
  border-color: transparent;
  color: #1a1400;
}

.rh-modulo .rh-aba .rh-conta {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: var(--rh-canto-3);
  background: rgba(255, 215, 0, 0.14);
  font-size: 11.5px;
}

.rh-modulo .rh-aba[aria-selected="true"] .rh-conta { background: rgba(0, 0, 0, 0.22); }

/* ═══════════════════════════ Botões ═══════════════════════════ */

.rh-modulo .rh-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rh-borda);
  border-radius: var(--rh-canto-3);
  color: var(--rh-texto);
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.rh-modulo .rh-btn:hover { border-color: var(--rh-borda-forte); background: rgba(255, 215, 0, 0.08); }

.rh-modulo .rh-btn-ouro {
  background: var(--rh-liga);
  border-color: transparent;
  color: #1a1400;
}
.rh-modulo .rh-btn-ouro:hover { filter: brightness(1.08); background: var(--rh-liga); }

.rh-modulo .rh-btn-perigo { border-color: rgba(248, 113, 113, .45); color: var(--rh-urgente); }
.rh-modulo .rh-btn-perigo:hover { background: rgba(248, 113, 113, .10); border-color: var(--rh-urgente); }

.rh-modulo .rh-btn:disabled { opacity: .42; cursor: not-allowed; }

.rh-modulo .rh-btn-sm { padding: 5px 10px; font-size: 12px; }

.rh-modulo .rh-acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════ Campos ═══════════════════════════ */

.rh-modulo .rh-filtros {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.rh-modulo .rh-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--rh-texto-fraco);
}

.rh-modulo .rh-campo input,
.rh-modulo .rh-campo select,
.rh-modulo .rh-campo textarea {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--rh-borda-caramelo);
  border-radius: var(--rh-canto-2);
  color: var(--rh-texto);
  padding: 8px 11px;
  font: inherit;
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
  min-width: 150px;
}

.rh-modulo .rh-campo textarea { min-height: 74px; resize: vertical; }

.rh-modulo .rh-campo input:focus,
.rh-modulo .rh-campo select:focus,
.rh-modulo .rh-campo textarea:focus {
  outline: none;
  border-color: var(--rh-ouro);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.13);
}

.rh-modulo .rh-campo-cheio { grid-column: 1 / -1; }

.rh-modulo .rh-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

/* ═══════════════════════════ Tabelas ═══════════════════════════ */

.rh-modulo .rh-tabela-caixa { overflow-x: auto; }

.rh-modulo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.rh-modulo thead th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--rh-caramelo);
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rh-borda);
  white-space: nowrap;
}

.rh-modulo tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.rh-modulo tbody tr:hover td { background: rgba(255, 215, 0, 0.045); }
.rh-modulo tbody tr:last-child td { border-bottom: 0; }

.rh-modulo .rh-forte { font-weight: 700; }
.rh-modulo .rh-meta { display: block; font-size: 11.5px; color: var(--rh-texto-fraco); margin-top: 2px; }

/* ═══════════════════════════ Selos ═══════════════════════════ */

.rh-modulo .rh-selo {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--rh-canto-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  border: 1px solid var(--rh-borda-caramelo);
  color: var(--rh-texto-fraco);
  white-space: nowrap;
}

.rh-modulo .rh-selo-ouro { background: rgba(255, 215, 0, 0.14); border-color: var(--rh-borda-forte); color: var(--rh-ouro); }
.rh-modulo .rh-selo-caramelo { background: rgba(212, 163, 115, 0.15); border-color: var(--rh-borda-caramelo); color: var(--rh-caramelo); }
.rh-modulo .rh-selo-urgente { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, .5); color: var(--rh-urgente); }
.rh-modulo .rh-selo-preferencial { background: rgba(251, 191, 36, 0.13); border-color: rgba(251, 191, 36, .45); color: var(--rh-preferencial); }

/* ═════════════════════ Cronômetro de espera ═════════════════════
   Tabular-nums no módulo inteiro já evita o texto "pular" a cada segundo —
   sem largura fixa por dígito, "1:09" e "1:10" têm larguras diferentes e a
   coluna inteira treme a cada tique. */
.rh-modulo .rh-cronometro {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--rh-texto);
}
.rh-modulo .rh-cronometro.rh-atrasado { color: var(--rh-urgente); }
.rh-modulo .rh-cronometro.rh-atencao { color: var(--rh-preferencial); }

/* ═══════════════════════ Barras (mini-gráfico) ═══════════════════════
   Barra em CSS puro, não Chart.js: são leituras de uma dimensão (quanto por
   canal, quanto por forma de pagamento) e uma barra desenhada com div não
   precisa ser destruída ao trocar de view — que é a única coisa que o
   registro de gráficos do app.js existe para resolver. */
.rh-modulo .rh-barras { display: flex; flex-direction: column; gap: 9px; }

.rh-modulo .rh-barra-linha {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 3fr minmax(84px, auto);
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.rh-modulo .rh-barra-trilho {
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--rh-canto-3);
  overflow: hidden;
}

.rh-modulo .rh-barra-preenche {
  /* `display: block` NÃO é redundante: o elemento é um <span>, e um inline
     ignora `height` e `width` — a barra ficava com altura zero e o que se via
     era só o trilho cinza atrás, em todas as linhas e do mesmo tamanho, com
     ar de "os dados vieram todos iguais". O trilho escapa disso por ser item
     de grid (itens de grid são blocados pelo próprio layout); o preenchimento
     está dentro dele, e não. */
  display: block;
  height: 100%;
  background: var(--rh-liga);
  border-radius: var(--rh-canto-3);
  min-width: 2px;
}

.rh-modulo .rh-barra-valor { text-align: right; font-weight: 700; color: var(--rh-ouro); }

/* ═══════════════════════════ Avisos ═══════════════════════════ */

.rh-modulo .rh-aviso {
  border: 1px solid var(--rh-borda-caramelo);
  border-left: 3px solid var(--rh-caramelo);
  border-radius: var(--rh-canto-2);
  background: rgba(212, 163, 115, 0.07);
  padding: 12px 15px;
  font-size: 13px;
  color: var(--rh-texto-fraco);
  margin-bottom: 14px;
}

.rh-modulo .rh-aviso strong { color: var(--rh-caramelo); }

.rh-modulo .rh-aviso-restrito {
  border-left-color: var(--rh-ouro);
  background: rgba(255, 215, 0, 0.06);
}
.rh-modulo .rh-aviso-restrito strong { color: var(--rh-ouro); }

.rh-modulo .rh-vazio {
  text-align: center;
  color: var(--rh-texto-fraco);
  padding: 26px 16px;
  font-size: 13.5px;
}

/* ═══════════════════════ Ficha do paciente ═══════════════════════ */

.rh-modulo .rh-ficha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px 20px;
}

.rh-modulo .rh-ficha-linha .rh-ficha-rotulo {
  display: block;
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--rh-texto-fraco);
  margin-bottom: 3px;
}

.rh-modulo .rh-ficha-linha .rh-ficha-valor { font-size: 14px; color: var(--rh-texto); }

.rh-modulo .rh-linha-tempo { list-style: none; margin: 0; padding: 0; }

.rh-modulo .rh-linha-tempo li {
  border-left: 1px solid var(--rh-borda-caramelo);
  padding: 0 0 15px 15px;
  position: relative;
}

.rh-modulo .rh-linha-tempo li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: var(--rh-canto-3);
  background: var(--rh-liga);
}

.rh-modulo .rh-linha-tempo li:last-child { border-left-color: transparent; padding-bottom: 0; }

.rh-modulo .rh-linha-tempo .rh-lt-quando {
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rh-caramelo);
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 2 — funil de leads, cartão abrível, canal ao vivo, upload de exame
   ══════════════════════════════════════════════════════════════════════════
   Mesma paleta e a MESMA escala de cantos (12 · 10 · 8). Nenhum valor literal
   novo: tudo sai dos tokens declarados no topo desta folha. */

/* ─────────────────── Cartão que abre a lista por trás do número ───────────
   É um <button>, não uma <div> com onclick: teclado e leitor de tela precisam
   alcançá-lo. Como o navegador dá ao <button> uma aparência própria (fundo
   cinza, borda 3D, texto centralizado e herança de fonte quebrada), estas
   quatro linhas de reset são o que o mantém idêntico ao cartão vizinho — sem
   elas a fileira de indicadores fica com um cartão visivelmente diferente. */
.rh-modulo .rh-cartao-abrivel {
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.rh-modulo .rh-cartao-abrivel:hover {
  border-color: var(--rh-borda-forte);
  transform: translateY(-1px);
}

.rh-modulo .rh-cartao-abrivel:focus-visible {
  outline: 2px solid var(--rh-ouro);
  outline-offset: 2px;
}

/* ───────────────────────── Selo do canal ao vivo ─────────────────────────
   O ponto pisca só quando há conexão. `prefers-reduced-motion` desliga a
   animação: é um indicador de estado, e a informação está na cor e no texto —
   quem pediu menos movimento não perde nada ao desligá-la. */
.rh-modulo .rh-vivo {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--rh-texto-fraco);
  border: 1px solid var(--rh-borda-caramelo);
  border-radius: var(--rh-canto-3);
  padding: 6px 10px;
  white-space: nowrap;
}

.rh-modulo .rh-vivo.rh-vivo-on {
  color: var(--rh-ouro);
  border-color: var(--rh-borda-forte);
  animation: rh-pulso 2.4s ease-in-out infinite;
}

@keyframes rh-pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .58; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-modulo .rh-vivo.rh-vivo-on { animation: none; }
}

/* ───────────────────────────── Funil de leads ─────────────────────────────
   Colunas, não pirâmide. A forma de funil (trapézios que estreitam) obrigaria
   a largura de cada etapa a representar a contagem, e com dez etapas as
   últimas ficariam com 2px — ilegíveis justamente nas fases de fechamento, que
   são as que a clínica olha. Aqui a contagem está no número e na barra, e a
   ordem das colunas é o funil.

   `auto-fit`/`minmax` porque são dez etapas: numa tela de recepção estreita
   elas quebram em duas fileiras em vez de espremer. */
.rh-modulo .rh-funil {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}

.rh-modulo .rh-funil-etapa {
  background: var(--rh-vidro);
  background-color: rgba(10, 10, 10, 0.5);
  -webkit-backdrop-filter: var(--rh-fosco);
  backdrop-filter: var(--rh-fosco);
  border: 1px solid var(--rh-borda-caramelo);
  border-radius: var(--rh-canto-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Etapa vazia continua visível (um funil que esconde a fase sem ninguém mente
   sobre onde os leads param), só que apagada. */
.rh-modulo .rh-funil-vazia { opacity: .5; }

.rh-modulo .rh-funil-n {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--rh-ouro);
}

.rh-modulo .rh-funil-rotulo {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--rh-texto-fraco);
  /* Justificar rótulo de duas palavras abriria rios dentro de 132px —
     a justificação do pedido vale para texto corrido, não para etiqueta. */
  text-align: left;
  hyphens: auto;
}

.rh-modulo .rh-funil-trilho {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.rh-modulo .rh-funil-preenche {
  display: block;
  height: 100%;
  background: var(--rh-liga);
}

/* ────────────────────── Barra de progresso do upload ──────────────────────
   `display:block` no filho não é detalhe: um <span> é inline por padrão e
   inline IGNORA height — a barra existiria no DOM com largura correta e altura
   zero, invisível. É a mesma armadilha que `.rh-barra-preenche` já teve. */
.rh-modulo .rh-progresso {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 12px 0 4px;
}

.rh-modulo .rh-progresso > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--rh-liga);
  transition: width .18s linear;
}

/* ───────────── Linha que pede atenção (retorno combinado venceu) ───────────
   Marcada pela BORDA lateral, não pelo fundo: fundo colorido em cima de vidro
   jateado some no `backdrop-filter` e, quando aparece, briga com o `:hover` da
   tabela. */
.rh-modulo tbody tr.rh-linha-atencao td:first-child {
  box-shadow: inset 3px 0 0 var(--rh-ouro);
}

/* O botão de WhatsApp é um <a>, e âncora não herda nada de <button>: sem estas
   três linhas ele sairia sublinhado, azul e desalinhado no meio dos botões. */
.rh-modulo a.rh-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Campo de arquivo: o seletor nativo é feio e destoa do resto, mas trocá-lo
   por um botão falso quebraria o teclado e o leitor de tela. O meio-termo é
   estilizar só o botão interno, que é o que o Chrome expõe. */
.rh-modulo .rh-campo input[type="file"] {
  padding: 8px;
  cursor: pointer;
}

.rh-modulo .rh-campo input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--rh-borda);
  border-radius: var(--rh-canto-3);
  background: rgba(255, 255, 255, 0.05);
  color: var(--rh-texto);
  cursor: pointer;
}

/* Impressão do relatório individual: fundo preto não vai para o papel — a
   folha sairia sólida e o texto dourado, ilegível. */
@media print {
  .rh-modulo { color: #000; }
  .rh-modulo .rh-painel,
  .rh-modulo .rh-cartao,
  .rh-modulo .rh-funil-etapa {
    background: #fff;
    border-color: #999;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .rh-modulo .rh-painel-head h2,
  .rh-modulo thead th,
  .rh-modulo .rh-funil-n,
  .rh-modulo .rh-barra-valor { color: #000; }
  .rh-modulo .rh-btn, .rh-modulo .rh-abas, .rh-modulo .rh-filtros { display: none; }
  /* Fora do papel: selo de conexão e barra de upload são estado de tela, não
     informação do relatório. O cartão abrível FICA — ele é um indicador, e o
     `display:none` dos botões não o alcança de propósito (ele não é .rh-btn).
     A borda lateral de atenção some porque `box-shadow` não imprime de forma
     confiável; a coluna "Último contato" já diz a mesma coisa em texto. */
  .rh-modulo .rh-vivo, .rh-modulo .rh-progresso { display: none; }
  .rh-modulo tbody tr.rh-linha-atencao td:first-child { box-shadow: none; }
  .rh-modulo .rh-cartao-abrivel .rh-cartao-nota { display: none; }
}

/* Telas estreitas: a grade de filtros vira coluna e o campo ocupa a largura,
   senão o `min-width: 150px` empurra a barra para fora da tela. */
@media (max-width: 640px) {
  .rh-modulo .rh-filtros { flex-direction: column; align-items: stretch; }
  .rh-modulo .rh-campo input,
  .rh-modulo .rh-campo select { min-width: 0; width: 100%; }
  .rh-modulo .rh-barra-linha { grid-template-columns: 1fr; gap: 4px; }
  .rh-modulo .rh-barra-valor { text-align: left; }
  /* Dez etapas em minmax(132px) ainda cabem duas por fileira num celular e
     ficam ilegíveis; abaixo de 640px o funil vira lista vertical. */
  .rh-modulo .rh-funil { grid-template-columns: 1fr; }
  .rh-modulo .rh-vivo { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR DE EVOLUÇÃO MÉDICA (ficha do paciente)
   ═══════════════════════════════════════════════════════════════════════════

   Painel de ESCRITA dentro de um painel de leitura. O vidro aqui é um degrau
   mais escuro que o do `.rh-painel` que o abriga: dois retângulos com a mesma
   translucidez encostados um no outro leem como um só bloco, e o médico
   perderia a fronteira entre "o que já está gravado" e "o que estou digitando
   agora" — que é a única distinção que importa nesta tela.

   Canto de 10px: o degrau do meio da escala do módulo (12 · 10 · 8), como todo
   bloco aninhado dentro de um painel. */
.rh-modulo .rh-evolucao {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--rh-borda-caramelo);
  border-left: 2px solid var(--rh-ouro);
  border-radius: var(--rh-canto-2);
  background: rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(9px) saturate(118%);
  backdrop-filter: blur(9px) saturate(118%);
}

/* Texto clínico corrido é justificado — mesma regra dos relatórios e da
   evolução já gravada (`.rh-ficha-texto`), aplicada também enquanto se
   digita: o médico revisa no campo o parágrafo que vai reler justificado
   depois, e a quebra de linha muda onde a frase parece terminar. */
.rh-modulo .rh-campo textarea.rh-area-justificada {
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.62;
}

/* O editor não vai para o papel: o relatório individual é do histórico
   gravado, e um formulário em branco no meio dele só ocuparia uma página. */
@media print {
  .rh-modulo .rh-evolucao { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   18. ROSCA DE PROPORÇÃO — Fechados × Não fechados × Cancelados
   ══════════════════════════════════════════════════════════════════════════

   O pedido era "um componente de funil ou pie chart evidenciando a proporção
   de protocolos Fechados versus Não fechados". Havia os quatro cartões com os
   números e a taxa em porcentagem, mas nenhuma leitura VISUAL de proporção —
   e proporção é justamente o que quatro números soltos não comunicam.

   POR QUE NÃO REUSA `.rh-funil` (seção 17). Aquele funil é o de captação de
   LEADS, lido do CRM, e mora na aba Atendimento. As etapas dele são do
   pipeline comercial ("Proposta de Pacote Feita", "Follow-up"), não as
   situações de um protocolo clínico. Empilhar dois significados na mesma
   classe faria a próxima pessoa mudar o CSS de um e quebrar o outro.

   POR QUE `conic-gradient`, E NÃO Chart.js. Mesma razão das barras da seção
   13, escrita lá: é leitura de uma dimensão, o front não tem build e a CSP
   não admite origem externa. O Chart.js existe no ERP e é usado pelo módulo
   Financeiro; aqui ele custaria um <canvas> que o CSS não alcança, para
   desenhar três fatias.

   O `border-radius: 50%` É EXCEÇÃO DELIBERADA À ESCALA 8·10·12 declarada no
   topo deste arquivo. A regra existe para a morfologia das CAIXAS — cartão,
   painel, botão, campo. Um gráfico de setores é redondo por definição
   geométrica; aplicar 12px aqui não deixaria a peça "mais formal", deixaria
   um quadrado com as fatias cortadas. Não generalize esta exceção.
   ────────────────────────────────────────────────────────────────────────── */

.rh-modulo .rh-proporcao {
  /* O tamanho mora AQUI, e não no anel: a caixa e o anel precisam ler o mesmo
     valor, e o media query mais abaixo troca um token só. */
  --rh-rosca-tamanho: 152px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 4px 2px 2px;
}

/* A caixa é o que dá referência ao miolo. O texto central NÃO pode ficar
   dentro do anel: a máscara que abre o furo recortaria o texto junto. Então
   ele é irmão do anel, e é esta caixa 'position:relative' que faz o
   'inset: 0' dele significar "sobre o anel" em vez de "sobre a linha toda". */
.rh-modulo .rh-rosca-caixa {
  position: relative;
  width: var(--rh-rosca-tamanho);
  height: var(--rh-rosca-tamanho);
  flex-shrink: 0;
}

.rh-modulo .rh-rosca {
  position: absolute;
  inset: 0;
  border-radius: 50%;   /* exceção geométrica — ver o cabeçalho da seção */
  /* As paradas do gradiente são calculadas no JS e chegam por esta variável:
     manter a matemática de porcentagem em um lugar só evita a fatia do CSS
     discordar do número impresso na legenda ao lado. */
  background: var(--rh-rosca-fatias, conic-gradient(rgba(255, 255, 255, .08) 0 100%));
  /* Miolo vazado por máscara, não por um disco sobreposto: o painel atrás é
     translúcido, então um disco "da cor do fundo" apareceria como uma mancha
     opaca em cima do vidro. A máscara deixa o vidro passar de verdade. */
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 58% 100%);
  mask: radial-gradient(circle, transparent 0 57%, #000 58% 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.rh-modulo .rh-rosca-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  pointer-events: none;
}

.rh-modulo .rh-rosca-taxa {
  font-size: 25px;
  font-weight: 700;              /* valor: peso forte, como nos cartões */
  color: var(--rh-ouro);
  line-height: 1;
}

.rh-modulo .rh-rosca-legenda-centro {
  font-size: 10.5px;
  font-weight: 300;              /* rótulo: peso leve, como nos cartões */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rh-texto-fraco);
}

.rh-modulo .rh-rosca-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  /* Largura CONTIDA de propósito. Com 'flex: 1 1' a legenda esticava até a
     borda do painel e a contagem ia parar a meio metro do ponto colorido que
     ela explica — os olhos perdiam a linha. Ela acompanha o anel; o espaço que
     sobra fica vazio, que é o certo para um gráfico pequeno. */
  flex: 0 1 340px;
  min-width: 232px;
  max-width: 420px;
}

.rh-modulo .rh-rosca-itens li {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 215, 0, .12);
}

.rh-modulo .rh-rosca-itens li:last-child { border-bottom: 0; padding-bottom: 0; }

/* O ponto colorido NÃO é a única pista: cada linha traz o rótulo escrito, a
   contagem e a porcentagem em texto. Gráfico em que a cor é a única
   informação some para quem não distingue vermelho de dourado — e some
   inteiro na impressão em preto e branco. */
.rh-modulo .rh-rosca-ponto {
  width: 12px;
  height: 12px;
  border-radius: 50%;   /* mesma exceção geométrica: é a amostra da fatia */
  display: inline-block;
}

.rh-modulo .rh-rosca-ponto.fechados     { background: var(--rh-ouro); }
.rh-modulo .rh-rosca-ponto.nao_fechados { background: var(--rh-urgente); }
.rh-modulo .rh-rosca-ponto.cancelados   { background: var(--rh-caramelo); }

.rh-modulo .rh-rosca-itens .rh-rosca-rotulo { color: var(--rh-texto); font-weight: 400; }
.rh-modulo .rh-rosca-itens .rh-rosca-n      { font-weight: 500; font-variant-numeric: tabular-nums; }
.rh-modulo .rh-rosca-itens .rh-rosca-pct    { color: var(--rh-texto-fraco); font-weight: 300; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

@media (max-width: 620px) {
  .rh-modulo .rh-proporcao { gap: 18px; justify-content: center; --rh-rosca-tamanho: 128px; }
}

/* Impressão: `conic-gradient` é fundo, e navegador não imprime fundo por
   padrão — a rosca sairia como um anel branco vazio ao lado de uma legenda
   correta. Fora do papel; a legenda já carrega rótulo, contagem e
   porcentagem em texto. */
@media print {
  .rh-modulo .rh-rosca-caixa { display: none; }
  .rh-modulo .rh-rosca-itens li { border-bottom-color: #999; }
  .rh-modulo .rh-rosca-itens .rh-rosca-rotulo,
  .rh-modulo .rh-rosca-itens .rh-rosca-n,
  .rh-modulo .rh-rosca-itens .rh-rosca-pct { color: #000; }
}