/* ════════════════════════════════════════════════════════
   Painel do consultório — pacientes
   --------------------------------------------------------
   O sistema visual (tokens, botões, campos, casca de colunas)
   vem de `/comum/css/painel.css`. Aqui fica só o que é da
   lista e da ficha.

   Sem acento lateral em nada: card de interface do painel não
   leva `border-left`. Estado escolhido usa preenchimento mais
   cor de texto, que é o padrão da casa.
   ════════════════════════════════════════════════════════ */

/* ── Lista ── */
.campo-busca { margin: 0 0 1.1rem; }

.lista-pacientes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.linha-paciente {
  display: grid;
  /* Avatar, nome, dados, último atendimento e, na última coluna, quem já
     avaliou no Google. A coluna existe em toda linha, cheia ou vazia, para o
     selo não puxar o texto das outras. */
  grid-template-columns: auto minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(9.5rem, auto);
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .8rem 1rem;
  border: none;
  border-radius: 10px;
  background: var(--bg-section);
  font-family: var(--f-body);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.linha-paciente:hover { background: var(--bg-alt); }
.linha-paciente.aberta { background: var(--bg-alt); color: var(--terracota-texto); }

.lp-nome { display: flex; align-items: center; gap: .5rem; min-width: 0; }

/* `text-overflow` não age sobre filho de flex, e o nome divide a célula com
   os selos. Mesma caixa própria que a planilha do conteúdo precisou. */
.lp-nome-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}
.linha-paciente.aberta .lp-nome-texto { font-weight: 500; }

.lp-meta,
.lp-ultimo {
  font-size: .78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Abaixo disso a linha de três colunas espreme o nome a ponto de só caberem
   duas palavras. Vira duas colunas, e o último atendimento sai. */
@media (max-width: 720px) {
  .linha-paciente { grid-template-columns: auto minmax(0, 1fr); }
  .lp-ultimo, .lp-meta, .lp-avaliacao { display: none; }

  /* Os selos não cabem ao lado do nome numa tela de 375px: `.selos` é
     `flex: none`, então quem encolhia era sempre o nome, e "Kerleny Raquel
     Gonçalves..." virava reticências ao lado de "abriu o link". Eles descem
     para a linha de baixo, e o nome fica inteiro. */
  .lp-nome { flex-wrap: wrap; row-gap: .3rem; }
  .lp-nome-texto { flex: 1 0 100%; }
  .lp-nome .selos { flex-wrap: wrap; row-gap: .3rem; }
}

/* "Avaliou no Google" mora na última coluna da linha, não ao lado do nome
   (Rafael, 04/09/2026): é estado da paciente, não etiqueta do nome. O único
   selo da lista com ícone, porque é o único que é conquista e não pendência. */
.lp-avaliacao { display: flex; justify-content: flex-end; min-width: 0; }
.selo-avaliou { display: inline-flex; align-items: center; gap: .3rem; }
.selo-avaliou svg { width: 11px; height: 11px; flex: none; }

.lista-vazia {
  padding: 2.4rem 1.2rem;
  border-radius: 10px;
  background: var(--bg-alt);
  text-align: center;
}
.lista-vazia p { margin: 0; font-size: .9rem; }
.lista-vazia-dica { margin-top: .5rem !important; font-size: .8rem !important; color: var(--text-muted); }

/* ════════════════════════════
   Ficha
   ════════════════════════════ */

/* A barra de ações fica ENTRE o cabeçalho e o corpo, e não dentro dele: é o
   que se faz com a paciente, e tem de estar visível sem rolar. */
/* A barra de ações fica ENTRE o cabeçalho e o corpo, e não dentro dele: é o
   que se faz com a paciente, e tem de estar visível sem rolar.

   O `padding-top` não é sobra. Sem ele os botões encostam no filete do
   cabeçalho e a linha de idade e telefone parece cortada — foi o primeiro
   defeito que o Rafael apontou nesta tela. */
.ficha-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1.1rem 1.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-section);
}
.ficha-acoes .btn svg { width: 15px; height: 15px; }

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--terracota-texto);
  transition: background .16s ease;
}
.btn-icone:hover { background: var(--bg-alt); }
.btn-icone svg { width: 17px; height: 17px; }

.ficha-bloco { margin-bottom: 1.8rem; }
.ficha-bloco:last-child { margin-bottom: 0; }

.ficha-bloco-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.ficha-bloco-topo .bloco-titulo { margin-bottom: .9rem; }

