/* =========================================================================
   Subway Saci — Design System (v2 premium)
   Identidade: verde, amarelo, branco e tons escuros.
   Todas as classes usadas por HTML/JS são preservadas.
   ========================================================================= */
:root {
  /* Marca Crescer com Delivery — VERMELHO. Os nomes --verde* são preservados
     de propósito: recolorem todo o app (que já referencia essas variáveis)
     sem reescrever centenas de usos. */
  --verde: #D81324;
  --verde-vivo: #F42433;
  --verde-med: #AE0D1A;
  --verde-escuro: #3a070c;
  --verde-900: #24060a;
  --verde-950: #150407;
  /* Destaque (nomes --amarelo* preservados) — vermelho claro */
  --amarelo: #F42433;
  --amarelo-vivo: #ff5b64;
  --amarelo-escuro: #AE0D1A;
  /* Vermelho em dose baixa — fundo de destaque/hover/foco sem virar bloco
     colorido cheio (rebrand visual: "evitar excesso de vermelho em tudo"). */
  --vermelho-tint: #fdf1f1;
  --vermelho-tint-borda: rgba(216,19,36,.18);
  /* Neutros */
  --bg: #f1f2f4;
  --card: #ffffff;
  --texto: #17181c;
  --cinza: #666b73;
  --cinza-claro: #9a9ea6;
  --linha: #e8e9ee;
  --campo-bg: #f6f7f9;      /* fundo de inputs/superfícies internas */
  --superficie-2: #f7f8fa;  /* cabeçalhos de tabela, chips, hovers claros */
  --topbar-bg: rgba(255,255,255,.82);
  /* Status (semânticos — mantidos: verde=ok, vermelho=erro, etc.) */
  --ok: #0e9d57;    --ok-bg: #e2f7ec;
  --warn: #c48a12;  --warn-bg: #fdf3d9;
  --bad: #db3b3b;   --bad-bg: #fce3e3;
  --muted: #7a8783; --muted-bg: #edf1ef;
  --info: #2f77c4;  --info-bg: #e3eefb;
  /* Gradientes */
  --grad-verde: linear-gradient(135deg, var(--verde-vivo), var(--verde-med));
  --grad-sidebar: linear-gradient(180deg, #260609 0%, #140407 100%);
  --grad-login: linear-gradient(135deg, #4a0a10 0%, #2a0609 45%, #14040660 100%);
  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(20,10,12,.06);
  --sombra: 0 2px 10px rgba(20,10,12,.07);
  --sombra-md: 0 10px 28px rgba(20,10,12,.10);
  --sombra-lg: 0 20px 46px rgba(20,10,12,.17);
  --glow-verde: 0 10px 26px rgba(216,19,36,.30);
  --glow-amarelo: 0 8px 22px rgba(244,36,51,.30);
  /* Formas */
  --raio: 14px;
  --raio-sm: 10px;
  --raio-lg: 20px;
  --sidebar-w: 252px;
  /* Transições */
  --t: .2s cubic-bezier(.4,0,.2,1);
  --t-lenta: .32s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--texto); line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }

/* Ícones inline compartilhados (ver icons.js) — traço fino, sem preenchimento,
   substituem emoji nos dois dashboards (rebrand visual). `vertical-align`
   negativo alinha o ícone com a linha de base do texto ao lado. */
.icon { display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* Splash de boot (ver index.html) — mesma cor de fundo do body, pra não
   piscar nenhuma cor diferente entre o HTML puro e o momento em que o app.js
   decide qual tela mostrar. */
.boot-loading { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); }
::selection { background: rgba(216,19,36,.22); }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: #cdd6d2 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cdd6d2; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #b3beb9; }

/* ===================== ANIMAÇÕES ===================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.96); opacity: .0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ===================== BOTÕES ===================== */
.btn {
  position: relative; border: 1px solid transparent; border-radius: var(--raio-sm);
  padding: 10px 18px; font-size: 14px; font-weight: 650; cursor: pointer; background: #fff;
  color: var(--texto); white-space: nowrap; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), filter var(--t);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grad-verde); color: #fff; box-shadow: var(--glow-verde); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(216,19,36,.38); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: #fff; border-color: var(--linha); color: var(--texto); box-shadow: var(--sombra-sm); }
