/* ============================================================
   Layout — a camada mais externa, carregada por último.

   O pedido foi um sistema mais limpo, moderno e organizado, tomando como
   referência os prints de outro sistema (barra lateral escura com grupos,
   cartões claros arredondados, muito espaço em branco, hierarquia clara).
   O que se adaptou daquela referência:

     • barra lateral escura com títulos de grupo em caixa alta e itens
       espaçados, e não uma lista densa;
     • conteúdo em cartões claros de cantos arredondados, com bastante ar
       entre eles e sombra quase imperceptível;
     • títulos pequenos e discretos; o dado é que tem peso visual;
     • largura maior de conteúdo, aproveitando a tela;
     • menos linhas e molduras: separação por espaço, não por borda.

   O que NÃO se adaptou: a paleta. As cores continuam as do Grupo Hoffmann —
   o navy da marca na lateral, o dourado como acento. A referência é laranja
   sobre creme; copiar isso seria trocar a identidade por uma alheia.

   Este arquivo só mexe em aparência. Nenhuma tela mudou de lugar, nenhum
   botão trocou de função: quem usa o sistema hoje não precisa reaprender
   nada. Estilo demais aqui, e não no HTML, é de propósito — assim dá para
   voltar atrás removendo um arquivo.
   ============================================================ */

:root {
  --raio: 14px;
  --raio-p: 10px;
  --ar: 20px;
  --fundo-app: #f4f6f9;
  --cartao: #ffffff;
  --linha-suave: #e9edf3;
  --sombra-1: 0 1px 2px rgba(13, 27, 53, .05);
  --sombra-2: 0 8px 26px -14px rgba(13, 27, 53, .3);
}

body { background: var(--fundo-app); }

/* ---------------- barra superior ---------------- */

.barra {
  height: 60px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linha-suave);
  box-shadow: none;
  padding: 0 22px;
}
.barra-marca { font-size: 18px; letter-spacing: .2px; }
.barra-clinica select {
  border-radius: 999px; padding: 7px 14px; background: var(--fundo-app);
  border-color: var(--linha-suave);
}
.barra-clinica, .barra-contexto { border-left-color: var(--linha-suave); }
.barra-contexto .caminho { font-size: 10.5px; letter-spacing: 1.2px; color: var(--suave); }
.barra-contexto .atual { font-size: 14px; font-weight: 500; }
.barra-icone { width: 38px; height: 38px; border-radius: 12px; }
.barra-icone:hover { background: var(--fundo-app); }
.barra-sair {
  border-radius: 999px; padding: 7px 16px; border-color: var(--linha-suave);
  transition: border-color .14s, color .14s;
}
.barra-sair:hover { border-color: var(--navy); color: var(--navy); }

/* ---------------- barra lateral ---------------- */

.lateral { width: var(--largura-lateral); border-right: none; }
.mod { border-bottom: none; }
.mod + .mod { margin-top: 2px; }
.mod-cabeca {
  font-size: 13.5px; font-weight: 500; letter-spacing: .1px;
  padding: 11px 18px; border-radius: var(--raio-p); margin: 0 10px;
}
.mod-cabeca:hover { background: rgba(255, 255, 255, .06); }
.mod-rodape { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 8px; }

.grupo-rotulo {
  font-size: 10px; letter-spacing: 1.8px; color: #7f8ca8;
  padding: 14px 18px 6px; margin: 0 10px;
}
.lateral .item {
  border-left: none; border-radius: var(--raio-p); margin: 1px 10px;
  padding: 9px 16px; font-size: 13.5px; color: #b9c3d6;
  transition: background .14s, color .14s;
}
.lateral .item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral .item.ativo {
  background: rgba(255, 255, 255, .11); color: #fff; font-weight: 500;
}
.lateral .item.ativo::before {
  content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px; background: var(--gold);
}
.lateral .item { position: relative; }

/* ---------------- geometria ----------------
   A barra ficou mais alta e a lateral mais larga que no desenho antigo. Estas
   três medidas precisam bater entre si, senão sobra faixa em branco embaixo da
   barra ou a lateral cobre o começo do conteúdo. Ficam em variáveis para não
   se perderem uma da outra. */
:root { --altura-barra: 60px; --largura-lateral: 252px; }