.bloco-titulo {
  margin: 0 0 .9rem;
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bloco-vazio { margin: 0; font-size: .85rem; color: var(--text-muted); }

/* ── Cadastro, em leitura ── */
.dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem 1.4rem;
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--bg-alt);
}
.dado { min-width: 0; }
.dado dt {
  margin: 0 0 .2rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dado dd {
  margin: 0;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dado-vazio { color: var(--text-muted); font-style: italic; }

.ficha-observacao {
  margin: .8rem 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* ── Histórico ── */
.historico {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .2rem;
}
.historico li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  padding: .6rem;
  border-radius: 8px;
  background: var(--bg-alt);
}
.historico-discreto { margin-top: .6rem; color: var(--text-muted); }
.historico-discreto li { grid-template-columns: 5.5rem minmax(0, 1fr); }

.hist-data {
  font-size: .78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: .1rem;
}
.hist-corpo { min-width: 0; display: grid; gap: .18rem; }
.hist-nome { font-size: .88rem; }
.hist-obs { font-size: .78rem; color: var(--text-muted); line-height: 1.5; white-space: pre-wrap; }

.btn-fechar-sm { width: 24px; height: 24px; }
.btn-fechar-sm svg { width: 13px; height: 13px; }

/* ── Cartão de coisa a fazer: retorno em aberto, convite em aberto ── */
.cartao-acao {
  padding: .85rem .95rem;
  margin-bottom: .5rem;
  border-radius: 10px;
  background: var(--bg-alt);
}
.cartao-acao:last-child { margin-bottom: 0; }
.ficha-conversa-previa { margin: 0 0 .3rem; font-size: .9rem; line-height: 1.5; color: var(--text-primary); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.cartao-acao-topo {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.cartao-acao-meta { font-size: .76rem; color: var(--text-muted); }
.cartao-acao-obs {
  margin: .55rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
}
.cartao-acao-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
}
.cartao-acao-botoes .btn svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════
   Filas: retornos e avaliações
   --------------------------------------------------------
   Lista de coisas a fazer, com a ação ao lado. Sem coluna
   de detalhe: aqui não se consulta, se resolve. Quem quer o
   dossiê clica no nome e vai para a ficha.
   ════════════════════════════════════════════════════════ */
.fila-resumo { margin: 0; font-size: .82rem; color: var(--text-muted); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.2rem;
}

.fila { display: grid; gap: .55rem; }

/* Com borda, como o `.lista-item` do CMS. Sem ela o cartão era `--bg-section`
   sobre `--bg-page` — #faf8f4 sobre #f5f0e8 —, e dissolvia no fundo. */
.fila-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--raio);
  background: var(--bg-section);
}

.fila-item-corpo { min-width: 14rem; flex: 1; }

/* Empurra as ações para a direita sem `space-between`, que abriria um vão
   entre o avatar e o nome. */
.fila-item .fila-item-acoes { margin-left: auto; }

.fila-item-topo {
  display: flex;
  align-items: center;
  gap: .3rem .75rem;
  flex-wrap: wrap;
}

/* O nome é botão porque leva à ficha. Ele não parece botão de propósito: é
   texto que se pode clicar, como um link, e o sublinhado só aparece ao passar
   o mouse para não poluir uma lista inteira de nomes. */
.fila-nome {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.fila-nome:hover { color: var(--terracota-texto); text-decoration: underline; }

/* O prazo é o fato mais importante da linha. Era o menor texto dela: um selo
   de .6rem em caixa alta carregando uma frase inteira. Agora é linha legível,
   com o ponto que é o idioma da casa para estado — o mesmo de `.aviso::before`.
   Só o que pede ação hoje muda para a cor de alerta: vencido e "vence hoje". */
.fila-prazo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.fila-prazo::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.fila-prazo-vencido,
.fila-prazo-hoje { color: var(--alerta); }
.fila-prazo-agendado { color: var(--terracota-texto); }

.fila-item-meta {
  margin: .3rem 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}
.fila-item-obs {
  margin: .4rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* Dois grupos: o que se faz agora e o que tira a linha da fila. O filete
   entre eles é um separador de grupo, desenhado por pseudo-elemento, e não
   um acento de cartão. */
.fila-item-acoes {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.fila-acoes-grupo { display: flex; align-items: center; gap: .35rem; }
.fila-acoes-resolver::before {
  content: '';
  width: 1px;
  height: 18px;
  margin: 0 .25rem;
  background: var(--border);
}
.fila-item-acoes .btn svg { width: 14px; height: 14px; }

/* Numa coluna de dez linhas, dez botões terracota com brilho e salto ao passar
   o mouse viram uma mancha laranja que treme. O botão continua cheio — chamar
   é a ação da fila —, só sem o brilho e sem o salto. */
.fila-item .btn-primario { box-shadow: none; }
.fila-item .btn:hover,
.fila-item .btn:active { transform: none; }

/* Contagem do filtro "Vencidos", só quando há algum. Mesma regra do resumo
   de pendências: só o vencido muda de cor. */
.filtro-conta-alerta { color: var(--alerta); font-weight: 500; }

/* O `.vazio` da casa, com o miolo do formulário retirado: não há botão
   embaixo, então o parágrafo não precisa da margem que ele deixava. */
.fila-vazia { padding: 2.75rem 1.5rem; background: var(--bg-section); }
.fila-vazia h3 { font-size: 1.45rem; }
.fila-vazia p { margin-bottom: 0; }

@media (max-width: 720px) {
  .fila-item { align-items: flex-start; }
  .fila-item .fila-item-acoes { width: 100%; margin-left: 0; }
  /* Quando os grupos quebram de linha o filete ficaria no começo da linha de
     baixo, separando nada de nada. */
  .fila-acoes-resolver::before { display: none; }
}

/* ════════════════════════════════════════════════════════
   Calendário (dia/semana/mês), em Agendamentos
   --------------------------------------------------------
   O que fazia a grade parecer planilha eram linhas em quatro
   camadas: moldura, filete do cabeçalho, filete à esquerda
   de cada coluna e filete em cima de cada rótulo de hora,
   mais o degradê. Ficaram só a moldura, o filete das colunas
   e o degradê; o rótulo senta EM CIMA da linha, sem linha
   própria, como toda agenda faz.

   Linhas de grade vêm de gap com o fundo por baixo (mês) ou
   do degradê repetido (dia/semana), nunca de `border` em
   cada célula: célula com borda própria dobra a espessura
   na divisa com a vizinha.

   As lavagens são o terracota atual, #a05f3c, em alfa. Não
   é cor nova: é a mesma receita de `.editor-area mark`, só
   que a partir do valor de 23/08/2026, e não do antigo
   rgba(181,112,74) que ainda sobrevive em painel.css.
   ════════════════════════════════════════════════════════ */

.cal-area {
  --cal-lavagem-leve:  rgba(160, 95, 60, .05);
  --cal-lavagem:       rgba(160, 95, 60, .10);
  --cal-lavagem-forte: rgba(160, 95, 60, .15);
  --cal-eixo: 3.5rem;

  display: flex;
  flex-direction: column;
  gap: .85rem;
  /* A mesma altura que `.filtros` ocupa abaixo do cabeçalho na fila. Sem
     isto o conteúdo pulava ao trocar de modo: a fila colava a .8rem do
     filete do cabeçalho e o calendário ficava a 2rem. */
  margin-top: -1.2rem;
}

/* ── Barra de navegação ── */

.cal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.cal-nav .btn-contorno { margin-right: .2rem; }

.cal-setas { display: inline-flex; gap: .1rem; }

/* O título do período é o texto grande da tela: é o que diz onde se está.
   Estava em 1.15rem, do tamanho de um rótulo. */
.cal-titulo {
  margin: 0 .35rem 0 .45rem;
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-ir-data {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.cal-ir-data:hover,
.cal-ir-data[aria-expanded="true"] { background: var(--bg-alt); color: var(--terracota-texto); }
.cal-ir-data:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.cal-ir-data svg { width: 17px; height: 17px; }

/* ── Popover de escolha de data — mês em grade, sem picker nativo do
   navegador. Mesma ideia do datepicker do Flexner-Prontuário (`.dia-cal`),
   reskinada nos tokens daqui: aquele usa o teal e a Inter do outro projeto,
   este usa terracota e Jost. `position: fixed` porque `cal-topo` pode estar
   dentro de uma coluna com `overflow`, que cortaria um popover posicionado
   em relação a ela. */
.cal-popover-data {
  position: fixed;
  z-index: 40;
  width: 17rem;
  padding: .8rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(74, 46, 26, .14);
}
.cal-popover-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.cal-popover-titulo {
  font-family: var(--f-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-primary);
}
.cal-popover-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-popover-dsem {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.6rem;
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-popover-dia {
  height: 2rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-primary);
  font-family: var(--f-body);
  font-size: .82rem;
  cursor: pointer;
}
.cal-popover-dia:hover { background: var(--bg-alt); }
.cal-popover-dia.is-hoje { color: var(--terracota-texto); font-weight: 600; }
.cal-popover-dia.is-selecionado { background: var(--terracota); color: var(--branco); font-weight: 600; }
.cal-popover-rodape {
  display: flex;
  justify-content: flex-end;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.cal-popover-hoje {
  padding: .3rem .7rem;
  border: none;
  border-radius: var(--raio-sm);
  background: none;
  color: var(--terracota-texto);
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
}
.cal-popover-hoje:hover { background: var(--bg-alt); }

.cal-vistas { flex: none; }

/* Uma linha só, abaixo da barra: quantos agendamentos há no período. Sem ela
   uma semana vazia era 676px de grade em branco sem uma palavra. */
.cal-resumo {
  margin: -.2rem 0 0;
  font-size: .8rem;
  color: var(--text-muted);
}

/* ── Mês ── */

.cal-mes-cabecalho {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 1px;
  margin-bottom: .4rem;
}
.cal-mes-cabecalho span {
  padding-left: .55rem;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-mes-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
}

/* `div role="button"`, e não `<button>`: ver o comentário em calendario.js. */
.cal-mes-dia {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .2rem;
  min-height: 6.75rem;
  padding: .4rem .35rem .5rem;
  background: var(--bg-section);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background .16s ease;
}
/* O hover é a lavagem, e não `--bg-page`: esse é o fundo do dia de outro mês,
   e passar o mouse num dia de setembro não pode fazê-lo parecer de agosto. */
.cal-mes-dia:hover { background: var(--cal-lavagem-leve); }
.cal-mes-dia:focus-visible { outline: 2px solid var(--terracota); outline-offset: -2px; }
.cal-mes-dia-fora { background: var(--bg-page); }
.cal-mes-dia-fora:hover { background: var(--bg-alt); }
.cal-mes-dia-fora .cal-mes-dia-numero { color: var(--text-muted); }

/* O número mora no canto de cima, alinhado ao nome do dia no cabeçalho, num
   disco que só ganha cor em "hoje" — o mesmo disco da coluna de hoje na
   semana. Jost, não Cormorant: o 1 da Cormorant sozinho num disco lê como I. */
.cal-mes-dia-numero {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 1.6rem;
  height: 1.6rem;
  margin-bottom: .1rem;
  border-radius: 50%;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cal-mes-dia-hoje .cal-mes-dia-numero {
  background: var(--terracota);
  color: #faf8f4;
  font-weight: 500;
}

.cal-mes-mais {
  padding-left: .45rem;
  font-size: .72rem;
  color: var(--text-muted);
}

/* Chip do mês e da faixa "sem horário". Lavagem de terracota com letra
   terracota, em vez do bloco de areia com letra mogno: a areia é o token de
   borda e de fundo alternativo, e um agendamento não é fundo. Ao passar o
   mouse o chip enche, que é o mesmo gesto do cartão da grade. */
.cal-item-chip {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  width: 100%;
  padding: .18rem .45rem;
  border: none;
  border-radius: 5px;
  background: var(--cal-lavagem);
  color: var(--terracota-texto);
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background .16s ease, color .16s ease;
}
.cal-item-chip:hover { background: var(--terracota); color: #faf8f4; }
.cal-item-chip .cal-item-hora { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-item-chip .cal-item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Dia e semana ── */

.cal-grade-envolt {
  border: 1px solid var(--border);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--bg-section);
}

.cal-grade-cabecalho {
  display: grid;
  grid-template-columns: var(--cal-eixo) repeat(var(--cal-colunas), 1fr);
  border-bottom: 1px solid var(--border);
}

.cal-eixo-vazio {
  padding: .35rem .5rem .35rem .2rem;
  font-size: .68rem;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-muted);
}

/* Sem filete no cabeçalho das colunas: as linhas verticais começam na grade,
   onde separam horários. Aqui só separariam nomes de dia. */
.cal-coluna-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .65rem 0 .55rem;
}
.cal-coluna-dia-nome {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cal-coluna-dia-numero {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.cal-coluna-cabecalho.cal-coluna-hoje .cal-coluna-dia-nome { color: var(--terracota-texto); }
.cal-coluna-cabecalho.cal-coluna-hoje .cal-coluna-dia-numero {
  background: var(--terracota);
  color: #faf8f4;
  font-weight: 500;
}

.cal-sem-horario {
  display: grid;
  grid-template-columns: var(--cal-eixo) repeat(var(--cal-colunas), 1fr);
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
}
.cal-coluna-sem-horario {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 0 .3rem;
  border-left: 1px solid var(--border);
}

/* A altura da grade é a do eixo de horas; as colunas esticam até ele. O
   `padding-top` dá lugar ao primeiro rótulo, que senta em cima da primeira
   linha e sem ele bateria no cabeçalho. */
.cal-grade {
  position: relative;
  display: grid;
  grid-template-columns: var(--cal-eixo) repeat(var(--cal-colunas), 1fr);
  padding-top: .8rem;
}

.cal-eixo-horas { position: relative; }
.cal-hora-rotulo {
  display: block;
  height: var(--cal-altura-hora);
  padding-right: .55rem;
  font-size: .7rem;
  line-height: 1;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

.cal-coluna-dia {
  position: relative;
  border-left: 1px solid var(--border);
  background-image: linear-gradient(var(--border) 1px, transparent 1px);
  background-size: 100% var(--cal-altura-hora);
  background-repeat: repeat-y;
}
/* Hoje é uma lavagem, não uma coluna inteira de areia: a areia gritava mais
   que os próprios agendamentos. */
.cal-coluna-dia.cal-coluna-hoje { background-color: var(--cal-lavagem-leve); }

/* A linha do agora, na coluna de hoje. `border-top` aqui é a própria linha,
   não acento de cartão. */
.cal-agora {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--terracota);
  pointer-events: none;
  z-index: 2;
}
.cal-agora::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracota);
}

/* O cartão do agendamento. Lavagem com letra terracota, e não bloco cheio:
   bloco cheio em cima de uma grade creme lê como erro marcado, não como
   compromisso. O anel claro separa dois cartões encostados. Ao passar o mouse
   ele enche — é o convite para abrir a ficha. */
.cal-item {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .28rem .5rem;
  border: none;
  border-radius: 6px;
  background: var(--cal-lavagem-forte);
  color: var(--terracota-texto);
  box-shadow: 0 0 0 1px var(--bg-section);
  font-family: var(--f-body);
  font-size: .72rem;
  line-height: 1.3;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: background .16s ease, color .16s ease;
}
.cal-item:hover { background: var(--terracota); color: #faf8f4; }
.cal-item .cal-item-hora { font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-item .cal-item-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menos de 40px de altura: hora e nome na mesma linha, em vez de o nome ser
   cortado. É o caso de todo retorno de 30 minutos. */
.cal-item-curto {
  flex-direction: row;
  align-items: center;
  gap: .35rem;
  padding: .1rem .45rem;
}
.cal-item-curto .cal-item-hora { flex: none; }

@media (max-width: 720px) {
  .cal-area { --cal-eixo: 2.7rem; }
  .cal-titulo { font-size: 1.2rem; }
  .cal-mes-dia { min-height: 4.4rem; padding: .3rem .25rem .4rem; }
  .cal-mes-dia-numero { width: 1.45rem; height: 1.45rem; font-size: .72rem; }
  /* Numa célula de 45px o chip inteiro não cabe: fica só a hora. O chip sem
     hora mantém o nome, senão ficaria uma barrinha vazia. */
  .cal-mes-dia .cal-item-chip { padding: .12rem .3rem; font-size: .7rem; }
  .cal-mes-dia .cal-item-chip-com-hora .cal-item-titulo,
  .cal-mes-dia .cal-mes-mais { display: none; }
  .cal-item { padding: .2rem .3rem; font-size: .7rem; }
}


/* ════════════════════════════════════════════════════════
   Avatar etário
   --------------------------------------------------------
   As ilustrações vieram do Flexner-Prontuário. O fundo é um
   pastel discreto — #F6DBDB no feminino, #E0EAF3 no
   masculino — e o traço é sóbrio, então elas convivem com o
   creme daqui sem tratamento. Ver o comentário em
   painel/js/avatar.js.
   ════════════════════════════════════════════════════════ */
.pac-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-alt);
}

.pac-avatar-grande { width: 52px; height: 52px; }

/* Sexo em branco não vira desenho: viram as iniciais, sem inferir nada. */
.pac-avatar-iniciais {
  display: inline-grid;
  place-items: center;
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.pac-avatar-grande.pac-avatar-iniciais { font-size: 1rem; }


/* ════════════════════════════════════════════════════════
   Coluna de ação
   --------------------------------------------------------
   Lançar atendimento, marcar retorno, pedir avaliação e
   editar cadastro abrem uma coluna AO LADO da ficha, e não
   uma janela por cima dela: quem lança um atendimento está
   olhando o histórico, e escondê-lo obriga a fechar,
   conferir e abrir de novo. Ver painel/js/coluna-acao.js.

   Ela reusa `.coluna-detalhe` inteira — mesma moldura, mesmo
   cabeçalho parado, mesmo miolo que rola —, então aqui só
   ficam a grade e o que é próprio dela.
   ════════════════════════════════════════════════════════ */
.area-mestre.com-acao {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, clamp(360px, 27vw, 460px))
    minmax(0, clamp(340px, 25vw, 420px));
}

/* Cadastro de paciente nova abre a coluna sem ficha nenhuma aberta. */
.area-mestre.com-acao:not(.com-detalhe) {
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 30vw, 480px));
}

.acao-mensagem {
  margin: 0 0 1.4rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.coluna-acao .campo:last-of-type { margin-bottom: .4rem; }

.acao-multiescolha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .7rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-page);
}
.acao-multiescolha label {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0;
  font-size: .76rem;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  cursor: pointer;
}
.acao-multiescolha input { margin-top: .12rem; accent-color: var(--terracota); }

@media (max-width: 520px) {
  .acao-multiescolha { grid-template-columns: 1fr; }
}

/* Busca de paciente dentro da coluna (campo `tipo: 'busca'` de
   coluna-acao.js), usada pelo "Novo agendamento". A lista fica NO FLUXO,
   logo abaixo da caixa: dentro de `.detalhe-corpo`, que rola, uma lista em
   absoluto seria cortada. Mesmos tokens da lista do seletor, sem a sombra —
   ela não flutua sobre nada. */
.busca-lista {
  margin: .35rem 0 0;
  padding: .3rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-section);
}

.busca-opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 7px;
  cursor: pointer;
}
.busca-opcao.realcada { background: var(--bg-alt); }
.busca-opcao[aria-selected="true"] .busca-opcao-rotulo { color: var(--terracota-texto); font-weight: 500; }

.busca-opcao .pac-avatar { width: 30px; height: 30px; }
.busca-opcao .pac-avatar-iniciais { font-size: .7rem; }

.busca-opcao-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.busca-opcao-rotulo {
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-opcao-meta { font-size: .72rem; color: var(--text-muted); }

/* Depois da busca, a paciente escolhida vira uma identidade confirmada. Nome
   sozinho dentro do campo parece texto digitado e não deixa claro qual ficha
   será usada no orçamento. */
.busca-selecionado {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .85rem;
  border: 1px solid var(--terracota);
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.busca-selecionado[hidden] { display: none; }
.busca-selecionado-identidade {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1;
}
.busca-selecionado .pac-avatar { width: 42px; height: 42px; }
.busca-selecionado .pac-avatar-iniciais { font-size: .78rem; }
.busca-selecionado-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.busca-selecionado-texto strong {
  overflow: hidden;
  font-size: .92rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-selecionado-texto span {
  overflow: hidden;
  font-size: .72rem;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.busca-trocar {
  flex: none;
  padding: .25rem 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 500;
  color: var(--terracota-texto);
  cursor: pointer;
}
.busca-trocar:hover { text-decoration: underline; text-underline-offset: .2em; }
.busca-trocar:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }

/* A busca de vários (`tipo: 'busca-multipla'`, `busca-com-cartao.js`): os
   escolhidos empilhados como cartões da mesma família de `.busca-selecionado`,
   mais baixos porque são vários, e a caixa logo abaixo, sempre à mão para
   acrescentar o próximo. */
.busca-multipla { display: grid; gap: .45rem; }
.busca-multipla-cartoes {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.busca-multipla-cartoes[hidden] { display: none; }
.busca-multipla-cartao { gap: .6rem; padding: .55rem .6rem .55rem .75rem; }
.busca-multipla-cartao .pac-avatar { width: 32px; height: 32px; }
.busca-multipla-cartao .pac-avatar-iniciais { font-size: .7rem; }
.busca-multipla-remover {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}
.busca-multipla-remover:hover { background: var(--bg-section); color: var(--terracota-texto); }
.busca-multipla-remover:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.busca-multipla .busca-lista { margin-top: 0; }

/* "Cadastrar novo paciente" é um botão fixo abaixo da caixa, não uma linha da
   lista: existe com a caixa vazia ou cheia, e a lista só aparece depois que
   alguém digita. */
.busca-novo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .55rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--terracota-texto);
  cursor: pointer;
}
.busca-novo::before { content: '+'; font-size: 1rem; line-height: 1; }
.busca-novo:hover { text-decoration: underline; text-underline-offset: .2em; }
.busca-novo:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; border-radius: 3px; }

.busca-vazia {
  padding: .55rem .6rem;
  font-size: .82rem;
  color: var(--text-muted);
}

/* Três colunas pedem largura, e mais do que parece: medido em produção a
   1520px, a ficha espremia o nome em duas linhas e a grade do cadastro caía
   para uma coluna só. Abaixo disto a lista sai primeiro — ela é a navegação, e
   quem está preenchendo um formulário já escolheu para quem.

   A regra é presa a `.com-detalhe` porque **só vale quando são três**. Sem
   isso, a fila de retornos, que tem lista mais ação e nenhuma ficha, perdia a
   lista e ficava só com o formulário: dois em cima de uma tela larga, e a
   metade da esquerda vazia. */
@media (max-width: 1660px) {
  .area-mestre.com-acao.com-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .area-mestre.com-acao.com-detalhe .coluna-lista { display: none; }
}

/* E abaixo disto fica só a ação, venha ela de onde vier.

   `.com-acao.com-detalhe` precisa estar escrito aqui, e não é redundância:
   a regra de 1660px tem essa especificidade, e ordem no arquivo não
   desempata especificidade. Sem esta linha, ficha aberta mais ação deixava a
   grade em duas colunas de 1fr no celular; a ficha some por `display: none`,
   deixa de ser item da grade, e o formulário ficava na primeira faixa — 149px
   de largura em 375px de tela, com metade da direita vazia. */
@media (max-width: 1180px) {
  .area-mestre.com-acao,
  .area-mestre.com-acao.com-detalhe,
  .area-mestre.com-acao:not(.com-detalhe) { grid-template-columns: minmax(0, 1fr); }
  .area-mestre.com-acao .coluna-lista,
  .area-mestre.com-acao #ficha-paciente { display: none; }
}

/* ════════════════════════════════════════════════════════
   Resumo de pendências
   --------------------------------------------------------
   Fica no alto de Pacientes, que é onde o painel abre: um
   resumo que exige navegar até ele não avisa nada. Cada
   número é um botão que leva à fila já no filtro certo.

   Só aparece o que tem contagem. Uma fileira de zeros ocupa
   a mesma altura e não diz nada; sem pendência nenhuma a
   barra some e a lista sobe.
   ════════════════════════════════════════════════════════ */
.pendencias-hoje {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

.pendencia {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding: .55rem .9rem;
  border: none;
  border-radius: 50px;
  background: var(--bg-alt);
  font-family: var(--f-body);
  color: var(--text);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.pendencia:hover { background: var(--areia); }

/* Jost, e não a Cormorant do resto dos títulos. O algarismo 1 dela é um traço
   sem base nem bandeira, e isolado num selo pequeno lê como a letra I: "I
   retorno vencido". A serifa fica bonita nos numerais gigantes de marca
   d'água do site, que são grandes o bastante para não haver dúvida. */
.pendencia-n {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--terracota-texto);
}
.pendencia-t { font-size: .8rem; }

/* O vencido é o único que muda de cor. Se todos gritassem, nenhum gritaria. */
.pendencia-urgente .pendencia-n { color: var(--alerta); }

/* ════════════════════════════════════════════════════════
   Textos do WhatsApp
   ════════════════════════════════════════════════════════ */
.texto-item {
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  background: var(--bg-section);
}

.texto-item-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .35rem;
}

.texto-titulo {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 400;
}

/* `pre` porque a quebra de linha É o texto: o WhatsApp manda exatamente o que
   está aqui, e um `p` colapsaria os parágrafos numa linha só. */
.texto-previa {
  margin: .8rem 0;
  padding: .9rem 1rem;
  border-radius: 8px;
  background: var(--bg-alt);
  font-family: var(--f-body);
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════
   Avaliações publicadas no Google
   ════════════════════════════════════════════════════════ */
/* O aviso de "ainda não ligado" tem a mesma receita de `.nota-automatico`, e
   não a classe dela: aquela é uma faixa horizontal, com texto e botão lado a
   lado, e aqui são três parágrafos que precisam empilhar. */
/* O aviso sozinho no meio da área, quando ele é a única coisa que a tela tem
   a dizer. Sem isso o bloco fica encostado à esquerda de uma tela vazia e lê
   como falha de carregamento, não como informação. */
.google-centro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(52vh, 420px);
  padding: 1rem 0 2rem;
}
.google-centro .google-desligado {
  margin: 0;
  text-align: center;
  max-width: 52ch;
  padding: 1.6rem 1.8rem;
}
.google-centro .fila-item-acoes { justify-content: center; }

.google-desligado {
  background: var(--bg-alt);
  border-radius: var(--raio-sm);
  padding: 1.1rem 1.2rem;
  margin: .35rem 0 1.5rem;
  max-width: 60ch;
}
.google-desligado p {
  margin: 0 0 .5rem;
  font-size: .86rem;
  line-height: 1.6;
}
.google-desligado p:last-child { margin-bottom: 0; }
.google-desligado .fila-item-meta { font-size: .8rem; }
.google-desligado code {
  padding: .1rem .35rem;
  border-radius: 4px;
  background: var(--bg-section);
  font-size: .95em;
}

/* Sem acento lateral, como todo card do painel: preenchimento em `--bg-section`
   e canto arredondado. Mesma receita de `.texto-item`. */
.avaliacao-item {
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  background: var(--bg-section);
}

.avaliacao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.avaliacao-quem {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.avaliacao-autor {
  font-family: var(--f-display);
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O ouro das estrelas é o terracota de superfície, e não o de texto: aqui ele é
   preenchimento de desenho, não letra. */
.estrelas {
  display: inline-flex;
  gap: 1px;
  color: var(--terracota);
  flex: none;
}
.estrelas svg { width: 15px; height: 15px; }

.avaliacao-texto {
  margin: .7rem 0 0;
  font-size: .92rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.avaliacao-sem-texto { color: var(--text-muted); font-style: italic; }

/* A foto da conta do Google de quem avaliou, no mesmo diâmetro do avatar das
   listas. É `aria-hidden`: o nome ao lado já diz quem é. */
.avaliacao-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--bg-alt);
}

/* As fotos anexadas à avaliação: miniaturas quadradas, sem moldura pesada, na
   mesma receita do anel completo que o painel usa para cartão selecionado. */
.avaliacao-midias {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .7rem;
}
.avaliacao-midia {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px var(--areia);
}
.avaliacao-midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avaliacao-midia:hover img,
.avaliacao-midia:focus-visible img { filter: saturate(.9); }
.avaliacao-midia:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* Vídeo: um triângulo sobre a capa, para não parecer foto que abre foto. */
.avaliacao-midia-video::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 16px solid var(--branco);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.avaliacao-midia-video-sem-capa {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A resposta é da casa e a avaliação é de fora: o degrau de fundo é o que
   separa as duas vozes sem precisar de rótulo grande. */
.avaliacao-resposta {
  margin-top: .9rem;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: var(--bg-alt);
}
.avaliacao-resposta p { margin: 0; font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.avaliacao-resposta .tag { margin-bottom: .3rem; }
.avaliacao-resposta .fila-item-meta { margin-top: .4rem; }

.avaliacao-item .fila-item-acoes { margin-top: .9rem; }

/* Os estados da resposta, com a mesma receita dos selos de publicação do CMS:
   letra colorida e borda em `currentColor`, sem preenchimento. O que precisa de
   atenção é o que ainda depende de gente — aguardando aprovação e falha. */
.selo-sem-resposta         { color: var(--text-muted); border-color: currentColor; }
.selo-aguardando-aprovacao { color: var(--alerta); border-color: currentColor; }
.selo-aprovado             { color: var(--terracota-texto); border-color: currentColor; }
.selo-publicando           { color: var(--terracota-texto); border-color: currentColor; }
.selo-falha-publicacao     { color: var(--alerta); border-color: currentColor; }
/* O modo de demonstração precisa ser visto antes de qualquer número da tela:
   quem olha tem de saber que nada ali veio do Google. */
.selo-demo {
  color: var(--alerta);
  border-color: currentColor;
  background: var(--bg-alt);
}

/* Situação e nota numa barra só. A situação é aba, com o sublinhado de
   `.ficha-abas`: é ela que organiza o trabalho. A nota é recorte secundário,
   à direita, em pílulas pequenas. Eram duas fileiras de doze pílulas do mesmo
   peso — ver `barraDeFiltros()` em avaliacoes-google.js. */
.google-filtros {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  margin: -.9rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.google-situacoes { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.google-aba {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 42px;
  padding: .6rem 0;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: 400 .86rem var(--f-body);
  color: var(--text-muted);
  cursor: pointer;
}
.google-aba:hover { color: var(--text-primary); }
.google-aba[aria-pressed="true"] { color: var(--terracota-texto); border-bottom-color: var(--terracota); font-weight: 500; }
.google-aba .filtro-conta {
  min-width: 1.35rem; padding: .05rem .4rem;
  border-radius: 50px;
  background: var(--bg-alt);
  font-size: .7rem; line-height: 1.5; text-align: center;
  color: var(--text-muted);
}
.google-aba[aria-pressed="true"] .filtro-conta { background: var(--terracota); color: var(--branco); }

.google-notas { display: flex; flex-wrap: wrap; gap: .3rem; padding-bottom: .5rem; }
.google-nota {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 30px;
  padding: .2rem .65rem;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: transparent;
  font: 400 .76rem var(--f-body);
  color: var(--text-muted);
  cursor: pointer;
}
.google-nota svg { width: .8rem; height: .8rem; color: var(--terracota); }
.google-nota .filtro-conta { color: var(--text-muted); }
.google-nota:hover { border-color: var(--terracota); color: var(--terracota-texto); }
.google-nota[aria-pressed="true"] { background: var(--bg-alt); border-color: var(--terracota); color: var(--terracota-texto); font-weight: 500; }

/* A conexão, aberta pelo botão do cabeçalho na coluna da direita. */
.google-conexao p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.6; }
.google-conexao .fila-item-meta { font-size: .85rem; }
.google-conexao .fila-item-acoes { margin-top: 1.2rem; flex-wrap: wrap; }

/* O selo mora junto da data, no canto do cartão, e a linha é de texto pequeno:
   sem isso o selo herda o alinhamento da linha e desce meio pixel. */
.avaliacao-topo .fila-item-meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* ════════════════════════════════════════════════════════
   Conversas — o WhatsApp do consultório
   --------------------------------------------------------
   Lista à esquerda, fio à direita, na forma do WhatsApp
   Web. A casca é a mesma `.area-mestre` das outras telas,
   só que com as proporções invertidas: aqui o fio é o
   conteúdo e a lista é a navegação, então a lista fica
   estreita e o fio toma o resto.

   Os balões não copiam o verde do WhatsApp. O que sai da
   casa é areia sobre creme; o que chega é o branco dos
   cartões. A cor de estado continua sendo a da casa: o
   "lido" é terracota, não azul.
   ════════════════════════════════════════════════════════ */

.area-mestre.conversas.com-detalhe {
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}
.area-mestre.conversas.com-detalhe.com-acao {
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr) minmax(0, clamp(360px, 30vw, 460px));
}

/* A espera pelo status da conexão. Ocupa a mesma altura do aviso que viria
   depois, então a lista não salta quando a resposta chega. Sem moldura: pelo
   padrão da casa, caixa informativa é preenchimento, e aqui nem isso — é um
   intervalo, não um conteúdo. */
.conversas-aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 4.2rem;
  margin-bottom: 1.1rem;
}
.conversas-aguardando p {
  margin: 0;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--text-muted);
}
.anel-carregando {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--terracota-texto);
  animation: anel-girando .9s linear infinite;
}
@keyframes anel-girando { to { transform: rotate(360deg); } }

/* Movimento reduzido não perde o sinal de espera: o anel para de girar e
   pulsa de opacidade, que é percebido sem deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .anel-carregando {
    animation: anel-pulsando 1.6s ease-in-out infinite;
    border-top-color: var(--border);
    background: var(--terracota-texto);
    border-color: transparent;
  }
}
@keyframes anel-pulsando { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

.conversas-aviso { margin-bottom: 1.1rem; }
.conversas-aviso p { margin: 0; font-size: .86rem; line-height: 1.55; }
.conversas-aviso code { font-size: .8em; }
/* `.nota-automatico` é uma linha flex com parágrafos de 52ch, feita para uma
   frase e um botão. O diagnóstico é uma lista de quatro ou cinco fatos: um
   por linha, largura inteira, senão eles se enfileiram lado a lado. */
.conversas-conexao { padding: 1.1rem 1.3rem 1.5rem; }
.conversas-diagnostico { display: grid; gap: .6rem; align-items: start; max-width: 62ch; }
.conversas-diagnostico p { max-width: none; margin: 0; font-size: .9rem; line-height: 1.6; }
.conversas-diagnostico .btn { margin-left: .5rem; vertical-align: middle; }
.conversas-perfil { max-width: 62ch; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.conversas-perfil .fila-item-meta { margin: 0 0 .8rem; }
.conversas-perfil-foto { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .8rem; }
.texto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0 0; }
.conversas-diagnostico-linha { display: flex; gap: .5rem; align-items: center; }
.conversas-diagnostico-linha input {
  width: 16rem;
  max-width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  font-family: var(--f-body);
  font-size: .85rem;
}

.conversas-busca { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.conversas-busca input {
  width: 100%;
  padding: .7rem .95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-section);
  font-family: var(--f-body);
  font-size: .9rem;
  color: var(--text-primary);
}
.conversas-busca input:focus { outline: none; border-color: var(--terracota); }

/* ── Filtros da lista ──
   Decisão do Rafael em 24/09/2026, sobre mockup aprovado. A situação é uma
   escolha só, num segmentado; origem, ficha e etiqueta são menus que se somam
   a ela, e o que está valendo aparece em pílulas removíveis. No celular os três
   menus viram uma folha só e a situação desce para o rodapé da coluna. */
.conversas-busca input { flex: 1; min-width: 0; }
.conversas-botao-filtros {
  display: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-primary);
  cursor: pointer;
}
.conversas-botao-filtros[data-ativo="sim"] {
  border-color: var(--terracota);
  background: color-mix(in srgb, var(--terracota) 12%, var(--bg-section));
  color: var(--terracota-texto);
}
.conversas-botao-filtros-conta {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-size: .7rem;
  font-weight: 500;
}

.conversas-filtros-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.conversas-situacao { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--bg-alt); }
.conversas-situacao-opcao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 34px;
  padding: 0 .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-body);
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.conversas-situacao-opcao:hover { color: var(--text-primary); }
.conversas-situacao-opcao[aria-pressed="true"] {
  background: var(--bg-section);
  color: var(--text-primary);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(74,46,26,.14);
}
.conversas-conta-alerta {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-weight: 500;
}
.conversas-divisor { width: 1px; height: 24px; background: var(--border); }
.conversas-menus { display: flex; flex-wrap: wrap; gap: .4rem; }
.conversas-menu-botao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-width: 16rem;
  min-height: 36px;
  padding: 0 .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-section);
  font-family: var(--f-body);
  font-size: .8rem;
  color: var(--text-primary);
  cursor: pointer;
}
.conversas-menu-botao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversas-menu-botao svg { flex: none; }
.conversas-menu-botao:hover,
.conversas-menu-botao[aria-expanded="true"] { border-color: var(--terracota); }
.conversas-menu-botao[data-ativo="sim"] {
  border-color: var(--terracota);
  background: color-mix(in srgb, var(--terracota) 10%, var(--bg-section));
  color: var(--terracota-texto);
}
.conversas-arquivadas {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  margin-left: auto;
  padding: 0 .6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-body);
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
}
.conversas-arquivadas svg { width: 16px; height: 16px; }
.conversas-arquivadas:hover { color: var(--text-primary); }
.conversas-arquivadas[aria-pressed="true"] { background: var(--bg-alt); color: var(--terracota-texto); font-weight: 500; }