.btn-ghost:hover { background: #f2f2f4; border-color: #dcdde2; transform: translateY(-1px); box-shadow: var(--sombra); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; }
.icon-btn { background: transparent; border: none; font-size: 22px; cursor: pointer; padding: 6px 9px; border-radius: 10px; color: var(--texto); display: none; transition: background var(--t); }
.icon-btn:hover { background: #f2f2f4; }

/* ===================== LOGIN — utilitários compartilhados =====================
   O layout do login v1 (login-hero, hero-mini, login-card, campo, marca-sw...)
   foi REMOVIDO nesta faxina — substituído pelo bloco "LOGIN v3" no fim do
   arquivo. Sobraram aqui apenas as regras que continuam em uso.
   ============================================================================= */
/* Entrada única da logo: fade + subida ≤8px + escala mínima (.97), ~600ms.
   Depois permanece parada (não é animação contínua). */
@keyframes logoIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Estado de loading do botão (apenas visual — não altera a autenticação).
   Spinner agora BRANCO: o botão novo é vermelho com texto branco (antes era
   escuro, herdado do botão verde antigo, e ficava quase invisível). */
.login-btn-txt { transition: opacity var(--t); }
.login-btn-spin { display: none; }
.login-btn.carregando { pointer-events: none; }
.login-btn.carregando .login-btn-txt { opacity: 0; }
.login-btn.carregando .login-btn-spin {
  display: block; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #ffffff;
  animation: spin .6s linear infinite;
}
.login-btn:disabled { opacity: 1; }

/* ===================== ASSINATURA DO DESENVOLVEDOR (atlaz.company) =====================
   Discreta, fixa no canto inferior esquerdo. Para REMOVER: apague o bloco
   <div class="dev-credito"> no index.html (o CSS abaixo pode ficar, sem efeito).
   Para AJUSTAR opacidade/posição/tamanho, edite as variáveis --dev-* logo abaixo. */
.dev-credito {
  --dev-op: .4;          /* opacidade base do texto */
  --dev-gap-x: 24px;     /* distância da borda esquerda */
  --dev-gap-y: 20px;     /* distância da borda inferior */
  --dev-fs: 11.5px;      /* tamanho da fonte */
  position: fixed; left: var(--dev-gap-x); bottom: var(--dev-gap-y); z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--dev-fs); font-weight: 500; letter-spacing: .3px;
  color: rgba(245,247,246,var(--dev-op)); -webkit-user-select: none; user-select: none;
  animation: fadeIn .8s ease .3s both; transition: color var(--t);
}
.dev-credito:hover { color: rgba(245,247,246,.7); }
.dev-credito-mark {
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: -.5px; line-height: 1; color: rgba(255,190,197,.75);
  padding: 3px 6px; border-radius: 7px;
  background: rgba(216,19,36,.10); border: 1px solid rgba(216,19,36,.22);
}
.dev-credito-txt b { font-weight: 700; color: rgba(245,247,246,.7); }

@media (max-width: 880px) {
  /* No mobile: assinatura centralizada e discreta */
  .dev-credito { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; --dev-fs: 11px; --dev-op: .38; }
}
/* ===================== APP SHELL ===================== */
.app { display: flex; min-height: 100vh; }
.backdrop { display: none; position: fixed; inset: 0; background: rgba(6,40,25,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 40; animation: fadeIn .2s; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--grad-sidebar); color: rgba(255,255,255,.9);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 50;
  box-shadow: 4px 0 24px rgba(6,40,25,.16);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; padding: 18px 22px; letter-spacing: -.2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: block;
  background-image: url("/assets/logo-crescercomdeliverylogin.png");
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.sidebar-brand span { border-bottom: 3px solid var(--amarelo); padding-bottom: 2px; }
.menu { flex: 1; overflow-y: auto; padding: 12px 10px; }
.menu ul { list-style: none; }
.menu li {
  display: flex; align-items: center; gap: 12px; margin: 2px 0; padding: 10px 14px; cursor: pointer;
  font-size: 14.5px; color: rgba(255,255,255,.7); border-radius: 11px; position: relative;
  transition: background var(--t), color var(--t), transform .14s ease;
}
.menu li .m-icon { min-width: 22px; display: inline-flex; align-items: center; justify-content: center; }
.menu li .m-icon .icon { vertical-align: middle; }
/* Sem fundo/padding branco de propósito (item pedido: a moldura branca
   brigava com os ícones novos, que já trazem o próprio fundo escuro/glow). */
.m-logo { height: 22px; width: auto; max-width: 92px; object-fit: contain; border-radius: 6px; display: inline-block; vertical-align: middle; }
.menu li:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(3px); }
.menu li.ativo {
  background: linear-gradient(90deg, rgba(244,36,51,.22), rgba(244,36,51,.05));
  color: #fff; font-weight: 650; box-shadow: inset 3px 0 0 var(--amarelo);
}
.menu li.ativo .m-icon { filter: drop-shadow(0 0 6px rgba(244,36,51,.5)); }
.menu li .m-tag { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 20px; background: rgba(255,255,255,.14); color: #e2efe8; font-weight: 600; }
.sidebar-footer { padding: 14px 22px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.4); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; background: var(--topbar-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--linha); box-shadow: var(--sombra-sm);
  display: flex; align-items: center; gap: 14px; padding: 12px 22px; flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 750; letter-spacing: -.3px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.global-filtros { display: flex; gap: 8px; }
.select-sm, .toolbar select {
  padding: 8px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--card); color: var(--texto); font-size: 14px; cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t);
}
.select-sm:hover, .toolbar select:hover { border-color: #dcdde2; }
.select-sm:focus, .toolbar select:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.chip { font-size: 13px; padding: 6px 13px; border-radius: 20px; background: #f2f2f4; color: var(--texto); white-space: nowrap; font-weight: 500; }
.chip-unidade { background: rgba(216,19,36,.08); color: var(--verde-med); font-weight: 650; box-shadow: inset 0 0 0 1px rgba(216,19,36,.15); }
.user-box { display: flex; align-items: center; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 22px; transition: background var(--t); }
.user-chip:hover { background: #f2f2f4; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad-verde); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; box-shadow: 0 0 0 3px rgba(216,19,36,.15);
}
.user-nome { font-size: 14px; font-weight: 650; }

.content { padding: 24px; max-width: 1340px; width: 100%; animation: fadeIn .25s ease; }

/* ===================== CARDS =====================
   Um card = um número. Fundo branco/off-white sempre — o destaque de um
   indicador vem do PESO da tipografia e de uma borda superior fina na cor
   semântica, nunca de um bloco colorido cheio (rebrand visual: item 1 do
   pedido — "Mais lucrativo" e "Receita Após Deduções" eram exatamente esse
   preenchimento vermelho cheio; ficam brancos com um acento vermelho). */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 15px; margin-bottom: 24px; }
.card {
  position: relative; background: var(--card); border-radius: var(--raio); padding: 18px 20px;
  box-shadow: var(--sombra); border: 1px solid var(--linha); border-top: 3px solid transparent;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  animation: fadeInUp .4s ease both;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: #dcdde2; }
.cards .card:nth-child(1){animation-delay:.02s}.cards .card:nth-child(2){animation-delay:.05s}
.cards .card:nth-child(3){animation-delay:.08s}.cards .card:nth-child(4){animation-delay:.11s}
.cards .card:nth-child(5){animation-delay:.14s}.cards .card:nth-child(6){animation-delay:.17s}
.cards .card:nth-child(7){animation-delay:.20s}.cards .card:nth-child(8){animation-delay:.23s}
.cards .card:nth-child(9){animation-delay:.26s}
.card.destaque {
  background: linear-gradient(180deg, var(--vermelho-tint) 0%, var(--card) 65%);
  border-color: var(--vermelho-tint-borda); border-top-color: var(--verde-vivo);
}
.card.destaque:hover { box-shadow: 0 16px 32px rgba(216,19,36,.16); }
.card.alerta { border-color: rgba(196,138,18,.4); border-top-color: var(--amarelo-escuro); background: linear-gradient(180deg, #fffdf6, #fff); }
.card-label { font-size: 11.5px; color: var(--cinza); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.card-valor { font-size: 27px; font-weight: 800; margin-top: 8px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.card-valor.pequeno { font-size: 18px; }
.card.destaque .card-valor { color: var(--verde-vivo); }
.card-sub { font-size: 12.5px; color: var(--cinza); margin-top: 4px; }

.secao-titulo { font-size: 15px; font-weight: 750; color: var(--texto); margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; }

/* ===================== TOOLBAR / FILTROS ===================== */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; animation: fadeInUp .35s ease both; }
.busca { position: relative; flex: 1; min-width: 210px; }
.busca input {
  width: 100%; padding: 10px 12px 10px 36px; border: 1.5px solid var(--linha); border-radius: 11px; font-size: 14px; background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.busca input:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.busca::before { content: "🔍"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; }
.result-count { font-size: 13px; color: var(--cinza); margin-left: auto; font-weight: 500; }

/* ===================== TABELA ===================== */
.tabela-wrap {
  background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra-md); border: 1px solid var(--linha);
  overflow-x: auto; animation: fadeInUp .35s ease both;
}
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 720px; }
.grid th, .grid td { padding: 11px 7px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
/* Respiro nas bordas; colunas internas compactas p/ caber sem scroll horizontal */
.grid th:first-child, .grid td:first-child { padding-left: 15px; }
.grid th:last-child, .grid td:last-child { padding-right: 13px; }
.grid th {
  background: var(--superficie-2); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--cinza); font-weight: 700;
  position: sticky; top: 0; z-index: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.grid tbody tr { transition: background var(--t); }
.grid tbody tr:hover { background: #f4faf6; }
.grid tbody tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.prod-nome { font-weight: 650; }

/* ===================== PILLS / BADGES ===================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 20px; font-weight: 700; font-size: 12.5px;
  border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(14,157,87,.18); }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(196,138,18,.2); }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(219,59,59,.2); }
.pill.muted { background: var(--muted-bg); color: var(--muted); border-color: rgba(122,135,131,.18); }
.pill.info { background: var(--info-bg); color: var(--info); border-color: rgba(47,119,196,.2); }
.badge {
  font-size: 10.5px; background: var(--warn-bg); color: var(--amarelo-escuro); padding: 1px 8px; border-radius: 10px;
  margin-left: 6px; vertical-align: middle; font-weight: 700; border: 1px solid rgba(185,137,0,.22);
}

/* ===================== AÇÕES ===================== */
.acoes { display: flex; gap: 4px; flex-wrap: nowrap; }
.acao-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); background: #fff; color: var(--cinza); border-radius: 8px; padding: 6px; cursor: pointer;
  line-height: 1; transition: transform .12s ease, background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
}
.acao-btn:hover { background: #f2f2f4; border-color: var(--verde-vivo); color: var(--verde-vivo); transform: translateY(-2px); box-shadow: var(--sombra-sm); }
.acao-btn:active { transform: translateY(0); }

/* ===================== ESTADOS =====================
   Vazio/erro: um ícone discreto num círculo neutro, nunca emoji (rebrand
   visual). `.estado-ic` é o mesmo círculo em toda a tela — vazio, erro e
   "em construção" só trocam a cor. */
.estado { text-align: center; padding: 46px 20px; color: var(--cinza); animation: fadeIn .3s; }
.estado-ic {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--superficie-2); color: var(--cinza-claro); margin-bottom: 10px;
}
.estado.erro { color: var(--bad); }
.estado.erro .estado-ic { background: var(--bad-bg); color: var(--bad); }
.estado h3 { font-size: 16px; font-weight: 750; margin-bottom: 4px; color: var(--texto); }
.skeleton-row td { padding: 15px; }
.sk { display: block; height: 13px; border-radius: 7px; background: linear-gradient(90deg, #eef2f0 25%, #e0e6e3 37%, #eef2f0 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--linha); border-top-color: var(--verde-vivo); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 10px; }
.banner-erro { background: var(--bad-bg); color: var(--bad); padding: 11px 15px; border-radius: 11px; font-size: 14px; margin-bottom: 14px; border: 1px solid rgba(219,59,59,.2); animation: fadeInUp .3s; }
/* Restrição de contexto esperada (ex.: código UNIDADE_NAO_SELECIONADA/
   TABELA_NAO_CONFIGURADA) — nunca vermelho, reservado pra erro real. */
.banner-aviso { background: var(--warn-bg); color: var(--warn); padding: 11px 15px; border-radius: 11px; font-size: 14px; margin-bottom: 14px; border: 1px solid rgba(196,138,18,.2); animation: fadeInUp .3s; }
.estado-unidade-obrigatoria #btn-selecionar-unidade { margin-top: 14px; }

/* Banner Canal · Tabela (Dashboard comum + Produtos/CMV) — distinção
   EXPLÍCITA entre "tabela oficial da unidade" e "modo de comparação", não só
   uma mudança sutil de cor: borda tracejada + rótulo textual + a tabela
   oficial sempre visível ao lado, mesmo enquanto comparando outra. */
.banner-tabela { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 15px; border-radius: 11px; margin-bottom: 14px; border: 1px solid var(--linha); }
.banner-tabela-txt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banner-tabela-canal { font-weight: 700; font-size: 14px; }
.banner-tabela-badge { font-size: 11.5px; }
.banner-tabela-oficial { font-size: 12.5px; color: var(--cinza); }
.banner-tabela--oficial { background: var(--ok-bg); border-color: rgba(14,157,87,.18); }
.banner-tabela--comparacao { background: var(--warn-bg); border: 1px dashed var(--warn); }

/* ===================== INTEGRAÇÕES ===================== */
.integra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 15px; }
.integra-card {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 19px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 11px;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); animation: fadeInUp .4s ease both;
}
.integra-card:hover { transform: translateY(-5px); box-shadow: var(--sombra-lg); border-color: #dcdde2; }
.integra-head { display: flex; align-items: center; gap: 13px; }
.integra-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--verde-vivo);
  background: linear-gradient(135deg, #f6f2f2, #eeeced); box-shadow: inset 0 0 0 1px rgba(216,19,36,.1);
  overflow: hidden; flex-shrink: 0;
}
.integra-icon:has(img) { background: #fff; padding: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.integra-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.integra-nome { font-weight: 750; font-size: 16px; margin-bottom: 4px; }
.integra-desc { font-size: 13.5px; color: var(--cinza); }
.integra-features { font-size: 13px; color: var(--cinza); padding-left: 4px; display: flex; flex-direction: column; gap: 4px; list-style: none; }
.integra-features li { display: flex; gap: 7px; }
.integra-features li::before { content: "→"; color: var(--verde-vivo); font-weight: 700; }

/* ===================== CARDÁPIO AO VIVO (aba iFood) ===================== */
.cardapio-wrap { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; margin-top: 16px; animation: fadeInUp .4s ease both; }
.cardapio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cardapio-head h3 { font-size: 17px; font-weight: 750; }
.cardapio-head p { font-size: 13px; color: var(--cinza); margin-top: 2px; max-width: 460px; }
.cardapio-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 14px 0 18px; border-radius: var(--raio); background: linear-gradient(135deg, #2a0609, #1a0407); color: #fff; }
.cardapio-logo { width: 44px; height: 44px; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; flex-shrink: 0; }
.cardapio-banner-nome { font-size: 17px; font-weight: 800; }
.cardapio-banner-sub { font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 1px; }
.cardapio-secao { margin-bottom: 20px; }
.cardapio-cat { font-size: 13px; font-weight: 700; color: var(--verde-med); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 11px; padding-bottom: 7px; border-bottom: 2px solid var(--linha); }
.cardapio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cardapio-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cardapio-item:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: #dcdde2; }
.cardapio-item-nome { font-weight: 650; font-size: 14.5px; }
.cardapio-item-tam { font-size: 12px; color: var(--cinza); margin-top: 2px; }
.cardapio-item-preco { font-weight: 800; color: var(--verde); font-size: 15px; white-space: nowrap; }

/* ===================== JANELA LOJA iFOOD ===================== */
.ifood-win { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); background: var(--card); margin-top: 16px; animation: fadeInUp .4s ease both; }
.ifood-win-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.ifood-badge { background: #EA1D2C; color: #fff; font-weight: 800; font-size: 13px; padding: 5px 11px; border-radius: 8px; }
.ifood-store { flex: 1; min-width: 160px; }
.ifood-store-nome { font-weight: 700; font-size: 15px; }
.ifood-store-meta { font-size: 12.5px; color: var(--cinza); margin-top: 1px; }
.ifood-btn { background: #EA1D2C; color: #fff; border: none; box-shadow: 0 8px 20px rgba(234,29,44,.28); text-decoration: none; }
.ifood-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.ifood-cfg { font-size: 12.5px; color: var(--cinza-claro); }
.ifood-frame { position: relative; }
.ifood-frame iframe { width: 100%; height: 620px; border: none; display: block; background: #f7faf8; }
.ifood-frame-nota { font-size: 12px; color: var(--cinza); padding: 10px 16px; background: #fbfaf5; border-top: 1px solid var(--linha); margin: 0; }
.ifood-vazio { text-align: center; padding: 36px 20px; color: var(--cinza); }
.ifood-vazio .emoji { font-size: 34px; display: block; margin-bottom: 8px; }
.ifood-vazio code { background: #eef1f0; padding: 2px 6px; border-radius: 5px; font-size: 12px; }

/* ===================== EM CONSTRUÇÃO ===================== */
.construcao {
  background: linear-gradient(180deg, #fbfbfc, #fff); border: 1.5px dashed #d8d9de; border-radius: var(--raio); padding: 46px;
  text-align: center; animation: fadeInUp .35s ease both;
}
.construcao .estado-ic { width: 64px; height: 64px; margin: 0 auto 14px; }
.construcao h2 { margin: 12px 0 6px; letter-spacing: -.3px; font-weight: 750; }
.construcao p { color: var(--cinza); max-width: 500px; margin: 0 auto 16px; }
.construcao .planejado { display: inline-flex; flex-direction: column; gap: 7px; text-align: left; color: var(--cinza); font-size: 14px; }

/* ===================== TOAST ===================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(24px);
  background: var(--verde-950); color: #fff; padding: 13px 22px; border-radius: 12px; font-size: 14px; font-weight: 500;
  box-shadow: 0 16px 40px rgba(6,40,25,.4), inset 0 1px 0 rgba(255,255,255,.1); z-index: 100; max-width: 90vw;
  opacity: 0; transition: opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1); border: 1px solid rgba(255,255,255,.08);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.rodape { text-align: center; color: var(--cinza-claro); font-size: 13px; margin-top: 22px; }

/* ===================== NOME CLICÁVEL ===================== */
.prod-link {
  background: none; border: none; padding: 0; font: inherit; font-weight: 650; color: var(--verde-med);
  cursor: pointer; text-align: left; transition: color var(--t);
}
.prod-link:hover { color: var(--verde); text-decoration: underline; }

/* ===================== MODAL ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6,40,25,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 90; overflow-y: auto; animation: fadeIn .2s;
}
.modal {
  position: relative; background: var(--card); border-radius: var(--raio-lg); width: 100%; max-width: 640px;
  box-shadow: var(--sombra-lg); padding: 26px; animation: fadeInUp .3s cubic-bezier(.2,.8,.2,1) both;
}
.modal-close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #f2f2f4; color: var(--cinza); font-size: 22px; line-height: 1; cursor: pointer;
  transition: background var(--t), transform var(--t), color var(--t);
}
.modal-close:hover { background: var(--bad-bg); color: var(--bad); transform: rotate(90deg); }
.modal-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-right: 44px; }
.modal-head h2 { font-size: 22px; letter-spacing: -.4px; }
.modal-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-custo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--grad-verde); color: #fff;
  padding: 12px 18px; border-radius: var(--raio); margin-bottom: 8px; box-shadow: var(--glow-verde);
}
.modal-custo span { font-size: 12px; opacity: .9; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.modal-custo strong { font-size: 24px; font-weight: 800; }
.modal-sec-titulo { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.grid-modal { min-width: 0; font-size: 13.5px; }
.grid-modal th, .grid-modal td { padding: 9px 12px; }
@media (max-width: 620px) {
  .modal-overlay { padding: 12px; }
  .modal { padding: 20px; }
  .modal-head h2 { font-size: 19px; }
}

/* ===================== SIMULADOR DE PREÇO ===================== */
.sim-topo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.sim-info { background: #f6f6f8; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sim-info span { font-size: 11px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.sim-info strong { font-size: 17px; font-weight: 800; }
.sim-info select { padding: 6px 8px; border: 1.5px solid var(--linha); border-radius: 8px; font-size: 14px; background: #fff; cursor: pointer; }

.sim-preco-box { background: linear-gradient(135deg, #f0f7f3, #fff); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 16px; }
.sim-preco-box > label { display: block; font-size: 13px; color: var(--cinza); font-weight: 600; margin-bottom: 10px; }
.sim-preco-box > label strong { color: var(--verde-med); font-size: 20px; margin-left: 6px; }
.sim-preco-num { margin-top: 10px; font-weight: 700; color: var(--cinza); }
.sim-preco-num input { width: 110px; font-size: 16px; font-weight: 700; padding: 8px 10px; border: 1.5px solid var(--linha); border-radius: 9px; margin-left: 4px; }
.sim-preco-num input:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }

/* slider estilizado */
#sim-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--verde-vivo), var(--amarelo)); cursor: pointer; }
#sim-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--verde); box-shadow: var(--sombra-md); cursor: pointer; transition: transform var(--t); }
#sim-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
#sim-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--verde); cursor: pointer; }

.sim-resultados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sim-card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 12px; text-align: center; transition: border-color var(--t), transform var(--t); }
.sim-card span { display: block; font-size: 11px; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; margin-bottom: 6px; }
.sim-card b { font-size: 18px; font-weight: 800; }
.sim-card b.neg { color: var(--cinza); }
.sim-card.bom { border-color: rgba(14,157,87,.4); background: linear-gradient(180deg, #f2fbf6, #fff); }
.sim-card.bom b { color: var(--ok); }
.sim-card.ruim { border-color: rgba(219,59,59,.4); background: linear-gradient(180deg, #fef4f4, #fff); }
.sim-card.ruim b { color: var(--bad); }

.sim-ref { margin-top: 16px; padding: 12px 14px; background: #fbfaf5; border: 1px dashed var(--amarelo); border-radius: var(--raio-sm); font-size: 13.5px; color: var(--cinza); }
.sim-ref .sim-ref-t { font-weight: 700; color: var(--texto); }
.sim-ref b { color: var(--amarelo-escuro); }

@media (max-width: 620px) {
  .sim-topo { grid-template-columns: 1fr; }
  .sim-resultados { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== EDITAR PRODUTO ===================== */
.ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.ed-campo { display: flex; flex-direction: column; gap: 6px; }
.ed-campo > span { font-size: 12px; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .4px; }
.ed-campo input[type="text"], .ed-campo select { padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; font-size: 15px; background: #fff; }
.ed-campo input[type="text"]:focus, .ed-campo select:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.ed-check { flex-direction: row; align-items: center; gap: 9px; grid-column: 1 / -1; cursor: pointer; }
.ed-check input { width: 18px; height: 18px; accent-color: var(--verde); cursor: pointer; }
.ed-check > span { font-size: 14px; font-weight: 600; color: var(--texto); text-transform: none; letter-spacing: 0; }
.ed-hint { font-size: 11px; color: var(--cinza-claro); font-weight: 500; text-transform: none; letter-spacing: 0; }
.ed-preco { width: 92px; padding: 7px 9px; border: 1.5px solid var(--linha); border-radius: 8px; font-size: 14px; text-align: right; }
.ed-preco:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.modal-sec-titulo small { font-weight: 500; color: var(--cinza); font-size: 12px; }
.ed-erro { background: var(--bad-bg); color: var(--bad); padding: 9px 12px; border-radius: 9px; font-size: 13px; margin-top: 12px; }
.ed-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 620px) { .ed-grid { grid-template-columns: 1fr; } }

/* ===================== HISTÓRICO DO PRODUTO (auditoria) ===================== */
.hist-resumo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, #f2fbf6, #fff); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 16px;
}
.hist-resumo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-vivo); box-shadow: 0 0 0 4px rgba(216,19,36,.16); flex-shrink: 0; }
.hist-resumo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-resumo b { font-size: 14px; font-weight: 700; color: var(--texto); }
.hist-resumo small { font-size: 12px; color: var(--cinza); }
.hist-total { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--verde-med); background: var(--ok-bg); padding: 5px 10px; border-radius: 999px; }

.hist-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.hist-timeline::before { content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px; background: var(--linha); }
.hist-evento { position: relative; display: flex; gap: 14px; padding: 0 0 20px; }
.hist-evento:last-child { padding-bottom: 2px; }
.hist-avatar {
  position: relative; z-index: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--grad-verde); box-shadow: 0 0 0 4px var(--card), var(--sombra-sm);
}
.hist-corpo { flex: 1; min-width: 0; padding-top: 1px; }
.hist-cabecalho { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hist-cabecalho b { font-size: 14px; font-weight: 700; color: var(--texto); }
.hist-quando { font-size: 12px; color: var(--cinza); font-weight: 600; }
.hist-data { font-size: 11.5px; color: var(--cinza-claro); margin-top: 1px; }
.hist-mudancas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist-mudanca {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f6f6f8; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 7px 11px; font-size: 13px;
}
.hist-campo { font-weight: 700; color: var(--texto); margin-right: 2px; }
.hist-de { color: var(--cinza); text-decoration: line-through; text-decoration-color: var(--cinza-claro); }
.hist-seta { color: var(--cinza-claro); font-weight: 700; }
.hist-para { color: var(--verde-med); font-weight: 700; }
.estado code { background: var(--muted-bg); padding: 2px 7px; border-radius: 6px; font-size: .92em; color: var(--texto); }

/* ===================== RESPONSIVO ===================== */
@media (max-width: 900px) {
  .icon-btn { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform var(--t-lenta); box-shadow: 8px 0 40px rgba(6,40,25,.35); }
  .app.menu-aberto .sidebar { transform: translateX(0); }
  .app.menu-aberto .backdrop { display: block; }
  .page-title { font-size: 17px; }
  .content { padding: 16px; }
  .cards { gap: 12px; }
}
@media (max-width: 620px) {
  .topbar { gap: 8px; padding: 10px 14px; }
  .global-filtros { order: 3; width: 100%; }
  .global-filtros select { flex: 1; }
  .user-nome, .chip-unidade { display: none; }
  .card-valor { font-size: 24px; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .toolbar { gap: 8px; }
  .busca { min-width: 100%; }
}

/* ===================== SIDEBAR SEÇÕES ===================== */
.menu-secao {
  padding: 15px 16px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  color: rgba(255,255,255,.36); text-transform: uppercase; cursor: default; pointer-events: none;
}
.menu ul > .menu-secao:first-child { padding-top: 4px; }
.m-label { flex: 1; }

/* ===================== TOPBAR VIVA ===================== */
.relogio { font-size: 13.5px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.sync-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cinza); white-space: nowrap; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-claro); box-shadow: 0 0 0 3px rgba(154,165,160,.18); }
.sync-status[data-estado="ok"] .sync-dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(14,157,87,.2); }
.sync-status[data-estado="erro"] .sync-dot { background: var(--bad); box-shadow: 0 0 0 3px rgba(219,59,59,.2); }
.sync-status[data-estado="sync"] .sync-dot { background: var(--amarelo); animation: pulseDot 1s ease-in-out infinite; }
.sync-status[data-estado="aviso"] .sync-dot { background: var(--amarelo); box-shadow: 0 0 0 3px rgba(230,168,23,.2); }

.icon-btn2 {
  position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px;
  background: #fff; border: 1px solid var(--linha); color: var(--cinza); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.icon-btn2 svg { width: 18px; height: 18px; }
.icon-btn2:hover { background: #f2f2f4; color: var(--verde); border-color: #dcdde2; }
.icon-btn2.girando svg { animation: spin .8s linear infinite; }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff;
}

/* ===================== SEÇÕES / PAINÉIS / ALERTAS ===================== */
.secao-titulo small { font-weight: 500; color: var(--cinza); font-size: 12px; }
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 22px; }
.painel { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; animation: fadeInUp .4s ease both; }
.painel-head { padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.painel-head h4 { font-size: 14px; font-weight: 700; }
.alerta-lista { list-style: none; }
.alerta-item { display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.alerta-item:last-child { border-bottom: none; }
.alerta-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.alerta-dot.ok { background: var(--ok); }
.alerta-dot.warn { background: var(--warn); }
.alerta-dot.bad { background: var(--bad); }
.alerta-dot.muted { background: var(--cinza-claro); }
.alerta-label { flex: 1; font-size: 14px; display: flex; flex-direction: column; }
.alerta-label small { font-size: 11.5px; color: var(--cinza-claro); }
.alerta-valor { margin-left: auto; }
.ultimas { padding: 8px 10px 10px; }
.ultima-item { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 7px 0; color: var(--texto); }
.ultima-item b { margin-left: auto; font-variant-numeric: tabular-nums; }
.estado-mini { margin: 6px; font-size: 12.5px; color: var(--cinza); background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 10px; padding: 11px 13px; line-height: 1.5; }
.estado-mini code { background: var(--muted-bg); padding: 1px 6px; border-radius: 5px; font-size: .92em; color: var(--texto); }

/* Painel "Últimas alterações" alimentado pelo histórico de auditoria */
.ultimas-lista { display: flex; flex-direction: column; }
.ultima-mudanca {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 8px; border-radius: 9px; cursor: pointer;
  font: inherit; color: var(--texto); transition: background var(--t);
}
.ultima-mudanca:hover { background: #f4faf6; }
.ultima-mudanca .alerta-dot { margin-top: 6px; }
.um-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.um-topo { display: flex; align-items: baseline; gap: 8px; }
.um-produto { font-size: 13.5px; font-weight: 700; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-quando { margin-left: auto; font-size: 11.5px; color: var(--cinza-claro); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.um-detalhe { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.um-detalhe s { color: var(--cinza-claro); }
.um-detalhe b { color: var(--verde-med); font-weight: 700; }
.um-campo { font-weight: 700; color: var(--texto); }
.um-mais { font-size: 11px; font-weight: 700; color: var(--verde-med); background: var(--ok-bg); border-radius: 999px; padding: 1px 7px; margin-left: 2px; }
.um-autor { font-size: 11.5px; color: var(--cinza-claro); }
.ultimas-rodape { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 8px 2px; border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--cinza); }
.ultimas-rodape b { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.ultima-skel { height: 48px; border-radius: 9px; margin: 6px 8px; background: linear-gradient(90deg, #f2f2f4 25%, #f6f6f8 37%, #f2f2f4 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }

/* ===================== GRÁFICOS ===================== */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.chart-box { display: flex; flex-direction: column; }
.chart-wrap { position: relative; height: 240px; padding: 14px; }

@media (max-width: 860px) {
  .dash-2col, .charts-grid { grid-template-columns: 1fr; }
  .relogio, .sync-status { display: none; }
}

/* ===================== CONFIGURAÇÕES ===================== */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cfg-card {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px;
  cursor: pointer; box-shadow: var(--sombra-sm); font: inherit; color: var(--texto);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t); animation: fadeInUp .35s ease both;
}
.cfg-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); border-color: #dcdde2; }
.cfg-card-ico {
  width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, rgba(216,19,36,.14), rgba(216,19,36,.05)); border: 1px solid var(--linha); border-radius: 12px;
}
.cfg-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cfg-card-titulo { font-size: 15px; font-weight: 700; }
.cfg-card-desc { font-size: 12.5px; color: var(--cinza); line-height: 1.4; }
.cfg-card-seta { color: var(--cinza-claro); font-size: 18px; transition: transform var(--t), color var(--t); }
.cfg-card:hover .cfg-card-seta { transform: translateX(3px); color: var(--verde-med); }

.cfg-detalhe-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.cfg-detalhe-titulo { font-size: 20px; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
.cfg-detalhe { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cfg-panel { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-sm); overflow: hidden; animation: fadeInUp .3s ease both; }
.cfg-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.cfg-panel-head h3 { font-size: 15px; font-weight: 700; }
.cfg-panel-head p { font-size: 12.5px; color: var(--cinza); margin-top: 3px; }
.cfg-panel-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }

.cfg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-campo { display: flex; flex-direction: column; gap: 6px; }
.cfg-campo > span { font-size: 12px; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .3px; }
.cfg-campo input, .cfg-campo select {
  padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; background: var(--campo-bg); color: var(--texto);
  font-size: 14px; font-family: inherit; transition: border-color var(--t), box-shadow var(--t);
}
.cfg-campo input:focus, .cfg-campo select:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }

.cfg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.cfg-toggle-txt { display: flex; flex-direction: column; gap: 2px; }
.cfg-toggle-txt b { font-size: 14px; font-weight: 600; }
.cfg-toggle-txt small { font-size: 12px; color: var(--cinza); }
.cfg-switch { position: relative; flex-shrink: 0; width: 44px; height: 25px; display: inline-block; }
.cfg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cfg-switch i { position: absolute; inset: 0; background: var(--cinza-claro); border-radius: 999px; transition: background var(--t); }
.cfg-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; transition: transform var(--t); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cfg-switch input:checked + i { background: var(--verde); }
.cfg-switch input:checked + i::after { transform: translateX(19px); }
.cfg-switch--mini { width: 38px; height: 21px; }
.cfg-switch--mini i::after { width: 15px; height: 15px; }
.cfg-switch--mini input:checked + i::after { transform: translateX(17px); }

.cfg-acoes { display: flex; justify-content: flex-end; padding-top: 2px; }
.cfg-acoes--start { justify-content: flex-start; }

.cfg-sub { margin-bottom: 10px; }
.cfg-sub b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); display: block; margin-bottom: 6px; }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); color: var(--texto); }
.cfg-meta { font-size: 12.5px; color: var(--cinza); }
.cfg-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cinza); }

.cfg-users { display: flex; flex-direction: column; gap: 8px; }
.cfg-user { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--linha); border-radius: 12px; }
.cfg-user-av { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-verde); }
.cfg-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cfg-user-info b { font-size: 13.5px; }
.cfg-user-info small { font-size: 11.5px; color: var(--cinza-claro); }
.cfg-user-perfil { padding: 7px 10px; border: 1.5px solid var(--linha); border-radius: 9px; background: var(--campo-bg); color: var(--texto); font-size: 13px; }
.cfg-user-del { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--linha); background: var(--card); border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1; transition: background var(--t), border-color var(--t); }
.cfg-user-del:hover { background: var(--bad-bg); border-color: var(--bad); }
.cfg-user-del--off { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; opacity: .45; cursor: help; font-size: 13px; }
.cfg-user-perfil-ro { font-size: 12px; color: var(--cinza); max-width: 180px; text-align: right; line-height: 1.35; }
.cfg-tabela-explicacao { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.cfg-tabela-linha .cfg-user-info { flex-basis: 90px; }
.cfg-campo-fixo { font-size: 14px; font-weight: 600; padding: 9px 0; }
.cfg-aviso-alteracao { font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(196,138,18,.2); border-radius: 10px; padding: 10px 12px; }

.cfg-senha-wrap { display: flex; gap: 8px; align-items: stretch; }
.cfg-senha-wrap input { flex: 1; min-width: 0; }
.cfg-senha-wrap .btn { flex-shrink: 0; }

.cfg-notif { display: flex; flex-direction: column; gap: 4px; }
.cfg-notif-head, .cfg-notif-row { display: grid; grid-template-columns: 1fr repeat(3, 62px); align-items: center; gap: 6px; }
.cfg-notif-head { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza); font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.cfg-notif-head span { text-align: center; }
.cfg-notif-row { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.cfg-notif-row:last-child { border-bottom: none; }
.cfg-notif-lbl { font-size: 13.5px; font-weight: 600; }
.cfg-notif-row .cfg-switch { margin: 0 auto; }

.cfg-tema-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-tema-op { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 16px; background: var(--campo-bg); border: 2px solid var(--linha); border-radius: 14px; cursor: pointer; font: inherit; color: var(--texto); transition: border-color var(--t), transform var(--t); }
.cfg-tema-op:hover { transform: translateY(-2px); }
.cfg-tema-op.ativo { border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.cfg-tema-op b { font-size: 14px; }
.cfg-tema-prev { width: 100%; height: 60px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--linha); }
.cfg-tema-prev i { border-radius: 3px; height: 8px; background: #cdd6d2; }
.cfg-tema-prev--light { background: #eef2f0; }
.cfg-tema-prev--light i:first-child { background: var(--verde); width: 50%; }
.cfg-tema-prev--dark { background: #0d1411; }
.cfg-tema-prev--dark i { background: #2a3a34; }
.cfg-tema-prev--dark i:first-child { background: var(--verde-vivo); width: 50%; }

.cfg-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-file { cursor: pointer; }
.cfg-btn-perigo { color: var(--bad); border-color: rgba(219,59,59,.3); }
.cfg-btn-perigo:hover { background: var(--bad-bg); border-color: var(--bad); }

@media (max-width: 620px) {
  .cfg-form-grid, .cfg-tema-grid { grid-template-columns: 1fr; }
  .cfg-notif-head, .cfg-notif-row { grid-template-columns: 1fr repeat(3, 46px); }
}

/* Assinatura do desenvolvedor na sidebar (atlaz.company) */
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-atlaz { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.34); text-decoration: none; letter-spacing: .2px; transition: color var(--t); }
.sidebar-atlaz:hover { color: rgba(255,255,255,.6); }
.sidebar-atlaz b { font-weight: 700; color: rgba(255,255,255,.5); }
.sidebar-atlaz-mark { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 9.5px; color: rgba(255,190,197,.6); }

/* ===================== VENDAS ===================== */
/* cabeçalho da página: título/contexto + ação principal */
.vd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.vd-head-txt h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.vd-head-txt p { font-size: 13px; color: var(--cinza); max-width: 640px; margin-top: 2px; }
.vd-import-btn { flex-shrink: 0; }

/* navegação segmentada */
.vd-nav { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 5px; box-shadow: var(--sombra-sm); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.vd-nav::-webkit-scrollbar { display: none; }
.vd-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--cinza); padding: 8px 13px; border-radius: 9px; cursor: pointer; white-space: nowrap; transition: background var(--t), color var(--t), box-shadow var(--t); }
.vd-tab:hover { background: var(--superficie-2); color: var(--texto); }
.vd-tab.ativo { background: var(--grad-verde); color: #fff; box-shadow: var(--glow-verde); }
.vd-tab-badge { font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 20px; background: var(--muted-bg); color: var(--cinza); }
.vd-tab.ativo .vd-tab-badge { background: rgba(255,255,255,.24); color: #fff; }

/* filtros */
.vd-filtros { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 16px; margin-bottom: 16px; box-shadow: var(--sombra-sm); }
.vd-f-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; color: var(--cinza); margin-bottom: 6px; }
.vd-f-bloco { display: flex; flex-direction: column; }
.vd-f-bloco .vd-f-lbl { margin-bottom: 6px; }
.vd-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.vd-chip { border: 1.5px solid var(--linha); background: var(--campo-bg); color: var(--cinza); font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.vd-chip:hover { border-color: var(--verde); color: var(--texto); }
.vd-chip.ativo { background: var(--grad-verde); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(216,19,36,.25); }
.vd-f-datas { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }
.vd-f-campo { display: flex; flex-direction: column; }
.vd-filtros input, .vd-filtros select { padding: 8px 10px; border: 1.5px solid var(--linha); border-radius: 9px; background: var(--campo-bg); color: var(--texto); font-size: 13px; height: 36px; }
.vd-filtros .vd-ate { color: var(--cinza-claro); font-size: 12px; }
.vd-f-acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-bottom: 2px; }
.vd-f-ativos { font-size: 12px; font-weight: 700; color: var(--verde); background: var(--ok-bg); padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.vd-conteudo { animation: fadeIn .25s ease; }

/* resumo do período */
.vd-resumo { display: flex; align-items: flex-start; gap: 10px; background: var(--superficie-2); border: 1px solid var(--linha); border-left: 4px solid var(--verde); border-radius: var(--raio-sm); padding: 11px 15px; margin-bottom: 15px; }
.vd-resumo-ico { font-size: 16px; line-height: 1.4; }
.vd-resumo p { font-size: 13px; color: var(--cinza); }
.vd-resumo b { color: var(--texto); }

/* cards principais */
.vd-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }
.vd-card { position: relative; background: var(--card); border: 1px solid var(--linha); border-top: 3px solid var(--verde); border-radius: var(--raio); padding: 14px 15px; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; gap: 5px; min-height: 104px; animation: fadeInUp .3s ease both; transition: transform var(--t), box-shadow var(--t); }
.vd-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.vd-card-topo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vd-card-ico { font-size: 14px; }
.vd-card-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-card-val { font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--texto); }
.vd-card-sub { font-size: 11.5px; color: var(--cinza-claro); }
.vd-card.destaque { background: var(--grad-verde); border-color: transparent; box-shadow: var(--glow-verde); }
.vd-card.destaque .vd-card-lbl, .vd-card.destaque .vd-card-sub { color: rgba(255,255,255,.85); }
.vd-card.destaque .vd-card-val { color: #fff; }
.vd-card.destaque .vd-tip { background: rgba(255,255,255,.25); color: #fff; }
.vd-card.aguarda { border-top-color: var(--warn); }
.vd-card.ruim .vd-card-val { color: var(--bad); }
.vd-nocalc { font-size: 15px; font-weight: 700; color: var(--cinza); }

/* tooltip de informação — o ícone "i" fica no card normalmente; o balão em
   si é um portal fora do card (ver tooltip.js) pra nunca ser cortado por
   overflow/stacking context de nenhum container. */
.vd-tip { flex-shrink: 0; margin-left: auto; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--muted-bg); color: var(--cinza); font-size: 10px; font-weight: 800; font-style: normal; cursor: help; position: relative; }

/* Balão flutuante (portal — anexado direto no <body> por tooltip.js).
   `position: fixed` com coordenadas calculadas em JS a cada exibição. */
.vd-tip-flutuante {
  position: fixed; z-index: 1000; width: max-content; max-width: 230px;
  background: var(--verde-950); color: #eef7f1; font-size: 11.5px; font-weight: 500;
  line-height: 1.45; padding: 8px 11px; border-radius: 9px; box-shadow: var(--sombra-md);
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity var(--t), transform var(--t);
}
.vd-tip-flutuante:not([hidden]) { opacity: 1; transform: none; }
.vd-tip-flutuante::before {
  content: ""; position: absolute; left: var(--vd-tip-seta-x, 16px); width: 8px; height: 8px;
  background: var(--verde-950); transform: translateX(-50%) rotate(45deg);
}
.vd-tip-flutuante[data-seta="baixo"]::before { bottom: -4px; }
.vd-tip-flutuante[data-seta="cima"]::before { top: -4px; }

/* cards de status (linha secundária) */
.vd-cards-sub { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; margin-top: 13px; }
.vd-scard { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 11px 13px; box-shadow: var(--sombra-sm); animation: fadeInUp .3s ease both; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.vd-scard-ico { font-size: 17px; flex-shrink: 0; }
.vd-scard-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vd-scard-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-scard-val { font-size: 15.5px; font-weight: 800; letter-spacing: -.3px; color: var(--texto); }
.vd-scard.compacto .vd-scard-val { font-size: 13px; }
.vd-scard-txt small { font-size: 10.5px; color: var(--cinza-claro); }
.vd-scard.alerta { border-color: rgba(219,59,59,.35); background: var(--bad-bg); }
.vd-scard.alerta .vd-scard-val, .vd-scard.alerta small { color: var(--bad); }
.vd-scard.pendente { border-color: rgba(196,138,18,.35); }
.vd-scard.pendente .vd-scard-val { color: var(--warn); }
.vd-scard.ok small { color: var(--ok); }
.vd-scard.clicavel { cursor: pointer; }
.vd-scard.clicavel:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: var(--verde); }

/* painéis analíticos */
.vd-paineis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 15px; }
.vd-painel { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 15px 17px; box-shadow: var(--sombra-sm); animation: fadeInUp .35s ease both; }
.vd-painel.largo { grid-column: 1 / -1; }
.vd-painel h3 { font-size: 13px; font-weight: 750; letter-spacing: -.1px; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.vd-painel-vazio { font-size: 12.5px; color: var(--cinza-claro); background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 10px; padding: 18px 14px; text-align: center; }

/* gráfico de barras (faturamento por dia) */
.vd-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 6px; }
.vd-chart.denso { gap: 3px; }
.vd-chart-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; cursor: default; }
.vd-chart-bar { width: 100%; max-width: 42px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--verde-vivo), var(--verde-med)); box-shadow: 0 3px 8px rgba(216,19,36,.22); transition: filter var(--t), transform var(--t); }
.vd-chart-col:hover .vd-chart-bar { filter: brightness(1.08); transform: scaleY(1.02); transform-origin: bottom; }
.vd-chart-lbl { font-size: 10px; color: var(--cinza-claro); font-weight: 600; height: 13px; white-space: nowrap; }

/* barras horizontais (canal / top produtos / grupos) */
.vd-hlista { display: flex; flex-direction: column; gap: 10px; }
.vd-hrow { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; align-items: center; gap: 10px; }
.vd-hlbl { font-size: 12.5px; font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-hbar { height: 9px; background: var(--superficie-2); border-radius: 9px; overflow: hidden; }
.vd-hbar > div { height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--verde-vivo), var(--verde-med)); transition: width .4s ease; }
.vd-hval { font-size: 12.5px; font-weight: 750; color: var(--texto); white-space: nowrap; }
.vd-hval small { font-size: 11px; font-weight: 600; color: var(--cinza-claro); }

/* pendências */
.vd-pends { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vd-pend { display: flex; align-items: center; gap: 11px; background: var(--superficie-2); border: 1px solid var(--linha); border-left: 4px solid var(--cinza-claro); border-radius: var(--raio-sm); padding: 10px 13px; }
.vd-pend.warn { border-left-color: var(--warn); }
.vd-pend.bad { border-left-color: var(--bad); }
.vd-pend.info { border-left-color: var(--info); }
.vd-pend-ico { font-size: 16px; }
.vd-pend-txt { flex: 1; font-size: 13px; color: var(--cinza); }
.vd-pend-txt b { color: var(--texto); }
.vd-pend-ok { font-size: 13px; color: var(--ok); font-weight: 650; background: var(--ok-bg); border-radius: var(--raio-sm); padding: 13px 15px; }

.vd-grid { min-width: 760px; }
.vd-grid tfoot td { border-top: 2px solid var(--linha); background: var(--superficie-2); }
.vd-neg { color: var(--bad); font-weight: 700; }
.vd-prod-toolbar { margin-bottom: 14px; }
.vd-arq { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--cinza); }

.vd-imp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.vd-imp-head p { font-size: 13px; color: var(--cinza); }

.vd-divs { display: flex; flex-direction: column; gap: 10px; }
.vd-div { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 13px 16px; box-shadow: var(--sombra-sm); border-left: 4px solid var(--cinza-claro); }
.vd-div.critico { border-left-color: var(--bad); }
.vd-div.atencao { border-left-color: var(--warn); }
.vd-div.info { border-left-color: var(--info); }
.vd-div.resolvida { opacity: .55; border-left-color: var(--cinza-claro); }
.vd-div-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vd-div-txt b { font-size: 14px; }
.vd-div-txt small { font-size: 12.5px; color: var(--cinza); }
.vd-div-data { font-size: 11.5px; color: var(--cinza-claro); white-space: nowrap; }

/* modal de importação */
.vd-modal { max-width: 680px; }
.vd-imp-form { display: flex; flex-direction: column; gap: 14px; }
.vd-file { display: flex; flex-direction: column; gap: 6px; background: var(--superficie-2); border: 1.5px dashed var(--linha); border-radius: 12px; padding: 13px 15px; }
.vd-file > span { font-size: 13px; font-weight: 600; color: var(--texto); }
.vd-file > span b { color: var(--bad); }
.vd-file input[type="file"] { font-size: 13px; }
.vd-file em { font-size: 12px; color: var(--cinza-claro); font-style: normal; }
.vd-imp-msg { font-size: 13px; padding: 10px 13px; border-radius: 10px; }
.vd-imp-msg.erro { background: var(--bad-bg); color: var(--bad); border: 1px solid rgba(219,59,59,.25); }
.vd-imp-msg.ok { background: var(--ok-bg); color: var(--ok); }

.vd-preview { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; margin-top: 4px; }
.vd-pv-titulo { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.vd-pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.vd-pv-item { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--linha); border-radius: 9px; padding: 8px 11px; }
.vd-pv-item span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); font-weight: 700; }
.vd-pv-item b { font-size: 16px; font-weight: 800; }
.vd-pv-divs { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.vd-pv-div { font-size: 12.5px; color: var(--texto); }
.vd-pv-div small { color: var(--cinza); }
.vd-pv-ok { margin-top: 12px; font-size: 13px; color: var(--ok); font-weight: 600; }
.vd-vinc-p { font-size: 13px; color: var(--cinza); margin-bottom: 12px; }

/* reconciliação entre os dois relatórios (prévia da importação) */
.vd-rec { margin-top: 12px; background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 11px 13px; }
.vd-rec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--linha); font-size: 12.5px; }
.vd-rec-row:last-child { border-bottom: none; }
.vd-rec-row span { font-weight: 650; }
.vd-rec-row small { color: var(--cinza); text-align: right; }
.vd-rec-row.falha span { color: var(--bad); }

/* vínculo em massa */
.vd-massa-wrap { max-height: 46vh; overflow-y: auto; margin-bottom: 4px; }
.vd-massa { min-width: 0; }
.vd-massa td { vertical-align: middle; white-space: normal; }
.vd-massa .vm-nome { max-width: 200px; }
.vd-massa .vm-nome small { display: block; color: var(--cinza-claro); font-size: 11px; }
.vd-massa select { width: 100%; max-width: 240px; padding: 6px 8px; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--campo-bg); color: var(--texto); font-size: 12.5px; }

/* componentes de combo */
.vd-comp-row { display: grid; grid-template-columns: 1fr 84px 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.vd-comp-row select, .vd-comp-row input { padding: 7px 9px; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--campo-bg); color: var(--texto); font-size: 13px; }
#vinc-combo { background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 10px; padding: 12px 14px; margin: 10px 0 4px; }

.vd-acoes-td { white-space: nowrap; }
.cinza { color: var(--cinza-claro); }

/* skeleton */
.vd-skels { display: flex; flex-direction: column; gap: 12px; }
.vd-skel { height: 54px; border-radius: 12px; background: linear-gradient(90deg, #f2f2f4 25%, #f6f6f8 37%, #f2f2f4 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
[data-theme="dark"] .vd-skel { background: linear-gradient(90deg, #17211d 25%, #1d2a25 37%, #17211d 63%); background-size: 400% 100%; }
.vd-skel-linha { height: 44px; margin-bottom: 15px; }
.vd-skel-card { height: 104px; }
.vd-skel-scard { height: 62px; }
.vd-skel-painel { height: 210px; }

/* responsividade da aba Vendas */
@media (max-width: 1280px) {
  .vd-cards, .vd-cards-sub { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .vd-paineis { grid-template-columns: 1fr; }
  .vd-f-acoes { margin-left: 0; }
}
@media (max-width: 620px) {
  .vd-head { flex-direction: column; align-items: stretch; }
  .vd-import-btn { width: 100%; }
  .vd-nav { width: 100%; }
  .vd-cards, .vd-cards-sub { grid-template-columns: repeat(2, 1fr); }
  .vd-card-val { font-size: 18px; }
  .vd-filtros { align-items: stretch; flex-direction: column; gap: 12px; }
  .vd-f-datas { flex-wrap: wrap; }
  .vd-chart { gap: 4px; }
  .vd-hrow { grid-template-columns: minmax(70px, 105px) 1fr auto; }
  .vd-pend { flex-wrap: wrap; }
  .vd-pv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .vd-cards, .vd-cards-sub { grid-template-columns: 1fr; }
}

/* ===================== ABA MARTIN BROWER (mb-) ===================== */
/* min-height (não height fixa): a página acompanha o viewport quando cabe,
   mas cresce e permite scroll normal da tela quando o conteúdo (painel de
   integração + portal) precisar de mais espaço do que uma tela só. */
.mb-page { display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 122px); animation: fadeIn .25s ease; }
.mb-head { margin-bottom: 0; flex-wrap: wrap; }
.mb-head-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.mb-head-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; border: 1px solid var(--linha); box-shadow: var(--sombra-sm); flex-shrink: 0; }
.mb-head .vd-head-txt h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-head .vd-head-txt h2 .pill { font-weight: 650; }
.mb-head-acoes { display: flex; gap: 10px; flex-shrink: 0; }

/* card que abriga o portal — ocupa toda a área útil restante */
.mb-frame-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-md); animation: fadeInUp .3s ease;
}
/* piso próprio e generoso: o portal não fica refém da altura que sobrar do
   painel de integração acima — sempre tem espaço robusto para navegar. */
.mb-corpo { position: relative; flex: 1; min-height: 78vh; }
.mb-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .35s ease; background: #fff; overflow: auto; }
.mb-frame.visivel { opacity: 1; }

/* estado carregando: spinner + skeleton por cima do iframe */
.mb-overlay {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 24px;
  background: var(--superficie-2); animation: fadeIn .2s ease;
}
.mb-overlay p { font-size: 13.5px; color: var(--cinza); font-weight: 600; }
.mb-skels { width: min(720px, 92%); margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.mb-skel-topo { height: 52px; }
.mb-skel-corpo { height: 200px; }

/* estados erro / bloqueado: painel elegante de acesso externo */
.mb-externo {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 32px 22px; background: var(--superficie-2); animation: fadeIn .25s ease;
}
.mb-externo-logo img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; border: 1px solid var(--linha); box-shadow: var(--sombra-md); margin-bottom: 12px; animation: pop .3s ease; }
.mb-externo h3 { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.mb-externo p { font-size: 13.5px; color: var(--cinza); max-width: 520px; line-height: 1.55; margin-bottom: 14px; }
.mb-btn-destaque { font-size: 15px; padding: 12px 26px; margin-bottom: 8px; }

/* aviso discreto sob o portal carregado */
.mb-hint {
  display: none; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-top: 1px solid var(--linha); background: var(--superficie-2);
  font-size: 12px; color: var(--cinza-claro);
}
.mb-hint.visivel { display: flex; }
.mb-hint-btn { border: 0; background: none; color: var(--verde-med); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.mb-hint-btn:hover { text-decoration: underline; }

[data-theme="dark"] .mb-hint-btn { color: #3ce07e; }
[data-theme="dark"] .mb-frame { background: var(--card); }

/* ---- Painel de integração Martin Brower (acima do portal embutido) ---- */
/* Reaproveita os tokens do tema — nenhuma cor nova é introduzida. */
.mb-int-card {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  box-shadow: var(--sombra-sm); padding: 16px 18px; flex-shrink: 0;
}
.mb-int-carregando { color: var(--cinza); font-size: 13.5px; padding: 6px 0; }

.mb-int-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.mb-int-titulo h3 { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mb-int-titulo p { font-size: 12.5px; color: var(--cinza); margin-top: 3px; }
.mb-int-acoes { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.mb-int-acoes .btn:disabled { opacity: .5; cursor: not-allowed; }

.mb-int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.mb-int-info {
  background: var(--campo-bg); border: 1px solid var(--linha); border-radius: 10px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.mb-int-info span { font-size: 11px; color: var(--cinza-claro); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.mb-int-info strong { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mb-int-aviso { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; }
.mb-int-aviso.bad  { background: var(--bad-bg);  color: var(--bad); }
.mb-int-aviso.info { background: var(--info-bg); color: var(--info); }

.mb-int-progresso { margin-top: 12px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--cinza); font-weight: 600; }
.spinner-sm { width: 15px; height: 15px; border-width: 2px; }

.mb-int-abas { display: flex; gap: 4px; margin-top: 15px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.mb-int-aba {
  border: 0; background: none; cursor: pointer; padding: 8px 12px; font-size: 12.5px;
  font-weight: 650; color: var(--cinza); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mb-int-aba:hover { color: var(--texto); }
.mb-int-aba.ativa { color: var(--verde-med); border-bottom-color: var(--verde-med); }

.mb-int-conteudo { padding-top: 13px; }
.mb-int-vazio { font-size: 13px; color: var(--cinza); padding: 14px 2px; }
.mb-int-vazio.bad { color: var(--bad); }
.mb-int-nota { font-size: 12.5px; color: var(--cinza); line-height: 1.6; margin-bottom: 11px; }
.mb-int-nota code { background: var(--campo-bg); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.mb-int-tabela-wrap { overflow-x: auto; max-height: 380px; overflow-y: auto; border: 1px solid var(--linha); border-radius: 10px; }
.mb-int-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mb-int-tabela th {
  position: sticky; top: 0; background: var(--superficie-2); text-align: left;
  padding: 9px 11px; font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--cinza); border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.mb-int-tabela td { padding: 8px 11px; border-bottom: 1px solid var(--linha); }
.mb-int-tabela tbody tr:last-child td { border-bottom: 0; }
.mb-int-tabela tbody tr:hover { background: var(--campo-bg); }
.mb-int-tabela .num { text-align: right; white-space: nowrap; }
.mb-int-tabela .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; }
.mb-int-ignorado td { opacity: .58; }
.mb-int-sem { color: var(--cinza-claro); font-style: italic; }
.mb-int-alta { color: var(--bad); font-weight: 700; }
.mb-int-baixa { color: var(--ok); font-weight: 700; }

.mb-int-textarea {
  width: 100%; border: 1px solid var(--linha); border-radius: 10px; padding: 11px;
  background: var(--campo-bg); color: var(--texto); font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.5; resize: vertical;
}
.mb-int-textarea:focus { outline: 2px solid var(--verde-med); outline-offset: -1px; }
.mb-int-form-acoes { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.mb-int-form-msg { font-size: 12.5px; color: var(--cinza); }
.mb-int-form-msg.bad { color: var(--bad); }
.mb-int-detalhe-tecnico { margin-top: 6px; font-size: 11.5px; opacity: .75; font-family: ui-monospace, Menlo, monospace; word-break: break-word; }

.mb-int-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 9px; margin-top: 14px; }
.mb-int-resumo-item { background: var(--campo-bg); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 11px; }
.mb-int-resumo-item span { display: block; font-size: 10.5px; color: var(--cinza-claro); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.mb-int-resumo-item strong { font-size: 17px; font-weight: 800; }

/* O portal ocupa o espaço restante; o painel nunca o espreme demais. */
.mb-page .mb-frame-card { min-height: 320px; }

@media (max-width: 720px) {
  .mb-page { height: auto; min-height: 0; }
  .mb-head { flex-direction: column; align-items: stretch; }
  .mb-head-acoes { width: 100%; }
  .mb-head-acoes .btn { flex: 1; }
  .mb-corpo { min-height: 62dvh; }
}

/* ===================== TEMA ESCURO (individual, por dispositivo) ===================== */
:root[data-theme="dark"] {
  --bg: #0d1512; --card: #16201c; --texto: #e7efeb; --cinza: #9fb0a9; --cinza-claro: #6e807a; --linha: #26332f;
  --campo-bg: #0f1815; --superficie-2: #1b2621; --topbar-bg: rgba(18,26,23,.86);
  --sombra-sm: 0 1px 2px rgba(0,0,0,.4); --sombra: 0 2px 10px rgba(0,0,0,.4);
  --sombra-md: 0 10px 28px rgba(0,0,0,.45); --sombra-lg: 0 20px 46px rgba(0,0,0,.55);
}
[data-theme="dark"] .app input:not([type="checkbox"]):not([type="file"]),
[data-theme="dark"] .app select,
[data-theme="dark"] .modal input:not([type="checkbox"]):not([type="file"]),
[data-theme="dark"] .modal select {
  background: var(--campo-bg); color: var(--texto); border-color: var(--linha);
}
[data-theme="dark"] .btn, [data-theme="dark"] .btn-ghost { background: var(--card); color: var(--texto); }
[data-theme="dark"] .btn-ghost:hover { background: #1e2925; border-color: #33443e; }
[data-theme="dark"] .cfg-card:hover { border-color: #33443e; }
[data-theme="dark"] .cfg-card-ico { background: linear-gradient(135deg, rgba(244,36,51,.16), rgba(244,36,51,.04)); }
[data-theme="dark"] .grid tbody tr:hover,
[data-theme="dark"] .ultima-mudanca:hover { background: #1b2621; }
[data-theme="dark"] .hist-resumo { background: #14201c; }
[data-theme="dark"] .modal-close { background: #23302b; color: var(--cinza); }
[data-theme="dark"] .prod-link { color: #3ce07e; }

/* ===================== ACESSIBILIDADE ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================================
   LOGIN v3 — Crescer com Delivery (vitrine + formulário)
   Substitui o layout de login anterior: as regras antigas (login-hero,
   hero-mini, login-card, campo...) acima ficaram inertes, nenhum HTML as usa.
   IDs preservados p/ o JS: #login-form #login-user #login-pass #login-erro
   #toggle-senha + classes login-btn / login-btn-txt / login-btn-spin.
   ========================================================================= */
.login-screen { background: #08080a; padding: 0; }
.login-screen::before, .login-screen::after { display: none; }

/* TELA CHEIA: o split ocupa 100% da viewport, sem card/margens. */
.lg-split {
  position: relative; z-index: 1; width: 100%; min-height: 100vh;
  display: grid; grid-template-columns: 1.08fr .92fr;
  border: 0; border-radius: 0; overflow: hidden; box-shadow: none;
  animation: fadeInUp .6s cubic-bezier(.2,.8,.2,1) both;
}
/* assinatura do dev vai p/ a direita no desktop (à esquerda colidiria com o fluxo) */
@media (min-width: 1001px) {
  .dev-credito { left: auto; right: 26px; bottom: 18px; transform: none; }
}

/* ---------- vitrine (esquerda) ---------- */
/* CLEAN: fundo sóbrio, brilho vermelho bem discreto (era um radial forte). */
.lg-vitrine {
  position: relative; overflow: hidden; padding: clamp(34px, 4.5vw, 78px);
  background:
    radial-gradient(680px 460px at 10% 16%, rgba(150,12,26,.16), transparent 64%),
    linear-gradient(150deg, #0e0507 0%, #0b0305 55%, #09090b 100%);
  border-right: 1px solid rgba(255,255,255,.06);
}
/* fio vermelho sutil na borda esquerda (sem o glow forte) */
.lg-vitrine::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #E01020 32%, #E01020 68%, transparent);
  opacity: .55;
}
/* Brilho vermelho MUITO sutil que passeia lentamente pelo fundo (ciclo 14s,
   baixa opacidade). Fica atrás do conteúdo (z-index 0 < .lg-vitrine-int z-index 2)
   e usa só transform/opacity (sem filtros pesados). */
.lg-vitrine::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -15%; left: -12%; width: 75%; height: 75%;
  background: radial-gradient(closest-side, rgba(224,16,32,.20), transparent 70%);
  opacity: .5; will-change: transform, opacity;
  animation: lgGlow 14s ease-in-out infinite;
}
@keyframes lgGlow {
  0%   { transform: translate(-6%, -8%)  scale(1);    opacity: .35; }
  50%  { transform: translate(22%, 26%)  scale(1.14); opacity: .55; }
  100% { transform: translate(-6%, -8%)  scale(1);    opacity: .35; }
}
.lg-vitrine-int {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 2.2vh, 30px);
  /* limita a largura do texto em telas muito largas (linhas longas cansam a leitura) */
  width: 100%; max-width: 780px; margin: 0 auto;
}

/* ---------------------------------------------------------------------
   WORDMARK OFICIAL "Crescer com Delivery" — reproduzida em CSS puro.
   A arte oficial é só tipografia, então texto real é melhor que imagem:
   nítido em qualquer tamanho, ~0 KB, herda cor (funciona em tema claro).
   As duas linhas são alinhadas à DIREITA, como na arte.
   Tamanho controlado por --cd-tam (font-size da linha grande).
   --------------------------------------------------------------------- */
.cd-marca {
  --cd-tam: 30px;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: .96; color: #fff;
  font-weight: 800; letter-spacing: -.022em;
}
.cd-l1, .cd-l2 { display: block; font-size: var(--cd-tam); white-space: nowrap; }
.cd-l1 em { font-style: normal; font-size: .54em; font-weight: 800; margin-left: .22em; letter-spacing: -.01em; }
.cd-l2 { margin-top: .06em; }

.lg-lockup { display: flex; align-items: center; }
.lg-lockup .cd-marca { --cd-tam: clamp(36px, 3.8vw, 56px); }

.lg-titulo { font-size: clamp(25px, 2.5vw, 35px); font-weight: 800; line-height: 1.16; letter-spacing: -.8px; color: #fff; }
.lg-red { color: var(--verde-vivo); }
.lg-desc { font-size: 14.5px; line-height: 1.6; color: #9d9da6; max-width: 48ch; }

/* cards de recursos (2x2) */
.lg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lg-card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 15px; border-radius: 12px;
  background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.07);
  transition: transform .22s cubic-bezier(.4,0,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
/* Hover discreto: sobe 3px, borda mais vermelha, sombra vermelha suave. Sem 3D/rotação. */
.lg-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240,32,47,.5);
  background: rgba(255,255,255,.045);
  box-shadow: 0 8px 22px rgba(224,16,32,.16);
}
.lg-card-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center;
  background: rgba(224,16,32,.10); border: 1px solid rgba(224,16,32,.26); color: var(--verde-vivo);
  transition: box-shadow .22s ease, color .22s ease;
}
.lg-card:hover .lg-card-ic { box-shadow: 0 0 14px rgba(244,36,51,.45); color: #ff5964; }
.lg-card-ic svg { width: 19px; height: 19px; }
.lg-card h3 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.lg-card p { font-size: 12.5px; line-height: 1.45; color: #8e8e98; }

/* fluxo: Crescer -> Empresas -> Unidades -> Resultados */
.lg-fluxo { display: flex; align-items: center; gap: 6px; }
.lg-fx { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; }
.lg-fx-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(224,16,32,.08); border: 1px solid rgba(224,16,32,.22); color: var(--verde-vivo);
}
.lg-fx-ic svg { width: 20px; height: 20px; }
.lg-fx small { font-size: 11px; color: #9a9aa3; text-align: center; line-height: 1.3; }
.lg-fx-seta { flex: 1; min-width: 20px; max-width: 54px; color: rgba(240,32,47,.55); margin-bottom: 18px; position: relative; overflow: hidden; }
.lg-fx-seta svg { width: 100%; height: 8px; }
/* Pequena luz vermelha que percorre cada conexão. Não pisca: aparece, desliza
   uma vez e some; o ciclo de 9s repete a passagem (~a cada 8-10s). As 3 setas
   são escalonadas para dar a sensação de a luz "andar" pelo fluxo. */
.lg-fx-seta::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,36,51,.95), transparent);
  transform: translateX(-26px); opacity: 0; will-change: transform, opacity;
  animation: lgFluxo 9s ease-in-out infinite;
}
.lg-fx-seta:nth-of-type(1)::after { animation-delay: 0s; }
.lg-fx-seta:nth-of-type(2)::after { animation-delay: .5s; }
.lg-fx-seta:nth-of-type(3)::after { animation-delay: 1s; }
@keyframes lgFluxo {
  0%   { transform: translateX(-26px); opacity: 0; }
  6%   { opacity: 1; }
  14%  { opacity: 1; }
  20%  { transform: translateX(64px); opacity: 0; }
  100% { transform: translateX(64px); opacity: 0; }
}

/* ---------- formulário (direita) ---------- */
.lg-form-col { background: #121214; display: flex; align-items: center; justify-content: center; padding: clamp(34px, 3.5vw, 60px); }
.lg-form { width: 100%; max-width: 396px; }
/* Lockup oficial (coroa + C + wordmark + fio vermelho) já vem pronto na arte PNG,
   sobre fundo preto. Exibido GRANDE e SEM moldura/anel: a máscara radial dissolve
   as bordas do quadrado preto no fundo escuro do formulário — fica igual à arte,
   sem "caixinha". contain preserva a proporção (arte 1254x1254, sem corte). */
.lg-app-ic {
  width: 210px; height: 210px; border-radius: 0; display: block; margin: 0 auto 6px;
  background-image: url("/assets/logo-crescercomdeliverylogin.png");
  background-size: contain; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  animation: logoIn .6s cubic-bezier(.2,.8,.2,1) both;
}
.lg-bemvindo { font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.5px; text-align: center; color: #fff; }
.lg-sub { font-size: 13.5px; color: #8e8e98; text-align: center; margin: 8px 0 26px; }

.lg-campo { display: block; margin-bottom: 16px; }
.lg-label { display: block; font-size: 12.5px; font-weight: 600; color: #c9c9d1; margin-bottom: 7px; }
.lg-input { position: relative; display: flex; align-items: center; }
.lg-input-ic { position: absolute; left: 15px; width: 19px; height: 19px; color: #6d6d77; pointer-events: none; transition: color var(--t); }
.lg-input input {
  width: 100%; height: 52px; padding: 0 46px; border-radius: 11px;
  background: #17171b; border: 1px solid rgba(255,255,255,.09); color: #fff;
  font-size: 14.5px; font-family: inherit; transition: border-color var(--t), box-shadow var(--t);
}
.lg-input input::placeholder { color: #5e5e68; }
.lg-input input:focus { outline: none; border-color: rgba(240,30,45,.6); box-shadow: 0 0 0 3px rgba(224,16,32,.14); }
.lg-input:focus-within .lg-input-ic { color: var(--verde-vivo); }
.lg-olho {
  position: absolute; right: 10px; width: 34px; height: 34px; border: 0; background: none;
  color: #6d6d77; cursor: pointer; display: grid; place-items: center; border-radius: 8px; transition: color var(--t), background var(--t);
}
.lg-olho:hover { color: #c9c9d1; background: rgba(255,255,255,.05); }
.lg-olho.ativo { color: var(--verde-vivo); }
.lg-olho svg { width: 19px; height: 19px; }

.lg-erro {
  background: rgba(224,16,32,.12); border: 1px solid rgba(224,16,32,.34); color: #ff9aa2;
  font-size: 13px; padding: 10px 13px; border-radius: 10px; margin-bottom: 12px;
  /* Entrada suave sempre que sai de hidden (display:none→block reinicia a animação).
     Sem tremor no formulário — apenas fade + pequeno translateY. */
  animation: lgErro .25s ease both;
}
@keyframes lgErro { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.lg-btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 56px; margin-top: 6px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #F0202F, #C10D1B); color: #fff;
  font-size: 15.5px; font-weight: 700; font-family: inherit;
  box-shadow: 0 6px 18px rgba(224,16,32,.20);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
  overflow: hidden;   /* recorta o brilho horizontal (sheen); não afeta a sombra externa */
}
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224,16,32,.32); filter: brightness(1.06); }
/* Brilho horizontal muito leve que cruza o botão no hover (uma passada, não pisca).
   pointer-events:none p/ não interferir no clique; não altera a largura/altura. */
.lg-btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.lg-btn:hover::after { animation: lgSheen .7s ease; }
@keyframes lgSheen { 0% { left: -60%; opacity: 0; } 20% { opacity: .9; } 100% { left: 130%; opacity: 0; } }
.lg-btn-seta { width: 19px; height: 19px; transition: opacity var(--t), transform var(--t); }
.lg-btn:hover .lg-btn-seta { transform: translateX(3px); }
.login-btn.carregando .lg-btn-seta { opacity: 0; }

.lg-seguro { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.lg-seguro-ln { flex: 1; height: 1px; background: rgba(255,255,255,.09); }
.lg-seguro-tx { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #7e7e88; white-space: nowrap; }
.lg-seguro-tx svg { width: 14px; height: 14px; }

.lg-aviso {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: 11px;
  background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.07);
}
.lg-aviso svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--verde-vivo); margin-top: 1px; }
.lg-aviso p { font-size: 12px; line-height: 1.5; color: #8e8e98; }

/* responsivo: abaixo de 1000px some a vitrine e fica só o formulário */
@media (max-width: 1000px) {
  .lg-split { grid-template-columns: 1fr; }
  .lg-vitrine { display: none; }
  .lg-form-col { padding: 38px 26px; }
}
@media (max-width: 1180px) and (min-width: 1001px) {
  .lg-vitrine { padding: 32px 30px; }
  .lg-cards { gap: 10px; }
  .lg-card p { font-size: 12px; }
}
/* telas BAIXAS (notebooks 1366x768 com barra, 16:10 curtos): compacta para
   caber na altura sem rolagem, mantendo a tela cheia preenchida. */
@media (min-width: 1001px) and (max-height: 780px) {
  .lg-vitrine { padding: clamp(24px, 3vw, 46px); }
  .lg-vitrine-int { gap: 15px; max-width: 720px; }
  .lg-lockup .cd-marca { --cd-tam: 40px; }
  .lg-titulo { font-size: clamp(21px, 1.9vw, 27px); }
  .lg-desc { font-size: 13px; line-height: 1.5; }
  .lg-cards { gap: 9px; }
  .lg-card { padding: 11px 12px; }
  .lg-card-ic { width: 33px; height: 33px; }
  .lg-card-ic svg { width: 17px; height: 17px; }
  .lg-card h3 { font-size: 13px; }
  .lg-card p { font-size: 11.5px; line-height: 1.4; }
  .lg-fx-ic { width: 34px; height: 34px; }
  .lg-fx-ic svg { width: 17px; height: 17px; }
  .lg-fx small { font-size: 10px; }
  .lg-fx-seta { margin-bottom: 15px; }
  /* formulário também encolhe um pouco */
  .lg-app-ic { width: 158px; height: 158px; margin-bottom: 6px; }
  .lg-bemvindo { font-size: 22px; }
  .lg-sub { margin-bottom: 18px; }
  .lg-campo { margin-bottom: 13px; }
  .lg-input input { height: 47px; }
  .lg-btn { height: 50px; }
  .lg-seguro { margin: 14px 0 12px; }
}

/* Acessibilidade/performance: quem prefere menos movimento vê tudo imediatamente,
   sem animações contínuas nem transições longas. */
@media (prefers-reduced-motion: reduce) {
  .lg-split,
  .lg-app-ic,
  .lg-vitrine::after,
  .lg-fx-seta::after,
  .lg-erro,
  .lg-btn:hover::after { animation: none !important; }
  .lg-vitrine::after { opacity: .4; }
  .lg-card, .lg-card-ic, .lg-btn, .lg-input input { transition: none !important; }
}

/* =========================================================================
   MULTIEMPRESA v1 — seleção de unidade, menu do usuário, impersonação
   e Painel SuperAdmin.
   Tudo aqui usa as variáveis de tema já existentes, então o modo escuro
   funciona sem regras duplicadas.
   ========================================================================= */

/* ---------- botão de ação destrutiva (faltava no design system) ---------- */
.btn-perigo { background: var(--bad); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(219,59,59,.28); }
.btn-perigo:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* =========================================================================
   1. TELA DE SELEÇÃO DE UNIDADE
   ========================================================================= */
.sel-screen {
  min-height: 100dvh; display: grid; place-items: safe center; padding: 28px 18px;
  background: var(--grad-login); animation: fadeIn .3s;
}
.sel-wrap {
  width: 100%; max-width: 620px; background: var(--card); border-radius: var(--raio-lg);
  box-shadow: var(--sombra-lg); padding: clamp(22px, 4vw, 38px); animation: fadeInUp .35s;
}
/* Tela de seleção de ambiente: card largo o suficiente para a grade de 2–3 colunas. */
.sel-wrap--largo { max-width: 1040px; }
.sel-head { text-align: center; margin-bottom: 22px; }
/* Logo oficial (arte com fundo preto) em badge escuro arredondado: fica limpa
   tanto no card claro quanto no escuro. Preserva a proporção (contain, sem corte). */
.sel-brand-logo {
  display: block; width: 118px; height: 118px; margin: 0 auto 16px; border-radius: 18px;
  background: #0a0a0c; object-fit: contain;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  animation: logoIn .6s cubic-bezier(.2,.8,.2,1) both;
}
.cd-marca--sm { --cd-tam: 22px; display: inline-flex; margin-bottom: 16px; }
.sel-titulo { font-size: clamp(20px, 3vw, 26px); letter-spacing: -.5px; margin-bottom: 6px; }
.sel-sub { color: var(--cinza); font-size: 14px; }
.sel-contagem {
  display: inline-block; margin-top: 10px; padding: 5px 14px; border-radius: 999px;
  background: var(--superficie-2); border: 1px solid var(--linha);
  color: var(--texto); font-size: 13px; font-weight: 700;
}
.sel-contagem::before { content: "🏢 "; }

.sel-busca-wrap {
  position: relative; margin-bottom: 16px;
}
.sel-busca-ic {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .55; pointer-events: none;
}
.sel-busca {
  width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1.5px solid var(--linha);
  border-radius: var(--raio); background: var(--card); color: var(--texto);
  font: inherit; font-size: 14.5px; transition: var(--t);
}
.sel-busca::placeholder { color: var(--cinza); }
.sel-busca:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(216,19,36,.12); }
/* -webkit-search-cancel-button some no Chrome por padrão; deixa consistente entre navegadores */
.sel-busca::-webkit-search-cancel-button { -webkit-appearance: none; }

.sel-recentes { margin-bottom: 18px; }
.sel-recentes-titulo {
  display: block; color: var(--cinza); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.sel-recentes-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sel-recente-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px;
  border: 1.5px solid var(--linha); border-radius: 999px; background: var(--card);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--texto); cursor: pointer; transition: var(--t);
}
.sel-recente-chip:hover { border-color: var(--verde); box-shadow: var(--sombra-md); }
.sel-recente-chip .sel-logo { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

/* Grade de cards ("lacunas") — 3 colunas no desktop, 2 no tablet, 1 no mobile.
   A rolagem continua sendo a da página: .sel-screen usa min-height (não height)
   e place-items: safe center, então cresce com o conteúdo sem cortar o topo. */
.sel-lista {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sel-lista .sel-vazio { grid-column: 1 / -1; }

.sel-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1.5px solid var(--linha); border-radius: var(--raio);
  background: var(--card); box-shadow: var(--sombra-sm); transition: var(--t);
}
.sel-card:hover:not(.sel-card--off) {
  border-color: var(--verde); box-shadow: var(--sombra-md); transform: translateY(-2px);
}
.sel-card--off { opacity: .62; }
.sel-card-head { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 13px; }
.sel-card-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sel-card-id b { font-size: 15.5px; letter-spacing: -.2px; }
.sel-card-id small { color: var(--cinza); font-size: 12.5px; }
.sel-card-linha { color: var(--cinza); font-size: 12.5px; }
.sel-card .pill { align-self: flex-start; }
/* "Acessar" encostado na base — alinha o botão entre cards simples da mesma linha. */
.sel-card:not(.sel-card--grupo) > .btn { margin-top: auto; }

.sel-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; }
.sel-logo--txt { background: var(--grad-verde); color: #fff; font-weight: 800; font-size: 19px; }

/* Card de empresa multi-unidade — botão "Ver unidades" + lista revelada dentro do card. */
.sel-card-exp {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 10px;
  background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: var(--t);
}
.sel-card-exp:hover { border-color: var(--verde); }
.sel-card-seta { color: var(--cinza); font-size: 12px; transition: transform .2s; }
.sel-card--aberto .sel-card-seta { transform: rotate(180deg); }
.sel-card-unis { display: flex; flex-direction: column; gap: 8px; }
.sel-uni {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--card);
}
.sel-uni--off { opacity: .62; }
.sel-uni-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sel-uni-info b { font-size: 13.5px; }
.sel-uni-info small { color: var(--cinza); font-size: 11.5px; }

.sel-vazio { text-align: center; padding: 30px 14px; color: var(--cinza); }
.sel-vazio-ic { font-size: 38px; display: block; margin-bottom: 10px; }
.sel-vazio h3 { font-size: 16.5px; color: var(--texto); margin-bottom: 7px; }
.sel-vazio p { font-size: 13.5px; max-width: 420px; margin: 0 auto; }

.sel-foot { display: flex; justify-content: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linha); }

@media (max-width: 1024px) {
  .sel-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sel-lista { grid-template-columns: 1fr; }
  .sel-uni { grid-template-columns: 1fr; }
  .sel-uni .sel-btn { width: 100%; }
}

/* =========================================================================
   2. MENU DO USUÁRIO (topbar do tenant e do painel)
   ========================================================================= */
.user-box { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 5px 9px 5px 5px;
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 30px;
  cursor: pointer; transition: var(--t); font: inherit; color: inherit; max-width: 230px;
}
.user-chip:hover { border-color: #cfd6d3; box-shadow: var(--sombra-sm); }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.user-nome { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.user-empresa { font-size: 11px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.user-seta { width: 15px; height: 15px; color: var(--cinza-claro); flex: 0 0 auto; }

.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 258px;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-lg); padding: 7px; animation: pop .16s;
}
.user-menu-head { padding: 10px 11px 12px; border-bottom: 1px solid var(--linha); margin-bottom: 6px; display: flex; flex-direction: column; gap: 4px; }
.user-menu-head b { font-size: 14px; }
.user-menu-head small { font-size: 12px; color: var(--cinza); word-break: break-all; }
.user-menu-head .pill { align-self: flex-start; margin-top: 3px; }
.user-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px;
  background: none; border: 0; border-radius: var(--raio-sm); cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--texto); text-align: left; transition: var(--t);
}
.user-menu-item:hover { background: var(--superficie-2); }
.user-menu-item svg { width: 17px; height: 17px; color: var(--cinza); flex: 0 0 auto; }
.user-menu-item--danger { color: var(--bad); }
.user-menu-item--danger svg { color: var(--bad); }
.user-menu-item--danger:hover { background: var(--bad-bg); }
.user-menu-sep { height: 1px; background: var(--linha); margin: 6px 4px; }

/* ---------- Seletor global de unidade (topbar) — item 12 ---------- */
.unidade-box { position: relative; }
.chip-unidade { border: none; font: inherit; }
.chip-unidade--clicavel { cursor: pointer; }
.chip-unidade--clicavel:hover { box-shadow: inset 0 0 0 1.5px rgba(216,19,36,.3); }
.chip-unidade:disabled { cursor: default; }
/* Seta só aparece quando o chip é de fato clicável (item 19: não parecer
   seletor sem ser) — escondida, não removida, pra não pular o layout do
   texto ao lado quando a empresa tem 1 unidade só. */
.chip-unidade-seta { width: 13px; height: 13px; margin-left: 1px; opacity: 0; vertical-align: -2px; }
.chip-unidade--clicavel .chip-unidade-seta { opacity: .65; }
.unidade-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; width: 280px;
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-lg); padding: 9px; animation: pop .16s;
}
.unidade-menu-head { padding: 3px 3px 10px; }
.unidade-menu-head small { display: block; color: var(--cinza); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.unidade-menu-head b { font-size: 14px; }
.unidade-menu-busca { margin: 0 2px 8px; }
.unidade-menu-busca .sel-busca { height: 38px; font-size: 13.5px; }
.unidade-menu-lista { display: grid; gap: 2px; max-height: 280px; overflow-y: auto; }
.unidade-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 10px; background: none; border: 0; border-radius: var(--raio-sm);
  cursor: pointer; font: inherit; font-size: 13.5px; color: var(--texto); text-align: left; transition: var(--t);
}
.unidade-menu-item:hover { background: var(--superficie-2); }
.unidade-menu-item--atual { color: var(--verde-med); font-weight: 650; background: rgba(216,19,36,.06); }
.unidade-menu-check { color: var(--verde-med); font-weight: 700; }
.unidade-menu-vazio { padding: 14px 10px; color: var(--cinza); font-size: 13px; text-align: center; }

/* =========================================================================
   3. BARRA DE IMPERSONAÇÃO
   ========================================================================= */
.imp-barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 18px; background: linear-gradient(90deg, var(--warn-bg), transparent 85%);
  border-bottom: 2px solid var(--warn); color: #6b4d05; font-size: 13.5px;
  position: sticky; top: 0; z-index: 40;
}
[data-theme="dark"] .imp-barra { color: #ffd97a; background: linear-gradient(90deg, rgba(196,138,18,.22), transparent 85%); }
.imp-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--warn); flex: 0 0 auto; }
.imp-ic svg { width: 20px; height: 20px; }
.imp-txt { flex: 1 1 260px; }
.imp-btn { background: var(--warn); color: #fff; border-color: transparent; }
.imp-btn:hover { filter: brightness(1.07); }

/* =========================================================================
   4. SHELL DO PAINEL SUPERADMIN
   ========================================================================= */
.adm { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; animation: fadeIn .25s; }

.adm-sidebar {
  background: linear-gradient(180deg, #101a2c 0%, #0a1220 100%);
  color: #dbe4f1; display: flex; flex-direction: column; padding: 18px 12px;
  position: sticky; top: 0; height: 100dvh;
}
.adm-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }
.adm-brand-mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, #3d6fd8, #1e3f8f); color: #fff; flex: 0 0 auto;
}
.adm-brand-mark svg { width: 20px; height: 20px; }
.adm-brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.adm-brand-txt b { font-size: 14.5px; letter-spacing: -.2px; }
.adm-brand-txt small { font-size: 11px; color: #8fa3c4; }

.adm-menu { flex: 1; overflow-y: auto; }
.adm-menu ul { list-style: none; }
.adm-menu .menu-secao {
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: #6d82a6;
  padding: 15px 10px 6px; font-weight: 700;
}
.adm-menu li[data-tela] {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--raio-sm);
  cursor: pointer; font-size: 13.5px; transition: var(--t); color: #c3d1e6;
}
.adm-menu li[data-tela]:hover { background: rgba(255,255,255,.07); color: #fff; }
.adm-menu li[data-tela].ativo { background: linear-gradient(135deg, #3d6fd8, #2a51a8); color: #fff; box-shadow: 0 8px 20px rgba(61,111,216,.32); }
.adm-menu .m-icon { width: 20px; text-align: center; flex: 0 0 auto; }

.adm-sidebar-foot { padding: 14px 10px 2px; border-top: 1px solid rgba(255,255,255,.09); }
.adm-versao { font-size: 11px; color: #6d82a6; }

.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 30;
}
.adm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.adm-badge { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; }
.adm-badge--plataforma { background: #e6edfb; color: #2a51a8; }
[data-theme="dark"] .adm-badge--plataforma { background: rgba(61,111,216,.2); color: #93b4f5; }
.adm-content { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
#adm-btn-menu { display: none; }

/* ---------- KPIs ---------- */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 13px; }
.adm-kpi {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 15px 17px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--sombra-sm); transition: var(--t); position: relative; overflow: hidden;
}
.adm-kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.adm-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--linha); }
.adm-kpi--ok::before { background: var(--ok); }
.adm-kpi--warn::before { background: var(--warn); }
.adm-kpi--bad::before { background: var(--bad); }
.adm-kpi--info::before { background: var(--info); }
.adm-kpi--vazio { border-style: dashed; opacity: .82; }
.adm-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--cinza); font-weight: 700; }
.adm-kpi-valor { font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
.adm-kpi-sub { font-size: 12px; color: var(--cinza); }

/* ---------- Seções ---------- */
.adm-secao { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-sm); overflow: hidden; }
.adm-secao-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.adm-secao-head h2 { font-size: 16px; letter-spacing: -.3px; }
.adm-secao-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.adm-secao-acoes--fim { margin: 14px 0 0; justify-content: flex-end; }
.adm-secao-body { padding: 16px 18px; }
.adm-nota { font-size: 12.5px; color: var(--cinza); padding: 11px 18px 0; line-height: 1.5; }
.adm-secao-body > .adm-nota:first-child { padding: 0 0 12px; }

/* ---------- Tabelas ---------- */
.adm-tabela-wrap { overflow-x: auto; margin: -4px; padding: 4px; }
.adm-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-tabela th {
  text-align: left; padding: 9px 11px; background: var(--superficie-2); color: var(--cinza);
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; white-space: nowrap;
}
.adm-tabela th:first-child { border-radius: var(--raio-sm) 0 0 var(--raio-sm); }
.adm-tabela th:last-child { border-radius: 0 var(--raio-sm) var(--raio-sm) 0; }
.adm-tabela td { padding: 11px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.adm-tabela tbody tr:last-child td { border-bottom: 0; }
.adm-tabela tbody tr:hover { background: var(--superficie-2); }
.adm-tabela small { color: var(--cinza); font-size: 11.5px; }

.adm-paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; font-size: 13px; color: var(--cinza); }

.adm-cel-empresa { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.adm-cel-empresa > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.adm-logo { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; display: grid; place-items: center; }
.adm-logo--txt { background: var(--grad-verde); color: #fff; font-weight: 800; font-size: 14px; }
.adm-acoes-cel { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-tag { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--linha); margin: 1px 0; }
.adm-tag--off { opacity: .5; text-decoration: line-through; }
.adm-json { font-size: 11px; background: var(--campo-bg); padding: 9px; border-radius: var(--raio-sm); max-width: 340px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* ---------- Gráficos ---------- */
.adm-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.adm-grafico { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-grafico-lbl { font-size: 12px; font-weight: 650; color: var(--cinza); }
.adm-grafico svg { width: 100%; height: auto; max-height: 150px; overflow: visible; }
.adm-barra { fill: var(--verde); transition: var(--t); }
.adm-barra:hover { fill: var(--verde-vivo); }
.adm-barra-lbl { font-size: 8.5px; fill: var(--cinza); text-anchor: middle; }
.adm-barra-val { font-size: 9px; fill: var(--texto); text-anchor: middle; font-weight: 700; }

/* ---------- Monitoramento ---------- */
.adm-mon-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 13px; }
.adm-mon { border: 1px solid var(--linha); border-left-width: 3px; border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.adm-mon header { display: flex; align-items: center; gap: 9px; justify-content: space-between; }
.adm-mon header b { font-size: 14px; }
.adm-mon p { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.adm-mon footer { display: flex; gap: 10px; justify-content: space-between; font-size: 11px; color: var(--cinza-claro); border-top: 1px solid var(--linha); padding-top: 8px; }
.adm-mon code { background: var(--campo-bg); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.adm-mon--operacional { border-left-color: var(--ok); }
.adm-mon--degradado { border-left-color: var(--warn); }
.adm-mon--falha { border-left-color: var(--bad); }
.adm-mon--sem_sonda { border-left-color: var(--info); }
.adm-mon--desligado { border-left-color: var(--muted); }

/* ---------- Avisos e blocos reservados ---------- */
.adm-aviso {
  padding: 12px 15px; border-radius: var(--raio-sm); background: var(--warn-bg); color: #6b4d05;
  font-size: 13px; line-height: 1.5; border-left: 3px solid var(--warn); margin-bottom: 14px;
}
[data-theme="dark"] .adm-aviso { color: #ffd97a; background: rgba(196,138,18,.16); }
.adm-aviso--info { background: var(--info-bg); color: #1c4f87; border-left-color: var(--info); }
[data-theme="dark"] .adm-aviso--info { color: #9dc2f5; background: rgba(47,119,196,.16); }
.adm-aviso--perigo { background: var(--bad-bg); color: #8f2020; border-left-color: var(--bad); }
[data-theme="dark"] .adm-aviso--perigo { color: #ffaeae; background: rgba(219,59,59,.16); }

.adm-reservado { display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1.5px dashed var(--linha); border-radius: var(--raio); background: var(--campo-bg); }
.adm-reservado-ic { font-size: 24px; flex: 0 0 auto; }
.adm-reservado b { font-size: 14px; display: block; margin-bottom: 4px; }
.adm-reservado p { font-size: 12.5px; color: var(--cinza); line-height: 1.55; }

.adm-secao-estrutura { margin-top: 18px; padding: 15px; border: 1.5px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); }
.adm-secao-estrutura b { font-size: 14px; display: block; margin-bottom: 5px; }
.adm-secao-estrutura p { font-size: 12.5px; color: var(--cinza); line-height: 1.55; margin-bottom: 11px; }

.adm-estrutura-acoes { display: grid; gap: 8px; }
.adm-estrutura-op {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: var(--raio-sm);
  background: var(--card); cursor: pointer; transition: var(--t); font: inherit; color: var(--texto);
}
.adm-estrutura-op:hover { border-color: var(--verde); box-shadow: var(--sombra-sm); }
.adm-estrutura-op b { font-size: 13.5px; }
.adm-estrutura-op small { color: var(--cinza); font-size: 12px; }

.adm-zona-perigo { margin-top: 18px; padding: 15px; border: 1.5px solid var(--bad); border-radius: var(--raio); background: var(--bad-bg); }
[data-theme="dark"] .adm-zona-perigo { background: rgba(219,59,59,.12); }
.adm-zona-perigo b { color: var(--bad); font-size: 14px; display: block; margin-bottom: 5px; }
.adm-zona-perigo p { font-size: 12.5px; color: var(--cinza); line-height: 1.55; margin-bottom: 11px; }

.adm-passos { padding-left: 22px; font-size: 13.5px; line-height: 1.8; color: var(--texto); }
.adm-passos code { background: var(--campo-bg); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* ---------- Detalhes (modal) ---------- */
.adm-det { display: grid; gap: 1px; background: var(--linha); border-radius: var(--raio-sm); overflow: hidden; margin-bottom: 6px; }
.adm-det-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 13px; background: var(--card); font-size: 13.5px; }
.adm-det-linha > span:first-child { color: var(--cinza); font-size: 12.5px; }
.adm-det-tit { font-size: 13px; text-transform: uppercase; letter-spacing: .7px; color: var(--cinza); margin: 20px 0 9px; font-weight: 700; }
.adm-det-lista { list-style: none; display: grid; gap: 7px; font-size: 13.5px; }
.adm-det-lista li { padding: 9px 12px; background: var(--campo-bg); border-radius: var(--raio-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-det-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Vínculos e associação ---------- */
.adm-vinculos { display: grid; gap: 8px; }
.adm-vinculo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 13px; background: var(--campo-bg); border-radius: var(--raio-sm); }
.adm-vinculo-nome { display: flex; align-items: center; gap: 8px; flex: 1 1 170px; min-width: 0; font-size: 13.5px; }
.adm-vinculo-papel { flex: 0 0 auto; }

.adm-assoc-lista { display: grid; gap: 7px; max-height: 260px; overflow-y: auto; padding: 3px; }
.adm-assoc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 10px 12px; background: var(--campo-bg); border-radius: var(--raio-sm); cursor: pointer; }
.adm-assoc:hover { background: var(--superficie-2); }
.adm-assoc-nome { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.adm-assoc--check { grid-template-columns: auto 1fr; }

/* Modal "Associar empresas" — vínculos atuais x adicionar acesso */
.adm-assoc--atual { cursor: default; }
.adm-assoc--nova { cursor: pointer; }
.assoc-flag-alterado { grid-column: 2 / -1; font-size: 11.5px; color: var(--laranja, #b26a00); font-weight: 600; }
.adm-assoc-cargo--off { opacity: .4; }
#assoc-cargo-modo { margin-top: 12px; padding: 12px; background: var(--campo-bg); border-radius: var(--raio-sm); display: grid; gap: 8px; }
#assoc-cargo-modo .adm-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
#assoc-cargo-todas { display: grid; gap: 4px; margin-top: 4px; }
#assoc-cargo-todas > span { font-size: 12px; color: var(--cinza); }

/* ---------- Página de detalhe da empresa (Informações/Acessos/Unidades/…) ---------- */
.adm-empresa-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.adm-empresa-nome { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0; }
/* Tag "🏢 Empresa" no topo da página de detalhe da unidade — deixa a
   pertença à empresa visível sem precisar abrir uma aba (item 1 do pedido). */
.adm-unidade-empresa-tag {
  padding: 5px 10px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha);
  font-size: 12.5px; font-weight: 600; color: var(--cinza);
}
.adm-abas { display: flex; gap: 4px; border-bottom: 1.5px solid var(--linha); margin-bottom: 18px; overflow-x: auto; }
.adm-aba {
  padding: 9px 15px; border: none; background: none; color: var(--cinza); font-size: 13.5px; font-weight: 600;
  cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.adm-aba:hover { color: var(--texto); }
.adm-aba.ativo { color: var(--verde-vivo); border-bottom-color: var(--verde-vivo); }

.adm-modulos-grupo {
  border: none; padding: 0; margin: 0 0 18px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 7px;
}
.adm-modulos-grupo legend {
  grid-column: 1 / -1; font-size: 12.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--cinza);
  font-weight: 700; padding: 0 0 8px;
}
.adm-modulos-acoes { display: flex; gap: 8px; margin: 0 0 14px; }

/* ---------- Formulários do painel ---------- */
.adm-form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 13px; }
.adm-campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.adm-campo--full { grid-column: 1 / -1; }
.adm-campo > span { font-weight: 650; color: var(--texto); }
.adm-campo .req { color: var(--bad); font-style: normal; }
.adm-campo input, .adm-campo select, .adm-campo textarea {
  padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: var(--raio-sm);
  font: inherit; font-size: 13.5px; background: var(--card); color: var(--texto); transition: var(--t); width: 100%;
}
.adm-campo input:focus, .adm-campo select:focus, .adm-campo textarea:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(216,19,36,.12);
}
.adm-campo textarea { resize: vertical; min-height: 66px; }
.adm-campo small { font-size: 11.5px; color: var(--cinza); line-height: 1.45; }
.adm-campo--check { justify-content: flex-end; }
.adm-campo--check > span:last-child { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--cinza); }
.adm-campo--check input { width: auto; }
.adm-secreto { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; background: var(--warn-bg); color: var(--warn); padding: 2px 6px; border-radius: 5px; font-weight: 700; }

.adm-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; align-items: end; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--linha); }
.adm-filtros-acoes { display: flex; gap: 8px; align-items: end; }

/* ---------- Estrutura Organizacional (árvore Empresa > Unidades) ---------- */
.adm-estr-busca { max-width: 420px; margin-bottom: 18px; }
.adm-arvore { display: grid; gap: 10px; }
.adm-arvore-emp { border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.adm-arvore-emp-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.adm-arvore-emp-cab .adm-cel-empresa { flex: 1; min-width: 0; }
.adm-arvore-toggle {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--card); cursor: pointer;
  color: var(--cinza); transition: var(--t);
}
.adm-arvore-toggle:disabled { opacity: .35; cursor: default; }
.adm-arvore-toggle:not(:disabled):hover { border-color: var(--verde); color: var(--verde); }
.adm-arvore-seta { transition: transform .2s; font-size: 12px; display: inline-block; }
.adm-arvore-emp--aberta .adm-arvore-seta { transform: rotate(180deg); }
.adm-arvore-emp-acoes { flex: 0 0 auto; }
.adm-arvore-uni-lista { display: grid; gap: 8px; padding: 0 14px 14px 52px; background: var(--superficie-2); }
.adm-arvore-uni-vazia { padding: 10px 0; }
.adm-arvore-uni {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--card);
}
.adm-arvore-uni-logo { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.adm-arvore-uni-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.adm-arvore-uni-info b { font-size: 13.5px; }
.adm-arvore-uni-info small { color: var(--cinza); font-size: 11.5px; }

@media (max-width: 640px) {
  .adm-arvore-emp-cab { flex-wrap: wrap; }
  .adm-arvore-emp-acoes { width: 100%; }
  .adm-arvore-emp-acoes .btn { flex: 1; }
  .adm-arvore-uni-lista { padding-left: 14px; }
  .adm-arvore-uni { flex-wrap: wrap; }
}

/* ---------- Modal do painel ---------- */
.admod { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; animation: fadeIn .18s; }
.admod-fundo { position: absolute; inset: 0; background: rgba(10,14,20,.55); backdrop-filter: blur(3px); }
.admod-card {
  position: relative; width: 100%; max-width: 720px; max-height: 90dvh; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--raio-lg); box-shadow: var(--sombra-lg); animation: pop .2s;
}
.admod-head { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--linha); }
.admod-head h2 { font-size: 18px; letter-spacing: -.3px; flex: 1; min-width: 0; }
.admod-x { width: 32px; height: 32px; border-radius: 9px; border: 0; background: var(--superficie-2); color: var(--cinza); cursor: pointer; font-size: 15px; transition: var(--t); flex: 0 0 auto; }
.admod-x:hover { background: var(--bad-bg); color: var(--bad); transform: rotate(90deg); }
.admod-body { padding: 20px; overflow-y: auto; flex: 1; }
.admod-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px; border-top: 1px solid var(--linha); }
[data-theme="dark"] .admod input:not([type="checkbox"]), [data-theme="dark"] .admod select, [data-theme="dark"] .admod textarea { background: var(--campo-bg); }

/* ---------- Responsivo do painel ---------- */
@media (max-width: 980px) {
  .adm { grid-template-columns: 1fr; }
  #adm-btn-menu { display: inline-flex; }
  .adm-sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 90;
    transform: translateX(-100%); transition: transform var(--t-lenta);
  }
  .adm.menu-aberto .adm-sidebar { transform: none; box-shadow: var(--sombra-lg); }
  #adm-backdrop { display: none; }
  .adm.menu-aberto #adm-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(10,14,20,.5); }
  .adm-content { padding: 15px; gap: 15px; }
  .adm-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .adm-kpi-valor { font-size: 21px; }
}
@media (max-width: 620px) {
  .adm-topbar { padding: 10px 13px; gap: 9px; }
  .adm-badge { display: none; }
  .user-meta { display: none; }
  .user-chip { max-width: none; padding: 5px; }
  .adm-secao-head { padding: 13px 14px; }
  .adm-secao-body { padding: 13px 14px; }
  .adm-secao-acoes { width: 100%; margin-left: 0; }
  .adm-secao-acoes .btn { flex: 1; }
  .adm-form-grade { grid-template-columns: 1fr; }
  .adm-filtros { grid-template-columns: 1fr; }
  .admod-card { max-height: 94dvh; }
  .admod-body { padding: 15px; }
  .adm-vinculo { flex-direction: column; align-items: stretch; }
  .adm-assoc { grid-template-columns: auto 1fr; }
  .adm-assoc select { grid-column: 1 / -1; }
}

/* =========================================================================
   DEFINIR SENHA (primeiro acesso) — reaproveita a base .sel-* e os campos .lg-*
   ========================================================================= */
.sel-wrap--estreito { max-width: 460px; }

.senha-ic {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  margin: 4px auto 14px; background: var(--grad-verde); color: #fff; box-shadow: var(--glow-verde);
}
.senha-ic svg { width: 26px; height: 26px; }

.senha-form { display: block; margin-top: 6px; text-align: left; }
.senha-form .lg-campo { margin-bottom: 14px; }

.senha-reqs { list-style: none; display: grid; gap: 7px; margin: 4px 0 16px; padding: 0; }
.senha-reqs li {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--cinza);
  transition: color var(--t);
}
.senha-req-dot {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; position: relative;
  border: 1.6px solid var(--linha); transition: var(--t);
}
.senha-reqs li.ok { color: var(--ok); }
.senha-reqs li.ok .senha-req-dot { background: var(--ok); border-color: var(--ok); }
/* check branco desenhado com dois traços via ::after */
.senha-reqs li.ok .senha-req-dot::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ============================================================
   INSUMOS / FICHA TÉCNICA EDITÁVEL (módulo Produtos-CMV + Insumos)
   Reutiliza o padrão visual existente (cards, grid, pills, modal).
   ============================================================ */
/* inputs numéricos/data seguem o mesmo visual dos demais campos */
.ed-campo input[type="number"], .ed-campo input[type="date"] {
  padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 10px; font-size: 15px; background: #fff; color: var(--texto);
}
.ed-campo input[type="number"]:focus, .ed-campo input[type="date"]:focus {
  outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13);
}
.ed-campo-full { grid-column: 1 / -1; }

.ins-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cinza); white-space: nowrap; }
.cu-un { color: var(--cinza); font-weight: 600; font-size: .82em; }
.cu-cod { display: block; color: var(--cinza); font-size: 11px; margin-top: 2px; }
tr.linha-inativa { opacity: .55; }

/* grade de indicadores dentro do modal de produto */
.modal-cmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.modal-cmv-grid .modal-custo { margin: 0; }
.modal-cmv-grid .modal-custo strong { font-size: 19px; }
@media (max-width: 620px) { .modal-cmv-grid { grid-template-columns: 1fr; } }

/* linha de edição/adição de componente da ficha */
.pm-editrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pm-editrow label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--cinza); }
.pm-editrow input, .pm-editrow select {
  padding: 7px 9px; border: 1.5px solid var(--linha); border-radius: 9px; font-size: 14px; background: #fff; color: var(--texto); max-width: 160px;
}
.pm-editrow input:focus, .pm-editrow select:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
.pm-prev { font-size: 13px; font-weight: 700; color: var(--verde-vivo); }
.pm-addbox { border: 1px dashed var(--linha); border-radius: 12px; padding: 12px; margin-top: 8px; background: var(--superficie-2); }
#pm-add-area { margin: 8px 0 4px; }

/* Ação destrutiva (remover produto / insumo) — vermelho só no hover, para não
   competir visualmente com as demais ações da linha. */
.acao-btn.acao-perigo:hover {
  border-color: rgba(214, 69, 69, .45);
  background: rgba(214, 69, 69, .08);
}

/* ============================================================
   DASHBOARD EXECUTIVO (lançamento financeiro diário por unidade)
   Reutiliza os componentes existentes (.card, .pill, .modal-overlay,
   .cfg-form-grid/.cfg-campo, .ed-acoes, .grid/.tabela-wrap) e só
   acrescenta o que é específico deste módulo (prefixo dex-).
   ============================================================ */
.dex-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; animation: fadeInUp .35s ease both; flex-wrap: wrap; }
.dex-head-txt h2 { font-size: 22px; letter-spacing: -.4px; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.dex-head-txt p { color: var(--cinza); font-size: 14px; max-width: 640px; }
.dex-logo { height: 26px; width: auto; border-radius: 6px; box-shadow: var(--sombra-sm); flex: 0 0 auto; }

/* Modelo logístico do iFood (Marketplace x Full Service) — cabeçalho */
.dex-modelo-box { flex: 0 0 auto; display: flex; align-items: center; }
.dex-modelo-nota { font-size: 13px; font-weight: 650; color: var(--cinza); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 20px; padding: 7px 14px; white-space: nowrap; }
.dex-modelo-nota b { color: var(--texto); }
.dex-modelo-campo { display: flex; align-items: center; gap: 8px; }
.dex-modelo-campo > span { font-size: 11.5px; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.dex-modelo-campo select {
  padding: 7px 12px; border: 1.5px solid var(--verde-vivo); border-radius: 20px; font-size: 13px; font-weight: 650;
  background: var(--superficie-2); color: var(--texto); cursor: pointer;
}
.dex-modelo-campo select:focus { outline: none; box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
tr.dex-linha-na { opacity: .65; }

.dex-filtros { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.dex-filtros .cfg-campo { min-width: 160px; }
.dex-btn-lancamento-mensal { flex-shrink: 0; white-space: nowrap; }

.dex-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1.5px solid var(--linha); padding-bottom: 0; }
.dex-tab {
  border: none; background: transparent; padding: 10px 16px; font-size: 13.5px; font-weight: 650; color: var(--cinza);
  cursor: pointer; border-radius: 10px 10px 0 0; display: flex; align-items: center; gap: 6px; transition: background var(--t), color var(--t);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
}
.dex-tab:hover { background: var(--superficie-2); color: var(--texto); }
.dex-tab.ativo { color: var(--verde-vivo); border-bottom-color: var(--verde-vivo); background: var(--superficie-2); }

.dex-conteudo { animation: fadeInUp .3s ease both; }

.dex-alerta {
  background: var(--warn-bg); border: 1px solid rgba(196,138,18,.25); border-radius: var(--raio);
  padding: 14px 16px; margin-bottom: 16px; color: #7a5a08;
}
.dex-alerta b { display: block; margin-bottom: 4px; }
.dex-alerta p { font-size: 13.5px; margin-top: 2px; }

.dex-aviso {
  background: var(--info-bg); border: 1px solid rgba(47,119,196,.2); border-radius: var(--raio);
  padding: 12px 16px; margin-bottom: 16px; color: #204a75; font-size: 13.5px; font-weight: 600;
}

.dex-resumo { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra-sm); }
.dex-resumo h3 { font-size: 16px; margin-bottom: 6px; }
.dex-resumo p { font-size: 13.5px; color: var(--cinza); }
.dex-resumo-sub { margin-top: 6px; }
.dex-resumo #dex-preencher-primeiro, .dex-resumo .btn { margin-top: 12px; }
.dex-progress { height: 10px; background: var(--superficie-2); border-radius: 9px; overflow: hidden; margin: 10px 0; }
.dex-progress > div { height: 100%; border-radius: 9px; background: var(--grad-verde); transition: width .4s ease; }

.dex-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.dex-card-topo { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--cinza); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.dex-card-val { font-size: 22px; font-weight: 800; display: block; }
.card.destaque .dex-card-val { color: var(--verde-vivo); }
.dex-card-sub { font-size: 12.5px; color: var(--cinza); display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* Barra de "quanto do limite já foi usado" (Taxas e Comissões / Serviços e
   Promoções) — mais fina que .dex-progress de propósito, é um detalhe do
   card, não o destaque da tela. Cor acompanha o status (ok/warn/bad). */
.dex-meta-bar { height: 6px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.dex-meta-bar > div { height: 100%; border-radius: 6px; transition: width .4s ease; }
.dex-meta-bar > div.ok { background: var(--ok); }
.dex-meta-bar > div.warn { background: var(--warn); }
.dex-meta-bar > div.bad { background: var(--bad); }
.dex-meta-bar > div.muted { background: var(--muted); }
.dex-card-saldo { font-size: 12px; color: var(--cinza); display: block; }
.dex-card-saldo b { color: var(--texto); font-weight: 700; }
.dex-card-saldo.acima b { color: var(--bad); }

.dex-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.dex-painel { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.dex-painel h3 { font-size: 15px; margin-bottom: 12px; }
.dex-chart-wrap { position: relative; height: 260px; }
.dex-desempenho { margin-bottom: 18px; }
.dex-desemp-stats { margin-top: 12px; font-size: 13px; }

.dex-projecao { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra-sm); }
.dex-projecao h3 { font-size: 15px; margin-bottom: 12px; }

/* Simulador de preço DUPLO — Balcão e iFood lado a lado, cada um com seu
   próprio seletor de tabela. Grid de 2 colunas no desktop; empilha em 1
   coluna no mobile. A linha de comparação fica no rodapé, discreta. */
.dex-simulador { padding: 14px 20px; margin-bottom: 18px; }
.dex-sim-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.dex-sim-titulo-wrap { flex: 1 1 260px; min-width: 0; }
.dex-simulador h3 { font-size: 14.5px; margin-bottom: 3px; }
.dex-sim-desc { font-size: 11.5px; color: var(--cinza); max-width: 480px; }
.dex-sim-toggle { flex-shrink: 0; white-space: nowrap; }
.dex-sim-badge { font-size: 9px; font-weight: 700; background: var(--muted-bg); color: var(--cinza); padding: 1px 5px; border-radius: 5px; margin-left: 4px; vertical-align: middle; }
.dex-sim-aviso { font-size: 11.5px; color: var(--cinza); margin-top: 10px; display: flex; align-items: center; gap: 6px; }

/* Resumo compacto (estado padrão, recolhido — item 1 do pedido de UX): uma
   faixa só, 4-5 números, nada de grid de 2 colunas nem painéis abertos. */
.dex-sim-resumo { display: flex; gap: 8px 22px; flex-wrap: wrap; align-items: baseline; }
.dex-sim-resumo-item { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.dex-sim-resumo-item > span { color: var(--cinza); }
.dex-sim-resumo-item > b { font-size: 13.5px; font-weight: 750; }
.dex-sim-corpo { margin-top: 4px; }

/* Os dois cenários. `minmax(0, 1fr)` (e não `1fr`) impede que um número
   comprido estoure a coluna e crie scroll horizontal. */
.dex-sim-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dex-sim-lado { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; background: var(--superficie-2); min-width: 0; }
.dex-sim-lado-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.dex-sim-lado-titulo { font-size: 12.5px; font-weight: 750; letter-spacing: .2px; }
.dex-sim-lado-tabela { display: flex; align-items: center; gap: 6px; }
.dex-sim-lado-tabela > span { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); font-weight: 700; }
.dex-sim-lado-tabela select { padding: 4px 8px; font-size: 12px; min-width: 74px; border-radius: 8px; }
.dex-sim-lado-corpo { min-height: 132px; }

/* Linhas label→valor: mais legível que chips quando são 4-6 números por lado
   e os dois lados precisam ficar alinhados para comparação visual. */
.dex-sim-linhas { display: flex; flex-direction: column; }
.dex-sim-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.dex-sim-linha + .dex-sim-linha { border-top: 1px dashed var(--linha); }
.dex-sim-linha > span { color: var(--cinza); }
.dex-sim-linha > b { font-size: 14px; font-weight: 750; text-align: right; }
.dex-sim-linha > b small { font-size: 11px; font-weight: 700; color: var(--cinza); }
.dex-sim-linha-destaque { margin-top: 2px; padding-top: 7px; border-top: 1.5px solid var(--linha) !important; }
.dex-sim-linha-destaque > b { font-size: 16px; font-weight: 800; color: var(--verde-vivo); }

/* Segunda linha discreta embaixo de uma dedução (Taxas e Comissões /
   Serviços e Promoções): "Meta X% · Limite Y%" + selo de status. */
.dex-sim-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--cinza-claro); margin: -2px 0 6px; }
.dex-sim-meta .pill { font-size: 9.5px; padding: 1px 6px; }
.dex-sim-meta + .dex-sim-linha { border-top: 1px dashed var(--linha); }

/* Rodapé de comparação — dois blocos empilhados (rótulo, blocos, extras),
   cada um cuidando do próprio layout interno. */
.dex-sim-comparacao { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); }
.dex-sim-comp-rotulo { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-claro); font-weight: 750; }

/* Os dois blocos da comparação — "Preço iFood × Balcão" e "Deduções reais do
   mês" — são perguntas diferentes (ver renderComparacao) e por isso nunca
   dividem a mesma lista de itens: lado a lado no desktop, empilhados no
   mobile (breakpoint abaixo). */
.dex-sim-comp-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dex-sim-comp-bloco { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dex-sim-comp-bloco h4 { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza-claro); font-weight: 750; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dex-sim-comp-modelo { font-size: 9.5px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--cinza); background: var(--muted-bg); padding: 1px 6px; border-radius: 6px; }

/* Linha dentro de um bloco: rótulo à esquerda, valor à direita (diferente do
   `.dex-sim-comp-extra`, mais compacto, abaixo). */
.dex-sim-comp-bloco .dex-sim-comp-item { justify-content: space-between; gap: 10px; }

.dex-sim-comp-item { display: flex; align-items: baseline; gap: 7px; font-size: 12px; }
.dex-sim-comp-item > span { color: var(--cinza); }
.dex-sim-comp-item > b { font-size: 13.5px; font-weight: 800; text-align: right; }
.dex-sim-comp-item.positivo > b { color: var(--ok); }
.dex-sim-comp-item.negativo > b { color: var(--bad); }
.dex-sim-comp-item.neutro > b { color: var(--cinza); }
.dex-sim-comp-item > b small { font-size: 10.5px; font-weight: 700; opacity: .72; margin-left: 1px; }

/* Diferença de CMV / Diferença de margem — fora dos blocos, sem hierarquia
   de "pergunta" própria, então continuam num rodapezinho compacto. */
.dex-sim-comp-extra { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .dex-sim-duplo { grid-template-columns: minmax(0, 1fr); }
  .dex-sim-lado-corpo { min-height: 0; }
  .dex-sim-cabecalho { flex-direction: column; }
  .dex-sim-comp-blocos { grid-template-columns: minmax(0, 1fr); }
}
.dex-projecao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.dex-projecao-grid > div { display: flex; flex-direction: column; gap: 4px; }
.dex-projecao-grid span { font-size: 11.5px; color: var(--cinza); text-transform: uppercase; font-weight: 700; letter-spacing: .3px; }
.dex-projecao-grid b { font-size: 18px; }
.dex-projecao-destaque b { color: var(--verde-vivo); }
.dex-confiabilidade { margin-top: 12px; font-size: 13px; }
.dex-conf-alta { color: var(--ok); }
.dex-conf-media { color: var(--warn); }
.dex-conf-baixa, .dex-conf-indisponivel { color: var(--bad); }
.dex-projecao-parcial { margin-top: 8px; font-size: 13px; font-weight: 650; color: var(--warn); }

.dex-diag-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 900px) { .dex-diag-grid { grid-template-columns: 1fr; } }
.dex-diag, .dex-recom { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra-sm); }
.dex-diag h3, .dex-recom h3 { font-size: 15px; margin-bottom: 10px; }
.dex-diag-bloco { margin-bottom: 10px; }
.dex-diag-bloco h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.dex-diag-bloco ul, .dex-recom-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dex-diag-bloco li, .dex-recom-lista li { font-size: 13.5px; padding-left: 18px; position: relative; }
.dex-diag-bloco li::before, .dex-recom-lista li::before { content: "•"; position: absolute; left: 4px; font-weight: 900; }
.dex-diag-bloco.forte h4 { color: var(--ok); }
.dex-diag-bloco.forte li::before { color: var(--ok); }
.dex-diag-bloco.atencao h4 { color: var(--warn); }
.dex-diag-bloco.atencao li::before { color: var(--warn); }
.dex-diag-bloco.alerta h4 { color: var(--bad); }
.dex-diag-bloco.alerta li::before { color: var(--bad); }
.dex-diag-vazio { color: var(--cinza); font-size: 13.5px; }
.dex-recom-lista li::before { color: var(--verde-vivo); }
.dex-confiabilidade-dados { font-size: 12.5px; color: var(--cinza); margin-bottom: 12px; }

/* Plano de Ação — um bloco compacto por ação, numerado (ordem de prioridade
   já vem do backend), borda lateral pela mesma cor semântica do achado que
   originou a ação — sem inventar uma cor nova. */
.dex-acao { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--linha); border-left: 3px solid var(--linha); border-radius: 10px; margin-bottom: 10px; background: var(--superficie-2); }
.dex-acao:last-child { margin-bottom: 0; }
.dex-acao.alerta { border-left-color: var(--bad); }
.dex-acao.atencao { border-left-color: var(--warn); }
.dex-acao.forte { border-left-color: var(--ok); }
.dex-acao-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; color: var(--cinza); }
.dex-acao-corpo { flex: 1; min-width: 0; }
.dex-acao-titulo { display: block; font-size: 13.5px; margin-bottom: 4px; }
.dex-acao-desc { font-size: 12.5px; color: var(--cinza); line-height: 1.5; margin-bottom: 8px; }
.dex-acao-corpo .btn { margin-right: 6px; margin-bottom: 6px; }
.dex-acao-detalhe { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.dex-acao-vazia { border-left-color: var(--ok); }
.dex-acao-vazia p { font-size: 12.5px; color: var(--cinza); margin-top: 4px; }

/* Faixa discreta do lançamento mensal já lançado (item 6) — nunca some sem
   ação: sempre dá acesso a Visualizar/Editar/Excluir no topo da aba. */
.dex-lote-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 12px;
  padding: 10px 16px; margin-bottom: 14px;
}
.dex-lote-banner-txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.dex-lote-banner-label { color: var(--cinza); font-weight: 650; }
.dex-lote-banner-txt b { font-size: 15px; }
.dex-lote-banner-meta { color: var(--cinza); font-size: 12.5px; }
.dex-lote-banner-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.dex-lote-btn-excluir { color: var(--bad); border-color: rgba(219,59,59,.35); }
.dex-lote-btn-excluir:hover { background: var(--bad-bg); border-color: var(--bad); }
.dex-lm-nao-informado { color: var(--cinza); font-style: italic; font-weight: 500; }

/* calendário */
.dex-cal-wrap { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra-sm); }
.dex-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-bottom: 16px; }
.dex-cal-dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 4px; border-radius: 10px; font-size: 11px; text-align: center; cursor: default;
}
.dex-cal-dia[data-clicavel] { cursor: pointer; transition: transform var(--t), box-shadow var(--t); }
.dex-cal-dia[data-clicavel]:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.dex-cal-num { font-size: 15px; font-weight: 800; }
.dex-cal-status { font-size: 9.5px; text-transform: uppercase; letter-spacing: .2px; font-weight: 700; }
/* Dia originado de "Lançar faturamento mensal": mesma cor do status, só uma
   borda tracejada discreta + um "~" junto do número — sinaliza "estimado"
   sem inventar uma cor nova nem poluir a grade. */
.dex-cal-dia.estimado, .pill.estimado { border: 1px dashed currentColor; }
.dex-cal-estimado { font-size: 11px; font-weight: 700; opacity: .75; }
/* Legenda em dois grupos (item 2 do pedido de UX) — status do dia primeiro,
   informações financeiras depois, cada um em sua própria linha com espaço
   de sobra entre badge e texto explicativo. */
.dex-legenda { display: flex; flex-direction: column; gap: 10px; }
.dex-legenda-grupo + .dex-legenda-grupo { padding-top: 10px; border-top: 1px dashed var(--linha); }
.dex-legenda-titulo { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza-claro); margin-bottom: 6px; }
.dex-legenda-itens { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
/* O texto explicativo (ex.: "Dia elegível, snapshot ainda não lançado") pode
   ser longo — sem nowrap ele quebra dentro do próprio item em telas
   estreitas, em vez de forçar rolagem horizontal na legenda inteira. */
.dex-leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--cinza); }

/* Badge complementar de Financeiro dentro do dia — nunca a cor principal do
   dia (isso é papel do .pill em .dex-cal-dia); reaproveita as cores
   ok/info que já existem no resto do dashboard, sem criar paleta nova. */
.dex-cal-badge {
  display: inline-block; font-size: 8.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; line-height: 1.5;
}
.dex-cal-badge-fin-ok { background: var(--ok-bg); color: var(--ok); }
.dex-cal-badge-fin-disp { background: var(--info-bg); color: var(--info); }

/* Faixa-resumo compacta acima do calendário (item 4 do pedido de UX) */
.dex-resumo-fin {
  display: flex; gap: 18px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 18px; margin-bottom: 16px; box-shadow: var(--sombra-sm);
}
.dex-resumo-fin-item { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 180px; }
.dex-resumo-fin-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--cinza); }
.dex-resumo-fin-item b { font-size: 18px; }
.dex-resumo-fin-sub { font-size: 12px; color: var(--cinza); }

