/* ==========================================================================
   Design system — BEVET (HealthTech veterinária premium, referência Apple)

   Paleta quase monocromática — branco puro, texto quase-preto, um único
   azul de ação — em vez de uma cor de marca própria espalhada pela
   interface. É a mesma lição por trás de apple.com: a página não "é
   colorida", ela é neutra com um acento pontual, e a hierarquia vem de
   tipografia e espaço, não de cor. Sem segunda cor de acento decorativa
   (nada de latão/bronze/rosa) — o que antes levava uma cor de marca vira
   cinza neutro ou o mesmo azul, mais contido.

   Tipografia inteira em uma família só (peso é que cria hierarquia, não
   fonte trocada) — SF Pro nativa em Mac/iOS via -apple-system, Manrope
   como substituto quase idêntico em qualquer outro sistema. Sem serifa:
   apple.com usa sans em headline grande também, peso alto e tracking
   negativo, não uma fonte editorial separada.

   REGRAS QUE NÃO SE NEGOCIAM (a base pra qualquer tela nova ou revisão):
   - Cor: --tinta é a ÚNICA cor de ação do sistema — link, CTA, foco, estado
     ativo. Nunca em heading, rótulo de dado ou texto de apoio (h1–h4 usam
     --texto). Semânticas (--sucesso/--alerta/--erro) só para o que
     realmente é sucesso/alerta clínico/erro — nunca pra status neutro
     ("aguardando", "novo", "rascunho": ver .tag--aguardando_pagamento).
   - Tipografia: uma família, hierarquia por peso/tamanho, nunca por troca
     de fonte. Ver a escala em h1/h2/h3/h4 logo abaixo — não crie um quinto
     tamanho de heading sem adicionar aqui.
   - Espaçamento: só os passos de --espaco-xs a --espaco-xl (múltiplos de
     4). Um valor solto fora da escala é sinal de que o layout está errado,
     não de que falta um passo novo.
   - Raio: --raio-xs (8, chip pequeno) / --raio-p (10, input/elemento
     pequeno) / --raio (14, padrão de card/painel) / --raio-g (18,
     hero/modal). Botão é 12px fixo (ver .btn). Nunca 999px fora de
     chip/pílula/avatar circular.
   - Sombra: sinal de "isto flutua sobre a página" (modal, dropdown, menu,
     botão fixo — --sombra-flutuante/--sombra-hover), nunca o estado de
     repouso de um card ou painel no fluxo normal. Repouso = borda de 1px,
     ponto final. Ver .card e .painel.
   - Breakpoints: 720px (empilha em 1 coluna, os `.grade--2/3/4` viram
     `1fr`) e 980px (limiar de "cabe lado a lado" pra filtro/nav — ver
     `.crm-shell`, `.filtros-toggle`). Não introduza um terceiro breakpoint
     sem necessidade real de layout.
   - Ícones: só o conjunto SVG de `ICONES` em `static/js/api.js`. Nunca
     emoji como ícone de interface.
   - Botão: três papéis só — primário sólido (`.btn--primario`), contorno
     (`.btn--contorno`) e fantasma/texto (`.btn--fantasma`). Não crie um
     quarto nome pra uma cor que uma dessas três já cobre.
   - Estado: todo container que busca dado assíncrono usa o mesmo
     vocabulário — carregando (`carregandoPatinhas()`), vazio (ícone +
     frase + link de próxima ação), erro (`.alerta--erro` com ação de
     tentar de novo, nunca tela em branco), sucesso (`.alerta--ok`). Ver
     `estadoErro()`/`comTratamentoDeErro()` em `api.js`.
   ========================================================================== */

:root {
  /* Azul de ação — a ÚNICA cor de identidade/ação do sistema, como o
     System Blue do apple.com: CTA, link, foco, estado selecionado. */
  --tinta: #0071E3;             /* brand-primary — mesmo azul de link/CTA do apple.com */
  --tinta-clara: #0058B0;       /* hover — mais escuro, não mais claro (contraste em botão) */
  --tinta-suave: #EDF4FC;       /* tint quase neutro — fundo de chip/estado selecionado */
  --tinta-escura: #111315;      /* quase-preto (não azul-marinho) — hero, rodapé, superfícies escuras */
  --gradiente-escuro: radial-gradient(ellipse 120% 100% at 50% 35%, #24272b 0%, #111315 55%, #08090a 100%);
                                 /* mesma superfície escura, mas com luz suave no centro em vez de
                                    chapada — vinheta discreta, não brilho de spotlight. Usada só
                                    no rodapé e na faixa final de CTA — o hero passou a usar a
                                    versão clara abaixo. */
  --gradiente-claro: radial-gradient(ellipse 120% 100% at 50% 35%, var(--branco) 0%, var(--fundo-alt) 55%, var(--cinza-claro) 100%);
                                 /* mesma vinheta radial, em tom claro — hero de página
                                    institucional (home, seja-parceiro, especialidade): texto
                                    escuro em vez de branco, luz suave no centro. */

  --acao: #0071E3;
  --acao-texto: #0058B0;
  --acao-claro: #2997FF;        /* azul mais claro — só sobre fundo escuro (rodapé, faixa de CTA) */
  --acao-suave: #EDF4FC;

  /* Sinal secundário de informação — cinza neutro, não uma segunda cor. */
  --aqua: #6E6E73;
  --aqua-suave: #F5F5F7;

  /* Acento decorativo vira cinza neutro — eyebrow, sublinhado, ponto de
     marca não competem mais com o azul de ação por atenção. */
  --sol: #86868B;
  --sol-suave: #F5F5F7;
  --sol-texto: #6E6E73;

  /* Sem rosa na paleta — mapeado pro cinza neutro (mesmo raciocínio do
     latão): não abre uma segunda cor de destaque não documentada. */
  --pink: #6E6E73;
  --pink-suave: #F5F5F7;
  --pink-texto: #48484A;

  /* Escala de cinza do apple.com — fria, neutra, sem tingimento verde. */
  --cinza-claro: #D2D2D7;
  --cinza: #86868B;
  --cinza-escuro: #6E6E73;

  --branco: #FFFFFF;            /* surface */
  --fundo: #FFFFFF;             /* background — branco puro é a escolha deliberada aqui */
  --fundo-alt: #F5F5F7;         /* cinza claríssimo do apple.com pra alternar seção */
  --borda: #D2D2D7;

  --texto: #1D1D1F;             /* quase-preto do apple.com, nunca #000 chapado */
  --texto-suave: #6E6E73;

  --sucesso: #1E7E34;
  --alerta: #A85D00;
  --erro: #D70015;

  --sucesso-suave: #E8F5EB;
  --alerta-suave: #FBF0E4;
  --alerta-texto: #7A4600;
  --erro-suave: #FCE8E9;

  /* ── cores de identidade por tipo ──────────────────────────────────────
     Pedido da Dra. Raryna: cada tipo de atendimento, receita e opção com a
     sua cor, e a MESMA cor diferenciando o item onde quer que ele apareça —
     chip da agenda, linha do prontuário, documento, série do gráfico.

     A paleta não foi escolhida a olho (e cresceu de 6 para 10 a pedido da
     Dra. Raryna, revalidada a cada aumento). Passou nas cinco checagens do
     validador de paletas categóricas (banda de luminosidade, piso de croma,
     separação para daltonismo deutan/tritan, piso de visão normal e
     contraste sobre a superfície), no pairlist adjacente, em claro e em
     escuro. A ORDEM importa: é ela que define quais pares ficam vizinhos
     numa legenda, e é sobre pares vizinhos que a checagem passa.

     Dois pares distantes na ordem (azul↔violeta, azul↔ciano) ficam abaixo do
     alvo se comparados isoladamente. Por isso nenhuma cor aqui carrega
     significado sozinha: todo chip traz o rótulo, todo documento traz ícone,
     todo gráfico com duas ou mais séries traz legenda. Cor é reforço, nunca
     a única informação.

     Verde, âmbar e vermelho ficam de fora de propósito: são as cores de
     estado (sucesso, alerta, erro) e emprestá-las a uma categoria faria um
     chip de modalidade parecer um aviso. */
  --cat-1: #0071E3;   --cat-1-suave: #E1EEFC;   /* presencial */
  --cat-2: #DB2777;   --cat-2-suave: #FBE5EF;   /* teleconsulta */
  --cat-3: #0891B2;   --cat-3-suave: #E1F2F6;   /* telemonitoramento */
  --cat-4: #C2410C;   --cat-4-suave: #F8E8E2;   /* teleorientação */
  --cat-5: #7C3AED;   --cat-5-suave: #EFE7FD;   /* receita */
  --cat-6: #4D7C0F;   --cat-6-suave: #EAEFE2;   /* pedido de exames */
  --cat-7: #4338CA;   --cat-7-suave: #E8E7F9;   /* vacina */
  --cat-8: #A16207;   --cat-8-suave: #F4ECE1;   /* peso */
  --cat-9: #9D174D;   --cat-9-suave: #F7E4EC;   /* observação */
  --cat-10: #0D9488;  --cat-10-suave: #E0F2F0;  /* documento / anexo */

  /* Apelidos semânticos: as telas usam ESTES, nunca --cat-N direto. Trocar a
     cor de uma modalidade vira uma linha aqui, e não uma caçada pelo repo. */
  --tipo-presencial: var(--cat-1);          --tipo-presencial-suave: var(--cat-1-suave);
  --tipo-teleconsulta: var(--cat-2);        --tipo-teleconsulta-suave: var(--cat-2-suave);
  --tipo-telemonitoramento: var(--cat-3);   --tipo-telemonitoramento-suave: var(--cat-3-suave);
  --tipo-teleorientacao: var(--cat-4);      --tipo-teleorientacao-suave: var(--cat-4-suave);
  --doc-receita: var(--cat-5);              --doc-receita-suave: var(--cat-5-suave);
  --doc-exames: var(--cat-6);               --doc-exames-suave: var(--cat-6-suave);
  --reg-vacina: var(--cat-7);               --reg-vacina-suave: var(--cat-7-suave);
  --reg-peso: var(--cat-8);                 --reg-peso-suave: var(--cat-8-suave);
  /* A Dra. Raryna pediu cor para TODO tipo, e a décima cor foi encontrada:
     as dez passam juntas nas cinco checagens do validador, no tema claro —
     que é o único do produto. Documento e anexo dividem a mesma cor de
     propósito: os dois são "arquivo guardado", e o ícone diz o resto. */
  --doc-anexo: var(--cat-10);               --doc-anexo-suave: var(--cat-10-suave);
  --reg-documento: var(--cat-10);           --reg-documento-suave: var(--cat-10-suave);
  --reg-observacao: var(--cat-9);           --reg-observacao-suave: var(--cat-9-suave);

  /* Sobre superfície escura (--tinta-escura: hero, rodapé). Contraste
     medido sobre #111315: os três passam AA. */
  --sobre-escuro: rgba(255,255,255,.94);        /* texto principal */
  --sobre-escuro-medio: rgba(255,255,255,.72);  /* texto secundário, links */
  --sobre-escuro-suave: rgba(255,255,255,.6);   /* meta, trilha */
  --sobre-escuro-borda: rgba(255,255,255,.22);  /* divisor, contorno */
  --sobre-escuro-tenue: rgba(255,255,255,.12);  /* preenchimento discreto */

  /* Hover do botão de acento (cinza, já que o acento virou neutro) */
  --sol-claro: #9B9BA1;

  /* Alias legados — mantêm ~170 usos inline nos templates funcionando. */
  --verde: var(--tinta);
  --verde-claro: var(--tinta-clara);
  --verde-suave: var(--tinta-suave);
  --verde-escuro: var(--tinta-escura);
  --laranja: var(--sol);
  --laranja-texto: var(--acao-texto);
  --laranja-claro: var(--sol);
  --laranja-suave: var(--sol-suave);

  /* Sem serifa de display: apple.com usa a mesma família sans em
     headline grande e em corpo, com peso/tracking fazendo a hierarquia —
     ver a regra de h1/h2 mais abaixo. -apple-system resolve pra SF Pro de
     verdade em Mac/iOS; Manrope é o substituto em qualquer outro sistema. */
  --fonte-titulo: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Manrope', sans-serif;
  --fonte-corpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Manrope', sans-serif;

  --raio: 14px;
  --raio-g: 18px;
  --raio-p: 10px;
  --raio-xs: 8px;                /* chip pequeno — evento de agenda, topo de barra de gráfico */

  /* Escala de espaçamento — múltiplos de 4, os passos que se repetem de
     verdade no layout estrutural (não é grade obrigatória para todo valor). */
  --espaco-xs: 8px;
  --espaco-sm: 12px;
  --espaco-md: 24px;
  --espaco-lg: 40px;
  --espaco-xl: 96px;

  /* Sombras extremamente sutis, tingidas de carvão — nunca preto puro,
     nunca pesadas (regra explícita da marca: playful + premium, não
     glassmorphism nem elevação dramática). */
  --sombra-sm: 0 2px 8px rgba(39, 35, 45, .06);
  --sombra: 0 4px 14px rgba(39, 35, 45, .07);
  --sombra-hover: 0 8px 24px rgba(39, 35, 45, .08);
  --sombra-flutuante: 0 20px 50px rgba(39, 35, 45, .12);

  --container: 1200px;
  --transicao: .2s ease;
  /* Curva para o único momento de entrada autoral (hero da home) — ease-out
     exponencial, começa já visível, nunca "pisca" o conteúdo antes de animar. */
  --ease-saida: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  /* Quase todo texto desta interface é escrito por outra pessoa: nome de
     tutor, nome de pet, queixa, anamnese, prescrição, mensagem de chat. Sem
     isto, uma única palavra sem espaço — link de exame colado no chat, e-mail
     comprido, nome de arquivo — pinta fora da caixa e passa por cima do que
     está ao lado. Medido antes da correção: 618px de texto num balão de
     235px. `anywhere` em vez de `break-word` porque `break-word` não quebra
     quando o elemento tem largura intrínseca (o caso do balão de chat). */
  overflow-wrap: anywhere;
}

/* Sem fonte de display separada: peso alto + tracking negativo faz a
   hierarquia de h1/h2, mesma família do corpo inteiro — como apple.com,
   que nunca troca de fonte pra um headline grande, só de peso. */
h1, h2 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
  color: var(--texto);
  margin: 0 0 .5em;
  letter-spacing: -.03em;
}
/* h3/h4 usam --texto, não --tinta: título não é ação. O azul fica exclusivo
   de link/CTA/estado ativo (ver .btn, a{}, .nav a.ativo) — um heading azul ao
   lado de um botão azul de verdade apaga a única pista de "isto é clicável"
   que o sistema tem. */
h3, h4 {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  line-height: 1.14;
  color: var(--texto);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
/* Título de página que semanticamente é h1 (o único da tela) mas visualmente
 * precisa do tamanho de headline, não do display gigante do hero — usado
 * nas áreas autenticadas, listagens e páginas de erro/sistema. */
.titulo-pagina { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.2rem; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--acao-texto); }

/* numerais que não podem "dançar" ao trocar de valor — métricas do CRM */
.numeros-tabulares { font-variant-numeric: tabular-nums; }
img { max-width: 100%; display: block; }
small { font-size: .8rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.secao { padding: var(--espaco-xl) 0; }
.secao--alt { background: var(--fundo-alt); }

/* Regra sistêmica de topo: a primeira seção logo abaixo do header sticky
   nunca deve herdar o respiro de --espaco-xl pensado para separar seções
   internas — isso deixava páginas utilitárias (painel, profissional, admin,
   login…) com um vão enorme e vazio antes de qualquer conteúdo. Uma seção
   .hero em primeiro lugar fica de fora de propósito: ela já define seu
   próprio respiro de marca (padding do hero), não sofre desse problema. */
main > .secao:first-child { padding-top: var(--espaco-lg); }
/* Quando o hero é a primeira seção (especialidade, seja-parceiro), a seção
   seguinte já ganha respiro do próprio hero — o mesmo excesso não se repete
   ali, então o alvo é só o `:first-child` acima. */
@media (max-width: 720px) {
  main > .secao:first-child { padding-top: var(--espaco-md); }
}

/* Detalhe do manual: traço curto abaixo do título de seção */
.titulo-secao { margin-bottom: var(--espaco-lg); }
/* rótulo/eyebrow base — não escopado a .titulo-secao, porque qualquer
   <span class="rotulo"> solto (ex.: tagline da home) precisa do mesmo
   tratamento por padrão, não só quando mora dentro de um título de seção */
.rotulo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acao-texto);
  margin-bottom: 10px;
}
.titulo-secao h2::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  background: var(--sol);
  border-radius: 2px;
  margin-top: 16px;
}
.titulo-secao.centro { text-align: center; }
.titulo-secao.centro h2::after { margin-left: auto; margin-right: auto; }
.titulo-secao p { color: var(--texto-suave); max-width: 62ch; }
.titulo-secao.centro p { margin-left: auto; margin-right: auto; }

/* Cabeçalho compacto — telas de conta logada (profissional, tutor, admin).
   O rótulo + título + aviso + métricas do topo é chrome de orientação
   ("você está aqui"), não o motivo da visita — a pessoa já sabe que
   entrou na própria área; ele não deve competir em altura com a agenda,
   o financeiro ou a lista de pacientes logo abaixo. Marketing/institucional
   continua com .titulo-secao no tamanho normal, que ali é conteúdo. */
main > .secao--painel:first-child { padding-top: var(--espaco-xs); }
.titulo-secao--compacto { margin-bottom: 6px; }
.titulo-secao--compacto .rotulo { font-size: .72rem; margin-bottom: 1px; }
.titulo-secao--compacto h2 { font-size: 1.2rem; margin-bottom: 0; }
.titulo-secao--compacto h2::after { margin-top: 4px; height: 2px; width: 24px; }
.titulo-secao--compacto p { font-size: .82rem; margin: 3px 0 0; }

/* ───────────────────────────────────────────────────────── marca ── */

.marca { display: inline-flex; align-items: center; gap: 11px; }
.marca img { width: 38px; height: 38px; border-radius: var(--raio-xs); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.05; }
.marca-nome {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tinta);
  letter-spacing: -.01em;
}
/* o "ponto laranja" característico do manual */
.marca-nome::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sol);
  margin-left: 5px;
  vertical-align: .35em;
}
.marca-sub {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 500;
}
.marca--claro .marca-nome { color: var(--branco); }
.marca--claro .marca-sub { color: var(--sobre-escuro-suave); }

/* ──────────────────────────────────────────────────────── header ── */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: var(--sobre-escuro);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--borda);
}
.topo-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--texto);
  position: relative; padding: 4px 0;
}
/* #navSessao chega vazio do servidor e ganha os links (nome/sair ou entrar)
   via JS. Sem isto, o <span> mede sua própria caixa pelo tamanho de fonte
   padrão da página em vez do dos links que carrega — como item flex do
   `.nav`, fica mais baixo que os irmãos e o align-items:center desalinha o
   texto verticalmente. Virar container flex resolve isso sem duplicar
   nenhum valor de fonte: a altura passa a vir de dentro, dos próprios
   links, sempre igual à dos irmãos por construção. */