.conversas-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .75rem; }
.conversas-ativos-titulo { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.conversas-pilula {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  min-height: 30px;
  padding: 0 .1rem 0 .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--terracota) 12%, var(--bg-section));
  font-size: .78rem;
  color: var(--terracota-texto);
}
.conversas-pilula-remover {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.conversas-pilula-remover:hover { background: color-mix(in srgb, var(--terracota) 16%, transparent); }
.conversas-limpar {
  min-height: 30px;
  padding: 0 .4rem;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  font-size: .78rem;
  color: var(--terracota-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.conversas-ativos-total { font-size: .78rem; color: var(--text-muted); }

/* Fixo, e não absoluto: `.secao-controles` rola e cortaria o menu. A posição
   vem do botão, em `posicionarMenu()`. */
.conversas-menu {
  position: fixed;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: 18.5rem;
  max-width: calc(100vw - 24px);
  overflow-y: auto;
  padding: .4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-section);
  box-shadow: 0 16px 40px rgba(74,46,26,.16);
}
.conversas-menu-grupo { margin: 0; padding: .55rem .6rem .2rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.conversas-menu-opcao {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  min-height: 40px;
  padding: 0 .6rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: var(--f-body);
  font-size: .85rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.conversas-menu-opcao:hover { background: var(--bg-page); }
.conversas-menu-opcao[aria-pressed="true"] {
  background: color-mix(in srgb, var(--terracota) 12%, var(--bg-section));
  color: var(--terracota-texto);
  font-weight: 500;
}
.conversas-menu-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversas-menu-vazio { margin: 0; padding: .6rem; font-size: .8rem; color: var(--text-muted); }
.conversas-opcao-logo { flex: none; width: 17px; height: 17px; object-fit: contain; }

/* A folha só abre pelo botão do celular. */
.conversas-folha { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; }
.conversas-folha-fundo { position: absolute; inset: 0; border: 0; background: rgba(74,46,26,.38); cursor: pointer; }
.conversas-folha-caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
  border-radius: 20px 20px 0 0;
  background: var(--bg-section);
  box-shadow: 0 -12px 32px rgba(74,46,26,.16);
}
.conversas-folha-pega { align-self: center; width: 36px; height: 4px; margin-top: .5rem; border-radius: 999px; background: var(--border); }
.conversas-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem 1rem .25rem; }
.conversas-folha-topo h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; }
.conversas-folha-corpo { flex: 1; min-height: 0; display: grid; gap: 1.2rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1rem .75rem; }
.conversas-folha-secao { display: grid; gap: .5rem; }
.conversas-folha-titulo {
  margin: 0;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.conversas-folha-grupo { margin: .2rem 0 0; font-size: .75rem; color: var(--text-muted); }
.conversas-folha-opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.conversas-folha-opcao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-page);
  font-family: var(--f-body);
  font-size: .88rem;
  color: var(--text-primary);
  cursor: pointer;
}
.conversas-folha-opcao[aria-pressed="true"] {
  border-color: var(--terracota);
  background: color-mix(in srgb, var(--terracota) 12%, var(--bg-section));
  color: var(--terracota-texto);
  font-weight: 500;
}
.conversas-folha-rodape { padding: .75rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.conversas-folha-ver { width: 100%; min-height: 48px; justify-content: center; }

/* A situação no rodapé existe só no celular. É filha da coluna, e não fixa:
   com a conversa aberta a coluna some, e a barra sairia junto. */
.conversas-abas { display: none; }
.conversas-aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  padding: .25rem 0;
  border: 0;
  background: transparent;
  font-family: var(--f-body);
  color: var(--text-muted);
  cursor: pointer;
}
.conversas-aba-icone { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 999px; }
.conversas-aba-rotulo { font-size: .72rem; }
.conversas-aba[aria-pressed="true"] { color: var(--terracota-texto); }
.conversas-aba[aria-pressed="true"] .conversas-aba-icone { background: color-mix(in srgb, var(--terracota) 14%, transparent); }
.conversas-aba[aria-pressed="true"] .conversas-aba-rotulo { font-weight: 500; }
.conversas-aba-conta {
  position: absolute;
  top: -4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-size: .68rem;
  font-weight: 500;
}