/* Estados vazio/indicador dos painéis de gráfico (item 8) — nunca um
   gráfico de linha grande e em branco. */
.dex-painel-vazio, .dex-painel-indicador { display: flex; flex-direction: column; justify-content: center; min-height: 120px; text-align: center; }
.dex-vazio-texto { color: var(--cinza); font-size: 13.5px; margin: 0; }
.dex-indicador-valor { font-size: 28px; font-weight: 800; margin: 4px 0; }

/* formulário de lançamento (modal em 5 etapas) */
.dex-modal { max-width: 640px; }
.dex-stepper { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.dex-step {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; background: var(--superficie-2); color: var(--cinza); flex: 0 0 auto;
}
.dex-step.ativo { background: var(--grad-verde); color: #fff; }
.dex-step.feito { background: var(--ok-bg); color: var(--ok); }
.dex-form-corpo { min-height: 160px; }
.dex-form-pergunta { font-size: 14.5px; font-weight: 650; margin-bottom: 12px; }
.dex-form-info { color: var(--cinza); font-size: 13.5px; }
.dex-rascunho-aviso {
  background: var(--warn-bg); color: #6b4d05; border-radius: 9px; padding: 8px 12px;
  margin-bottom: 12px; font-size: 12.5px;
}
.dex-form-na {
  grid-column: 1 / -1; background: var(--superficie-2); border: 1px dashed var(--linha); border-radius: 10px;
  padding: 12px 14px; margin: 0;
}
.dex-radios { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.dex-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.dex-calc-preview {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  background: var(--superficie-2); border-radius: 12px; padding: 14px; margin-top: 14px;
}
.dex-calc-preview > div { display: flex; flex-direction: column; gap: 2px; }
.dex-calc-preview span { font-size: 11px; color: var(--cinza); text-transform: uppercase; font-weight: 700; }
.dex-calc-preview b { font-size: 16px; }
.dex-calc-preview .destaque b { color: var(--verde-vivo); }
.dex-conf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-bottom: 14px; }
.dex-conf-item { display: flex; justify-content: space-between; font-size: 13.5px; border-bottom: 1px dashed var(--linha); padding-bottom: 6px; }
.dex-avisos { background: var(--warn-bg); border: 1px solid rgba(196,138,18,.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.dex-avisos ul { margin: 8px 0; padding-left: 18px; font-size: 13px; }
.dex-motivo-correcao { margin-top: 4px; }
.dex-form-acoes { flex-wrap: wrap; }

/* Reset de dia — só existe em unidade de teste; visual deliberadamente "de
   desenvolvedor", nunca parecido com uma ação operacional normal. */
.dex-btn-reset-teste { align-self: flex-start; border-style: dashed; color: var(--bad); border-color: rgba(219,59,59,.35); }
.dex-btn-reset-teste:hover { background: var(--bad-bg); border-color: var(--bad); }
.dex-avisos-perigo { background: var(--bad-bg); border-color: rgba(219,59,59,.3); }
.dex-avisos-perigo p { margin-bottom: 8px; }
.dex-avisos-perigo p:last-child { margin-bottom: 0; }
.dex-reset-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 650; font-size: 13.5px; }
.dex-reset-lista li { padding-left: 18px; position: relative; }
.dex-reset-lista li::before { content: "🗑️"; position: absolute; left: 0; font-size: 11px; }

@media (max-width: 640px) {
  .dex-cards { grid-template-columns: 1fr; }
  .dex-cal { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
  .dex-conf-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   BONIFICAÇÃO MENSAL — Central de Performance. Redesign completo (hero,
   gauges, gráficos, drawer). Reaproveita o que já existia no resto do
   sistema (pill, vd-pv-*, modal-*, btn) para manter a mesma identidade;
   tudo daqui pra baixo até o fim do arquivo é específico deste módulo.
   Paleta: institucional (vermelho) só como ACCENT — nunca preenchimento
   dominante. Verde=sucesso, laranja=atenção, vermelho=crítico real,
   azul=institucional/projeção, cinza=sem dados (nunca vermelho — item 2).
   =========================================================================== */
.bm-unidade-chip { align-self: center; padding: 7px 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); font-size: 13px; font-weight: 650; color: var(--texto); }
.bm-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; animation: fadeInUp .35s ease both; }
.bm-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.bm-filtros .cfg-campo { min-width: 130px; }
.bm-conteudo { display: flex; flex-direction: column; gap: 22px; }

.bm-secao { animation: fadeInUp .3s ease both; }
.bm-secao-titulo { font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

.bm-card {
  background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px;
  box-shadow: var(--sombra-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bm-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--linha) 60%, var(--cinza-claro)); }
.bm-card-topo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 8px; flex-wrap: wrap; }
.bm-card-topo .pill { margin-left: auto; }
.bm-vazio-inline { font-size: 13px; color: var(--cinza); padding: 6px 0; }

/* Grid responsivo (item 22) — auto-fit se ajusta sozinho: desktop grande
   cabe 4-5 colunas, notebook 3, tablet 2, mobile 1 — sem scroll horizontal. */
.bm-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.bm-metas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* ---------------------------------------------------------------------
   HERO — bonificação atual/projetada (item 1). NUNCA usa cor de "crítico"
   (item 2) — é sempre progresso institucional/positivo.
   --------------------------------------------------------------------- */
.bm-hero {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center;
  background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--card) 92%, var(--ok)));
  border: 1px solid var(--linha); border-radius: 18px; padding: 26px 28px; box-shadow: var(--sombra);
  animation: fadeInUp .4s ease both;
}
.bm-hero-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bm-hero-rotulo { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza); }
.bm-hero-valor { font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.bm-hero-sub { font-size: 13.5px; color: var(--cinza); margin: 4px 0 14px; }
.bm-hero-barra { height: 14px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha); overflow: hidden; }
.bm-hero-barra-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--info), var(--ok));
  transition: width 1s cubic-bezier(.16,1,.3,1);
}
.bm-hero-barra-fill.preenchida { width: var(--pct); }
.bm-caminho { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.bm-caminho-ponta { font-size: 12px; color: var(--cinza-claro); font-weight: 650; white-space: nowrap; }
.bm-caminho-trilho { position: relative; flex: 1; height: 2px; background: var(--linha); border-radius: 2px; }
.bm-caminho-marca { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2.5px solid var(--card); box-shadow: 0 0 0 1.5px var(--ok); transform: translate(-50%, -50%); transition: left .8s cubic-bezier(.16,1,.3,1); }

.bm-hero-stats { display: flex; flex-direction: column; gap: 10px; }
.bm-hero-stat { background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px; }
.bm-hero-stat b { font-size: 20px; font-weight: 800; }
.bm-hero-stat span { font-size: 12.5px; color: var(--cinza); }
.bm-hero-stat.critico { border-color: rgba(219,59,59,.35); background: var(--bad-bg); }
.bm-hero-stat.critico b { color: var(--bad); }

@media (max-width: 900px) { .bm-hero { grid-template-columns: 1fr; } .bm-hero-stats { flex-direction: row; flex-wrap: wrap; } .bm-hero-stat { flex: 1; min-width: 120px; } }

/* ---------------------------------------------------------------------
   EVOLUÇÃO DO FATURAMENTO — gráfico grande + resumo lateral (itens 3-4-11)
   --------------------------------------------------------------------- */
.bm-fat-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; }
.bm-chart-card { min-height: 280px; display: flex; align-items: center; justify-content: center; }
.bm-fat-resumo { display: flex; flex-direction: column; gap: 8px; }
.bm-fat-linha { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--linha); }
.bm-fat-linha:last-of-type { border-bottom: none; }
.bm-fat-linha span { color: var(--cinza); }
.bm-fat-linha b { font-size: 15px; }
.bm-fat-ritmo { font-size: 12.5px; color: var(--cinza); margin: 6px 0 4px; line-height: 1.5; }
@media (max-width: 900px) { .bm-fat-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   PRÓXIMAS CONQUISTAS (item 9)
   --------------------------------------------------------------------- */
.bm-conquistas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bm-conquista-card { background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; transition: transform .18s ease, box-shadow .18s ease; }
.bm-conquista-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.bm-conquista-topo { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.bm-conquista-valores { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.bm-conquista-valores .seta { color: var(--cinza-claro); font-weight: 400; margin: 0 4px; }
.bm-conquista-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-bottom: 8px; }
.bm-conquista-barra > div { height: 100%; background: linear-gradient(90deg, var(--info), var(--ok)); border-radius: 999px; transition: width .6s ease; }
.bm-conquista-baixo { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.bm-conquista-baixo span { color: var(--cinza); }
.bm-conquista-baixo b { color: var(--ok); font-size: 13.5px; }

/* Toast "nova faixa alcançada" (item 19) — discreto, some sozinho. */
.bm-conquista-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border: 1px solid var(--ok); border-left: 4px solid var(--ok); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--sombra); max-width: 340px; font-size: 13px;
  opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .25s ease, transform .25s ease;
}
.bm-conquista-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.bm-conquista-emoji { font-size: 22px; }
.bm-conquista-bonus { color: var(--ok); font-weight: 700; }
.bm-conquista-fechar { margin-left: auto; background: none; border: none; font-size: 16px; color: var(--cinza-claro); cursor: pointer; line-height: 1; }

/* ---------------------------------------------------------------------
   GAUGE semicircular (bebidas/adicionais/diversos/CMV)
   --------------------------------------------------------------------- */
.bm-gauge-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bm-gauge-card.neutro { opacity: .75; }
.bm-gauge-card .bm-card-topo { width: 100%; }
.bm-gauge { width: 100%; max-width: 150px; }
.bm-gauge-trilho { stroke: var(--superficie-2); stroke-width: 14; }
.bm-gauge-fill { stroke-width: 14; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); }
.bm-gauge-marco { stroke: var(--texto); opacity: .3; }
.bm-gauge-marco.atingido { opacity: .6; }
.bm-gauge-valor { font-size: 22px; font-weight: 800; margin-top: -14px; }
.bm-gauge-detalhe { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--cinza); margin-top: 8px; width: 100%; text-align: left; }
.bm-gauge-detalhe b { color: var(--texto); }
.bm-menor-melhor { font-size: 10.5px; color: var(--cinza-claro); font-weight: 500; display: block; }
.bm-fonte { font-size: 10.5px; color: var(--cinza-claro); display: block; margin-top: 6px; }