.nav #navSessao { display: inline-flex; align-items: center; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--sol); transform: scaleX(0); transform-origin: left;
  transition: transform var(--transicao);
}
.nav a:hover::after, .nav a.ativo::after { transform: scaleX(1); }
.menu-botao {
  display: none; background: none; border: 0; color: var(--tinta);
  cursor: pointer; width: 44px; height: 44px; border-radius: var(--raio-p);
  align-items: center; justify-content: center;
}
.menu-botao:hover, .menu-botao:focus-visible { background: var(--tinta-suave); }
/* Duas SVGs sobrepostas (não texto/emoji) — o botão troca de ☰ pra ✕ pra
   confirmar visualmente que o menu abriu, não só pelo aria-label. */
.menu-botao-icone--fechar { display: none; }
.menu-botao.aberto .menu-botao-icone--abrir { display: none; }
.menu-botao.aberto .menu-botao-icone--fechar { display: block; }

/* Header das três áreas autenticadas (tutor/profissional/admin) — não é o
   header de marketing com um item a menos, é outro componente: sem link
   de "Sou veterinário" ou "Especialidades" enquanto alguém está no meio de
   uma tarefa. .marca-sub aqui diz o nome da área ("Área do tutor" etc.), a
   resposta a "onde estou" fica fixa na tela inteira, não só no h2 da seção.
   Curto o bastante pra nunca precisar de menu hambúrguer no mobile. */
.nav-app { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.nav-app a { font-size: .95rem; font-weight: 500; color: var(--texto); }
.nav-app a:hover { color: var(--tinta); }

/* Rodapé das áreas autenticadas: só a barra de conformidade, sem a grade
   de links de marketing — quem já está logado não precisa do menu do site
   institucional embaixo do próprio painel. */
.rodape--app { padding: 20px 0; }
.rodape--app .rodape-base { margin-top: 0; padding-top: 0; border-top: 0; }

/* pulo para o conteúdo — invisível até receber foco por teclado (WCAG 2.4.1) */
.pular-link {
  position: absolute; top: -100px; left: 12px; z-index: 100;
  background: var(--tinta); color: var(--branco); padding: 12px 20px;
  border-radius: 0 0 var(--raio-p) var(--raio-p); font-weight: 600; font-size: .95rem;
  transition: top .15s ease;
}
.pular-link:focus { top: 0; color: var(--branco); }

/* rótulo só para leitor de tela — mantém o input com nome acessível sem
   duplicar visualmente um texto que o placeholder ou o contexto já dão */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────── botões ── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px;
  border-radius: var(--raio-p);      /* cantos discretos, nunca pílula */
  border: 1.5px solid transparent;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; transition: var(--transicao); white-space: nowrap;
  min-height: 44px;
}
/* Três papéis só: primário sólido (uma ação por tela), contorno/fantasma
   para secundário e terciário. --roxo era um segundo nome pro mesmo botão
   (herdado da paleta antiga) — consolidado aqui, sem duplicar a regra. */
.btn--primario { background: var(--tinta); color: var(--branco); }
.btn--primario:hover { background: var(--tinta-clara); color: var(--branco); transform: translateY(-1px); }
.btn--acento { background: var(--sol); color: var(--texto); }
.btn--acento:hover { background: var(--sol-claro); transform: translateY(-1px); }
.btn--contorno { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--contorno:hover { background: var(--tinta); color: var(--branco); }
.btn--claro { background: var(--branco); color: var(--tinta); border-color: var(--borda); box-shadow: var(--sombra-sm); }
.btn--claro:hover { background: var(--tinta-suave); }
.btn--fantasma { background: transparent; color: var(--texto-suave); border-color: var(--borda); }
.btn--fantasma:hover { border-color: var(--tinta); color: var(--tinta); }
.btn--p { padding: 10px 18px; font-size: .85rem; }
.btn--bloco { width: 100%; }
.btn:active:not([disabled]) { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Linha de ações do prontuário (sala de atendimento). Assinar é o ato
 * irreversível — depois dele só cabe retificação com motivo (Resolução CFMV
 * nº 1.321/2020, art. 2º, VIII) — então o botão de assinar é empurrado para
 * longe do "salvar rascunho", em vez de ficar um gêmeo dele. A ênfase vem da
 * separação e do contraste com um secundário neutro, não de uma cor nova:
 * `--primario` é a única cor de CTA do sistema.
 * Empilhado, os dois voltam a ocupar a linha inteira — `margin-left:auto`
 * numa linha já quebrada deixaria os botões com alinhamentos opostos. */
.acoes-prontuario { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acoes-prontuario .btn--primario { margin-left: auto; }
@media (max-width: 640px) {
  .acoes-prontuario .btn { width: 100%; }
  .acoes-prontuario .btn--primario { margin-left: 0; }
}

/* --p (variante compacta) mede ~36px de altura — abaixo do alvo de toque de
 * 44px. Em ponteiro fino (mouse/trackpad) a densidade é a própria intenção
 * do CRM, então fica como está; só em toque o alvo cresce, sem inflar o
 * visual pra quem usa mouse. */
@media (pointer: coarse) {
  .btn--p { padding: 14px 18px; }
}

/* ───────────────────────────────────────────────────────────  hero ── */

/* Vinheta radial discreta — luz suave no centro, escurece nas bordas —
   em vez de fundo chapado. Ainda sem blob/forma decorativa: só a mesma
   superfície clara com gradação sutil (mesmo tratamento do rodapé/CTA
   escuros, em tom claro — texto escuro por cima, não branco). */
.hero { background: var(--gradiente-claro); color: var(--texto); padding: 88px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hero h1 { color: var(--texto); }
.hero h1 .destaque { color: var(--texto-suave); }
.hero .chamada { font-size: 1.1rem; color: var(--texto-suave); max-width: 54ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.selo-linha { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.selo {
  font-size: .8rem; font-weight: 500;
  background: var(--branco);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  padding: 6px 14px; border-radius: var(--raio-xs);
}

.cartao-perfil {
  background: var(--branco); border-radius: var(--raio-g); padding: 30px;
  color: var(--texto); box-shadow: var(--sombra-flutuante);
}
.cartao-perfil .avatar {
  width: 96px; height: 96px; border-radius: var(--raio); margin-bottom: 18px;
  background: var(--tinta-suave); display: grid; place-items: center;
  font-size: 1.9rem; color: var(--tinta); font-weight: 600;
  border: 2px solid var(--tinta);
}
.cartao-perfil h3 { margin-bottom: 2px; }
.cartao-perfil .crmv { color: var(--acao-texto); font-weight: 600; font-size: .9rem; letter-spacing: .04em; }
.cartao-perfil dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 22px 0 0; font-size: .9rem; }
.cartao-perfil dt { color: var(--texto-suave); }
.cartao-perfil dd { margin: 0; font-weight: 500; }

/* ─────────────────────────────────────────────────────────── cards ── */

.grade { display: grid; gap: var(--espaco-md); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }

/* Política de sombra do sistema: sombra é sinal de "isto flutua sobre a
   página" (modal, dropdown, botão fixo — ver --sombra-flutuante), nunca o
   estado de repouso de um card no fluxo normal. Borda de 1px basta em
   repouso; a sombra chega só como resposta ao hover, não como decoração
   permanente empilhada com borda. */
.card {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 28px; transition: var(--transicao);
}
.card:hover { border-color: var(--tinta-clara); box-shadow: var(--sombra-hover); transform: translateY(-3px); }
.card .icone {
  width: 34px; height: 34px; border-radius: var(--raio-p);
  background: var(--tinta-suave); color: var(--tinta);
  display: grid; place-items: center; font-size: .85rem; margin-bottom: 14px;
}
.card h3 { font-size: .98rem; margin-bottom: 8px; }
.card p { color: var(--texto-suave); font-size: .85rem; margin-bottom: 12px; }
.card .rodape-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--borda);
  font-size: .78rem; color: var(--texto-suave);
}
.card .preco { color: var(--tinta); font-weight: 600; font-size: .85rem; }

.card--link { display: block; color: inherit; }
.card--link:hover { color: inherit; }

.lista-numerada { margin: 0; padding-left: 20px; font-size: .95rem; color: var(--texto-suave); }
.lista-numerada li { margin-bottom: 10px; }
/* --texto, não --tinta: mesma regra do .aviso strong — destaque é peso, o
   termo não é um link. */
.lista-numerada strong { color: var(--texto); }

/* cartão de profissional */
.vet-card { display: flex; flex-direction: column; }
.vet-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.vet-foto {
  flex: none; width: 52px; height: 52px; border-radius: var(--raio); overflow: hidden;
  background: var(--tinta-suave); display: grid; place-items: center;
  color: var(--tinta); font-weight: 600; font-size: .95rem; border: 1.5px solid var(--tinta);
}
.vet-foto img { width: 100%; height: 100%; object-fit: cover; }
.vet-card h3 { margin: 0 0 3px; font-size: 1.02rem; }
.vet-crmv { font-size: .8rem; color: var(--texto-suave); letter-spacing: .02em; margin-top: 2px; }
.vet-crmv .verificado {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--sucesso); font-weight: 700;
}
.vet-crmv .verificado svg { flex: none; }
.vet-nota { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.estrelas { color: var(--acao-texto); letter-spacing: .06em; font-size: .95rem; }
.nota-num { font-size: .8rem; color: var(--texto-suave); }
.vet-card p { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  font-size: .75rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--tinta-suave); color: var(--tinta);
}
/* fundo neutro pede texto neutro — --acao-texto (azul) aqui era resquício
   da paleta antiga (fundo laranja + texto laranja virou fundo cinza + texto
   azul por acidente do alias, não por decisão). */
.chip--sol { background: var(--sol-suave); color: var(--texto-suave); }
/* alerta clínico real (condição de saúde, medicação em uso) — âmbar, mesmo
 * papel semântico de .tag--pendente; nunca a cor de ação azul do sistema. */
.chip--alerta { background: var(--alerta-suave); color: var(--alerta-texto); }
.chip--sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.chip--erro { background: var(--erro-suave); color: var(--erro); }

/* CTA textual no rodapé do card de busca — o card inteiro já é clicável,
   mas o texto deixa a ação explícita (heurística de reconhecimento). */
.ver-perfil {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .8rem; font-weight: 700; color: var(--tinta);
  margin-left: auto;
}
.ver-perfil svg { width: 13px; height: 13px; }

/* filtros da busca */
.filtros {
  display: grid; grid-template-columns: 2fr 1.3fr 1fr 1.2fr; gap: 12px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; margin-bottom: 26px; align-items: end;
}
.filtros .campo { margin: 0; }
.contagem { font-size: .9rem; color: var(--texto-suave); margin-bottom: 18px; }

/* "Mais filtros" — some no desktop (os campos já cabem lado a lado);
   no mobile vira o único jeito de abrir especialidade/estado/ordenar,
   pra não empurrar os resultados pra baixo da dobra atrás de 4 campos
   empilhados. */
.filtros-toggle {
  display: none; align-items: center; justify-content: center; gap: 8px;
  background: var(--fundo-alt); border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  padding: 12px 16px; font-family: inherit; font-size: .92rem; font-weight: 700;
  color: var(--tinta); cursor: pointer; min-height: 44px;
}
.filtros-toggle svg { transition: transform var(--transicao); }
.filtros-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#filtrosContagem, #pacFiltrosContagem {
  background: var(--tinta); color: var(--branco); border-radius: var(--raio-xs);
  font-size: .72rem; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center;
}
#filtrosContagem:empty, #pacFiltrosContagem:empty { display: none; }
.filtros-extras { display: contents; }

@media (max-width: 980px) {
  .filtros-toggle { display: flex; }
  .filtros-extras {
    display: none; grid-template-columns: 1fr; gap: 12px;
    grid-column: 1 / -1; margin-top: 4px;
  }
  .filtros-extras.aberto { display: grid; }
  .filtros--pacientes { grid-template-columns: 1fr 1fr; }
  .filtros--pacientes .filtros-toggle { grid-column: 1 / -1; }
}

/* pacientes: seletor (lista suspensa) leva o peso da coluna; a busca por
   texto é só um atalho secundário, então fica bem mais estreita — não
   precisa do mesmo tamanho de uma busca de página inteira. */
.filtros--pacientes { grid-template-columns: 1.6fr .9fr 1fr 1fr 1fr; }

/* busca compacta da home: só texto + especialidade + botão */
.filtros--home {
  grid-template-columns: 1.6fr 1.2fr auto; margin: 22px 0 0;
}

/* único momento autoral de entrada da home: a coluna de busca assenta com um
   leve arco, já visível desde o primeiro quadro — nunca "pisca" em branco
   antes de animar. Nenhuma outra seção do site anima ao rolar. */
@keyframes home-assenta {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-busca {
  animation: home-assenta .7s var(--ease-saida) both;
}
.home-busca--full { max-width: 860px; }
.home-busca h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.home-busca .chamada { font-size: 1rem; color: var(--texto-suave); max-width: 52ch; }

/* perfil público do profissional */
.perfil-topo { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.perfil-cabecalho { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.perfil-cabecalho .vet-foto { width: 104px; height: 104px; border-radius: var(--raio-g); font-size: 1.9rem; }
.perfil-cabecalho h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 4px; }
.bloco-texto { white-space: pre-wrap; color: var(--texto-suave); font-size: .95rem; }

.caixa-agendar { position: sticky; top: 96px; }

/* CTA fixo do perfil do vet no mobile — só aparece ≤720px (ver breakpoint
   responsivo). Some quando a caixa de agendamento já está visível na tela,
   para não competir com o mesmo CTA duas vezes nem cobrir o formulário. */
.cta-mobile-fixo {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  align-items: center; justify-content: space-between; gap: 14px;
  background: var(--branco); border-top: 1px solid var(--borda);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--sombra-flutuante);
}
.cta-mobile-fixo div { min-width: 0; }
.cta-mobile-fixo strong { display: block; color: var(--tinta); font-size: 1rem; }
.cta-mobile-fixo span { display: block; font-size: .78rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-mobile-fixo .btn { flex: none; }

/* métricas do painel */
.metrica { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.metrica .valor { font-size: 1.6rem; font-weight: 600; color: var(--tinta); line-height: 1.1; }
.metrica .rotulo-metrica {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--texto-suave); margin-top: 6px;
}
/* Faixa de estatística do topo da Visão geral — sem caixa, sem sombra;
   um divisor fino entre cada número faz a separação, não quatro cartões
   brancos idênticos lado a lado. Número maior e mais apertado (tracking
   negativo) puxa a leitura pro dado, não pro contorno da caixa. */
.metricas-flat { display: flex; flex-wrap: wrap; margin-bottom: 6px; }
.metrica-flat { flex: 1; min-width: 140px; padding: 0 28px; border-left: 1px solid var(--borda); }
.metrica-flat:first-child { padding-left: 0; border-left: 0; }
/* white-space:nowrap porque o overflow-wrap:anywhere global do body (pra
 * texto de terceiros que não cabe) quebra um valor monetário no meio do
 * número assim que a coluna aperta — "R$ 272,00" virando "R$ 272,\n00". */
.metrica-flat .valor { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); line-height: 1.1; white-space: nowrap; }
.metrica-flat .rotulo-metrica {
  font-size: .72rem; color: var(--texto-suave); margin-top: 3px;
}
/* --tinta, não --sol (cinza neutro na paleta atual): a variante "acento"
   existe pra destacar o número que precisa de atenção (pendência, vacina a
   vencer). Com --sol resolvendo pra cinza, ela ficava mais apagada que o
   normal — o oposto do que "acento" promete. */
.metrica-flat--acento .valor { color: var(--tinta); }
.metrica-flat--clicavel {
  background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit;
  text-align: left; cursor: pointer; transition: var(--transicao);
}
.metrica-flat--clicavel:hover .valor { color: var(--tinta); }
@media (max-width: 720px) {
  .metrica-flat { flex: 1 1 45%; padding: 0 16px 16px; }
  .metrica-flat:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

/* variante -30% — usada onde o card de métrica é só um número de apoio
   (financeiro, visão geral), não a estrela da tela. */
.metricas-compactas .metrica { padding: 14px; }
.metricas-compactas .metrica .valor { font-size: 1.12rem; }
.metricas-compactas .metrica .rotulo-metrica { font-size: .72rem; margin-top: 4px; }

/* tabela simples */
/* tabelas de várias colunas (repasses, funil) não têm como colapsar para
   1 coluna como o resto do layout — rolam na própria largura em vez de
   estourar a página inteira na horizontal */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.tag--pendente { background: var(--alerta-suave); color: var(--alerta-texto); }
.tag--aprovado { background: var(--sucesso-suave); color: var(--sucesso); }
.tag--suspenso, .tag--recusado { background: var(--erro-suave); color: var(--erro); }
.tag--pago { background: var(--sucesso-suave); color: var(--sucesso); }

/* seletor de nota */
/* Estrela desenhada (mesmo SVG de ICONES.estrelaCheia usado no resto do
   site), não o glifo unicode ★ — senão a nota que o tutor está dando fica
   com um traço diferente da nota já publicada logo abaixo, na mesma tela. */
.nota-seletor { display: flex; gap: 6px; }
.nota-seletor button {
  background: none; border: 0; color: var(--cinza-claro);
  cursor: pointer; line-height: 1; padding: 4px;
}
.nota-seletor button svg { width: 26px; height: 26px; }
.nota-seletor button.ativa { color: var(--acao-texto); }

.trilha { font-size: .85rem; color: var(--texto-suave); display: flex; gap: 8px; flex-wrap: wrap; }
.trilha a { color: var(--texto-suave); }
.trilha a:hover { color: var(--acao-texto); }

.progresso { height: 5px; background: var(--borda); border-radius: var(--raio-xs); overflow: hidden; }
.progresso span {
  display: block; height: 100%; width: 100%; background: var(--sol);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}

/* .opcao-triagem: nome herdado do recurso de triagem removido, mas a classe
   segue viva como botão de item da linha do tempo de consulta em
   profissional.js — não renomear/remover sem migrar o JS junto. */
.opcao-triagem {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); padding: 16px 20px; font-family: inherit; font-size: 1rem;
  transition: var(--transicao);
}
.opcao-triagem:hover { border-color: var(--tinta); background: var(--tinta-suave); transform: translateX(3px); }
.opcao-triagem strong { display: block; color: var(--tinta); font-weight: 600; }
.opcao-triagem span { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: 3px; }
.opcao-triagem.ativa { border-color: var(--tinta); background: var(--tinta-suave); }

/* ficha do paciente — resumo fixo à esquerda (tutor, espécie, último
   atendimento) + linha do tempo rolável à direita, mesmo padrão de um
   registro único de CRM (ficha de cliente/negócio): resumo que não some
   de vista enquanto se navega pelo histórico. */
.ficha-paciente { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; margin-top: 6px; }
.ficha-sidebar {
  position: sticky; top: 96px; background: var(--fundo-alt);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px;
}
.ficha-sidebar-cabecalho { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.ficha-sidebar-dados { display: grid; gap: 10px; margin: 0 0 16px; font-size: .85rem; }
.ficha-sidebar-dados dt { color: var(--texto-suave); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px; }
.ficha-sidebar-dados dd { margin: 0; font-weight: 600; color: var(--texto); }
.ficha-principal { min-width: 0; }

/* linha do tempo: mesma lista de .opcao-triagem, com trilho e marcador
   por evento — leitura cronológica de atividade em vez de lista solta. */
.linha-tempo { position: relative; padding-left: 22px; }
.linha-tempo::before {
  content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--borda);
}
.linha-tempo .linha-tempo-item { position: relative; }
.linha-tempo .linha-tempo-item::before {
  content: ''; position: absolute; left: -21px; top: 19px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--branco); border: 2px solid var(--cinza-claro);
}
.linha-tempo .linha-tempo-item.ativa::before { border-color: var(--tinta); background: var(--tinta); }

@media (max-width: 860px) {
  .ficha-paciente { grid-template-columns: 1fr; }
  .ficha-sidebar { position: static; }
}

.indicado { display: flex; flex-direction: column; }
.indicado .porque {
  list-style: none; padding: 0; margin: 0 0 14px; flex: 1;
  font-size: .85rem; color: var(--texto-suave);
}
.indicado .porque li { padding-left: 20px; position: relative; margin-bottom: 5px; }
.indicado .porque li::before {
  content: '✓'; position: absolute; left: 0; color: var(--sucesso); font-weight: 700;
}

/* passos numerados */
.passo { position: relative; padding-left: 62px; }
.passo .numero {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--tinta); color: var(--tinta);
  display: grid; place-items: center; font-weight: 600;
}
.passo .numero::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--sol);
}
.passo h3 { font-size: 1.05rem; margin-bottom: 6px; }
.passo p { color: var(--texto-suave); font-size: .95rem; }

