/* Os tokens (cores, sombras, raios, escala) vivem em public/tokens.css —
   linkado antes desta folha em toda página do painel (V2, 2026-09-15). */

* {
  box-sizing: border-box;
}

/* Sem isso, qualquer classe com `display` próprio (.botao, containers de
   lista etc.) empata em especificidade com o `[hidden]` do navegador e
   vence por origem — elemento nunca some de verdade só com o atributo. Ver
   mesmo fix em app/styles.css. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--papel);
  /* Era rgba() fixo (indigo/ciano do tema escuro) — só "batia" por coincidência
     enquanto só existia um tema. Em claro, --grad-a/--grad-b viram um navy/teal
     escuro, então o glow fixo ficava brigando com a paleta clara logo atrás do
     header. color-mix() com os tokens do tema resolve nos 3 (mesmo padrão já
     usado em app/styles.css pro .painel). */
  background-image: radial-gradient(1100px 600px at 12% -8%, color-mix(in srgb, var(--grad-a) 25%, transparent), transparent 60%),
    radial-gradient(900px 520px at 105% 8%, color-mix(in srgb, var(--grad-b) 13%, transparent), transparent 55%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--tinta);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(15px * var(--escala-texto));
  line-height: 1.6;
  animation: fade-in 0.18s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mesma curva de app/styles.css (.sugestao) — entrada sutil pra cartões/
   linhas que aparecem depois do carregamento inicial da página (nova
   consulta na lista, novo fato, resultado de busca), sem exigir nenhuma
   mudança em JS: qualquer elemento novo inserido no DOM com essa animação
   declarada já entra sozinho. */
@keyframes entrada {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------- topo */

/* A barra superior (V2): fica no fluxo, colada ao topo ao rolar, e mora à
   direita da lateral — quem monta é painel/navegacao.js. Antes era `fixed`
   de borda a borda com o conteúdo empurrado por 88px. */
.topo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topo-altura);
  padding: 10px 28px;
  border-bottom: 1px solid var(--linha);
  background: color-mix(in srgb, var(--papel) 80%, transparent);
  backdrop-filter: blur(var(--vidro-blur));
  -webkit-backdrop-filter: blur(var(--vidro-blur));
  position: sticky;
  top: 0;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.marca-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}

.marca-link:hover .marca-nome {
  opacity: 0.8;
}