.bm-card-spark { display: flex; align-items: center; gap: 8px; margin-top: 4px; justify-content: center; }
.bm-spark { width: 84px; height: 26px; }
.bm-tendencia { font-size: 11px; font-weight: 650; padding: 2px 7px; border-radius: 999px; }
.bm-tendencia.melhorando { color: var(--ok); background: var(--ok-bg); }
.bm-tendencia.piorando { color: var(--bad); background: var(--bad-bg); }
.bm-tendencia.estavel { color: var(--cinza); background: var(--superficie-2); }

/* Régua horizontal — Ticket Médio / REV (item 13) */
.bm-regua-card { text-align: left; }
.bm-regua-valor { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.bm-regua-barra { position: relative; height: 9px; border-radius: 999px; background: var(--superficie-2); overflow: visible; margin-bottom: 8px; }
.bm-regua-barra > div { height: 100%; border-radius: 999px; transition: width .8s cubic-bezier(.16,1,.3,1); }
.bm-regua-marco { position: absolute; top: -2px; width: 2px; height: 13px; background: var(--texto); opacity: .35; }

/* ---------------------------------------------------------------------
   ESCADA DE FAIXAS (item 15) — usada em Metas e no resumo de Faturamento.
   --------------------------------------------------------------------- */
.bm-escada { display: flex; align-items: stretch; gap: 0; margin-top: 12px; flex-wrap: wrap; }
.bm-escada-passo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 84px; flex: 1; }
.bm-escada-bolha {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 750; background: var(--superficie-2); border: 2px solid var(--linha); color: var(--cinza);
}
.bm-escada-passo.concluida .bm-escada-bolha { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.bm-escada-passo.atual .bm-escada-bolha { background: var(--info); border-color: var(--info); color: #fff; box-shadow: 0 0 0 4px var(--info-bg); animation: bmPulso 1.8s ease-in-out infinite; }
.bm-escada-txt { display: flex; flex-direction: column; }
.bm-escada-txt b { font-size: 12px; }
.bm-escada-txt span { font-size: 11px; color: var(--cinza); }
.bm-escada-passo.concluida .bm-escada-txt span { color: var(--ok); font-weight: 650; }
.bm-escada-linha { flex: 0 0 24px; height: 2px; background: var(--linha); align-self: center; margin-top: -22px; }
.bm-escada-linha.concluida { background: var(--ok); }
@keyframes bmPulso { 0%, 100% { box-shadow: 0 0 0 4px var(--info-bg); } 50% { box-shadow: 0 0 0 7px var(--info-bg); } }

.bm-meta-card .bm-escada { margin-top: 14px; }
.bm-meta-card [data-editar-meta] { margin-top: 14px; }

/* Editor de faixas (modal "Editar meta", item 76-B) — cada faixa é uma
   linha própria, com o botão de remover colado à direita. */
.bm-meta-faixa-linha { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; align-items: end; gap: 10px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--linha); }
.bm-meta-faixa-linha .bm-meta-remover { align-self: end; }
#bm-meta-add-faixa { margin: 4px 0 14px; }
@media (max-width: 620px) {
  .bm-meta-faixa-linha { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   EXPERIÊNCIA DO CLIENTE — chips compactos (item 8), não cards gigantes.
   --------------------------------------------------------------------- */
.bm-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bm-chip { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; transition: transform .15s ease; }
.bm-chip:hover { transform: translateY(-1px); }
.bm-chip-icone { font-size: 18px; }
.bm-chip-txt { display: flex; flex-direction: column; flex: 1; }
.bm-chip-txt b { font-size: 12px; color: var(--cinza); font-weight: 650; }
.bm-chip-txt span { font-size: 14px; font-weight: 700; }
.bm-chip-status { font-size: 13px; font-weight: 800; width: 20px; text-align: center; }
.bm-chip.sucesso .bm-chip-status { color: var(--ok); }
.bm-chip.critico .bm-chip-status { color: var(--bad); }
.bm-chip.atencao .bm-chip-status { color: var(--warn); }
.bm-chip.institucional .bm-chip-status { color: var(--info); }
.bm-chip.neutro { opacity: .7; }

/* ---------------------------------------------------------------------
   ALERTAS
   --------------------------------------------------------------------- */
.bm-alertas { display: flex; flex-direction: column; gap: 8px; }
.bm-alerta { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; font-size: 13px; flex-wrap: wrap; }
.bm-alerta.warn { background: var(--warn-bg); border: 1px solid rgba(196,138,18,.25); }
.bm-alerta.info { background: var(--info-bg); border: 1px solid rgba(47,119,196,.25); }
.bm-alerta span { color: var(--cinza); font-size: 12.5px; }

/* ---------------------------------------------------------------------
   LANÇAMENTOS — resumo do topo (item 16)
   --------------------------------------------------------------------- */
.bm-cal-resumo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); }
.bm-cal-resumo-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cinza); }
.bm-cal-resumo-pct { margin-left: auto; display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.bm-cal-resumo-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.bm-cal-resumo-barra > div { height: 100%; background: linear-gradient(90deg, var(--info), var(--ok)); border-radius: 999px; transition: width .6s ease; }
.bm-cal-resumo-pct small { font-size: 11.5px; color: var(--cinza-claro); }

/* ---------------------------------------------------------------------
   DRAWER lateral — detalhe do dia (item 17), substitui o painel inline.
   --------------------------------------------------------------------- */
.bm-drawer-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 14, 0); z-index: 160;
  display: flex; justify-content: flex-end; transition: background .25s ease;
}
.bm-drawer-overlay.aberto { background: rgba(10, 12, 14, .38); }
.bm-drawer {
  width: min(420px, 100vw); height: 100%; background: var(--card); box-shadow: -8px 0 24px rgba(0,0,0,.14);
  padding: 24px 22px; overflow-y: auto; transform: translateX(100%); transition: transform .28s cubic-bezier(.16,1,.3,1);
  position: relative;
}
.bm-drawer-overlay.aberto .bm-drawer { transform: translateX(0); }
.bm-drawer .modal-close { position: absolute; top: 18px; right: 18px; }
.bm-drawer-bloco { margin: 14px 0; }
.bm-drawer-conteudo h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) { .bm-drawer { width: 100vw; } }