/* depoimentos */
.depoimento { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 28px; }
.depoimento .aspas { color: var(--sol); font-size: 2.4rem; line-height: 1; font-weight: 700; }
.depoimento p { font-size: .95rem; color: var(--texto); }
/* --texto, não --tinta: nome de quem avaliou não é ação nem link — mesma
   regra do heading e do .aviso strong (azul é exclusivo de ação). */
.depoimento .autor { font-weight: 600; color: var(--texto); font-size: .95rem; }
.depoimento .autor span { display: block; font-weight: 400; color: var(--texto-suave); font-size: .85rem; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--borda); padding: 20px 0;
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--tinta);
  list-style: none; display: flex; justify-content: space-between; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--sol); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 14px 0 0; color: var(--texto-suave); font-size: .95rem; }

/* lista de recursos (features) — linha com ícone + texto, dividida por um
   traço fino, nunca uma grade de cards: a seção de benefícios logo acima já
   usa card, uma segunda grade idêntica de cards viraria "página de cards". */
.lista-recursos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px;
}
.lista-recursos .recurso {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--borda);
}
.lista-recursos .recurso:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.recurso-icone {
  flex: none; width: 40px; height: 40px; border-radius: var(--raio-p);
  background: var(--tinta-suave); color: var(--tinta);
  display: grid; place-items: center;
}
.lista-recursos h3 { margin-bottom: 4px; font-size: 1rem; }
.lista-recursos p { color: var(--texto-suave); margin: 0; font-size: .92rem; }
@media (max-width: 720px) {
  .lista-recursos { grid-template-columns: 1fr; }
  .lista-recursos .recurso:nth-child(-n+2) { border-top: 1px solid var(--borda); padding-top: 22px; }
  .lista-recursos .recurso:first-child { border-top: 0; padding-top: 0; }
}

/* checklist de texto — usado no painel de transparência de preço; mesmo
   traço visual do "porque" da ficha de paciente, generalizado. */
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li {
  padding-left: 26px; position: relative; margin-bottom: 12px;
  font-size: .95rem; color: var(--texto);
}
.lista-check li:last-child { margin-bottom: 0; }
.lista-check li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--sucesso-suave);
}
.lista-check li::after {
  content: ''; position: absolute; left: 4.5px; top: 7px; width: 7px; height: 4px;
  border-left: 2px solid var(--sucesso); border-bottom: 2px solid var(--sucesso);
  transform: rotate(-45deg);
}

/* painel de transparência de preço — um painel só, centralizado; nunca uma
   grade de "planos" fabricada, porque o preço aqui é por profissional, não
   por assinatura da plataforma. */
.painel-preco { max-width: 620px; margin: 0 auto; padding: 36px 40px; }
.painel-preco .valor-exemplo {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px;
  padding-bottom: 24px; border-bottom: 1px solid var(--borda);
}
.painel-preco .valor-exemplo strong { font-size: 2.1rem; letter-spacing: -.02em; color: var(--texto); white-space: nowrap; }
.painel-preco .valor-exemplo span { color: var(--texto-suave); font-size: .9rem; }
@media (max-width: 560px) {
  .painel-preco { padding: 28px 22px; }
  /* linha vira coluna e o número encolhe um passo — evita tanto a quebra
     no meio do valor (overflow-wrap:anywhere do body faria isso sem isto)
     quanto o valor encostar na borda do painel em telas de 360-390px. */
  .painel-preco .valor-exemplo { flex-direction: column; align-items: flex-start; gap: 4px; }
  .painel-preco .valor-exemplo strong { font-size: 1.7rem; }
}

/* aviso legal / regulatório */
.aviso {
  background: var(--sol-suave);
  padding: 18px 22px; border-radius: var(--raio-p);
  font-size: .9rem; color: var(--cinza-escuro);
}
/* --texto, não --tinta: o azul é exclusivo de ação (ver Regra do Azul Único)
   — o destaque aqui é peso, não um link, mesma lógica de h3/h4 acima. */
.aviso strong { color: var(--texto); }

/* ─────────────────────────────────────── documentos legais (termos etc.) ── */
/* Coluna estreita: texto corrido de leitura longa pede medida curta, não a
   largura cheia usada pelas grades de card. */
.container--estreito { max-width: 760px; }

.texto-legal { line-height: 1.7; }
.texto-legal h2 {
  font-size: 1.2rem; margin: 32px 0 10px;
  color: var(--texto); font-family: var(--fonte-titulo);
}
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p { margin: 0 0 14px; color: var(--texto-suave); }
.texto-legal ul { margin: 0 0 16px; padding-left: 20px; color: var(--texto-suave); }
.texto-legal li { margin-bottom: 8px; }
.texto-legal strong { color: var(--texto); }

.tabela-legal { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: .9rem; }
.tabela-legal th, .tabela-legal td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--borda); vertical-align: top;
}
.tabela-legal th { color: var(--texto); font-weight: 700; background: var(--fundo-alt); }
.tabela-legal td { color: var(--texto-suave); }
/* tabela larga nunca empurra a página: rola dentro do próprio contêiner */
@media (max-width: 640px) {
  .texto-legal { overflow-x: auto; }
  .tabela-legal { min-width: 520px; }
}

/* ───────────────────────────────────────────────────────── rodapé ── */

.rodape { background: var(--gradiente-escuro); color: var(--sobre-escuro-medio); padding: 64px 0 28px; font-size: .95rem; }
.rodape a { color: var(--sobre-escuro-medio); }
.rodape a:hover { color: var(--acao-texto); }
.rodape h4 { color: var(--branco); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.rodape-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rodape-base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--sobre-escuro-tenue);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .85rem;
}
/* Identificação do fornecedor: razão social, CNPJ, endereço, e-mail e
   encarregado. Linha própria acima do © porque é dado que se procura, não
   assinatura decorativa — e some inteira quando CONTATO está vazio. */
.rodape-contato {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--sobre-escuro-tenue);
  display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .85rem;
}
.rodape-contato h4 { flex-basis: 100%; margin-bottom: 6px; }
/* com a identificação no ar, a faixa do © encosta nela em vez de abrir outro
   vão de 44px e deixar o rodapé com dois buracos */
.rodape-contato + .rodape-base { margin-top: 20px; }


/* ─────────────────────────────────────────────────── formulários ── */

.campo { margin-bottom: 18px; }
/* Rótulo em --texto, não --tinta: mesma regra do heading — azul é só ação
   (link, botão, foco), nunca texto estático, nem em login e cadastro, as
   telas onde essa distinção mais importa. Foco do input já usa azul (linha
   abaixo) — não precisa repetir no rótulo acima dele. */
.campo label { display: block; font-size: .85rem; font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.campo .dica { font-weight: 400; color: var(--texto-suave); font-size: .8rem; }
input, select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  font-family: inherit; font-size: .95rem; color: var(--texto); background: var(--branco);
  transition: var(--transicao);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--fundo-alt); color: var(--texto-suave); cursor: not-allowed; opacity: .75;
}
textarea { min-height: 110px; resize: vertical; }
/* Campo do prontuário ainda em leitura (ver travaEdicaoProntuario() em
   consulta.js). Não usa :disabled porque o texto precisa continuar legível e
   selecionável — quem abre a sala está LENDO o caso; o cinza de desabilitado
   diria "isto está fora do ar", que é outra coisa. */
.campo--travado { background: var(--fundo-alt); cursor: pointer; }
.campo--travado:focus { box-shadow: none; border-color: var(--borda); }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* par de painéis desiguais (gráfico/lista alta ao lado de 2 estatísticas
 * curtas): sem isto, o lado curto para no topo com um vão vazio embaixo,
 * enquanto o lado alto define a altura da linha inteira. Centraliza o
 * conteúdo curto no espaço esticado pelo grid, em vez de deixá-lo flutuar
 * encostado no topo. */
.coluna-metricas-centralizada { display: flex; flex-direction: column; justify-content: center; }

/* Visão geral do CRM: cards de resumo, não formulário — não precisam do
 * padding generoso de um painel de conteúdo/formulário. */
.visao-compacta .painel { padding: 18px 20px; }
.visao-compacta .painel h3 { font-size: .92rem; }
.visao-compacta .linha { gap: 16px; }
.linha--evolucao { grid-template-columns: 1fr 260px; }
/* Em tablet a coluna de 260px espreme demais ao lado do gráfico — o cartão
 * "clientes ativos" chega a disputar espaço. Empilha antes do breakpoint
 * genérico de 720px, que é tarde demais pra essa combinação de largura. */
@media (max-width: 860px) {
  .linha--evolucao { grid-template-columns: 1fr; }
}
.check { display: flex; align-items: center; gap: 9px; font-size: .95rem; }

/* Revisão do rascunho assistido: transcrição ao lado dos campos editáveis.
 * Uma coluna até existir rascunho para revisar — não force o layout de
 * revisão em quem está só escrevendo o prontuário à mão. */
.revisao-prontuario { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
.revisao-prontuario.tem-transcricao { grid-template-columns: minmax(240px, 340px) 1fr; }
@media (max-width: 860px) {
  .revisao-prontuario.tem-transcricao { grid-template-columns: 1fr; }
}
.transcricao-rascunho { position: sticky; top: 16px; max-height: 76vh; overflow-y: auto; }
.transcricao-rascunho h3 { font-size: .95rem; margin: 0 0 4px; }
.transcricao-corpo { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.transcricao-linha { padding: 9px 13px; border-radius: var(--raio-p); background: var(--fundo-alt); font-size: .88rem; line-height: 1.45; }
.transcricao-linha .quem { display: block; font-size: .7rem; font-weight: 600; margin-bottom: 3px; }
/* diferencia quem falou pela cor do rótulo, não por borda lateral — mesma
   ideia do par de cores do chat (.balao--eu / .balao--outro).
   --acao-texto resolve para um tom de roxo quase igual a --tinta (legado
   de nomenclatura); --pink-texto é o par que realmente contrasta e não
   carrega o significado de erro/alerta que --erro ou --alerta-texto teriam. */
.transcricao-linha--vet .quem { color: var(--tinta); }
.transcricao-linha--tutor .quem { color: var(--pink-texto); }

/* Rótulo do campo + selo de procedência do texto (rascunho assistido).
 * O selo de "aceito sem edição" usa a cor de alerta de propósito — é o
 * estado que mais precisa chamar atenção antes da assinatura, não o que
 * deveria passar despercebido misturado a um "tudo certo". */
.rotulo-campo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.rotulo-campo label { margin-bottom: 0; }
.selo-origem { font-size: .7rem; padding: 3px 10px; white-space: nowrap; }
.check input { width: auto; }

/* Confirmação inline de "salvo" junto de um campo editado fora de um form
 * com botão próprio (ex.: comissão por profissional no admin) — some
 * sozinha depois de alguns segundos. */
.selo-salvo {
  display: block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--sucesso);
}
.selo-salvo--erro { color: var(--erro); }

/* Mesma política de sombra do .card acima: repouso é só borda. */
.painel {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 28px;
}
.painel--estreito { max-width: 460px; margin: 0 auto; }

/* O atributo `hidden` só esconde por causa de uma regra do próprio navegador
   (`display: none`), e ela tem especificidade zero — qualquer classe que
   defina `display` a vence. O projeto tem 89 elementos com `hidden` e classes
   como .btn (inline-flex), .linha (grid), .crm-nav-item (flex) e .abas (flex),
   então "escondido" virava visível: botão só de master, "descartar gravação",
   formulários da aba Clínica. `!important` é a exceção justificada aqui —
   `hidden` é uma afirmação sobre existir na tela, não uma sugestão de estilo. */
[hidden] { display: none !important; }

/* Faixa de convite a estabelecimento — montada por api.js logo abaixo do
   cabeçalho, nas duas áreas (veterinário e tutor/recepção). Usa a paleta de
   alerta porque é pendência, não erro: exige resposta e não bloqueia nada. */
.aviso-convite { background: var(--alerta-suave); border-bottom: 1px solid var(--borda); }
.aviso-convite-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; font-size: .9rem; color: var(--alerta-texto);
}
.aviso-convite-acoes { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 700px) {
  .aviso-convite-inner { flex-direction: column; align-items: flex-start; }
}

/* Tela de entrar/cadastrar: reforço de confiança ao lado do formulário no
   desktop — padrão comum de SaaS, mas some no mobile (login precisa ser
   rápido no celular, não uma segunda leitura antes do campo de senha). */
.grid-entrar {
  display: grid; grid-template-columns: 1fr 460px; gap: 64px; align-items: center;
  max-width: 1040px; margin: 0 auto;
}
.entrar-lado h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
@media (max-width: 860px) {
  .grid-entrar { grid-template-columns: 1fr; max-width: 460px; }
  .entrar-lado { display: none; }
}

.alerta { padding: 12px 16px; border-radius: var(--raio-p); font-size: .9rem; margin-bottom: 16px; }
.alerta--erro { background: var(--erro-suave); color: var(--erro); }
.alerta--ok { background: var(--sucesso-suave); color: var(--sucesso); }
.alerta--info { background: var(--tinta-suave); color: var(--tinta); }

/* Aviso persistente do topo da área do profissional ("repasse manual") —
   é lembrete recorrente, não uma mensagem de erro/sucesso pontual: fica
   discreto, sem herdar o mesmo peso visual de um alerta de formulário. */
#avisoStatus .alerta, #avisoPagamentos .alerta { padding: 6px 12px; font-size: .78rem; margin-bottom: 6px; }

/* diálogo de confirmação — substitui window.confirm() nativo (ver
   confirmarAcao() em api.js) para ações importantes (cancelar, remover,
   liquidar). <dialog> nativo já resolve foco preso e tecla Esc. */
.modal {
  border: 0; border-radius: var(--raio-g); padding: 26px;
  max-width: 420px; width: calc(100% - 48px);
  background: var(--branco); color: var(--texto);
  box-shadow: var(--sombra-flutuante);
}
.modal::backdrop { background: rgba(17, 19, 21, .45); }
.modal-texto { margin: 0 0 22px; font-size: 1rem; line-height: 1.5; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 480px) {
  .modal-acoes { flex-direction: column-reverse; }
  .modal-acoes .btn { width: 100%; }
}

/* abas */
.abas { display: flex; gap: 6px; border-bottom: 1px solid var(--borda); margin-bottom: 26px; flex-wrap: wrap; }
.aba {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 11px 16px; font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--texto-suave); cursor: pointer;
}
.aba.ativa { color: var(--tinta); border-bottom-color: var(--sol); }

/* etiquetas de status */
.tag {
  display: inline-block; padding: 4px 11px; border-radius: var(--raio-xs);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
/* "Aguardando pagamento" é um próximo passo neutro, não um alerta clínico —
   nunca a cor de alerta (--alerta), reservada a condição de saúde/medicação.
   Contorno em vez de preenchido: distingue de "cancelado" (cinza chapado,
   estado morto) sem inventar uma cor nova só pra esta etiqueta. */
.tag--aguardando_pagamento {
  background: transparent; color: var(--texto-suave); border: 1px solid var(--borda);
}
.tag--confirmado { background: var(--tinta-suave); color: var(--tinta); }
.tag--em_andamento { background: var(--sol-suave); color: var(--acao-texto); }
.tag--concluido { background: var(--sucesso-suave); color: var(--sucesso); }
.tag--cancelado { background: #F2F2F2; color: var(--cinza-escuro); }
.tag--nao_compareceu { background: var(--erro-suave); color: var(--erro); }

/* listas de agendamento */
/* ── card de consulta ─────────────────────────────────────────────────────
   Reescrito depois de a Dra. Raryna apontar que os cards estavam
   "extremamente grandes". Eram: grade de três colunas (data | texto | ações),
   com as ações numa coluna `auto`. Quatro botões tomam a largura que
   precisam, o texto herda o resto, e o nome do paciente acabava espremido em
   90px quebrando no meio da palavra — cada card virava um bloco de 200px de
   altura para dizer três coisas.

   Agora são duas linhas: data e corpo em cima, ações embaixo alinhadas à
   direita. Texto e botão deixam de disputar a mesma linha, que é a origem do
   problema — botão tem largura própria e não negocia, texto sim.

   `minmax(0, 1fr)` no corpo não é detalhe: sem o mínimo zero, o conteúdo de
   uma grade se recusa a encolher abaixo do próprio tamanho e volta a
   empurrar o layout. */
.item-consulta {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "data corpo" "data acoes";
  gap: 6px 14px; align-items: start;
  border: 1px solid var(--borda); border-left: 3px solid var(--cor-tipo, var(--borda));
  border-radius: var(--raio-p); padding: 12px 14px;
  background: var(--branco); transition: var(--transicao);
}
.item-consulta:hover { border-color: var(--cinza); border-left-color: var(--cor-tipo, var(--cinza)); }

.item-consulta .ic-data {
  grid-area: data; display: flex; flex-direction: column; align-items: center;
  line-height: 1.1; padding-top: 2px;
}
.ic-dia { font-size: 1.25rem; font-weight: 600; color: var(--texto); }
.ic-mes { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); }
.ic-hora { font-size: .78rem; font-weight: 600; color: var(--texto-suave); margin-top: 3px; }

.item-consulta .ic-corpo { grid-area: corpo; min-width: 0; }
.item-consulta h4 {
  margin: 0 0 5px; font-size: .96rem; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* o serviço recua: o que se procura numa lista de agenda é o nome do animal */
.ic-servico { font-weight: 400; color: var(--texto-suave); }
.ic-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.item-consulta .meta { font-size: .82rem; color: var(--texto-suave); }
.ic-queixa { margin-top: 4px; font-style: italic; }
.item-consulta .ic-acoes {
  grid-area: acoes; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 2px;
}

@media (max-width: 560px) {
  /* o repasse é conferência, não decisão de agenda: some primeiro quando a
     linha aperta, em vez de empurrar o resto para uma segunda linha */
  .ic-repasse { display: none; }
  .item-consulta .ic-acoes { justify-content: flex-start; }
}

.vazio { text-align: center; padding: 46px 20px; color: var(--texto-suave); }
.vazio .icone-vazio { font-size: 2.4rem; color: var(--cinza-claro); margin-bottom: 10px; }

/* ──────────────────────── ficha de saúde do pet (área do tutor) ── */
/* Cada pet vira um painel único: identidade no topo, carteira de vacinação
   e evolução de peso lado a lado embaixo. Duas colunas em vez de dois
   painéis empilhados porque as duas leituras se respondem — "está em dia?"
   e "está ganhando peso?" são a mesma pergunta sobre o mesmo animal. */
.pet-ficha { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-sm); }
.pet-ficha + .pet-ficha { margin-top: 16px; }
.pet-ficha-topo { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.pet-ficha-topo h4 { margin: 0 0 2px; }
.saude-grade { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--borda); }
.saude-bloco { padding: 20px 22px; min-width: 0; }
.saude-bloco + .saude-bloco { border-left: 1px solid var(--borda); }
.saude-titulo { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; font-size: .98rem; }
.saude-titulo svg { color: var(--verde); flex: none; }
.saude-nota { color: var(--texto-suave); font-size: .84rem; margin: 0 0 14px; }
.saude-vazio { color: var(--texto-suave); font-size: .88rem; margin: 0; }

/* Carteira: uma linha por vacina (a dose mais recente de cada), ordenada
   por urgência — atrasada primeiro. Régua fina entre linhas, sem caixa
   por item: são fatos da mesma lista, não cartões independentes. */
.vacina-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda);
}
.vacina-linha:first-child { border-top: 0; padding-top: 0; }
.vacina-nome { font-weight: 600; font-size: .93rem; }
.vacina-meta { display: block; color: var(--texto-suave); font-size: .8rem; font-weight: 400; margin-top: 2px; }
.vacina-linha--atrasada .vacina-nome { color: var(--erro); }
/* O chip é o sinal de estado mais importante do bloco e o .chip global roda
   a .62rem (9.92px) — pequeno demais pra carregar "ATRASADA". Sobe só aqui,
   sem mexer no componente compartilhado (mesma correção que a auditoria de
   design já tinha feito no selo de CRMV do hero). */