.marca-icone {
  /* Um <span> com background, e não um <img>: a arte troca por TEMA, e a troca
     mora em --marca-img. Com <img> o src teria que ser decidido em JS em cada
     uma das 15 páginas que mostram a marca. */
  width: 26px;
  height: 26px;
  flex: none;
  align-self: center;
  background-image: var(--marca-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.marca-nome {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: calc(17px * var(--escala-texto));
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Debug de admin — simula um plano na própria conta pra testar o limite de
   uso que um médico comum veria (ver painel.js/server.js:
   PATCH /api/admin/meu-plano). Só visível pra quem é admin. */
.admin-plano-simulado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 3px 8px;
  border: 1px dashed var(--indigo-linha);
  border-radius: var(--raio);
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-fraca);
}

.admin-plano-simulado select {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  text-transform: none;
  letter-spacing: normal;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 2px 5px;
}

.marca-tag {
  font-family: inherit;
  font-size: calc(10px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 1px 6px;
}

.controles {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Cabeçalho no celular: botões viram só ícone e o debug de plano some, pra caber
   sem estourar a largura (o cabeçalho é fixo e não quebra linha). */
@media (max-width: 640px) {
  .topo {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
  .controles {
    gap: 6px;
  }
  .controles .botao-icone span {
    display: none;
  }
  .controles .botao-icone {
    padding-left: 9px;
    padding-right: 9px;
  }
  .nome-medico {
    display: none;
  }
  .admin-plano-simulado {
    display: none;
  }
}

.nome-medico {
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta-media);
}

.avatar-iniciais {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gradiente-botao);
  color: #fff;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: calc(12px * var(--escala-texto));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: filter 0.18s ease;
}

.avatar-iniciais:hover {
  filter: brightness(1.1);
}

.avatar-iniciais-grande {
  width: 68px;
  height: 68px;
  font-size: calc(24px * var(--escala-texto));
  margin: 0 auto 10px;
}

.botao {
  font-family: inherit;
  font-size: calc(13.5px * var(--escala-texto));
  /* Explícito de propósito: <button> tem line-height: normal por padrão do
     navegador (não herda do body como <a>/<div> herdam), então um
     <button class="botao"> e um <a class="botao"> lado a lado ficam com
     alturas ligeiramente diferentes mesmo com o mesmo padding — fixando
     aqui, os dois convergem pro mesmo tamanho. */
  line-height: 1.3;
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.botao:hover {
  background: var(--campo);
  border-color: var(--tinta-fraca);
}

.botao:disabled {
  opacity: 0.4;
  cursor: default;
}

/* O PRIMÁRIO DO PAINEL É A COR SÓLIDA DO TEMA (21/09/2026). Havia dois
   vocabulários de "primário": o degradê (`--gradiente-botao`) e o sólido
   (`--indigo-solido`, dos outros primários do painel). Os botões "Cadastrar
   Paciente" e "Nova Consulta" eram os únicos em degradê no Início e pareciam
   de outro tema (pedido do dono de 17/09). O degradê fica para a marca
   (avatar, página inicial); aqui, o sólido de cada tema — branco sobre ele
   passa de 4,5:1 nos seis, em repouso E no hover. O hover dos escuros
   clareava para #3e7de3 e caía a 4,00:1; desde 21/09/2026 escurece, como nos
   claros (testes/cor-fixa-no-painel.mjs mede os dois estados). */
.botao-primario {
  background: var(--indigo-solido);
  border-color: transparent;
  color: #fff;
}

.botao-primario:hover {
  background: var(--indigo-solido-hover);
}

.botao-icone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.botao-icone svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.botao-icone:not(.botao-primario) {
  background: var(--indigo-fundo);
  border-color: var(--indigo-linha);
  color: var(--indigo);
}

.botao-icone:not(.botao-primario):hover {
  background: var(--indigo-linha);
  border-color: var(--indigo);
  color: var(--tinta);
}

.botao-icone:not(.botao-primario):disabled {
  color: var(--tinta-fraca);
  background: var(--painel);
  border-color: var(--linha-forte);
}

/* Acesso de admin no cabeçalho — âmbar pra distinguir dos botões comuns */
.botao-admin.botao-icone:not(.botao-primario) {
  background: var(--ambar-fundo);
  border-color: var(--ambar-linha);
  color: var(--ambar);
}
.botao-admin.botao-icone:not(.botao-primario):hover {
  background: var(--ambar-linha);
  border-color: var(--ambar);
  color: var(--tinta);
}
.botao-admin:not([hidden]) {
  animation: admin-entra 0.32s ease both;
}
@keyframes admin-entra {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .botao-admin:not([hidden]) { animation: none; }
}

/* ---------------------------------------------------------------- conteúdo */

.conteudo {
  /* 1320 e não 1040: num monitor de 1920 a coluna antiga deixava quase um terço
     da tela em branco de cada lado. 1320 aproveita a largura sem esticar
     parágrafo além da medida de leitura confortável — quem precisa de MAIS que
     isso usa `.conteudo-largo` abaixo. */
  max-width: 1320px;
  margin: 0 auto;
  /* A barra superior está no fluxo (sticky), então o conteúdo começa logo
     abaixo dela — não há mais 88px de compensação. */
  padding: 24px 32px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Telas em que o conteúdo é GRADE, não texto: a agenda (sete colunas de dia) e
   a gestão (gráficos). Aqui largura extra vira informação — mais horário
   visível por vez, coluna de dia mais larga, nome de paciente que cabe sem
   cortar. O teto de 2200 existe só para que num monitor ultrawide a grade não
   vire uma faixa fina esticada de ponta a ponta. */
.conteudo-largo {
  max-width: min(100%, 2200px);
  padding-left: 24px;
  padding-right: 24px;
}

.bloco-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.bloco-topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Título + botão de ação logo ao lado (ex.: "Paciente" na tela de consulta
   finalizada) — fica junto do nome, não solto lá no canto direito. */
.bloco-topo-titulo-grupo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bloco-topo h2 {
  margin: 0;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(19px * var(--escala-texto));
  font-weight: 500;
}
/* O mesmo texto do título da barra superior (painel/navegacao.js marca). */
.titulo-repetido {
  display: none;
}

/* TRÊS por linha, fixo — não `auto-fit`. Com auto-fit a fileira quebrava em 2,
   3 ou 4 conforme a largura da janela, e o par de linhas 3+3 (as três coisas do
   ATENDIMENTO em cima; as três de ORGANIZAR a prática embaixo) só existia por
   acaso em certas larguras. A leitura em duas fileiras é a informação, então
   ela é declarada, não deixada ao acaso da viewport. */
/* V2: com a lateral, os cartões viram ATALHOS — menores, quantos couberem. */
.grade-modulos {
  display: grid;
  /* 240 px: em 1440 cabem 4 por linha, e os 8 atalhos fecham em duas linhas
     inteiras (com 200 eram 5 + 3, sobrando meia linha vazia). */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

/* Abaixo de ~900px três colunas espremem o parágrafo a ponto de ele quebrar
   palavra a palavra; aí a fileira vira 2 e, no celular, 1. */
/* TELEFONE ESTREITO — o cabeçalho fixo precisa CABER, não crescer.
 *
 * MEDIDO em 320 px: `.topo` tem 353 px de largura mínima — `.marca` (165) +
 * `.controles` (150) + o vão + os 28 de padding. A página rolava de lado, e
 * como `.topo` é `position: fixed`, ele fica parado enquanto o resto desliza
 * por baixo: o cabeçalho sai do lugar em relação ao conteúdo.
 *
 * Por que não `flex-wrap: wrap` no `.topo`, que seria o reflexo: ele é FIXO, e
 * quebrar linha o deixa mais alto — o conteúdo abaixo tem folga calculada para
 * a altura de uma linha e passaria a ficar escondido atrás dele. Num cabeçalho
 * fixo, a saída é encolher o conteúdo, não empilhar.
 *
 * A tag "painel" ao lado da marca é decoração: quem está em /painel/ sabe onde
 * está. Sai primeiro, e sozinha já devolve os 33 px que faltavam. O
 * `min-width: 0` no link é o que permite ao nome truncar em vez de empurrar —
 * sem ele, um item de flex nunca encolhe abaixo do próprio mínimo, que é
 * exatamente como este transbordo nasceu. */
@media (max-width: 420px) {
  .marca-tag {
    display: none;
  }
  .marca,
  .marca-link {
    min-width: 0;
  }
  .marca-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Os botões de ação do cabeçalho de bloco ("Cadastrar Paciente",
   "Nova Consulta") somam 227 px lado a lado e ficam sem espaço em telas
   estreitas. Aqui quebrar linha é seguro — não é elemento fixo. */
@media (max-width: 560px) {
  .bloco-topo-acoes {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .grade-modulos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .grade-modulos {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cartao-modulo p {
    display: none;
  }
}

/* Sem transform na transition/hover de propósito — este cartão carrega
   texto legível (h3 + p), e uma transition permanente de transform faz o
   Chrome promover o elemento pra uma camada de composição própria o tempo
   todo (não só durante o hover), perdendo a suavização de subpixel do
   texto (fica mais fino/borrado — mais perceptível em texto escuro sobre
   fundo claro). Mesma causa raiz corrigida em .painel-corpo/.modal-caixa
   (app/styles.css) — aqui é a versão que já existia antes, não é regressão
   desta sessão. box-shadow sozinho já dá a sensação de elevação no hover,
   sem precisar mover o elemento. */
.cartao-modulo {
  position: relative;
  display: block;
  background: var(--brilho-topo), var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  /* Recorta o fio de cor do `::before` pela curva do cartão — ver o comentário
     lá embaixo. Seguro aqui: o conteúdo é ícone, título e parágrafo, nada que
     precise vazar. */
  overflow: hidden;
  box-shadow: var(--elev-1), inset 0 1px 0 var(--vidro-borda);
  padding: 14px 16px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
  /* Entrada única ao carregar a página (não um hover) — não conflita com a
     regra "sem transform no hover" acima, roda 1x e para. `backwards`
     mantém o card em opacity:0 durante o delay em vez de piscar visível
     antes da vez dele. */
  animation: entrada 0.32s ease-out backwards;
}

.grade-modulos .cartao-modulo:nth-child(1) {
  animation-delay: 0.02s;
}
.grade-modulos .cartao-modulo:nth-child(2) {
  animation-delay: 0.06s;
}
.grade-modulos .cartao-modulo:nth-child(3) {
  animation-delay: 0.1s;
}
.grade-modulos .cartao-modulo:nth-child(4) {
  animation-delay: 0.14s;
}
.grade-modulos .cartao-modulo:nth-child(5) {
  animation-delay: 0.18s;
}
/* O sexto existe desde que Ferramentas entrou e nunca ganhou atraso: entrava
   junto com o primeiro, quebrando a cascata justo no fim da fileira. */
.grade-modulos .cartao-modulo:nth-child(6) {
  animation-delay: 0.22s;
}

.cartao-modulo.ativo {
  cursor: pointer;
}

.cartao-modulo.ativo:hover {
  border-color: var(--indigo-linha);
  box-shadow: var(--elev-2), 0 18px 36px -22px color-mix(in srgb, var(--grad-a) 60%, transparent);
}

/* O TÍTULO acompanha o ícone no hover. Antes só a borda e a sombra reagiam, e o
   cartão inteiro é um link — o alvo do clique é o cartão, então o retorno visual
   tem que ser do cartão, não de um detalhe da moldura. */
.cartao-modulo.ativo:hover h3 {
  color: var(--indigo);
}

.cartao-modulo h3,
.cartao-modulo-icone {
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

/* Fio de cor no topo, revelado no hover. É o que dá identidade ao cartão sem
   mover nada — a regra de "sem transform" acima continua valendo, porque isto é
   opacidade e não layout. `border-radius` herdado do cartão para o fio não
   vazar pelos cantos arredondados. */
.cartao-modulo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  /* SEM raio próprio, de propósito: quem recorta é o cartão.
     Antes o fio carregava `border-radius` igual ao do cartão — mas ele tem 3px
     de altura, e o navegador limita o raio à METADE da altura. Num cartão de
     4px de raio isso passava despercebido; com 14px o fio virava uma barra
     praticamente reta encostada numa quina redonda, e lia como desalinhamento.
     Com `overflow: hidden` no cartão, a curva do próprio cartão corta o fio no
     lugar certo, e ele acompanha qualquer raio que o token venha a ter. */
  border-radius: 0;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.cartao-modulo.ativo:hover::before,
.cartao-modulo.ativo:focus-visible::before {
  opacity: 1;
}

.cartao-modulo.ativo:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

.cartao-modulo.desativado {
  opacity: 0.55;
}

/* `flex-start`, não `space-between`: a etiqueta "disponível" saiu e o
   space-between não tinha mais nada contra o que empurrar — deixava o ícone
   sozinho num flex que não fazia trabalho nenhum. */
.cartao-modulo-topo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.cartao-modulo-topo .cartao-etiqueta {
  margin-bottom: 0;
}

.cartao-modulo-icone {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo-linha);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.cartao-modulo-icone svg {
  width: 22px;
  height: 22px;
}

/* O ícone acompanha o FIO DE COR do topo, em vez de reagir por conta própria.
   Os dois usam o mesmo par grad-a/grad-b, então o cartão inteiro acende como
   uma coisa só. Em opacidade baixa sobre a superfície: cor cheia aqui brigaria
   com o fio, que é quem deve carregar o acento. */
.cartao-modulo.ativo:hover .cartao-modulo-icone {
  background: linear-gradient(135deg, color-mix(in srgb, var(--grad-a) 26%, transparent), color-mix(in srgb, var(--grad-b) 26%, transparent)),
    var(--indigo-fundo);
  border-color: var(--indigo);
  color: var(--tinta);
}

.cartao-modulo.desativado .cartao-modulo-icone {
  color: var(--tinta-fraca);
  background: var(--campo);
  border-color: var(--linha-forte);
}

.cartao-etiqueta {
  display: inline-block;
  font-family: inherit;
  font-size: calc(9.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--indigo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 2px 6px;
  margin-bottom: 10px;
}

.cartao-modulo.desativado .cartao-etiqueta {
  color: var(--tinta-fraca);
}

/* Cabeçalho da página do paciente (painel/paciente.html) — avatar de
   iniciais, nome maior que o padrão de .bloco-topo h2, e as flags (fatos
   confirmados/negados) logo abaixo do nome, atualizadas em tempo real
   conforme os fatos são editados mais abaixo na página (ver
   renderizarFlagsPacienteHeader / aoMudar em paciente.js). */
.paciente-cabecalho-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.avatar-iniciais-paciente {
  width: 52px;
  height: 52px;
  font-size: calc(18px * var(--escala-texto));
}

.paciente-cabecalho-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.paciente-cabecalho-info .bloco-topo {
  margin-bottom: 0;
}

#paciente-titulo {
  font-size: calc(26px * var(--escala-texto));
}

.paciente-flags-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}

.paciente-flags-vazio {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.paciente-cabecalho #paciente-meta {
  margin: 12px 0 0;
}

.cartao-modulo h3 {
  margin: 0 0 6px;
  font-size: calc(15.5px * var(--escala-texto));
}

.cartao-modulo p {
  margin: 0;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- consultas */

.busca-consultas {
  width: 100%;
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.busca-consultas:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

.filtros-consultas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: -4px 0 12px;
}

.filtros-consultas label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.filtros-consultas select,
.filtros-consultas input[type="date"],
.filtros-consultas input[type="search"] {
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 6px 8px;
  /* input[type="date"] tem um ícone/área interna nativa do navegador que o
     deixa mais alto que input[type="search"] mesmo com o padding igual —
     altura explícita (escalando com o tamanho de texto, não fixa) garante
     os dois com a mesma altura de verdade. */
  height: calc(32px * var(--escala-texto));
}

/* Data e diagnóstico do mesmo tamanho — sem isso, o campo de busca por
   diagnóstico (sem largura própria) fica mais estreito que os de data
   (largura intrínseca do input type="date"). */
.filtros-consultas input[type="date"],
.filtros-consultas input[type="search"] {
  width: 170px;
}

.filtros-consultas input[type="search"]::placeholder {
  color: var(--tinta-fraca);
  font-style: italic;
}

.lista-consultas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-consulta-numero {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--indigo);
  margin-right: 6px;
}

.item-consulta-etiqueta {
  font-family: inherit;
  font-size: calc(10px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--raio-pilula);
  padding: 2px 8px;
  margin-left: 8px;
  white-space: nowrap;
}

/* Âmbar do TEMA, e não o #d9a441 fixo (escolhido para o escuro): com o claro
   como padrão (21/09/2026) esta etiqueta de 10 px em maiúsculas dava 1,99:1 no
   Início de todo médico novo. testes/cor-fixa-no-painel.mjs trava a família. */
.item-consulta-etiqueta-aberta {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-linha);
}

.item-consulta-etiqueta-descartada {
  color: var(--tinta-fraca);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
}

.item-consulta-valor {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-left: 8px;
}

.item-consulta-especialidade {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-left: 8px;
}

.item-consulta-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- aviso */

/* Toast simples (troca window.alert) — mesmo padrão visual/timing de
   app/styles.css (.aviso), só que com os tokens de tema do painel. */
.aviso {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  /* Por variável, não hex fixo. Era `#16304f` — o azul-marinho do tema escuro
     escrito à mão. Nos temas claros isso punha --tinta (quase preta) sobre
     fundo escuro e o aviso ficava ILEGÍVEL, justamente quando trazia recado
     importante. O app já tinha sido consertado assim (app/styles.css); o painel
     ficou para trás com a cópia antiga, e é por isso que o mesmo defeito
     aparecia só de um lado do produto. */
  background: var(--painel);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  /* Sombra porque o toast flutua sobre conteúdo: sem ela, em tema claro o
     --painel do aviso se confunde com o --painel do que está atrás. */
  box-shadow: 0 6px 20px rgba(2, 7, 15, 0.28);
  font-size: calc(14px * var(--escala-texto));
  padding: 9px 16px;
  border-radius: var(--raio);
  max-width: 70ch;
  /* Acima de qualquer popup/modal/box flutuante (chat e afins ficam em 2000) —
     o toast é o recado do momento e não pode aparecer por trás. Era 40. */
  z-index: 3000;
  opacity: 1;
  transition: opacity 0.26s ease, transform 0.26s ease, display 0.26s allow-discrete, overlay 0.26s allow-discrete;
}

.aviso[hidden] {
  display: none;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

@starting-style {
  .aviso:not([hidden]) {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

:root[data-tema="claro"] .aviso,
:root[data-tema="preto"] .aviso {
  background: var(--painel);
}

/* ---------------------------------------------------------------- modal */

/* O fundo sai do papel do tema, sem cor fixa: o rgba(2, 7, 15, 0.62) de antes
   é quase o papel do tema padrão, e no tema claro pintava a tela de
   azul-marinho (a mesma regra do app/styles.css; 17/10/2026,
   testes/veu-do-modal-segue-o-tema.mjs). */
.modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--papel) 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 30;
  opacity: 1;
  transition: opacity 0.24s ease, display 0.24s allow-discrete, overlay 0.24s allow-discrete;
}

.modal[hidden] {
  display: none;
  opacity: 0;
}

/* #modal-confirmar (ui-popups.js) é sempre uma confirmação disparada de
   dentro de outro modal já aberto (ex.: "Cancelar compromisso" dentro do
   modal de editar compromisso, em agenda.js) — precisa ficar por cima
   dele, não embaixo. Com o mesmo z-index de .modal, quem desempatava era
   a ordem no HTML, que por acaso deixava o de confirmação atrás. */
#modal-confirmar {
  z-index: 40;
}

@starting-style {
  .modal:not([hidden]) {
    opacity: 0;
  }
}

/* Sem transition de transform aqui de propósito — ver mesmo comentário em
   app/styles.css: essa caixa carrega todo o texto legível do modal, e uma
   transition permanente de transform promoveria pra uma camada de
   composição própria enquanto o modal fica aberto, perdendo a suavização
   de subpixel do texto. O fade do backdrop (.modal, sem texto) já dá a
   sensação de abrir/fechar. */
.modal-caixa {
  background: var(--brilho-topo), var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-3);
  padding: 20px 22px;
  width: min(480px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-caixa h3 {
  margin: 0;
  font-family: "IBM Plex Serif", Georgia, serif;
  /* font-weight explícito (era pra evitar falso negrito com a fonte
     IBM Plex Serif carregada via Google Fonts, trocada por Arial — não se
     aplica mais, mas não faz mal deixar). */
  font-weight: 600;
  font-size: calc(17px * var(--escala-texto));
  color: var(--tinta);
}

/* Meio-termo entre .modal-caixa (padrão, 480px) e uma altura fixa — usado
   pelo histórico detalhado (painel/paciente.html), mesma largura grande do
   equivalente em /app/, sem herdar altura fixa (a lista já rola sozinha). */
.modal-caixa-grande {
  width: min(1100px, 96vw);
}

/* Abas do popup de histórico (painel/paciente.html) — mesmo padrão visual
   de .consulta-abas/.consulta-aba, nome próprio porque aparece dentro de um
   modal, não de uma seção de página. */
.modal-abas {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.modal-aba {
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 6px 12px;
  cursor: pointer;
}

.modal-aba-ativa {
  color: var(--tinta);
  background: var(--campo);
  border-color: var(--indigo-linha);
}

.historico-prescricao-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
}

/* Aba Arquivos: nome do arquivo à esquerda, "Abrir" encostado à direita. O nome
   é o que o médico reconhece ("hemograma-marco.pdf"), então é ele que recebe o
   espaço e o corte por reticências — o botão tem largura fixa. */
.arquivo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arquivo-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historico-lista-resumos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}

.historico-consulta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
  cursor: pointer;
}

.historico-consulta-item:hover {
  border-color: var(--indigo);
}

.historico-consulta-item-data {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.historico-consulta-item-resumo {
  font-size: calc(13px * var(--escala-texto));
  line-height: 1.4;
}

/* Etapa dentro de um modal em várias partes (ex.: #modal-iniciar-consulta) —
   só uma fica visível por vez ([hidden] cuida disso), cada uma com o mesmo
   espaçamento vertical que .modal-caixa dá pros próprios filhos diretos. */
.iniciar-parte {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botão de ação secundária que ocupa a largura toda — ex.: "+ Cadastrar
   novo paciente", que abre um sub-fluxo, distinto visualmente das ações
   finais (Cancelar/Confirmar) alinhadas à direita em .modal-acoes. */
.botao-bloco {
  display: block;
  width: 100%;
  text-align: center;
}

.modal-explicacao {
  margin: 0;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-fraca);
  line-height: 1.5;
}

/* A explicação que pertence a UM campo, e não ao modal inteiro: cola no campo
   de cima (margem negativa contra o `gap` do formulário) para se ler como parte
   dele, não como um parágrafo solto entre dois campos. */
.modal-explicacao-campo {
  margin-top: -6px;
}

/* "opcional" ao lado do rótulo — miúdo e apagado, porque ele informa e não pode
   competir com o nome do campo. Usado no nome social, onde a maioria dos
   pacientes não tem nada a preencher e quem cadastra precisa saber disso sem
   ler um parágrafo. */
.rotulo-opcional {
  font-size: calc(11px * var(--escala-texto));
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--tinta-fraca);
  margin-left: 6px;
}

/* Sem o `>` de filho direto de propósito: o popup "Iniciar consulta" tem
   os labels dentro de wrappers de etapa (#iniciar-parte-buscar/-consulta),
   não direto em .modal-caixa — precisa continuar valendo em qualquer
   profundidade, senão os campos perdem o `width: 100%` do input abaixo e
   ficam curtos, desalinhados da borda direita da caixa. */
.modal-caixa label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.modal-caixa input[type="text"],
.modal-caixa input[type="number"],
.modal-caixa input[type="tel"],
.modal-caixa input[type="email"],
.modal-caixa select {
  width: 100%;
}

.modal-caixa input[type="text"],
.modal-caixa input[type="number"],
.modal-caixa input[type="tel"],
.modal-caixa input[type="email"],
.modal-caixa select {
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 9px;
}

.modal-caixa input:focus,
.modal-caixa select:focus {
  outline: none;
  border-color: var(--indigo);
}

.modal-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* Textarea genérica de modal (ex.: observação do paciente) — mesmo padrão
   de app/styles.css, com altura menor porque aqui cabe dentro de um
   .modal-caixa compacto, não num modal em tela cheia. */
.modal-textarea {
  width: 100%;
  min-height: 70px;
  resize: vertical;
  font-family: inherit;
  font-size: calc(13.5px * var(--escala-texto));
  line-height: 1.5;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
}

.modal-textarea:focus {
  outline: none;
  border-color: var(--indigo);
}

/* Lista de sugestão em-fluxo (busca de paciente, combobox de especialidade)
   — mesmo padrão de app/styles.css, portado aqui pro modal "Iniciar
   consulta" e pro campo "Especialidade padrão" das Configurações. */
.paciente-sugestoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -6px;
}

/* Cards maiores (.paciente-sugestao-cartao) pedem mais respiro entre um e
outro do que o padrão de texto simples da combobox de especialidade. */
#iniciar-consulta-sugestoes {
  gap: 6px;
}

.paciente-sugestao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 6px 9px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}

.paciente-sugestao:hover {
  border-color: var(--indigo);
}

/* Variante maior/mais elegante de .paciente-sugestao, só pra busca de
paciente no popup "Iniciar consulta" (não a combobox de especialidade, que
fica com o padrão simples de texto acima) — avatar com iniciais, nome em
destaque, meta (número/idade) embaixo, seta no lugar do rótulo "selecionar". */
.paciente-sugestao-cartao {
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.paciente-sugestao-cartao:hover {
  background: var(--indigo-fundo);
}

.paciente-sugestao-avatar {
  width: 38px;
  height: 38px;
  font-size: calc(13px * var(--escala-texto));
}

.paciente-sugestao-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.paciente-sugestao-nome {
  font-size: calc(15px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paciente-sugestao-meta {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.paciente-sugestao-seta {
  flex: 0 0 auto;
  display: flex;
  color: var(--tinta-fraca);
  transition: color 0.18s ease, transform 0.18s ease;
}

.paciente-sugestao-seta svg {
  width: 18px;
  height: 18px;
}

.paciente-sugestao-cartao:hover .paciente-sugestao-seta {
  color: var(--indigo);
  transform: translateX(2px);
}

.paciente-numero {
  display: inline-block;
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--indigo);
  margin-top: -4px;
}

/* Badges de fatos do paciente — usados no cabeçalho da página do paciente,
   no card do popup "Iniciar consulta" e na lista de pacientes. white-space
   normal (não nowrap) porque a lista de itens de um fato agora sempre
   aparece inteira, sem cortar em "+N" — pode ficar longa e precisa poder
   quebrar linha em vez de vazar. */
.flag-paciente {
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  white-space: normal;
  border-radius: var(--raio);
  padding: 2px 7px;
  border: 1px solid transparent;
}

.flag-confirmado {
  color: var(--vivo);
  background: var(--vivo-fundo);
  border-color: var(--vivo-linha);
}

/* "Medicação em uso contínuo" é informativo (o que o paciente já toma), não
   um fator de risco como alergia/doença crônica — usar o mesmo vermelho de
   alerta ali soava mais grave do que é. Indigo (mesma família de token do
   resto do tema) marca "informação a considerar" sem soar como alarme. */
.flag-confirmado-medicacao {
  color: var(--indigo);
  background: var(--indigo-fundo);
  border-color: var(--indigo-linha);
}

/* UMA COR POR TIPO DE FATO — pedido do Thomas em 2026-09-09: "cada flag
   tem que ter uma cor diferente, nem que seja levemente alterada". Aqui
   eram CINCO tipos dividindo o mesmo vermelho: alergia, crônica,
   tabagismo, etilismo e histórico familiar. Só medicação tinha cor.

   Quem é de qual tipo está em /fatos-formato.js (COR_DO_FATO), e é a mesma
   regra que app/styles.css consome — de propósito: o mesmo fato do mesmo
   paciente não pode aparecer numa cor no painel e noutra na consulta. O
   que muda entre os dois é só o prefixo da classe.

   A escolha dos matizes está comentada por extenso em app/styles.css. */
.flag-confirmado-alergia {
  color: var(--vivo);
  background: var(--vivo-fundo);
  border-color: var(--vivo-linha);
}

.flag-confirmado-risco {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border-color: var(--ambar-linha);
}

.flag-confirmado-tabagismo {
  color: color-mix(in srgb, var(--ambar) 62%, var(--vivo));
  background: color-mix(in srgb, var(--ambar-fundo) 55%, var(--vivo-fundo));
  border-color: color-mix(in srgb, var(--ambar-linha) 55%, var(--vivo-linha));
}

.flag-confirmado-etilismo {
  color: color-mix(in srgb, var(--ambar) 60%, var(--indigo));
  background: color-mix(in srgb, var(--ambar-fundo) 62%, var(--campo));
  border-color: color-mix(in srgb, var(--ambar-linha) 55%, var(--indigo-linha));
}

.flag-confirmado-familiar {
  color: var(--proposta);
  background: var(--proposta-fundo);
  border-color: var(--proposta-linha);
}

.flag-negado {
  color: var(--tinta-fraca);
  background: var(--campo);
  border-color: var(--linha);
}

/* Card do paciente selecionado, no popup "Iniciar consulta" — Parte 2. */
.iniciar-paciente-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 10px 12px;
}

.iniciar-paciente-card-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.iniciar-paciente-card-nome {
  font-size: calc(14px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}

.iniciar-paciente-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.iniciar-consulta-modelo-linha {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.iniciar-consulta-modelo-campo {
  flex: 1 1 auto;
  min-width: 0;
}

#btn-iniciar-criar-modelo {
  flex: 0 0 auto;
  white-space: nowrap;
}

.item-consulta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--elev-1);
  padding: 6px 6px 6px 16px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  animation: entrada 0.18s ease-out;
}

.item-consulta:hover {
  border-color: var(--linha-forte);
  background: var(--campo);
  box-shadow: var(--elev-2);
}

.item-consulta-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.item-consulta-linha-principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.item-consulta-nome {
  font-size: calc(15.5px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}

/* Agrupa idade/etiqueta/valor/especialidade numa linha secundária clara —
   antes eram filhos soltos de .item-consulta-nome, tudo amontoado numa
   run de texto só sem nenhum anchor visual. Zera as margin-left que essas
   classes têm por padrão (pensadas pra quando eram filhos inline do nome)
   só dentro deste wrapper — não mexe no uso delas em paciente.js/pacientes.js,
   que ainda são filhos inline do nome lá. */
.item-consulta-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
}

.item-consulta-meta > * {
  margin: 0;
}

.item-consulta-motivo {
  display: block;
  font-size: calc(12px * var(--escala-texto));
  font-style: italic;
  color: var(--tinta-fraca);
  border-left: 2px solid var(--linha-forte);
  padding-left: 8px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-consulta-idade {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-left: 8px;
}

.item-consulta-excluir {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  /* Mesmo motivo do line-height em .botao — esta classe também mistura
     <button> (Descartar/Restaurar/Excluir) com <a> (Nova consulta), que
     sem isso ficam com alturas diferentes. */
  line-height: 1.3;
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 6px 10px;
  cursor: pointer;
  display: inline-block;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.item-consulta-excluir:hover {
  color: var(--vivo);
  border-color: var(--vivo-linha);
  background: var(--vivo-fundo);
}

.item-consulta-data {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  white-space: nowrap;
}

/* Variante maior do .item-consulta, só na lista de pacientes (não mexe no
.item-consulta base, compartilhado com listas de CONSULTA em
painel/paciente.js e painel/painel.js) — mais espaço pra caber avatar,
contato e estatísticas (nº de consultas, valor total pago, última
consulta), pra reconhecer/avaliar o paciente sem precisar abrir a página
dele. */
.item-paciente-cartao {
  align-items: flex-start;
  padding: 14px 16px 14px 18px;
  border-radius: 10px;
  gap: 16px;
}

.item-paciente-cartao .item-consulta-acoes {
  align-self: center;
}

.item-paciente-cartao-link {
  padding: 0;
  gap: 10px;
}

.item-paciente-cartao-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item-paciente-cartao-avatar {
  width: 40px;
  height: 40px;
  font-size: calc(14px * var(--escala-texto));
}

.item-paciente-cartao-principal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.item-paciente-cartao-contato {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-paciente-cartao-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}

.item-paciente-cartao-stat strong {
  color: var(--tinta);
  font-weight: 600;
}

.vazio {
  color: var(--tinta-fraca);
  font-size: calc(13.5px * var(--escala-texto));
  margin: 0;
}

/* O vazio de uma LISTA inteira (consultas do Início, pacientes): uma linha solta
   de texto parecia página quebrada (21/09/2026). Caixa tracejada, centro. */
.vazio.vazio-lista {
  padding: 22px 16px;
  text-align: center;
  color: var(--tinta-media);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-cartao);
  background: color-mix(in srgb, var(--painel) 55%, transparent);
}

/* Paginação numerada — "Consultas anteriores" no painel principal. */
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.paginacao-botao {
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  min-width: 32px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.paginacao-botao:hover:not(:disabled) {
  background: var(--campo);
  border-color: var(--tinta-fraca);
}

.paginacao-botao:disabled {
  opacity: 0.35;
  cursor: default;
}

.paginacao-botao-ativa {
  background: var(--gradiente-botao);
  border-color: transparent;
  color: #fff;
  cursor: default;
}

.paginacao-reticencias {
  color: var(--tinta-fraca);
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  padding: 0 2px;
}

/* ---------------------------------------------------------------- config */

.config-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.config-grupo + .config-grupo {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}

.config-rotulo {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
}

.config-opcoes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.config-opcoes-coluna {
  flex-direction: column;
  gap: 8px;
}

/* Cartão selecionável — mesmo visual do prontuário (app/styles.css), com
   uma leve elevação no hover/selecionado (mesmo tom de sombra já usado em
   .cartao-modulo.ativo:hover) em vez de só borda sólida. */
/* Sem transform de propósito — mesmo motivo de .cartao-modulo acima (esta
   opção carrega o rótulo legível do texto de configuração). */
.config-opcao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--painel);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.config-opcao:hover {
  border-color: var(--tinta-fraca);
  box-shadow: 0 8px 20px -14px rgba(47, 111, 214, 0.5);
}

.config-opcao:has(input:checked) {
  border-color: var(--indigo);
  background: var(--indigo-fundo);
  color: var(--indigo);
  box-shadow: 0 10px 24px -14px rgba(47, 111, 214, 0.55);
}

.config-opcao input {
  accent-color: var(--indigo-solido);
  cursor: pointer;
}

/* Checkbox totalmente customizado (não só accent-color) — o checkbox nativo
   com accent-color, ao ganhar foco, mostra um contorno quadrado de canto
   reto por cima de um widget de cantos arredondados, e nesse descompasso
   aparece um "bico" na quina, como se estivesse cortado/clipado. Desenhando
   o próprio quadrado aqui (appearance: none) elimina essa inconsistência de
   vez, em qualquer navegador/tema. Rádios não têm esse problema (são
   círculos, sem quina pra descompassar) — continuam com o accent-color
   nativo da regra acima. */
.config-opcao input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1.5px solid var(--linha-forte);
  background: var(--campo);
  display: inline-grid;
  place-content: center;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.config-opcao input[type="checkbox"]::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}

.config-opcao input[type="checkbox"]:checked {
  background: var(--indigo-solido);
  border-color: var(--indigo-solido);
}

.config-opcao input[type="checkbox"]:checked::after {
  opacity: 1;
}

.config-opcao input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Slider (em vez do input numérico antigo) pra escolher anos/quantidade —
   accent-color já vem de .config-opcao input acima, então o "bolinha" segue
   a mesma cor indigo dos radios ao lado, sem regra extra. */
.config-opcao-numero input[type="range"] {
  width: 110px;
  cursor: pointer;
}

.config-opcao-numero-valor {
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  min-width: 2ch;
  text-align: right;
}

.config-numero {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}

.config-numero input {
  width: 56px;
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 5px 7px;
}

/* ---------------------------------------------------------------- perfil */

.perfil-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

.perfil-nav {
  position: sticky;
  top: calc(var(--topo-altura) + 16px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.perfil-nav-avatar {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.avatar-foto-grande {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
}

.perfil-foto-botao {
  display: block;
  margin: 10px auto 0;
  width: fit-content;
  font-size: calc(11.5px * var(--escala-texto));
  padding: 5px 10px;
  cursor: pointer;
}

.perfil-foto-status {
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
  text-align: center;
  margin: 6px 0 0;
}

.perfil-foto-status.erro {
  color: var(--vivo);
}

.perfil-nav-nome {
  font-size: calc(14px * var(--escala-texto));
  font-weight: 600;
  margin-bottom: 6px;
  word-break: break-word;
}

.perfil-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.perfil-nav-links a {
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta-media);
  padding: 7px 10px;
  border-radius: var(--raio);
  transition: background 0.18s ease, color 0.18s ease;
}

.perfil-nav-links a:hover {
  background: var(--painel);
  color: var(--tinta);
}

.perfil-nav-links a.ativo {
  background: var(--indigo-fundo);
  color: var(--indigo);
}

.perfil-secoes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  /* Sem isso, a última seção (#configuracoes) não tem espaço embaixo pra
     rolar até o topo — a página acaba antes, e o link da aba para de
     rolar cedo demais (com a seção anterior ainda visível). Garante que
     qualquer aba, inclusive a última, sempre tem como chegar ao topo. */
  padding-bottom: 70vh;
}

.perfil-secoes .bloco {
  scroll-margin-top: calc(var(--topo-altura) + 16px);
}

.perfil-aviso {
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0;
}

.agenda-arraste-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.agenda-arraste-aviso svg {
  width: 18px;
  height: 18px;
  color: var(--indigo);
  flex: 0 0 auto;
}

.agenda-arraste-aviso span {
  flex: 1 1 auto;
}

.agenda-arraste-aviso-fechar {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--tinta-fraca);
  font-size: calc(16px * var(--escala-texto));
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.18s ease;
}

.agenda-arraste-aviso-fechar:hover {
  color: var(--tinta);
}

.secao-explicacao {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin: -8px 0 14px;
}

.campo-linha {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.campo-linha:last-child {
  margin-bottom: 0;
}

/* `#verif-form > label` (Observação da verificação de CRM) fica um nível abaixo
   do .bloco, então o combinador direto não a pegava e o textarea saía estreito e
   desalinhado — mesma formatação de campo dos demais. */
.bloco > label,
#verif-form > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  margin-bottom: 14px;
}

.bloco > label:last-child {
  margin-bottom: 0;
}

.campo-linha > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  flex: 1 1 160px;
}

.bloco input[type="text"],
.bloco input[type="date"],
.bloco input[type="time"],
.bloco input[type="number"],
.bloco input[type="password"],
.bloco select,
.bloco textarea {
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
}

.bloco input:focus,
.bloco select:focus,
.bloco textarea:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}

.bloco textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.5;
}

.campo-mascara-grupo {
  display: flex;
  gap: 6px;
  align-items: center;
}

.campo-mascara-grupo input {
  flex: 1 1 auto;
  min-width: 0;
}

.dias-semana {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* .opcao-pilula é o mesmo visual, pra grupos de checkbox que não são dias
da semana (ex.: #perfil-lembrete-retorno) — nome genérico, mesma regra. */
.dia-opcao,
.opcao-pilula {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.dia-opcao:has(input:checked),
.opcao-pilula:has(input:checked) {
  background: var(--indigo-fundo);
  border-color: var(--indigo);
  color: var(--indigo);
}

.dia-opcao input,
.opcao-pilula input {
  accent-color: var(--indigo-solido);
}

/* Grade semanal de disponibilidade (Perfil → Agenda e teleconsulta) — uma
   linha por dia da semana, com um bloco de campos independente pra
   teleconsulta e outro pra presencial (pedido explícito: os dois tipos não
   podem ficar acoplados). */
.disponibilidade-grade {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.disponibilidade-dia-linha {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.disponibilidade-dia-nome {
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}

/* Duas linhas fixas (rótulo, depois faixa de horário) em vez de deixar o
   navegador decidir onde quebrar — numa única linha flex-wrap, o ponto de
   quebra varia entre as linhas e fica inconsistente/cortado em texto
   "Muito grande" (checkbox + label + 2 campos de hora não cabem juntos). */
.disponibilidade-tipo-bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.disponibilidade-tipo-bloco label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.disponibilidade-faixa-horario {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  flex-wrap: wrap;
}

.disponibilidade-tipo-bloco input[type="time"] {
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 4px 6px;
  width: 92px;
}

.disponibilidade-tipo-bloco input:disabled {
  opacity: 0.4;
}

@media (max-width: 720px) {
  .disponibilidade-dia-linha {
    grid-template-columns: 1fr;
  }
}

.perfil-salvar-linha {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Barra de salvar do perfil — flutua no rodapé, visível de qualquer lugar. */
.perfil-salvar-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--painel) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
}
.perfil-salvar-barra-conteudo {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.perfil-salvar-aviso {
  margin-right: auto;
  font-size: calc(13px * var(--escala-texto));
  color: var(--ambar);
  font-weight: 600;
}
/* espaço pro conteúdo não ficar embaixo da barra fixa */
.perfil-layout {
  padding-bottom: 92px;
}
.perfil-nao-salvo-acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
  flex-wrap: wrap;
}
.perfil-nao-salvo-sair {
  color: var(--vivo);
}

.perfil-status {
  font-size: calc(13px * var(--escala-texto));
  color: var(--indigo);
}

.perfil-status.erro {
  color: var(--vivo);
}

@media (max-width: 760px) {
  .perfil-layout {
    grid-template-columns: 1fr;
  }

  .perfil-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .perfil-nav-avatar {
    border-bottom: none;
    padding-bottom: 0;
  }

  .perfil-nav-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------- consulta.html (detalhe) */

.consulta-meta {
  color: var(--tinta-fraca);
  font-size: calc(13px * var(--escala-texto));
  margin: -8px 0 4px;
}

.consulta-textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.consulta-textarea:focus {
  outline: none;
  border-color: var(--indigo);
}

/* Aviso no popup "Iniciar consulta" quando o médico escolheu "Iniciar sem
   paciente vinculado" — mesma família de cor de .badge-retorno-exames
   (âmbar = atenção, não erro): a consulta é salva normalmente, só não tem
   vínculo ainda. */
.aviso-sem-paciente {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-linha);
  border-radius: var(--raio);
  padding: 10px 12px;
}

.consulta-campos-curtos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.consulta-campos-curtos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  flex: 1 1 180px;
}

.consulta-retorno-rotulo-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Retorno condicionado a exame(s) (ex.: "retorno em 7 dias com resultado
   dos exames") — sinalizado à parte porque uma futura feature de agenda
   não pode tratar como um simples lembrete por dias, depende de quando o
   resultado sai. Cor âmbar (mesma família de .gestao-aviso-cobertura) —
   é um aviso pra usar depois, não um erro nem uma confirmação. */
.badge-retorno-exames {
  font-family: inherit;
  font-size: calc(9.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-linha);
  border-radius: var(--raio);
  padding: 1px 6px;
  white-space: nowrap;
}

.consulta-campos-curtos input {
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 9px;
}

.consulta-campos-curtos input:focus {
  outline: none;
  border-color: var(--indigo);
}

#consulta-titulo a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--indigo-linha);
}

#consulta-titulo a:hover {
  border-bottom-color: var(--indigo);
  color: var(--indigo);
}

.consulta-abas {
  display: flex;
  gap: 4px;
}

.consulta-aba {
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 6px 12px;
  cursor: pointer;
}

.consulta-aba-ativa {
  color: var(--tinta);
  background: var(--campo);
  border-color: var(--indigo-linha);
}

.prontuario-secoes-leitura {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.prontuario-secao-leitura h3 {
  margin: 0 0 4px;
  font-family: inherit;
  /* Explícito de propósito: <h3> herda bold (700) do navegador, mas "IBM
     Plex Mono" só carrega 400/500 (ver <link> do Google Fonts) — sem isso
     o Chrome sintetiza um falso negrito, esticando o traço da fonte. 500 é
     o mais pesado que existe carregado. */
  font-weight: 500;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.prontuario-secao-leitura p {
  margin: 0;
  font-size: calc(14px * var(--escala-texto));
  line-height: 1.6;
  color: var(--tinta);
  white-space: pre-wrap;
}

.consulta-sinais-vitais {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consulta-sinal-vital {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 3px 8px;
}

/* Só ocupa espaço quando há prescrição de verdade (hidden por padrão no
   HTML) — sem altura reservada à toa em consultas sem receita nenhuma. */
.consulta-prescricao {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consulta-prescricao-rotulo {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.consulta-prescricao-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consulta-prescricao-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}

.consulta-prescricao-medicamento {
  font-weight: 600;
}

.consulta-prescricao-detalhe {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* "Termina em X dias" / "Passou X dias" — calculado a partir da duração +
   data da consulta (calcularStatusDuracao), não é alerta nem confirmação,
   por isso a mesma cor neutra de .consulta-prescricao-detalhe, só em caixa
   alta pra se destacar um pouco da posologia/duração ao lado. */
.consulta-prescricao-status {
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-fraca);
}

/* 2 colunas — os 5 tipos cabem em ~3 linhas em vez de 5, e cada .fato-bloco
   vira um cartão de verdade (ver abaixo) em vez de texto solto separado só
   por espaço em branco. */
.lista-fatos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
}

@media (max-width: 720px) {
  .lista-fatos {
    grid-template-columns: 1fr;
  }
}

.fato-bloco {
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
  animation: entrada 0.18s ease-out;
}

.fato-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.fato-bloco-titulo {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-fraca);
  margin: 0;
}

.fato-bloco-topo select {
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 4px 7px;
}

.fato-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}

.fato-item-inativo {
  color: var(--tinta-fraca);
  text-decoration: line-through;
}

.fato-item-gravidade {
  font-family: inherit;
  font-size: calc(9.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vivo);
  border: 1px solid var(--vivo-linha);
  background: var(--vivo-fundo);
  border-radius: var(--raio);
  padding: 1px 5px;
}

.fato-item-origem {
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.fato-adicionar {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.fato-adicionar input {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 6px 9px;
}

.fato-adicionar input:focus {
  outline: none;
  border-color: var(--indigo);
}

/* Select de nível (leve/pesado) — só aparece pra tabagismo/etilismo, ao lado
   do campo de texto no "Adicionar item". */
.fato-adicionar-nivel {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 6px 9px;
}

/* ---------------------------------------------------------------- gestao.html */

.gestao-aviso-cobertura {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-linha);
  border-radius: var(--raio);
  padding: 6px 10px;
  margin: 8px 0 0;
}

/* Skeleton de carregamento da Gestão (F7) */
.gestao-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.gestao-skeleton-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.gestao-skeleton-tiles span {
  height: 92px;
  border-radius: var(--raio);
}
.gestao-skeleton-chart {
  height: 180px;
  border-radius: var(--raio);
}
.gestao-skeleton-tiles span,
.gestao-skeleton-chart {
  background: linear-gradient(90deg, var(--campo) 25%, var(--linha) 37%, var(--campo) 63%);
  background-size: 400% 100%;
  animation: gestao-shimmer 1.4s ease infinite;
}
@keyframes gestao-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gestao-skeleton-tiles span,
  .gestao-skeleton-chart {
    animation: none;
  }
}

/* Seletor de período (Gestão) — atalhos + calendário de intervalo */
.periodo-barra {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 14px 0 4px;
}
.periodo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.periodo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--painel);
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.periodo-chip:hover {
  border-color: var(--indigo);
  color: var(--tinta);
}
/* Branco pede --indigo-solido (21/09/2026): o --indigo dos temas escuros é um
   azul claro feito para ser TEXTO, e o rótulo ativo dava 2,16:1 no escuro-azul
   e 2,07:1 no preto. Vale para todo chip ativo com texto branco do painel. */
.periodo-chip-ativo {
  background: var(--indigo-solido);
  border-color: var(--indigo-solido);
  color: #fff;
}
.periodo-chip-calendario svg {
  width: 14px;
  height: 14px;
}
.periodo-rotulo-ativo {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.periodo-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 280px;
  max-width: 92vw;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  padding: 12px;
}
.periodo-pop[hidden] {
  display: none;
}
.periodo-pop-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.periodo-pop-titulo {
  font-size: calc(13px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}
.periodo-nav {
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  color: var(--tinta);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.periodo-nav:hover {
  border-color: var(--indigo);
}
.periodo-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.periodo-dia-cab {
  text-align: center;
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  padding: 2px 0;
}
.periodo-dia {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  color: var(--tinta);
  border-radius: 6px;
  font-size: calc(12px * var(--escala-texto));
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.periodo-dia:hover:not(:disabled) {
  background: var(--indigo-fundo);
}
.periodo-dia:disabled {
  color: var(--tinta-fraca);
  opacity: 0.4;
  cursor: default;
}
.periodo-dia-meio {
  background: var(--indigo-fundo);
  border-radius: 0;
}
.periodo-dia-ponta {
  background: var(--indigo-solido);
  color: #fff;
}
.periodo-pop-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.periodo-pop-dica {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-media);
}

.gestao-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* Os cartões de número de Pacientes (e de quem mais usa `.gestao-cartao`)
   seguem a forma dos números do Início desde 21/09/2026: o valor vinha em
   serifada negrito, o único número do painel assim. */
.gestao-cartao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--brilho-topo), var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-1);
  padding: 14px 16px;
}

.gestao-cartao-valor {
  font-family: inherit;
  font-size: calc(26px * var(--escala-texto));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.gestao-cartao-rotulo {
  font-size: calc(12px * var(--escala-texto));
  font-weight: 500;
  color: var(--tinta-media);
}

/* KPI tiles (F2) — número grande + delta + sparkline */
.gestao-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px 16px;
}
.gestao-kpi-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.gestao-kpi-valor {
  font-size: calc(23px * var(--escala-texto));
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.gestao-kpi-rotulo {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}
.gestao-kpi-spark {
  margin-top: 2px;
}
.gestao-kpi-spark .spark {
  width: 100%;
  height: 36px;
  display: block;
}
.gestao-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: calc(11px * var(--escala-texto));
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gestao-delta-bom {
  color: var(--verde);
  background: color-mix(in srgb, var(--verde) 15%, transparent);
}
.gestao-delta-ruim {
  color: var(--vivo);
  background: var(--vivo-fundo);
}
.gestao-delta-neutro {
  color: var(--tinta-fraca);
  background: color-mix(in srgb, var(--tinta-fraca) 15%, transparent);
}

/* Gráfico de tendência (SVG) */
.gestao-tendencia-wrap {
  position: relative;
}
.grafico-tendencia {
  width: 100%;
  height: 190px;
  display: block;
  overflow: visible;
}
.grafico-grid {
  stroke: var(--linha);
  stroke-width: 1;
}
.grafico-rotulo-x {
  fill: var(--tinta-fraca);
  font-size: 11px;
}
.grafico-crosshair {
  stroke: var(--tinta-fraca);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.grafico-foco {
  fill: var(--grafico-1);
  stroke: var(--painel);
  stroke-width: 2;
}
.grafico-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  background: var(--tinta);
  color: var(--painel);
  font-size: calc(11.5px * var(--escala-texto));
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
}
.grafico-tip strong {
  font-weight: 700;
  margin-right: 4px;
}

.gestao-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* Cada gráfico vira um cartão — coesão de dashboard (F6). */
.gestao-grafico {
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
}

.gestao-grafico-largo {
  grid-column: 1 / -1;
}

.gestao-grafico h3 {
  margin: 0 0 12px;
  font-family: inherit;
  /* Ver comentário em .prontuario-secao-leitura h3 — mesmo motivo. */
  font-weight: 500;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.gestao-barras {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gestao-barra-linha {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  align-items: center;
  gap: 8px;
}

.gestao-barra-rotulo {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gestao-barra-trilha {
  height: 8px;
  background: var(--campo);
  border-radius: 4px;
  overflow: hidden;
}

.gestao-barra-preenchimento {
  height: 100%;
  background: var(--gradiente);
  border-radius: 4px;
}

.gestao-barra-valor {
  font-family: inherit;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  min-width: 2ch;
  text-align: right;
}

.gestao-listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

/* Reorganização em seções (item 4 do plano de melhorias do scribe) — cada
   uma com cabeçalho próprio, em vez do grid único que existia antes. */
.gestao-secao {
  margin-top: 32px;
}

.gestao-secao-titulo {
  margin: 0 0 4px;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(15px * var(--escala-texto));
  color: var(--tinta);
}

.gestao-secao-nota {
  margin: 0 0 16px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* Pizza/donut de N fatias — generaliza o donut de 2 fatias que já existia
   em painel/agenda.js (resumo financeiro), reaproveitado aqui pra
   gênero/doença crônica/tabagismo. */
.gestao-pizza {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.gestao-pizza-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  flex: none;
}

.gestao-pizza-legenda {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 140px;
  min-width: 0;
}

.gestao-pizza-legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
}

.gestao-pizza-legenda-cor {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

/* Colunas verticais — pra faixa etária e volume por mês (comparação entre
   categorias ordenadas / série temporal, onde coluna lê melhor que barra
   horizontal). Mesmo espírito "sem biblioteca de gráfico" do resto do app. */
.gestao-colunas {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 160px;
  padding-top: 8px;
}

.gestao-coluna-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 0;
  height: 100%;
  min-width: 0;
}

.gestao-coluna-valor {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.gestao-coluna-barra {
  width: 100%;
  max-width: 46px;
  background: var(--gradiente);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}

.gestao-coluna-rotulo {
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-media);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.gestao-inativos-controle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}

.gestao-inativos-controle input {
  width: 56px;
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 4px 6px;
}

.gestao-lista-ver-todos {
  display: inline-block;
  margin-top: 8px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--indigo);
}

.gestao-lista-bloco h3 {
  margin: 0 0 10px;
  font-family: inherit;
  /* Ver comentário em .prontuario-secao-leitura h3 — mesmo motivo. */
  font-weight: 500;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.gestao-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gestao-lista-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 7px 10px;
}

.gestao-lista-item a {
  color: var(--indigo);
  text-decoration: none;
}

.gestao-lista-item a:hover {
  text-decoration: underline;
}

.gestao-lista-item-valor {
  font-family: inherit;
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.gestao-nota {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------- chat-flutuante.js */

/* Caixa única, sempre visível (sem botão flutuante separado) — fechada
   mostra só o topo + o campo de pergunta já exposto; aberta revela o
   histórico entre os dois. Largura fixa (não atravessa a página), cantos
   bem curvos. Sem transition de opacity/transform aqui de propósito — a
   caixa carrega texto (mensagens), e uma transition permanente dessas
   propriedades borraria a suavização de subpixel (mesmo problema corrigido
   em .painel-corpo/.modal-caixa, app/styles.css) — anima só max-height
   (ver .chat-flutuante-mensagens), que é seguro. */
.chat-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* ABAIXO DOS MODAIS (21/09/2026). Era 40, acima do .modal (30): o Copiloto
     ficava por cima de todo modal aberto e roubava o clique dos botões do
     rodapé — na janela estreita da agenda, o "Salvar" do compromisso caía
     embaixo dele (testes/agenda-na-consulta.mjs morreu assim). 25 fica acima
     do conteúdo e do .topo (20), e abaixo do fundo da gaveta e da lateral
     (29/30 — os dois só se cruzam no celular, onde a gaveta aberta é um modal
     e tem de cobri-lo), dos modais (30), do #modal-confirmar (40), da barra de
     salvar do Perfil (50), das notificações (60/70), do popup da tele (2000) e
     dos avisos (3000). Quem confere a ordem: testes/camadas-do-painel.mjs. */
  z-index: 25;
  width: min(340px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  background: var(--vidro-fundo);
  backdrop-filter: blur(var(--vidro-blur));
  -webkit-backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-3);
  overflow: hidden;
}

.chat-flutuante-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--linha);
  background: var(--campo);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.chat-flutuante-topo:hover {
  background: color-mix(in srgb, var(--campo) 85%, var(--indigo) 15%);
}

.chat-flutuante-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
}

.chat-flutuante-titulo svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--indigo);
}

.chat-flutuante-seta {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--tinta-fraca);
  transition: transform 0.22s ease;
}

.chat-flutuante-aberto .chat-flutuante-seta {
  transform: rotate(180deg);
}

.chat-flutuante-mensagens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  padding: 0 14px;
  overflow-y: auto;
  transition: max-height 0.32s ease, padding 0.32s ease;
}