/* ---------------------------------------------------------------------
   EMPTY STATE (item 20)
   --------------------------------------------------------------------- */
.bm-empty { text-align: center; padding: 64px 24px; background: var(--card); border: 1px dashed var(--linha); border-radius: 18px; }
.bm-empty-icone { font-size: 44px; display: block; margin-bottom: 14px; }
.bm-empty h3 { font-size: 19px; margin-bottom: 8px; }
.bm-empty p { color: var(--cinza); max-width: 460px; margin: 0 auto 18px; font-size: 13.5px; line-height: 1.6; }

/* ---------------------------------------------------------------------
   ELEGIBILIDADE DA BONIFICAÇÃO (.bm-elegibilidade) e agrupamento SUPER
   RESTAURANTE (.bm-criterio-card/.bm-super-resumo) — dois conceitos
   diferentes que reaproveitam a mesma paleta (item 2 do topo do arquivo):
   "não elegível"/"fora da meta" usa atenção (laranja), nunca crítico/
   vermelho (evitar cor de alerta agressiva num resultado consultivo).
   --------------------------------------------------------------------- */
.bm-hero-nota { font-size: 12.5px; color: var(--cinza); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linha); line-height: 1.5; }

.bm-elegibilidade { border-left: 4px solid var(--linha); }
.bm-elegibilidade-titulo { font-size: 22px; font-weight: 800; margin: 2px 0 6px; }
.bm-elegibilidade.sucesso { border-left-color: var(--ok); background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--card) 94%, var(--ok))); }
.bm-elegibilidade.sucesso .bm-elegibilidade-titulo { color: var(--ok); }
.bm-elegibilidade.atencao { border-left-color: var(--warn); background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--card) 94%, var(--warn))); }
.bm-elegibilidade.atencao .bm-elegibilidade-titulo { color: var(--warn); }
.bm-elegibilidade.institucional { border-left-color: var(--info); background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--card) 94%, var(--info))); }
.bm-elegibilidade.institucional .bm-elegibilidade-titulo { color: var(--info); }

