/* ==========================================================================
   BEVET — camada de design "SaaS Clínico" (claro, mínimo, tecnológico)
   Carregue DEPOIS de style.css. Não altera nenhum template: redefine os
   tokens que os templates já usam inline (--verde, --tinta, --laranja…) e
   reescreve os componentes existentes na nova direção.

   ── SISTEMA VISUAL ───────────────────────────────────────────────────────
   PALETA — quase monocromática, com UMA cor de ação:
     · Fundo de trabalho  #F8FAFB (branco-gelo, nunca cinza morto)
     · Superfície         #FFFFFF
     · Texto              #101828 (quase-preto azulado, 16.9:1 — nunca #000)
     · Ação/da marca      #0F766E — teal profundo, herdado do verde do logo
       e modernizado para a família visual das healthtechs SaaS. 5.3:1
       sobre branco e com branco por cima: AA nos dois sentidos.
       Hover #115E59; tint #E8F4F2; sobre fundo escuro, #2DD4BF.
     · Estados fora da cor de marca: ok #15803D, atenção #B54708,
       bloqueio #D92D20 — todos AA sobre os próprios tints.
   TIPOGRAFIA — Inter (400/500/600/700) para TODA a interface; hierarquia
     por peso e tamanho, títulos com tracking levemente negativo. Sora
     (600/700) só em display — a mesma dupla da fundação BEVET Future
     (bevet-future.css), então marketing escuro e app claro são uma marca só.
     Dado clínico (valor, hora, CRMV, dose) é Inter 600 + tabular-nums —
     inconfundível sem abrir uma terceira família.
   FORMA — raio 12/16/8/6, sombras sutilíssimas, réguas de 1px. Nada de
     moldura pesada: hierarquia vem de espaço e peso, não de caixa.
   ========================================================================== */