.chat-flutuante-aberto .chat-flutuante-mensagens {
  max-height: min(340px, 50vh);
  padding: 12px 14px;
}

.chat-flutuante-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: var(--raio);
  font-size: calc(13px * var(--escala-texto));
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-flutuante-msg-medico {
  align-self: flex-end;
  background: var(--indigo-fundo);
  color: var(--tinta);
  border: 1px solid var(--indigo-linha);
}

.chat-flutuante-msg-apoio {
  align-self: flex-start;
  background: var(--campo);
  color: var(--tinta);
  border: 1px solid var(--linha);
}

.chat-flutuante-msg-pensando {
  opacity: 0.6;
}

.chat-flutuante-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--linha);
}

.chat-flutuante-form input {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 9px;
}

.chat-flutuante-form input:focus {
  outline: none;
  border-color: var(--indigo);
}

/* `button` cru pegava também o microfone de ditado, que entrou nesta barra
   depois: `.chat-flutuante-form button` (0,1,1) vence `.botao-ditado` (0,1,0),
   e o mic saía com o gradiente do botão primário — parecendo um segundo
   "Enviar". Mirar o submit diz o que a regra sempre quis dizer. */
.chat-flutuante-form button[type="submit"] {
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: #fff;
  background: var(--gradiente-botao);
  border: none;
  border-radius: var(--raio);
  padding: 7px 12px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- agenda.html */

.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.agenda-toolbar-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Contexto de posicionamento para os popovers de calendário e filtro, que
     são `position: absolute` com `top: 100%`. Sem isto eles se ancorariam no
     primeiro ancestral posicionado — que pode estar no topo da página — e
     abririam longe do botão que os abriu. */
  position: relative;
}

.agenda-nav-data {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  font-size: calc(15px * var(--escala-texto));
  min-width: 15ch;
  text-align: center;
}

.agenda-granularidade {
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 6px 8px;
}

.agenda-toggle-todos-dias {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.agenda-toggle-todos-dias input {
  accent-color: var(--indigo-solido);
  cursor: pointer;
}

/* Ícone de origem pública (borda tracejada + selo), pra distinguir de
   relance um compromisso vindo do agendamento público (Marco 2 futuro) de
   um criado pelo próprio médico — pedido explícito do plano. */
.agenda-selo-publico {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: inherit;
  font-size: calc(9px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ambar);
}

/* --------------------------------------------------- grade Dia/Semana */

.agenda-grid-wrap {
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-1), inset 0 1px 0 var(--vidro-borda);
  overflow: auto;
  max-height: 72vh;
  /* Sem isto, chegar ao fim da grade com a roda do mouse continua rolando o
     DOCUMENTO — o chamado scroll chaining. O efeito era a barra de ferramentas
     e o título saírem da tela quando o médico só queria descer no horário.
     `contain` para o encadeamento na borda deste container. */
  overscroll-behavior: contain;
  background: var(--brilho-topo), var(--painel);
}

.agenda-cabecalho-dias {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--vidro-fundo);
  backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  border-bottom: 1px solid var(--linha-forte);
  box-shadow: 0 1px 0 var(--vidro-borda);
}

.agenda-cabecalho-dia {
  padding: 10px 6px;
  text-align: center;
  border-left: 1px solid var(--linha);
}

.agenda-cabecalho-dia-semana {
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.agenda-cabecalho-dia-numero {
  font-size: calc(17px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}

.agenda-cabecalho-dia-hoje .agenda-cabecalho-dia-numero {
  color: #fff;
  background: var(--gradiente-botao);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.agenda-corpo {
  display: grid;
  position: relative;
}

.agenda-coluna-horas {
  position: relative;
}

/* Fonte e cor valem para TODOS os rótulos. Até 21/09/2026 moravam só no
   `:first-child` abaixo (o comentário dele partiu a regra ao meio): 06:00 saía
   pequeno e esmaecido, e 07:00 em diante no corpo do texto, em cor cheia. */
.agenda-hora-rotulo {
  position: absolute;
  right: 8px;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* O PRIMEIRO rótulo não é centrado na linha: em `top: 0`, metade dele cairia
   fora do contêiner e o `overflow: auto` do wrapper o recortaria ao meio.
   Encostado no topo ele fica inteiro, e a diferença de meio caractere em
   relação aos outros não se nota. */
.agenda-hora-rotulo:first-child {
  transform: translateY(0);
}

.agenda-coluna-dia {
  position: relative;
  /* Larga o bastante pra acertar com o mouse sem mira, estreita o bastante pra
     não roubar espaço do nome do paciente — que é o que o médico lê. */
  --agenda-faixa-clique: 14px;
  border-left: 1px solid var(--linha);
  /* Linhas horizontais da grade, uma a cada slot — desenhadas no fundo, sem
     elemento de DOM por linha (uma pra cada 15 min seria centenas de nós). */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--linha) 0,
    var(--linha) 1px,
    transparent 1px,
    transparent var(--agenda-slot-px)
  );
  cursor: crosshair;
  user-select: none;
}

.agenda-coluna-dia-hoje {
  background-color: color-mix(in srgb, var(--indigo-fundo) 26%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--indigo) 55%, transparent);
}

/* Faixa horizontal indicando a hora atual — só aparece na coluna de hoje. */
.agenda-linha-agora {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vivo);
  z-index: 3;
  pointer-events: none;
}


/* A HORA, ancorada na linha de agora. Antes a marca era um ponto de 8px e um
   fio de 2px: dizia "é agora em algum ponto por aqui" e obrigava o médico a
   conferir na coluna de horas à esquerda. A pílula responde de relance, e por
   ser o vermelho do tema continua sendo o único vermelho da grade. Fundo
   `--vivo-solido`, e não `--vivo`: o texto é branco (21/09/2026). */
.agenda-agora-pilula {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: calc(9.5px * var(--escala-texto));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: var(--vivo-solido);
  border-radius: var(--raio-pilula);
  padding: 3px 6px;
  box-shadow: var(--elev-1);
  pointer-events: none;
  white-space: nowrap;
}

/* ------------------------------------ faixa de horas (06–22 ou 24 h)
   Pedido do dono em 17/09/2026: "a agenda tem que ter opção de mostrar as
   24h do dia". A conta de onde cada compromisso cai está em
   painel/agenda-faixa.js; aqui é só o desenho. */

.agenda-botao-24h[aria-pressed="true"] {
  background: var(--indigo-fundo);
  border-color: var(--indigo);
  color: var(--indigo);
  font-weight: 600;
}

/* BLOCO CORTADO: o compromisso passa da borda da grade (antes das 06:00,
   depois das 22:00 ou para outro dia). A borda cortada fica reta e
   tracejada — "continua além daqui" — e o rótulo do bloco traz início e fim
   REAIS. Antes, o pedaço de fora era desenhado preso na borda e o bloco
   mentia a hora. Duas classes no seletor porque `.agenda-bloco` (mais abaixo)
   redefine o raio e `.agenda-bloco-vaga` a borda inteira. */
.agenda-bloco.agenda-bloco-cortado-inicio {
  border-top: 2px dashed var(--tinta-fraca);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.agenda-bloco.agenda-bloco-cortado-fim {
  border-bottom: 2px dashed var(--tinta-fraca);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* "↑ N antes das 06:00" no cabeçalho do dia e "↓ N depois das 22:00" na
   fileira do pé: o que caiu inteiro fora da faixa. Âmbar porque é aviso de
   que há coisa marcada fora da vista, não um compromisso. */
.agenda-fora {
  /* Contêiner para o texto encolher com a coluna (ver @container abaixo). */
  container-type: inline-size;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.agenda-fora-botao {
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  line-height: 1.3;
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar-linha);
  border-radius: var(--raio-pilula);
  padding: 2px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  animation: entrada 0.2s ease-out backwards;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.agenda-fora-botao:hover,
.agenda-fora-botao:focus-visible {
  border-color: var(--ambar);
  background: color-mix(in srgb, var(--ambar) 18%, var(--ambar-fundo));
}

/* Coluna estreita (semana no celular, ~45 px): fica "↑ 2"; o texto inteiro
   continua no aria-label e no title. */
@container (max-width: 124px) {
  .agenda-fora-texto {
    display: none;
  }
}

.agenda-rodape-dias {
  display: grid;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: var(--vidro-fundo);
  backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  border-top: 1px solid var(--linha-forte);
}

.agenda-rodape-dia {
  min-width: 0;
  padding: 0 6px 5px;
  border-left: 1px solid var(--linha);
}

@media (prefers-reduced-motion: reduce) {
  .agenda-fora-botao {
    animation: none;
  }
}

/* Fita de densidade do mês: um ponto por compromisso, até 8.
   A lista recortada em 3 não distingue um dia com 4 de um dia com 14 — e é
   exatamente essa diferença que decide se o médico abre aquele dia. */
.agenda-mes-densidade {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 1px 0 2px;
  min-height: 5px;
}

.agenda-mes-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--indigo);
}

/* Vaga livre é contorno, não preenchimento — mesma gramática do bloco fantasma
   na grade: sem paciente, sem preenchimento. */
.agenda-mes-ponto-vaga {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--indigo);
}

.agenda-mes-ponto-bloqueado {
  background: var(--tinta-fraca);
}

/* Entrada dos blocos ao desenhar a grade. Mesmo @keyframes `entrada` que os
   cartões do painel já usam — curto, uma vez só, sem escalonar por índice
   (numa grade cheia o escalonamento vira cascata e atrapalha a leitura). */
.agenda-bloco {
  animation: entrada 0.2s ease-out backwards;
}

@media (prefers-reduced-motion: reduce) {
  .agenda-bloco {
    animation: none;
  }
}

/* Retângulo translúcido enquanto o médico arrasta o mouse pra selecionar um
   intervalo — vira o preenchimento do modal "Novo compromisso" ao soltar. */
/* A seleção do arraste ocupa a largura TODA, inclusive a faixa: ela mostra o
   intervalo escolhido, não um bloco existente. */
.agenda-selecao-arraste {
  position: absolute;
  left: 3px;
  right: 3px;
  background: color-mix(in srgb, var(--indigo) 30%, transparent);
  border: 1px dashed var(--indigo);
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}

.agenda-selecao-arraste-invalida {
  background: color-mix(in srgb, var(--vivo) 25%, transparent);
  border-color: var(--vivo);
}

.agenda-selecao-tooltip {
  position: absolute;
  left: 6px;
  top: -2px;
  transform: translateY(-100%);
  white-space: nowrap;
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  color: #fff;
  background: var(--indigo-solido);
  border-radius: var(--raio);
  padding: 2px 6px;
  pointer-events: none;
  z-index: 5;
}

.agenda-selecao-arraste-invalida + .agenda-selecao-tooltip,
.agenda-selecao-tooltip-invalida {
  background: var(--vivo);
}

/* FAIXA DE CLIQUE à direita — a coluna do dia não é toda do bloco.
   Sem ela, um horário já ocupado ficava intocável: o bloco cobria a largura
   inteira, e todo clique ali abria o compromisso existente em vez de criar
   outro. Marcar um encaixe em cima de uma consulta (segunda opinião, retorno
   rápido, sobreposição de propósito — que esta agenda PERMITE e destaca) exigia
   ir pro modal pela mão. Com a faixa livre, arrastar na beira cria ali mesmo. */
.agenda-bloco {
  position: absolute;
  left: 3px;
  right: var(--agenda-faixa-clique);
  overflow: hidden;
  border-radius: var(--raio);
  border-left: 3px solid var(--indigo);
  background: var(--brilho-topo), var(--indigo-fundo);
  box-shadow: var(--elev-1);
  color: var(--tinta);
  padding: 3px 6px;
  font-size: calc(11.5px * var(--escala-texto));
  line-height: 1.35;
  cursor: pointer;
  z-index: 1;
  transition: filter 0.15s ease;
  text-align: left;
}

.agenda-bloco:hover {
  box-shadow: var(--elev-2), inset 0 0 0 1px var(--vidro-borda);
  z-index: 2;
}

.agenda-bloco-titulo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-bloco-hora {
  color: var(--tinta-fraca);
  font-family: inherit;
  font-size: calc(10px * var(--escala-texto));
}

/* Bloco baixo (consulta de 30 min e menos): hora e nome na MESMA linha.
   Ver o comentário de ALTURA_MINIMA_DUAS_LINHAS em agenda.js — em duas linhas o
   conteúdo não cabia em 30px e o nome do paciente saía cortado ao meio. */
.agenda-bloco-curto {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 2px;
}

.agenda-bloco-curto .agenda-bloco-hora {
  flex: 0 0 auto;
}

/* `min-width: 0` é o que permite ao nome truncar em vez de empurrar: item de
   flex não encolhe abaixo do próprio mínimo sem isso, e o texto vazaria. */
.agenda-bloco-curto .agenda-bloco-titulo {
  min-width: 0;
  flex: 1 1 auto;
}

/* Bloco MÍNIMO (consulta de 15 min = 16 px de altura): sai a hora, fica o nome.
   Nem a linha única do modo compacto cabia — 4 de padding mais ~15,5 de linha
   pedem 20 px. A posição do bloco na grade já informa o horário; o nome do
   paciente não tem substituto, então é ele que fica. */
.agenda-bloco-minimo {
  padding-top: 0;
  padding-bottom: 0;
  align-items: center;
}

.agenda-bloco-minimo .agenda-bloco-hora {
  display: none;
}

.agenda-bloco-minimo .agenda-bloco-titulo {
  font-size: calc(10px * var(--escala-texto));
  line-height: 1.3;
}

/* --- O TEXTO DO BLOCO REAGE AO TAMANHO DO BLOCO -------------------------- */
/*
 * `container-type: size` transforma cada bloco num contêiner de consulta, e aí
 * `cqh` passa a valer 1% da ALTURA DELE. A fonte deixa de ser um número fixo e
 * vira uma reta em função do espaço disponível:
 *
 *     15 min (16px) -> ~9,6px      45 min (45px) -> ~11,3px
 *     30 min (30px) -> ~10,4px     60 min (60px) -> ~12,2px
 *
 * O `clamp` segura as duas pontas: nada abaixo de 9,5 (ilegível) nem acima de
 * 12,5 (um bloco de 2 horas não vira manchete). O `calc(... * --escala-texto)`
 * por fora preserva a escala de acessibilidade do painel — sem isso, aumentar
 * o texto no Perfil não teria efeito aqui.
 *
 * Os degraus discretos (`-curto`, `-minimo`) continuam: eles decidem o LAYOUT
 * (uma linha ou duas, com hora ou sem), que é decisão binária. O contínuo cuida
 * do tamanho. Um sozinho não faz o trabalho do outro.
 *
 * `size` exige largura e altura definidas, e é o caso: o bloco tem `top`/
 * `height` e `left`/`right` (ou `left`/`width` quando sobreposto) em pixel.
 */