.bm-motivos { margin: 8px 0 4px; padding-left: 18px; font-size: 13px; color: var(--texto); line-height: 1.7; }
.bm-motivos li::marker { color: var(--warn); }
.bm-motivos-nota { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linha); font-style: italic; }

.bm-criterio-card { border-left: 3px solid var(--linha); }
.bm-criterio-card.sucesso { border-left-color: var(--ok); }
.bm-criterio-card.sucesso .bm-gauge-valor { color: var(--ok); }
.bm-criterio-card.atencao { border-left-color: var(--warn); }
.bm-criterio-card.atencao .bm-gauge-valor { color: var(--warn); }
.bm-criterio-card.neutro { border-left-color: var(--linha); opacity: .82; }
.bm-criterio-card[data-criterio] { cursor: pointer; }
.bm-criterio-card[data-criterio]:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Resumo do agrupamento Super Restaurante ("X de 3 indicadores dentro da
   meta") — texto simples, nunca um card/banner com pontuação própria (o
   agrupamento não tem média nem percentual geral, só a contagem). */
.bm-super-resumo { font-size: 14px; font-weight: 700; margin: 10px 0 2px; }
.bm-super-resumo.sucesso { color: var(--ok); }
.bm-super-resumo.atencao { color: var(--warn); }
.bm-super-resumo.neutro { color: var(--cinza); }