.vacina-linha .chip { font-size: .72rem; flex: none; }

/* Linha de peso: mesmo comportamento do gráfico do Financeiro — os pontos
   crescem pra preencher a largura disponível, mas nunca ficam mais
   próximos que PASSO_MIN (definido no JS); abaixo disso a rolagem
   horizontal assume em vez de amontoar as datas. */
.grafico-peso { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grafico-peso svg { display: block; }
.peso-resumo { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: .82rem; color: var(--texto-suave); }
.peso-resumo strong { color: var(--texto); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .saude-grade { grid-template-columns: 1fr; }
  .saude-bloco + .saude-bloco { border-left: 0; border-top: 1px solid var(--borda); }
}

/* loading amigável: patinhas pulsando em sequência, em vez de spinner
   genérico — desligado por completo em prefers-reduced-motion (regra
   global no fim do arquivo). */
.patinhas { display: flex; justify-content: center; gap: 6px; margin-bottom: 10px; }
.patinhas svg { color: var(--tinta); animation: pata-pulso 1.2s ease-in-out infinite; }
.patinhas svg:nth-child(2) { animation-delay: .15s; }
.patinhas svg:nth-child(3) { animation-delay: .3s; }
@keyframes pata-pulso {
  0%, 80%, 100% { opacity: .28; transform: scale(.82); }
  40% { opacity: 1; transform: scale(1); }
}

/* widget de hub: lista com muitos itens fica enquadrada num teto de altura
 * fixo e rola por dentro, em vez de esticar o card e desequilibrar a grade
 * ao lado — um painel do dashboard nunca deveria crescer sem limite. */
.lista-enquadrada { max-height: 420px; overflow-y: auto; padding-right: 6px; }

/* linha compacta de widget do hub — Hoje/Pendências pedem escaneio rápido
 * (várias entradas por vez), não o card cheio de .item-consulta (feito pra
 * uma lista dedicada de consultas, densidade errada dentro de um painel de
 * resumo). Mesma informação essencial (hora, quem, por quê), uma linha só. */
.linha-resumo {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--borda);
  text-decoration: none; color: inherit; font-size: .85rem; transition: var(--transicao);
}
.linha-resumo:last-child { border-bottom: 0; }
.linha-resumo:hover { background: var(--fundo-alt); color: inherit; }
.linha-resumo-hora { flex: none; width: 42px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.linha-resumo-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* linha com o "⋯" de ações (remarcar/cancelar/não compareceu) — só existe
   quando a consulta ainda vai acontecer; ver linhaResumoConsulta() */
.linha-resumo-item { display: flex; align-items: center; border-bottom: 1px solid var(--borda); }
.linha-resumo-item:last-child { border-bottom: 0; }
.linha-resumo-item .linha-resumo { flex: 1; }
.linha-resumo-menu { position: relative; flex: none; }
.linha-resumo-menu summary {
  list-style: none; cursor: pointer; color: var(--texto-suave);
  width: 30px; height: 30px; border-radius: var(--raio-xs);
  display: flex; align-items: center; justify-content: center;
}
.linha-resumo-menu summary::-webkit-details-marker { display: none; }
.linha-resumo-menu summary:hover { background: var(--fundo-alt); color: var(--verde); }
.linha-resumo-menu-lista {
  position: absolute; right: 0; top: 34px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; min-width: 180px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 6px; box-shadow: var(--sombra-hover);
}
.linha-resumo-menu-lista .btn { width: 100%; justify-content: flex-start; }

/* pets */
/* mesma elevação do .painel — card de paciente não é uma família visual à
   parte: raio, borda e sombra idênticos aos demais cartões do sistema */
.pet-card {
  display: flex; gap: 16px; align-items: center;
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; background: var(--branco);
  box-shadow: var(--sombra-sm); transition: box-shadow var(--transicao);
}
.pet-card:hover { box-shadow: var(--sombra); }
.pet-card .avatar-pet {
  width: 54px; height: 54px; border-radius: var(--raio); background: var(--tinta-suave);
  display: grid; place-items: center; font-size: 1.4rem; flex: none;
  position: relative; overflow: hidden;
}
.pet-card .avatar-pet img { width: 100%; height: 100%; object-fit: cover; }
.avatar-pet-editar {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: var(--raio-xs); border: 1.5px solid var(--branco);
  background: var(--tinta); color: var(--branco); cursor: pointer; padding: 0;
}
.avatar-pet-editar:hover { background: var(--tinta-clara); }
/* O selo visual fica pequeno de propósito (não pode competir com a foto do
 * pet no canto de um avatar de 44px), mas a área de toque real cresce até
 * 44x44 com um pseudo-elemento invisível — WCAG 2.5.5/2.5.8 pede o alvo de
 * toque, não o desenho do ícone. Cabe no gap de 16px do .pet-card sem
 * encostar no texto ao lado. */
.avatar-pet-editar::after {
  content: ''; position: absolute; inset: -12px;
}
.pet-card h4 { margin: 0; color: var(--texto); font-size: 1rem; }
.pet-card .meta { font-size: .85rem; color: var(--texto-suave); }

/* seletor de horários */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.slot {
  padding: 11px 6px; border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  background: var(--branco); font-family: inherit; font-weight: 600; font-size: .95rem;
  color: var(--texto); cursor: pointer; transition: var(--transicao);
}
.slot:hover { border-color: var(--tinta); color: var(--tinta); }
.slot.selecionado { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

/* chips de horário nos cards da home — mesma cara do .slot, mas são link
   (<a>), não botão de seleção: clicar já leva para confirmar no perfil */
.slots--home { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 10px; }
.slot--home {
  display: block; text-align: center; text-decoration: none;
  padding: 9px 4px; border: 1.5px solid var(--tinta-suave); border-radius: var(--raio-p);
  background: var(--tinta-suave); font-weight: 700; font-size: .8rem; color: var(--tinta);
  transition: var(--transicao);
}
.slot--home:hover { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

.opcao-servico {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  border: 1.5px solid var(--borda); border-radius: var(--raio); padding: 12px 14px;
  background: var(--branco); cursor: pointer; font-family: inherit; transition: var(--transicao);
  line-height: 1.3;
}
.opcao-servico:hover { border-color: var(--tinta-clara); }
.opcao-servico:focus-visible { outline: 2.5px solid var(--sol); outline-offset: 2px; }
.opcao-servico.selecionado { border-color: var(--tinta); background: var(--tinta-suave); }
.opcao-servico .icone { flex: none; width: 32px; height: 32px; border-radius: var(--raio-p); background: var(--branco); border: 1px solid var(--borda); display: grid; place-items: center; color: var(--tinta); }
.opcao-servico strong { display: block; color: var(--tinta); font-size: .92rem; }
.opcao-servico span { font-size: .82rem; color: var(--texto-suave); line-height: 1.3; }

/* ────────────────────────────────────────────── sala de teleconsulta ── */

.sala { display: grid; grid-template-columns: 1fr 380px; gap: 0; height: calc(100vh - 74px); }
.sala-video { background: #0D1712; position: relative; display: flex; flex-direction: column; }
.sala-video iframe { flex: 1; width: 100%; border: 0; }
.sala-espera { flex: 1; display: grid; place-items: center; color: var(--sobre-escuro-medio); text-align: center; padding: 40px; }
.sala-espera h3 { color: var(--branco); }
.sala-lateral { border-left: 1px solid var(--borda); display: flex; flex-direction: column; background: var(--branco); min-height: 0; }
.sala-cabecalho { padding: 18px 20px; border-bottom: 1px solid var(--borda); }
.sala-cabecalho h1 { margin: 0 0 2px; font-size: 1.05rem; }
.sala-cabecalho .meta { font-size: .85rem; color: var(--texto-suave); }
.chat { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.balao { max-width: 84%; padding: 11px 15px; border-radius: var(--raio-p); font-size: .95rem; line-height: 1.5; }
.balao .quem { display: block; font-size: .72rem; font-weight: 600; opacity: .75; margin-bottom: 3px; }
.balao--eu { align-self: flex-end; background: var(--tinta); color: var(--branco); border-bottom-right-radius: 5px; }
.balao--outro { align-self: flex-start; background: var(--tinta-suave); color: var(--texto); border-bottom-left-radius: 5px; }
.balao a { color: inherit; text-decoration: underline; }
.chat-forma { border-top: 1px solid var(--borda); padding: 14px 16px; display: flex; gap: 8px; align-items: center; }
.chat-forma input[type=text] { flex: 1; }
.anexo-botao {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--borda);
  background: var(--branco); cursor: pointer; font-size: 1.1rem; color: var(--tinta);
}
.anexo-botao:hover { border-color: var(--tinta); }

/* lista de modelos de receita — substitui o <select> nativo porque um
   <select> não permite pop-up de prévia sobre cada opção. */
.modelo-picker { position: relative; margin-bottom: 8px; }
.modelo-picker-toggle {
  width: 100%; text-align: left; padding: 12px 14px;
  border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  font-family: inherit; font-size: .95rem; color: var(--texto-suave);
  background: var(--branco); cursor: pointer; transition: var(--transicao);
}
.modelo-picker-toggle:hover { border-color: var(--tinta); color: var(--tinta); }
.modelo-picker-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--branco); border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  box-shadow: var(--sombra-hover); max-height: 240px; overflow-y: auto; padding: 4px;
}
.modelo-picker-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--raio-xs);
  background: none; border: 0; font-family: inherit; font-size: .9rem;
  color: var(--texto); cursor: pointer; transition: var(--transicao);
}
.modelo-picker-item:hover, .modelo-picker-item:focus-visible { background: var(--tinta-suave); color: var(--tinta); }
.modelo-picker-preview {
  position: absolute; left: calc(100% + 8px); width: 280px; max-height: 260px;
  overflow-y: auto; background: var(--branco); border: 1.5px solid var(--borda);
  border-radius: var(--raio-p); box-shadow: var(--sombra-hover);
  padding: 12px 14px; font-size: .85rem; color: var(--texto); white-space: pre-wrap; z-index: 41;
}
.modelo-picker-preview--esquerda { left: auto; right: calc(100% + 8px); }
@media (max-width: 720px) {
  /* sem espaço lateral no mobile — a prévia desce em vez de abrir pro lado */
  .modelo-picker-preview { left: 0; right: 0; width: auto; top: 100% !important; margin-top: 4px; }
}

/* ditado por voz — mesmo desenho de botão circular do anexo do chat;
   .ditando é o único estado com cor de alerta no sistema fora de
   erro/urgência de propósito, porque "gravando" precisa chamar atenção
   como um estado ativo, não decorativo. */
.ditar-botao {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--borda);
  background: var(--branco); cursor: pointer; color: var(--tinta); display: grid; place-items: center;
  transition: var(--transicao);
}
.ditar-botao:hover { border-color: var(--tinta); }
.ditar-botao.ditando {
  border-color: var(--erro); color: var(--erro); background: var(--erro-suave);
  animation: ditar-pulso 1.4s ease-in-out infinite;
}
@keyframes ditar-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--erro) 25%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ────────────────────────────────────────────────── shell do CRM ── */

/* O CRM é ferramenta de trabalho, não página editorial — o container de
   1200px que serve bem uma landing page deixa faixas enormes de vazio dos
   dois lados numa tela larga, exatamente onde mais se ganharia mostrando
   mais consulta/paciente por vez sem rolar. Mais largura, não infinita
   (tabela densa em 3000px de linha vira difícil de escanear). */
.container.crm-pagina { max-width: none; }

/* .nav-duplicada: aba interna que faz exatamente o mesmo trabalho do
   submenu do menu lateral (Consultas, Agenda, Financeiro, Avaliações —
   uma dimensão só de filtro, já coberta 1:1 lá). Mostrar as duas ao mesmo
   tempo é repetir a mesma escolha duas vezes na tela; no desktop o menu
   lateral já resolve, então esconde aqui. No mobile o menu lateral vira
   barra de ícones sem submenu — sem alternativa, a aba interna volta. */
@media (min-width: 981px) {
  .nav-duplicada { display: none; }
}

.crm-shell { display: grid; grid-template-columns: 216px 1fr; gap: 34px; align-items: start; transition: grid-template-columns var(--transicao); }
.crm-nav-coluna { position: sticky; top: 96px; }
.crm-nav-logo {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--borda);
  color: var(--texto); text-decoration: none;
}
.crm-nav-logo img { width: 24px; height: 24px; flex: none; }
.crm-nav-logo span { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-shell.nav-recolhida .crm-nav-logo { justify-content: center; padding: 4px 0 14px; }
.crm-shell.nav-recolhida .crm-nav-logo span { display: none; }
.crm-nav { display: flex; flex-direction: column; gap: 2px; }
/* o wrapper some do layout (o filho vira item direto do flex de .crm-nav) —
   só existe pra agrupar botão + submenu como uma unidade no markup. */
.crm-nav-grupo-item { display: contents; }
.crm-nav-item {
  display: flex; align-items: center; gap: 10px;
  text-align: left; width: 100%;
  background: none; border: 0; border-radius: var(--raio-p);
  padding: 11px 14px; font-family: inherit; font-size: .92rem; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; transition: var(--transicao);
}
.crm-nav-item:hover { background: var(--tinta-suave); color: var(--tinta); }
.crm-nav-item.ativo { background: var(--tinta); color: var(--branco); }
.crm-nav-icone { flex: none; opacity: .85; }
.crm-nav-item.ativo .crm-nav-icone { opacity: 1; }
.crm-nav-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-principal { min-width: 0; }

/* divisor entre grupos de módulos — substitui o antigo rótulo de texto
   (que colidia visualmente com o nome do item logo abaixo, ex.:
   "PACIENTES" em cima de um botão "Pacientes"); o ícone de cada item já
   basta para diferenciar seção, então aqui é só respiro. */
.crm-nav-divisor { border: 0; border-top: 1px solid var(--borda); margin: 8px 6px; }

/* submenu: só abre por CLIQUE — nunca por hover. .mostrar é aplicada pelo
   JS (ativaModulo(), em profissional.js) exatamente ao submenu do módulo
   que está ativo agora; clicar em outro módulo troca o .mostrar de um pro
   outro, então só um submenu fica aberto por vez. Interação simples e
   previsível, sem temporizador. */
.crm-nav-chevron { flex: none; transition: transform var(--transicao); opacity: .7; }
.crm-nav-item[aria-expanded="true"] .crm-nav-chevron { transform: rotate(180deg); }
.crm-nav-submenu {
  display: none; flex-direction: column; gap: 1px;
  padding: 2px 0 6px 14px; margin-left: 8px; border-left: 1.5px solid var(--borda);
}
.crm-nav-submenu.mostrar { display: flex; }
.crm-nav-subitem {
  display: block; text-align: left; width: 100%;
  background: none; border: 0; border-radius: var(--raio-p);
  padding: 8px 12px; font-family: inherit; font-size: .85rem; font-weight: 500;
  color: var(--texto-suave); cursor: pointer; transition: var(--transicao);
}
.crm-nav-subitem:hover { background: var(--tinta-suave); color: var(--tinta); }
.crm-nav-subitem.ativo { color: var(--tinta); font-weight: 700; }

/* hambúrguer: recolhe o menu para uma trilha só de ícones — texto,
   chevron e divisor somem; o ícone sozinho já identifica a seção, e o
   clique continua trocando de módulo normalmente. Mesma largura do botão
   de módulo logo abaixo (width: 100%, dentro da mesma coluna de 60px) —
   sem isso o hambúrguer ficava mais estreito e desalinhado da trilha. */
.crm-nav-hamburguer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 39px; margin: 0 0 10px; border-radius: var(--raio-p);
  background: none; border: 1.5px solid var(--borda); color: var(--tinta); cursor: pointer;
  transition: var(--transicao);
}
.crm-nav-hamburguer:hover { border-color: var(--tinta); background: var(--tinta-suave); }
.crm-shell.nav-recolhida { grid-template-columns: 60px 1fr; }
.crm-shell.nav-recolhida .crm-nav-item { justify-content: center; padding: 11px 8px; }
.crm-shell.nav-recolhida .crm-nav-rotulo,
.crm-shell.nav-recolhida .crm-nav-chevron,
.crm-shell.nav-recolhida .crm-nav-divisor,
.crm-shell.nav-recolhida .crm-nav-submenu { display: none; }
/* Botão do console (⌘K): na trilha recolhida vira ícone quadrado, senão o
   rótulo "Console clínico" quebra letra por letra nos 60px de largura. */
.crm-shell.nav-recolhida .bv-console-abrir {
  width: 36px; height: 36px; margin: 14px auto 6px; padding: 0; justify-content: center;
}
.crm-shell.nav-recolhida .bv-console-abrir span,
.crm-shell.nav-recolhida .bv-console-abrir kbd { display: none; }
.crm-shell.nav-recolhida .bv-console-abrir::after {
  content: '⌘K'; font-family: var(--fonte-corpo); font-size: .62rem; color: var(--texto-suave);
}