.corpo { padding-top: var(--altura-barra); }
.lateral { top: var(--altura-barra); }

/* A área começa depois da lateral e usa o resto da tela. Centralizar com
   max-width aqui seria erro: em monitor largo o bloco centralizado passa por
   baixo da lateral fixa. O limite de leitura fica no conteúdo, não na caixa. */
.area {
  margin-left: var(--largura-lateral);
  margin-right: 0;
  max-width: none;
  padding: var(--ar) 28px 56px;
  min-width: 0;
}
@media (min-width: 1700px) {
  /* telas muito largas: o conteúdo para de esticar, mas encostado à lateral */
  .area > * { max-width: 1460px; }
}

/* ---------------- cartões ---------------- */

.bloco, .cartao, .kpi, .rel-cartao, .cab-clinica, .lead-num, .fd-metrica {
  background: var(--cartao);
  border: 1px solid var(--linha-suave);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}
.bloco { padding: 22px 24px; margin-bottom: 16px; }
.bloco:hover { box-shadow: var(--sombra-1); }
.cartao { padding: 20px 22px; transition: box-shadow .16s, transform .16s, border-color .16s; }
.cartao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); border-color: #dbe2ec; }

.bloco-titulo {
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--suave);
  font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 16px;
}
.bloco-titulo::before { display: none; }
.contador { color: var(--suave); font-weight: 400; letter-spacing: 0; text-transform: none; }

.kpi { padding: 18px 20px; }
.kpi b { font-size: 26px; letter-spacing: -.5px; margin-bottom: 2px; }
.kpi .eyebrow, .eyebrow { font-size: 10.5px; letter-spacing: 1.4px; color: var(--suave); }

.grade { gap: 16px; }

/* ---------------- tabelas ---------------- */