/* Drawer largo — reaproveita o calendário diário (bonificacaoMensalIndicadorManual.js)
   dentro do drawer em vez de aba própria; precisa de mais espaço que o drawer padrão. */
.bm-drawer-largo { width: min(620px, 100vw); }
@media (max-width: 700px) { .bm-drawer-largo { width: 100vw; } }

/* ---------------------------------------------------------------------
   HISTÓRICO
   --------------------------------------------------------------------- */
.bm-historico-card { text-align: left; }

@media (max-width: 700px) {
  .bm-hero-valor { font-size: 32px; }
  .bm-grid-cards, .bm-metas-grid, .bm-conquistas, .bm-chips { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .bm-grid-cards, .bm-metas-grid, .bm-conquistas, .bm-chips { grid-template-columns: 1fr; }
}

/* Modal "Importar Visio" */
.bm-modal { max-width: 640px; }
.bm-imp-form { display: flex; flex-direction: column; gap: 14px; }
.bm-imp-data { max-width: 220px; }
.bm-drop-titulo { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.bm-drop-desc { font-size: 12.5px; color: var(--cinza); margin-bottom: 8px; }
.bm-drop-area {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 14px; border-radius: 12px; border: 1.5px dashed var(--linha); background: var(--superficie-2);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.bm-drop-area:hover, .bm-drop-area:focus-visible { border-color: var(--info); outline: none; }
.bm-drop.arrastando .bm-drop-area { border-color: var(--info); background: var(--info-bg); }
.bm-drop.preenchido .bm-drop-area { border-color: var(--ok); background: var(--ok-bg); }
.bm-drop-icone { font-size: 22px; }
.bm-drop-txt { font-size: 13px; color: var(--texto); }
.bm-drop-txt u { color: var(--info); text-decoration: none; }
.bm-drop-area em { font-size: 12px; color: var(--cinza-claro); font-style: normal; }

.bm-pv-bloco { margin-bottom: 10px; }
.bm-pv-bloco > b { display: block; font-size: 13px; margin-bottom: 4px; }
.bm-pv-corrigir { margin-top: 10px; border-top: 1px dashed var(--linha); padding-top: 10px; }
.bm-pv-corrigir summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--info); }
.bm-pv-corrigir .cfg-form-grid { margin-top: 10px; }

/* ---------- Parser Food Delivery ---------- */
.pfd-modal { max-width: 620px; }
.pfd-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; border-radius: 8px; }
.pfd-cod-form { display: flex; gap: 8px; margin-top: 10px; }
.pfd-cod-form input { flex: 1; padding: 9px 12px; border: 1.5px solid var(--linha); border-radius: 9px; background: var(--campo-bg); color: var(--texto); font-size: 13px; }
.pfd-cod-form input:focus { outline: none; border-color: var(--verde-vivo); box-shadow: 0 0 0 3px rgba(216,19,36,.13); }
#pfd-cod-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; min-height: 30px; }
#pfd-cod-chips .vd-chip { cursor: pointer; }
.pfd-chip-ok { background: var(--ok-bg); border-color: rgba(14,157,87,.25); color: var(--ok); }
.pfd-chip-aviso { background: var(--warn-bg); border-color: rgba(196,138,18,.3); color: var(--warn); }
.pfd-chip-erro { background: var(--bad-bg); border-color: rgba(219,59,59,.3); color: var(--bad); }