/* Passar o mouse na trilha recolhida expande o menu de verdade — a grade
   do .crm-shell volta pra largura cheia (216px), empurrando o conteúdo
   principal, nunca sobrepondo — diferente da versão anterior (overlay em
   position:absolute), que tampava informação da página. Sai do menu,
   volta a recolher. O botão hambúrguer continua sendo quem decide o
   estado "fixo" (lembrado no localStorage); o hover é só um espiar.
   :focus-within ao lado de :hover — sem isto, o rótulo de texto do item
   (.crm-nav-rotulo) some via display:none quando recolhido, e um item só
   com ícone fica sem nome nenhum pra quem navega por Tab, sem jeito de
   recuperá-lo só com mouse fora do alcance. Só faz sentido com o mouse do
   desktop — no celular/tablet embaixo de 981px o hambúrguer abre/fecha o
   menu de verdade (ver media query), sem essa espiada por hover que só
   confundiria no toque. */
@media (min-width: 981px) {
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover),
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) { grid-template-columns: 216px 1fr; }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .crm-nav-item,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) .crm-nav-item { justify-content: flex-start; padding: 11px 14px; }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .crm-nav-rotulo,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .crm-nav-chevron,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .crm-nav-divisor,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) .crm-nav-rotulo,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) .crm-nav-chevron,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) .crm-nav-divisor { display: revert; }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .crm-nav-submenu.mostrar,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:focus-within) .crm-nav-submenu.mostrar { display: flex; }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .bv-console-abrir {
    width: calc(100% - 32px); height: auto; margin: 14px 16px 6px; padding: 10px 12px; justify-content: space-between;
  }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .bv-console-abrir span,
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .bv-console-abrir kbd { display: revert; }
  .crm-shell.nav-recolhida:has(.crm-nav-coluna:hover) .bv-console-abrir::after { content: none; }
}

/* Cards do CRM do veterinário: ~35% mais baixos que o padrão do resto do
   site (o CRM prioriza densidade/eficiência, não respiro editorial — ver
   DESIGN.md, "o dashboard do veterinário pode ser mais funcional"), com
   alinhamento garantido pelo grid (stretch é o comportamento padrão do
   CSS Grid; nenhuma regra aqui força align-items:start). Escopado a
   .crm-pagina para não afetar o mesmo componente em outras páginas
   (pet-card também existe no painel do tutor, por exemplo). */
.crm-pagina .painel { padding: 18px; }
.crm-pagina .painel h3 { margin-bottom: 8px; }
.crm-pagina .metrica { padding: 13px; }
.crm-pagina .pet-card { padding: 12px; }
.crm-pagina .crm-pipeline-card { padding: 7px 12px; }
.crm-pagina .item-consulta { padding: 12px 20px; }
.crm-pagina .crm-ranking-item { padding: 8px 14px; }
.crm-pagina .depoimento { padding: 18px; }
.crm-pagina .grade { align-items: stretch; }

@media (max-width: 980px) {
  /* Mesmo hambúrguer do desktop, agora abrindo/fechando o menu de verdade
     (não só uma trilha de ícones) — fechado, o menu não ocupa nenhuma
     altura, o conteúdo sobe e usa a tela cheia; aberto, vira uma lista
     vertical normal, com direito a sanfona nos módulos com submenu (a
     barra horizontal antiga não tinha espaço pra isso, uma lista tem). */
  .crm-shell, .crm-shell.nav-recolhida { grid-template-columns: 1fr; }
  /* min-width:0 é o que falta pro item de grid encolher pra caber no track
   * de 1fr — sem isto, o item cresce até o max-content da barra de nav
   * horizontal (~1080px) e empurra a página inteira pra rolagem horizontal,
   * mesmo num celular de 390px. Bug confirmado medindo scrollWidth real. */
  .crm-nav-coluna { position: static; min-width: 0; }
  .crm-nav-logo { display: none; }
  .crm-nav-hamburguer { display: flex; width: auto; padding: 0 16px; margin-bottom: 14px; }
  .crm-shell.nav-recolhida .crm-nav { display: none; }
}

/* quadro de consultas: sempre uma coluna por vez (Confirmadas, Concluídas
   ou Canceladas, escolhida pelo submenu acima) — a coluna ocupa a largura
   cheia e os cards fluem em grade responsiva, em vez de ficarem espremidos
   na largura fixa de uma coluna de kanban. */
.crm-coluna { background: var(--fundo-alt); border-radius: var(--raio); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-pipeline .crm-coluna {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; align-content: start;
}
.crm-pipeline .crm-coluna h4 { grid-column: 1 / -1; }
.crm-coluna h4 {
  display: flex; justify-content: space-between; align-items: center; margin: 0;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-suave);
}
.crm-coluna h4 span { background: var(--branco); border-radius: var(--raio-xs); padding: 1px 8px; font-weight: 700; }
.crm-pipeline-card {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 11px 12px; font-size: .85rem; transition: var(--transicao);
}
/* consulta encerrada é <button>, não <a> (não navega, abre a ficha do
 * paciente) — reseta o UA-stylesheet de botão pra ficar idêntico ao card-link */
button.crm-pipeline-card { font-family: inherit; text-align: left; width: 100%; cursor: pointer; }
.crm-pipeline-card:hover { border-color: var(--tinta-clara); box-shadow: var(--sombra-sm); color: inherit; }
.crm-pipeline-card strong { color: var(--tinta); font-size: .92rem; }
.crm-pipeline-card .meta { color: var(--texto-suave); font-size: .8rem; }

/* ───────────────────────────────────────────────────────────── CRM ── */

.crm-grafico { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 24px; }
.crm-barra-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; min-width: 0;
}
.crm-barra {
  width: 100%; max-width: 40px; background: var(--tinta-suave);
  border-radius: var(--raio-xs) var(--raio-xs) 0 0; transition: var(--transicao); min-height: 3px;
}
.crm-barra--atual { background: var(--tinta); }
.crm-barra-valor { font-size: .75rem; font-weight: 700; color: var(--tinta); margin-bottom: 6px; }
.crm-barra-mes { font-size: .72rem; color: var(--texto-suave); margin-top: 8px; }

/* ───────────────────────────────────── painel interativo (Financeiro) ── */

.fin-filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-filtros select { width: auto; }

.fin-legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; font-size: .8rem; color: var(--texto-suave); }
.fin-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legenda .ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fin-legenda .ponto--marketplace { background: var(--verde); }
.fin-legenda .ponto--externo { background: var(--laranja); }

/* histórico de até 12 meses: em tela larga as barras crescem pra preencher
 * (flex:1), mas nunca ficam menores que 52px — abaixo disso o valor em R$
 * acima da barra não cabe numa linha só. Quando 12 barras de 52px não
 * cabem, a rolagem horizontal assume em vez de espremer o texto. */
.fin-grafico { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fin-barra-item {
  flex: 1 0 52px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%;
}
.fin-barra-valor { font-size: .75rem; font-weight: 700; color: var(--texto); margin-bottom: 6px; white-space: nowrap; }
.fin-barra-pilha {
  width: 100%; max-width: 40px; display: flex; flex-direction: column-reverse;
  border-radius: var(--raio-xs) var(--raio-xs) 0 0; overflow: hidden; min-height: 3px;
}
.fin-barra-seg--marketplace { background: var(--verde); width: 100%; }
.fin-barra-seg--externo { background: var(--laranja); width: 100%; }
.fin-barra-mes { font-size: .72rem; color: var(--texto-suave); margin-top: 8px; }
.fin-grafico-vazio { color: var(--texto-suave); font-size: .88rem; text-align: center; width: 100%; padding: 40px 0; }

.fin-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fin-breakdown li { display: grid; gap: 5px; }
.fin-breakdown .fin-breakdown-topo { display: flex; justify-content: space-between; font-size: .85rem; gap: 12px; }
.fin-breakdown .fin-breakdown-topo strong { font-weight: 600; }
.fin-breakdown .fin-breakdown-topo span { color: var(--texto-suave); flex: none; }
.fin-breakdown-barra { height: 6px; border-radius: var(--raio-xs); background: var(--fundo-alt); overflow: hidden; }
.fin-breakdown-preenchimento { height: 100%; background: var(--tinta, var(--verde)); border-radius: var(--raio-xs); }

.crm-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crm-ranking li { padding: 0; border: 0; background: none; }
.crm-ranking-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--branco);
  font: inherit; text-align: left; cursor: pointer; transition: var(--transicao);
}
.crm-ranking-item:hover { border-color: var(--tinta); background: var(--tinta-suave); }
.crm-ranking .posicao {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tinta-suave);
  color: var(--tinta); font-weight: 700; font-size: .75rem; display: grid; place-items: center;
}
.crm-ranking .nome { flex: 1; font-weight: 600; color: var(--texto); }
.crm-ranking .meta { font-size: .85rem; color: var(--texto-suave); }
.crm-ranking .total { font-weight: 700; color: var(--tinta); }

/* card do pipeline com ações (remarcar/cancelar/não compareceu) — só as
   "Próximas consultas" ganham essa segunda linha embaixo do card em si. */
.crm-pipeline-item { display: flex; flex-direction: column; gap: 6px; }
.crm-pipeline-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.crm-pipeline-acoes .btn { font-size: .74rem; padding: 5px 9px; }

/* ─────────────────────────────────────────────── agenda em grade ── */

/* rola na horizontal em vez de espremer os dias — ver o piso de 84px por
   coluna em renderizaGradeHoras() (profissional.js). Rola na VERTICAL
   dentro de uma altura fixa (em vez de esticar a página até 24h) — a
   agenda cobre o dia inteiro sem forçar rolar a tela toda pra achar a
   noite; só a caixa da agenda rola, como qualquer calendário de verdade. */
#gradeCalendario { overflow: auto; max-height: 64vh; border-radius: var(--raio); }

/* Configurações: a página em volta nunca cresce — quem rola, quando o
   conteúdo da aba não cabe (caso claro do "Meu perfil", com diploma, foto,
   bio e formação), é só esta caixa, do mesmo jeito que a agenda em grade
   já faz. Sem isso, cada aba empurrava a página inteira pra baixo. */
.config-conteudo { max-height: 64vh; overflow-y: auto; padding-right: 6px; }
@media (max-width: 720px) { .config-conteudo { max-height: none; overflow: visible; } }
.cal-grade {
  display: grid; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco);
}
.cal-cabecalho {
  display: grid; border-bottom: 1px solid var(--borda); background: var(--fundo-alt);
  position: sticky; top: 0; z-index: 2;
}
.cal-cabecalho > div {
  padding: 10px 8px; text-align: center; font-size: .8rem; font-weight: 700; color: var(--tinta);
  border-left: 1px solid var(--borda);
}
.cal-cabecalho > div:first-child { border-left: 0; }
.cal-linha { display: grid; border-top: 1px solid var(--borda); min-height: 34px; }
.cal-linha:first-child { border-top: 0; }
.cal-hora {
  padding: 4px 8px; font-size: .72rem; color: var(--texto-suave); text-align: right;
  border-right: 1px solid var(--borda); background: var(--fundo-alt);
  position: sticky; left: 0;
}
/* clicável: abre o formulário de agendamento com o horário já preenchido —
 * o hover sinaliza isso mesmo fora do expediente (a listra continua, o
 * profissional pode encaixar um horário pontual fora da janela normal). */
.cal-celula { border-left: 1px solid var(--borda); padding: 3px; position: relative; cursor: pointer; transition: var(--transicao); }
.cal-celula:hover { background: var(--verde-suave); }
.cal-celula--fora:hover { background: var(--verde-suave); }
.cal-celula:first-of-type { border-left: 0; }
.cal-celula--fora { background: repeating-linear-gradient(45deg, var(--fundo-alt), var(--fundo-alt) 6px, var(--branco) 6px, var(--branco) 12px); }
.cal-evento {
  display: block; width: 100%; text-align: left; border: 0; border-radius: var(--raio-xs);
  background: var(--tinta-suave); color: var(--tinta); font-size: .72rem; font-weight: 600;
  padding: 3px 6px; margin-bottom: 2px; cursor: pointer; line-height: 1.3;
}
.cal-evento:hover { background: var(--tinta); color: var(--branco); }
.cal-evento--cancelado { text-decoration: line-through; opacity: .6; }

.cal-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-mes-dia {
  min-height: 90px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 6px; background: var(--branco); font-size: .78rem; cursor: pointer; transition: var(--transicao);
}
.cal-mes-dia:hover { border-color: var(--verde-claro); box-shadow: var(--sombra-sm); }
.cal-mes-dia--fora-mes { background: var(--fundo-alt); color: var(--texto-suave); }
.cal-mes-dia--hoje { border-color: var(--tinta); border-width: 2px; }
.cal-mes-numero { font-weight: 700; margin-bottom: 4px; }

/* prontuário para impressão */
.folha { max-width: 820px; margin: 40px auto; padding: 48px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); }
.folha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid var(--tinta); padding-bottom: 18px; margin-bottom: 26px; }
.folha h1 { font-size: 1.4rem; }
.folha section { margin-bottom: 22px; }
.folha section h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acao-texto); margin: 0 0 6px; }
.folha section p { white-space: pre-wrap; margin: 0; font-size: .95rem; }
.folha-assinatura { margin-top: 46px; padding-top: 14px; border-top: 1px solid var(--borda); text-align: center; font-size: .9rem; color: var(--texto-suave); }

@media print {
  .topo, .nao-imprime { display: none !important; }
  .folha { border: 0; margin: 0; padding: 0; }
  body { font-size: 12pt; }
}

/* ───────────────────────────────────────────────────── responsivo ── */

@media (max-width: 980px) {
  .hero-grid, .rodape-grid,
  .filtros, .perfil-topo { grid-template-columns: 1fr; }
  .caixa-agendar { position: static; }
  /* Tablet ganha 2 colunas, não 1 — uma grade de 3 esticada pra 1 coluna
   * larga desperdiça a largura real de um iPad/tablet só pra "não quebrar";
   * .grade--4 já fazia isso certo, .grade--3 pulava direto pra 1 coluna. */
  .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .sala { grid-template-columns: 1fr; height: auto; }
  .sala-video { min-height: 52vh; }
  .sala-lateral { height: 62vh; border-left: 0; border-top: 1px solid var(--borda); }
}

/* Header de marketing: o menu de 4 links + sessão precisa de ~900px pra
 * caber numa linha sem quebrar palavra a palavra — 768px (tablet retrato)
 * cabia no meio do caminho entre "vira hambúrguer" e "linha inteira",
 * quebrando cada link em duas linhas. Breakpoint isolado do resto do
 * @media de 720px porque essa faixa (721–900px) só afeta o header. */
@media (max-width: 900px) {
  .nav {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    background: var(--branco); border-bottom: 1px solid var(--borda);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 18px;
  }
  .nav.aberto { display: flex; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--borda); }
  .nav .btn { margin-top: 12px; }
  .menu-botao { display: flex; margin-left: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .secao { padding: 58px 0; }
  .grade--2, .grade--3, .grade--4, .linha { grid-template-columns: 1fr; }
  .item-consulta { grid-template-columns: 72px 1fr; }
  .item-consulta .acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .folha { padding: 24px; margin: 16px; }
  body:has(.cta-mobile-fixo) main { padding-bottom: 76px; }
  .cta-mobile-fixo { display: flex; }
}

/* ────────────────────────────────────────────────── foco e movimento ── */

/* anel de foco visível e consistente em qualquer elemento interativo que
   não tenha um estilo de foco próprio (inputs já têm box-shadow acima) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.opcao-triagem:focus-visible, .slot:focus-visible, .opcao-servico:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--sol);
  outline-offset: 2px;
}

/* Quem pede menos movimento não pediu menos resposta. A regra anterior
   zerava animação E transição em `*`: junto com a decoração ia embora o
   feedback de foco, seleção e mudança de estado — numa interface onde o
   profissional marca "concluir consulta" e precisa ver que registrou.
   Aqui: animação contínua e deslocamento morrem; a mudança de cor e de
   contorno que confirma uma ação continua, só instantânea o bastante para
   não parecer movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* nada de deslocar, escalar ou girar */
  *, *::before, *::after {
    transition-property: color, background-color, border-color, outline-color,
                         box-shadow, opacity !important;
    transition-duration: 80ms !important;
  }
  /* o hover que levanta o card e a barra que cresce param de se mover */
  .card:hover, .btn:hover, .btn--acento:hover,
  .vet-card:hover {
    transform: none !important;
  }
}

/* Alto contraste do Windows: o sistema substitui as cores, e some tudo que
   dependia SÓ de cor para significar — o estado selecionado de uma opção,
   por exemplo. Recuperado aqui com forma, não com cor: contorno visível e
   espessura. */
@media (forced-colors: active) {
  .card, .painel, .vet-card, .balao, .aviso {
    border: 1px solid CanvasText;
  }
  /* selecionado deixa de ser "fundo colorido" e passa a ser contorno duplo */
  .opcao-servico.selecionado, .slot.selecionado {
    outline: 3px solid Highlight;
    outline-offset: 1px;
  }
  /* botão precisa continuar parecendo botão quando o fundo é substituído */
  .btn { border: 1px solid ButtonText; }
  /* ícone e mascote em SVG seguem a cor do texto do sistema */
  svg { forced-color-adjust: auto; }
}

/* ── editor com formatação da receita ───────────────────────────────────
   Só a prescrição tem barra de ferramentas: é o único campo do prontuário
   que vira documento impresso e sai da plataforma. Ver texto_rico.py, que
   define — e limita, no servidor — exatamente o que estes botões produzem. */
.editor-rico {
  border: 1.5px solid var(--borda); border-radius: var(--raio-p);
  background: var(--branco); overflow: hidden;
  /* o editor herda o lugar do <textarea> que ele substitui, e na aba
     Pacientes esse lugar é uma linha flex ao lado do botão de ditado.
     `min-width:0` é o que impede a barra de ferramentas de empurrar a
     caixa para além da largura do painel. */
  flex: 1; min-width: 0;
}
.editor-rico:focus-within { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(14,79,74,.15); }
.editor-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 8px; background: var(--fundo-alt);
  border-bottom: 1px solid var(--borda);
}
.editor-btn {
  min-width: 32px; height: 32px; padding: 0 7px;
  border: 0; border-radius: var(--raio-xs); background: transparent;
  color: var(--texto); font-family: inherit; font-size: .92rem; line-height: 1;
  cursor: pointer; transition: var(--transicao);
}
.editor-btn:hover { background: var(--branco); }
.editor-btn[aria-pressed="true"] { background: var(--verde-suave); color: var(--verde); }
.editor-sep { width: 1px; height: 20px; margin: 0 5px; background: var(--borda); }
.editor-select {
  width: auto; padding: 5px 8px; font-size: .82rem; height: 32px;
  border-radius: var(--raio-xs); border-color: var(--borda);
}
.editor-corpo {
  min-height: 160px; padding: 14px; font-size: .95rem; line-height: 1.55;
  color: var(--texto); overflow-wrap: anywhere;
}

/* ── modo de foco ─────────────────────────────────────────────────────────
   Pedido da Dra. Raryna: escrever receita numa caixa espremida entre a
   conduta e o botão de enviar não dá. Recolhida, a caixa é só prévia — sem
   barra, altura curta, cursor de clique; o clique abre o diálogo, que ocupa
   quase toda a tela e cobre o resto. Ver montaEditorRico() em api.js. */