.agenda-bloco {
  container-type: size;
}

.agenda-bloco-titulo {
  font-size: calc(clamp(9.5px, 6cqh + 8.6px, 12.5px) * var(--escala-texto));
}

.agenda-bloco-hora {
  font-size: calc(clamp(8.5px, 4.5cqh + 7.9px, 11px) * var(--escala-texto));
}

/* Coluna estreita (visão Semana em tela pequena): aperta o espaçamento entre
   letras antes de deixar o nome ser cortado. Ganha alguns caracteres sem
   diminuir a fonte, que já está no piso. */
@container (max-width: 118px) {
  .agenda-bloco-titulo {
    letter-spacing: -0.012em;
  }
  .agenda-bloco-curto {
    gap: 4px;
  }
}

.agenda-bloco-publico {
  border-left-style: dashed;
  border-left-width: 4px;
}

.agenda-bloco-cancelado {
  opacity: 0.45;
  text-decoration: line-through;
}

.agenda-bloco-concluido {
  border-left-color: var(--ambar);
  background: var(--ambar-fundo);
}

/* Vaga livre: cartão "fantasma" tracejado, cor pela via. */
.agenda-bloco-vaga {
  background: transparent;
  border: 1.5px dashed var(--indigo);
  border-left-width: 3px;
  color: var(--tinta-media);
}
.agenda-bloco-vaga-tele {
  border-color: #3b82f6;
  color: var(--tinta-media);
}
.agenda-bloco-vaga-presencial {
  border-color: #16a34a;
}
.agenda-selo-vaga {
  text-transform: uppercase;
  font-size: calc(8.5px * var(--escala-texto));
  letter-spacing: 0.06em;
  background: var(--indigo-fundo);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 2px;
}
.agenda-bloco-faltou {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
.agenda-bloco-pendente {
  border-left-color: var(--ambar);
  border-left-style: dashed;
}
/* Sobreposição permitida, só destacada: faixa de conflito. */
.agenda-bloco-sobreposto {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.55) inset;
}

/* ------------------------------------------------ passada visual 2026-09-10
   O que o Google Agenda e a Doctolib fazem e a grade não fazia: o ESTADO se lê
   de longe. Confirmado = cheio; marcado-mas-não-confirmado = mais leve; vaga
   = contorno tracejado discreto (é espaço, não gente); via = glifo. */

/* Marcado, ainda sem confirmação do paciente: mesmo bloco, um degrau mais
   leve — quando o paciente confirmar (e-mail hoje, WhatsApp amanhã) ele
   "acende". */
.agenda-bloco-agendado {
  background: var(--brilho-topo), color-mix(in srgb, var(--indigo-fundo) 55%, transparent);
  border-left-color: color-mix(in srgb, var(--indigo) 65%, transparent);
}
.agenda-bloco-agendado .agenda-bloco-titulo {
  font-weight: 500;
}

/* Via: tele com o azul da vaga de tele, presencial com o verde — as mesmas
   cores que o médico já aprendeu nas vagas e no booking. */
.agenda-bloco-tele:not(.agenda-bloco-concluido):not(.agenda-bloco-faltou):not(.agenda-bloco-cancelado) {
  border-left-color: #3b82f6;
}
.agenda-bloco-presencial:not(.agenda-bloco-concluido):not(.agenda-bloco-faltou):not(.agenda-bloco-cancelado) {
  border-left-color: #16a34a;
}
.agenda-bloco-via {
  margin-left: 4px;
  font-size: 0.9em;
  opacity: 0.85;
}
.agenda-bloco-minimo .agenda-bloco-via {
  display: none;
}

/* Vagas mais quietas: o contorno fica, a tinta baixa. O bloco de gente é o
   que tem que saltar da grade. */
.agenda-bloco-vaga {
  border-width: 1px;
  border-left-width: 3px;
  box-shadow: none;
  color: var(--tinta-fraca);
}
.agenda-bloco-vaga:hover {
  background: color-mix(in srgb, var(--indigo-fundo) 40%, transparent);
  color: var(--tinta);
}
.agenda-selo-vaga {
  background: color-mix(in srgb, var(--indigo-fundo) 60%, transparent);
  color: var(--tinta-fraca);
}

/* Bloqueio: cinza listrado, como o "fora do expediente" do Google Agenda. */
.agenda-bloco-bloqueado {
  border-left-color: var(--linha-forte);
  color: var(--tinta-media);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--linha) 55%, transparent) 0 6px,
    transparent 6px 12px
  ), var(--campo);
}

/* Blocos ganham um leve levantar no hover — junto da sombra que já existia. */
.agenda-bloco {
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.agenda-bloco:hover {
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .agenda-bloco:hover {
    transform: none;
  }
}

/* Pílula de situação — a mesma paleta na lista e no modal. */
.agenda-lista-status {
  flex: none;
  font-size: calc(10.5px * var(--escala-texto));
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  color: var(--tinta-media);
  background: var(--campo);
  white-space: nowrap;
}
.agenda-lista-status-confirmado,
.compromisso-status[data-status="confirmado"]::before {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
  background: color-mix(in srgb, var(--verde) 12%, transparent);
}
.agenda-lista-status-agendado,
.compromisso-status[data-status="agendado"]::before {
  color: var(--indigo);
  border-color: color-mix(in srgb, var(--indigo) 45%, transparent);
  background: color-mix(in srgb, var(--indigo) 12%, transparent);
}
.agenda-lista-status-pendente_pagamento,
.compromisso-status[data-status="pendente_pagamento"]::before {
  color: var(--ambar);
  border-color: color-mix(in srgb, var(--ambar) 50%, transparent);
  background: color-mix(in srgb, var(--ambar) 12%, transparent);
}
.agenda-lista-status-concluido,
.compromisso-status[data-status="concluido"]::before {
  color: var(--tinta-media);
  background: color-mix(in srgb, var(--tinta-fraca) 14%, transparent);
}
.agenda-lista-status-cancelado,
.compromisso-status[data-status="cancelado"]::before {
  color: var(--tinta-fraca);
  text-decoration: line-through;
}
.agenda-lista-status-faltou,
.agenda-lista-status-medico_ausente,
.compromisso-status[data-status="faltou"]::before,
.compromisso-status[data-status="medico_ausente"]::before {
  color: var(--vivo);
  border-color: color-mix(in srgb, var(--vivo) 45%, transparent);
  background: color-mix(in srgb, var(--vivo) 12%, transparent);
}
.agenda-lista-status-vaga {
  border-style: dashed;
}
/* O ponto do modal herda a COR da pílula equivalente (o `color` acima) e
   pinta-se com ela. */
.compromisso-status::before {
  background: currentColor;
}
.compromisso-status[data-status]::before {
  background: currentColor;
}
.compromisso-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--linha);
  background: var(--campo);
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
  width: fit-content;
  max-width: 100%;
}
.compromisso-status[data-status="confirmado"] {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 40%, transparent);
  background: color-mix(in srgb, var(--verde) 10%, transparent);
}
.compromisso-status[data-status="pendente_pagamento"] {
  color: var(--ambar);
  border-color: color-mix(in srgb, var(--ambar) 45%, transparent);
  background: color-mix(in srgb, var(--ambar) 10%, transparent);
}
.compromisso-status[data-status="faltou"] {
  color: var(--vivo);
  border-color: color-mix(in srgb, var(--vivo) 40%, transparent);
  background: color-mix(in srgb, var(--vivo) 10%, transparent);
}
.compromisso-status[data-status="cancelado"] {
  color: var(--tinta-fraca);
}
.compromisso-status::before {
  margin-right: 0;
}

/* Lista: via como glifo, linhas que levantam no hover, título do dia que
   fica preso no topo enquanto o médico rola a quinzena. */
.agenda-lista-item-via {
  flex: none;
  font-size: 0.95em;
  opacity: 0.85;
}
.agenda-lista-item {
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.agenda-lista-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}
.agenda-lista-item-cancelado {
  opacity: 0.55;
}
.agenda-lista-item-cancelado .agenda-lista-item-titulo {
  text-decoration: line-through;
}
.agenda-lista-item-vagas:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--indigo);
}
.agenda-lista-grupo-titulo {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 0;
  background: color-mix(in srgb, var(--painel) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mês: fim de semana mais quieto, hoje com o fundo levemente marcado, itens
   que reagem ao mouse. As sete primeiras células são o cabeçalho, então o
   domingo é a 8ª (7n+1) e o sábado a 14ª (7n). */
.agenda-mes-dia:nth-child(7n + 1),
.agenda-mes-dia:nth-child(7n) {
  background: color-mix(in srgb, var(--painel) 70%, var(--campo));
}
.agenda-mes-dia-hoje {
  background: color-mix(in srgb, var(--indigo-fundo) 30%, var(--painel));
}
.agenda-mes-item {
  transition: transform 0.12s ease, filter 0.12s ease;
}
.agenda-mes-item:hover {
  transform: translateX(1px);
  filter: brightness(1.08);
}
.agenda-mes-densidade {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
  .agenda-lista-item:hover,
  .agenda-mes-item:hover {
    transform: none;
  }
}

/* Toolbar de vagas */
.agenda-toolbar-vagas {
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: var(--brilho-topo), var(--painel);
  box-shadow: var(--elev-1), inset 0 1px 0 var(--vidro-borda);
}
.botao-vaga {
  border-style: dashed;
  border-width: 1.5px;
}
/* A via fica na BORDA e num véu de fundo, com o azul e o verde das vagas na
   grade; o rótulo segue a tinta do tema. O #3b82f6 como texto dava 3,5:1 no
   claro, que virou o padrão em 21/09/2026. */
.botao-vaga-tele.ativo {
  border-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 12%, var(--painel));
  border-style: solid;
}
.botao-vaga-presencial.ativo {
  border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--painel));
  border-style: solid;
}
.agenda-toggle-vagas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  cursor: pointer;
}
.agenda-modo-vaga-aviso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo);
  color: var(--tinta);
  font-size: calc(13px * var(--escala-texto));
}
.agenda-modo-vaga-aviso[hidden] {
  display: none;
}
.agenda-modo-vaga-aviso span {
  flex: 1;
}

/* A faixa da janela aberta de dentro da consulta (21/09/2026): "Marcando
   para Ana — escolha uma vaga ou um horário". Mesma família da faixa do modo
   vaga (índigo = um modo em que a grade está), e verde depois de marcado,
   para o "Retorno marcado para…" ler como feito e não como pendente. */
.agenda-janela-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo);
  color: var(--tinta);
  font-size: calc(13px * var(--escala-texto));
  animation: entrada 0.22s ease;
}
.agenda-janela-faixa[hidden] {
  display: none;
}
.agenda-janela-faixa-texto {
  flex: 1 1 240px;
  font-weight: 600;
}
.agenda-janela-faixa[data-estado="marcado"] {
  background: color-mix(in srgb, var(--verde) 12%, var(--painel));
  border-color: var(--verde);
}
@media (prefers-reduced-motion: reduce) {
  .agenda-janela-faixa {
    animation: none;
  }
}
.agenda-vaga-duracao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
}
.agenda-vaga-duracao select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--linha-forte);
  background: var(--painel);
  color: var(--tinta);
  font-size: calc(12px * var(--escala-texto));
}

/* Configurações da agenda */
.agenda-config-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 18px;
}
.agenda-config-grade label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}
.agenda-config-especialidades {
  margin-bottom: 8px;
}
.agenda-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.agenda-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo);
  color: var(--tinta);
  font-size: calc(12px * var(--escala-texto));
}
.agenda-chip button {
  border: none;
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.agenda-chip button:hover {
  color: var(--tinta);
}
.agenda-chip-add {
  display: flex;
  gap: 8px;
}
.agenda-chip-add input {
  flex: 1;
}
@media (max-width: 560px) {
  .agenda-config-grade {
    grid-template-columns: 1fr;
  }
}
.compromisso-recorrencia-rotulo {
  display: block;
}

/* Fase E: Resumo da agenda — estatísticas (ocupação/no-show/receita/pico) */
.resumo-agenda-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 14px;
}
.resumo-agenda-stat {
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: 10px;
  padding: 10px 12px;
}
.resumo-agenda-stat-val {
  font-size: calc(20px * var(--escala-texto));
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.resumo-agenda-stat-rot {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  margin-top: 2px;
}
.resumo-agenda-stat-sub {
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-top: 2px;
}
.resumo-agenda-pico {
  grid-column: 1 / -1;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  padding: 8px 12px;
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo);
  border-radius: 10px;
}

/* G5: Resumo da agenda (feed) */
.resumo-agenda-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px 0 14px;
}
.resumo-agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--linha);
}
.resumo-agenda-item:last-child {
  border-bottom: none;
}
.resumo-agenda-icone {
  font-size: 16px;
  line-height: 1.3;
  flex: 0 0 auto;
}
.resumo-agenda-corpo {
  flex: 1;
  min-width: 0;
}
.resumo-agenda-desc {
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}
.resumo-agenda-tempo {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-top: 1px;
}

/* G2: marcar paciente na vaga / ações da consulta marcada */
.compromisso-vaga-marcar,
.compromisso-marcado-acoes {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--linha-forte);
  background: var(--painel);
}
.compromisso-vaga-marcar-cabecalho {
  font-weight: 600;
  font-size: calc(13px * var(--escala-texto));
  margin-bottom: 8px;
}
.compromisso-vaga-marcar-modo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}
.compromisso-vaga-marcar-modo label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.compromisso-marcado-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Desfecho da consulta que já passou (R1): estado, aviso do relato do
   paciente e os três botões — o ativo é o desfecho registrado. */
.compromisso-desfecho {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--indigo) 6%, transparent);
}
.compromisso-desfecho-estado {
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  margin-bottom: 10px;
}
.compromisso-desfecho-relato {
  margin-bottom: 10px;
}
.compromisso-desfecho .botao-ativo {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}
.compromisso-desfecho .botao-texto {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-media);
  text-decoration: underline;
}
/* A faixa "N consultas sem desfecho" no painel, logo abaixo dos KPIs. */
.sem-desfecho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 10px 0 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--vivo) 40%, transparent);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--vivo) 8%, transparent);
  animation: entrada 0.25s ease-out;
}
.sem-desfecho-texto {
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
}
.sem-desfecho-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.compromisso-vaga-picker {
  margin-top: 12px;
}
.compromisso-vaga-picker-titulo {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  margin-bottom: 6px;
}
.compromisso-vaga-picker-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.compromisso-vaga-opcao {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--linha-forte);
  background: var(--fundo);
  color: var(--tinta);
  cursor: pointer;
  font-size: calc(12px * var(--escala-texto));
}
.compromisso-vaga-opcao:hover {
  border-color: var(--indigo);
  background: var(--indigo-fundo);
}

/* Grade horária (template) */
.modal-caixa-larga {
  max-width: 780px;
  width: 96vw;
}
.grade-cabecalho,
.grade-linha {
  display: grid;
  /* Início/Fim com folga: em navegador en-US o campo de hora mostra "AM/PM" e
     a coluna antiga cortava o sufixo ("02:00 I"). */
  grid-template-columns: 1fr 1.1fr 1fr 1fr 0.6fr 1.2fr 0.8fr auto;
  gap: 6px;
  align-items: center;
}
.grade-cabecalho {
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-media);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0 4px;
}
.grade-linha {
  margin-bottom: 6px;
}
.grade-linha select,
.grade-linha input {
  width: 100%;
  min-width: 0;
}
#grade-linhas {
  max-height: 46vh;
  overflow-y: auto;
}
.grade-gerar-linha {
  margin: 14px 0 4px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
}
.grade-gerar-linha input {
  width: 64px;
  margin: 0 4px;
}
.grade-remover {
  padding: 2px 9px;
  line-height: 1;
}

/* Paciente pronto/aguardando numa teleconsulta (Chunk 2 do redesenho da sala) */
.agenda-bloco-pronto {
  outline: 2px solid #16a34a;
  outline-offset: -1px;
  animation: bloco-pronto-pisca 1.4s ease-in-out infinite;
}
@keyframes bloco-pronto-pisca {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0);
  }
}
.popup-tele-agenda {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 2000;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: var(--painel);
  border: 1px solid #16a34a;
  border-radius: var(--raio);
  box-shadow: 0 14px 36px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: popup-tele-entra 0.25s ease;
}
.popup-tele-agenda[hidden] {
  display: none;
}
@keyframes popup-tele-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-bloco-pronto,
  .popup-tele-agenda {
    animation: none;
  }
}
.popup-tele-topo {
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--verde);
  border-bottom: 1px solid var(--tinta-fraca);
  letter-spacing: 0.02em;
}
.popup-tele-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}
.popup-tele-item + .popup-tele-item {
  border-top: 1px solid var(--tinta-fraca);
}
.popup-tele-item.pronto {
  background: rgba(22, 163, 74, 0.08);
}
.popup-tele-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.popup-tele-info strong {
  font-size: 13.5px;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-tele-info span {
  font-size: 12px;
  color: var(--tinta-media);
}
.popup-tele-abrir {
  flex: 0 0 auto;
}

.agenda-bloco-bloqueado {
  border-left-color: var(--tinta-fraca);
  background: var(--campo);
}

/* --- Resumo do compromisso (passar o mouse ou focar) ---------------------- */
/*
 * Vive preso ao `body`, não dentro do bloco: `.agenda-grid-wrap` tem
 * `overflow: auto` e recortaria o balão exatamente na borda da grade, que é
 * onde ele mais precisa aparecer. `fixed` + `pointer-events: none` também
 * garante que ele nunca roube o clique do bloco por baixo.
 *
 * Vidro aqui é o caso legítimo — flutua sobre a grade e o texto é curto.
 */
.agenda-resumo {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  width: max-content;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--vidro-fundo);
  backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(1.4);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-3);
  color: var(--tinta);
  animation: entrada 0.14s ease-out;
}

.agenda-resumo-titulo {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(14px * var(--escala-texto));
  font-weight: 600;
  line-height: 1.3;
  /* O nome pode ser longo — quebra em vez de esticar o balão. */
  overflow-wrap: break-word;
}

.agenda-resumo-sub {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  margin-top: 1px;
  overflow-wrap: break-word;
}

/* Grade de duas colunas: rótulo à esquerda, valor à direita, alinhados entre
   linhas. `dl` porque é literalmente uma lista de definições — o leitor de
   tela anuncia o par, e não duas frases soltas. */
.agenda-resumo-lista {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  margin: 10px 0 0;
  font-size: calc(12px * var(--escala-texto));
  line-height: 1.45;
}

.agenda-resumo-lista dt {
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.agenda-resumo-lista dd {
  margin: 0;
  color: var(--tinta);
  overflow-wrap: break-word;
  min-width: 0;
}

.agenda-resumo-dica {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
}

@media (prefers-reduced-motion: reduce) {
  .agenda-resumo {
    animation: none;
  }
}

/* --------------------------------------------------- visão Mês */

.agenda-mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.agenda-mes-cabecalho {
  background: var(--painel);
  padding: 8px 4px;
  text-align: center;
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.agenda-mes-dia {
  background: var(--painel);
  min-height: 100px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.agenda-mes-dia:hover {
  background: var(--campo);
}

.agenda-mes-dia-fora-do-mes {
  opacity: 0.4;
}

.agenda-mes-dia-numero {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  align-self: flex-end;
}

.agenda-mes-dia-hoje .agenda-mes-dia-numero {
  color: #fff;
  background: var(--gradiente-botao);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.agenda-mes-item {
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--indigo-fundo);
  border-left: 2px solid var(--indigo);
  border-radius: var(--raio);
  cursor: pointer;
  padding: 1px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-mes-item-mais {
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* A linha "N vagas livres" do mês: mais fraca que um compromisso marcado, e
   tracejada como os blocos de vaga na grade — é espaço, não gente. */
.agenda-mes-item-vagas {
  background: transparent;
  border-left: 2px dashed var(--linha-forte);
  color: var(--tinta-fraca);
}

/* Contagem de marcados por dia: só o celular mostra (abaixo). */
.agenda-mes-contagem {
  display: none;
}

/* Botões que só existem no celular. */
.agenda-so-celular {
  display: none;
}

.agenda-lista-item-vagas {
  border-left-style: dashed;
  border-left-color: var(--linha-forte);
  color: var(--tinta-fraca);
}

/* iCal dentro do modal do Google Agenda. */
.agenda-ical {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.agenda-ical-titulo {
  font-weight: 600;
  font-size: calc(13.5px * var(--escala-texto));
  margin-bottom: 4px;
}
.agenda-ical .teleconsulta-link-caixa {
  margin-top: 8px;
}

/* Código do widget na central de teleconsulta. */
.teleconsulta-widget-codigo {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Consolas, "Courier New", monospace;
  font-size: calc(11.5px * var(--escala-texto));
  line-height: 1.45;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
  resize: vertical;
}

/* OS NÚMEROS DA AGENDA NO PAINEL (redesenho de 21/09/2026). Mesma forma em
   todos: rótulo com ícone em cima, o número grande, o detalhe embaixo. A cor
   só aparece quando pede ação (atenção = âmbar, ruim = vermelho), sempre pelo
   token do tema; não há "bom" verde (ver `preencherNumero` em painel.js). */
.resumo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.resumo-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 13px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--brilho-topo), var(--painel);
  box-shadow: var(--elev-1);
  min-width: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  animation: entrada 0.25s ease-out backwards;
}
.resumo-kpi:hover {
  border-color: var(--linha-forte);
  box-shadow: var(--elev-2);
}
.resumo-kpi-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.resumo-kpi-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--indigo);
  background: var(--indigo-fundo);
}
.resumo-kpi-icone svg {
  width: 15px;
  height: 15px;
}
/* O rótulo QUEBRA LINHA (21/09/2026). O redesenho o pôs numa linha só, com
   reticências; ao lado do ícone, num celular de 375 px sobravam ~91 px e saíam
   "Receita previs…" e "Ocupação · 30 di…" — some justamente o período, que o
   detalhe não repete — e a 1366–1920 px o da IA e o da receita também eram
   cortados. `overflow-wrap` só entra para a palavra que sozinha não cabe
   (texto "maior" no celular): quebrar no meio é feio, estourar o cartão é pior.
   `min-width: 0` deixa o rótulo encolher ao lado do ícone. */
.resumo-kpi-rotulo {
  min-width: 0;
  font-size: calc(12px * var(--escala-texto));
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta-media);
  overflow-wrap: anywhere;
}
.resumo-kpi-valor {
  font-size: calc(26px * var(--escala-texto));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.resumo-kpi-detalhe {
  font-size: calc(11.5px * var(--escala-texto));
  line-height: 1.45;
  color: var(--tinta-fraca);
}
.resumo-kpi-detalhe a {
  color: var(--indigo);
  font-weight: 500;
}
.resumo-kpi-atencao {
  border-color: var(--ambar-linha);
}
.resumo-kpi-atencao .resumo-kpi-icone {
  color: var(--ambar);
  background: var(--ambar-fundo);
}
.resumo-kpi-ruim {
  border-color: var(--vivo-linha);
}
.resumo-kpi-ruim .resumo-kpi-icone {
  color: var(--vivo);
  background: var(--vivo-fundo);
}
.resumo-kpi-ruim .resumo-kpi-valor {
  color: var(--vivo);
}
@media (max-width: 640px) {
  .resumo-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .resumo-kpi {
    padding: 11px 12px;
  }
  .resumo-kpi-valor {
    font-size: calc(22px * var(--escala-texto));
  }
}
@media (prefers-reduced-motion: reduce) {
  .resumo-kpi {
    transition: none;
    animation: none;
  }
}

/* Situação do compromisso no modal ("Confirmado · agendamento público"). */
.compromisso-status {
  margin: -6px 0 12px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.compromisso-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--indigo);
}

/* Categoria não clínica (bloqueado, trabalho…): os campos de consulta somem. */
.compromisso-sem-consulta .campo-linha-consulta,
.compromisso-sem-consulta #compromisso-paciente-grupo {
  display: none;
}

/* `.modal-caixa label` empilha rótulo e campo em coluna; este é um checkbox
   com texto ao lado — precisa vencer aquela regra (mesma especificidade + a
   classe). Sem isto o quadradinho saía centralizado em cima do texto. */
.modal-caixa label.compromisso-dia-inteiro {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: -4px 0 10px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  cursor: pointer;
}