@media (max-width: 620px) {
  .conversas .secao-controles .cabecalho h2 { font-size: 1.5rem; }
  .conversas .conversas-resumo { display: none; }
  /* Os três botões do topo cabem numa linha em 375px; em duas, a lista descia. */
  .conversas .secao-controles .cabecalho-acoes { flex-wrap: nowrap; gap: .4rem; }
  .conversas .secao-controles .cabecalho-acoes .btn-sm { padding: .45rem .65rem; font-size: .7rem; letter-spacing: .04em; white-space: nowrap; }
  .conversas-filtros-barra { display: none; }
  .conversas-botao-filtros { display: inline-flex; }
  .conversas-busca input { min-height: 44px; }
  .conversas-abas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: none;
    margin-top: .5rem;
    padding: .35rem .25rem .25rem;
    border-top: 1px solid var(--border);
    background: var(--bg-section);
  }
}

/* ── Lista ── */
.conversas-lista { display: grid; gap: .35rem; }

.conversa-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--bg-section);
  font-family: var(--f-body);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.conversa-item:hover { border-color: var(--border); }
/* Selecionado: preenchimento mais anel, sem acento lateral (regra da casa). */
.conversa-item.aberta {
  background: var(--bg-alt);
  box-shadow: 0 0 0 1px var(--terracota);
}
.conversa-item .pac-avatar { flex: none; }

.conversa-item-corpo { min-width: 0; flex: 1; display: grid; gap: .15rem; }
.conversa-item-topo,
.conversa-item-baixo { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; min-width: 0; }

.conversa-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .97rem;
}
.conversa-item.nao-lida .conversa-nome { font-weight: 500; }
.conversa-item-quem { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.conversa-item-origens { flex: none; display: inline-flex; gap: 3px; }
.conversa-item-origens img { display: block; width: 14px; height: 14px; object-fit: contain; }
/* Quem tem ficha ganha selo; a falta dela, que é a regra, não pinta a linha. */
.conversa-paciente { flex: none; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sucesso); }
.conversa-hora { flex: none; font-size: .72rem; color: var(--text-muted); }
.conversa-item.nao-lida .conversa-hora { color: var(--terracota-texto); }

.conversa-previa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  color: var(--text-muted);
}
.conversa-item.nao-lida .conversa-previa { color: var(--text-primary); }
.conversa-previa-voce { color: var(--text-muted); }

.conversa-badge {
  flex: none;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-size: .72rem;
  font-weight: 500;
}

.conversa-sem-ficha {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--alerta);
}

/* ── Etiquetas ── */
.conversa-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-section);
  font-family: var(--f-body);
  font-size: .72rem;
  color: var(--text-muted);
  cursor: pointer;
}
.conversa-etiqueta-mini { padding: .08rem .45rem; font-size: .7rem; cursor: default; }
.conversa-item-etiquetas, .conversa-topo-etiquetas { display: flex; flex-wrap: wrap; gap: .25rem; margin: .2rem 0 0; }
.conversa-topo-etiquetas { margin-top: .3rem; }