.editor-rico--recolhido .editor-barra { display: none; }
.editor-rico--recolhido .editor-corpo {
  min-height: 0; max-height: 150px; overflow: hidden; cursor: pointer;
  /* esmaece o fim do texto em vez de cortar no meio da linha: deixa claro
     que há mais receita do que a prévia mostra */
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.editor-abrir {
  display: block; width: 100%; padding: 9px 14px;
  border: 0; border-top: 1px solid var(--borda);
  background: var(--fundo-alt); color: var(--verde);
  font-family: inherit; font-size: .85rem; font-weight: 600; text-align: left;
  cursor: pointer; transition: var(--transicao);
}
.editor-abrir:hover { background: var(--verde-suave); }
/* prontuário travado: o botão fica apagado mas segue clicável, porque é o
   clique que abre o pop-up de "Editar prontuário" (ver travar() em api.js) */
.campo--travado .editor-abrir { color: var(--texto-suave); }
/* aberto no diálogo: a caixa não tem borda própria nem rolagem — quem rola
   é o corpo do editor, para a barra de ferramentas ficar sempre à vista */
.editor-rico:not(.editor-rico--recolhido) {
  border: 0; display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.editor-rico:not(.editor-rico--recolhido) .editor-abrir { display: none; }
.editor-rico:not(.editor-rico--recolhido) .editor-corpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 22px clamp(16px, 4vw, 40px);
  font-size: 1rem; line-height: 1.6;
}

/* O diálogo. `.modal` já dá fundo, sombra e backdrop; aqui vem só o tamanho
   e a divisão em três faixas (topo, editor, ações). */
.modal--editor, .modal--foco {
  max-width: min(1080px, 94vw); width: 94vw; height: min(88vh, 900px);
  padding: 0;
}
/* O display SÓ com [open] — e este seletor é a correção do bug mais teimoso
   do editor. `display:flex` incondicional num <dialog> VENCE a regra do
   navegador que esconde diálogo fechado (`dialog:not([open]){display:none}`
   é regra de user-agent; regra de autor ganha). Resultado: o close() sempre
   funcionou, a arrumação devolvia o editor à página, e o CADÁVER do diálogo
   — vazio, sem backdrop — continuava pintado por cima de tudo, com um botão
   Fechar que não fazia nada porque não havia mais o que fechar. Três rodadas
   de caça a handler e cache, e o culpado era esta linha de CSS. */
.modal--editor[open], .modal--foco[open] { display: flex; flex-direction: column; }
.editor-dialogo-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--borda);
}
.editor-dialogo-topo strong { font-family: var(--fonte-titulo); font-size: 1rem; }
.editor-fechar {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--texto-suave);
  padding: 6px 8px; border-radius: var(--raio-xs);
}
.editor-fechar:hover { background: var(--fundo-alt); color: var(--texto); }
.editor-dialogo-corpo { flex: 1; min-height: 0; display: flex; }
.editor-dialogo-msg:not(:empty) { padding: 0 20px; }
.modal--editor .modal-acoes, .modal--foco .modal-acoes { padding: 14px 20px; border-top: 1px solid var(--borda); }
@media (max-width: 560px) {
  .modal--editor, .modal--foco { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
}
.editor-corpo:focus { outline: none; }
.editor-corpo:empty::before {
  content: attr(data-vazio); color: var(--texto-suave);
}
/* Piscada de aviso quando o menu de letra é usado sem seleção — a alternativa
   era escrever no #msgPront da sala, que não existe nas outras duas telas
   onde o mesmo editor agora aparece. */
.editor-rico--avisando { border-color: var(--erro); }
.editor-rico--avisando .editor-select { border-color: var(--erro); }
/* a tabela de posologia precisa parecer com o que sai no PDF — grade
   visível, célula com respiro, sem colapsar numa lista de palavras */
.editor-corpo table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.editor-corpo th, .editor-corpo td {
  border: 1px solid var(--borda); padding: 6px 8px; font-size: .9rem; text-align: left;
}
.editor-corpo ul, .editor-corpo ol { margin: 8px 0; padding-left: 22px; }
.editor-corpo p { margin: 0 0 8px; }
/* editor travado junto com o resto do prontuário (ver travaEdicaoProntuario) */
.editor-rico.campo--travado { background: var(--fundo-alt); }
.editor-rico.campo--travado .editor-barra { opacity: .5; pointer-events: none; }
.editor-rico.campo--travado .editor-corpo { cursor: pointer; }
@media (max-width: 560px) {
  .editor-sep { display: none; }
}

/* Receita já formatada, fora do editor: impressão do prontuário e painel do
   tutor. Mesmas regras de grade e espaçamento do editor, para o documento na
   tela ser reconhecível como o que sai no PDF. */
.receita-formatada table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.receita-formatada th, .receita-formatada td {
  border: 1px solid var(--borda); padding: 6px 8px; text-align: left;
}
.receita-formatada ul, .receita-formatada ol { margin: 8px 0; padding-left: 22px; }
.receita-formatada p { margin: 0 0 8px; }

/* ── tabela densa e linha de lista ───────────────────────────────────────
   Dois padrões que as telas novas (estoque, equipe da clínica, série de
   exame) repetem: tabela de leitura com muita linha e pouca decoração, e
   linha de lista com a ação à direita. */
.tabela-lotes { width: 100%; border-collapse: collapse; font-size: .87rem; }
.tabela-lotes th {
  text-align: left; font-weight: 600; color: var(--texto-suave);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 6px 8px; border-bottom: 1px solid var(--borda);
}
.tabela-lotes td { padding: 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-lotes tr:last-child td { border-bottom: 0; }
/* lote vencido não some da tabela: ele precisa ser visto para receber baixa
   como perda. O que muda é o peso — texto apagado, nunca escondido. */
.tabela-lotes .lote--vencido td { color: var(--texto-suave); }

.linha-lista {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--borda);
}
.linha-lista:last-child { border-bottom: 0; }
.linha-lista--inativa { opacity: .55; }

/* ── evolução dos exames ─────────────────────────────────────────────────
   Uma coluna por parâmetro em tela larga; empilhado no celular. Cada card
   traz gráfico e tabela do MESMO parâmetro juntos — separar os dois obriga
   a olhar em dois lugares para responder uma pergunta só. */
.grade-exames {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.serie-exame { margin: 0; }
.serie-exame svg { margin: 10px 0 4px; }
.tabela-exame { font-size: .82rem; }
.destaques-exame {
  margin: 0 0 16px; padding-left: 20px;
  font-size: .9rem; line-height: 1.6; color: var(--texto);
}

/* Bloco de exames na ficha do pet, no painel do tutor. Fica abaixo da
   carteira de vacina e da linha de peso, sob um clique: a maioria dos pets
   não tem exame nenhum, e um bloco vazio em toda ficha seria ruído em cima
   de quem só quis ver a vacina. */
.pet-exames { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 14px; }
.pet-exames h5 { font-size: .95rem; margin: 0; }
.pet-exames svg { margin: 6px 0 4px; }

/* ══════════════════════════════ indicadores (o painel de BI) ══════════════
   Pedido da Dra. Raryna: gráficos "visíveis mas preparados para o modo
   atenção, para não poluir a página". Daí a hierarquia: os cartões nascem
   pequenos e sem moldura pesada, e o botão "Ampliar" leva o gráfico ao
   diálogo de foco (.modal--foco, o mesmo do editor de receita) com a tabela
   de dados junto. Ver carregaIndicadores() em profissional.js. */

.filtros--bi { align-items: end; }

/* Tiles de número: o valor é o herói, o rótulo e a comparação recuam. */
.bi-tiles {
  display: grid; gap: 12px; margin-bottom: 20px;
  /* 178px é a largura de "R$ 2.360,00" no corpo do valor com o respiro do
     cartão: abaixo disso o número quebra em duas linhas e o tile deixa de
     ser um número para virar um parágrafo */
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.bi-tiles--compacto { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 14px; }
.bi-tile {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 12px 14px; background: var(--branco);
  display: flex; flex-direction: column; gap: 2px;
}
.bi-tile-rotulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-suave); font-weight: 600;
}
.bi-tile-valor {
  font-family: var(--fonte-titulo); line-height: 1.15;
  /* nunca quebra: valor partido ao meio lê-se como dois números */
  white-space: nowrap; font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}
.bi-tile-var { font-size: .76rem; color: var(--texto-suave); }
/* subir não é sempre bom (cancelamento que sobe é ruim), então a cor aqui
   diz DIREÇÃO, não julgamento — e vem sempre acompanhada do número */
.bi-tile-var--sobe { color: var(--sucesso); }
.bi-tile-var--desce { color: var(--erro); }

.bi-grade {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
/* a série temporal e o faturamento ocupam a linha inteira: são leitura de
   progressão, e progressão espremida em 340px vira rabisco */
.bi-grade > .bi-cartao:nth-child(1),
.bi-grade > .bi-cartao:nth-child(2) { grid-column: 1 / -1; }
.bi-cartao { margin: 0; }
.bi-cartao-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 10px;
}
.bi-cartao-topo h4 { margin: 0; font-size: .98rem; }
.bi-cartao-topo .meta { margin: 2px 0 0; }
.bi-cartao-corpo { overflow-x: auto; }

.bi-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.bi-legenda-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--texto-suave);
}
.bi-legenda-cor { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Barras horizontais: rótulo à esquerda, valor à direita, trilho no meio.
   Rótulo direto em todas porque são poucas — quando forem muitas, o corte
   fica no servidor (top 8), não no CSS. */
.bi-barras { display: flex; flex-direction: column; gap: 8px; }
.bi-barra {
  display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center; gap: 10px; font-size: .85rem;
}
.bi-barra:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: var(--raio-xs); }
.bi-barra-rotulo { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-barra-trilho { background: var(--fundo-alt); border-radius: 4px; height: 10px; overflow: hidden; }
.bi-barra-preenche { display: block; height: 100%; border-radius: 4px; }
.bi-barra-valor { color: var(--texto-suave); font-size: .8rem; white-space: nowrap; }

/* Caixa de detalhe do hover. Uma só para a página, posicionada no ponteiro. */
.bi-dica {
  position: fixed; z-index: 1000; pointer-events: none;
  background: var(--tinta-escura); color: var(--sobre-escuro);
  padding: 8px 11px; border-radius: var(--raio-xs);
  font-size: .8rem; line-height: 1.45; max-width: 260px;
  box-shadow: var(--sombra-hover);
}
.bi-dica strong { color: #fff; }

svg [tabindex]:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }

.bi-foco-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.bi-foco-grafico { margin-bottom: 18px; }
.bi-foco-tabela { overflow-x: auto; }

/* Linha do tempo do paciente: a faixa de cor à esquerda é a modalidade, e é
   a mesma cor do chip da agenda e da série do gráfico. */
.bi-timeline { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.bi-timeline-item {
  display: grid; grid-template-columns: 110px 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px 8px 12px; font-size: .85rem;
  border-left: 3px solid var(--cor-tipo); border-radius: 0 var(--raio-xs) var(--raio-xs) 0;
  background: var(--fundo-alt);
}
.bi-timeline-item:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.bi-timeline-data { color: var(--texto-suave); font-size: .8rem; }
.bi-timeline-servico { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-timeline-docs { display: flex; gap: 4px; flex-wrap: wrap; }
.bi-timeline-valor { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ── chips de tipo: a cor é a mesma em toda a plataforma ──────────────────
   Um chip nunca diz o que é só pela cor: o rótulo está sempre escrito. A cor
   serve para reconhecer de relance o que o texto já afirma. */
.chip-tipo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--raio-xs);
  font-size: .72rem; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent;
}
.chip-tipo--presencial { color: var(--tipo-presencial); background: var(--tipo-presencial-suave); }
.chip-tipo--teleconsulta { color: var(--tipo-teleconsulta); background: var(--tipo-teleconsulta-suave); }
.chip-tipo--telemonitoramento { color: var(--tipo-telemonitoramento); background: var(--tipo-telemonitoramento-suave); }
.chip-tipo--teleorientacao { color: var(--tipo-teleorientacao); background: var(--tipo-teleorientacao-suave); }
.chip-tipo--receita { color: var(--doc-receita); background: var(--doc-receita-suave); }
.chip-tipo--exames { color: var(--doc-exames); background: var(--doc-exames-suave); }
.chip-tipo--anexo { color: var(--doc-anexo); background: var(--doc-anexo-suave); }
.chip-tipo--vacina { color: var(--reg-vacina); background: var(--reg-vacina-suave); }
.chip-tipo--peso { color: var(--reg-peso); background: var(--reg-peso-suave); }
.chip-tipo--documento { color: var(--reg-documento); background: var(--reg-documento-suave); }
.chip-tipo--observacao { color: var(--reg-observacao); background: var(--reg-observacao-suave); }
/* pagamento é estado, não categoria — usa a paleta de estado, como a
   situação da consulta */
.chip-tipo--pago { color: var(--sucesso); background: var(--sucesso-suave); }
.chip-tipo--pendente { color: var(--alerta-texto); background: var(--alerta-suave); }

@media (max-width: 720px) {
  .bi-grade { grid-template-columns: 1fr; }
  .bi-timeline-item { grid-template-columns: 1fr auto; row-gap: 4px; }
  .bi-timeline-data { grid-column: 1 / -1; }
}

/* Evento da agenda com a faixa da modalidade. A faixa fica na borda, e não no
   fundo: bloco inteiro colorido em cima de uma grade de horários vira campo
   de bandeiras, e o que importa continua sendo ler a hora e o nome. */
.cal-evento--tipo { border-left: 3px solid var(--cor-tipo); }

/* ── cartão do paciente na lista ──────────────────────────────────────────
   Mesmo conserto do card de consulta: a versão anterior punha os quatro
   botões na mesma linha do texto, e eles comiam a largura até "Cão · tutor(a):
   Tutor Teste" quebrar em três linhas. Agora as ações têm linha própria, e o
   corpo ganha `min-width: 0` para poder encolher de verdade dentro da grade. */
.pet-card--lista { display: block; padding: 14px 16px; }
.pc-topo {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "avatar corpo" "avatar acoes";
  gap: 6px 12px; align-items: start; width: 100%;
}
.pc-topo .avatar-pet { grid-area: avatar; width: 44px; height: 44px; font-size: 1rem; }
.pc-corpo { grid-area: corpo; min-width: 0; }
.pc-corpo h4 {
  margin: 0 0 5px; font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.pc-chips:empty { display: none; }
.pc-corpo .meta { font-size: .82rem; }
.pc-acoes {
  grid-area: acoes; display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; margin-top: 4px;
}
/* chip nunca quebra no meio da frase: ou cabe numa linha, ou o texto é curto
   demais para caber e o title carrega a explicação */
.chip, .chip-tipo { white-space: nowrap; }
@media (max-width: 560px) {
  .pc-acoes { justify-content: flex-start; }
}

/* ── nomes de arquivo quebram, não estouram ───────────────────────────────
   Anexo herda o nome que veio do computador de alguém ("hemograma completo
   final REVISADO (2).pdf" é o caso BOM). Sem isto, o nome atravessava a
   tabela de documentos do tutor, a lista de laudos e o botão de abrir
   arquivo sem quebrar linha. `anywhere` em vez de `break-word` porque nome
   de arquivo não tem espaço onde quebrar. */
.tabela-lotes td, .tabela-lotes td a { overflow-wrap: anywhere; }
.linha-lista { min-width: 0; }
.linha-lista a, .linha-lista .meta { overflow-wrap: anywhere; }
.balao a { overflow-wrap: anywhere; }
/* botão que carrega nome de arquivo: o único .btn autorizado a quebrar linha */
.btn--arquivo { white-space: normal; overflow-wrap: anywhere; text-align: left; height: auto; }

/* ── fluxo de atendimento com gravação (aba Pacientes e tela /gravar) ─────
   Cada momento tem UMA tela: preparar → gravar → transcrever → revisar.
   Durante a gravação não existe formulário nem segundo botão de salvar à
   vista — foi exatamente onde a primeira versão perdeu quem estava com a
   mão no paciente (pedido da Dra. Raryna, 28/08). */
.atd-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.atd-dica { color: var(--texto-suave); font-size: .82rem; margin: 10px 0 0; max-width: 62ch; }

.atd-gravando {
  text-align: center; padding: 30px 20px;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); box-shadow: var(--sombra-sm);
  max-width: 440px; margin: 0 auto;
}
.atd-gravando .atd-dica { margin-left: auto; margin-right: auto; }
/* o ponto vermelho pulsante é o "REC" universal — diz "está gravando" de
   relance, com o celular na bancada; a animação morre com o bloco global de
   prefers-reduced-motion e o ponto continua lá, parado, dizendo o mesmo */
.atd-pulso {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--erro); animation: atd-pulsa 1.6s ease-in-out infinite;
}
@keyframes atd-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--erro) 35%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}
/* tabular-nums: o cronômetro não pode "dançar" de largura a cada segundo */
.atd-cronometro {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--texto);
  margin: 10px 0 2px;
}
.atd-processando { text-align: center; padding: 26px 18px; }
.atd-processando .atd-dica { margin-left: auto; margin-right: auto; }

/* corpo rolável do modo atenção — o diálogo genérico da página (ver
   abreEmFoco em profissional.js): qualquer bloco entra aqui e o conteúdo
   respira num container de leitura, não espremido num card */
.atd-foco-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 26px 26px; }
.atd-foco-corpo > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.atd-foco-corpo .linha { gap: 14px; }
@media (max-width: 640px) {
  .atd-foco-corpo { padding: 6px 14px 14px; }
  .atd-foco-corpo .linha { grid-template-columns: 1fr; }
  .atd-acoes .btn { width: 100%; }
}

/* o painel de atendimento devolvido ao card (diálogo fechado no meio do
   fluxo) precisa da divisória; dentro do diálogo, não */
.pet-card .atd { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 14px; }
.atd-foco-corpo .atd { border-top: 0; margin-top: 0; padding-top: 4px; }

/* ── a folha do prontuário: revisão NO formato final ──────────────────────
   Depois da transcrição, o que se edita é o próprio documento padrão BEVET
   — cabeçalho com marca, paciente e CRMV, seções com o rótulo da folha
   impressa, e campos sem moldura que crescem com o conteúdo. A receita fica
   fora: é outro documento e abre a própria camada de foco. */
.atd-folha {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 32px 36px; margin-top: 12px;
}
.atd-folha-topo {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 2px solid var(--tinta); padding-bottom: 14px; margin-bottom: 22px;
}
.atd-folha-marca {
  display: block; font-family: var(--fonte-titulo);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
}
.atd-folha-doc {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave);
}
.atd-folha-meta { font-size: .85rem; color: var(--texto-suave); text-align: right; line-height: 1.55; }
.atd-folha-meta strong { color: var(--texto); }
.atd-folha section { margin: 0 0 16px; }
.atd-folha section h4 {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta); margin: 0 0 2px;
}
/* o campo é papel: sem borda em repouso, fundo suave no hover, anel só no
   foco — e a altura acompanha o texto (ver _ajustaFolha em profissional.js) */