/* A linha de ações do modal do compromisso fica presa ao rodapé enquanto o
   conteúdo rola: com status, categoria, via, paciente e detalhes o modal passa
   de 86vh numa tela comum e o "Salvar" sumia lá embaixo. */
#modal-compromisso .modal-caixa > .modal-acoes:last-child {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  margin: 4px -22px -20px;
  padding: 12px 22px 16px;
  background: var(--brilho-topo), var(--painel);
  border-top: 1px solid var(--linha);
  flex-wrap: wrap;
}

/* O modal do compromisso é o mais cheio do painel (pílula, categoria, via,
   valor, paciente, ações): 560 px em vez dos 480 dos outros — as cinco ações
   cabem numa linha e os pares de campos respiram. No celular continua 100%. */
#modal-compromisso .modal-caixa {
  width: min(560px, 100%);
}

/* Linhas da lista são <button>, que centraliza texto por padrão — o título
   ficava no meio de uma linha larga, longe da hora. Alinhado à esquerda,
   como toda agenda em lista (Google, Outlook). */
.agenda-lista-item {
  text-align: left;
}

/* Botão "Enviar pelo WhatsApp" na lista de documentos da consulta. */
.botao-whatsapp {
  border-color: color-mix(in srgb, #25d366 55%, var(--linha));
  color: var(--verde);
}
.botao-whatsapp:hover {
  background: color-mix(in srgb, #25d366 12%, transparent);
  border-color: #25d366;
}

/* Avisos ao paciente (modal): uma linha por mensagem, canal · o quê · estado. */
.compromisso-avisos {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  padding: 10px 12px;
  margin: -4px 0 4px;
}
/* Compacto de propósito: mora entre a situação e o formulário, então até
   cinco linhas ficam à vista e o resto rola dentro da caixa — o formulário
   não desce por causa de um paciente com muitos avisos. */
.compromisso-avisos-lista {
  max-height: 128px;
  overflow-y: auto;
  padding-right: 2px;
}
.compromisso-avisos-titulo {
  font-family: inherit;
  font-size: calc(10.5px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
  margin-bottom: 6px;
}
.compromisso-avisos-lista {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compromisso-aviso {
  display: grid;
  /* minmax(0, 1fr): é o TEXTO que encolhe (com reticências) quando falta
     espaço — o estado ("lido 10/09, 16:14") tem que aparecer inteiro. Com
     `1fr auto` + max-width em % na coluna auto, o estado é que era cortado. */
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.compromisso-aviso-canal {
  font-size: 0.9em;
}
.compromisso-aviso-texto {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compromisso-aviso-quando {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Só o erro longo da Meta ("falhou — Meta 131026: …") passa disto. */
  max-width: 34ch;
}
.compromisso-aviso-enviado .compromisso-aviso-quando {
  color: var(--verde);
}
.compromisso-aviso-falhou .compromisso-aviso-quando {
  color: var(--vivo);
}
.compromisso-aviso-cancelado {
  opacity: 0.55;
  text-decoration: line-through;
}
.compromisso-aviso-evento .compromisso-aviso-texto {
  color: var(--tinta);
  font-weight: 600;
}

/* "O paciente me autorizou a avisar pelo WhatsApp" — checkbox com texto ao lado
   (vence o `.modal-caixa label` em coluna), verde do WhatsApp só no acento. */
.modal-caixa label.compromisso-autoriza-whatsapp {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  margin: 2px 0 10px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  line-height: 1.4;
  cursor: pointer;
}
.modal-caixa label.compromisso-autoriza-whatsapp input {
  margin-top: 2px;
  accent-color: #25d366;
}

/* Botões nas caixas de link nunca quebram em duas linhas ("Gerar / novo"). */
.teleconsulta-link-caixa .botao {
  flex: none;
  white-space: nowrap;
}
.compromisso-dia-inteiro input {
  accent-color: var(--indigo-solido);
}

/* ------------------------------------------------ agenda no celular
   Medido em 390×844 (testes/agenda-celular.mjs), 2026-09-10: a barra de
   ferramentas empilhava ~1,7 telas antes da grade, o mês desenhava 7 colunas
   numa largura que cabe 3,5, e o chat flutuante cobria a base da tela. */
@media (max-width: 640px) {
  /* Ações do topo: uma linha rolável, só ícones (o rótulo fica no title). */
  .agenda-pagina .bloco-topo {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  .agenda-pagina .bloco-topo-acoes {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .agenda-pagina .bloco-topo-acoes::-webkit-scrollbar {
    display: none;
  }
  .agenda-pagina .bloco-topo-acoes .botao {
    flex: none;
  }
  .agenda-pagina .bloco-topo-acoes .botao-icone > span:not(.fila-bolinha) {
    display: none;
  }
  .agenda-pagina .bloco-topo-acoes .botao-icone {
    padding: 8px 10px;
  }

  /* A dica fala em "clique e arraste" — no celular o gesto é outro. */
  .agenda-pagina .agenda-arraste-aviso {
    display: none;
  }

  .agenda-toolbar {
    gap: 6px;
    margin-bottom: 10px;
  }
  .agenda-toolbar-grupo-opcoes,
  .agenda-toolbar-vagas {
    display: none;
  }
  .agenda-toolbar.agenda-mais-aberto .agenda-toolbar-grupo-opcoes,
  .agenda-toolbar.agenda-mais-aberto .agenda-toolbar-vagas {
    display: flex;
  }
  .agenda-so-celular {
    display: inline-flex;
  }
  .agenda-nav-data {
    min-width: 0;
    font-size: calc(13.5px * var(--escala-texto));
  }

  /* Mês: 7 colunas de verdade, número em vez de texto. */
  .agenda-mes-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .agenda-mes-cabecalho {
    font-size: calc(9.5px * var(--escala-texto));
    padding: 6px 0;
  }
  .agenda-mes-dia {
    min-height: 60px;
    min-width: 0;
    padding: 4px 3px;
    gap: 2px;
  }
  .agenda-mes-item,
  .agenda-mes-item-mais {
    display: none;
  }
  .agenda-mes-contagem {
    display: block;
    font-size: calc(11px * var(--escala-texto));
    font-weight: 600;
    color: var(--indigo);
  }

  /* Chat flutuante fechado vira um botão; aberto, a caixa de sempre. */
  .chat-flutuante:not(.chat-flutuante-aberto) {
    width: auto;
    right: 14px;
    bottom: 14px;
    border-radius: var(--raio-pilula, 999px);
  }
  /* Mensagens também somem: com `max-height: 0` elas ainda ditam a LARGURA
     (o texto de boas-vindas esticava o "botão" até a borda esquerda). */
  .chat-flutuante:not(.chat-flutuante-aberto) .chat-flutuante-form,
  .chat-flutuante:not(.chat-flutuante-aberto) .chat-flutuante-mensagens {
    display: none;
  }
  .chat-flutuante:not(.chat-flutuante-aberto) .chat-flutuante-topo {
    border-bottom: none;
    padding: 10px 14px;
  }
  .chat-flutuante:not(.chat-flutuante-aberto) .chat-flutuante-seta {
    display: none;
  }
}

/* --------------------------------------------------- visão Lista */

.agenda-lista-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.agenda-lista-grupo-titulo {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-fraca);
}

.agenda-lista-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--indigo);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.agenda-lista-item:hover {
  border-color: var(--linha-forte);
  background: var(--campo);
}

.agenda-lista-item-hora {
  font-family: inherit;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  min-width: 11ch;
}

.agenda-lista-item-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Estado vazio da visão Lista — com SAÍDA.
   Era um `<p class="vazio">` solto: dizia o que não tem e não dizia o que
   fazer. O vazio aqui quase sempre tem a mesma causa (ainda não há vagas
   abertas), então cabe oferecer a ação que resolve, em vez de deixar o médico
   procurar qual dos onze botões da barra é o certo. */
.agenda-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 24px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-cartao);
  background: var(--brilho-topo), var(--painel);
  box-shadow: inset 0 1px 0 var(--vidro-borda);
}

.agenda-vazio-titulo {
  margin: 0;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-size: calc(15px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}

.agenda-vazio-texto {
  margin: 0;
  max-width: 46ch;
  font-size: calc(13px * var(--escala-texto));
  line-height: 1.5;
  color: var(--tinta-fraca);
}

.agenda-vazio-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

/* --------------------------------------------------- modal de compromisso */

.categoria-pilulas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.categoria-pilula {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.categoria-pilula:has(input:checked) {
  background: var(--indigo-fundo);
  border-color: var(--indigo);
  color: var(--indigo);
}

.categoria-pilula input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.campo-datahora-linha {
  display: flex;
  gap: 10px;
}

.campo-datahora-linha label {
  flex: 1 1 0;
}

.compromisso-paciente-selecionado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
  font-size: calc(13px * var(--escala-texto));
}

.compromisso-paciente-link {
  color: var(--indigo);
  text-decoration: none;
  font-weight: 600;
}

.compromisso-paciente-link:hover,
.compromisso-paciente-link:focus-visible {
  text-decoration: underline;
}

.compromisso-detalhes-opcionais {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 4px 12px;
}

.compromisso-detalhes-opcionais > summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compromisso-detalhes-opcionais[open] > summary {
  border-bottom: 1px solid var(--linha);
  margin-bottom: 10px;
}

.compromisso-recorrencia-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.compromisso-modal-acoes-extra {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
}

/* --------------------------------------------------- modal financeiro/donut */

.agenda-financeiro-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* Donut só com CSS (conic-gradient) — sem canvas nem biblioteca, mesmo
   espírito "sem dependência supérflua" já seguido em gestao.js. */
.agenda-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 4px auto;
}

.agenda-donut-legenda {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.agenda-donut-legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}

.agenda-donut-legenda-cor {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

/* --------------------------------------------------- resumo Hoje/Amanhã (index.html) */

/* Horizontal, acima dos módulos — pedido explícito: o médico vê o dia e o
   dia seguinte de cara ao abrir o painel, sem precisar entrar na Agenda. */
.resumo-dias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .resumo-dias {
    grid-template-columns: 1fr;
  }
}

.resumo-dia-cartao {
  background: var(--brilho-topo), var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--elev-1), inset 0 1px 0 var(--vidro-borda);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Acento indigo só no card de "Hoje" — diferencia os dois cartões à
   primeira vista, sem precisar ler o título. */
.resumo-dia-cartao-hoje {
  border-left-color: var(--indigo-solido);
}

.resumo-dia-cabecalho {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
}

/* Título e data por extenso, empilhados à esquerda; o resto vai para a direita. */
.resumo-dia-titulos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-right: auto;
  min-width: 0;
}

.resumo-dia-titulo {
  font-family: inherit;
  font-size: calc(15px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta);
}

.resumo-dia-data {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* "3 compromissos · 2 vagas livres" — o dia num relance, antes da lista. */
.resumo-dia-contagem {
  font-size: calc(11.5px * var(--escala-texto));
  font-weight: 500;
  color: var(--indigo);
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo-linha);
  border-radius: var(--raio-pilula);
  padding: 2px 10px;
  white-space: nowrap;
}

.resumo-dia-lista {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.resumo-dia-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--raio);
  transition: background 0.18s ease;
}

.resumo-dia-item:hover {
  background: var(--campo);
}

/* Pill de horário — antes era só texto monoespaçado solto; agora é um badge
   com fundo/borda, mesma família visual de .cartao-etiqueta. */
.resumo-dia-item-hora {
  font-family: inherit;
  font-size: calc(11px * var(--escala-texto));
  color: var(--indigo);
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo-linha);
  border-radius: var(--raio);
  padding: 2px 6px;
  min-width: 5ch;
  text-align: center;
  flex: 0 0 auto;
}

.resumo-dia-item-ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--linha-forte);
  flex: 0 0 auto;
}

.resumo-dia-item-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O VAZIO: diz de que dia é e leva à agenda. Serve também para o <p> de
   erro ("Falha de conexão."), que usa a mesma classe. */
.resumo-dia-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 18px 8px 10px;
  text-align: center;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}

.resumo-dia-vazio-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--tinta-fraca);
  background: var(--campo);
  border: 1px solid var(--linha);
}

.resumo-dia-vazio-icone svg {
  width: 18px;
  height: 18px;
}

.resumo-dia-vazio-link {
  font-size: calc(12.5px * var(--escala-texto));
  font-weight: 500;
  color: var(--indigo);
  text-decoration: none;
}

.resumo-dia-vazio-link:hover {
  text-decoration: underline;
}

.resumo-dia-mais {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  padding: 2px 8px;
}

/* ---------------------------------------------------------------- teleconsulta.html */

.teleconsulta-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* O da lista de espera é um <ul>: sem o recuo e a bolinha do navegador. */
  list-style: none;
  margin: 0;
  padding: 0;
}

.teleconsulta-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(13.5px * var(--escala-texto));
  padding: 8px 4px;
}

.teleconsulta-checklist-icone {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teleconsulta-checklist-icone svg {
  width: 12px;
  height: 12px;
}

.teleconsulta-checklist-ok .teleconsulta-checklist-icone {
  background: color-mix(in srgb, var(--verde) 15%, transparent);
  color: var(--verde);
}

.teleconsulta-checklist-falta .teleconsulta-checklist-icone {
  background: var(--campo);
  color: var(--tinta-fraca);
  border: 1px solid var(--linha-forte);
}

.teleconsulta-checklist-falta {
  color: var(--tinta-fraca);
}

.teleconsulta-status-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 18px 20px;
}

.teleconsulta-status-selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: calc(13px * var(--escala-texto));
  font-weight: 600;
}

.teleconsulta-status-selo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.teleconsulta-status-ativo::before {
  background: #7ee0a8;
}

.teleconsulta-status-inativo::before {
  background: var(--tinta-fraca);
}

.teleconsulta-link-caixa {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 10px 12px;
}
.teleconsulta-link-grupo {
  margin-bottom: 14px;
}
.teleconsulta-codigo-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.teleconsulta-codigo-rodape span {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.teleconsulta-codigo-vazio {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  margin: 0;
  padding: 10px 12px;
  background: var(--campo);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
}
.teleconsulta-link-rotulo {
  font-size: calc(12.5px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta-media);
  margin-bottom: 5px;
}
.teleconsulta-link-dica {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin: 5px 0 0;
}

.teleconsulta-link-texto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--indigo);
}

.teleconsulta-grade-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 820px) {
  .teleconsulta-grade-dupla {
    grid-template-columns: 1fr;
  }
}

.teleconsulta-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
}

.teleconsulta-qr canvas {
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

/* Preview do cartão público — paleta do painel (não a de landing.css/public),
   mesmo conteúdo que o médico veria em public/agendar.html. */
.teleconsulta-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  padding: 18px;
  max-width: 300px;
}

.teleconsulta-preview-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.teleconsulta-preview-foto {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--painel);
}

.teleconsulta-preview-nome {
  font-size: calc(14.5px * var(--escala-texto));
  font-weight: 600;
}

.teleconsulta-preview-especialidade {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

.teleconsulta-preview-preco {
  font-family: inherit;
  font-size: calc(15px * var(--escala-texto));
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--linha-forte);
}

.teleconsulta-resumo-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

/* Mesmo reset de app/styles.css — faltava aqui. Respeita a preferência de
   "reduzir movimento" do sistema/navegador, desligando toda animação e
   transição do painel (não só as novas — as de hover/foco também). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Modal "Agendar retorno" (Gestão) */
.retorno-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
}
.retorno-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--tinta-fraca);
}
.retorno-campo input {
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
  min-height: 38px;
}
.retorno-erro {
  color: var(--vivo);
  font-size: 13px;
  margin: 8px 0 0;
}
.gestao-lista-item .botao-retorno {
  margin-left: 10px;
  font-size: 12px;
  padding: 5px 11px;
  white-space: nowrap;
}
.teleconsulta-qr-img {
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* --- Modelos de documento (editor de papel timbrado) ---------------------- */
.modelo-instrucoes {
  background: var(--indigo-fundo);
  border: 1px solid var(--indigo-linha);
  border-radius: var(--raio);
  padding: 14px 16px 14px 18px;
  margin: 4px 0 16px;
}
.modelo-instrucoes-titulo {
  display: block;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 8px;
  font-size: calc(14px * var(--escala-texto));
}
.modelo-instrucoes ol {
  margin: 0;
  padding-left: 20px;
  color: var(--tinta-media);
  font-size: calc(13.5px * var(--escala-texto));
  line-height: 1.55;
}
.modelo-instrucoes li { margin-bottom: 3px; }

.modelo-abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.modelo-aba {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tinta-fraca);
  padding: 8px 14px;
  font-size: calc(14px * var(--escala-texto));
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--raio) var(--raio) 0 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.modelo-aba:hover { color: var(--tinta); background: var(--campo); }
.modelo-aba.ativa { color: var(--indigo); border-bottom-color: var(--indigo); }

.modelo-carregando { color: var(--tinta-fraca); }

.modelo-vazio {
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--raio);
  padding: 34px 20px;
  text-align: center;
  color: var(--tinta-media);
}
.modelo-vazio-icone { color: var(--tinta-fraca); margin-bottom: 6px; }
.modelo-vazio-icone svg { width: 42px; height: 42px; }
.modelo-vazio p { margin: 6px 0 14px; }
.modelo-upload-botao { cursor: pointer; display: inline-flex; }

.modelo-paleta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.modelo-paleta-rotulo { color: var(--tinta-fraca); font-size: calc(13px * var(--escala-texto)); }
.modelo-campo-btn {
  appearance: none;
  border: 1px solid var(--linha-forte);
  background: var(--campo);
  color: var(--tinta);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: calc(13px * var(--escala-texto));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.modelo-campo-btn::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--cor-campo, var(--indigo));
}
.modelo-campo-btn:hover:not(:disabled) { border-color: var(--indigo); }
.modelo-campo-btn:disabled { opacity: 0.4; cursor: default; }
.modelo-campo-btn[data-campo="paciente"] { --cor-campo: #4c8dff; }
.modelo-campo-btn[data-campo="corpo"] { --cor-campo: #37b98a; }
.modelo-campo-btn[data-campo="data"] { --cor-campo: #e0a13c; }
.modelo-campo-btn[data-campo="cidade"] { --cor-campo: #b06fe0; }
.modelo-campo-btn[data-campo="qr"] { --cor-campo: #ff6b5e; }

.modelo-tela-envolt { overflow-x: auto; }
.modelo-tela {
  position: relative;
  margin: 0 auto;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--linha);
  line-height: 0;
}
.modelo-tela canvas { display: block; }
.modelo-camada {
  position: absolute;
  inset: 0;
  line-height: normal;
}

.modelo-caixa {
  --cor-caixa: #4c8dff;
  position: absolute;
  border: 2px solid var(--cor-caixa);
  background: color-mix(in srgb, var(--cor-caixa) 16%, transparent);
  border-radius: 3px;
  cursor: move;
  box-sizing: border-box;
  min-width: 12px;
  min-height: 10px;
  touch-action: none;
}
.modelo-caixa.arrastando { opacity: 0.9; }
.modelo-caixa[data-campo="paciente"] { --cor-caixa: #4c8dff; }
.modelo-caixa[data-campo="corpo"] { --cor-caixa: #37b98a; }
.modelo-caixa[data-campo="data"] { --cor-caixa: #e0a13c; }
.modelo-caixa[data-campo="cidade"] { --cor-caixa: #b06fe0; }
.modelo-caixa[data-campo="qr"] { --cor-caixa: #ff6b5e; }
.modelo-caixa-rotulo {
  position: absolute;
  top: -9px;
  left: 6px;
  background: var(--cor-caixa);
  /* Tinta escura, e não branco: as cores de campo são claras e o branco dava
     de 2,25:1 (data) a 3,39:1 (cidade) num rótulo de 10 px; a escura dá de
     5,5 a 8,3 (21/09/2026). A caixa se desenha sobre o timbre, não sobre o
     tema: a cor é fixa de propósito. */
  color: #0b1220;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.modelo-caixa-x {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--vivo-solido);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.modelo-caixa-alca {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 13px;
  height: 13px;
  background: var(--cor-caixa, var(--indigo));
  border: 2px solid var(--painel);
  border-radius: 3px;
  cursor: nwse-resize;
  touch-action: none;
}

.modelo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.modelo-acoes-espaco { flex: 1; }
.modelo-btn-remover { color: var(--vivo); }
.modelo-status { font-size: calc(13px * var(--escala-texto)); color: var(--tinta-fraca); }
.modelo-status-aviso { color: var(--ambar); }
.modelo-erro {
  margin-top: 10px;
  color: var(--vivo);
  font-size: calc(13px * var(--escala-texto));
}

@media (max-width: 560px) {
  .modelo-acoes-espaco { flex-basis: 100%; }
  .modelo-acoes { gap: 6px; }
}

/* --- Painel do administrador --------------------------------------------- */
.admin-aviso {
  background: var(--ambar-fundo, var(--indigo-fundo));
  border: 1px solid var(--ambar-linha, var(--indigo-linha));
  border-radius: var(--raio);
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.admin-aviso strong { color: var(--tinta); }

.admin-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.admin-tile {
  background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.admin-tile-valor { font-size: calc(28px * var(--escala-texto)); font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }
.admin-tile-rotulo { font-size: calc(12px * var(--escala-texto)); color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: 0.05em; }

.admin-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 8px 0 14px; flex-wrap: wrap; }
.admin-aba {
  appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--tinta-fraca); padding: 8px 14px; font-size: calc(14px * var(--escala-texto));
  font-weight: 500; cursor: pointer;
}
.admin-aba:hover { color: var(--tinta); }
.admin-aba.ativa { color: var(--indigo); border-bottom-color: var(--indigo); }

.admin-verif-item {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px; border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 10px; background: var(--campo);
}
.admin-verif-info { display: flex; flex-direction: column; gap: 3px; }
.admin-verif-crm { color: var(--tinta-media); font-size: calc(13px * var(--escala-texto)); }
.admin-verif-data, .admin-verif-obs { color: var(--tinta-fraca); font-size: calc(12.5px * var(--escala-texto)); }
.admin-verif-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.admin-busca { display: block; margin-bottom: 12px; }
.admin-busca input { width: 100%; }

.admin-tabela-envolt { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.admin-tabela { border-collapse: collapse; width: 100%; font-size: calc(13.5px * var(--escala-texto)); }
.admin-tabela th, .admin-tabela td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.admin-tabela thead th { background: var(--campo); font-size: calc(11.5px * var(--escala-texto)); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-fraca); }
.admin-tabela tbody tr:last-child td { border-bottom: none; }
.admin-tabela .admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-email { color: var(--tinta-fraca); font-size: calc(12px * var(--escala-texto)); }
.admin-detalhe { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: calc(11.5px * var(--escala-texto)); color: var(--tinta-fraca); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-suspenso { opacity: 0.6; }
.admin-select-plano { font-size: calc(12.5px * var(--escala-texto)); padding: 3px 6px; }

.admin-status { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.admin-status-aprovado { background: var(--vivo-fundo, var(--indigo-fundo)); color: var(--indigo); }
.admin-status-pendente { background: var(--ambar-fundo, var(--indigo-fundo)); color: var(--ambar); }
.admin-status-rejeitado { background: var(--indigo-fundo); color: var(--vivo); }

.admin-cadeia { font-size: calc(12.5px * var(--escala-texto)); font-weight: 600; }
.admin-cadeia-ok { color: var(--verde); }
/* Estado do MEIO, que não existia: linhas foram REMOVIDAS mas nada foi
   adulterado. Vermelho seria mentira (ninguém editou o log) e verde também
   (falta pedaço). Âmbar é o que descreve o que houve. */
.admin-cadeia-alerta { color: var(--ambar); }
.admin-cadeia-erro { color: var(--vivo); }
.admin-cadeia { animation: admin-cadeia-surge 220ms ease-out; }
@keyframes admin-cadeia-surge { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-cadeia { animation: none; } }

.admin-vazio { color: var(--tinta-fraca); padding: 12px; }
.admin-erro { color: var(--vivo); padding: 12px; }
/* O âmbar do consumo de 80% do teto até ele, e da mudança de preço que vem. */
.admin-alerta { color: var(--ambar); }

.admin-bloqueio { max-width: 480px; margin: 80px auto; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--tinta-media); }

/* Parâmetros do sistema: um item por parâmetro, montado por admin.js a partir
   da definição que o servidor devolve. */
.admin-config-campos { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.admin-config-item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--linha); }
.admin-config-item:last-child { border-bottom: none; padding-bottom: 0; }
.admin-config-rotulo { font-weight: 600; font-size: calc(14px * var(--escala-texto)); color: var(--tinta); }
.admin-config-ajuda { margin: 0; font-size: calc(12.5px * var(--escala-texto)); color: var(--tinta-fraca); max-width: 64ch; }
.admin-config-linha { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-top: 4px; }
.admin-config-linha input[type="number"] { width: 9em; }
.admin-config-linha select { min-width: min(100%, 22em); }
.bloco .admin-config-linha textarea { flex: 1 1 18em; min-width: 0; min-height: 96px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: calc(13px * var(--escala-texto)); }
.admin-config-status { margin: 0; min-height: 1.2em; }
.admin-config-salvo { animation: admin-config-salvo 260ms ease-out; }
@keyframes admin-config-salvo { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .admin-config-salvo { animation: none; } }
/* Salvou, mas há algo a saber (hoje: revisor sem conta para aprovar). Cor de
   aviso, por token, para valer nos seis temas. */
.admin-config-aviso { color: var(--vivo); }

/* O aviso de "só o código olhou esta peça", com o botão que pede a conferência
   por modelo. Cor por token, para valer nos seis temas. */
.ed-not-reconferir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--vivo-linha);
  border-radius: var(--raio);
  background: var(--vivo-fundo);
}
/* Os relatos de erro dos leitores. Cor por token, para valer nos seis temas. */
.ed-not-reportes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ed-not-reporte {
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-left: 3px solid var(--vivo);
  border-radius: var(--raio);
  background: var(--campo);
}
.ed-not-reporte-resolvido, .ed-not-reporte-descartado { border-left-color: var(--linha); opacity: 0.75; }
.ed-not-reporte p { margin: 4px 0 0; font-size: calc(13px * var(--escala-texto)); white-space: pre-wrap; }
.ed-not-reporte-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.ed-not-reconferir p {
  margin: 0;
  flex: 1 1 220px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta);
}

/* Variantes de botão e toast usados no painel admin (não existiam no painel.css) */
.botao-pequeno { padding: 5px 11px; font-size: calc(13px * var(--escala-texto)); }
.botao-perigo { color: var(--vivo); border-color: color-mix(in srgb, var(--vivo) 45%, var(--linha)); }
.botao-perigo:hover { background: var(--vivo-fundo, var(--campo)); border-color: var(--vivo); }
.aviso-flutuante {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--painel); color: var(--tinta); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); padding: 12px 18px; box-shadow: 0 8px 30px -12px rgba(0,0,0,.5);
  font-size: calc(14px * var(--escala-texto)); z-index: 3000; max-width: 90vw;
}

/* --- Verificação de CRM + 2FA no Perfil ---------------------------------- */
.verif-status { font-size: calc(14px * var(--escala-texto)); color: var(--tinta-media); margin-bottom: 14px; }
.verif-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-right: 6px; }
.verif-badge-ok { background: color-mix(in srgb, var(--verde) 14%, var(--painel)); color: var(--verde); }
.verif-badge-pendente { background: var(--ambar-fundo, var(--indigo-fundo)); color: var(--ambar); }
.verif-badge-rejeitado { background: var(--indigo-fundo); color: var(--vivo); }
.verif-upload { cursor: pointer; display: inline-flex; text-align: center; }
.mfa-qr { width: 168px; height: 168px; background: #fff; border-radius: var(--raio); padding: 8px; margin: 8px 0; display: block; }

/* --- Vidro: quem não quer, e quem não consegue ---------------------------- */

/*
 * O PAR QUE FALTAVA. Este arquivo já tinha quatro blocos de
 * `prefers-reduced-motion` e nenhum de transparência — e são a mesma classe de
 * ajuste: o sistema operacional expõe as duas preferências lado a lado
 * (Windows: "Efeitos de transparência"; macOS: "Reduzir transparência"), e
 * quem liga uma costuma precisar da outra. Vertigem e enxaqueca respondem a
 * movimento; dificuldade de leitura e alguns transtornos de processamento
 * visual respondem a fundo borrado atrás de texto.
 *
 * Zerar `--vidro-blur` sozinho não bastaria: sem o borrão, um fundo a 76% de
 * opacidade deixa o conteúdo de baixo aparecer NÍTIDO através da barra — fica
 * pior que o vidro, não melhor. Por isso a superfície também vira opaca.
 */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --vidro-blur: 0px;
    --vidro-fundo: var(--painel);
  }
  .topo {
    background: var(--painel);
  }
  .modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--papel) 86%, transparent);
  }
}