/* ── Respostas rápidas no compositor ── */
.compositor-sugestoes {
  display: grid;
  gap: .15rem;
  max-height: 260px;
  overflow-y: auto;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-section);
}
.compositor-sugestao {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .6rem;
  align-items: baseline;
  width: 100%;
  padding: .45rem .6rem;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--f-body);
  text-align: left;
  cursor: pointer;
}
.compositor-sugestoes[hidden] { display: none; }
.compositor-sugestao.ativa, .compositor-sugestao:hover { background: var(--bg-alt); }
.compositor-sugestao-atalho { font-size: .8rem; font-weight: 500; color: var(--terracota-texto); }
.compositor-sugestao-titulo { font-size: .84rem; color: var(--text-primary); }
.compositor-sugestao-previa { grid-column: 2; font-size: .74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Respostas rápidas na tela de Textos ── */
.cabecalho-secundario { margin-top: 2.4rem; }
.textos-explicacao { margin: -.6rem 0 1rem; }
.texto-atalho { font-family: var(--f-body); font-size: .8em; color: var(--terracota-texto); margin-right: .3rem; }
.texto-item-acoes { display: inline-flex; gap: .4rem; flex: none; }

/* ── Fio ── */
.conversa-fio { display: flex; flex-direction: column; }

.conversa-topo { align-items: center; padding: .9rem 1.1rem; }
.conversa-topo-quem { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.conversa-topo .detalhe-titulo h2 { font-size: 1.3rem; }
.conversa-topo .fila-item-meta { margin-top: .1rem; }
.conversa-topo-origens { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin: .35rem 0 0; font-size: .72rem; color: var(--text-muted); }
.conversa-origem { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(160,95,60,.11); color: var(--terracota-texto); font-weight: 600; }
.conversa-origem img { width: 1rem; height: 1rem; object-fit: contain; flex: none; }
.conversa-topo-avatar { flex: none; }
.conversa-voltar { display: none; }

/* Canto do cabeçalho: o canal dos textos e o X, na linha do nome. As ações
   descem para a linha de baixo, inteira, alinhadas à direita. */
.conversa-topo { flex-wrap: wrap; row-gap: .6rem; }
.conversa-topo-quem { flex: 1 1 16rem; }
.conversa-topo-canto { display: flex; align-items: center; gap: .6rem; flex: none; margin-left: auto; }
.conversa-topo .detalhe-acoes { flex: 1 1 100%; justify-content: flex-end; }
.conversa-canal .visual-opcao { padding: .36rem .8rem; }
.conversa-canal .visual-opcao:disabled { cursor: not-allowed; color: var(--text-muted); background: none; }

.conversa-corpo {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.1rem 1rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(160,95,60,.05), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(160,95,60,.05), transparent 45%),
    var(--bg-page);
}
.conversa-vazia { margin: auto; font-size: .85rem; color: var(--text-muted); text-align: center; }

.conversa-dia {
  display: flex;
  justify-content: center;
  margin: .7rem 0 .4rem;
}
.conversa-dia span {
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.balao {
  position: relative;
  max-width: min(72%, 560px);
  padding: .55rem .75rem .45rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-section);
  box-shadow: 0 1px 1px rgba(74,46,26,.04);
  font-size: .92rem;
  line-height: 1.5;
}
.balao.entrada { align-self: flex-start; }
.balao.saida {
  align-self: flex-end;
  background: var(--bg-alt);
  border-color: transparent;
}
/* Balões seguidos da mesma pessoa formam um grupo: aproximam-se, e só o
   último leva o canto reto que aponta para quem falou. */
.balao:not(.balao-inicio) { margin-top: -.3rem; }
.balao.entrada.balao-fim { border-bottom-left-radius: 5px; }
.balao.saida.balao-fim { border-bottom-right-radius: 5px; }

.balao-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.balao-texto strong { font-weight: 500; }
.balao-texto em { font-style: italic; }
.balao-texto s { color: var(--text-muted); }
.balao-texto a { color: var(--terracota-texto); text-decoration: underline; text-underline-offset: .12em; overflow-wrap: anywhere; }
.balao-texto a:hover { color: var(--argila); }
.balao-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .84em;
  background: rgba(74,46,26,.07);
  border-radius: 5px;
  padding: .05em .3em;
}
pre.balao-mono {
  display: block;
  margin: .25rem 0;
  padding: .45rem .6rem;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.45;
}
.balao-texto blockquote {
  margin: .25rem 0;
  padding: .3rem .6rem;
  border-radius: 8px;
  background: rgba(74,46,26,.06);
  color: var(--text-muted);
  font-size: .95em;
}
.balao-texto ul, .balao-texto ol { margin: .25rem 0; padding-left: 1.35rem; }
.balao-texto li { margin: .08rem 0; padding-left: .1rem; }
.balao-texto li::marker { color: var(--terracota-texto); }

/* Só emoji: grande e sem balão, como no aplicativo. */
.balao.balao-emoji { background: transparent; border-color: transparent; box-shadow: none; padding: .1rem .2rem 0; }
.balao.balao-emoji .balao-texto { font-size: 2.3rem; line-height: 1.15; }
.balao.balao-emoji .balao-rodape { margin-top: -.1rem; }

/* Localização, contato e resposta a botão: rótulo pequeno acima do conteúdo. */
.balao-etiqueta {
  display: block;
  margin: 0 0 .1rem;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.balao-anexo { display: flex; align-items: flex-start; gap: .55rem; padding: .1rem 0; }
.balao-anexo > svg { flex: none; width: 22px; height: 22px; margin-top: .15rem; color: var(--terracota); }
.balao-anexo-texto { display: grid; gap: .1rem; min-width: 0; }
.balao-anexo-texto a { color: var(--terracota-texto); font-size: .82rem; text-decoration: underline; text-underline-offset: .12em; }
.balao-nao-suportada { margin: 0; font-size: .84rem; font-style: italic; color: var(--text-muted); }

/* Aviso do sistema: chip centralizado, como o separador de dia, mas em minúsculas. */
.conversa-sistema { display: flex; justify-content: center; margin: .2rem 0; }
.conversa-sistema[hidden] { display: none; }
.conversa-sistema span {
  max-width: 70%;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--bg-section);
  border: 1px solid var(--border);
  font-size: .74rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: center;
}

/* Onde a leitura recomeça. Fica enquanto a conversa estiver aberta. */
.conversa-nao-lidas {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 .3rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}
.conversa-nao-lidas::before, .conversa-nao-lidas::after { content: ''; flex: 1; height: 1px; background: var(--terracota); opacity: .45; }

/* Botão de descer: gruda no canto de baixo do fio enquanto ele está rolado para cima. */
.conversa-descer {
  position: sticky;
  bottom: .4rem;
  align-self: flex-end;
  margin-top: -2.6rem;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-section);
  color: var(--text-muted);
  box-shadow: 0 8px 22px -10px var(--sombra);
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.conversa-descer:hover { color: var(--terracota-texto); border-color: var(--terracota); }
.conversa-descer[hidden] { display: none; }
.conversa-descer svg { width: 18px; height: 18px; }
.conversa-descer span {
  position: absolute;
  top: -.45rem;
  right: -.3rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--branco);
  font-size: .7rem;
  font-weight: 500;
}
.conversa-descer span[hidden] { display: none; }