.atd-folha-campo, textarea.atd-folha-campo, input.atd-folha-campo {
  display: block; width: calc(100% + 16px); margin-left: -8px;
  border: 0; border-radius: var(--raio-xs); background: transparent;
  padding: 5px 8px; font-size: .95rem; line-height: 1.6;
  min-height: 0; resize: none; overflow: hidden;
}
.atd-folha-campo:hover { background: var(--fundo-alt); }
.atd-folha-campo:focus {
  background: var(--branco); border: 0; outline: none;
  box-shadow: 0 0 0 2px var(--tinta);
}
@media (max-width: 640px) {
  .atd-folha { padding: 20px 16px; }
  .atd-folha-meta { text-align: left; }
}

/* a receita em camada própria também parece documento: a área de escrita
   vira uma folha sobre a mesa do diálogo */
.modal--editor .editor-dialogo-corpo { background: var(--fundo-alt); padding: 16px; }
.modal--editor .editor-rico:not(.editor-rico--recolhido) {
  max-width: 800px; margin: 0 auto; width: 100%; box-shadow: var(--sombra);
}

/* ── a visão do paciente (BI de um animal, aberta pelo clique no card) ── */
.pet-card--clicavel { cursor: pointer; }
.pet-card--clicavel:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.visao-pet-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.visao-pet-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
.visao-pet-dados { margin: 0; font-size: .9rem; }
.visao-pet-dados dt { font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-suave); margin-top: 10px; }
.visao-pet-dados dt:first-child { margin-top: 0; }
.visao-pet-dados dd { margin: 1px 0 0; }
.visao-pet-exame {
  display: block; padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  color: var(--texto); transition: border-color var(--transicao);
}
.visao-pet-exame:hover { border-color: var(--tinta); color: var(--texto); }
.visao-pet-exame strong { display: block; font-size: .9rem; }
.visao-pet-exame span { display: block; font-size: .78rem; color: var(--texto-suave); }
/* linha de atendimento com a cor da modalidade na borda — mesmo vocabulário
   do card de consulta; abre o prontuário daquela etapa, empilhado */
.visao-pet-atd {
  display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 9px 12px; margin-bottom: 6px; text-align: left;
  background: var(--branco); border: 1px solid var(--borda);
  border-left: 3px solid var(--cor-tipo, var(--borda));
  border-radius: var(--raio-p); font: inherit; font-size: .88rem;
  cursor: pointer; transition: border-color var(--transicao), box-shadow var(--transicao);
}
.visao-pet-atd:hover { box-shadow: var(--sombra-sm); }
.visao-pet-atd-data { font-weight: 600; white-space: nowrap; }
.visao-pet-atd-fim { margin-left: auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* recolhido no card: só a faixa "Retomar" aparece — o formulário nunca
   volta a engolir o card. A faixa avisa se o microfone segue aberto. */
.atd-retomar { display: none; }
.atd--recolhido [data-etapa] { display: none !important; }
.atd--recolhido .atd-retomar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.atd-retomar span {
  font-size: .88rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}

/* ── menu suspenso do card (details nativo) ───────────────────────────────
   As ações de consulta saem da linha do card e viram um menu: o card fica
   com UMA decisão primária (+ Atendimento) e o resto a um clique, dentro
   do mesmo alvo visual. <details> abre/fecha sem JavaScript; o listener
   delegado só fecha ao clicar fora ou escolher um item. */
.menu-suspenso { position: relative; display: inline-block; }
.menu-suspenso summary { list-style: none; user-select: none; }
.menu-suspenso summary::-webkit-details-marker { display: none; }
.menu-suspenso[open] summary { border-color: var(--tinta); color: var(--tinta); }
.menu-suspenso-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 190px; padding: 6px;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-p); box-shadow: var(--sombra-hover);
  display: flex; flex-direction: column; gap: 2px;
}
.menu-suspenso-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border: 0; border-radius: var(--raio-xs);
  background: transparent; color: var(--texto);
  font-family: inherit; font-size: .88rem; font-weight: 500;
  text-align: left; cursor: pointer; transition: background var(--transicao);
}
.menu-suspenso-item:hover { background: var(--fundo-alt); }
.menu-suspenso-item svg { color: var(--texto-suave); flex-shrink: 0; }

/* ── assistente de importação do SimplesVet (modo foco) ───────────────────
   Diálogo em passos: o backdrop escurece em anéis concêntricos — o olho fica
   no assistente enquanto a janela do SimplesVet trabalha ao lado. */
.modal--assistente { max-width: 560px; width: calc(100% - 48px); padding: 0; }
.modal--assistente[open] { display: flex; flex-direction: column; max-height: 90vh; }
.modal--assistente::backdrop {
  background: radial-gradient(ellipse at center,
    rgba(17, 19, 21, .35) 0%, rgba(17, 19, 21, .55) 55%, rgba(17, 19, 21, .74) 100%);
  backdrop-filter: blur(2px);
}
.assistente-corpo {
  padding: 18px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.passo-importar {
  display: flex; gap: 14px; padding: 12px;
  border-radius: var(--raio-p); border: 1px solid transparent;
  opacity: .5; transition: opacity var(--transicao), border-color var(--transicao);
}
.passo-importar.passo--ativo { opacity: 1; border-color: var(--borda); background: var(--fundo-alt); }
.passo-importar.passo--feito { opacity: .8; }
.passo-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 600;
  background: var(--fundo-alt); color: var(--texto-suave);
  border: 1px solid var(--borda);
}
.passo--ativo .passo-num { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }
.passo--feito .passo-num { background: var(--sucesso-suave); border-color: var(--sucesso); color: var(--sucesso); }
/* o número vira ✓ quando o passo termina */
.passo--feito .passo-num { font-size: 0; }
.passo--feito .passo-num::before { content: '✓'; font-size: .82rem; }
.passo-conteudo { min-width: 0; }
.passo-titulo { margin: 2px 0 4px; font-weight: 600; font-size: .95rem; }
.passo-texto { margin: 0 0 8px; font-size: .88rem; color: var(--texto-suave); line-height: 1.5; }
.passo-aguardando {
  margin: 0; font-size: .88rem; font-weight: 600; color: var(--tinta);
  animation: pulsa-aguardando 1.6s ease-in-out infinite;
}
@keyframes pulsa-aguardando { 50% { opacity: .45; } }

.progresso-importar-trilha {
  height: 8px; border-radius: 999px; background: var(--fundo-alt);
  border: 1px solid var(--borda); overflow: hidden;
}
/* o preenchimento anima por transform (scaleX), não por width — width é
   propriedade de layout e re-layouta a cada tique; os cantos quem arredonda
   é a trilha, via overflow:hidden, então o scale não deforma raio nenhum. */
.progresso-importar-fill {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--tinta); transition: transform .4s ease;
}
.progresso-importar-status { margin: 8px 0 0; font-size: .86rem; color: var(--texto-suave); }
.progresso-importar-status--erro { color: var(--erro); }
.importar-concluido { margin: 4px 0 0; font-size: .95rem; font-weight: 600; color: var(--sucesso); }

/* ══════════════════════════════════════════════════════════════════════════
   HOME (marketing) — reposicionamento de 31/08

   A home passou a vender ERP + escriba para veterinário e clínica, e voltou
   para a paleta padrão deste arquivo (antes usava o tema escuro de
   bevet-future.css, que agora fica só em 404/500 e no rodapé). Tudo aqui sai
   de token: nenhuma cor literal.
   ══════════════════════════════════════════════════════════════════════════ */

/* Roteamento de público no hero — veterinário, clínica e tutor entram cada
   um pela porta dele, em vez de disputarem o mesmo CTA. */
.porta-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.porta-lista a {
  display: block; padding: 14px 16px; border-radius: var(--raio-p);
  color: inherit; border: 1px solid transparent; transition: var(--transicao);
}
.porta-lista a:hover { background: var(--fundo-alt); border-color: var(--borda); color: inherit; }
.porta-lista strong { display: block; font-size: .95rem; color: var(--tinta); }
.porta-lista span { display: block; font-size: .84rem; color: var(--texto-suave); line-height: 1.45; margin-top: 2px; }

/* As quatro frentes — grade 2×2 separada por régua, não por caixa: a leitura
   é de um sistema dividido em frentes, não de quatro produtos avulsos. */
.frentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--borda); }
.frente { position: relative; padding: 30px 34px 32px 0; border-bottom: 1px solid var(--borda); }
.frente:nth-child(2n) { padding-left: 34px; padding-right: 0; border-left: 1px solid var(--borda); }
.frente-icone {
  display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
  border-radius: var(--raio-p); background: var(--tinta-suave); color: var(--tinta);
}
.frente-n {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  color: var(--texto-suave); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.frente h3 { font-size: 1.24rem; color: var(--texto); margin-bottom: 10px; }
.frente > p { color: var(--texto-suave); font-size: .95rem; max-width: 52ch; margin-bottom: 16px; }
.frente-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.frente-itens li { position: relative; padding-left: 22px; font-size: .89rem; line-height: 1.5; }
.frente-itens li::before {
  content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--tinta-suave); border: 1px solid var(--tinta);
}
.frente-itens b { color: var(--tinta); font-weight: 600; }
.frente--futuro .frente-icone { background: var(--alerta-suave); color: var(--alerta-texto); }
.frente--futuro .frente-itens li::before { background: transparent; border-color: var(--cinza-claro); }
.frente--futuro .frente-itens li:first-child::before { background: var(--tinta-suave); border-color: var(--tinta); }

/* Rótulo de estado — é conteúdo, não enfeite: diz o que já existe e o que
   ainda está sendo construído, nas frentes e na lista da Rede BEVET. */
.tag-estado {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); background: var(--fundo-alt); border: 1px solid var(--borda);
}
.tag-estado--ativo { color: var(--sucesso); background: var(--sucesso-suave); border-color: var(--sucesso-suave); }
.tag-estado--futuro { color: var(--alerta-texto); background: var(--alerta-suave); border-color: var(--alerta-suave); }

.link-seta { display: inline-block; margin-top: 16px; font-weight: 600; font-size: .89rem; }
.link-seta::after { content: " \2192"; transition: var(--transicao); }
.link-seta:hover::after { margin-left: 4px; }

/* Trilha do registro clínico — seis nós ligados por um trilho contínuo. O
   trilho é a informação: é o mesmo registro atravessando as etapas. */
.trilha {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px;
}
.trilha::before {
  content: ""; position: absolute; left: 8.33%; right: 8.33%; top: 31px; height: 2px;
  background: linear-gradient(90deg, var(--cinza-claro), var(--tinta) 50%, var(--cinza-claro));
}
.trilha-item { position: relative; text-align: center; padding: 0 8px; }
.trilha-no {
  position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--branco); border: 1px solid var(--borda); color: var(--tinta);
  box-shadow: 0 0 0 6px var(--fundo);
}
.trilha-n {
  display: block; font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  color: var(--texto-suave); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.trilha-titulo { font-weight: 700; font-size: 1.02rem; color: var(--texto); margin: 0 0 4px; letter-spacing: -.01em; }
.trilha-item p:not(.trilha-titulo) { font-size: .86rem; line-height: 1.45; color: var(--texto-suave); margin: 0; }
/* O nó da consulta carrega a mensagem nova: presencial OU vídeo, mesmo registro. */
.trilha-item--destaque .trilha-no { border-color: var(--tinta); background: var(--tinta-suave); }
.trilha-item--destaque p:not(.trilha-titulo) strong { color: var(--tinta); }

@media (max-width: 860px) {
  .trilha { grid-template-columns: 1fr; gap: 0; }
  .trilha::before { display: none; }
  .trilha-item {
    text-align: left; display: grid; grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto; column-gap: 18px; padding: 16px 0;
  }
  .trilha-item + .trilha-item { border-top: 1px solid var(--borda); }
  .trilha-no { margin: 0; grid-row: 1 / 4; width: 52px; height: 52px; align-self: start; box-shadow: none; }
  .trilha-n { grid-column: 2; grid-row: 1; margin: 0 0 2px; }
  .trilha-titulo { grid-column: 2; grid-row: 2; }
  .trilha-item p:not(.trilha-titulo) { grid-column: 2; grid-row: 3; }
}

/* Rede BEVET — cada camada com o estado real dela na coluna da esquerda. */
.rede-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borda); }
.rede-item {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px;
  padding: 22px 0; border-bottom: 1px solid var(--borda); align-items: start;
}
.rede-item .tag-estado { margin-bottom: 0; justify-self: start; margin-top: 2px; }
.rede-item h3 { font-size: 1.06rem; color: var(--texto); margin-bottom: 6px; }
.rede-item p { font-size: .92rem; color: var(--texto-suave); margin: 0; max-width: 62ch; }
@media (max-width: 640px) { .rede-item { grid-template-columns: 1fr; gap: 10px; } }

/* Busca da vitrine (porta do tutor) */
.filtros-home {
  display: grid; grid-template-columns: 1.5fr 1fr .85fr auto; gap: 12px;
  align-items: end; margin-bottom: var(--espaco-md);
}
.filtros-home .campo { margin: 0; }
.contagem-home { font-size: .88rem; color: var(--texto-suave); margin: 0 0 14px; }
@media (max-width: 979px) {
  .filtros-home { grid-template-columns: 1fr 1fr; }
  .filtros-home .campo:first-child, .filtros-home button { grid-column: 1 / -1; }
  .filtros-home button { width: 100%; justify-content: center; }
}
@media (max-width: 640px) { .filtros-home { grid-template-columns: 1fr; } }

/* Faixa de fecho — mesma superfície escura do rodapé, sem gradiente novo: é
   o fim da página, não um segundo hero. */
.faixa-fecho { background: var(--gradiente-escuro); color: var(--sobre-escuro); padding: 72px 0 76px; text-align: center; }
.faixa-fecho .rotulo { color: var(--sobre-escuro-medio); }
.faixa-fecho h2 { color: var(--sobre-escuro); max-width: 22ch; margin: 0 auto .5em; }
.faixa-fecho p { color: var(--sobre-escuro-medio); max-width: 58ch; margin: 0 auto; }
.faixa-fecho .hero-acoes { justify-content: center; }
.btn--contorno-claro { background: transparent; color: var(--sobre-escuro); border-color: var(--sobre-escuro-borda); }
.btn--contorno-claro:hover { background: var(--sobre-escuro-tenue); color: var(--sobre-escuro); }

@media (max-width: 860px) {
  .frentes { grid-template-columns: 1fr; }
  .frente, .frente:nth-child(2n) { padding: 26px 0 28px; border-left: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL EM JANELAS — tela inicial do profissional (31/08)

   Cada assunto (hoje, pendências, vacinas, estoque…) virou uma janela
   própria, todas visíveis ao mesmo tempo, e o profissional escolhe quais
   aparecem e em que ordem. Antes era um bloco só com abas: um assunto por
   vez, e o resto invisível até alguém lembrar de clicar.
   ══════════════════════════════════════════════════════════════════════════ */

.painel-barra { display: flex; justify-content: flex-end; margin-bottom: 12px; }

.painel-editor { margin-bottom: 18px; }
/* A lista rola dentro do editor: com onze janelas, uma lista inteira
   empurrava a grade para 600px abaixo e a pessoa escolhia layout sem ver
   o layout. Curta, o painel real fica visível logo abaixo e cada mudança
   aparece na hora. */
.editor-lista {
  list-style: none; margin: 14px 0 0; padding: 0 4px 0 0;
  border-top: 1px solid var(--borda); max-height: 292px; overflow-y: auto;
}
.editor-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 4px; border-bottom: 1px solid var(--borda);
}
.editor-item .check { margin: 0; font-size: .9rem; }
.editor-setas { display: flex; gap: 4px; flex: none; }
/* Alvo de toque: as setas são o controle de ordem e precisam ser pegáveis no
   celular, não só no mouse. */
.editor-setas .btn { min-width: 38px; min-height: 38px; padding: 0; justify-content: center; }
.editor-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Grade de 6 colunas: é ela que dá três larguras de janela sem inventar
   número livre — compacta (2/6), meia (3/6) e inteira (6/6). align-items:start
   para a janela ter a altura do conteúdo dela: sem isso, um card vazio
   ("nenhuma consulta hoje") esticava até a altura do vizinho cheio e o painel
   virava um tabuleiro de retângulos com ar dentro. */
.painel-widgets {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--espaco-sm); align-items: start;
}
.widget--compacta { grid-column: span 2; }
.widget--meia { grid-column: span 3; }
.widget--inteira { grid-column: span 6; }
.widget {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
}
.widget-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--borda);
}
.widget-topo h3 { margin: 0; font-size: .95rem; color: var(--texto); }
.widget-contagem {
  flex: none; min-width: 26px; padding: 2px 9px; border-radius: 999px;
  background: var(--tinta-suave); color: var(--tinta);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center;
}
/* Rolagem por janela, não pela página: uma lista longa (vacinas de uma
   clínica inteira) não pode empurrar as outras janelas para fora da tela. */
.widget-corpo { padding: 10px 18px 14px; max-height: 320px; overflow-y: auto; }
.widget-corpo .metricas-flat { margin-bottom: 0; }
/* Dentro de janela, número é grade e não faixa flex: com 4 ou 5 métricas
   numa coluna de meia largura, o flex espremia "R$ 1.717,00" em duas
   linhas no meio do valor. */
.widget .metricas-flat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); row-gap: 14px; }
.widget .metrica-flat .valor { font-size: 1.18rem; white-space: nowrap; }
/* Sem régua vertical dentro da janela: numa grade que quebra em duas
   linhas, a régua da primeira coluna vira um risco solto no meio. */
.widget .metrica-flat { border-left: 0; padding: 0 16px 0 0; }
/* Cinco números numa faixa flex quebravam 4+1, com o último órfão numa
   linha só. Em grade eles se distribuem sozinhos em qualquer largura. */