/*
 * E onde `backdrop-filter` não existe (Firefox com a flag desligada, navegador
 * antigo), o mesmo desfecho: superfície opaca. Sem isto o vidro degrada pro
 * PIOR caso — translúcido e sem borrão, que é texto sobre texto.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --vidro-fundo: var(--painel);
  }
  .topo {
    background: var(--painel);
  }
  /* O papel puro, sem color-mix: quem não tem backdrop-filter é navegador
     antigo, que pode não ter o color-mix também. */
  .modal {
    background: var(--papel);
  }
}

/* Botão de anexo desabilitado — "usar meu celular" fora de uma consulta.
   Ele fica VISÍVEL de propósito (ver o comentário em app/anexo.js): quem
   procurou a função e não achou conclui que ela não existe. Apagado, com o
   cursor dizendo que não é clicável e o motivo no `title`. */
.anexo-botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Caixa de REPETIÇÃO, dentro de "Detalhes opcionais".
   Mesma gramática da caixa "Marcar paciente nesta vaga" — agrupa uma decisão
   que não é um campo entre outros — mas com cor própria, porque está DENTRO de
   outro bloco e precisa se distinguir dele. Âmbar e não indigo: repetir é o que
   multiplica o compromisso em vários, e merece um segundo de atenção antes de
   ser marcado. */
.compromisso-caixa-repetir {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: var(--raio);
  border: 1px solid var(--ambar-linha);
  background: var(--ambar-fundo);
}

.compromisso-caixa-repetir-cabecalho {
  font-weight: 600;
  font-size: calc(13px * var(--escala-texto));
  color: var(--ambar);
  margin-bottom: 8px;
}

/* Dentro da caixa da vaga, o grupo do paciente encosta no topo — ele é o
   primeiro passo da ação, não um campo solto acima dela. */
.compromisso-vaga-marcar #compromisso-paciente-grupo > label {
  margin-top: 0;
}

/* --- "Sua agenda": a gramática da Agenda, no painel ----------------------- */
/*
 * Era uma lista de texto — hora, ponto, título. Aqui ela passa a usar o mesmo
 * vocabulário visual da grade, que é onde o médico já sabe ler: faixa lateral
 * na cor da categoria, tracejado para vaga livre, linha de agora separando
 * passado de futuro, e realce ao passar o mouse.
 */

.resumo-dias-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  cursor: pointer;
  white-space: nowrap;
}

.resumo-dias-toggle input {
  accent-color: var(--indigo-solido);
  cursor: pointer;
}

/* A hora AGORA, no cabeçalho do cartão de hoje. Monoespaçada pra não dançar a
   cada minuto — dígito de largura variável faria o cabeçalho tremer sozinho. */
/* O número inteiro em vermelho parecia alerta; o vermelho fica só no ponto,
   que é a cor da linha de agora da grade (21/09/2026). */
.resumo-dia-agora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: calc(12px * var(--escala-texto));
  font-weight: 600;
  color: var(--tinta-media);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  padding: 2px 10px 2px 8px;
}

.resumo-dia-agora:empty {
  display: none;
}

.resumo-dia-agora::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vivo);
}

/* Item: faixa lateral na cor da categoria, como o bloco da grade. */
.resumo-dia-item {
  position: relative;
  border-left: 3px solid var(--cor-categoria, var(--indigo-solido));
  padding-left: 10px;
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* O REALCE pedido — o mesmo gesto do bloco na grade: sombra e borda, nunca
   `transform` nem `filter`, que promovem o elemento a camada de composição e
   embaçam o texto (a causa raiz está documentada em `.cartao-modulo`). */
.resumo-dia-item:hover {
  background: var(--campo);
  box-shadow: var(--elev-1);
}

.resumo-dia-item-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* O título genérico ("Consulta") atrás do nome, apagado: informa sem competir
   com o dado que o médico procura, que é de quem é o horário. */
.resumo-dia-item-sub {
  margin-left: auto;
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* VAGA LIVRE: tracejado, a mesma marca do bloco fantasma na grade. Sem
   preenchimento, porque não há paciente — o vazio é a informação. */
.resumo-dia-item-vaga {
  border-left-style: dashed;
  border-left-color: var(--linha-forte);
  color: var(--tinta-fraca);
}

.resumo-dia-item-vaga .resumo-dia-item-hora {
  background: transparent;
  border-style: dashed;
  color: var(--tinta-fraca);
}

/* JÁ PASSOU: recuado, não escondido. O médico ainda quer conferir o que fez
   hoje — some do caminho sem sair da tela. */
.resumo-dia-item-passou {
  opacity: 0.55;
}

.resumo-dia-item-passou:hover {
  opacity: 1;
}

/* A LINHA DE AGORA — o mesmo gesto da linha vermelha da grade, e o motivo é o
   mesmo: dizer onde o dia está sem obrigar a comparar cada horário com o
   relógio. */
.resumo-dia-agora-linha {
  position: relative;
  height: 1px;
  background: var(--vivo);
  margin: 6px 0 6px 34px;
}

.resumo-dia-agora-marca {
  position: absolute;
  left: -34px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: calc(9.5px * var(--escala-texto));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--vivo-solido);
  border-radius: var(--raio-pilula);
  padding: 3px 5px;
}

@media (prefers-reduced-motion: reduce) {
  .resumo-dia-item {
    transition: none;
  }
}

/* O cabeçalho de bloco quebra linha em tela estreita.
   MEDIDO: o toggle "Vagas livres" somou largura ao cabeçalho de "Sua agenda" e
   o painel voltou a rolar de lado em 320px (340 contra 320). Aqui quebrar é
   seguro — `.bloco-topo` não é fixo, ao contrário do `.topo` da página. */
@media (max-width: 560px) {
  .bloco-topo {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .resumo-dias-toggle {
    margin-left: 0;
  }
}

/* Dentro da caixa de repetição os campos ficam EM LINHA, como a frase que eles
   formam: "repetir [x] semanalmente até dd/mm/aaaa". Empilhados (que é o que
   acontece por herdarem `width: 100%` das regras gerais do modal) a frase se
   perde e cada campo vira uma pergunta solta. */
.compromisso-caixa-repetir .compromisso-recorrencia-linha select,
.compromisso-caixa-repetir .compromisso-recorrencia-linha input[type="text"] {
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  margin: 0;
}

.compromisso-caixa-repetir .compromisso-recorrencia-linha input[type="text"] {
  max-width: 14ch;
}

.compromisso-caixa-repetir .compromisso-recorrencia-linha input[type="checkbox"] {
  width: auto;
  accent-color: var(--ambar);
  margin: 0;
  cursor: pointer;
}

/* "até" é conectivo da frase, não rótulo de campo. */
.compromisso-caixa-repetir .compromisso-recorrencia-linha span {
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
}

/* O Copiloto flutuante colidia com a barra de "Salvar alterações" do Perfil.
   A barra é `position: fixed; left:0; right:0; bottom:0` com z-index 50 contra
   os 40 do chat — ou seja, ela é pintada POR CIMA, e o que ficava escondido era
   exatamente o campo de escrever e o botão Enviar do chat.
   Só o Perfil tem essa barra; por isso a regra é da página, não global. */
.pagina-perfil .chat-flutuante {
  bottom: 76px;
}

/* Calendário da Agenda — reusa `.periodo-pop` / `.periodo-grade` / `.periodo-dia`
   do seletor da Gestão, e acrescenta só o que é próprio daqui: a coluna da
   semana à esquerda, o mês clicável no cabeçalho, e dias futuros habilitados
   (o da Gestão desabilita o futuro de propósito — ver agenda-calendario.js). */
.agenda-btn-calendario {
  margin-left: 2px;
}

.agenda-pop-calendario {
  top: calc(100% + 6px);
  left: 0;
  min-width: 262px;
}

/* Uma coluna a mais que a grade da Gestão: a faixa da semana. */
.agenda-grade-calendario {
  grid-template-columns: 18px repeat(7, 1fr);
}

.agenda-faixa-semana {
  border: none;
  background: transparent;
  color: var(--tinta-fraca);
  font-size: calc(10px * var(--escala-texto));
  line-height: 1;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}
.agenda-faixa-semana:hover {
  background: var(--indigo-fundo);
  color: var(--indigo);
}
.agenda-faixa-semana-ativa {
  background: var(--indigo-solido);
  color: #fff;
}

/* O nome do mês vira botão: clicar abre a visão de mês. */
.agenda-pop-titulo {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 6px;
}
.agenda-pop-titulo:hover {
  background: var(--indigo-fundo);
  color: var(--indigo);
}

/* Dia de outro mês: apagado, mas clicável — numa agenda o futuro é o ponto. */
.agenda-dia-fora {
  opacity: 0.42;
}
.agenda-dia-hoje {
  box-shadow: inset 0 0 0 1px var(--indigo);
}

/* Filtro da Agenda — chips por eixo, no mesmo popover do calendário. */
.agenda-btn-filtro {
  position: relative;
}
.agenda-btn-filtro-ativo {
  border-color: var(--indigo);
  color: var(--indigo);
}
.agenda-filtro-bolinha {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--indigo-solido);
  color: #fff;
  font-size: calc(10px * var(--escala-texto));
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.agenda-pop-filtro {
  top: calc(100% + 6px);
  left: 0;
  min-width: 300px;
  max-width: 380px;
}

.agenda-filtro-grupo {
  margin-bottom: 10px;
}
.agenda-filtro-titulo {
  margin: 0 0 5px;
  font-size: calc(10.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.agenda-filtro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.agenda-filtro-chip {
  font-size: calc(11px * var(--escala-texto));
  padding: 3px 9px;
}
.agenda-filtro-paciente {
  width: 100%;
}

/* Invólucro de um controle com popover na barra da Agenda. Existe só para dar
   contexto de posicionamento ao popover: sem ele, `left: 0` ancora na borda do
   grupo inteiro da barra — medido, 395px à esquerda do botão. */
.agenda-controle {
  position: relative;
  display: inline-flex;
}

/* Lista de espera / retornos — só o que não dava para reusar.
   Tudo por token de tema: `painel.css` é conferida por temas-paridade.mjs, e
   cor literal aqui é exatamente o defeito que aquele teste nasceu para pegar. */
.fila-so-telefone {
  background: var(--ambar-fundo);
  color: var(--ambar);
  border: 1px solid var(--ambar-linha);
}
.fila-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
}
#modal-lista-espera .item-consulta-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* Badge do botão "Quem está esperando". Classe PRÓPRIA, e não a
   `.agenda-filtro-bolinha` do filtro da agenda: aquela é procurada por
   `document.querySelector` no filtro e no teste dele, então um segundo
   elemento com a mesma classe fazia a busca achar o badge errado. Mesma
   aparência, identidade separada. */
.fila-bolinha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: var(--raio-pilula);
  background: var(--indigo-solido);
  color: #fff;
  font-size: calc(11px * var(--escala-texto));
  font-weight: 700;
}

/* Botão de ditado por voz — o microfone ao lado da caixa de texto (assistentes
   e copiloto). Um bloco só, em paridade nos dois arquivos, porque o MESMO
   componente (public/ditado.js) é montado nos dois contextos.

   O estado "gravando" precisa ser visível SEM depender da animação: quem tem
   `prefers-reduced-motion` continua vendo a cor e o anel mudarem, e é isso que
   diz "o microfone está aberto agora". A animação é reforço, não o sinal. */
.botao-ditado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--tinta-fraca);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.botao-ditado svg {
  width: 16px;
  height: 16px;
}

.botao-ditado:hover:not(:disabled) {
  color: var(--tinta);
  border-color: var(--indigo);
}

.botao-ditado:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

.botao-ditado:disabled {
  cursor: default;
  opacity: 0.6;
}

.botao-ditado.ditado-gravando {
  color: #fff;
  background: var(--vivo-solido);
  border-color: var(--vivo-solido);
  animation: ditado-pulso 1.4s ease-in-out infinite;
}

.botao-ditado.ditado-enviando {
  color: var(--indigo);
  border-color: var(--indigo);
}

@keyframes ditado-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vivo) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--vivo) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .botao-ditado.ditado-gravando {
    animation: none;
  }
}

/* Painel de captura do ditado — o que aparece embaixo do microfone.

   POR QUE ELE EXISTE. O botão vermelho responde "está gravando"; não responde
   "está entrando som". Microfone mudo, mutado no sistema operacional ou virado
   para o lado grava silêncio por dois minutos e devolve nada — e o médico só
   descobre no fim, depois de ter falado. As barras se mexem com a voz, que é o
   mesmo sinal que uma chamada de vídeo dá, e respondem a pergunta certa.

   E o cancelar: antes não havia saída. Clicar no microfone de novo PARA E
   ENVIA. Quem começou por engano tinha que deixar transcrever e apagar depois.

   FLUTUA, e isso é decisão: `position: absolute` tira o painel do fluxo, então
   abrir e fechar não empurra a caixa de texto nem o botão de enviar. Um painel
   que reposiciona o formulário embaixo do cursor faz o médico clicar no lugar
   errado — é o mesmo motivo pelo qual o menu de sugestão do prontuário flutua. */
.ditado-caixa {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.ditado-painel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  /* Vidro, porque o painel FLUTUA sobre o formulário — é a regra registrada
     nos tokens: superfície flutuante usa `--vidro-fundo`, superfície de
     conteúdo não. `--elevado` como reserva para quem não suporta color-mix. */
  background: var(--vidro-fundo, var(--elevado));
  backdrop-filter: blur(var(--vidro-blur, 8px));
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  animation: ditado-painel-entra 0.16s ease-out;
}

.ditado-painel-linha {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* As barras. `align-items: flex-end` com `transform-origin: bottom` faz elas
   crescerem PARA CIMA a partir da base, como medidor de nível — crescer do
   centro pareceria equalizador de música, que é outra coisa. */
.ditado-barras {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
}

.ditado-barras span {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--vivo);
  transform-origin: bottom;
  transform: scaleY(0.12);
  transition: transform 0.08s linear;
}

.ditado-rotulo {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.ditado-cancelar {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--tinta-fraca);
  background: transparent;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ditado-cancelar:hover {
  color: var(--vivo);
  border-color: var(--vivo);
}

.ditado-cancelar:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* Transcrevendo: o nível não existe mais (o microfone já fechou), então as
   barras param de mentir movimento e passam a pulsar em conjunto — sinal de
   "trabalhando", não de "ouvindo". */
.ditado-painel-enviando .ditado-barras span {
  background: var(--indigo);
  animation: ditado-onda 1s ease-in-out infinite;
}

.ditado-painel-enviando .ditado-barras span:nth-child(2) { animation-delay: 0.08s; }
.ditado-painel-enviando .ditado-barras span:nth-child(3) { animation-delay: 0.16s; }
.ditado-painel-enviando .ditado-barras span:nth-child(4) { animation-delay: 0.24s; }
.ditado-painel-enviando .ditado-barras span:nth-child(5) { animation-delay: 0.32s; }
.ditado-painel-enviando .ditado-barras span:nth-child(6) { animation-delay: 0.4s; }
.ditado-painel-enviando .ditado-barras span:nth-child(7) { animation-delay: 0.48s; }

@keyframes ditado-onda {
  0%, 100% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
}

@keyframes ditado-painel-entra {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Sem movimento, o painel continua entregando o que importa: o tempo correndo,
   o rótulo e o cancelar. A altura das barras vira estática em meia escala — o
   componente não some, só deixa de se mexer. */
@media (prefers-reduced-motion: reduce) {
  .ditado-painel { animation: none; }
  .ditado-painel-enviando .ditado-barras span { animation: none; transform: scaleY(0.5); }
  .ditado-barras span { transition: none; }
}

/* ---------------------------------------------------------------------------
   CONFERÊNCIA DOS DADOS DE RECEBIMENTO

   Só tokens que já existem nos 5 blocos de tema dos 3 CSS (--ambar*, --verde,
   --linha, --tinta*). Nenhum token novo — nenhum trabalho de paridade, e o
   aviso se adapta sozinho aos temas claro e escuro.
--------------------------------------------------------------------------- */
.conferencia {
  border: 1px solid var(--ambar-linha);
  background: var(--ambar-fundo);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin: 4px 0 14px;
}

.conferencia[data-estado="pronto"] {
  border-color: var(--linha-forte);
  background: transparent;
}

.conferencia-titulo {
  margin: 0;
  font-size: calc(13.5px * var(--escala-texto));
  font-weight: 600;
  color: var(--ambar);
}

.conferencia[data-estado="pronto"] .conferencia-titulo {
  color: var(--verde);
}

.conferencia-lista {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Cada item leva até o campo, então é botão de verdade — alcançável por
   teclado, com foco visível. */
.conferencia-item {
  background: none;
  border: 0;
  padding: 3px 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  border-radius: 4px;
  transition: color 0.16s ease;
}

.conferencia-item::before {
  content: "\2192\00a0";
  color: var(--ambar);
}

.conferencia-item:hover {
  color: var(--tinta);
}

.conferencia-item:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}

/* O campo em si também se marca: a lista diz o que falta, a borda diz onde. */
.campo-pendente {
  border-color: var(--ambar-linha) !important;
  background: var(--ambar-fundo);
}

.teleconsulta-checklist-detalhe {
  display: block;
  margin-top: 2px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}

@media (prefers-reduced-motion: reduce) {
  .conferencia-item { transition: none; }
}

/* Selos do diagnóstico de serviços externos. Só tokens existentes. */
.admin-diag-selo {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--raio-pilula);
  font-size: calc(12px * var(--escala-texto));
  font-weight: 600;
  white-space: nowrap;
}

.admin-diag-ok {
  background: var(--vivo-fundo);
  color: var(--verde);
  border: 1px solid var(--vivo-linha);
}

.admin-diag-falta {
  background: var(--ambar-fundo);
  color: var(--ambar);
  border: 1px solid var(--ambar-linha);
}

/* Recusada é mais grave que faltando: uma chave que existe e não serve engana
   quem olha o painel, porque a caixa está preenchida. */
.admin-diag-erro {
  background: var(--ambar-fundo);
  color: var(--ambar);
  border: 2px solid var(--ambar);
}

.admin-diag-tabela td {
  vertical-align: top;
}

/* ---------------------------------------------------------------------------
   ESTADO DO RECEBIMENTO (Teleconsulta)

   Dois blocos, um por estado. Antes só existia o "falta cadastrar", e depois de
   cadastrado a tela ficava muda — sem conferência possível, uma conta bancária
   errada passava sem ninguém notar. Só tokens que já existem nos 5 temas dos 3
   CSS: nenhum trabalho de paridade.
--------------------------------------------------------------------------- */
#recebedor-pendencias {
  border: 1px solid var(--ambar-linha);
  background: var(--ambar-fundo);
  border-radius: var(--raio);
  padding: 10px 12px;
  margin: 0 0 10px;
}

.teleconsulta-recebimento-titulo {
  margin: 0 0 6px;
  font-size: calc(13.5px * var(--escala-texto));
  font-weight: 600;
  color: var(--ambar);
}

.teleconsulta-recebimento-lista {
  margin: 0;
  padding-left: 18px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Cadastrado: verde discreto. É confirmação, não celebração — o que importa
   ali é o médico CONFERIR a conta, não se sentir premiado. */
.teleconsulta-recebimento-ok {
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  padding: 10px 12px;
}

.teleconsulta-recebimento-ok .teleconsulta-recebimento-titulo {
  color: var(--verde);
}

/* EVOLUÇÃO — linhas datadas, na página do paciente.
   A data é um SELO à esquerda, largura fixa, e o texto corre ao lado. A primeira
   versão reusou `gestao-lista-item` (par rótulo→valor, com o valor encostado à
   direita) e o resultado era a data numa ponta e a frase na outra, com meia tela
   de vão no meio — para ler uma linha o olho atravessava o monitor. */
.evolucao-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 10px;
  border-bottom: 1px solid var(--linha);
}

.evolucao-item:last-child {
  border-bottom: 0;
}

.evolucao-data {
  font-variant-numeric: tabular-nums;
  font-size: calc(11px * var(--escala-texto, 1));
  color: var(--tinta-fraca);
  white-space: nowrap;
}

.evolucao-texto {
  color: var(--tinta);
  line-height: 1.45;
}

/* No celular a data vira uma etiqueta em cima: 92px de coluna fixa somados a
   uma frase clínica não cabem em 390px sem partir cada palavra. */