.balao-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  margin-top: .15rem;
  font-size: .72rem;
  color: var(--text-muted);
}
.balao-origem {
  padding: .05rem .4rem;
  border-radius: 999px;
  background: rgba(160,95,60,.10);
  color: var(--terracota-texto);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
}
.balao-origem-marketing { display: inline-flex; align-items: center; gap: .22rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.balao-origem-marketing img { width: .8rem; height: .8rem; object-fit: contain; flex: none; }
.balao-cliques {
  margin: .5rem 0 .2rem;
  color: var(--terracota-texto);
  font-size: .78rem;
  line-height: 1.4;
}
.balao-hora { white-space: nowrap; }
.balao-tick { font-size: .72rem; letter-spacing: -.12em; }
.balao-tick-lido { color: var(--terracota-texto); }
.balao-tick-falha { color: var(--alerta); font-weight: 600; letter-spacing: 0; }
.balao-erro { margin: .2rem 0 0; font-size: .74rem; color: var(--alerta); }

.balao-citacao {
  margin: 0 0 .4rem;
  padding: .35rem .6rem;
  border-radius: 8px;
  background: rgba(74,46,26,.06);
  font-size: .8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.balao-citacao-quem { display: block; font-size: .7rem; color: var(--terracota-texto); letter-spacing: .05em; text-transform: uppercase; }

/* O botão de responder só aparece ao passar o mouse, como no WhatsApp. */
.balao-responder {
  position: absolute;
  top: .2rem;
  right: -1.8rem;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 50%;
  background: var(--bg-section);
  color: var(--text-muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}
.balao:hover .balao-responder, .balao-responder:focus-visible { opacity: 1; }

.balao-reacao {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: -.25rem;
}
.balao-reacao.saida { align-self: flex-end; }
.balao-reacao.entrada { align-self: flex-start; }

/* ── Mídia ── */
.balao.com-midia { padding: .35rem; }
.balao.com-midia .balao-texto { padding: .25rem .45rem 0; }
.balao.com-midia .balao-rodape { padding: 0 .45rem .1rem; }
.balao-midia { margin: 0; min-width: 160px; }
.balao-imagem img {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border-radius: 10px;
  object-fit: cover;
}
.balao-figurinha img { max-height: 160px; object-fit: contain; }
.balao-video video { display: block; width: 100%; max-width: 420px; border-radius: 10px; }

/* Nota de voz: o desenho do aplicativo nos tokens da casa, no lugar do
   `<audio controls>` do navegador. Fonte em player-audio.ts. */
.balao-audio { min-width: 0; }
.player-audio {
  --progresso: 0%;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(300px, 62vw);
  padding: .3rem .35rem .1rem .15rem;
}
.player-audio-tocar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--terracota);
  color: var(--branco);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.player-audio-tocar:hover { background: var(--argila); }
.player-audio.tocando .player-audio-tocar { background: var(--argila); }
.player-audio-tocar:active { transform: scale(.94); }
.player-audio-tocar svg { width: 18px; height: 18px; fill: currentColor; }
.player-audio-tocar svg path { transform: translateX(1px); }
.player-audio-meio { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.player-audio-onda {
  position: relative;
  height: 30px;
  cursor: pointer;
  touch-action: none;
  border-radius: 4px;
}
.player-audio-onda:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.player-audio-barras {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}
.player-audio-barras span {
  flex: 1;
  min-height: 3px;
  max-width: 4px;
  border-radius: 2px;
  background: rgba(74,46,26,.24);
}
.player-audio-feito { clip-path: inset(0 calc(100% - var(--progresso)) 0 0); }
.player-audio-feito span { background: var(--terracota); }
.player-audio[data-pronto="nao"] .player-audio-barras span { background: rgba(74,46,26,.16); }
.player-audio-linha { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.player-audio-tempo { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.player-audio-velocidade {
  padding: .05rem .45rem;
  border: 0;
  border-radius: 999px;
  background: rgba(74,46,26,.08);
  color: var(--text-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
}
.player-audio-velocidade:hover { background: rgba(74,46,26,.14); color: var(--terracota-texto); }

/* Prévia de link: o cartão que o celular mostra, montado pelo servidor a
   partir das meta tags `og:`. Fonte em whatsapp-previa.ts. */
.balao-previa {
  display: block;
  margin: .1rem 0 .4rem;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(74,46,26,.05);
  color: inherit;
  text-decoration: none;
}
.balao.saida .balao-previa { background: rgba(74,46,26,.07); }
.balao-previa:hover { background: rgba(74,46,26,.09); }
/* A caixa parte em 1,91:1 e passa à proporção da imagem quando ela carrega
   (entre 4:5 e 1,91:1). A foto aparece inteira; o fundo desfocado, a mesma
   imagem, preenche o que sobra — capa de reel é vertical. */
.balao-previa-imagem {
  position: relative;
  display: block;
  aspect-ratio: 1.91 / 1;
  max-height: 440px;
  overflow: hidden;
  background: rgba(74,46,26,.06);
}
.balao-previa-imagem img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.balao-previa-fundo { object-fit: cover; filter: blur(18px) saturate(.9); transform: scale(1.15); opacity: .75; }
.balao-previa-foto { object-fit: contain; }
/* Mensagem que é só o link: o cartão é o balão, e a URL embaixo sai. */
.balao.balao-so-previa { padding: .3rem; width: min(380px, 100%); }
.balao-so-previa .balao-texto { display: none; }
.balao-so-previa .balao-previa { margin: 0; }
.balao-so-previa .balao-rodape { padding: .2rem .4rem 0; }
.balao-previa-texto { display: grid; gap: .12rem; padding: .5rem .65rem .55rem; }
.balao-previa-site { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.balao-previa-titulo {
  font-weight: 500;
  font-size: .86rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.balao-previa-descricao {
  font-size: .78rem;
  line-height: 1.35;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.balao-documento, .balao-midia-pendente {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .55rem;
}
.balao-midia-espera { font-size: .8rem; color: var(--text-muted); }

/* ── Compositor ── */
.conversa-compositor { display: grid; gap: .5rem; }
.compositor-linha { display: flex; align-items: flex-end; gap: .6rem; }
.compositor-linha textarea {
  flex: 1;
  min-height: 42px;
  max-height: 180px;
  padding: .65rem .9rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-page);
  font-family: var(--f-body);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--text-primary);
  resize: none;
}
.compositor-linha textarea:focus { outline: none; border-color: var(--terracota); box-shadow: 0 0 0 3px rgba(160,95,60,.12); }
.compositor-enviar { flex: none; display: inline-flex; align-items: center; gap: .4rem; box-shadow: none; }
.compositor-anexar { flex: none; width: 42px; height: 42px; color: var(--text-muted); }
.compositor-anexar:hover { color: var(--terracota-texto); }
.compositor-anexar svg { width: 20px; height: 20px; }
.compositor-anexo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem .4rem .7rem;
  border-radius: 8px;
  background: var(--bg-alt);
  font-size: .82rem;
  color: var(--text-primary);
}
.compositor-anexo svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.compositor-anexo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compositor-anexo-tamanho { flex: none; color: var(--text-muted); }
.compositor-anexo .btn-fechar { width: 26px; height: 26px; }
.conversa-compositor.compositor-arrastando { outline: 2px dashed var(--terracota); outline-offset: -6px; }
.compositor-enviar svg { width: 15px; height: 15px; }
.compositor-janela, .conversa-compositor-aviso {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.conversa-compositor-fechado .conversa-compositor-aviso { font-size: .84rem; color: var(--text-primary); }
.conversa-modelos { display: flex; flex-wrap: wrap; gap: .4rem; }
.compositor-citacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .35rem .6rem;
  border-radius: 8px;
  background: var(--bg-alt);
  font-size: .8rem;
  color: var(--text-muted);
}
.compositor-citacao .btn-fechar { width: 26px; height: 26px; }

/* ── Uma coluna só ── */
@media (max-width: 1180px) {
  .area-mestre.conversas.com-detalhe,
  .area-mestre.conversas.com-detalhe.com-acao { grid-template-columns: minmax(0, 1fr); }
  .area-mestre.conversas.com-acao .conversa-fio { display: none; }
  .conversa-voltar { display: inline-flex; }
  .conversa-fechar { display: none; }
  .conversa-fio {
    position: static;
    height: calc(100svh - 7rem);
    border: 1px solid var(--border);
    border-radius: var(--raio);
    background: var(--bg-page);
    overflow: hidden;
  }
  .conversa-fio .detalhe-corpo { overflow-y: auto; padding: 1rem .8rem; }
  .conversa-fio .barra-acoes { position: static; padding: .75rem .8rem; border-top: 1px solid var(--border); background: var(--bg-section); }
  .conversa-topo { padding: .7rem .8rem; }
  .balao { max-width: 86%; }
}

/* No celular o cabeçalho quebra em duas linhas: quem, e depois as ações.
   Sem isso o nome era espremido numa coluna de uma palavra por linha. */
@media (max-width: 620px) {
  .conversa-topo { flex-wrap: wrap; gap: .5rem; }
  .conversa-topo-quem { flex: 1 1 100%; }
  .conversa-topo .detalhe-acoes { width: 100%; justify-content: flex-end; }
  .compositor-enviar span { display: none; }
  .compositor-enviar { padding: .6rem .8rem; }
  .compositor-enviar svg { margin: 0; }
}

.textos-outros { margin: 1rem 0 0; }
.textos-outros p { max-width: none; }

/* ════════════════════════════════════════════════════════
   Orçamentos
   ════════════════════════════════════════════════════════ */

/* A linha inteira abre o orçamento; o nome, que é botão, continua levando à
   ficha. Selecionada ganha anel completo e não acento lateral — ver
   "Desenho do painel" no CLAUDE.md. */
.orc-linha { cursor: pointer; }
.orc-linha:hover { border-color: var(--terracota); }
.orc-linha:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.orc-linha-aberta {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--terracota);
}

/* O valor é o segundo fato da linha, depois do nome: empurrado para a direita
   pelo mesmo `margin-left: auto` que as ações das outras filas usam. */
.orc-valor {
  margin: 0 0 0 auto;
  font-family: var(--f-display);
  font-size: 1.28rem;
  color: var(--terracota-texto);
  white-space: nowrap;
}

/* ── O editor ── */

.orc-itens { margin: 1.6rem 0; }

.orc-itens-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.orc-itens-topo h3 { margin: 0; font-size: 1.2rem; }

.orc-soma {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.35rem;
  color: var(--terracota-texto);
}

.orc-lista { display: grid; gap: .6rem; }

/* O construtor começa pelos dados da paciente e só então abre o editor. Este
   estado deixa explícita a segunda etapa, em vez de parecer uma tela vazia. */
.orc-configuracao-vazia {
  padding: 1.15rem 1.2rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.orc-configuracao-vazia .tag { margin-bottom: .35rem; }
.orc-configuracao-vazia h4 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}
.orc-configuracao-vazia p:last-child {
  margin: .35rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Preenchimento e canto arredondado, sem borda: é o padrão da casa para caixa
   informativa, o mesmo de `.nota-automatico`. */
.orc-item {
  display: grid;
  gap: .45rem;
  padding: .75rem .85rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}

.orc-item-topo {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.orc-item-topo .seletor { flex: 1; min-width: 0; }

.orc-item input[type="text"],
.orc-item input[type="number"] {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  font-family: var(--f-body);
  font-size: .92rem;
  color: var(--text-primary);
}
.orc-item input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }
.orc-item-descricao { font-weight: 500; }
.orc-item-detalhe { font-size: .85rem; }

.orc-item-numeros {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: .5rem;
}
.orc-item-numeros label { display: grid; gap: .2rem; }
.orc-item-numeros span {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.orc-adicionar {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.orc-adicionar .btn svg { width: 14px; height: 14px; }

/* ── Modelos completos por procedimento ── */

.btn-modelos-ativo {
  color: var(--terracota-texto);
  border-color: var(--terracota);
  background: var(--bg-alt);
}

.orc-modelos-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--border);
}
.orc-modelos-intro p {
  max-width: 40rem;
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.orc-modelos-intro .btn { flex: none; }
.orc-modelos-intro .btn svg { width: 14px; height: 14px; }
.orc-modelos-lista { display: grid; gap: .65rem; }

.orc-config-abas {
  display: flex;
  gap: .3rem;
  margin: 0 0 1.25rem;
  padding: .25rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.orc-config-abas button {
  flex: 1;
  padding: .55rem .65rem;
  border: 0;
  border-radius: calc(var(--raio-sm) - 3px);
  background: transparent;
  font-family: var(--f-body);
  font-size: .76rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.orc-config-abas button.ativo {
  background: var(--bg-section);
  color: var(--terracota-texto);
  box-shadow: 0 1px 4px rgba(74, 46, 26, .08);
}
.orc-config-abas button:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }

.orc-modelo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.orc-modelo-card:hover,
.orc-modelo-card:focus-visible {
  border-color: var(--terracota);
  background: var(--bg-alt);
  outline: none;
}
.orc-modelo-card-texto {
  display: grid;
  gap: .2rem;
  min-width: 0;
}
.orc-modelo-card-texto strong {
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
}
.orc-modelo-card-texto span {
  font-size: .75rem;
  color: var(--text-muted);
}
.orc-modelo-card-total {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--terracota-texto);
  white-space: nowrap;
}

.orc-local-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.orc-local-card:hover,
.orc-local-card:focus-visible { border-color: var(--terracota); background: var(--bg-alt); outline: none; }
.orc-local-card-inativo { opacity: .7; }
.orc-local-marca {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  background: transparent;
  color: var(--terracota-texto);
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.orc-local-marca img { display: block; width: 100%; height: 100%; object-fit: contain; }
.orc-local-logo-editor {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.orc-local-marca-grande { width: 112px; height: 66px; }
.orc-local-logo-editor input[type="file"] { width: 100%; font-size: .78rem; color: var(--text-primary); }
.orc-local-logo-editor small { display: block; margin-top: .35rem; color: var(--text-muted); line-height: 1.4; }
.rotulo-opcional { font-size: .7rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.btn-texto {
  margin-top: .55rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--f-body);
  font-size: .76rem;
  color: var(--terracota-texto);
  cursor: pointer;
}
.btn-texto:hover { text-decoration: underline; text-underline-offset: .2em; }

.orc-modelos-vazio {
  padding: 2rem 1.25rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
  text-align: center;
}
.orc-modelos-vazio h3 { margin: 0; font-size: 1.25rem; }
.orc-modelos-vazio p { margin: .35rem 0 0; font-size: .84rem; color: var(--text-muted); }

@media (max-width: 560px) {
  .orc-modelos-intro { flex-direction: column; }
  .orc-modelo-card { grid-template-columns: 1fr; }
  .orc-modelo-card-total { font-size: 1rem; }
  .orc-local-card { grid-template-columns: 48px minmax(0, 1fr); }
  .orc-local-card .selo { grid-column: 2; justify-self: start; }
  .orc-local-marca { width: 48px; }
  .orc-local-logo-editor { grid-template-columns: 1fr; }
  .orc-local-marca-grande { width: 100%; height: 72px; }
}

/* ── O orçamento já enviado, em leitura ── */

.orc-grupo-leitura { margin: 1.3rem 0; }
.orc-grupo-leitura h3 {
  margin: 0 0 .5rem;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}

.orc-linha-leitura {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}
.orc-linha-leitura p { margin: 0; font-size: .95rem; }
.orc-linha-detalhe { font-size: .82rem; color: var(--text-muted); }
.orc-linha-valor { white-space: nowrap; font-weight: 500; }

.orc-total-leitura {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: .9rem 1rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.orc-total-leitura strong {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--terracota-texto);
}

.orc-observacoes-leitura {
  margin: 1.1rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* O aviso da janela de 24h fica colado na barra de ações, onde estaria o
   botão que ele explica. Sem ele o "Baixar PDF" parece a única coisa que o
   painel sabe fazer. */
.orc-aviso-janela {
  margin: 0;
  padding: .7rem .95rem;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 720px) {
  .orc-valor { margin-left: 0; }
}

/* O orçamento na ficha leva à tela de Orçamentos, como o nome da fila leva à
   ficha: texto clicável, não botão desenhado. */
.ficha-orcamento-nome {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--f-body);
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.ficha-orcamento-nome:hover { color: var(--terracota-texto); text-decoration: underline; }

/* Com a coluna de ação aberta e pouca largura, o editor sai como a ficha sai
   na tela de Pacientes: a regra de 1180px lá nomeia `#ficha-paciente`, e este
   é o equivalente daqui. Sem isto, editor e ação dividem a única faixa de
   1fr e os dois ficam estreitos demais para servir a alguma coisa. */
@media (max-width: 1180px) {
  .area-mestre.com-acao #coluna-orcamento { display: none; }
}

/* Área de trabalho: a ficha recebe a maior parte da tela e cada coluna rola
   por dentro. Os controles não dependem da rolagem do documento. */
.painel:has(.conteudo-pacientes) { height: 100dvh; min-height: 0; overflow: hidden; }
.conteudo-pacientes {
  --espaco-painel: 1.25rem;
  padding: var(--espaco-painel);
  min-height: 0;
  overflow: hidden;
}
.pacientes-area { height: 100%; min-height: 0; gap: var(--espaco-painel); align-items: stretch; }
.pacientes-area.com-detalhe { grid-template-columns: minmax(19rem, .65fr) minmax(0, 1fr); }
.pacientes-area .coluna-lista { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pacientes-controles { flex: none; padding: .25rem 0 1rem; }
.pacientes-controles .cabecalho { align-items: center; gap: .75rem; padding-bottom: 1rem; margin: 0 0 1rem; }
.pacientes-titulo { display: flex; align-items: center; gap: .75rem; }
.pacientes-titulo h2 { font-size: 2rem; }
.pacientes-total { color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.pacientes-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.pacientes-ferramentas .pendencias-hoje,
.pacientes-ferramentas .filtros { margin: 0; gap: .5rem; }
.pacientes-ferramentas .filtros { flex: 1; }
.pacientes-ferramentas .pendencia { padding: .5rem .75rem; min-height: 36px; }
.pacientes-controles .campo-busca { margin: 0; }
.pacientes-controles input { background: var(--bg-section); padding: .75rem 1rem; }
.pacientes-resultados { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.pacientes-area .lista-pacientes { display: block; }
.pacientes-area .lista-pacientes > li + li { border-top: 1px solid var(--border); }
.pacientes-area .linha-paciente {
  grid-template-columns: auto minmax(0, 1.7fr) minmax(0, .85fr) minmax(0, 1fr);
  gap: .75rem; padding: .7rem .75rem; border-radius: 6px; min-height: 64px; background: transparent;
  color: var(--text);
}
.pacientes-area .linha-paciente:hover { background: var(--bg-section); }
.pacientes-area .linha-paciente.aberta { background: var(--bg-alt); color: var(--terracota-texto); }
.pacientes-area .lp-avaliacao { grid-column: 2 / -1; justify-content: flex-start; }
.pacientes-area.com-detalhe .linha-paciente { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem; }
.pacientes-area.com-detalhe .pac-avatar { grid-row: 1 / 3; }
.pacientes-area.com-detalhe .lp-nome { flex-wrap: wrap; gap: .3rem; }
.pacientes-area.com-detalhe .lp-nome-texto { width: 100%; white-space: normal; line-height: 1.35; }
.pacientes-area.com-detalhe .lp-meta { grid-column: 2; display: block; }
.pacientes-area.com-detalhe .lp-ultimo { display: none; }
.pacientes-area .coluna-detalhe {
  position: static; height: 100%; min-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 12px; box-shadow: none;
  background: var(--bg-section); animation: none;
}
.pacientes-area .detalhe-topo { padding: 1.25rem; background: var(--bg-section); gap: .75rem; }
.pacientes-area .detalhe-titulo { flex: 1; }
.pacientes-area .detalhe-titulo h2 { font-size: clamp(1.4rem, 1.8vw, 1.8rem); text-wrap: balance; }
.pacientes-area .ficha-acoes { flex: none; padding: .75rem 1.25rem; gap: .5rem; border-bottom: 0; }
.pacientes-area .ficha-acoes .btn { flex: 1 1 auto; justify-content: center; }
.ficha-abas { display: flex; flex: none; padding: 0 1.25rem; gap: 1.5rem; border-bottom: 1px solid var(--border); }
.ficha-abas button {
  font: 500 .9rem var(--f-body); color: var(--text-muted); background: transparent;
  border: 0; border-bottom: 2px solid transparent; padding: .85rem 0; cursor: pointer; min-height: 44px;
}
.ficha-abas button:hover { color: var(--text); }
.ficha-abas button[aria-selected="true"] { color: var(--terracota-texto); border-bottom-color: var(--terracota); }
.pacientes-area .detalhe-corpo { overflow-y: auto; min-height: 0; padding: 1.25rem; }
.pacientes-area .barra-acoes { position: static; padding: .5rem 1.25rem; background: var(--bg-section); border-top: 1px solid var(--border); }
.pacientes-area .dados { background: transparent; padding: 0; gap: 1.25rem 1.5rem; }
.pacientes-area .dado dd { white-space: normal; overflow-wrap: anywhere; }
.pacientes-area .ficha-bloco { margin-bottom: 1.5rem; }
.prontuario-apresentacao h3,
.prontuario-historico h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.prontuario-apresentacao p { margin: .35rem 0 1.25rem; color: var(--text-muted); font-size: .9rem; }
.prontuario-form .campo { margin-bottom: .75rem; }
.prontuario-form textarea { background: var(--bg-page); min-height: 180px; line-height: 1.65; font-size: 1rem; caret-color: var(--terracota-texto); }
.prontuario-salvar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.prontuario-estado { font-size: .8rem; color: var(--text-muted); }
.prontuario-historico { margin-top: 2rem; }
.prontuario-historico-topo { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.prontuario-nota { padding: 1rem 0; border-top: 1px solid var(--border); }
.prontuario-nota header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; font-size: .82rem; }
.prontuario-nota strong { font-weight: 500; }
.prontuario-nota time { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.prontuario-nota p { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; margin: .75rem 0 0; font-size: .95rem; line-height: 1.7; }
.pacientes-area :is(button, a, [tabindex="0"]):focus-visible { outline: 2px solid var(--terracota-texto); outline-offset: 2px; }
/* A seleção era `--bg-alt`, o mesmo bege dos blocos de aviso, do interruptor e
   das colunas do quadro: selecionava e não aparecia, e parecia que o texto não
   selecionava (Rafael, 24/09/2026). Terracota translúcido aparece sobre creme,
   branco e bege. */
.pacientes-area ::selection { background: color-mix(in srgb, var(--terracota) 30%, transparent); color: var(--text-primary); }
.pacientes-area :is(.pacientes-resultados, .detalhe-corpo) { scrollbar-width: thin; scrollbar-color: var(--areia) transparent; }
.pacientes-area.com-acao.com-detalhe { grid-template-columns: minmax(18rem, .6fr) minmax(0, 1fr) minmax(20rem, .8fr); }
.pacientes-area.com-acao:not(.com-detalhe) { grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr); }

/* Orçamento na terceira coluna.
   Formulário de campos cabe em 20rem; orçamento não. Cada item tem seletor de
   grupo, descrição, detalhe e a linha de quantidade mais valor, e a essa
   largura os dois números se espremem um contra o outro. `.orcando` é posta em
   `#area-mestre` enquanto o editor está hospedado, e devolve a sobra para ele
   tirando-a da lista, que ali é navegação e não trabalho. */
.pacientes-area.orcando.com-acao.com-detalhe { grid-template-columns: minmax(15rem, .5fr) minmax(0, .95fr) minmax(24rem, .95fr); }
@media (max-width: 1660px) {
  .pacientes-area.com-acao.com-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pacientes-area.orcando.com-acao.com-detalhe { grid-template-columns: minmax(0, 1fr) minmax(24rem, 1.15fr); }
}
@media (max-width: 1180px) {
  .pacientes-area.com-detalhe,
  .pacientes-area.com-acao.com-detalhe,
  .pacientes-area.com-acao:not(.com-detalhe) { grid-template-columns: minmax(0, 1fr); }
  .pacientes-area.com-detalhe .coluna-lista,
  .pacientes-area.com-acao .coluna-lista { display: none; }
}
@media (max-width: 900px) {
  .conteudo-pacientes { flex: 1; --espaco-painel: .75rem; }
  .painel:has(.conteudo-pacientes) .barra-lateral { flex: none; }
  .painel:has(.conteudo-pacientes) .barra-lateral.menu-aberto { max-height: 75dvh; overflow: auto; }
}
@media (max-width: 600px) {
  .pacientes-controles .cabecalho { padding-bottom: .75rem; margin-bottom: .75rem; }
  .pacientes-titulo h2 { font-size: 1.75rem; }
  .pacientes-ferramentas { gap: .75rem; margin-bottom: .75rem; }
  .pacientes-ferramentas .filtros { flex-basis: 100%; }
  .pacientes-area .linha-paciente { grid-template-columns: auto minmax(0, 1fr); }
  .pacientes-area .detalhe-topo { padding: 1rem .85rem; }
  .pacientes-area .detalhe-titulo h2 { font-size: 1.4rem; }
  .pacientes-area .detalhe-acoes { gap: .1rem; }
  .pacientes-area .ficha-acoes { padding: .5rem .85rem; }
  .pacientes-area .ficha-acoes .btn { font-size: .75rem; letter-spacing: .025em; padding: .55rem .6rem; min-height: 40px; }
  .ficha-abas { padding: 0 .85rem; justify-content: space-between; gap: .5rem; }
  .ficha-abas button { font-size: .8rem; }
  .pacientes-area .detalhe-corpo { padding: 1rem .85rem; }
  .prontuario-salvar { align-items: stretch; flex-direction: column; }
  .prontuario-salvar .btn { width: 100%; min-height: 44px; }
}

/* Rótulos funcionais legíveis também nos controles compactos. */
.tela-login .campo label, .tela-login > .tag { font-size: .75rem; }
.pacientes-area :is(.btn-sm, .selo, .dado dt, .campo label) { font-size: .75rem; }

/* Filas, orçamentos e conversas usam a mesma área útil de Pacientes.
   Cabeçalhos ficam fora da rolagem; listas e editores rolam separadamente. */
.painel:has(.conteudo-operacional) { height: 100dvh; min-height: 0; overflow: hidden; }
.conteudo-operacional {
  --espaco-painel: 1.25rem;
  padding: var(--espaco-painel);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.area-operacional {
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--espaco-painel);
}
.area-operacional .coluna-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.secao-controles {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 60%;
  overflow: auto;
  padding: .25rem 0 1rem;
}
.secao-controles .cabecalho {
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  margin: 0 0 1rem;
}
.secao-controles .cabecalho h2 { font-size: 2rem; }
.secao-controles .cabecalho-acoes { flex-wrap: wrap; gap: .5rem .75rem; min-width: 0; }
.secao-controles .filtros { margin: 0; gap: .5rem; }
.secao-controles .filtro-opcao { min-height: 36px; }
.secao-controles .conversas-busca { margin: 0 0 .75rem; }
.secao-controles .conversas-busca input { background: var(--bg-section); }
.secao-resultados, .area-operacional .cal-resultados {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: .2rem;
}
.area-operacional .fila { gap: .5rem; }
.area-operacional .fila-item { padding: .75rem; gap: .75rem; }
.area-operacional .fila-item-corpo { min-width: min(14rem, 100%); overflow-wrap: anywhere; }
.area-operacional :is(.fila-item-acoes, .fila-acoes-grupo) { flex-wrap: wrap; gap: .5rem; }
.area-operacional .fila-item-acoes { row-gap: .75rem; }
.area-operacional .coluna-detalhe {
  position: static;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  background: var(--bg-section);
  animation: none;
}
.area-operacional .detalhe-topo { padding: 1rem 1.25rem; background: var(--bg-section); gap: .75rem; }
.area-operacional .detalhe-titulo { flex: 1; overflow-wrap: anywhere; }
.area-operacional .detalhe-titulo h2 { font-size: clamp(1.4rem, 1.8vw, 1.8rem); }
.area-operacional .detalhe-acoes { flex-wrap: wrap; gap: .5rem; }
.area-operacional .detalhe-corpo { overflow-y: auto; min-height: 0; padding: 1.25rem; }
.area-operacional .barra-acoes {
  position: static;
  padding: .75rem 1.25rem;
  gap: .5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-section);
}
.area-operacional :is(.btn-sm, .selo, .campo label) { font-size: .75rem; }
.area-operacional :is(.btn-sm, .btn-fechar) { min-height: 36px; }
.area-operacional :is(button, a, input, textarea, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--terracota-texto);
  outline-offset: 2px;
}
.area-operacional ::selection { background: color-mix(in srgb, var(--terracota) 30%, transparent); color: var(--text-primary); }
.area-operacional :is(input, textarea) { caret-color: var(--terracota-texto); }
.area-operacional :is(.secao-controles, .secao-resultados, .cal-resultados, .detalhe-corpo) {
  scrollbar-width: thin;
  scrollbar-color: var(--areia) transparent;
}
.area-operacional :is(.orc-valor, .filtro-conta) { font-variant-numeric: tabular-nums; }

/* A pega ocupa o vão entre colunas, sem cobrir os campos nem mover o conteúdo. */
:is(.pacientes-area, .area-operacional) { position: relative; }
.divisoria-colunas {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  transform: translateX(-50%);
  z-index: 5;
  cursor: col-resize;
  touch-action: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.divisoria-colunas::before {
  content: '';
  width: 3px;
  height: 40px;
  border-radius: 3px;
  background: var(--border);
}
.divisoria-colunas:hover, .divisoria-colunas:focus-visible { background: var(--bg-alt); }
.divisoria-colunas:hover::before, .divisoria-colunas:focus-visible::before { background: var(--terracota-texto); }
.divisoria-colunas:focus-visible { outline: 2px solid var(--terracota-texto); outline-offset: -2px; }
.redimensionando-colunas, .redimensionando-colunas * { cursor: col-resize !important; user-select: none !important; }

/* O orçamento aberto recebe mais largura para os campos e os itens. */
.area-operacional.orcamentos-area.com-detalhe { grid-template-columns: minmax(19rem, .65fr) minmax(0, 1fr); }
.area-operacional.orcamentos-area.com-detalhe.com-acao {
  grid-template-columns: minmax(18rem, .6fr) minmax(0, 1fr) minmax(20rem, .8fr);
}
.area-operacional.com-acao:not(.com-detalhe) { grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr); }

/* As ações do fio podem quebrar sem espremer o nome do paciente. */
.area-operacional .conversa-topo { flex-wrap: wrap; }
.area-operacional .conversa-topo-quem { flex: 1 1 16rem; min-width: 0; }
.area-operacional .conversa-topo .detalhe-acoes { margin-left: auto; }
.area-operacional .conversas-lista { gap: .25rem; }

/* Ao alternar para o calendário, a navegação fica acima da grade rolável. */
.area-operacional .cal-area { flex: 1; min-height: 0; margin: 0; overflow: hidden; }
.area-operacional .cal-controles { flex: 0 1 auto; min-height: 0; max-height: 50%; overflow: auto; }
.area-operacional .cal-resumo { margin: .75rem 0 0; }
.area-operacional .cal-grade { overflow: visible; }
.area-operacional :is(.cal-grade-cabecalho, .cal-mes-cabecalho) {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-section);
}

@media (max-width: 1660px) {
  .area-operacional.orcamentos-area.com-detalhe.com-acao,
  .area-operacional.conversas.com-detalhe.com-acao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1180px) {
  .area-operacional.orcamentos-area.com-detalhe,
  .area-operacional.orcamentos-area.com-detalhe.com-acao,
  .area-operacional.conversas.com-detalhe.com-acao,
  .area-operacional.com-acao:not(.com-detalhe) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .conteudo-operacional { flex: 1; --espaco-painel: .75rem; }
  .painel:has(.conteudo-operacional) .barra-lateral { flex: none; }
  .painel:has(.conteudo-operacional) .barra-lateral.menu-aberto { max-height: 75dvh; overflow: auto; }
}
@media (max-width: 600px) {
  .secao-controles { padding-bottom: .75rem; }
  .secao-controles .cabecalho { padding-bottom: .75rem; margin-bottom: .75rem; }
  .secao-controles .cabecalho h2 { font-size: 1.75rem; }
  .secao-controles .cabecalho-acoes { width: 100%; }
  .secao-controles .fila-resumo { flex-basis: 100%; }
  .area-operacional :is(.btn-sm, .filtro-opcao, .btn-fechar) { min-height: 40px; }
  .area-operacional .fila-item-corpo { min-width: 0; flex-basis: calc(100% - 4rem); }
  .area-operacional .detalhe-topo { padding: .75rem .85rem; }
  .area-operacional .detalhe-corpo { padding: 1rem .85rem; }
  .area-operacional .barra-acoes { padding: .75rem .85rem; }
  .area-operacional .cal-nav { flex-wrap: wrap; row-gap: .5rem; }
  .area-operacional .cal-titulo { white-space: normal; }
}

/* ════════════════════════════════════════════════════════
   A espera
   --------------------------------------------------------
   O esqueleto tem a forma do que vai chegar: a linha da
   paciente, o cartão da avaliação, o balão da conversa. A
   troca vira só o texto aparecendo onde já havia alguma
   coisa, e a tela não salta. Ver painel/js/esqueleto.js.

   Aqui fica só o desenho parado. O brilho que corre por
   cima mora em movimento.css, com a guarda de movimento
   reduzido e a pausa de aba oculta.
   ════════════════════════════════════════════════════════ */
.leitor-apenas {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tela-espera { display: block; }
.tela-espera .cabecalho { margin-bottom: 1.4rem; }

.esqueleto { display: grid; gap: .4rem; }
.esqueleto-barra, .esqueleto-selo, .esqueleto-circulo, .esqueleto-hora, .esqueleto-balao {
  display: block;
  background: var(--bg-alt);
  border-radius: 50px;
}
.esqueleto-barra { height: .7rem; width: 100%; }
.esqueleto-forte { height: .82rem; width: 56%; }
.esqueleto-fraca { width: 36%; background: rgba(232, 221, 200, .6); }
.esqueleto-selo { width: 3.4rem; height: 1.15rem; flex: none; }
.esqueleto-circulo { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.esqueleto-hora { width: 2.2rem; height: .55rem; flex: none; align-self: flex-start; margin-top: .35rem; }
.esqueleto-textos { flex: 1 1 auto; min-width: 0; display: grid; gap: .5rem; }

/* A linha do acervo e das regras, na mesma grade de `.acervo-linha`. A borda
   transparente iguala a altura: sem ela a lista pula 2px quando chega. */
.esqueleto-linha {
  display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr) auto;
  gap: .9rem; align-items: center; padding: .6rem .85rem;
  border: 1px solid transparent; border-radius: var(--raio); background: var(--bg-section);
  min-height: 2.6rem;
}
.esqueleto-linha:nth-child(2n) .esqueleto-barra:first-child { width: 78%; }
.esqueleto-linha:nth-child(3n) .esqueleto-barra:first-child { width: 62%; }
.esqueleto-linha:nth-child(3n + 2) .esqueleto-barra:last-of-type { width: 70%; }

/* Pessoa numa lista, e linha da caixa de entrada. */
.esqueleto-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem .95rem;
  min-height: 3.5rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--raio);
}
.esqueleto[data-forma="conversa"] { gap: .15rem; }
.esqueleto[data-forma="conversa"] .esqueleto-item {
  background: transparent;
  border-color: transparent;
  border-radius: var(--raio-sm);
  padding: .65rem .7rem;
}
.esqueleto[data-forma="conversa"] .esqueleto-circulo { width: 42px; height: 42px; }
.esqueleto-item:nth-child(3n + 2) .esqueleto-forte { width: 42%; }
.esqueleto-item:nth-child(3n) .esqueleto-forte { width: 68%; }
.esqueleto-item:nth-child(2n) .esqueleto-fraca { width: 52%; }
.esqueleto-item:nth-child(4n) .esqueleto-selo { visibility: hidden; }

/* Cartão de fila: avaliação, convite, orçamento, texto. */
.esqueleto[data-forma="cartao"] { gap: .6rem; }
.esqueleto-cartao {
  display: grid; gap: .55rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--raio);
}
.esqueleto-cartao-topo { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.esqueleto-cartao:nth-child(2n) > .esqueleto-barra:nth-of-type(2) { width: 84%; }
.esqueleto-cartao:nth-child(3n) > .esqueleto-barra:first-of-type { width: 92%; }

/* O fio: balões alternando de lado, como a conversa que vem. O que chega é
   branco, o que sai é areia — as mesmas cores dos balões de verdade. */
.esqueleto[data-forma="fio"] { gap: .5rem; padding: 1.2rem 1.4rem; }
.esqueleto-balao {
  height: 2.35rem; width: 44%;
  border-radius: 14px;
  background: var(--bg-section);
  justify-self: start;
}
.esqueleto-balao:nth-child(3n + 1) { width: 58%; height: 3.3rem; }
.esqueleto-balao:nth-child(4n + 2),
.esqueleto-balao:nth-child(4n + 3) { justify-self: end; background: var(--bg-alt); }
.esqueleto-balao:nth-child(4n + 3) { width: 30%; }

/* ── Completar pelo CPF (lote na coluna de ação de Pacientes) ── */
.cpf-lote-barra { height: 6px; margin: -.6rem 0 1rem; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.cpf-lote-barra span { display: block; height: 100%; background: var(--terracota); transition: width .4s ease; }
.cpf-lote-subtitulo { margin: 1.4rem 0 .4rem; font-size: .95rem; font-weight: 500; }
.cpf-lote-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .1rem; }
.cpf-lote-lista li { display: grid; gap: .1rem; padding: .55rem 0; border-top: 1px solid var(--border); font-size: .84rem; line-height: 1.45; color: var(--text-muted); }
.cpf-lote-nome { justify-self: start; padding: 0; border: none; background: none; font: inherit; font-size: .9rem; font-weight: 500; color: var(--text-primary); cursor: pointer; text-align: left; }
.cpf-lote-nome:hover { color: var(--terracota-texto); text-decoration: underline; text-underline-offset: .15em; }
.cpf-lote-ok span { color: var(--sucesso); }
.cpf-lote-alerta span { color: var(--alerta); }

/* App único: casca e listas seguem os componentes do consultório. */
.app-area { min-width: 0; display: flex; flex-direction: column; }
.app-area > .conteudo { width: 100%; min-width: 0; flex: 1; }
.app-abas { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 24px; background: var(--bg-alt); }
.app-abas[hidden], .app-grupo[hidden], .nav-item[hidden] { display: none; }
.app-grupo + .app-grupo { margin-top: 12px; }
.inicio-listas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-items: start; }
.inicio-bloco { padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.inicio-bloco h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
.inicio-bloco > p { margin: 0; font-size: 13px; color: var(--text-muted); }
.inicio-acao { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; color: inherit; text-decoration: none; }
.inicio-acao + .inicio-acao { border-top: 1px solid var(--border); }
.inicio-acao:hover span { text-decoration: underline; }
.inicio-acao small { opacity: .8; }
.inicio-negativa { color: var(--terracota); font-weight: 600; }
#analytics-paginas > .alternar-visual { flex-wrap: wrap; margin-bottom: 20px; }
@media (min-width: 901px) { .rail .app-grupo + .app-grupo { border-top: 1px solid var(--border); padding-top: 10px; } }
@media (max-width: 900px) { .inicio-listas { grid-template-columns: 1fr; gap: 16px; } .app-abas { padding: 10px 16px; } }
@media (max-width: 900px) {
  .barra-lateral.menu-aberto .nav-secao { display: block; margin: 16px 12px 6px; }
  .barra-lateral.menu-aberto .rodape-lateral { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .barra-lateral .rodape-lateral > .nav-item { grid-column: 1 / -1; }
  .barra-lateral .rodape-lateral .usuario-email { width: auto; min-width: 0; }
}
/* A barra recolhida precisa caber também em notebooks de 768px de altura. */
@media (min-width: 901px) {
  .painel.rail .barra-lateral { padding: 12px .9rem; gap: 12px; }
  .painel.rail .nav-item { height: 34px; min-height: 34px; padding-top: 0; padding-bottom: 0; }
  .painel.rail .nav-lista { gap: 0; }
  .painel.rail .app-grupo + .app-grupo { margin-top: 5px; padding-top: 5px; }
  .painel.rail .rodape-lateral { padding-top: 5px; gap: 2px; }
  .painel.rail .usuario-email { display: none; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .painel.rail .nav-item { height: 30px; min-height: 30px; }
  .painel.rail .barra-lateral { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .painel.rail .app-grupo + .app-grupo { margin-top: 3px; padding-top: 3px; }
}
@media (min-width: 901px) {
  .painel:not(.rail) { --sidebar: 224px; }
  .painel:not(.rail) .barra-lateral { padding: 12px; gap: 12px; }
  .painel:not(.rail) .nav-item { min-height: 32px; padding: 6px 8px; font-size: 13px; line-height: 20px; gap: 8px; }
  .painel:not(.rail) .nav-lista { gap: 0; }
  .painel:not(.rail) .app-grupo + .app-grupo { margin-top: 8px; }
  .painel:not(.rail) .nav-secao { font-size: 9px; line-height: 14px; letter-spacing: .12em; margin: 0 0 2px; padding: 0 8px; }
  .painel:not(.rail) .rodape-lateral { padding-top: 6px; gap: 2px; }
}
.app-abas .visual-opcao { display: inline-flex; align-items: center; gap: 7px; }
.app-abas .visual-opcao svg { width: 16px; height: 16px; flex: none; }

.inicio-em-dia { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--text-muted); }
.inicio-em-dia svg { width: 25px; height: 25px; color: var(--sucesso); flex: none; }
.inicio-em-dia p { margin: 0; font-size: 16px; }
.inicio-sem-pendencia { opacity: .75; }
/* Conversa aberta: filtros avançados no botão ao lado da busca, sem segunda linha. */
@media (min-width: 621px) {
  .conversas.com-detalhe .conversas-filtros-barra { flex-wrap: nowrap; gap: 6px; }
  .conversas.com-detalhe .conversas-menus,
  .conversas.com-detalhe .conversas-divisor { display: none; }
  .conversas.com-detalhe .conversas-botao-filtros { display: inline-flex; }
  .conversas.com-detalhe .conversas-situacao-opcao { padding: 0 10px; white-space: nowrap; }
  .conversas.com-detalhe .conversas-arquivadas { white-space: nowrap; padding: 0 6px; }
}
/* Telas integradas: topo compacto e persistente; a lista rola por dentro. */
.app-area:has(> .app-integrado) { height: 100dvh; min-height: 0; overflow: hidden; }
.app-area > .app-integrado:not(.conteudo-operacional) { min-height: 0; overflow: auto; padding: 16px 24px; }
.app-abas { flex: none; }
.app-controles-fixos { position: sticky; top: -16px; z-index: 8; background: var(--bg-page); padding: 12px 0 8px; }
.app-controles-fixos .cabecalho { align-items: center; gap: 12px; padding-bottom: 10px; margin: 0 0 10px; }
.app-controles-fixos .cabecalho h2 { font-size: 28px; }
.app-controles-fixos .cabecalho .tag { display: none; }
.app-controles-fixos .cabecalho .btn { min-height: 36px; padding: 8px 16px; }
.app-controles-fixos .filtros { margin: 0; }
.app-integrado .secao-controles { position: sticky; top: -16px; z-index: 8; background: var(--bg-page); }
@media (max-width: 900px) {
  .app-area:has(> .app-integrado) { height: calc(100dvh - 66px); }
  .app-area > .app-integrado:not(.conteudo-operacional) { padding: 12px 16px; }
  .app-controles-fixos, .app-integrado .secao-controles { top: -12px; }
}
.app-integrado .planilha { overflow: clip; }
.app-integrado .planilha-cabecalho { position: sticky; top: calc(var(--altura-controles-app, 100px) - 16px); z-index: 7; }
@media (max-width: 900px) { .app-integrado .planilha-cabecalho { top: calc(var(--altura-controles-app, 100px) - 12px); } }

/* Notificações de avaliações, sem controles técnicos na fila diária. */
.avaliacoes-notificacoes { margin-left: auto; position: relative; }
#avaliacoes-sino { display: inline-flex; align-items: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 6px 10px; }
#avaliacoes-sino svg { width: 20px; height: 20px; }
#avaliacoes-sino span { border-radius: 99px; padding: 1px 6px; background: var(--terracota); color: white; font-size: 11px; }
.avaliacoes-novas { position: absolute; top: 100%; right: 0; width: min(340px, calc(100vw - 32px)); max-height: 60dvh; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--raio); background: var(--bg-section); z-index: 30; box-shadow: 0 8px 24px #0002; }
.avaliacoes-novas[hidden] { display: none; }
.avaliacoes-novas p { margin: 4px 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.avaliacao-nova { display: block; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.avaliacao-nova:hover { color: var(--terracota); }
.app-integrado[data-secao="avaliacoes"] .google-filtros { position: sticky; top: -16px; z-index: 8; background: var(--bg-page); padding-top: 8px; }
.app-integrado .cabecalho-acoes { flex-wrap: wrap; }
@media (max-width: 900px) {
  .painel:has(.app-integrado) { height: 100dvh; min-height: 0; overflow: hidden; }
  .painel:has(.app-integrado) > .barra-lateral { flex: none; }
  .painel .app-area:has(> .app-integrado) { height: auto; flex: 1; min-height: 0; }
  .app-integrado[data-secao="avaliacoes"] .google-filtros { top: -12px; }
  .app-abas:has(.avaliacoes-notificacoes) { position: relative; padding-right: 62px; }
  .app-abas .avaliacoes-notificacoes { position: absolute; top: 10px; right: 12px; }
}

.avaliacao-destacada { outline: 2px solid var(--terracota); outline-offset: -2px; }

/* A casca intermediária também precisa encolher para que as colunas rolem. */
.app-area:has(> :is(.conteudo-operacional, .conteudo-pacientes)) { min-height: 0; overflow: hidden; }
@media (max-width: 900px) {
  .app-area:has(> :is(.conteudo-operacional, .conteudo-pacientes)) { flex: 1; }
}