table { border-spacing: 0; }
th {
  background: transparent; border-bottom: 1px solid var(--linha-suave);
  font-size: 10.5px; letter-spacing: 1.3px; color: var(--suave); font-weight: 500;
  padding: 10px 12px;
}
td { border-bottom: 1px solid #f2f5f9; padding: 13px 12px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #fafbfd; }
tr.total td { background: #f7f9fc; border-top: 1px solid var(--linha-suave); }

/* ---------------- formulários e botões ---------------- */

input, select, textarea {
  border-radius: var(--raio-p); border-color: #dfe4ec; padding: 10px 12px;
  transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13, 27, 53, .08); outline: none;
}
.form { gap: 14px 20px; }
.form label > span { font-size: 11.5px; color: var(--rotulo); }

button.acao, button.leve, a.leve {
  border-radius: 999px; padding: 9px 18px; font-size: 13.5px;
  transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
}
button.acao { box-shadow: 0 6px 16px -10px rgba(13, 27, 53, .8); }
button.acao:hover { box-shadow: 0 8px 20px -10px rgba(13, 27, 53, .9); }
button.leve, a.leve { border-color: #dfe4ec; }
button.leve:hover, a.leve:hover { background: var(--fundo-app); border-color: #c8d1de; }
.barra-acoes { gap: 10px; }

.pilula { border-radius: 999px; padding: 3px 11px; font-size: 11.5px; }
.ct-abas {
  border-bottom: none; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: #eef1f6; border-radius: 999px; display: inline-flex;
}
.ct-abas button, .ct-abas button + button {
  border: none; border-radius: 999px; padding: 8px 18px; margin: 0;
  color: var(--rotulo); background: transparent; font-size: 13.5px;
}
.ct-abas button:hover { color: var(--navy); }
.ct-abas button.ativa {
  background: var(--cartao); color: var(--navy); font-weight: 500; box-shadow: var(--sombra-1);
}

/* abas de dentro da clínica, no mesmo desenho */
.cab-clinica { padding: 18px 22px; margin-bottom: 20px; }
.abas-clinica { gap: 4px; }
.aba-cli {
  border: none; border-radius: 999px; padding: 8px 15px; color: var(--rotulo); font-size: 13.5px;
}
.aba-cli:hover { background: var(--fundo-app); color: var(--navy); }
.aba-cli.ativa { background: var(--navy); color: #fff; font-weight: 500; }

/* ---------------- janelas ---------------- */

.fundo { background: rgba(13, 27, 53, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal { border-radius: 18px; border: none; box-shadow: 0 30px 70px -20px rgba(13, 27, 53, .45); }
.modal .cabeca { padding-bottom: 14px; }

/* ---------------- avisos e vazios ---------------- */

.vazio {
  background: transparent; border: 1px dashed var(--linha-suave); border-radius: var(--raio);
  color: var(--suave); padding: 30px 20px; text-align: center;
}
.aviso, .rg-nota { border-radius: var(--raio-p); }

/* ---------------- a pasta da clínica, em lista ou cartões ---------------- */

.cl-modos { display: inline-flex; gap: 4px; padding: 3px; background: #eef1f6; border-radius: 999px; }
.cl-modos button {
  border: none; background: transparent; border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; color: var(--rotulo); cursor: pointer;
}
.cl-modos button.ativa { background: var(--cartao); color: var(--navy); font-weight: 500; box-shadow: var(--sombra-1); }
.cl-lista td .nome { font-weight: 500; color: var(--navy); }
.cl-lista td .sub { font-size: 11.5px; color: var(--suave); }

/* A lateral só se recolhe em 900px (é o que estilo.css faz). O conteúdo tem
   de acompanhar exatamente esse ponto: antes disso ele recuava cedo demais e
   passava por baixo da lateral em telas de 1024px. */
@media (max-width: 900px) {
  .area { margin-left: 0; padding-left: var(--ar); padding-right: var(--ar); }
}
@media (max-width: 620px) {
  :root { --ar: 14px; }
  .bloco { padding: 18px 16px; }
  .ct-abas { display: flex; overflow-x: auto; }
}

/* ---------------- correções de enquadramento ---------------- */

/* cartões de relatório: três botões não cabem lado a lado em coluna estreita */
.rel-cartao { min-width: 0; }
.rel-cartao .pe { flex-wrap: wrap; }
.rel-cartao .pe button, .rel-cartao .pe a { flex: 0 1 auto; }

/* nada de conteúdo empurrando a caixa para fora: a coluna pode encolher */
.bloco, .cartao, .kpi, .grade > *, .colunas > * { min-width: 0; }
table { max-width: 100%; }
/* tabela larga rola dentro do cartão, em vez de esticar a página */
.bloco > table { display: table; }
.rolagem-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A planilha diária rola dentro da própria caixa (.planilha-caixa), não com a
   página. Por isso o cabeçalho colado fica em top:0 do scroller — empurrá-lo
   para baixo da barra do sistema jogava o cabeçalho para dentro das linhas e
   ele passava a cobrir os campos. */
.planilha thead th { top: 0; }

/* O botão flutuante da conversa cobria o que estivesse no canto inferior
   direito: o conteúdo termina antes dele. */
.area { padding-bottom: 96px; }

/* Tabelas largas (fechamento do mês, usuários) empurravam a página inteira
   para o lado em telas menores. Agora elas rolam dentro do próprio cartão —
   inclusive quando estão dentro de uma divisão do cartão, que é o caso das
   telas que agrupam por mês. */
@media (max-width: 1279px) {
  .bloco, .area div:has(> table) { overflow-x: auto; }
  .area table { min-width: max-content; }
}

/* O botão flutuante da conversa fica sobre o canto inferior direito e chegava
   a cobrir botões de ação da planilha diária. Ele encolheu, e a planilha passa
   a terminar acima dele — o conteúdo nunca fica debaixo do botão. */
.chat-bolha { width: 48px; height: 48px; right: 18px; bottom: 18px; font-size: 17px; }
.planilha-caixa { max-height: min(62vh, calc(100vh - 250px)); }
.bloco:last-child { margin-bottom: 8px; }

/* Na planilha diária o botão flutuante da conversa cobria a coluna de ações no
   canto inferior direito. Enquanto essa tela está aberta ele recua para um
   canto livre — continua clicável, sem ficar sobre os botões da planilha. */
body[data-tela-atual="diario"] .chat-bolha { bottom: 18px; right: auto; left: 18px; }
@media (min-width: 901px) {
  body[data-tela-atual="diario"] .chat-bolha { left: calc(var(--largura-lateral) + 18px); }
}