:root {
  /* ---------- paleta proprietária ---------- */
  --bv-ink:        #101828;   /* texto principal */
  --bv-ink-2:      #344054;   /* corpo secundário */
  --bv-ink-3:      #5D6B82;   /* meta (4.9:1 sobre branco — AA) */
  --bv-ink-4:      #98A2B3;   /* desabilitado, hint */
  --bv-teal:       #0F766E;   /* ÚNICA cor de ação e de seleção */
  --bv-teal-dk:    #115E59;   /* hover / pressed */
  --bv-teal-tint:  #E8F4F2;   /* estado ativo, confirmação */
  --bv-teal-claro: #2DD4BF;   /* só sobre superfície escura */
  --bv-paper:      #F8FAFB;   /* fundo de trabalho */
  --bv-surface:    #FFFFFF;
  --bv-line:       #E4E8EC;   /* régua padrão */
  --bv-line-2:     #EFF2F5;   /* régua interna, mais leve */
  --bv-signal:     #D92D20;   /* só o que bloqueia */
  --bv-signal-t:   #FEF0EF;
  --bv-watch:      #B54708;   /* prazo se aproximando */
  --bv-watch-t:    #FBF1E5;
  --bv-ok:         #15803D;
  --bv-ok-t:       #EAF6EF;

  --bv-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bv-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;

  /* ---------- remapeamento dos tokens legados ----------
     É isto que faz os ~170 usos inline nos templates virarem a nova
     identidade sem tocar em uma linha de Jinja. */
  --tinta: var(--bv-teal);
  --tinta-clara: var(--bv-teal-dk);
  --tinta-suave: var(--bv-teal-tint);
  --tinta-escura: var(--bv-ink);
  --acao: var(--bv-teal);
  --acao-texto: var(--bv-teal);
  --acao-claro: var(--bv-teal-claro);
  --acao-suave: var(--bv-teal-tint);

  --verde: var(--bv-teal);
  --verde-claro: var(--bv-teal-dk);
  --verde-suave: var(--bv-teal-tint);
  --verde-escuro: var(--bv-ink);
  --laranja: var(--bv-teal);
  --laranja-texto: var(--bv-teal);
  --laranja-claro: var(--bv-ink-3);
  --laranja-suave: var(--bv-paper);

  --aqua: var(--bv-ink-3);
  --aqua-suave: var(--bv-paper);
  --sol: var(--bv-ink);
  --sol-claro: var(--bv-ink-2);
  --sol-suave: var(--bv-paper);
  --sol-texto: var(--bv-ink-3);
  --pink: var(--bv-ink-3);
  --pink-suave: var(--bv-paper);
  --pink-texto: var(--bv-ink-2);

  --cinza-claro: var(--bv-line);
  --cinza: var(--bv-ink-4);
  --cinza-escuro: var(--bv-ink-3);
  --branco: var(--bv-surface);
  --fundo: var(--bv-paper);
  --fundo-alt: #F2F4F7;
  --borda: var(--bv-line);
  --texto: var(--bv-ink);
  --texto-suave: var(--bv-ink-3);

  --sucesso: var(--bv-ok);
  --sucesso-suave: var(--bv-ok-t);
  --alerta: var(--bv-watch);
  --alerta-texto: var(--bv-watch);
  --alerta-suave: var(--bv-watch-t);
  --erro: var(--bv-signal);
  --erro-suave: var(--bv-signal-t);

  /* superfície escura (rodapé, faixa de fecho, lado escuro do login) */
  --gradiente-escuro: radial-gradient(ellipse 120% 100% at 50% 30%, #1D2939 0%, #101828 60%, #0C111D 100%);
  --gradiente-claro: radial-gradient(ellipse 120% 100% at 50% 35%, #FFFFFF 0%, var(--bv-paper) 55%, #EFF2F5 100%);
  --sobre-escuro: rgba(255,255,255,.95);
  --sobre-escuro-medio: rgba(255,255,255,.72);
  --sobre-escuro-suave: rgba(255,255,255,.55);
  --sobre-escuro-borda: rgba(255,255,255,.18);
  --sobre-escuro-tenue: rgba(255,255,255,.10);

  /* ---------- forma ---------- */
  --raio: 12px; --raio-g: 16px; --raio-p: 8px; --raio-xs: 6px;
  --fonte-titulo: var(--bv-display);
  --fonte-corpo: var(--bv-sans);

  /* Elevação em passos sutilíssimos — profundidade sussurrada, não gritada. */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra: 0 2px 8px rgba(16, 24, 40, .06);
  --sombra-hover: 0 8px 24px rgba(16, 24, 40, .09);
  --sombra-flutuante: 0 24px 64px rgba(16, 24, 40, .18);

  --transicao: .18s ease;
  --container: 1200px;
}

/* ─────────────────────────────────────────────────── base tipográfica ── */

body {
  font-family: var(--bv-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bv-paper);
  color: var(--bv-ink);
}

h1, h2 { font-family: var(--bv-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
h3, h4 { font-family: var(--bv-sans); font-weight: 600; letter-spacing: -.01em; color: var(--bv-ink); line-height: 1.25; }
h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.05rem; }

/* Eyebrow — pequeno, firme, na cor de ação; sem chip, sem caixa. */
.rotulo {
  font-family: var(--bv-sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--bv-teal); background: none; padding: 0;
  border-radius: 0; display: block; margin-bottom: 10px;
}

a { color: var(--bv-teal); }
a:hover { color: var(--bv-teal-dk); }
*:focus-visible { outline: 2px solid var(--bv-teal); outline-offset: 2px; }
::selection { background: var(--bv-teal-tint); }

/* Dado clínico — peso 600 + tabular-nums, sem abrir terceira família.
   É o que separa dado de opinião na tela: peso, dose, CRMV, hora, valor. */
.numeros-tabulares, .tabela .num, .metrica .valor, .metrica-flat .valor,
.linha-resumo-hora, .vet-crmv, .cartao-perfil .crmv, .item-consulta .ic-data,
.crm-barra-valor, .nota-num, .selo-origem {
  font-family: var(--bv-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────────────── cabeçalho ── */

.topo {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bv-line);
  box-shadow: none;
}
.topo-inner { height: 64px; }
.marca img { width: 32px; height: 32px; border-radius: 0; }
.marca-nome { font-family: var(--bv-display); font-weight: 700; letter-spacing: -.03em; font-size: 1.18rem; }
.marca-nome::after { display: none; }
.marca-sub {
  font-size: .6rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bv-ink-3);
}
.nav a { font-weight: 500; font-size: .9rem; color: var(--bv-ink-2); }
.nav a:hover { color: var(--bv-ink); }
.nav a::after { background: var(--bv-teal); height: 2px; }
.menu-botao { border-radius: var(--raio-p); border: 1px solid var(--bv-line); color: var(--bv-ink); }
.pular-link { border-radius: 0 0 var(--raio-p) var(--raio-p); background: var(--bv-teal); }

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

.btn {
  border-radius: var(--raio-p); border: 1px solid transparent;
  font-weight: 600; font-size: .92rem; letter-spacing: 0;
  padding: 12px 20px;
  justify-content: center; text-align: center;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), box-shadow var(--transicao);
}
/* estabilidade: hover muda cor e sombra, nunca desloca layout */
.btn:hover { transform: none; }
.btn:active:not([disabled]) { transform: none; }
.btn--primario, .btn--roxo { background: var(--bv-teal); color: #FFF; border-color: var(--bv-teal); box-shadow: var(--sombra-sm); }
.btn--primario:hover, .btn--roxo:hover { background: var(--bv-teal-dk); border-color: var(--bv-teal-dk); color: #FFF; box-shadow: var(--sombra); }
.btn--acento { background: var(--bv-ink); color: #FFF; border-color: var(--bv-ink); }
.btn--acento:hover { background: #1D2939; border-color: #1D2939; color: #FFF; }
.btn--contorno { border-color: var(--bv-teal); color: var(--bv-teal); background: transparent; }
.btn--contorno:hover { background: var(--bv-teal-tint); color: var(--bv-teal-dk); border-color: var(--bv-teal); }
.btn--claro { background: var(--bv-surface); color: var(--bv-ink); border-color: var(--bv-line); box-shadow: var(--sombra-sm); }
.btn--claro:hover { border-color: var(--bv-teal); color: var(--bv-teal); }
.btn--fantasma { background: transparent; color: var(--bv-ink-2); border-color: var(--bv-line); }
.btn--fantasma:hover { border-color: var(--bv-teal); color: var(--bv-teal); background: transparent; }
.btn--p { padding: 9px 14px; font-size: .84rem; }
.btn[disabled] { opacity: .45; }
/* Ação destrutiva ganha forma própria, não só texto cinza. */
.btn--perigo, .btn[data-perigo] { border-color: var(--bv-signal); color: var(--bv-signal); background: transparent; }
.btn--perigo:hover, .btn[data-perigo]:hover { background: var(--bv-signal); color: #FFF; }

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

.hero { background: var(--gradiente-claro); border-bottom: 1px solid var(--bv-line); padding: 80px 0 72px; }
.hero h1 .destaque { color: var(--bv-teal); }
.hero .chamada { font-size: 1.15rem; color: var(--bv-ink-2); max-width: 52ch; }
.home-busca h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); }
/* selo vira pill discreto — vocabulário de badge de SaaS */
.selo {
  border-radius: 999px; background: var(--bv-surface); border: 1px solid var(--bv-line);
  font-size: .78rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--bv-ink-2); box-shadow: var(--sombra-sm);
}

/* ─────────────────────────────────────────── painéis, cards, listas ── */

.painel {
  background: var(--bv-surface); border: 1px solid var(--bv-line);
  border-radius: var(--raio); box-shadow: var(--sombra-sm); padding: 24px;
}

.card {
  border-radius: var(--raio); border: 1px solid var(--bv-line);
  box-shadow: var(--sombra-sm); background: var(--bv-surface); padding: 22px;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.card:hover { transform: none; box-shadow: var(--sombra-hover); border-color: var(--bv-line); }
.card h3 { font-size: 1rem; }
.card p { color: var(--bv-ink-2); font-size: .9rem; }
.card .preco { color: var(--bv-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card .rodape-card { border-top: 1px solid var(--bv-line-2); }

.metrica {
  border-radius: var(--raio); border: 1px solid var(--bv-line);
  background: var(--bv-surface); padding: 16px 18px; box-shadow: var(--sombra-sm);
}
.metrica .valor { font-family: var(--bv-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--bv-ink); }
.metrica .rotulo-metrica { font-size: .76rem; font-weight: 500; color: var(--bv-ink-3); margin-top: 4px; }
.metrica--acento { border-color: var(--bv-teal); }
.metrica--acento .valor { color: var(--bv-teal); }
.metrica-flat { border-left: 1px solid var(--bv-line); }
.metrica-flat .valor { color: var(--bv-ink); }
.metrica-flat--acento .valor { color: var(--bv-teal); }

/* Card de consulta: superfície branca com a cor da modalidade na borda
   esquerda — o único traço colorido do card, de propósito. */
.item-consulta {
  border-radius: var(--raio-p); border: 1px solid var(--bv-line);
  border-left: 3px solid var(--cor-tipo, var(--bv-line));
  background: var(--bv-surface); padding: 12px 14px;
  transition: box-shadow var(--transicao);
}
.item-consulta:hover { box-shadow: var(--sombra); }
.item-consulta .ic-dia { font-weight: 700; color: var(--bv-ink); }
.item-consulta .ic-hora { color: var(--bv-teal); }

.linha-resumo { padding: 12px 6px; font-size: .89rem; border-radius: var(--raio-xs); }
.linha-resumo:hover { background: var(--bv-surface); }
.linha-resumo-hora { color: var(--bv-ink); }
.linha-resumo-menu summary { border-radius: var(--raio-xs); }
.linha-resumo-menu-lista { border-radius: var(--raio-p); border: 1px solid var(--bv-line); box-shadow: var(--sombra-hover); }

.pet-card .avatar-pet {
  border-radius: var(--raio-p); background: var(--bv-teal-tint); color: var(--bv-teal);
  font-weight: 700; width: 44px; height: 44px;
}
.avatar-pet-editar { border-color: var(--bv-surface); background: var(--bv-teal); }
.avatar-pet-editar:hover { background: var(--bv-teal-dk); }

.cartao-perfil { border-radius: var(--raio); border: 1px solid var(--bv-line); box-shadow: var(--sombra-sm); }

.passo .numero {
  background: var(--bv-teal-tint); color: var(--bv-teal); border: 0;
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────── etiquetas, chips, alertas ── */

.tag, .chip {
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 3px 10px;
  border: 1px solid transparent;
}
.tag--confirmado { background: var(--bv-teal-tint); color: var(--bv-teal); }
.tag--em_andamento { background: var(--bv-teal); color: #FFF; }
.tag--concluido, .tag--pago, .tag--aprovado { background: var(--bv-ok-t); color: var(--bv-ok); }
.tag--aguardando_pagamento, .tag--pendente { background: var(--bv-watch-t); color: var(--bv-watch); }
.tag--cancelado { background: var(--bv-line-2); color: var(--bv-ink-3); }
.tag--nao_compareceu, .tag--suspenso, .tag--recusado { background: var(--bv-signal-t); color: var(--bv-signal); }

.alerta { border-radius: var(--raio-p); font-size: .88rem; }
.alerta--erro { background: var(--bv-signal-t); color: var(--bv-signal); }
.alerta--ok { background: var(--bv-ok-t); color: var(--bv-ok); }
.alerta--info { background: var(--bv-teal-tint); color: var(--bv-teal-dk); }

.estrelas { color: var(--bv-watch); }
.progresso { border-radius: 999px; background: var(--bv-line); height: 4px; }
.progresso span { border-radius: 999px; background: var(--bv-teal); }

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

/* A .linha deixa de ser "sempre 2 colunas": ela abre uma coluna POR CAMPO
   no desktop (mínimo de 140px cada — hora, UF e número cabem confortáveis).
   Era isto que empilhava Número/Complemento numa fileira e Bairro sozinho
   na seguinte, com metade da tela em branco (revisão de 28/08). Abaixo de
   900px a media query no fim do arquivo segue forçando coluna única. */
.linha { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.campo label {
  font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--bv-ink-2); margin-bottom: 6px;
}
.campo .dica { font-weight: 400; font-size: .76rem; color: var(--bv-ink-3); }
input, select, textarea {
  border-radius: var(--raio-p); border: 1px solid var(--bv-line);
  padding: 10px 12px; font-size: .93rem; background: var(--bv-surface);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--bv-teal); outline: none;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
input:disabled, select:disabled, textarea:disabled { background: var(--bv-paper); opacity: .6; }
input[type=number], input[type=date], input[type=datetime-local], input[type=time] { font-variant-numeric: tabular-nums; }
/* checkbox e radio NUNCA herdam o width:100% dos inputs de texto — era isso
   que empurrava o rótulo do RPVAR pra longe e deixava um vão em branco no
   celular (visto na revisão de 28/08) */
input[type=checkbox], input[type=radio] { width: auto; }

/* ── seletor de modalidade do atendimento (Presencial / Online / catálogo) ──
   Controle segmentado: a decisão mais frequente do dia vira dois toques
   grandes, com o catálogo como terceira porta para quem configurou tipos. */
.atd-modalidade { display: flex; gap: 8px; flex-wrap: wrap; }
.atd-mod {
  flex: 1 1 120px; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--bv-line); border-radius: var(--raio-p);
  background: var(--bv-surface); color: var(--bv-ink-2);
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.atd-mod:hover { border-color: var(--bv-teal); color: var(--bv-teal); }
.atd-mod.ativo { border-color: var(--bv-teal); background: var(--bv-teal-tint); color: var(--bv-teal); }

/* ── ações rápidas da visão geral ── */
.acoes-rapidas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros-toggle { border-radius: var(--raio-p); border: 1px solid var(--bv-line); }
.filtros-toggle:hover { border-color: var(--bv-teal); color: var(--bv-teal); }

/* ─────────────────────────────────────────────────────────── abas ── */

.abas { gap: 2px; border-bottom: 1px solid var(--bv-line); margin-bottom: 22px; }
.aba {
  border-bottom: 2px solid transparent; border-radius: 0; padding: 11px 14px 9px;
  font-size: .9rem; font-weight: 500; color: var(--bv-ink-3); margin-bottom: -1px;
}
.aba:hover { color: var(--bv-ink); }
.aba.ativa { color: var(--bv-teal); font-weight: 600; border-bottom-color: var(--bv-teal); }

/* ──────────────────────────────────────────────────────── tabelas ── */

.tabela { font-size: .9rem; }
.tabela th {
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  color: var(--bv-ink-3); border-bottom: 1px solid var(--bv-line); padding: 10px;
  text-transform: none;
}
.tabela td { border-bottom: 1px solid var(--bv-line-2); }
.tabela tbody tr:hover { background: var(--bv-paper); }

/* ───────────────────────────────────────────── área profissional ── */

.secao--painel, .secao { padding: 34px 0 56px; }
.crm-shell { grid-template-columns: 232px 1fr; gap: 24px; }
.crm-nav-coluna {
  background: var(--bv-surface); border: 1px solid var(--bv-line);
  border-radius: var(--raio); box-shadow: var(--sombra-sm);
  padding: 0 0 10px; top: 84px;
}
.crm-nav-logo { padding: 16px 16px 12px; border-bottom: 1px solid var(--bv-line-2); margin: 0; }
.crm-nav-logo span { font-family: var(--bv-display); font-weight: 700; letter-spacing: -.02em; }
.crm-nav { gap: 2px; padding: 8px; }
.crm-nav-item {
  border-radius: var(--raio-p); border-left: 0;
  padding: 10px 12px; font-size: .89rem; font-weight: 500; color: var(--bv-ink-2);
}
.crm-nav-item:hover { background: var(--bv-paper); color: var(--bv-ink); }
.crm-nav-item.ativo { background: var(--bv-teal-tint); color: var(--bv-teal); font-weight: 600; }
.crm-nav-divisor { border-top: 1px solid var(--bv-line-2); margin: 8px 0; }
.crm-nav-subitem { border-radius: var(--raio-p); font-size: .84rem; padding-left: 40px; }
.crm-nav-subitem:hover { background: var(--bv-paper); color: var(--bv-teal); }
.crm-nav-subitem.ativo { color: var(--bv-teal); }
.crm-nav-hamburguer { border-radius: var(--raio-p); border: 1px solid var(--bv-line); }
.crm-pagina .painel { padding: 18px; }

.crm-coluna { background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: var(--raio); padding: 14px; }
.crm-coluna h4 { font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: var(--bv-ink-3); }
.crm-coluna h4 span { border-radius: 999px; background: var(--bv-line-2); }
.crm-pipeline-card { border-radius: var(--raio-p); border: 1px solid var(--bv-line-2); background: var(--bv-surface); }
.crm-pipeline-card:hover { border-color: var(--bv-teal); box-shadow: var(--sombra-sm); }

.crm-grafico { align-items: flex-end; border-bottom: 1px solid var(--bv-line); }
.crm-barra { border-radius: 4px 4px 0 0; background: #D5DBE3; }
.crm-barra--atual { background: var(--bv-teal); }
.crm-barra-valor { color: var(--bv-ink); }
.crm-barra-mes { font-size: .72rem; color: var(--bv-ink-3); }
.crm-ranking-item { border-radius: var(--raio-p); border: 0; border-bottom: 1px solid var(--bv-line-2); background: transparent; }
.crm-ranking-item:hover { background: var(--bv-teal-tint); }
.crm-ranking .posicao { border-radius: 999px; background: var(--bv-teal-tint); color: var(--bv-teal); font-weight: 700; }

.ficha-sidebar { border-radius: var(--raio); border: 1px solid var(--bv-line); background: var(--bv-surface); box-shadow: var(--sombra-sm); }
.ficha-sidebar-dados dt { font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: var(--bv-ink-3); }
.ficha-sidebar-dados dd { font-weight: 600; font-variant-numeric: tabular-nums; }

/* linha do tempo clínica: trilho fino, marcador redondo */
.linha-tempo { padding-left: 26px; }
.linha-tempo::before { background: var(--bv-line); width: 2px; }
.linha-tempo .linha-tempo-item::before {
  border-radius: 50%; width: 11px; height: 11px;
  background: var(--bv-surface); border: 2px solid var(--bv-ink-4);
}
.linha-tempo .linha-tempo-item.ativa::before { background: var(--bv-teal); border-color: var(--bv-teal); }

.opcao-triagem, .opcao-servico, .slot, .slot--home { border-radius: var(--raio-p); }
.opcao-triagem:hover { transform: none; border-color: var(--bv-teal); background: var(--bv-teal-tint); }
.opcao-servico.selecionado, .opcao-triagem.ativa { border-color: var(--bv-teal); background: var(--bv-teal-tint); }
.slot { font-variant-numeric: tabular-nums; }
.slot.selecionado { background: var(--bv-teal); border-color: var(--bv-teal); }
.slot--home:hover { background: var(--bv-teal); border-color: var(--bv-teal); }

/* ─────────────────────────────────────────── sala de atendimento ── */

.sala-video { background: var(--bv-ink); }
.balao { border-radius: var(--raio); }
.balao--eu { background: var(--bv-teal); border-bottom-right-radius: var(--raio-xs); }
.balao--outro { background: var(--bv-teal-tint); border-bottom-left-radius: var(--raio-xs); }
.balao .quem { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.transcricao-linha { border-radius: var(--raio-p); border-left: 2px solid var(--bv-line); background: var(--bv-surface); }
.transcricao-linha--vet { border-left-color: var(--bv-teal); }
.transcricao-linha--tutor { border-left-color: var(--bv-ink-4); }
.transcricao-linha .quem { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ──────────────────────────────────────────────── modal / diálogo ── */

.modal { border: 1px solid var(--bv-line); }
.modal::backdrop { background: rgba(16, 24, 40, .5); }

/* ──────────────────────────────────────── prontuário impresso ── */

.folha { background: var(--bv-surface); }
.folha-topo { border-bottom: 2px solid var(--bv-ink); }
.folha h4 {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bv-ink-3);
}
.folha section { border-bottom: 1px solid var(--bv-line-2); padding-bottom: 12px; }
/* Rascunho e documento assinado não podem parecer a mesma coisa. */
.folha-assinatura { border: 1px solid var(--bv-teal); border-radius: var(--raio-p); background: var(--bv-teal-tint); padding: 16px 18px; }
.folha-assinatura:has(strong[style*="erro"]),
.folha-assinatura.nao-assinado { border-color: var(--bv-signal); background: var(--bv-signal-t); }

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

.rodape { background: var(--gradiente-escuro); border-top: 0; padding: 56px 0 26px; }
.rodape h4 { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.rodape a:hover { color: #FFF; }
.rodape-base { font-size: .78rem; }

/* ═══════════════════════════════════════════════════════════════════
   ASSINATURAS DE EXPERIÊNCIA (marcação injetada por bevet-ui.js)
   ═══════════════════════════════════════════════════════════════════ */

/* 01 — console clínico (⌘K) */
.bv-console-abrir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: calc(100% - 24px); margin: 12px 12px 4px;
  background: var(--bv-paper); border: 1px solid var(--bv-line);
  border-radius: var(--raio-p);
  padding: 9px 12px; cursor: pointer; font: inherit; font-size: .84rem; color: var(--bv-ink-3);
  transition: border-color var(--transicao), background var(--transicao);
}
.bv-console-abrir:hover { border-color: var(--bv-teal); background: var(--bv-teal-tint); }
.bv-console-abrir kbd {
  font-family: var(--bv-sans); font-size: .7rem; color: var(--bv-ink-3);
  background: var(--bv-surface); border: 1px solid var(--bv-line); border-radius: 4px; padding: 1px 6px;
}
.bv-console {
  border: 1px solid var(--bv-line); border-radius: var(--raio-g); padding: 0;
  width: min(620px, 92vw); max-width: none; box-shadow: var(--sombra-flutuante);
}
.bv-console::backdrop { background: rgba(16, 24, 40, .5); }
.bv-console-topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--bv-line); }
.bv-console-topo input { border: 0; padding: 0; font-size: 1rem; outline: 0; box-shadow: none; }
.bv-console-topo input:focus { outline: 0; box-shadow: none; border: 0; }
.bv-console-lista { max-height: 52vh; overflow-y: auto; }
.bv-console-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--bv-line-2); padding: 12px 16px; cursor: pointer; font: inherit;
}
.bv-console-item:hover, .bv-console-item[aria-selected="true"] { background: var(--bv-teal-tint); }
.bv-console-item b { font-size: .9rem; font-weight: 600; display: block; }
.bv-console-item small { color: var(--bv-ink-3); font-size: .76rem; }
.bv-console-item span {
  font-size: .66rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bv-teal); white-space: nowrap;
}
.bv-console-vazio { padding: 22px 16px; color: var(--bv-ink-3); font-size: .88rem; }

/* ───────────────────────────────────────────────── mobile de verdade ── */

@media (max-width: 900px) {
  .crm-shell { grid-template-columns: 1fr; }
  .crm-nav-coluna { position: static; }
  /* No celular a fila do turno é a tela — não uma grade reduzida. */
  .linha { grid-template-columns: 1fr; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: 1fr; }
  /* Alvo de toque nunca abaixo de 44px. */
  .btn { min-height: 48px; }
  .aba { min-height: 44px; }
  .crm-nav-item { min-height: 48px; }
  .linha-resumo { min-height: 48px; }
}

@media print {
  .bv-cockpit, .bv-console-abrir, .bv-console { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   TELAS PÚBLICAS — marcação de index.html e login.html
   (hero, linha de números, decisões em linhas, pôster, login em split)
   ═══════════════════════════════════════════════════════════════════ */

.bv-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 28px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bv-teal);
}
.bv-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--bv-teal); display: block; animation: bv-pulso 2.6s ease-in-out infinite; }
@keyframes bv-pulso { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- hero ---------- */
.bv-hero { border-bottom: 1px solid var(--bv-line); background: var(--gradiente-claro); }
.bv-hero-copy { padding: 80px 0 68px; }
.bv-hero-copy h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 20ch; margin: 0 0 24px; text-wrap: pretty; }
.bv-hero-copy .chamada { font-size: 1.18rem; line-height: 1.55; color: var(--bv-ink-2); max-width: 58ch; margin: 0 0 32px; }
.bv-hero-copy .filtros--home {
  background: var(--bv-surface); box-shadow: var(--sombra); border: 1px solid var(--bv-line);
  border-radius: var(--raio); padding: 10px;
  grid-template-columns: 1.4fr 1fr .7fr auto; max-width: 760px;
}

/* ---------- linha de números ---------- */
.bv-numeros { background: var(--bv-surface); border-bottom: 1px solid var(--bv-line); }
.bv-numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
.bv-numeros-grade > div { padding: 30px 28px; border-right: 1px solid var(--bv-line-2); }
.bv-numeros-grade > div:first-child { padding-left: 0; }
.bv-numeros-grade > div:last-child { border-right: 0; padding-right: 0; }
.bv-numeros strong {
  display: block; font-family: var(--bv-display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.3; text-wrap: pretty;
}
.bv-numeros span { display: block; margin-top: 8px; font-size: .82rem; color: var(--bv-ink-3); }

/* ---------- três decisões ---------- */
.bv-decisoes { border-bottom: 1px solid var(--bv-line); }
.bv-decisoes-topo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  flex-wrap: wrap; padding: 58px 0 22px;
}
.bv-decisoes-topo h2 { margin: 0; max-width: 22ch; font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.bv-decisoes-topo .rotulo { margin: 0; }
.bv-decisao {
  display: grid; grid-template-columns: 62px 1fr 1.1fr; gap: 30px; align-items: start;
  padding: 30px 0; border-top: 1px solid var(--bv-line); transition: background var(--transicao);
}
.bv-decisao:hover { background: var(--bv-surface); }
.bv-decisao-n { font-size: .82rem; font-weight: 700; color: var(--bv-teal); font-variant-numeric: tabular-nums; padding-top: 5px; }
.bv-decisao h3 { margin: 0; font-size: 1.28rem; font-weight: 600; }
.bv-decisao p { margin: 0; max-width: 52ch; font-size: .96rem; line-height: 1.55; color: var(--bv-ink-2); }

/* ---------- pôster de fecho ---------- */
.bv-poster { background: var(--gradiente-escuro); color: #FFF; padding: 76px 0; }
.bv-poster-rotulo { margin: 0 0 22px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bv-teal-claro); }
.bv-poster-frase { margin: 0 0 34px; max-width: 26ch; font-family: var(--bv-display); font-size: clamp(1.8rem, 3.8vw, 3.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; text-wrap: pretty; }
.bv-btn-vazado { background: transparent; color: #FFF; border-color: rgba(255,255,255,.45); }
.bv-btn-vazado:hover { border-color: #FFF; background: rgba(255,255,255,.08); color: #FFF; }

/* ---------- login ---------- */
.bv-login { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 64px); }
.bv-login-confianca { background: var(--gradiente-escuro); padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.bv-login-marca { display: flex; align-items: baseline; gap: 14px; }
.bv-login-marca-nome { font-family: var(--bv-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: #FFF; }
.bv-login-marca-sub { font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.bv-login-frase { margin: 0 0 30px; max-width: 22ch; font-family: var(--bv-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #FFF; }
.bv-login-lista { list-style: none; margin: 0; padding: 0; }
.bv-login-lista li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12); }
.bv-login-lista svg { margin-top: 3px; color: var(--bv-teal-claro); }
.bv-login-lista strong { display: block; font-size: .88rem; color: #FFF; }
.bv-login-lista span { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.6); }
.bv-login-rodape { margin: 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.bv-login-forma { background: var(--bv-paper); padding: 44px 40px; display: flex; align-items: center; }
.bv-login-caixa { width: 100%; max-width: 400px; }
.bv-login-caixa .abas { margin-bottom: 28px; }
.bv-login-titulo { font-size: 1.9rem; margin: 0 0 6px; }
.bv-login-apoio { font-size: .88rem; color: var(--bv-ink-3); margin: 0 0 26px; }
.bv-login-meta { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 0 0 24px; }
.bv-login-meta a { font-size: .82rem; font-weight: 500; }
.bv-login-meta span { font-size: .72rem; color: var(--bv-ink-3); }
.bv-login-nota { margin: 22px 0 0; font-size: .82rem; line-height: 1.6; color: var(--bv-ink-3); }
.bv-login-nota--regra { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bv-line); }

@media (max-width: 960px) {
  .bv-login { grid-template-columns: 1fr; }
  .bv-hero-copy { padding: 48px 0 40px; }
  .bv-hero-copy .filtros--home { grid-template-columns: 1fr; }
  .bv-numeros-grade { grid-template-columns: repeat(2, 1fr); }
  .bv-numeros-grade > div { border-bottom: 1px solid var(--bv-line-2); }
  .bv-numeros-grade > div:nth-child(2n) { padding-right: 0; }
  .bv-numeros-grade > div:nth-child(2n+1) { padding-left: 0; }
  .bv-decisao { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .bv-decisoes-topo { padding: 40px 0 18px; }
  .bv-login-confianca { padding: 32px 24px; gap: 30px; }
  .bv-login-forma { padding: 36px 24px; }
  .bv-login-caixa { max-width: none; }
}