@media (max-width: 560px) {
  .evolucao-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* RETIFICAÇÕES de prontuário fechado — mesmas classes de app/styles.css, para
   que a correção tenha a MESMA aparência nos dois lugares em que o médico lê o
   registro. Duas aparências para o mesmo objeto clínico seriam duas leituras. */
.aditamentos-titulo {
  font-family: inherit;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ambar);
  margin: 14px 0 8px;
}

.aditamento {
  border: 1px solid var(--ambar-linha);
  border-left: 3px solid var(--ambar);
  border-radius: var(--raio);
  background: var(--ambar-fundo);
  padding: 8px 10px;
  margin-bottom: 8px;
}

.aditamento-topo {
  font-size: 11px;
  color: var(--tinta-fraca);
  margin-bottom: 4px;
}

.aditamento-texto {
  margin: 0;
  white-space: pre-wrap;
}

/* Busca do dossiê de prontuário (painel do admin). O campo é largo de propósito:
   o que se cola ali é um uuid inteiro, e um campo curto o esconde no meio. */
.admin-dossie-busca {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.admin-dossie-busca input {
  flex: 1 1 320px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--campo);
  color: var(--tinta);
  font-family: inherit;
  font-size: 13px;
}

#admin-dossie-saida h3 {
  margin: 16px 0 6px;
  font-size: 13px;
}

/* Ditado bloqueado — com a consulta gravando, o microfone está na transcrição.
   Não usa `disabled` de propósito: o clique precisa CHEGAR ao JS para explicar o
   motivo. Botão apagado que não responde a nada vira chamado de suporte. */
.botao-ditado-impedido {
  opacity: 0.45;
  cursor: not-allowed;
}

.botao-ditado-impedido:hover {
  color: var(--tinta-fraca);
  border-color: var(--linha-forte);
}

/* ------------------------------------------------ Copiloto arrastável (2026-09-10) */

/* O topo é a alça: `touch-action: none` para o dedo arrastar a caixa em vez
   de rolar a página (só no topo — mensagens e campo continuam normais). */
.chat-flutuante-topo {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.chat-flutuante-topo svg {
  -webkit-user-drag: none;
}
.chat-flutuante-arrastando {
  user-select: none;
  box-shadow: var(--elev-3), 0 0 0 2px color-mix(in srgb, var(--indigo) 35%, transparent);
}
.chat-flutuante-arrastando .chat-flutuante-topo {
  cursor: grabbing;
}
.chat-flutuante-arrastando .chat-flutuante-mensagens {
  transition: none;
}
/* "Voltar ao canto": só existe depois de arrastar; mora sobre o topo, à
   esquerda da seta. */
.chat-flutuante-recolocar {
  position: absolute;
  top: 9px;
  right: 40px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--campo);
  color: var(--tinta-fraca);
  cursor: pointer;
  z-index: 1;
}
.chat-flutuante-recolocar:hover {
  color: var(--indigo);
  border-color: var(--indigo);
}
.chat-flutuante-recolocar svg {
  width: 13px;
  height: 13px;
}
/* No celular a caixa fechada é uma pílula do tamanho do título: o "voltar ao
   canto" não cabe nela sem tampar o nome. Aparece quando ela abre. */
@media (max-width: 640px) {
  .chat-flutuante:not(.chat-flutuante-aberto) .chat-flutuante-recolocar {
    display: none;
  }
}

/* ------------------------------------------- painel/plano.html (trilho 2) */

.plano-etiqueta {
  font-size: calc(11.5px * var(--escala-texto));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--raio-pilula);
  border: 1px solid transparent;
}
.plano-etiqueta-ativa {
  color: var(--verde);
  border-color: color-mix(in srgb, var(--verde) 45%, transparent);
  background: color-mix(in srgb, var(--verde) 12%, transparent);
}
.plano-etiqueta-demo {
  color: var(--ambar, #d99a2b);
  border-color: color-mix(in srgb, var(--ambar, #d99a2b) 45%, transparent);
  background: color-mix(in srgb, var(--ambar, #d99a2b) 12%, transparent);
}
.plano-estado {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 12px;
  margin-bottom: 10px;
}

/* Os módulos que o plano libera, como pílulas — dá para varrer de relance
   sem ler uma lista em prosa. */
.plano-direitos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.plano-direito {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  padding: 4px 11px;
}

.plano-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.plano-cartao-painel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  padding: 15px 16px;
}
.plano-cartao-painel h3 {
  margin: 0;
  font-size: calc(15px * var(--escala-texto));
  color: var(--tinta);
}
.plano-cartao-preco {
  margin: 0;
  font-size: calc(22px * var(--escala-texto));
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.plano-cartao-preco span {
  font-size: calc(12px * var(--escala-texto));
  font-weight: 400;
  color: var(--tinta-fraca);
}
.plano-cartao-resumo {
  margin: 0 0 8px;
  font-size: calc(12.5px * var(--escala-texto));
  line-height: 1.5;
  color: var(--tinta-media);
}
.plano-cartao-painel .botao {
  margin-top: auto;
}

/* Escolha do meio de pagamento: dois blocos clicáveis inteiros, não dois
   rádios de 13px — é um toque no celular, e o alvo tem que ser o cartão. */
.pagamento-metodos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pagamento-metodo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  cursor: pointer;
}
.pagamento-metodo:has(input:checked) {
  border-color: var(--indigo);
  background: color-mix(in srgb, var(--indigo) 10%, var(--campo));
}
.pagamento-metodo input {
  margin-top: 3px;
  flex: none;
}
.pagamento-metodo strong {
  display: block;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}
.pagamento-metodo small {
  display: block;
  margin-top: 2px;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  line-height: 1.45;
}

.pagamento-cartao {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campo-linha-um {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.pagamento-nota {
  margin: 0;
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  line-height: 1.5;
}

.pix-caixa {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 14px;
}
.pix-caixa img {
  background: #fff;
  border-radius: var(--raio);
  padding: 6px;
  flex: none;
}
.pix-lado {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}
.pix-lado textarea {
  width: 100%;
  font-family: inherit;
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px;
  resize: vertical;
}

.plano-erro {
  margin: 12px 0 0;
  font-size: calc(13px * var(--escala-texto));
  color: var(--vivo, #ff9a9a);
}

.plano-cobrancas {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plano-cobranca {
  display: grid;
  grid-template-columns: 100px 110px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: var(--raio);
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.plano-cobranca:nth-child(odd) {
  background: color-mix(in srgb, var(--campo) 55%, transparent);
}
.plano-cobranca-valor {
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  font-weight: 600;
}
.plano-cobranca-paga .plano-cobranca-status {
  color: var(--verde);
}
.plano-cobranca-falhou .plano-cobranca-status {
  color: var(--vivo, #ff9a9a);
}
@media (max-width: 640px) {
  .plano-cobranca {
    grid-template-columns: 1fr 1fr;
  }
  .plano-cobranca-status {
    grid-column: 1 / -1;
  }
}

/* ------------------------------ conta sem plano (trilho 2, 2026-09-11) */

/* A faixa de quem ainda não assinou. Convite, não erro: por isso a cor da
   marca e não a de alerta — a pessoa não fez nada errado. */
.faixa-demonstracao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: var(--raio-cartao);
  border: 1px solid color-mix(in srgb, var(--indigo) 45%, var(--linha));
  background: color-mix(in srgb, var(--indigo) 10%, var(--painel));
  text-decoration: none;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
  line-height: 1.5;
}
.faixa-demonstracao:hover {
  border-color: var(--indigo);
  background: color-mix(in srgb, var(--indigo) 15%, var(--painel));
}
.faixa-demonstracao strong {
  color: var(--tinta);
}
.faixa-demonstracao-texto {
  flex: 1 1 280px;
}

/* Card trancado continua legível de propósito: esconder o que o produto faz
   de quem ainda vai comprar é o oposto do que esta tela precisa. Ele perde o
   brilho de "clicável para trabalhar" e ganha o cadeado. */
.cartao-modulo-trancado {
  opacity: 0.72;
  border-style: dashed;
}
.cartao-modulo-trancado:hover {
  opacity: 1;
  border-style: solid;
  border-color: color-mix(in srgb, var(--indigo) 50%, var(--linha));
}
.cartao-modulo-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.cartao-modulo-cadeado {
  color: var(--tinta-fraca);
  flex: none;
}
.cartao-modulo-cadeado svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ------------------------------------------ painel/conhecer.html */

.conhecer-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.conhecer-video {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  background: var(--campo);
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-cartao);
}
.conhecer-video iframe,
.conhecer-video video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--raio-cartao);
}
.conhecer-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.conhecer-modulo {
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  padding: 15px 16px;
}
.conhecer-modulo-destaque {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--indigo) 35%, transparent);
}
.conhecer-modulo h3 {
  margin: 0 0 6px;
  font-size: calc(14.5px * var(--escala-texto));
  color: var(--tinta);
}
.conhecer-modulo p {
  margin: 0 0 10px;
  font-size: calc(12.5px * var(--escala-texto));
  line-height: 1.55;
  color: var(--tinta-media);
}
.conhecer-desde {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}

/* Faltavam duas regras das telas de plano (achadas na verificação). */
.plano-cobranca-data {
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.pagamento-pix {
  display: block;
}

/* ---------------------------------------------------------------------------
   CLÍNICA E SECRETÁRIA (trilho 6, 2026-09-11)
   --------------------------------------------------------------------------- */

/* O seletor de médico da secretária. Fica no canto superior, antes de tudo:
   é o contexto do que a página inteira mostra, e trocá-lo recarrega a tela. */
.seletor-medico-alvo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 12px;
  border: 1px solid var(--indigo-linha, var(--linha-forte));
  background: var(--indigo-fundo, var(--campo));
  border-radius: 999px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  max-width: min(60vw, 380px);
}
.seletor-medico-alvo-rotulo {
  white-space: nowrap;
  color: var(--tinta-fraca);
}
.seletor-medico-alvo select {
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  padding: 2px 4px;
  max-width: 100%;
  cursor: pointer;
}
.seletor-medico-alvo select:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 6px;
}

/* A conta: números lado a lado, cada um com rótulo em cima do valor. */
.clinica-conta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.clinica-conta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--campo) 55%, transparent);
}
.clinica-conta-item span {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}
.clinica-conta-item b {
  font-size: calc(15px * var(--escala-texto));
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* O que o administrador precisa ver sem procurar: fatura maior, pagamento
   pendente. Âmbar, não vermelho — é aviso, não erro. */
.clinica-alerta {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--ambar-linha, var(--linha-forte));
  background: var(--ambar-fundo, transparent);
  border-radius: var(--raio);
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta);
}

.clinica-membros {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clinica-membro {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.clinica-membro-pendente {
  border-style: dashed;
}
.clinica-membro-quem {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.clinica-membro-quem b {
  color: var(--tinta);
  font-size: calc(14px * var(--escala-texto));
}
.clinica-membro-quem small {
  color: var(--tinta-fraca);
  font-size: calc(12px * var(--escala-texto));
}
.clinica-membro-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.clinica-membro-desde {
  color: var(--tinta-fraca);
  font-size: calc(12px * var(--escala-texto));
}

.clinica-assentos {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.clinica-assentos label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.clinica-assentos input {
  max-width: 120px;
}

/* Caixa de marcação com o texto ao lado (criar clínica). */
.campo-caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}
.campo-caixa input {
  width: 16px;
  height: 16px;
}

@media (max-width: 560px) {
  .seletor-medico-alvo {
    max-width: 100%;
    order: -1;
  }
  .clinica-membro {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Escolher quais médicos a secretária atende — dobrado por padrão porque a
   clínica pequena não precisa disso, e a grande precisa muito. */
.clinica-atendimentos {
  flex-basis: 100%;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.clinica-atendimentos summary {
  cursor: pointer;
  color: var(--indigo);
}
.clinica-atendimentos label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.clinica-atendimentos .botao {
  margin-top: 10px;
}

/* ---------------------------------------------------------------------------
   O QUE É DO MÉDICO, para quem é da secretaria
   ---------------------------------------------------------------------------
   `medico-alvo.js` marca o <html> com o papel, e qualquer elemento com
   `data-so-medico` some. Uma regra, todas as páginas — em vez de cada tela
   escrever a própria, que é como dois botões que só sabiam dar erro
   sobreviveram até o passeio de 2026-09-11 ("Google Agenda", que é a conta
   pessoal do médico, e "Nova consulta", que é prontuário). */
html[data-papel="secretaria"] [data-so-medico] {
  display: none !important;
}

/* Importar agenda de outro sistema (trilho 8) — a prévia antes de escrever. */
.importar-escolha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
}
.importar-linhas {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin-top: 12px;
}
.importar-linha {
  display: grid;
  grid-template-columns: 130px 1fr 200px 100px;
  gap: 10px;
  padding: 7px 10px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  border-bottom: 1px solid var(--linha);
}
.importar-linha:last-child {
  border-bottom: 0;
}
.importar-linha-pulada {
  color: var(--tinta-fraca);
}
.importar-linha-ruim {
  grid-template-columns: 130px 1fr;
  color: var(--vivo, #ff9a9a);
}
.importar-novo {
  font-style: normal;
  font-size: calc(11px * var(--escala-texto));
  color: var(--indigo);
}
@media (max-width: 560px) {
  .importar-linha,
  .importar-linha-ruim {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Rodapé do painel: nome, fornecedor e versão do software (NGS1.01.01).
   Discreto de propósito — é identificação, não navegação. */
.painel-rodape {
  margin: 2.5rem auto 1rem;
  padding: 0 1.25rem;
  max-width: 1280px;
  font-size: 0.78rem;
  color: var(--tinta-fraca, #7f8ba3);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   GUIA DE PRIMEIROS PASSOS (área B, 2026-09-14)
   Só tokens: vale nos seis temas sem regra por tema.
   --------------------------------------------------------------------------- */
.primeiros-passos {
  animation: entrada 0.28s ease both;
}
.primeiros-passos-topo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.primeiros-passos-progresso {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}
.primeiros-passos-trilho {
  height: 4px;
  border-radius: 999px;
  background: var(--linha);
  overflow: hidden;
  margin: -6px 0 14px;
}
.primeiros-passos-trilho span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--indigo);
  border-radius: inherit;
  transition: width 0.5s ease;
}
.primeiros-passos-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.primeiros-passos-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  animation: fade-in 0.25s ease both;
  animation-delay: calc(var(--ordem, 0) * 40ms);
}
.primeiros-passos-marca {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(12.5px * var(--escala-texto));
  font-weight: 600;
  color: var(--indigo);
  border: 1.5px solid color-mix(in srgb, var(--indigo) 60%, var(--linha));
}
.primeiros-passos-marca svg {
  width: 15px;
  height: 15px;
}
.primeiros-passos-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.primeiros-passos-texto strong {
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
}
.primeiros-passos-texto span {
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
  line-height: 1.45;
}
.primeiros-passos-feito .primeiros-passos-marca {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--painel);
}
.primeiros-passos-feito .primeiros-passos-texto strong {
  color: var(--tinta-media);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tinta-fraca) 60%, transparent);
}
.primeiros-passos-trancado {
  border-style: dashed;
}
.primeiros-passos-trancado .primeiros-passos-marca {
  color: var(--tinta-fraca);
  border-color: var(--linha-forte);
}
.primeiros-dados {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px 2px 2px;
  border-top: 1px dashed var(--linha);
  margin-top: 4px;
  animation: fade-in 0.2s ease both;
}
.primeiros-dados-linha {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.primeiros-dados-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 200px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.primeiros-dados-uf {
  flex: 0 0 96px;
}
.primeiros-dados-campo input,
.primeiros-dados-campo select {
  font: inherit;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 9px;
}
.primeiros-dados-campo input:focus,
.primeiros-dados-campo select:focus {
  outline: none;
  border-color: var(--indigo);
}
.primeiros-dados-grupo {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.primeiros-dados-grupo legend {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  margin-bottom: 6px;
}
.primeiros-dados-dica {
  margin: -4px 0 0;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}
.primeiros-dados-erro {
  margin: 0;
  min-height: 1em;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--vivo);
}
.primeiros-dados-acoes {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 560px) {
  .primeiros-passos-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .primeiros-passos-acao {
    grid-column: 2;
  }
}
@media (prefers-reduced-motion: reduce) {
  .primeiros-passos,
  .primeiros-passos-item,
  .primeiros-dados {
    animation: none;
  }
  .primeiros-passos-trilho span {
    transition: none;
  }
}

/* Contas sem plano (2026-09-14) */
.admin-contato-form td {
  background: var(--campo);
}
.admin-contato-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  animation: fade-in 0.2s ease both;
}
.admin-contato-linha input {
  flex: 1 1 260px;
  font: inherit;
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 9px;
}
.admin-contato-linha select {
  font: inherit;
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 7px 9px;
}
@media (prefers-reduced-motion: reduce) {
  .admin-contato-linha {
    animation: none;
  }
}

.admin-dica {
  color: var(--tinta-fraca);
  font-size: calc(12px * var(--escala-texto));
  line-height: 1.5;
}
p.admin-dica {
  margin: -8px 0 12px;
}

/* Modo auditor (NGS1.07.02): só a trilha e o dossiê. */
.modo-auditor [data-so-admin] {
  display: none !important;
}
.admin-aviso-auditor {
  border-color: color-mix(in srgb, var(--indigo) 45%, var(--linha));
}
.admin-auditor input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---------------------------------------------------- notificações (sino) */
/* O sino no topo de toda página: dois selos (vermelho = importantes, azul =
   informativas, pelos tokens de cada tema), pulso só com importante não
   lida, painel lateral à direita (tela inteira no celular) e toast curto. */
.notificacoes-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.notificacoes-sino {
  position: relative;
  padding-left: 9px;
  padding-right: 9px;
}
.notificacoes-sino svg {
  width: 18px;
  height: 18px;
}
.notificacoes-selo {
  position: absolute;
  top: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--papel);
  font-variant-numeric: tabular-nums;
}
/* O branco mora na mesma regra do fundo que o segura, e o fundo é a tinta
   SÓLIDA: --vivo e --indigo são claros nos temas escuros (21/09/2026). */
.notificacoes-selo-importante {
  right: -8px;
  background: var(--vivo-solido);
  color: #fff;
}
.notificacoes-selo-informativo {
  right: -8px;
  background: var(--indigo-solido);
  color: #fff;
}
.notificacoes-selo-importante:not([hidden]) ~ .notificacoes-selo-informativo {
  right: auto;
  left: -8px;
}
@keyframes notificacoes-pulso {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--vivo) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--vivo) 0%, transparent);
  }
}
.notificacoes-sino-pulsa {
  animation: notificacoes-pulso 2s ease-out infinite;
  border-color: color-mix(in srgb, var(--vivo) 60%, var(--linha-forte));
}
.notificacoes-sino-pulsa svg {
  color: var(--vivo);
}
@media (prefers-reduced-motion: reduce) {
  .notificacoes-sino-pulsa {
    animation: none;
  }
}

.notificacoes-painel {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.notificacoes-fundo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 35%, transparent);
}
.notificacoes-caixa {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--painel);
  border-left: 1px solid var(--linha);
  box-shadow: var(--elev-3, 0 12px 40px rgba(0, 0, 0, 0.35));
  animation: notificacoes-entra 0.2s ease-out;
}
@keyframes notificacoes-entra {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .notificacoes-caixa {
    animation: none;
  }
}
.notificacoes-topo {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notificacoes-topo h3 {
  margin: 0;
  font-size: calc(16px * var(--escala-texto));
}
.notificacoes-topo > h3 + .notificacoes-topo-acoes {
  margin-top: -32px;
}
.notificacoes-topo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.notificacoes-filtros {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notificacoes-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.notificacoes-chip {
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-media);
  padding: 4px 10px;
  font-size: calc(12px * var(--escala-texto));
  cursor: pointer;
}
.notificacoes-chip-ativo {
  background: var(--indigo-solido);
  border-color: var(--indigo-solido);
  color: #fff;
}
.notificacoes-filtros-linha {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.notificacoes-filtros-linha select,
.notificacoes-filtros-linha input[type="search"] {
  flex: 1 1 140px;
  min-width: 0;
}
.notificacoes-nao-lidas {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.notificacoes-lista {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
}
.notificacoes-lista-pagina {
  overflow: visible;
  padding: 8px 0 0;
}
.notificacoes-dia {
  font-size: calc(11px * var(--escala-texto));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin: 12px 4px 6px;
}
.notificacao {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 10px;
  padding: 10px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  margin-bottom: 8px;
  background: var(--campo, transparent);
  animation: entrada 0.2s ease-out;
}
.notificacao-nao-lida {
  border-left: 3px solid var(--indigo);
}
.notificacao-importante.notificacao-nao-lida {
  border-left-color: var(--vivo);
  background: color-mix(in srgb, var(--vivo) 7%, var(--campo, transparent));
}
.notificacao-icone {
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}
.notificacao-corpo {
  min-width: 0;
}
.notificacao-titulo {
  font-weight: 600;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.notificacao-vezes {
  margin-left: 6px;
  font-weight: 700;
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-media);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  padding: 0 6px;
}
.notificacao-texto {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.notificacao-meta {
  font-size: calc(11px * var(--escala-texto));
  color: var(--tinta-fraca);
  margin-top: 4px;
}
.notificacao-acoes {
  grid-column: 2;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.notificacao-acoes .botao {
  padding: 4px 10px;
  font-size: calc(12px * var(--escala-texto));
}
.notificacao-acoes .botao-texto {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-media);
  text-decoration: underline;
}
.notificacoes-vazio {
  margin: 24px 8px;
  text-align: center;
}
.notificacoes-rodape {
  padding: 10px 16px;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.notificacoes-historico {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--indigo);
  text-decoration: underline;
}
.notificacoes-pagina-topo {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.notificacoes-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--vivo) 60%, var(--linha-forte));
  border-left: 4px solid var(--vivo);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--tinta);
  font-size: calc(13px * var(--escala-texto));
  text-align: left;
  box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, 0.3));
  cursor: pointer;
  animation: entrada 0.2s ease-out;
}
@media (max-width: 640px) {
  .notificacoes-caixa {
    width: 100%;
    border-left: 0;
  }
  .notificacoes-sino {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* Ficha do paciente: aceite do WhatsApp ao trocar o telefone (R6). O rótulo
   fica em linha com a caixa (o `.bloco > label` padrão é coluna), e a nota
   quebra embaixo em cinza. */
.bloco > label.ficha-aceite-whatsapp {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  color: var(--tinta);
  animation: entrada 0.2s ease-out;
}

.bloco > label.ficha-aceite-whatsapp input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--indigo);
}

.bloco > label.ficha-aceite-whatsapp .rotulo-opcional {
  flex-basis: 100%;
}

/* Grade horária: feriados (R15) e link de pagamento (R14). */
.grade-feriados-opcao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}

.grade-feriados-opcao input[type="checkbox"] {
  accent-color: var(--indigo);
}

.grade-feriados-bloqueio {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.link-pagamento-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  animation: entrada 0.2s ease-out;
}

.link-pagamento-qr {
  width: 200px;
  height: 200px;
  max-width: 100%;
  border-radius: var(--raio);
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}

.link-pagamento-caixa input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(12.5px * var(--escala-texto));
}

/* Etiquetas do paciente (N14): editor na ficha e chips na lista. */
.bloco > label.rotulo-solto {
  margin-bottom: 6px;
}

.etiquetas-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.etiquetas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etiquetas-chips:empty {
  display: none;
}

.etiqueta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--indigo) 14%, var(--painel));
  border: 1px solid color-mix(in srgb, var(--indigo) 35%, transparent);
  color: var(--tinta);
  font-size: calc(12.5px * var(--escala-texto));
  animation: entrada 0.15s ease-out;
}

.etiqueta-chip-remover {
  border: 0;
  background: transparent;
  color: var(--tinta-media);
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 50%;
}

.etiqueta-chip-remover:hover,
.etiqueta-chip-remover:focus-visible {
  color: var(--vivo);
  background: color-mix(in srgb, var(--vivo) 12%, transparent);
}

.item-consulta-etiqueta-marcador {
  background: color-mix(in srgb, var(--indigo) 14%, var(--painel));
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--indigo) 35%, transparent);
}

/* Cobranças pendentes (N4): selo no botão e lista no modal. */
.agenda-selo-contagem {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--vivo-solido);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.cobrancas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
}

.cobranca-item {
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  animation: entrada 0.2s ease-out;
}

.cobranca-topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.cobranca-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cobranca-meta {
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
  margin: 4px 0 8px;
}

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

