/* ============================================================
   LumeClínica — App CSS (visual próprio, paleta rosa/nude)
   Estrutura inspirada no padrão do LumeOS; identidade nova.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--fundo);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-escuro); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  padding: 9px 16px; font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--marca); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--marca-escuro); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); }
.btn-ghost { background: transparent; color: var(--texto-2); }
.btn-ghost:hover:not(:disabled) { background: var(--marca-claro); color: var(--marca-escuro); }

/* Ícones de ação (editar/excluir) em tabelas */
.btn-icone-editar, .btn-icone-excluir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--superficie); cursor: pointer; transition: all .15s;
}
.btn-icone-editar svg, .btn-icone-excluir svg { width: 16px; height: 16px; }
.btn-icone-editar { color: var(--marca); }
.btn-icone-editar:hover { background: var(--marca-claro); border-color: var(--marca); }
.btn-icone-excluir { color: var(--erro); }
.btn-icone-excluir:hover { background: var(--erro-bg); border-color: var(--erro); }

/* ---------- Formulários ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm); padding: 9px 12px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-claro);
}
input::placeholder { color: var(--texto-3); }
.form-erro { color: var(--erro); font-size: 13px; min-height: 18px; margin-bottom: 8px; }

/* ---------- Login ---------- */
/* Fundo profundo rosé/vinho: base escura e quente que faz o card de vidro e os
   orbes de cor brilharem. Bem diferente do gradiente claro e chapado anterior. */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 800px at 15% 10%, #5a3644 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 90%, #47384f 0%, transparent 55%),
    linear-gradient(150deg, #3d2733 0%, #43333f 45%, #342a35 100%);
}

/* --- Fundo animado (orbes com blur + grão sutil) --- */
.login-fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.login-fundo .orbe {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6;
  will-change: transform;
}
.orbe-1 {
  width: 460px; height: 460px; top: -120px; left: -80px;
  background: radial-gradient(circle, #c9738f 0%, rgba(201,115,143,0) 70%);
  animation: orbeFlutua1 18s ease-in-out infinite;
}
.orbe-2 {
  width: 520px; height: 520px; bottom: -160px; right: -120px;
  background: radial-gradient(circle, #c9a86a 0%, rgba(201,168,106,0) 70%);
  animation: orbeFlutua2 22s ease-in-out infinite;
}
.orbe-3 {
  width: 380px; height: 380px; top: 40%; left: 55%;
  background: radial-gradient(circle, #8e4560 0%, rgba(142,69,96,0) 70%);
  animation: orbeFlutua3 26s ease-in-out infinite;
}
/* Textura de grão bem leve — tira o aspecto "liso demais" do degradê. */
.login-grao {
  position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes orbeFlutua1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.12); }
}
@keyframes orbeFlutua2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -60px) scale(1.08); }
}
@keyframes orbeFlutua3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
  50% { transform: translate(-70px, 30px) scale(1.15); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
  .login-fundo .orbe { animation: none; }
}

/* Dimensões e disposição seguem o padrão do LumeOS (wrap 440px, card e rodapé
   empilhados com gap); estilo de vidro e Playfair são a identidade daqui. */
.login-wrap {
  width: 100%; max-width: 440px; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
}

/* Card em vidro: translúcido sobre o fundo, com brilho fino na borda. */
.login-card {
  position: relative; width: 100%;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 20px 60px rgba(20, 8, 14, 0.35),
    0 0 0 1px rgba(201, 115, 143, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 2.8rem 2.4rem;
  animation: cardEntra .7s cubic-bezier(.2, .8, .2, 1) both;
}
/* Fio dourado no topo do card — detalhe de acabamento. */
.login-card::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--marca) 20%, var(--dourado) 80%, transparent);
  opacity: .85;
}
@keyframes cardEntra {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-card { animation: none; }
}

/* Logo: altura do LumeOS (84px). Marca em texto mantém a Playfair em degradê. */
.login-logo { display: flex; justify-content: center; margin-bottom: 1.6rem; }
.login-logo img { height: 84px; max-width: 260px; object-fit: contain; }
.login-logo .marca-texto {
  font-family: var(--fonte-marca);
  font-size: 38px; font-weight: 600; letter-spacing: .2px; line-height: 1.15;
  background: linear-gradient(120deg, var(--marca-escuro), var(--marca) 55%, var(--dourado));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--marca-escuro);
}
/* Título mantém a Playfair (identidade da clínica), tamanho do LumeOS (1.5rem). */
.login-card h1 {
  font-family: var(--fonte-marca); font-weight: 600; font-size: 1.5rem;
  text-align: center; color: var(--texto); letter-spacing: .1px;
}
.login-sub { text-align: center; color: var(--texto-2); font-size: 0.9rem; margin: 0.4rem 0 1.6rem; }
.login-card .field { margin-bottom: 1.1rem; }
/* Botão do login: largura moderada e centralizado (padrão LumeOS), com o
   degradê marca→dourado e brilho ao passar o mouse (identidade daqui). */