.widget--inteira .metricas-flat { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
.widget--total .metrica-flat .rotulo-metrica { overflow-wrap: anywhere; }
.widget-corpo .pet-card + .pet-card { margin-top: 8px; }
/* Sem min-width:0 a linha de consulta não encolhe abaixo do texto do
   nome (o flex usa a largura intrínseca) e a janela ganha barra de
   rolagem horizontal — o titulo já tem ellipsis, só faltava deixá-lo
   ceder. */
.widget .linha-resumo, .widget .linha-resumo-item { min-width: 0; }
.widget .linha-resumo-item .linha-resumo { min-width: 0; }
/* Destaque momentâneo ao chegar por um número do dia — some sozinho. */
.widget--destacado { border-color: var(--tinta); box-shadow: 0 0 0 3px var(--tinta-suave); }

/* Linha de atendimento já ocorrido: mesma métrica visual da linha clicável,
   sem hover nem link (não há sala para abrir num atendimento concluído). */
.linha-resumo--estatica { cursor: default; }
.linha-resumo--estatica:hover { background: transparent; }
.linha-resumo-dia { flex: none; font-size: .8rem; color: var(--texto-suave); }

/* Tablet: some a distinção entre compacta e meia — abaixo disso, um terço
   de tela não cabe uma linha "15:00 · Bidu, Tutor · pagamento pendente". */
@media (max-width: 1180px) {
  .widget--compacta { grid-column: span 3; }
}
@media (max-width: 980px) {
  .painel-widgets { grid-template-columns: 1fr; }
  .widget--compacta, .widget--meia, .widget--inteira { grid-column: 1 / -1; }
  .widget-corpo { max-height: none; }
}

/* Controles do editor: largura à esquerda das setas, e as duas coisas
   descem para baixo do nome quando a linha não cabe. */
.editor-controles { display: flex; align-items: center; gap: 10px; flex: none; }
.editor-tamanho select { padding: 7px 10px; font-size: .84rem; }
@media (max-width: 640px) {
  .editor-item { flex-wrap: wrap; }
  .editor-controles { width: 100%; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING (10/09) — peças novas da home de venda

   A home passou a ter a forma de landing de produto: dor nomeada antes da
   solução, prova visual do que a tela faz (o "mock"), comparação com a
   alternativa e catálogo de funções. Nada aqui inventa cor: tudo sai de
   token, e as peças reaproveitam .painel/.tabela/.card sempre que dá.
   ══════════════════════════════════════════════════════════════════════════ */

/* Mock de produto — uma janela do sistema desenhada em HTML, não um
   screenshot: continua legível em qualquer largura, não desatualiza quando a
   tela muda de cor e não pesa no carregamento. Serve de prova do que o texto
   ao lado promete. */
.mock {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--branco); box-shadow: var(--sombra-flutuante); overflow: hidden;
}
.mock-topo {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--borda); background: var(--fundo-alt);
  font-size: .78rem; font-weight: 600; color: var(--texto-suave);
}
.mock-topo .atd-pulso { width: 10px; height: 10px; }
.mock-topo .mock-tempo {
  margin-left: auto; font-variant-numeric: tabular-nums; color: var(--texto);
}
.mock-corpo { padding: 16px 18px 18px; display: grid; gap: 12px; }
.mock-campo .rotulo-campo label {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 700;
}
.mock-texto {
  font-size: .86rem; line-height: 1.5; color: var(--texto);
  background: var(--fundo-alt); border-radius: var(--raio-p); padding: 10px 12px;
}
.mock-texto--vazio { color: var(--texto-suave); font-style: italic; }
.mock-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--borda); background: var(--fundo-alt);
  font-size: .78rem; color: var(--texto-suave);
}
/* Linha de radar dentro do mock do CRM — mesma métrica das linhas de alerta
   do painel, sem depender do JS que as monta lá. */
.mock-linha {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--borda); font-size: .86rem;
}
.mock-linha:first-child { border-top: 0; padding-top: 0; }
.mock-linha strong { font-weight: 600; }
.mock-linha .mock-meta { color: var(--texto-suave); font-size: .8rem; }
.mock-linha .chip { margin-left: auto; flex: none; }

/* Dor nomeada antes da solução — três cartões sem ícone, com a pergunta em
   destaque. Sem número: a plataforma não mediu quanto tempo o profissional
   perde, e inventar a estatística seria a mesma mentira que se cobra dos
   outros. */
.dores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.dor { padding: 0 30px; border-left: 2px solid var(--borda); }
.dor:first-child { padding-left: 0; border-left: 0; }
.dor h3 { font-size: 1.1rem; margin-bottom: 8px; }
.dor p { color: var(--texto-suave); font-size: .93rem; margin: 0; }

/* Comparação por categoria — nunca por marca. As colunas são "ERP comum" e
   "escriba avulso", que é o que a pessoa está de fato comparando quando
   chega aqui. */
/* Piso de largura: abaixo disso a primeira coluna espreme uma frase inteira
   em 130px e a linha vira um bloco de quatro andares. Melhor a tabela rolar
   dentro do .tabela-scroll, que existe exatamente para isso. */
.tabela--comparativo { min-width: 580px; }
.tabela--comparativo th:first-child, .tabela--comparativo td:first-child {
  text-align: left; width: 40%;
}
.tabela--comparativo th:not(:first-child), .tabela--comparativo td:not(:first-child) {
  text-align: center; width: 20%;
}
.tabela--comparativo th:nth-child(2), .tabela--comparativo td:nth-child(2) {
  background: var(--tinta-suave);
}
.tabela--comparativo th:nth-child(2) { color: var(--tinta); }
.marca-sim { color: var(--sucesso); font-weight: 700; }
.marca-nao { color: var(--cinza); }
.marca-parcial { color: var(--alerta-texto); font-size: .82rem; }

@media (max-width: 860px) {
  .dores { grid-template-columns: 1fr; }
  .dor { padding: 22px 0; border-left: 0; border-top: 1px solid var(--borda); }
  .dor:first-child { padding-top: 0; border-top: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO DA LANDING (10/09)

   Três camadas, todas dirigidas por static/js/home.js:
   1. cabeçalho que reage ao rolar (encolhe, ganha vidro, some ao descer);
   2. entrada das seções conforme aparecem na tela;
   3. mocks que encenam o fluxo real do produto (gravar, gerar, assinar).

   Regra que não se negocia: com `prefers-reduced-motion: reduce` tudo isto
   desliga e o estado FINAL fica visível — animação nunca pode ser a condição
   para o conteúdo existir. Pelo mesmo motivo, a classe .revela só é aplicada
   pelo JS: sem JS, a página aparece inteira, sem transparência nenhuma.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. cabeçalho ───────────────────────────────────────────────────────── */
.topo {
  transition: transform .32s cubic-bezier(.22, .61, .36, 1),
              background-color .24s ease, box-shadow .24s ease, padding .24s ease;
}
.topo--rolado {
  background: color-mix(in srgb, var(--branco) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--sombra-sm);
}
.topo--rolado .topo-inner { padding-top: 8px; padding-bottom: 8px; }
.topo--rolado .marca img { height: 30px; transition: height .24s ease; }
/* Descendo, o cabeçalho sai da frente; subindo, volta na hora — numa landing
   longa, a barra fixa come a altura útil da leitura. */
.topo--oculto { transform: translateY(-100%); }
.topo-inner { transition: padding .24s ease; }
.marca img { transition: height .24s ease; }

/* ── 2. entrada das seções ──────────────────────────────────────────────── */
.revela {
  opacity: 0; transform: translateY(20px);
  transition: opacity .62s ease, transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.revela--visivel { opacity: 1; transform: none; }

/* ── 3. mocks encenados ─────────────────────────────────────────────────── */
/* Campo do prontuário que ainda não chegou: some da tela sem colapsar o
   layout de forma brusca — a altura é animada junto. */
.mock-campo--oculto {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.mock-campo--entrou { opacity: 1; transform: none; }
.mock-campo .chip { transition: background-color .3s ease, color .3s ease; }

/* Barra de etapas da geração do prontuário. */
.mock-progresso {
  height: 6px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden;
}
.mock-progresso span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--tinta); transition: width .5s ease;
}
.mock-etapas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.mock-etapa {
  display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--texto-suave);
  opacity: .45; transition: opacity .3s ease, color .3s ease;
}
.mock-etapa::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--cinza-claro); transition: var(--transicao);
}
.mock-etapa--feita { opacity: 1; color: var(--texto); }
.mock-etapa--feita::before {
  border-color: var(--sucesso); background: var(--sucesso);
  box-shadow: inset 0 0 0 2px var(--branco);
}
.mock-etapa--agora { opacity: 1; color: var(--tinta); }
.mock-etapa--agora::before { border-color: var(--tinta); border-right-color: transparent; animation: mock-gira .8s linear infinite; }
@keyframes mock-gira { to { transform: rotate(360deg); } }

/* Grade de horários da agenda — os blocos vão sendo ocupados. */
.mock-agenda { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mock-agenda-dia {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-suave); text-align: center; padding-bottom: 4px;
}
.mock-slot {
  height: 26px; border-radius: var(--raio-xs); background: var(--fundo-alt);
  border: 1px solid var(--borda); display: grid; place-items: center;
  font-size: .68rem; color: transparent; transition: var(--transicao);
}
.mock-slot--cheio {
  background: var(--tinta-suave); border-color: var(--tinta); color: var(--tinta); font-weight: 600;
}
.mock-slot--video { background: var(--sucesso-suave); border-color: var(--sucesso); color: var(--sucesso); }

/* Contadores da importação de base — sobem de zero quando a seção aparece. */
.mock-contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.mock-contador .valor {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.mock-contador .rotulo-metrica {
  font-size: .72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em;
}

/* Cursor do título que se digita sozinho. */
.cursor-digita {
  display: inline-block; width: 3px; height: 1em; vertical-align: -.12em;
  margin-left: 4px; background: var(--tinta); animation: cursor-pisca 1s steps(2, start) infinite;
}
@keyframes cursor-pisca { 50% { opacity: 0; } }
/* Reserva a altura da linha que troca de texto, para o hero não pular. */
.hero h1 .destaque { display: inline-block; min-height: 1.1em; }

/* Marca de sim/não da comparação entrando em cascata. */
.tabela--comparativo .marca-sim,
.tabela--comparativo .marca-nao,
.tabela--comparativo .marca-parcial { display: inline-block; transition: opacity .4s ease, transform .4s ease; }
.tabela--comparativo tr.revela .marca-sim { transform: scale(.6); }

@media (prefers-reduced-motion: reduce) {
  .revela, .revela--visivel { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mock-campo--oculto { opacity: 1 !important; transform: none !important; }
  .topo, .topo--oculto { transform: none !important; transition: none !important; }
  .cursor-digita { display: none; }
  .mock-etapa { opacity: 1; }
  .mock-etapa--agora::before { animation: none; }
  .mock-progresso span { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   DIVISÃO DA LANDING — home + páginas de assunto (10/09)

   A home tinha doze seções e mais de mil linhas: para saber se o produto era
   para ele, o veterinário precisava ler a página inteira. Cada assunto virou
   uma página curta (/prontuario-por-ia, /para-veterinarios, /para-clinicas,
   /crm, /funcoes) e a home passou a ser o roteador entre elas. O que este
   bloco acrescenta é o caminho: a barra que liga as páginas, os cartões de
   porta e a busca do catálogo. Tudo por token, como o resto do arquivo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── barra de páginas do produto ────────────────────────────────────────── */
/* Fica grudada abaixo do cabeçalho: numa página interna, é ela que responde
   "onde eu estou e o que mais existe" sem precisar voltar à home. */
/* `top` é o valor de partida para quem chega sem JS (aí o cabeçalho nunca se
   esconde, e 65px é a altura dele). Com JS, bevet-ui.js mede o cabeçalho e
   corrige o valor a cada rolagem — inclusive para 0, quando ele sai da tela. */
.subnav {
  position: sticky; top: 65px; z-index: 40;
  background: color-mix(in srgb, var(--branco) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borda);
  transition: top .32s cubic-bezier(.22, .61, .36, 1);
}
/* Sem justify-content, as seis abas (largura pelo conteúdo) ficam todas
   grudadas à esquerda e terminam bem antes da borda direita do cabeçalho de
   cima — que vai até "Entrar"/o nome —, deixando um vazio grande de um lado
   só. space-between espalha o espaço sobrando entre as abas por igual, do
   primeiro "Prontuário por IA" (grudado no logo) até o último "Preços"
   (grudado em "Entrar"), sem isolar nenhuma aba sozinha na ponta. Em tela
   estreita (ver breakpoint abaixo, com scroll), o conteúdo passa a ocupar
   mais que a largura da barra e não sobra espaço para distribuir — o navegador
   volta sozinho a empacotar as abas, sem atrapalhar o scroll. */
.subnav-inner {
  display: flex; justify-content: space-between; gap: 2px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; flex: none; padding: 14px 16px; white-space: nowrap;
  font-size: .89rem; font-weight: 600; color: var(--texto-suave);
  border-bottom: 2px solid transparent; transition: var(--transicao);
}
.subnav a:hover { color: var(--tinta); }
.subnav a.subnav-item--aqui { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ── cartões de porta (home) ────────────────────────────────────────────── */
/* Quatro caminhos, escolhidos por reconhecimento: cada cartão traz o sinal
   desenhado do que a pessoa vai encontrar do outro lado. */
.portas-cartoes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.porta-cartao {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 22px; border-radius: var(--raio-g);
  background: var(--branco); border: 1px solid var(--borda); color: inherit;
  box-shadow: var(--sombra-sm);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
.porta-cartao:hover {
  transform: translateY(-4px); box-shadow: var(--sombra-hover);
  border-color: var(--tinta); color: inherit;
}
.porta-cartao--destaque { border-color: var(--tinta); background: var(--tinta-suave); }
.porta-icone {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--raio-p); background: var(--tinta-suave); color: var(--tinta);
}
.porta-cartao--destaque .porta-icone { background: var(--branco); }
.porta-cartao h3 { font-size: 1.12rem; margin: 0; }
.porta-cartao p { font-size: .89rem; line-height: 1.5; color: var(--texto-suave); margin: 0; }
.porta-ir { margin-top: auto; font-size: .86rem; font-weight: 600; color: var(--tinta); }
/* Margem em vez de espaço no content: depois de inline-block o espaço do
   content some, e a seta encosta na última letra do rótulo. */
.porta-ir::after {
  content: "\2192"; display: inline-block; margin-left: 6px;
  transition: transform .24s ease;
}
.porta-cartao:hover .porta-ir::after { transform: translateX(4px); }

/* Sinal do cartão: barras que se preenchem. O estado PARADO já é o estado
   completo — sem JS, ou com movimento reduzido, o cartão está inteiro. O JS
   apaga e reacende em cascata quando o cartão entra na tela. */
.porta-sinal { display: grid; gap: 5px; margin: 4px 0 2px; }
.porta-sinal > span {
  display: block; height: 6px; border-radius: 999px; background: var(--tinta);
  opacity: .9; transform-origin: left center;
}
.porta-sinal--linhas > span:nth-child(1) { width: 100%; }
.porta-sinal--linhas > span:nth-child(2) { width: 76%; }
.porta-sinal--linhas > span:nth-child(3) { width: 52%; }
.porta-sinal--grade { grid-template-columns: repeat(4, 1fr); }
.porta-sinal--grade > span { height: 14px; border-radius: var(--raio-xs); }
.porta-sinal--grade > span:nth-child(3n) { background: var(--sucesso); }
.porta-sinal--pessoas { grid-template-columns: repeat(3, 1fr); }
.porta-sinal--pessoas > span { height: 14px; border-radius: 999px; }
.porta-sinal--lista > span { height: 5px; }
.porta-sinal--lista > span:nth-child(odd) { width: 88%; }
.porta-sinal--lista > span:nth-child(even) { width: 62%; }

/* Com JS, o sinal começa apagado e o cartão o reacende barra por barra. */
.js-portas .porta-sinal > span { opacity: .16; transform: scaleX(.2); transition: opacity .4s ease, transform .5s cubic-bezier(.22, .61, .36, 1); }
.js-portas .porta-sinal > span.porta-sinal-ativo { opacity: .9; transform: none; }

@media (max-width: 980px) { .portas-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .portas-cartoes { grid-template-columns: 1fr; } }

/* ── trilha curta (home) ────────────────────────────────────────────────── */
.trilha--curta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trilha--curta::before { left: 16.66%; right: 16.66%; }
@media (max-width: 860px) { .trilha--curta { grid-template-columns: 1fr; } }

/* Nó que acende enquanto a trilha é percorrida, na página do prontuário. */
.trilha-item--aceso .trilha-no {
  border-color: var(--tinta); background: var(--tinta-suave);
  transition: border-color .4s ease, background-color .4s ease;
}

/* ── busca do catálogo de funções ───────────────────────────────────────── */
/* Hero de uma coluna: a página de funções não tem mock — o que ela tem para
   mostrar é a própria lista, e a busca é a ação principal do hero. */
.hero--simples .chamada { margin-bottom: 26px; }
.hero--simples .busca-funcao { max-width: 560px; }
.busca-funcao { margin-bottom: 26px; }
.busca-funcao .campo { margin: 0; }
.busca-funcao .contagem-home { margin: 10px 0 0; }
/* Item que casou com a busca fica marcado: com o resto escondido, a marca é
   o que diz "foi isto que você procurou". */
.frente-item--achado::before { background: var(--tinta); border-color: var(--tinta); }
/* Com filtro ativo a grade vira uma coluna: a régua vertical entre colunas é
   escolhida por :nth-child(2n), que conta também as áreas escondidas, e
   sobraria numa área que passou a ser a primeira da esquerda. */
.frentes--filtrada { grid-template-columns: 1fr; }
.frentes--filtrada .frente,
.frentes--filtrada .frente:nth-child(2n) { padding: 26px 0 28px; border-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .subnav { transition: none; }
  .porta-cartao { transition: none; }
  .porta-cartao:hover { transform: none; }
  .js-portas .porta-sinal > span { opacity: .9; transform: none; transition: none; }
}

/* ── planos e preços (/precos) ──────────────────────────────────────────── */
/* Cartão de plano: mesma superfície do .card, com o preço como primeira
   informação depois do nome. O plano em destaque não muda de cor — muda de
   borda e de elevação, porque a única cor de ação continua sendo a tinta. */
.alternador-ciclo {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: var(--espaco-md);
  background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: 999px;
}
.alternador-ciclo button {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: .86rem; font-weight: 600; color: var(--texto-suave);
  padding: 8px 18px; border-radius: 999px;
}
.alternador-ciclo button[aria-pressed="true"] { background: var(--branco); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.alternador-economia { margin-left: 10px; font-size: .82rem; color: var(--texto-suave); }

.planos { display: grid; gap: var(--espaco-md); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.plano {
  display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
  padding: 26px 24px 24px;
}
.plano--destaque { border-color: var(--tinta); box-shadow: 0 10px 30px rgba(0,0,0,.07); }
.plano-etiqueta {
  display: inline-block; align-self: flex-start; margin-bottom: 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acao-texto); background: var(--tinta-suave); padding: 4px 10px; border-radius: 999px;
}
.plano h3 { font-size: 1.08rem; margin: 0 0 4px; }
.plano-para { color: var(--texto-suave); font-size: .86rem; margin: 0 0 18px; min-height: 2.6em; }
.plano-preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plano-preco .valor { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; }
.plano-preco .periodo { color: var(--texto-suave); font-size: .88rem; }
.plano-nota { color: var(--texto-suave); font-size: .8rem; margin: 6px 0 18px; min-height: 2.4em; }
.plano .btn { width: 100%; justify-content: center; }
.plano-lista { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.plano-lista li { position: relative; padding-left: 22px; font-size: .87rem; line-height: 1.5; }
.plano-lista li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 12px; height: 7px; border-left: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  transform: rotate(-45deg);
}
.plano-lista li.nao::before { border: 0; top: .62em; width: 10px; height: 2px; background: var(--cinza); transform: none; }
.plano-lista li.nao { color: var(--texto-suave); }

@media (max-width: 1080px) { .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .planos { grid-template-columns: 1fr; } .plano-para, .plano-nota { min-height: 0; } }

/* Faixa de preço nas páginas de assunto: o valor do produto daquela página,
   com a tabela inteira a um clique. */
.faixa-preco {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 24px 26px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: 16px;
}
.faixa-preco .valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.faixa-preco p { margin: 4px 0 0; color: var(--texto-suave); font-size: .88rem; max-width: 62ch; }
.faixa-preco-acoes { display: flex; gap: 10px; flex-wrap: wrap; }