/* Preferências de notificação (lote B do plano N). */
.notificacoes-prefs {
  margin: 0 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
}

.notificacoes-prefs > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--tinta);
}

.notificacoes-prefs-corpo {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: entrada 0.2s ease-out;
}

.notificacoes-prefs-explica {
  margin: 0 0 6px;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}

.notificacoes-prefs-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
}

.notificacoes-prefs-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
}

.notificacoes-prefs-item input[type="checkbox"] {
  accent-color: var(--indigo);
}

.notificacoes-prefs-sub {
  margin-left: 22px;
  color: var(--tinta-media);
}

/* Lembretes por intervalo na ficha (N3). */
.lembretes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.lembretes-lista:empty {
  display: none;
}

.lembrete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  animation: entrada 0.2s ease-out;
}

.lembrete-texto {
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
}

.lembretes-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.lembretes-form > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}

@media (max-width: 720px) {
  .lembretes-form {
    grid-template-columns: 1fr;
  }
}

/* Pré-consulta (N6): o cartão "trazido pelo paciente" (public/pre-consulta.js
   pinta; o mesmo bloco vive em painel/painel.css e app/styles.css). */
.pre-consultas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pre-consulta-cartao {
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  background: var(--campo);
  padding: 10px 12px;
  animation: entrada 0.2s ease-out;
}
.pre-consulta-cabecalho {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 6px;
}
.pre-consulta-cabecalho strong {
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
}
.pre-consulta-meta {
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
}
.pre-consulta-respostas {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 0;
}
.pre-consulta-respostas dt {
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
}
.pre-consulta-respostas dd {
  margin: 0;
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.pre-consulta-anexos {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: calc(13px * var(--escala-texto));
}
.pre-consulta-anexos a {
  color: var(--indigo);
}
.pre-consulta-aviso {
  margin: 8px 0 0;
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
  font-style: italic;
}

.compromisso-pre-consulta {
  margin-top: 12px;
}

/* Foto do consultório no Perfil (N16). */
.perfil-consultorio-foto {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
.perfil-consultorio-foto img {
  max-width: 220px;
  max-height: 140px;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  object-fit: cover;
}

/* Gestão (N7): NPS e "o que podemos melhorar". */
.gestao-melhorias {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
}
.gestao-melhorias h3 {
  margin: 0 0 6px;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
}
.gestao-melhorias-nps,
.gestao-melhorias-vazio {
  margin: 0 0 8px;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}
.gestao-melhorias ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gestao-melhorias li {
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
  overflow-wrap: anywhere;
}
.gestao-melhorias li small {
  color: var(--tinta-media);
}

/* Curvas de crescimento (N12): na ficha e em Ferramentas. */
.crescimento-conteudo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crescimento-figura {
  margin: 0;
}
.crescimento-figura figcaption {
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
  margin-bottom: 4px;
}
.crescimento-canvas {
  width: 100%;
  display: block;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
}
.crescimento-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--escala-texto));
}
.crescimento-tabela th,
.crescimento-tabela td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
}
.crescimento-tabela th {
  color: var(--tinta-media);
  font-weight: 600;
  font-size: calc(12px * var(--escala-texto));
}
.crescimento-tabela .crescimento-alerta td {
  color: var(--vivo);
}
.crescimento-aviso,
.crescimento-rodape {
  margin: 0;
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
}
.crescimento-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  align-items: end;
  margin: 10px 0;
}
.crescimento-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
@media (max-width: 640px) {
  .crescimento-form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Vacinas (N13) na ficha. */
.vacinas-subtitulo {
  margin: 14px 0 6px;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}
.vacinas-resumo-atrasada {
  color: var(--vivo);
  border-color: var(--vivo);
}
.vacinas-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--escala-texto));
}
.vacinas-tabela th,
.vacinas-tabela td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
}
.vacinas-tabela th {
  color: var(--tinta-media);
  font-weight: 600;
  font-size: calc(12px * var(--escala-texto));
}
.vacinas-situacao {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-media);
}
.vacinas-situacao-registrada {
  color: var(--indigo);
  border-color: var(--indigo);
}
.vacinas-situacao-atrasada,
.vacinas-situacao-perdida {
  color: var(--vivo);
  border-color: var(--vivo);
}
.vacinas-situacao-agora,
.vacinas-situacao-proxima {
  color: var(--tinta);
}
.vacinas-linha-futura td {
  color: var(--tinta-media);
}
.vacinas-futuras {
  margin-top: 8px;
}
.vacinas-futuras summary {
  cursor: pointer;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}
.vacinas-orientacoes {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--tinta);
  font-size: calc(13px * var(--escala-texto));
}
.vacinas-historico {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.vacina-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  animation: entrada 0.2s ease-out;
}
.vacina-texto {
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
}
.vacinas-form {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.vacinas-form > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
@media (max-width: 900px) {
  .vacinas-form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chat interno (N5): botão no topo e painel lateral (reusa o do sino). */
.chat-interno-botao {
  position: relative;
}
.chat-interno-botao-pendente {
  color: var(--indigo);
}
.chat-interno-selo {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--painel);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.chat-interno-caixa {
  width: min(720px, 100%);
}
.chat-interno-topo h3 {
  margin: 0;
}
.chat-interno-aviso {
  margin: 2px 0 0;
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
}
.chat-interno-corpo {
  flex: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 0;
}
.chat-interno-contatos {
  border-right: 1px solid var(--linha);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.chat-interno-contato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--linha);
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
}
.chat-interno-contato:hover,
.chat-interno-contato-ativo {
  background: var(--campo);
}
.chat-interno-contato-nome {
  font-weight: 600;
  font-size: calc(13.5px * var(--escala-texto));
}
.chat-interno-contato-papel {
  grid-column: 1;
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
}
.chat-interno-contato-selo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--painel);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.chat-interno-conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-interno-vazio {
  margin: auto;
  color: var(--tinta-media);
}
.chat-interno-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-interno-msg {
  max-width: 78%;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: var(--raio);
  background: var(--campo);
  border: 1px solid var(--linha);
  color: var(--tinta);
  font-size: calc(13.5px * var(--escala-texto));
  animation: entrada 0.15s ease-out;
}
.chat-interno-msg p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-interno-msg a {
  color: var(--indigo);
}
.chat-interno-minha {
  align-self: flex-end;
  border-color: var(--indigo);
}
.chat-interno-hora {
  display: block;
  margin-top: 4px;
  color: var(--tinta-media);
  font-size: calc(11px * var(--escala-texto));
}
.chat-interno-form {
  border-top: 1px solid var(--linha);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-interno-form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
}
.chat-interno-form-acoes {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.chat-interno-status {
  margin: 0;
  color: var(--tinta-media);
  font-size: calc(12px * var(--escala-texto));
}
.chat-interno-status.erro {
  color: var(--vivo);
}
@media (max-width: 640px) {
  .chat-interno-corpo {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .chat-interno-contatos {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--linha);
  }
  .chat-interno-contato {
    border-bottom: none;
    border-right: 1px solid var(--linha);
  }
  .chat-interno-msg {
    max-width: 92%;
  }
}

/* Campanhas por e-mail (N17). */
.campanhas-resumo {
  margin: 0 0 12px;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}
.campanhas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.campanha-item {
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--campo);
  animation: entrada 0.2s ease-out;
}
.campanha-item-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.campanha-item-topo strong {
  color: var(--tinta);
  font-size: calc(14px * var(--escala-texto));
}
.campanha-status-enviando,
.campanha-status-enviada {
  color: var(--indigo);
  border-color: var(--indigo);
}
.campanha-status-cancelada {
  color: var(--tinta-media);
}
.campanha-item-meta {
  margin: 6px 0 8px;
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
}
.campanha-item-acoes {
  display: flex;
  gap: 8px;
}
.campanha-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 8px 0 12px;
}
.campanha-form > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.campanha-form-larga {
  grid-column: 1 / -1;
}
.campanha-form textarea {
  resize: vertical;
  font: inherit;
}
.campanha-subtitulo {
  margin: 14px 0 4px;
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}
.campanha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.campanha-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--tinta);
  font-size: calc(12.5px * var(--escala-texto));
  cursor: pointer;
}
.campanha-chip:has(input:checked) {
  border-color: var(--indigo);
  color: var(--indigo);
}
.campanha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.campanha-previa {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
}
.campanha-previa-total {
  margin: 0 0 4px;
  color: var(--tinta);
  font-weight: 600;
}
.campanha-previa-nomes {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
  columns: 2;
}
.ficha-novidades {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 10px;
}
@media (max-width: 640px) {
  .campanha-form {
    grid-template-columns: 1fr;
  }
  .campanha-previa-nomes {
    columns: 1;
  }
}

/* =========================================================================
   V2 — A CASCA: lateral + barra superior (painel/navegacao.js, itens em
   painel/navegacao-itens.js). Desktop: lateral de 232px, recolhível a um
   trilho de 64px; tablet (768–1023): trilho; celular (<768): gaveta.
   ========================================================================= */
:root {
  --lateral-largura: 232px;
  --lateral-trilho: 64px;
  --topo-altura: 60px;
}
body.com-lateral {
  padding-left: var(--lateral-largura);
  transition: padding-left 0.18s ease;
}
.lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--lateral-largura);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--painel) 94%, transparent);
  border-right: 1px solid var(--linha);
  z-index: 30;
  transition: width 0.18s ease, transform 0.18s ease;
}
.lateral-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 12px;
  min-height: var(--topo-altura);
}
.lateral-marca .marca-link {
  align-items: center;
}
.lateral-marca .marca-icone {
  width: 28px;
  height: 28px;
}
.lateral-fechar {
  display: none;
  background: transparent;
  border: none;
  color: var(--tinta-media);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--raio);
}
.lateral-fechar svg {
  width: 20px;
  height: 20px;
}
.lateral-lista {
  list-style: none;
  margin: 0;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow-y: auto;
}
.lateral-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--raio);
  color: var(--tinta-media);
  text-decoration: none;
  font-size: calc(14px * var(--escala-texto));
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.lateral-item:hover {
  background: var(--campo);
  color: var(--tinta);
}
.lateral-item:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.lateral-item-atual {
  background: var(--indigo-fundo);
  color: var(--indigo);
  box-shadow: inset 3px 0 0 var(--indigo);
}
.lateral-icone {
  width: 20px;
  height: 20px;
  flex: none;
}
.lateral-rotulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lateral-item-trancado {
  opacity: 0.72;
}
.lateral-cadeado {
  margin-left: auto;
  font-size: 11px;
}
.lateral-rodape {
  padding: 10px;
  border-top: 1px solid var(--linha);
}
.lateral-recolher {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--tinta-fraca);
  font: inherit;
  font-size: calc(13px * var(--escala-texto));
  padding: 8px 10px;
  border-radius: var(--raio);
  cursor: pointer;
}
.lateral-recolher svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.18s ease;
}
.lateral-recolher:hover {
  background: var(--campo);
  color: var(--tinta);
}
.lateral-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 29;
}

/* Recolhida (desktop): só ícones. */
@media (min-width: 768px) {
  body.com-lateral.lateral-recolhida {
    padding-left: var(--lateral-trilho);
  }
  .lateral-recolhida .lateral {
    width: var(--lateral-trilho);
  }
  .lateral-recolhida .lateral-marca {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .lateral-recolhida .lateral-marca .marca-nome,
  .lateral-recolhida .lateral-rotulo,
  .lateral-recolhida .lateral-cadeado,
  .lateral-recolhida .lateral-recolher span {
    display: none;
  }
  .lateral-recolhida .lateral-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .lateral-recolhida .lateral-recolher {
    justify-content: center;
  }
  .lateral-recolhida .lateral-recolher svg {
    transform: rotate(180deg);
  }
}
/* Tablet: sempre trilho. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.com-lateral {
    padding-left: var(--lateral-trilho);
  }
  .lateral {
    width: var(--lateral-trilho);
  }
  .lateral-marca {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .lateral-marca .marca-nome,
  .lateral-rotulo,
  .lateral-cadeado,
  .lateral-recolher span {
    display: none;
  }
  .lateral-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .lateral-rodape {
    display: none;
  }
}
/* Celular: gaveta. */
@media (max-width: 767px) {
  body.com-lateral {
    padding-left: 0;
  }
  .lateral {
    width: min(288px, 86vw);
    transform: translateX(-102%);
    box-shadow: var(--elev-3);
  }
  body.lateral-aberta .lateral {
    transform: none;
  }
  .lateral-fechar {
    display: inline-flex;
  }
  .lateral-rodape {
    display: none;
  }
  /* Mais específico que a regra base (que vem depois no arquivo). */
  .topo .topo-menu {
    display: inline-flex;
  }
  .topo .topo-conta-nome {
    display: none;
  }
}

/* A barra superior por dentro. */
.topo-menu {
  display: none;
}
.topo-titulo {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 500;
  font-size: calc(19px * var(--escala-texto));
  color: var(--tinta);
}
.topo .controles {
  margin-left: auto;
}
.topo-proprios {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topo-conta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topo-conta-nome {
  color: var(--tinta-media);
  font-size: calc(13.5px * var(--escala-texto));
  text-decoration: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 6px 4px;
  border-radius: var(--raio);
}
.topo-conta-nome:hover {
  color: var(--tinta);
}
.avatar-foto-topo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  body.com-lateral,
  .lateral,
  .lateral-recolher svg {
    transition: none;
  }
}

/* =========================================================================
   V2 — CAMPOS: um desenho só, dentro e fora de .bloco e no modal. Antes cada
   tela estilizava os seus (tel/email/search ficavam brancos na ficha).
   ========================================================================= */
.conteudo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
.conteudo select,
.conteudo textarea,
.modal-caixa input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
.modal-caixa select,
.modal-caixa textarea {
  font-family: inherit;
  font-size: calc(14px * var(--escala-texto));
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 8px 10px;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.conteudo input::placeholder,
.conteudo textarea::placeholder,
.modal-caixa input::placeholder,
.modal-caixa textarea::placeholder {
  color: var(--tinta-fraca);
}
.conteudo input:focus-visible,
.conteudo select:focus-visible,
.conteudo textarea:focus-visible,
.modal-caixa input:focus-visible,
.modal-caixa select:focus-visible,
.modal-caixa textarea:focus-visible {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 28%, transparent);
}
.conteudo textarea,
.modal-caixa textarea {
  line-height: 1.5;
  resize: vertical;
}
.conteudo input:disabled,
.conteudo select:disabled,
.conteudo textarea:disabled,
.modal-caixa input:disabled,
.modal-caixa select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Caixa de marcar dentro de um label de bloco: `.bloco > label` empilha rótulo
   e campo em coluna (certo para texto), mas uma caixa ao lado do seu texto é
   LINHA — senão a caixa fica em cima, centralizada ("Eu também atendo" na
   clínica, "Avisar a lista" na telemedicina). */
.bloco > label:has(> input[type="checkbox"]),
.bloco > label:has(> input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* =========================================================================
   APARÊNCIA (Perfil → Aparência, V2 · P4)
   ========================================================================= */
/* Densidade compacta: menos respiro, a mesma fonte. Textarea fica fora (tem
   altura mínima própria). */
html[data-densidade="compacta"] .conteudo {
  padding: 14px 24px 56px;
  gap: 18px;
}
html[data-densidade="compacta"] .bloco-topo {
  margin-bottom: 10px;
}
html[data-densidade="compacta"] .resumo-kpi {
  padding: 10px 12px;
}
html[data-densidade="compacta"] .cartao-modulo {
  padding: 10px 12px;
}
html[data-densidade="compacta"] .cartao-modulo p {
  display: none;
}
html[data-densidade="compacta"] .lateral-item {
  padding: 6px 12px;
}
html[data-densidade="compacta"] .item-consulta {
  padding: 8px 12px;
}
html[data-densidade="compacta"] .conteudo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]),
html[data-densidade="compacta"] .conteudo select {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* A lista de módulos do menu, com setas; os atalhos reusam .config-opcao. */
.aparencia-modulos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}
.aparencia-modulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  background: var(--campo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: calc(13.5px * var(--escala-texto));
  color: var(--tinta);
}
.aparencia-modulo-nome {
  flex: 1;
}
.aparencia-modulo-setas {
  display: flex;
  gap: 4px;
}
.aparencia-modulo-setas .botao {
  padding: 2px 9px;
  font-size: 13px;
  line-height: 1.4;
}

/* =========================================================================
   NOTÍCIAS — EDITOR DE IMAGEM (admin; painel/imagem-de-noticia.js)
   A prévia desenha a MESMA variante que vai para o bucket, na largura do
   cartão: a caixa tem a proporção exata (16:9 ou 1.91:1) e a tela ocupa a
   caixa inteira, então nada é cortado nem esticado pelo CSS.
   ========================================================================= */
.imagem-noticia {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.imagem-noticia[aria-busy="true"] {
  cursor: progress;
}
.imagem-noticia-atual {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.imagem-noticia-atual-caixa {
  width: min(320px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--campo);
  box-shadow: 0 0 0 1px var(--linha);
}
.imagem-noticia-atual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imagem-noticia-capa {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--tinta-fraca);
  font-size: calc(13px * var(--escala-texto));
  background: var(--brilho-topo), var(--indigo-fundo);
}
.imagem-noticia-atual-texto {
  margin: 0;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
  flex: 1 1 200px;
}
.imagem-noticia-acoes,
.imagem-noticia-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.imagem-noticia-aviso {
  margin: 0;
  min-height: 1.4em;
  font-size: calc(13px * var(--escala-texto));
  color: var(--tinta-media);
}
.imagem-noticia-aviso[data-tipo="erro"] {
  color: var(--vivo);
}
.imagem-noticia-aviso[data-tipo="atencao"] {
  color: var(--ambar);
}
.imagem-noticia-aviso[data-tipo="ok"] {
  color: var(--verde);
}
.imagem-noticia-envio,
.imagem-noticia-credito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px 14px;
  padding: 12px;
  margin: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--campo);
  min-width: 0;
}
.imagem-noticia-envio[hidden] {
  display: none;
}
.imagem-noticia-envio .imagem-noticia-linha,
.imagem-noticia-credito legend {
  grid-column: 1 / -1;
}
.imagem-noticia-credito legend {
  padding: 0 4px;
  color: var(--tinta-media);
  font-size: calc(12.5px * var(--escala-texto));
}
.imagem-noticia-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.imagem-noticia-rotulo {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta-media);
}
.imagem-noticia-ajuda {
  margin: 0;
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
}
.imagem-noticia-grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 140 px: no celular (~320 px úteis) cabem duas por linha, e a grade não
     vira uma coluna longa. */
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 10px;
}
.imagem-noticia-grade:empty {
  display: none;
}
.imagem-noticia-candidata {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: left;
  font: inherit;
  color: var(--tinta);
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.imagem-noticia-candidata:hover {
  border-color: var(--indigo-linha);
}
.imagem-noticia-candidata:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.imagem-noticia-candidata[aria-pressed="true"] {
  border-color: var(--indigo);
  box-shadow: 0 0 0 1px var(--indigo), var(--elev-1);
}
.imagem-noticia-mini {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--campo);
}
/* Miniatura INTEIRA (contain): na grade o admin julga a imagem, não o corte. */
.imagem-noticia-mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.imagem-noticia-mini-falhou {
  background: var(--vivo-fundo);
}
.imagem-noticia-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* Raio de controle, não de pílula: no celular o selo da IA quebra em duas linhas. */
.imagem-noticia-selo {
  padding: 1px 8px;
  border-radius: var(--raio);
  border: 1px solid var(--indigo-linha);
  background: var(--indigo-fundo);
  color: var(--indigo);
  font-size: calc(11.5px * var(--escala-texto));
}
.imagem-noticia-selo-ia {
  border-color: var(--proposta-linha);
  background: var(--proposta-fundo);
  color: var(--proposta);
}
.imagem-noticia-origem {
  font-size: calc(12.5px * var(--escala-texto));
  color: var(--tinta);
}
.imagem-noticia-credito-curto,
.imagem-noticia-medida {
  font-size: calc(12px * var(--escala-texto));
  color: var(--tinta-fraca);
  overflow-wrap: anywhere;
}
.imagem-noticia-recusadas summary {
  cursor: pointer;
  color: var(--tinta-media);
  font-size: calc(13px * var(--escala-texto));
}
.imagem-noticia-recusadas-lista {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--tinta-fraca);
  font-size: calc(12.5px * var(--escala-texto));
  overflow-wrap: anywhere;
}
.imagem-noticia-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 14px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}
.imagem-noticia-editor[hidden] {
  display: none;
}
.imagem-noticia-editor > .imagem-noticia-campo,
.imagem-noticia-editor > .imagem-noticia-credito,
.imagem-noticia-editor > .imagem-noticia-selo-ia,
.imagem-noticia-editor > .imagem-noticia-linha {
  grid-column: 1 / -1;
}
.imagem-noticia-coluna {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* A imagem inteira, sem corte, para o clique do foco cair na coordenada certa. */
.imagem-noticia-foco {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  line-height: 0;
  border-radius: var(--raio);
  background: var(--campo);
  cursor: crosshair;
}
.imagem-noticia-foco:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
}
.imagem-noticia-foco-img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  width: auto;
  height: auto;
  border-radius: var(--raio);
}
.imagem-noticia-foco-inativo {
  cursor: default;
}
.imagem-noticia-foco-inativo .imagem-noticia-cruz {
  opacity: 0.45;
}
/* A cruz: dois anéis (tinta e papel) para aparecer sobre imagem clara ou escura. */
.imagem-noticia-cruz {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--tinta);
  box-shadow: 0 0 0 2px var(--papel), inset 0 0 0 2px var(--papel);
  pointer-events: none;
}
.imagem-noticia-cruz::before,
.imagem-noticia-cruz::after {
  content: "";
  position: absolute;
  background: var(--tinta);
  box-shadow: 0 0 0 1px var(--papel);
}
.imagem-noticia-cruz::before {
  left: 50%;
  top: -9px;
  bottom: -9px;
  width: 2px;
  margin-left: -1px;
}
.imagem-noticia-cruz::after {
  top: 50%;
  left: -9px;
  right: -9px;
  height: 2px;
  margin-top: -1px;
}
.imagem-noticia-modo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.imagem-noticia-modo-botao:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Aqui o escolhido é o fundo índigo suave com a tinta do tema e a borda acesa,
   e não o chip sólido comum. Nasceu quando o chip comum pintava branco sobre
   --indigo (~2:1 nos temas escuros); desde 21/09/2026 ele usa --indigo-solido,
   e este fica pela leitura de "opção escolhida" entre prévias de imagem. */
.imagem-noticia-modo-botao.periodo-chip-ativo {
  background: var(--indigo-fundo);
  border-color: var(--indigo);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--indigo);
}
.imagem-noticia-previas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.imagem-noticia-previa {
  margin: 0;
  width: min(var(--largura-previa, 320px), 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.imagem-noticia-previa figcaption {
  font-size: calc(11.5px * var(--escala-texto));
  color: var(--tinta-fraca);
}
/* O contorno é sombra, não borda: com borda, a área da tela fica 2 px menor que
   a caixa 16:9 e a prévia aparece meio por cento esticada (medido). */
.imagem-noticia-previa-caixa {
  width: 100%;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--campo);
  box-shadow: 0 0 0 1px var(--linha);
}
.imagem-noticia-previa-16x9 {
  aspect-ratio: 16 / 9;
}
.imagem-noticia-previa-191 {
  aspect-ratio: 1200 / 630;
}
.imagem-noticia-previa-tela {
  display: block;
  width: 100%;
  height: 100%;
}
.imagem-noticia-alt {
  min-height: 3.2em;
}
.imagem-noticia-editor > .imagem-noticia-selo-ia {
  margin: 0;
  justify-self: start;
  padding: 2px 10px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--proposta-linha);
  font-size: calc(12px * var(--escala-texto));
}
.imagem-noticia-editor > .imagem-noticia-selo-ia[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* Só deslocamento: a candidata nunca nasce invisível (captura em repouso). */
  .imagem-noticia-item {
    animation: imagem-noticia-entra 0.22s ease-out both;
  }
  .imagem-noticia-candidata:hover {
    transform: translateY(-1px);
  }
}
@keyframes imagem-noticia-entra {
  from {
    transform: translateY(6px);
  }
  to {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .imagem-noticia-candidata {
    transition: none;
  }
}
@media (max-width: 760px) {
  .imagem-noticia-editor {
    grid-template-columns: minmax(0, 1fr);
  }
  .imagem-noticia-foco-img {
    max-height: 260px;
  }
}