.login-card .btn-primary {
  display: flex; justify-content: center; margin: 0.2rem auto 0;
  min-width: 160px; padding: 12px 2rem;
  font-size: 14.5px; letter-spacing: .3px;
  background: linear-gradient(120deg, var(--marca-escuro), var(--marca) 60%, #d68a63);
  border: none; box-shadow: 0 8px 20px -8px rgba(168, 80, 110, .6);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.login-card .btn-primary:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(168, 80, 110, .7);
}
.login-card .btn-primary:active { transform: translateY(0); }

/* Campos do login — foco elegante com anel rosé. */
.login-card .form-erro { min-height: 1.2rem; margin-bottom: 0.6rem; }
.login-card .field label { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.login-card input {
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--borda-forte);
  background: rgba(255,255,255,.7); transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus {
  border-color: var(--marca); outline: none;
  box-shadow: 0 0 0 3px rgba(201, 115, 143, .18);
}

/* Rodapé agora sobre fundo escuro: texto claro e discreto. */
.login-rodape {
  text-align: center; margin-top: 22px; font-size: 12px;
  color: rgba(255, 255, 255, .8); letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(60, 40, 50, .3);
}

/* ---------- Layout com sidebar ---------- */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--superficie); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
}
.sidebar-marca {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 18px 18px;
}
/* Separação sutil: uma linha curta e desvanecida no centro, em vez de uma
   borda reta que competiria com a linha da topbar. */
.sidebar-marca::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px;
  /* Fallback primeiro: navegador sem color-mix descarta a declaração inteira,
     e sem esta linha o filete sumiria em vez de ficar só sem o ponto rosa. */
  background: linear-gradient(90deg, transparent, var(--borda) 25%, var(--borda) 75%, transparent);
  background: linear-gradient(90deg, transparent, var(--borda) 22%,
    color-mix(in srgb, var(--marca) 26%, var(--borda)) 50%, var(--borda) 78%, transparent);
}
.sidebar-marca img { max-height: 68px; max-width: 190px; object-fit: contain; }
.sidebar-marca .marca-texto {
  font-family: var(--fonte-marca);
  /* Mesmo tratamento do login (ver .login-logo .marca-texto). */
  font-size: 23px; font-weight: 600; color: var(--marca-escuro);
  letter-spacing: .1px; line-height: 1.15;
}
/* Menus centralizados no espaço que sobra entre a conta e a logo de suporte —
   sem isso o vazio todo se acumula num bloco só entre o último item e o rodapé. */
.sidebar-nav {
  flex: 1; padding: 12px; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
/* Grupos de navegação (análise · operação · administração — ver NAV em ui.js).
   Separados por um filete fino, SEM rótulo de seção: o rótulo comeria altura e
   obrigaria a nomear categorias que o usuário não pediu. O filete basta para o
   olho entender que ali começa outro assunto.

   O separador é ::before do próprio grupo, então um grupo que não é renderizado
   (o atendente não vê nenhum item de "análise") não deixa filete órfão. */
.nav-grupo { display: flex; flex-direction: column; gap: 2px; }
/* 7px de cada lado do filete: o suficiente para separar os grupos sem que
   o menu inteiro passe da altura da tela num notebook. */
.nav-grupo + .nav-grupo { margin-top: 7px; padding-top: 7px; position: relative; }
.nav-grupo + .nav-grupo::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borda) 28%, var(--borda) 72%, transparent);
}
/* Escala compacta (set/2026). Antes era fonte 14px / peso 600 / padding 10px,
   e o item ficava com 40px de altura — com 9 itens em 3 grupos, o menu passava
   de 436px e ROLAVA em qualquer tela até ~672px de área útil, escondendo os
   últimos itens num notebook 1366×768. Medido no navegador antes e depois.

   O peso caiu de 600 para 500: em item pequeno, negrito pesado engrossa o
   texto e é o que dava a impressão de "nome grande demais". O `letter-spacing`
   mínimo compensa a perda de legibilidade da fonte menor. */
.sidebar-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: var(--raio-sm);
  color: var(--texto-2); font-weight: 500; font-size: 12.5px;
  letter-spacing: .01em; transition: background .15s, color .15s;
}
.sidebar-nav a svg {
  /* Ícone acompanha a fonte: 19px ao lado de um texto de 12.5px ficaria
     dominante e desequilibraria a linha. */
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--texto-3); transition: color .15s;
}
.sidebar-nav a:hover { background: var(--superficie-2); color: var(--texto); }
.sidebar-nav a:hover svg { color: var(--marca); }
.sidebar-nav a.ativo { background: var(--marca-claro); color: var(--marca-escuro); }
.sidebar-nav a.ativo svg { color: var(--marca-escuro); }
/* Barra vertical no item ativo: marca a posição atual mesmo de relance, sem
   depender só do fundo rosa-claro — que num monitor claro quase desaparece. */
.sidebar-nav a.ativo::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  /* Metade da altura do item (32px após a escala compacta). Era 20px quando o
     item tinha 40px — a proporção é que importa, não o número fixo. */
  width: 3px; height: 16px; border-radius: 0 3px 3px 0;
  background: var(--marca);
}
.sidebar-nav a:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
/* Conta (usuário + Sair) — fica ACIMA dos menus, logo abaixo da marca da
   clínica: separa "quem sou eu" de "para onde vou". Compacto de propósito, é
   apoio e não deve competir com a navegação. */
/* padding-left 26px alinha o nome com o ÍCONE dos itens do menu (12px do .nav
   + 14px do padding do <a>), criando um eixo vertical contínuo entre a conta e
   a navegação. Centralizar o nome quebraria esse eixo e ainda brigaria com o
   botão Sair, que é ancorado à direita. */