/* ---------- Parser Food Delivery — reformulação (Central de Conciliação) ---------- */
/* Navegação de período: chips rápidos + intervalo personalizado + setas ‹ › */
.pfd-periodo-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pfd-periodo-custom { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cinza); }
.pfd-periodo-custom input[type="date"] { padding: 6px 9px; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--campo-bg); color: var(--texto); font-size: 12.5px; }
.pfd-periodo-setas { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--texto); white-space: nowrap; }
.pfd-periodo-setas .btn { padding: 4px 10px; font-size: 15px; line-height: 1; }

/* "Última importação: ..." discreto + botão de detalhes (item 6 do pedido) */
.pfd-ultima-import { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--cinza); margin-bottom: 14px; }
.pfd-ultima-import b { color: var(--texto); }

/* 4 cards principais da Visão Geral — .vd-cards já cai em 3/2/1 colunas
   via media query própria (620/400px); aqui só fixamos o desktop em 4 e
   levamos o mesmo degrau intermediário pra não squeezar em telas médias
   (regra sem media query vence a base ".vd-cards" de 6 colunas por vir
   depois no arquivo; as media queries abaixo, por sua vez, vencem esta). */
.pfd-kpis { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .pfd-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .pfd-kpis { grid-template-columns: 1fr; } }

/* Indicadores secundários compactos (chips, não cards) */
.pfd-indicadores-sec { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Distribuição do relatório — barra proporcional empilhada + legenda */
.pfd-dist-bar { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); margin-top: 8px; }
.pfd-dist-segment { height: 100%; min-width: 2px; transition: width .5s ease; }
.pfd-dist-ok { background: var(--ok); }
.pfd-dist-info { background: var(--info); }
.pfd-dist-muted { background: var(--muted); }
.pfd-dist-warn { background: var(--warn); }
.pfd-dist-bad { background: var(--bad); }
.pfd-dist-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--cinza); }
.pfd-dist-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.pfd-dist-leg-item b { color: var(--texto); }
.pfd-dist-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pfd-dist-dot.pfd-dist-ok { background: var(--ok); }
.pfd-dist-dot.pfd-dist-info { background: var(--info); }
.pfd-dist-dot.pfd-dist-muted { background: var(--muted); }
.pfd-dist-dot.pfd-dist-warn { background: var(--warn); }
.pfd-dist-dot.pfd-dist-bad { background: var(--bad); }

/* Conciliação — taxas encontradas / descartadas / valor final */
.pfd-conciliacao { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; margin-top: 18px; }
.pfd-conc-linha { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--cinza); padding: 4px 0; }
.pfd-conc-linha b { color: var(--texto); font-variant-numeric: tabular-nums; }
.pfd-conc-linha.pfd-conc-neg b { color: var(--bad); }
.pfd-conc-divisor { height: 1px; background: var(--linha); margin: 8px 0; }
.pfd-conc-linha.pfd-conc-final { font-size: 16px; font-weight: 800; }
.pfd-conc-linha.pfd-conc-final span { color: var(--texto); font-weight: 700; }
.pfd-conc-linha.pfd-conc-final b { color: var(--verde-med); font-size: 19px; }

/* Timeline do pedido cancelado (reaproveita .hist-timeline/.hist-evento) */
.pfd-timeline-dot { background: var(--grad-verde); font-size: 13px; }
.pfd-timeline-dot-cancelado { background: var(--bad); }
.pfd-override-textarea { width: 100%; margin-top: 8px; min-height: 70px; padding: 9px 12px; border: 1.5px solid var(--linha); border-radius: 9px; background: var(--campo-bg); color: var(--texto); font: inherit; resize: vertical; }

@media (max-width: 700px) {
  .pfd-periodo-setas { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* ===================== AGENTE CRESCER (chat) ===================== */
.agente { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 420px; }
.agente-cabecalho { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; }
.agente-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vermelho-tint); color: var(--verde-med); flex-shrink: 0; }
.agente-cabecalho h2 { font-size: 17px; font-weight: 800; margin: 0 0 2px; }
.agente-cabecalho p { font-size: 13px; color: var(--cinza); margin: 0; max-width: 560px; }
.agente-cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.agente-log { flex: 1; overflow-y: auto; padding: 4px 2px 12px; display: flex; flex-direction: column; gap: 12px; }
.agente-msg { display: flex; flex-direction: column; max-width: 78%; }
.agente-msg-usuario { align-self: flex-end; align-items: flex-end; }
.agente-msg-agente { align-self: flex-start; align-items: flex-start; }
.agente-bolha {
  padding: 11px 15px; border-radius: var(--raio); font-size: 14px; line-height: 1.5; white-space: pre-wrap;
  box-shadow: var(--sombra-sm); animation: fadeInUp .25s ease both;
}
.agente-msg-usuario .agente-bolha { background: var(--grad-verde, var(--verde)); color: #fff; border-bottom-right-radius: 4px; }
.agente-msg-agente .agente-bolha { background: var(--card); border: 1px solid var(--linha); color: var(--texto); border-bottom-left-radius: 4px; }
.agente-bolha.agente-erro { background: var(--bad-bg); color: var(--bad); border-color: rgba(219,59,59,.2); }
.agente-bolha.agente-carregando { color: var(--cinza); font-style: italic; }
/* Markdown mínimo renderizado dentro da bolha do agente (ver markdown.js) */
.agente-bolha strong { font-weight: 750; }
.agente-bolha strong.md-titulo { display: block; font-size: 14.5px; margin: 2px 0; }
.agente-bolha code { background: var(--superficie-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.agente-bolha ul { margin: 4px 0 4px 18px; padding: 0; }
.agente-bolha li { margin: 2px 0; }
.agente-tools { font-size: 11.5px; color: var(--cinza-claro); margin-top: 4px; display: flex; align-items: center; gap: 5px; padding: 0 4px; }

/* Ações de navegação sugeridas (Etapa F.1) — nunca links HTML soltos, sempre botões. */
.agente-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.agente-acao-btn { color: var(--verde-med); border-color: var(--verde-med); }
.agente-acao-btn:disabled { opacity: .6; cursor: default; }

.agente-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.agente-chip {
  border: 1.5px solid var(--linha); background: var(--card); color: var(--texto); font-size: 13px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: border-color var(--t), background var(--t);
}
.agente-chip:hover { border-color: var(--verde-vivo); background: var(--vermelho-tint); }

.agente-form { display: flex; gap: 10px; align-items: flex-end; padding-top: 12px; border-top: 1px solid var(--linha); }
.agente-form textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1.5px solid var(--linha);
  border-radius: var(--raio-sm); background: var(--campo-bg); color: var(--texto); font: inherit;
}
.agente-form textarea:focus { outline: none; border-color: var(--verde-vivo); }
.agente-form button { flex-shrink: 0; }

@media (max-width: 700px) {
  .agente { height: calc(100vh - 190px); }
  .agente-msg { max-width: 92%; }
}

/* Botão do topbar — discreto, mesma família visual dos demais ícones de ação (btn-refresh/btn-notif). */
.agente-btn-topbar span { font-size: 17px; line-height: 1; font-weight: 700; color: var(--verde-med); }

/* Botão contextual dentro das telas ("✦ Analisar..." — dashboardExecutivo.js/views.js/insumos.js/parserFoodDelivery.js/produtoModal.js/insumoModal.js). */
.agente-btn-contextual { color: var(--verde-med); border-color: var(--verde-med); }

/* Indicador de contexto do painel — "Analisando: X · MM/AAAA" / "Contexto: Y". */
.agente-contexto {
  font-size: 12px; color: var(--verde-med); background: var(--vermelho-tint); border-radius: 999px;
  padding: 5px 12px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 6px;
  width: fit-content; flex-shrink: 0;
}

/* ===================== AGENTE CRESCER — PAINEL GLOBAL (drawer persistente) =====================
   Mesmo padrão técnico/visual do drawer já usado em Bonificação Mensal e no
   Parser Food Delivery (.bm-drawer/.bm-drawer-overlay) — não copiado
   cegamente: ESTE drawer nunca é removido do DOM ao fechar (ver
   agentePainel.js) porque é a MESMA conversa persistente, não um conteúdo
   novo a cada abertura. */
.agente-painel-overlay {
  position: fixed; inset: 0; z-index: 170;
  /* Desktop: SEM overlay bloqueando a tela por trás, mesmo aberto — o
     objetivo é conversar com o Agente enquanto se observa o sistema (não é
     um modal). Só o drawer em si intercepta clique; o resto da tela
     continua 100% utilizável. */
  background: transparent; pointer-events: none;
}
.agente-painel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 100vw);
  background: var(--card); box-shadow: -8px 0 32px rgba(0,0,0,.16); pointer-events: auto;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; padding: 20px 20px 16px;
}
.agente-painel-overlay.aberto .agente-painel { transform: translateX(0); }
.agente-painel .agente-cabecalho, .agente-painel .agente-form { flex-shrink: 0; }
.agente-painel .agente-log { flex: 1; min-height: 0; }
.agente-fechar { position: static; width: 30px; height: 30px; font-size: 18px; }

@media (max-width: 620px) {
  /* Mobile: painel quase/full-screen -> volta a se comportar como um drawer
     normal (overlay real, fecha ao clicar fora). */
  .agente-painel-overlay.aberto { background: rgba(6,40,25,.45); pointer-events: auto; }
  .agente-painel { width: 100vw; }
}