.sidebar-conta {
  position: relative; padding: 11px 15px 13px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Separação sutil abaixo da conta — mesma linha curta e desvanecida da marca. */
.sidebar-conta::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px;
  /* Fallback primeiro: navegador sem color-mix descarta a declaração inteira,
     e sem esta linha o filete sumiria em vez de ficar só sem o ponto rosa. */
  background: linear-gradient(90deg, transparent, var(--borda) 25%, var(--borda) 75%, transparent);
  background: linear-gradient(90deg, transparent, var(--borda) 22%,
    color-mix(in srgb, var(--marca) 26%, var(--borda)) 50%, var(--borda) 78%, transparent);
}
/* min-width:0 permite o ellipsis funcionar dentro do flex. */
.sidebar-usuario { min-width: 0; text-align: left; }
/* Nome discreto: fonte do sistema (não Playfair, que é da marca) e menor —
   é identificação de sessão, não título de tela. */
.sidebar-usuario strong {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--texto);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-usuario .usuario-papel {
  display: block; margin-top: 1px; font-size: 9px; font-weight: 600;
  color: var(--texto-3); text-transform: uppercase; letter-spacing: 1.1px;
}
/* Sair — só o ícone, com o rótulo lido por leitor de tela. Poupa a largura
   para o nome do usuário, que é a informação útil ali. */
.btn-sair {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  border-radius: 50%; border: 1px solid var(--borda); background: transparent;
  color: var(--texto-2); cursor: pointer; transition: all .18s;
}
.btn-sair span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn-sair svg { width: 15px; height: 15px; }
.btn-sair:hover { background: var(--erro-bg); border-color: var(--erro); color: var(--erro); }
.btn-sair:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Rodapé: logo LumeClínica fixa = botão de suporte técnico (WhatsApp).
   `margin-top: auto` cola no fim mesmo com poucos itens de menu. */
.sidebar-suporte {
  position: relative; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 14px 13px; text-decoration: none;
  transition: background .18s;
}
.sidebar-suporte::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px;
  /* Fallback primeiro: navegador sem color-mix descarta a declaração inteira,
     e sem esta linha o filete sumiria em vez de ficar só sem o ponto rosa. */
  background: linear-gradient(90deg, transparent, var(--borda) 25%, var(--borda) 75%, transparent);
  background: linear-gradient(90deg, transparent, var(--borda) 22%,
    color-mix(in srgb, var(--marca) 26%, var(--borda)) 50%, var(--borda) 78%, transparent);
}
/* Assinatura do fornecedor: discreta de propósito — não deve competir com a
   marca da clínica (topo) nem com a navegação. */
.sidebar-suporte img {
  width: 100%; max-width: 140px; height: auto; display: block;
  opacity: .9; transition: opacity .18s, transform .18s;
}
/* Pílula em vez de texto solto: o texto cinza de 9,5px não parecia clicável.
   Ícone de robô (não o do WhatsApp) e sem o verde do WhatsApp, nem no hover:
   destoava da paleta rosé. A cor fica na marca. */
.suporte-cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  padding: 2px 8px;
  /* Centro ótico: o ícone pesa à esquerda da logo e o olho lê o meio no texto
     "LumeClínica"; centralizada pela caixa, a pílula parecia puxada para a esquerda. */
  transform: translateX(8px);
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--superficie);
  font-size: 9.5px; font-weight: 600; letter-spacing: .1px; line-height: 1.4;
  color: var(--texto-2); transition: color .18s, border-color .18s, background .18s;
}
.suporte-cta svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--marca); }
.sidebar-suporte:hover img { opacity: 1; transform: translateY(-1px); }
.sidebar-suporte:hover .suporte-cta { color: var(--marca-escuro); border-color: var(--marca); background: var(--marca-claro); }
.sidebar-suporte:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: var(--raio-sm); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--borda); background: var(--superficie);
  flex-shrink: 0;
}
.topbar h1 {
  position: relative; display: flex; align-items: center; gap: 14px;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 24px; letter-spacing: -0.01em; color: var(--texto);
}
/* Barra de realce à esquerda do título — cápsula com degradê rosa → dourado
   e um glow suave da cor da marca ao redor. */
.topbar h1::before {
  content: ""; width: 5px; height: 1.1em; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--marca), var(--dourado));
  box-shadow: 0 0 12px rgba(201, 115, 143, .55);
}
.topbar .topbar-acoes { display: flex; gap: 10px; align-items: center; }
.content { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 22px 28px; overflow: hidden; }

/* Páginas que rolam normalmente (não é layout preenche-tela).
   Precisa desativar a cadeia flex: os filhos empilham na altura natural
   e quem rola é o próprio .content — senão o último bloco fica cortado. */
.content--scroll {
  display: block;
  overflow-y: auto;
  min-height: 0;
}
/* Dentro de uma página rolável a tabela não estica: assume a altura do conteúdo. */
.content--scroll .tabela-corp { flex: 0 0 auto; }
/* Respiro no fim da rolagem (padding-bottom do container é ignorado por alguns
   navegadores ao rolar até o fim, deixando o último bloco colado na borda). */
.content--scroll > :last-child { margin-bottom: 22px; }

/* ---------- Filtros ---------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px; margin-bottom: 16px; flex-shrink: 0;
}
.filtros .field { margin-bottom: 0; min-width: 150px; flex: 1; }
.filtros .filtros-acoes { display: flex; gap: 8px; }

/* Filtros do dashboard: período à esquerda, atalhos à direita, sem vazar */
.filtros-dashboard { justify-content: space-between; }
.filtros-periodo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filtros-periodo .field { flex: 0 0 auto; min-width: 150px; }
.filtros-atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.filtros-atalhos .btn { white-space: nowrap; }

/* ---------- Tabela corporativa (.tabela-corp) ---------- */
.tabela-corp {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra);
}
.tabela-corp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--borda); flex-shrink: 0;
}
.tabela-corp-head .tc-titulo { font-size: 16px; font-weight: 700; }
.tabela-corp-head .tc-sub { font-size: 12.5px; color: var(--texto-2); }
.tabela-corp-head .tc-contador { text-align: right; }
.tabela-corp-head .tc-contador .n { font-size: 20px; font-weight: 700; color: var(--marca); }
.tabela-corp-head .tc-contador .rotulo { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .5px; }

.panel-scroll { flex: 1; min-height: 0; overflow: auto; }
.panel-scroll table { width: 100%; border-collapse: collapse; }
.panel-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie-2); color: var(--texto-2);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
/* Cabeçalho de coluna numérica alinha à direita como as células (.td-num),
   senão o título fica à esquerda e o número à direita — desencontrados. */
.panel-scroll thead th.td-num { text-align: right; }
.panel-scroll tbody td { padding: 13px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.panel-scroll tbody tr:hover { background: var(--marca-claro); }
.panel-scroll tbody tr:last-child td { border-bottom: none; }
.panel-scroll .vazio { text-align: center; color: var(--texto-3); padding: 40px; }
.col-acoes { display: flex; gap: 6px; }
.td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Variante compacta — tabelas largas (muitas colunas) que precisam caber
   em primeira tela sem rolagem horizontal. Aplicada por página, no .tabela-corp. */
.tabela-corp.compacta .panel-scroll thead th { font-size: 11px; padding: 9px 10px; letter-spacing: .3px; }
.tabela-corp.compacta .panel-scroll tbody td { font-size: 12.5px; padding: 8px 10px; }
.tabela-corp.compacta .panel-scroll .badge { font-size: 11px; padding: 2px 7px; }
.tabela-corp.compacta .col-acoes { gap: 4px; }
.tabela-corp.compacta .btn-icone-editar,
.tabela-corp.compacta .btn-icone-excluir { width: 27px; height: 27px; border-radius: 6px; }
.tabela-corp.compacta .btn-icone-editar svg,
.tabela-corp.compacta .btn-icone-excluir svg { width: 15px; height: 15px; }

/* Badges de categoria */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-novo  { background: #f7e2ea; color: var(--cat-novo); }
.badge-recor { background: #e4ecf7; color: var(--cat-recor); }
.badge-parc  { background: #f6eeda; color: #9c7c34; }
.badge-ret   { background: #e1efea; color: #3f7a6b; }
.badge-nao   { background: #ede8ea; color: var(--cat-nao); }

/* ---------- Cards (dashboard) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; }
.card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
}
.card .card-rotulo { font-size: 12.5px; color: var(--texto-2); font-weight: 600; margin-bottom: 8px; }
.card .card-valor { font-size: 27px; font-weight: 700; color: var(--texto); }
.card .card-extra { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

/* Cards de total numa página de listagem (layout preenche-tela): não podem
   roubar a altura da tabela nem crescer/encolher com ela. Compactos e fixos. */
.cards-cp {
  flex-shrink: 0; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
.cards-cp .card { padding: 12px 16px; }
.cards-cp .card .card-rotulo { margin-bottom: 3px; }
.cards-cp .card .card-valor { font-size: 22px; line-height: 1.15; }
.cards-cp .card .card-extra { margin-top: 1px; }
.card.destaque { border-top: 3px solid var(--marca); }

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grafico-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
}
.grafico-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.grafico-card canvas { max-height: 280px; }

/* ---------- Dashboard "preenche-tela" ----------
   Tudo (filtros + cards + 4 gráficos) cabe sem rolar: os gráficos dividem a
   altura restante. Depende da cadeia flex .content → .graficos → .grafico-card. */
.content--dashboard { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Filtros e cards enxutos: são apoio — a altura pertence aos gráficos. */
.content--dashboard .filtros { padding: 7px 12px; margin-bottom: 8px; gap: 8px; row-gap: 6px; }
.content--dashboard .filtros .field { gap: 2px; min-width: 128px; }
.content--dashboard .filtros .field label { font-size: 10.5px; }
.content--dashboard .filtros input,
.content--dashboard .filtros select { padding: 4px 9px; font-size: 12.5px; }
.content--dashboard .filtros .btn { padding: 4px 11px; font-size: 12px; }
.content--dashboard .cards { gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
.content--dashboard .card { padding: 8px 13px; }
.content--dashboard .card.destaque { border-top-width: 2px; }
.content--dashboard .card .card-rotulo { font-size: 10.5px; margin-bottom: 1px; letter-spacing: .01em; }
.content--dashboard .card .card-valor { font-size: 19px; line-height: 1.1; }
.content--dashboard .card .card-extra { font-size: 10.5px; margin-top: 0; }
/* Os 4 gráficos em 2×2, ocupando toda a altura que sobrar. */
.content--dashboard .graficos {
  flex: 1; min-height: 0; gap: 10px;
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
}
.content--dashboard .grafico-card {
  display: flex; flex-direction: column; min-height: 0; padding: 12px 15px 13px;
}
.content--dashboard .grafico-card h3 { font-size: 12.5px; margin-bottom: 6px; flex-shrink: 0; }
/* O canvas preenche o que restou do card. `position:absolute` dentro de um pai
   com altura resolvida é o padrão do Chart.js para responsividade: sem isso o
   canvas empurra o container, que reexpande o canvas (o gráfico "cresce sozinho"). */
.content--dashboard .grafico-card .canvas-box { position: relative; flex: 1; min-height: 0; }
.content--dashboard .grafico-card canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  max-height: none !important;
}

/* Comercial (classe segue `--redes`, nome antigo da tela): mesmo tratamento
   do dashboard, mas a página rola para
   alcançar a tabela de lançamentos abaixo. Os gráficos ocupam a 1ª tela;
   a altura vem de min-height (não de flex), senão encolheriam com a tabela. */
.content--redes { overflow-y: auto; }
/* .tela-cheia ocupa exatamente a altura visível do .content: filtros + cards +
   gráficos preenchem a 1ª tela e a tabela fica logo abaixo da dobra (aparece ao
   rolar). Altura vem do pai — sem estimativa de pixels. */
.content--redes .tela-cheia {
  /* +22px compensa o padding-bottom do .content, que senão deixa o topo da
     tabela assomar na 1ª tela. */
  height: calc(100% + 22px); flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
}
.content--redes .tela-cheia .graficos { flex: 1; min-height: 0; }
.content--redes .tabela-corp { flex: none; margin-top: 22px; }

/* Metas: mesmo padrão da tela Comercial — filtros + painel meta×realizado +
   referências ocupam a 1ª tela; a tabela de metas cadastradas fica abaixo da
   dobra (aparece ao rolar). */
.content--metas { overflow-y: auto; }
/* Conteúdo em fluxo natural: painel, referências e tabela empilham na altura
   real, sem esticar e sem vazio. A tabela fica logo abaixo das referências. */
.content--metas .tabela-corp { flex: none; margin-top: 16px; }

/* ---------- Painel de metas (meta × realizado) ---------- */
.meta-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.meta-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
}
.meta-card .meta-titulo { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.meta-card .meta-linha { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.meta-card .meta-linha .rot { color: var(--texto-2); }
.meta-card .meta-linha .val { font-weight: 700; }
.meta-card .meta-realizado .val { color: var(--marca); }
.meta-barra { height: 12px; background: var(--superficie-2); border-radius: 20px; overflow: hidden; margin: 12px 0 8px; border: 1px solid var(--borda); }
.meta-barra > span { display: block; height: 100%; border-radius: 20px; transition: width .4s; background: var(--marca); }
.meta-barra.ok > span { background: var(--ok); }
.meta-pct { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.meta-pct .badge { font-size: 11px; }
.meta-card .sem-meta { color: var(--texto-3); font-size: 13px; font-style: italic; }

/* ---------- Modal ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(58, 47, 51, 0.45);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-fundo.aberto { display: flex; }
.modal {
  background: var(--superficie); border-radius: var(--raio);
  box-shadow: var(--sombra-forte); width: 100%; max-width: 560px;
  max-height: 92vh; overflow: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--borda); }
.modal-head h2 { font-size: 18px; font-weight: 700; }
.modal-fechar { background: none; border: none; font-size: 24px; color: var(--texto-3); cursor: pointer; line-height: 1; }
.modal-body { padding: 18px 24px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.modal-grid .col-2 { grid-column: 1 / -1; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--borda); }

/* Campos mais compactos dentro do modal — para caber em 1 tela sem rolagem. */
.modal .field { gap: 4px; margin-bottom: 10px; }
.modal .field label { font-size: 12px; }
.modal input, .modal select, .modal textarea { padding: 7px 11px; font-size: 13.5px; }
.modal .form-erro { min-height: 0; margin-bottom: 4px; }

/* Campo travado (ex.: valor/forma quando "Não converteu"): visual apagado
   para deixar claro que não é editável. */
.modal input:disabled, .modal select:disabled {
  background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed;
}
/* Aviso ancorado ao lado do rótulo — position:absolute para NÃO empurrar a
   altura da grade (senão o modal cresce e aparece a barra de rolagem). */
.aviso-flutuante {
  position: absolute; top: 1px; right: 0;
  font-size: 10.5px; font-style: italic; color: var(--marca-escuro);
}

/* ---------- Logo (configurações) ---------- */
.logo-preview {
  width: 180px; height: 100px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-sm);
  display: flex; align-items: center; justify-content: center; background: var(--superficie-2); overflow: hidden;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vazia { color: var(--texto-3); font-size: 13px; }

/* ---------- Utilitários ---------- */
.hidden { display: none !important; }
.muted { color: var(--texto-2); }
.spacer { flex: 1; }
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--texto); color: #fff; padding: 12px 18px; border-radius: var(--raio-sm);
  box-shadow: var(--sombra-forte); font-size: 14px; opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.mostra { opacity: 1; transform: translateY(0); }
.toast.erro { background: var(--erro); }
.toast.ok { background: var(--ok); }

/* ============================================================
   Botão hambúrguer + overlay do drawer
   (escondidos no desktop; ativados nas media queries mobile)
   ============================================================ */
.btn-menu {
  display: none; /* só aparece no mobile */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
  background: var(--superficie); color: var(--texto); cursor: pointer;
  flex-shrink: 0; transition: background .15s;
}
.btn-menu:hover { background: var(--superficie-2); }
.btn-menu svg { width: 20px; height: 20px; }

.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(58, 47, 51, 0.45);
  opacity: 0; transition: opacity .2s;
}

/* ---------- Visão Geral (retrato do momento, sem filtros) ---------- */
/* margin menor que os 18px originais: esta linha fica acima dos três blocos da
   1ª tela, então cada pixel aqui é altura que o gráfico deixa de ter. */
.vg-subtitulo { color: var(--texto-2); font-size: 13px; margin-bottom: 12px; }
.vg-momento { font-size: 12.5px; color: var(--texto-3); }

.vg-secao {
  font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700;
  color: var(--texto); margin: 22px 0 12px;
}
.vg-secao:first-of-type { margin-top: 0; }
/* Os três blocos de faturamento formam a 1ª tela e precisam caber juntos, então
   respiram um pouco menos entre si que o resto da página. Da "Meta anual" para
   baixo o espaçamento normal volta. */
.vg-secao--compacta { margin: 12px 0 8px; }

/* Cards de "Faturamento geral" na 1ª tela: um degrau mais baixos que o padrão
   `.cards-cp`. São a faixa que sobra para o gráfico — em notebook de 768px a
   disputa por altura é de poucos pixels, e aqui há folga sem apertar o número.
   Só nesta tela; os mesmos cards no Dashboard seguem no tamanho normal. */
.content--scroll #vg-total-geral { margin-bottom: 12px; }
.content--scroll #vg-total-geral .card { padding: 10px 16px; }
.content--scroll #vg-total-geral .card .card-valor { font-size: 21px; }
.vg-secao-nota { font-weight: 500; font-size: 13.5px; color: var(--texto-3); }

/* Subtítulo dentro de uma seção (ex.: Consultas / Produtos), quando o bloco
   tem duas linhas de cards que compartilham os mesmos períodos. */
.vg-subsecao {
  font-family: var(--fonte-titulo); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-2); margin: 0 0 8px;
}
.cards-cp + .vg-subsecao { margin-top: 4px; }

.vg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vg-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
}
.vg-card--largo { margin-bottom: 4px; }

/* Gráfico da Visão Geral (evolução 12 meses).

   A PRIMEIRA TELA mostra os três blocos de faturamento juntos — os dois de
   cards mais este gráfico — a pedido do cliente (set/2026): quem abre a Visão
   Geral vê o resultado e a tendência sem rolar.

   Para isso o gráfico não tem altura fixa: ele recebe a altura que sobra da
   viewport (`--vg-sobra`, calculada no bloco abaixo) e é limitado por
   `clamp`, para não virar uma tira achatada numa tela baixa nem um gráfico
   desproporcional numa tela grande. Abaixo dele a página segue rolando
   normalmente. */
.vg-grafico-card {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra);
  margin-bottom: 4px;
}
.vg-grafico-card .canvas-box {
  /* Tudo o que a 1ª tela gasta FORA do canvas. Declarado parcela a parcela em
     vez de um número redondo: assim dá para conferir cada item ao mexer no
     layout, em vez de recalibrar por tentativa.

     A primeira versão usava 500px "cheios" e subestimava o fecho do card
     (bordas, margem e o respiro final da página), então sobrava uma faixa do
     bloco para fora da tela. */
  /* Valores MEDIDOS no navegador (Chrome headless), não estimados do CSS: as
     duas tentativas anteriores erraram por somar componentes à mão e esquecer
     bordas, line-height arredondado e a altura real da topbar.
       topo do canvas ....... 459px
       fecho do card ........  19px (padding-bottom + borda + margem) */
  --vg-antes: 459px;
  --vg-fecho: 37px;
  /* Piso de 160px: abaixo disso o gráfico vira uma tira ilegível, e é melhor
     a página rolar. Em área útil de ~640px (1366×768 com barra do navegador)
     o bloco ainda fecha dentro da tela. */
  height: clamp(160px, calc(100vh - var(--vg-antes) - var(--vg-fecho)), 300px);
}
.vg-grafico-card canvas { max-height: 100%; }

.vg-card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vg-card-titulo { font-size: 15px; font-weight: 700; color: var(--texto); }
.vg-card-numeros { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* Barra de progresso meta × realizado. */
.vg-barra { height: 8px; border-radius: 999px; background: var(--marca-claro); overflow: hidden; }
.vg-barra-preenchida {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--marca-escuro), var(--marca));
  transition: width .35s ease;
}
.vg-barra-preenchida.atingiu { background: linear-gradient(90deg, #2f8455, var(--ok)); }

.vg-card-rodape {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.vg-sem-meta { color: var(--texto-3); font-style: italic; }
.vg-nota { margin-top: 12px; font-size: 12.5px; color: var(--texto-2); line-height: 1.6; }
.vg-alerta { color: var(--dourado); font-weight: 600; }

/* ============================================================
   Responsividade
   ============================================================ */

/* ---- Tablet (≤1024px): sidebar mais estreita, paddings menores ---- */

/* ---------- Faturamento e ticket médio (duas análises lado a lado) ---------- */
/* A tela PREENCHE a altura, não rola: com apenas dois indicadores por análise,
   deixá-la rolar faria o conteúdo se acumular no topo e sobrar um vazio embaixo
   — exatamente o que acontecia antes. Aqui as duas colunas esticam até o fim da
   viewport e distribuem o espaço internamente.

   Isso exige a cadeia flex contínua descrita em arquitetura-frontend.md:
   .content → .comparativo → .bloco-fat → .resultados, todos com min-height: 0. */
/* `overflow-y: auto` (não `hidden`): com o conjunto centrado por
   `align-content: center`, se o conteúdo passar da altura disponível ele
   transborda para CIMA também — e com `hidden` o topo das análises ficaria
   inalcançável, sem barra de rolagem. Com `auto`, no caso normal não aparece
   rolagem nenhuma (o conteúdo cabe) e, quando não cabe, dá para alcançar tudo. */
.content--faturamento {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}

/* As duas análises: colunas iguais que ocupam toda a altura disponível.
   `minmax(0, 1fr)` (não `1fr`) impede que um nome de cidade longo estique a
   própria coluna e desalinhe os cards do outro lado. */
/* As análises ocupam a altura do próprio conteúdo e o CONJUNTO fica centrado
   na área abaixo do título — não esticado de ponta a ponta.
   `align-content: center` sobre a grade é o que desce os blocos; `stretch`
   (o padrão) os fazia tocar o topo e o rodapé, e então centrar os valores lá
   dentro movia pouca coisa, porque os filtros já tomavam o topo.
   `align-items: start` mantém as duas colunas com a mesma altura do conteúdo
   sem esticar a mais curta. */
.comparativo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; flex: 1; min-height: 0;
  align-content: center; align-items: start;
}

.bloco-fat {
  position: relative; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
/* Fio da marca no topo — delimita a análise sem precisar de moldura pesada.
   Mesmo detalhe de acabamento do card de login. */
.bloco-fat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--marca), var(--dourado));
  opacity: .9;
}

/* Cabeçalho: selo numerado + título e, abaixo, o recorte em vigor por extenso. */
.bloco-fat-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-shrink: 0;
}
/* O número identifica a análise de relance, sem competir com o título. */
.bloco-fat-selo {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: var(--marca-claro); color: var(--marca-escuro);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bloco-fat-titulo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bloco-fat-titulo h2 {
  font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700;
  color: var(--texto); line-height: 1.2;
}
/* O recorte em vigor: com duas análises na tela, é o que impede ler o número de
   uma e o filtro da outra. */
.bloco-fat-periodo {
  font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* Filtros dentro da análise: sem card próprio (o bloco já é o card) e
   compactos, já que são dois conjuntos na mesma tela. */
.filtros-bloco {
  background: var(--superficie-2); border: 1px solid var(--borda);
  padding: 12px; margin-bottom: 16px; gap: 10px; flex-shrink: 0;
  flex-direction: column; align-items: stretch;
}
.filtros-bloco .filtros-atalhos { gap: 6px; }
.filtros-bloco .filtros-atalhos .btn { padding: 5px 11px; font-size: 12px; flex: 1; }
.filtros-bloco .filtros-periodo { gap: 8px; }
.filtros-bloco .field { min-width: 108px; flex: 1 1 108px; gap: 3px; margin-bottom: 0; }
.filtros-bloco .field label { font-size: 10.5px; }
.filtros-bloco input, .filtros-bloco select { padding: 5px 9px; font-size: 12.5px; }
/* O botão ocupa a linha inteira: fecha o bloco de filtros com um limite claro
   em vez de ficar pendurado ao lado de um campo. */
.filtros-bloco .filtros-acoes { width: 100%; }
.filtros-bloco .filtros-acoes .btn { width: 100%; padding: 6px 12px; font-size: 12.5px; }

/* Os valores ocupam TODO o espaço que sobra na coluna — é o que tira o aspecto
   de "tela cortada pela metade". Sem cartão em volta: a análise já é o cartão,
   e caixa dentro de caixa embaralha a hierarquia. O que separa um valor do
   outro é espaço, tamanho e um fio de 1px. */
/* Os dois valores são tratados como UM grupo, centrado no espaço que sobra
   abaixo dos filtros — não como duas faixas que se esticam.
   `justify-content: center` sobre `flex: 1` é o que desce o conjunto do topo e
   o assenta no meio da coluna; antes cada valor se centrava no próprio quinhão
   e o principal, sendo maior, puxava tudo para cima. */
/* Sem `flex: 1`: o bloco não estica mais (ver .comparativo), então os valores
   ocupam a própria altura e é o CONJUNTO das análises que fica centrado na
   tela. O respiro em relação aos filtros vem do padding. */
.resultados {
  display: flex; flex-direction: column;
  gap: 22px; padding: 18px 0 6px;
}
/* Sem `flex` aqui: cada valor ocupa só a altura do seu conteúdo, e o
   espaçamento entre eles vem do `gap` acima. É o que mantém o par unido e
   centrado, em vez de espalhado pela coluna. */
.resultado {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 0 4px;
}
/* Separador entre os dois indicadores. Com o conteúdo centrado, uma borda de
   ponta a ponta ficaria pesada e devolveria o aspecto de "caixa": um fio curto
   e centrado separa sem dividir a coluna em duas. */
.resultado--principal { padding-bottom: 22px; position: relative; }
.resultado--principal::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 52px; height: 1px; background: var(--borda-forte); opacity: .8;
}

.resultado-rotulo {
  font-size: 11.5px; font-weight: 600; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .04em;
}
/* `clamp` evita que um faturamento de 7 dígitos quebre linha em tela menor. */
.resultado-valor {
  font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; color: var(--texto);
  line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.resultado--principal .resultado-valor { color: var(--marca-escuro); }
/* O valor do ticket é secundário: um degrau abaixo, sem sumir. */
.resultado:not(.resultado--principal) .resultado-valor {
  font-size: clamp(23px, 2.2vw, 32px);
}
.resultado-nota { font-size: 12px; color: var(--texto-3); }

/* A animação do número (contagem até o valor) é feita em JS — ver contar() em
   faturamento.js. Aqui só a garantia de que o número não "pula" de largura a
   cada quadro: tabular-nums acima mantém todos os dígitos com a mesma medida. */

/* Tela larga mas MUITO BAIXA: as análises continuam lado a lado, mas não sobra
   altura para centrar o conjunto.

   O corte é 600px e não 700px por um motivo concreto: num monitor 1366×768 a
   área útil do navegador fica por volta de 640px, então 700px fazia esta regra
   assumir num notebook comum — cancelando a centralização justamente onde ela
   deveria aparecer. Foi o que deu a impressão de que "nada tinha mudado". */
/* Viewport baixa (até ~660px de área útil): o bloco do gráfico não fecha na 1ª
   tela nem com o gráfico no piso. Em vez de achatá-lo mais — viraria uma tira
   ilegível — a faixa ACIMA dele cede: cards e títulos encolhem um degrau.
   Medido no navegador: com estas reduções o bloco fecha a partir de ~600px. */
@media (max-height: 680px) {
  .vg-subtitulo { margin-bottom: 8px; font-size: 12.5px; }
  .vg-secao { font-size: 15.5px; margin: 10px 0 7px; }
  .vg-secao--compacta { margin: 9px 0 6px; }
  .content--scroll #vg-faturamento .vg-card { padding: 12px 16px; }
  .content--scroll #vg-faturamento .vg-card-topo { margin-bottom: 8px; }
  .content--scroll #vg-total-geral .card { padding: 8px 14px; }
  .content--scroll #vg-total-geral .card .card-valor { font-size: 19px; }
  .vg-grafico-card { padding: 12px 16px; }
  /* 408/25 medidos no navegador com estas reduções aplicadas. */
  .vg-grafico-card .canvas-box { --vg-antes: 408px; --vg-fecho: 31px; }
}

@media (max-height: 600px) {
  /* Sem altura para centrar: o conjunto vai para o topo e rola normalmente.
     Manter `align-content: center` aqui faria o conteúdo transbordar também
     para cima. O espaçamento aperta um pouco para caber mais. */
  .comparativo { align-content: start; }
  .resultados { gap: 16px; padding: 12px 0 4px; }
}

@media (max-width: 1024px) {
  /* Duas análises lado a lado exigem largura: abaixo disso cada uma teria
     ~450px para 5 filtros e os valores, que quebrariam linha em R$.
     Empilhadas, cada uma usa a largura inteira — e aí não há o que centrar
     verticalmente: a página rola (`.content--faturamento` já é `auto`). */
  .comparativo {
    grid-template-columns: 1fr; grid-auto-rows: auto;
    align-content: start; flex: none;
  }
  .resultados { gap: 18px; padding: 14px 0 4px; }

  :root { --sidebar-w: 210px; }
  .topbar { padding: 14px 20px; }
  .content { padding: 18px 20px; }
  .sidebar-nav a { padding: 10px 12px; font-size: 13.5px; }
}

/* ---- Mobile (≤768px): sidebar vira drawer deslizante ---- */
@media (max-width: 768px) {
  /* Filtros da análise em coluna única (cinco campos não cabem em linha). */
  .filtros-bloco .field { flex: 1 1 100%; }

  .btn-menu { display: inline-flex; }

  /* Sidebar sai do fluxo e desliza por cima do conteúdo */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
    width: 264px; max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--sombra-forte);
  }
  body.menu-aberto .sidebar { transform: translateX(0); }
  body.menu-aberto .sidebar-overlay { display: block; opacity: 1; }

  .main { width: 100%; }
  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 21px; gap: 10px; }
  .content { padding: 14px 16px; }

  /* Filtros empilham; ações ocupam a linha inteira */
  .filtros { padding: 14px; gap: 10px; }
  .filtros .field { min-width: 0; flex: 1 1 100%; }
  .filtros .filtros-acoes { width: 100%; }
  .filtros .filtros-acoes .btn { flex: 1; }

  .filtros-dashboard { flex-direction: column; align-items: stretch; }
  .filtros-periodo, .filtros-atalhos { width: 100%; }
  .filtros-periodo .field { flex: 1 1 100%; min-width: 0; }
  .filtros-atalhos .btn { flex: 1; }

  /* Cards e gráficos: uma coluna */
  .cards, .graficos, .meta-cards, .vg-grid { grid-template-columns: 1fr; }

  /* Dashboard no mobile: volta a rolar (não cabe tudo em 1 tela pequena).
     Altura fixa por card (não min-height) para não realimentar o resize. */
  .content--dashboard { overflow-y: auto; }
  .content--dashboard .graficos { grid-template-rows: none; flex: none; height: auto; }
  .content--dashboard .grafico-card { height: 280px; }
  /* No mobile o bloco não trava em 1 tela: tudo empilha e rola. */
  .content--redes .tela-cheia { height: auto; display: block; }
  .content--redes .tela-cheia .graficos { flex: none; }

  /* Modal quase full-width, grid em coluna única */
  .modal { max-width: 100%; max-height: 94vh; }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-head { padding: 16px 18px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 14px 18px; }
  .modal-foot .btn { flex: 1; }

  /* Layout "preenche-tela" destravado no mobile: a página rola normalmente,
     senão a tabela fica com altura mínima com os filtros empilhados. */
  .layout { height: auto; min-height: 100vh; overflow: visible; }
  .main { overflow: visible; }
  .content { overflow: visible; }
  .tabela-corp { flex: none; }
  .panel-scroll { max-height: 70vh; }

  /* Tabelas: rolagem horizontal para não espremer colunas */
  .panel-scroll { overflow: auto; }
  .panel-scroll table { min-width: 640px; }
  .tabela-corp-head { padding: 14px 16px; }

  /* Topbar: título + ação podem quebrar sem estourar */
  .topbar-acoes .btn { padding: 8px 12px; font-size: 13px; }
}

/* ---- Celular pequeno (≤480px): ajustes finos ---- */
@media (max-width: 480px) {
  body { font-size: 13.5px; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-acoes { width: 100%; }
  .topbar-acoes .btn { width: 100%; }
  .content { padding: 12px; }
  .card .card-valor { font-size: 23px; }
  .login-card { padding: 30px 22px 26px; }
}