@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');/* ════════════════════════════════════════════════════════════════
   Nacional Vision — Design Tokens (Etapa 1)
   Fonte única de verdade para o redesign visual.
   Tokens com prefixo --nv-* para não colidir com os tokens legados.
   Aditivo: não remove nem sobrescreve estilos antigos.
   Objetivo visual: Stripe Dashboard + Power BI moderno + Nacional Vision.
════════════════════════════════════════════════════════════════ */

:root {
  /* ─── FUNDOS ─── */
  --nv-bg: #f8fafc;
  --nv-surface: #ffffff;
  --nv-surface-subtle: #f1f5f9;
  --nv-surface-muted: #f8fafc;

  /* ─── TEXTO ─── */
  --nv-text: #0f172a;
  --nv-text-muted: #64748b;
  --nv-text-soft: #94a3b8;
  --nv-text-inverse: #ffffff;

  /* ─── BORDAS ─── */
  --nv-border: #e2e8f0;
  --nv-border-strong: #cbd5e1;

  /* Foco unificado do Design System (a11y + padrão visual azul corporativo) */
  --nv-focus-ring: 0 0 0 3px rgba(30, 64, 175, 0.28);
  --nv-focus-ring-inset: inset 0 0 0 2px rgba(30, 64, 175, 0.38);
  --nv-focus-outline: 2px solid #1e40af;
  --nv-focus-outline-offset: 2px;

  /* ─── MARCA — Nacional Vision (azul corporativo) ─── */
  --nv-blue: #2563eb;
  --nv-blue-strong: #1e40af;
  --nv-blue-soft: #eff6ff;
  --nv-blue-border: rgba(37, 99, 235, 0.28);

  /* ─── MARCA — Nacional Carnes (vinho) ─── */
  --nv-brand: #8b1d18;
  --nv-brand-soft: #fef2f2;
  --nv-brand-border: rgba(139, 29, 24, 0.22);

  /* ─── SEMÂNTICAS ─── */
  --nv-success: #16a34a;
  --nv-success-soft: #f0fdf4;
  --nv-success-border: rgba(22, 163, 74, 0.24);

  --nv-warning: #f59e0b;
  --nv-warning-soft: #fffbeb;
  --nv-warning-border: rgba(245, 158, 11, 0.26);

  --nv-danger: #dc2626;
  --nv-danger-soft: #fef2f2;
  --nv-danger-border: rgba(220, 38, 38, 0.24);

  /* ─── RAIOS ─── */
  --nv-radius-sm: 8px;
  --nv-radius-md: 12px;
  --nv-radius-lg: 16px;
  --nv-radius-card: 18px;
  --nv-radius-pill: 999px;

  /* ─── ESPAÇAMENTO (escala fixa 4/8/12/16/24/32) ─── */
  --nv-space-1: 4px;
  --nv-space-2: 8px;
  --nv-space-3: 12px;
  --nv-space-4: 16px;
  --nv-space-5: 20px;
  --nv-space-6: 24px;
  --nv-space-8: 32px;

  /* ─── TIPOGRAFIA ─── */
  --nv-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nv-text-page-title: clamp(24px, 2.2vw, 30px);
  --nv-text-section: clamp(16px, 1.4vw, 20px);
  --nv-text-value: clamp(22px, 1.9vw, 30px);
  --nv-text-body: 14px;
  --nv-text-table: 13px;
  --nv-text-label: 11px;

  /* ─── SOMBRAS ─── */
  --nv-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --nv-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --nv-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
  --nv-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.08);

  /* ─── TRANSIÇÕES ─── */
  --nv-transition: 0.18s ease;

  /* ─── LAYOUT ─── */
  --nv-sidebar-width: 236px;
  --nv-content-max: 1720px;

  /* ─── GRAFICOS ─── */
  --nv-chart-blue: #2563eb;
  --nv-chart-blue-2: #60a5fa;
  --nv-chart-green: #16a34a;
  --nv-chart-amber: #f59e0b;
  --nv-chart-red: #ef4444;
  --nv-chart-grid: rgba(148, 163, 184, 0.22);
  --nv-chart-axis: #94a3b8;
}

/* ─── DARK THEME (quando data-theme='dark') ───
   Espelha apenas os tokens de superfície/texto para que componentes
   novos (--nv-*) acompanhem o tema sem depender de !important. */
:root[data-theme='dark'] {
  --nv-bg: #0d1220;
  --nv-surface: #111827;
  --nv-surface-subtle: #161f32;
  --nv-surface-muted: #0d1220;

  --nv-text: #f0f6ff;
  --nv-text-muted: #8ba3c0;
  --nv-text-soft: #4a607a;

  --nv-border: rgba(255, 255, 255, 0.08);
  --nv-border-strong: rgba(255, 255, 255, 0.14);

  --nv-blue-soft: rgba(37, 99, 235, 0.16);
  --nv-brand-soft: rgba(139, 29, 24, 0.16);
  --nv-success-soft: rgba(22, 163, 74, 0.14);
  --nv-warning-soft: rgba(245, 158, 11, 0.14);
  --nv-danger-soft: rgba(220, 38, 38, 0.14);

  --nv-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4);
  --nv-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);

  --nv-chart-grid: rgba(148, 163, 184, 0.16);
}
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — colors.css (camada aditiva)
   ─────────────────────────────────────────────────────────────────
   NÃO redefine os tokens --nv-* do tokens.css. Apenas:
     • documenta a paleta oficial (referência rápida);
     • adiciona uma SEQUÊNCIA categórica para gráficos (--nv-seq-*);
     • expõe a paleta como classes utilitárias de cor (texto/fundo/borda).
   Carregado DEPOIS de tokens.css (ver main.tsx).
═══════════════════════════════════════════════════════════════════

   PALETA OFICIAL (definida em tokens.css — não mexer aqui):
   ┌──────────────────────────────┬──────────────────────────────────┐
   │ MARCA — Nacional Vision      │ --nv-blue / --nv-blue-strong      │
   │ MARCA — Nacional Carnes      │ --nv-brand (vinho #8b1d18)        │
   │ Sucesso                      │ --nv-success (#16a34a)            │
   │ Aviso                        │ --nv-warning (#f59e0b)            │
   │ Perigo                       │ --nv-danger  (#dc2626)            │
   │ Fundo / superfície / sutil   │ --nv-bg / --nv-surface / *-subtle │
   │ Texto / muted / soft         │ --nv-text / *-muted / *-soft      │
   │ Borda / borda forte          │ --nv-border / --nv-border-strong  │
   └──────────────────────────────┴──────────────────────────────────┘
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── SEQUÊNCIA CATEGÓRICA PARA GRÁFICOS ───
     Use em ordem: série 1 = --nv-seq-1, série 2 = --nv-seq-2, ...
     Acompanha o tema (gráficos sempre legíveis em dark/light). */
  --nv-seq-1: #2563eb;
  --nv-seq-2: #16a34a;
  --nv-seq-3: #f59e0b;
  --nv-seq-4: #8b1d18;
  --nv-seq-5: #0ea5e9;
  --nv-seq-6: #0f766e; /* teal escuro — substitui roxo #9333ea para identidade 100% azul corporativo */
  --nv-seq-7: #db2777;
  --nv-seq-8: #475569;
}

/* ─── UTILITÁRIOS DE COR DE TEXTO ───
   (nv-muted / nv-text-success / nv-text-warning / nv-text-danger já
    existem em base.css; estes completam a série.) */
.nv-text-blue { color: var(--nv-blue); }
.nv-text-brand { color: var(--nv-brand); }
.nv-text-soft { color: var(--nv-text-soft); }
.nv-text-inverse { color: var(--nv-text-inverse); }

/* ─── UTILITÁRIOS DE COR DE FUNDO (suaves) ─── */
.nv-bg-base { background: var(--nv-bg); }
.nv-bg-surface { background: var(--nv-surface); }
.nv-bg-subtle { background: var(--nv-surface-subtle); }
.nv-bg-muted { background: var(--nv-surface-muted); }
.nv-bg-blue-soft { background: var(--nv-blue-soft); }
.nv-bg-brand-soft { background: var(--nv-brand-soft); }
.nv-bg-success-soft { background: var(--nv-success-soft); }
.nv-bg-warning-soft { background: var(--nv-warning-soft); }
.nv-bg-danger-soft { background: var(--nv-danger-soft); }

/* ─── UTILITÁRIOS DE BORDA ─── */
.nv-border-default { border: 1px solid var(--nv-border); }
.nv-border-strong { border: 1px solid var(--nv-border-strong); }
.nv-border-blue { border: 1px solid var(--nv-blue-border); }
.nv-border-bottom { border-bottom: 1px solid var(--nv-border); }
.nv-border-top { border-top: 1px solid var(--nv-border); }
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — typography.css (camada aditiva)
   ─────────────────────────────────────────────────────────────────
   Escala tipográfica (tokens definidos em tokens.css):
     --nv-text-page-title  clamp(24,2.2vw,30)   título de página
     --nv-text-section     clamp(16,1.4vw,20)   título de seção
     --nv-text-value       clamp(22,1.9vw,30)   valor de KPI
     --nv-text-body        14px                  corpo padrão
     --nv-text-table       13px                  células de tabela
     --nv-text-label       11px                  rótulos/eyebrows
   Aqui apenas EXPOMOS a escala como classes utilitárias reutilizáveis.
═══════════════════════════════════════════════════════════════════ */

.nv-h1 {
  margin: 0;
  font-size: var(--nv-text-page-title);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.nv-h2 {
  margin: 0;
  font-size: var(--nv-text-section);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.nv-value {
  font-size: var(--nv-text-value);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.04;
  font-variant-numeric: tabular-nums;
}

.nv-lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--nv-text-muted);
}

.nv-body {
  font-size: var(--nv-text-body);
  line-height: 1.5;
  color: var(--nv-text);
}

.nv-table-text {
  font-size: var(--nv-text-table);
  line-height: 1.4;
}

.nv-label {
  color: var(--nv-text-muted);
  font-size: var(--nv-text-label);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Números sempre tabulares (alinhamento de colunas) */
.nv-mono { font-variant-numeric: tabular-nums; }

/* Trunca texto em uma linha com reticências */
.nv-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Limita a N linhas (classe utilitária: .nv-clamp-2) */
.nv-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — spacing.css (camada aditiva)
   ─────────────────────────────────────────────────────────────────
   Escala de espaçamento fixa (definida em tokens.css):
     --nv-space-1 = 4px     --nv-space-4 = 16px
     --nv-space-2 = 8px     --nv-space-5 = 20px
     --nv-space-3 = 12px    --nv-space-6 = 24px
                           --nv-space-8 = 32px
   Aqui apenas EXPOMOS essa escala como utilitários de padding,
   margin e gap. Não cria nem altera tokens.
═══════════════════════════════════════════════════════════════════ */

/* ─── GAP (flex/grid) ─── */
.nv-gap-1 { gap: var(--nv-space-1); }
.nv-gap-2 { gap: var(--nv-space-2); }
.nv-gap-3 { gap: var(--nv-space-3); }
.nv-gap-4 { gap: var(--nv-space-4); }
.nv-gap-5 { gap: var(--nv-space-5); }
.nv-gap-6 { gap: var(--nv-space-6); }
.nv-gap-8 { gap: var(--nv-space-8); }

/* ─── PADDING (4 lados) ─── */
.nv-p-1 { padding: var(--nv-space-1); }
.nv-p-2 { padding: var(--nv-space-2); }
.nv-p-3 { padding: var(--nv-space-3); }
.nv-p-4 { padding: var(--nv-space-4); }
.nv-p-5 { padding: var(--nv-space-5); }
.nv-p-6 { padding: var(--nv-space-6); }
.nv-p-8 { padding: var(--nv-space-8); }

/* ─── PADDING HORIZONTAL / VERTICAL ─── */
.nv-px-2 { padding-left: var(--nv-space-2); padding-right: var(--nv-space-2); }
.nv-px-3 { padding-left: var(--nv-space-3); padding-right: var(--nv-space-3); }
.nv-px-4 { padding-left: var(--nv-space-4); padding-right: var(--nv-space-4); }
.nv-px-5 { padding-left: var(--nv-space-5); padding-right: var(--nv-space-5); }
.nv-px-6 { padding-left: var(--nv-space-6); padding-right: var(--nv-space-6); }
.nv-py-2 { padding-top: var(--nv-space-2); padding-bottom: var(--nv-space-2); }
.nv-py-3 { padding-top: var(--nv-space-3); padding-bottom: var(--nv-space-3); }
.nv-py-4 { padding-top: var(--nv-space-4); padding-bottom: var(--nv-space-4); }
.nv-py-5 { padding-top: var(--nv-space-5); padding-bottom: var(--nv-space-5); }
.nv-py-6 { padding-top: var(--nv-space-6); padding-bottom: var(--nv-space-6); }

/* ─── MARGIN (top/bottom — os mais usados) ─── */
.nv-mt-2 { margin-top: var(--nv-space-2); }
.nv-mt-3 { margin-top: var(--nv-space-3); }
.nv-mt-4 { margin-top: var(--nv-space-4); }
.nv-mt-6 { margin-top: var(--nv-space-6); }
.nv-mt-8 { margin-top: var(--nv-space-8); }
.nv-mb-2 { margin-bottom: var(--nv-space-2); }
.nv-mb-3 { margin-bottom: var(--nv-space-3); }
.nv-mb-4 { margin-bottom: var(--nv-space-4); }
.nv-mb-6 { margin-bottom: var(--nv-space-6); }
.nv-mb-8 { margin-bottom: var(--nv-space-8); }
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — Base utilities (Etapa 1)
   Classes utilitárias que consomem os tokens --nv-*.
   Aditivo: não altera estilos legados; apenas oferece primitivas
   para os novos componentes do redesign.
════════════════════════════════════════════════════════════════ */

.nv-surface {
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-card);
  box-shadow: var(--nv-shadow-card);
  color: var(--nv-text);
}

.nv-stack {
  display: grid;
  gap: var(--nv-space-4);
}

.nv-row {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  flex-wrap: wrap;
}

.nv-kicker {
  margin: 0 0 var(--nv-space-2);
  color: var(--nv-blue);
  font-size: var(--nv-text-label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nv-muted { color: var(--nv-text-muted); }
.nv-text-success { color: var(--nv-success); }
.nv-text-warning { color: var(--nv-warning); }
.nv-text-danger { color: var(--nv-danger); }
.nv-mono { font-variant-numeric: tabular-nums; }

/* ── Foco unificado do Design System ─────────────────────────────
   Anel azul corporativo consistente para qualquer elemento
   interativo que ainda não tenha foco premium explícito.
   Puramente visual; não altera navegação, fluxos ou componentes. */

:where(a, button, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible {
  outline: var(--nv-focus-outline);
  outline-offset: var(--nv-focus-outline-offset);
  border-radius: 6px;
}

/* Não reintroduzir outline em controles que já têm foco premium via
   box-shadow no shell do FilterField — evita anel duplicado.
   (Botões, tabs e chips canônicos já vencem por especificidade
   sobre o seletor :where() acima.) */
.nv-filter-control-shell > input:focus-visible,
.nv-filter-control-shell > select:focus-visible,
.nv-filter-control-shell > textarea:focus-visible {
  outline: none;
}
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — layout.css (camada aditiva)
   ─────────────────────────────────────────────────────────────────
   Primitivas de layout de página/seção/grid. Complementa (não
   substitui) os utilitários de base.css (.nv-surface, .nv-stack,
   .nv-row, .nv-kicker). Tudo consome tokens --nv-*.
═══════════════════════════════════════════════════════════════════ */

/* ─── Página (container centralizada + espaçamento padrão) ─── */
.nv-page {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-5);
  width: 100%;
  max-width: var(--nv-content-max);
  margin: 0 auto;
  min-width: 0;
}

.nv-page-body {
  padding: var(--nv-space-4) var(--nv-space-6) var(--nv-space-8);
}

/* ─── Grids ─── */
.nv-grid {
  display: grid;
  gap: var(--nv-space-4);
  min-width: 0;
}

.nv-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nv-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nv-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Auto-fit para KPIs e cards (encolhe gracefully em telas estreitas) */
.nv-grid-auto-kpi {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.nv-grid-auto-card {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* Variações de stack mais justas que .nv-stack (gap 16) */
.nv-stack-tight { display: grid; gap: var(--nv-space-2); }
.nv-stack-sm { display: grid; gap: var(--nv-space-3); }

/* Span de coluna (use dentro de um .nv-grid-cols-N) */
.nv-col-span-2 { grid-column: span 2; }

/* ─── Responsivo ─── */
@media (max-width: 980px) {
  .nv-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nv-grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .nv-page-body { padding: var(--nv-space-3); }
  .nv-grid-cols-2,
  .nv-grid-cols-3,
  .nv-grid-cols-4 { grid-template-columns: 1fr; }
  .nv-col-span-2 { grid-column: auto; }
}
/* Nacional Vision — UI primitives (Etapa 2)
   Componentes novos com prefixo nv-* para coexistir com o CSS legado. */

.nv-card {
  min-width: 0;
  background: var(--nv-surface);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-card);
  box-shadow: var(--nv-shadow-card);
  color: var(--nv-text);
}

.nv-kpi-card {
  position: relative;
  display: grid;
  gap: var(--nv-space-3);
  align-content: start;
  min-height: 132px;
  padding: var(--nv-space-5);
  overflow: hidden;
}

.nv-kpi-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--nv-blue);
}

.nv-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nv-space-3);
}

.nv-kpi-title {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  min-width: 0;
}

.nv-kpi-title > span:last-child {
  color: var(--nv-text-muted);
  font-size: var(--nv-text-label);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.nv-kpi-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--nv-radius-pill);
  color: var(--nv-blue);
  background: var(--nv-blue-soft);
}

.nv-kpi-card strong {
  color: var(--nv-text);
  font-size: var(--nv-text-value);
  line-height: 1.04;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.nv-kpi-card p,
.nv-kpi-card small {
  margin: 0;
  color: var(--nv-text-muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.nv-kpi-success::before { background: var(--nv-success); }
.nv-kpi-warning::before { background: var(--nv-warning); }
.nv-kpi-danger::before { background: var(--nv-danger); }
.nv-kpi-brand::before { background: var(--nv-brand); }
.nv-kpi-blue::before { background: var(--nv-blue); }
.nv-kpi-success .nv-kpi-icon { color: var(--nv-success); background: var(--nv-success-soft); }
.nv-kpi-warning .nv-kpi-icon { color: var(--nv-warning); background: var(--nv-warning-soft); }
.nv-kpi-danger .nv-kpi-icon { color: var(--nv-danger); background: var(--nv-danger-soft); }
.nv-kpi-brand .nv-kpi-icon { color: var(--nv-brand); background: var(--nv-brand-soft); }

.nv-filter-bar {
  display: grid;
  gap: var(--nv-space-4);
  padding: var(--nv-space-4);
}

.nv-filter-bar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nv-space-4);
  padding-bottom: var(--nv-space-3);
  border-bottom: 1px solid var(--nv-border);
}

.nv-filter-bar-head strong {
  display: block;
  color: var(--nv-text);
  font-size: 14px;
  line-height: 1.2;
}

.nv-filter-bar-head span,
.nv-filter-bar-head small {
  color: var(--nv-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.nv-active-filters {
  display: flex;
  justify-content: flex-end;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
}

.nv-active-filters span,
.nv-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--nv-radius-pill);
  border: 1px solid var(--nv-border);
  background: var(--nv-surface-subtle);
  color: var(--nv-text-muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.nv-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--nv-space-3);
  align-items: end;
}

.nv-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.nv-filter-field > span {
  color: var(--nv-text-muted);
  font-size: var(--nv-text-label);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nv-filter-actions {
  display: flex;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
  align-items: end;
}

.nv-status-success { color: #047857; background: var(--nv-success-soft); border-color: var(--nv-success-border); }
.nv-status-warning { color: #b45309; background: var(--nv-warning-soft); border-color: var(--nv-warning-border); }
.nv-status-danger { color: #b91c1c; background: var(--nv-danger-soft); border-color: var(--nv-danger-border); }
.nv-status-blue { color: var(--nv-blue-strong); background: var(--nv-blue-soft); border-color: var(--nv-blue-border); }
.nv-status-brand { color: var(--nv-brand); background: var(--nv-brand-soft); border-color: var(--nv-brand-border); }

.nv-empty-state {
  display: grid;
  gap: var(--nv-space-2);
  padding: var(--nv-space-6);
  border: 1px dashed var(--nv-border-strong);
  border-radius: var(--nv-radius-card);
  background: var(--nv-surface-muted);
  color: var(--nv-text-muted);
  text-align: center;
}

.nv-empty-state strong { color: var(--nv-text); }
.nv-empty-state p { margin: 0; }

.nv-skeleton-block {
  display: grid;
  gap: var(--nv-space-3);
  width: 100%;
  padding: var(--nv-space-5);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-card);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow-card);
}

.nv-skeleton-line {
  display: block;
  height: 12px;
  border-radius: var(--nv-radius-pill);
  background: linear-gradient(90deg, var(--nv-surface-subtle) 25%, var(--nv-border) 37%, var(--nv-surface-muted) 63%);
  background-size: 420% 100%;
  animation: nvUiSkeleton 1.35s ease infinite;
}

.nv-skeleton-line-1 { width: 92%; }
.nv-skeleton-line-2 { width: 68%; }
.nv-skeleton-line-3 { width: 45%; }

@keyframes nvUiSkeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.nv-data-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-card);
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow-card);
}

.nv-data-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--nv-text);
  font-size: var(--nv-text-table);
}

.nv-data-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 14px;
  border-bottom: 1px solid var(--nv-border);
  background: var(--nv-surface-subtle);
  color: var(--nv-text-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.nv-data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--nv-border);
  vertical-align: middle;
}

.nv-data-table tr:last-child td { border-bottom: 0; }
.nv-data-table tbody tr:hover { background: var(--nv-blue-soft); }
.nv-data-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.nv-data-table td.is-primary { font-weight: 800; color: var(--nv-text); }

@media (max-width: 720px) {
  .nv-filter-bar-head { display: grid; }
  .nv-active-filters { justify-content: flex-start; }
  .nv-filter-actions > * { flex: 1 1 100%; }
  .nv-data-table { min-width: 0 !important; }
  .nv-data-table,
  .nv-data-table thead,
  .nv-data-table tbody,
  .nv-data-table th,
  .nv-data-table td,
  .nv-data-table tr { display: block; }
  .nv-data-table thead { display: none; }
  .nv-data-table tbody { display: grid; gap: 10px; padding: 10px; }
  .nv-data-table tr { border: 1px solid var(--nv-border); border-radius: 14px; background: var(--nv-surface); overflow: hidden; }
  .nv-data-table td { display: flex; justify-content: space-between; gap: 12px; border-bottom: 0; padding: 8px 10px; text-align: right; }
  .nv-data-table td::before { content: attr(data-label); color: var(--nv-text-muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
  .nv-data-table td.is-primary { display: grid; text-align: left; }
}
/* ════════════════════════════════════════════════════════════════
   Nacional Vision — components.css (camada aditiva)
   ─────────────────────────────────────────────────────────────────
   Estilos dos NOVOS componentes do Design System. É o companheiro
   aditivo de components/ui/ui.css (que cobre Card, KpiCard, FilterBar,
   DataTable, etc.). Aqui ficam: PageHeader, SectionHeader, ChartCard,
   ActionButton. Tudo consome tokens --nv-* (nenhuma cor crua).
═══════════════════════════════════════════════════════════════════ */

/* ══════════════ PageHeader ══════════════ */
.nv-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nv-space-4);
  flex-wrap: wrap;
  padding: var(--nv-space-4) 0 var(--nv-space-5);
}

.nv-page-header-main {
  display: grid;
  gap: var(--nv-space-2);
  min-width: 0;
}

.nv-page-header-kicker {
  display: inline-block;
  width: fit-content;
  color: var(--nv-blue);
  font-size: var(--nv-text-label);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nv-page-header-title {
  margin: 0;
  color: var(--nv-text);
  font-size: var(--nv-text-page-title);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.nv-page-header-subtitle {
  margin: 0;
  max-width: 72ch;
  color: var(--nv-text-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.nv-page-header-meta {
  display: flex;
  gap: var(--nv-space-3);
  flex-wrap: wrap;
  color: var(--nv-text-soft);
  font-size: 12px;
  font-weight: 700;
  text-wrap: pretty;
}

.nv-page-header-actions {
  display: flex;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

/* ══════════════ SectionHeader ══════════════ */
.nv-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nv-space-3);
  flex-wrap: wrap;
}

.nv-section-header.is-divided {
  padding-bottom: var(--nv-space-3);
  border-bottom: 1px solid var(--nv-border);
  margin-bottom: var(--nv-space-4);
}

.nv-section-header-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nv-section-header-title {
  margin: 0;
  color: var(--nv-text);
  font-size: var(--nv-text-section);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.nv-section-header-subtitle {
  margin: 0;
  color: var(--nv-text-muted);
  font-size: 13px;
  line-height: 1.4;
  text-wrap: pretty;
}

.nv-section-header-actions {
  display: flex;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

/* ══════════════ ChartCard ══════════════ */
.nv-chart-card {
  display: grid;
  gap: var(--nv-space-3);
  padding: var(--nv-space-5);
}

.nv-chart-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nv-space-3);
  min-width: 0;
}

.nv-chart-card-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nv-chart-card-title {
  margin: 0;
  color: var(--nv-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.nv-chart-card-subtitle {
  margin: 0;
  color: var(--nv-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.nv-chart-card-actions {
  display: flex;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}

/* Corpo do gráfico: casulo seguro para ResponsiveContainer.
   position:relative + min-width:0 evitam o bug de largura zero. */
.nv-chart-card-body {
  position: relative;
  min-width: 0;
  width: 100%;
}

.nv-chart-card-footer {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  flex-wrap: wrap;
  padding-top: var(--nv-space-2);
  border-top: 1px solid var(--nv-border);
  color: var(--nv-text-soft);
  font-size: 11px;
  font-weight: 700;
}

/* Acento de borda superior por tom (Card renderiza nv-card junto) */
.nv-chart-blue.nv-card { border-top: 3px solid var(--nv-blue); }
.nv-chart-brand.nv-card { border-top: 3px solid var(--nv-brand); }
.nv-chart-success.nv-card { border-top: 3px solid var(--nv-success); }
.nv-chart-warning.nv-card { border-top: 3px solid var(--nv-warning); }
.nv-chart-danger.nv-card { border-top: 3px solid var(--nv-danger); }

/* ══════════════ ActionButton ══════════════ */
.nv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  border: 1px solid transparent;
  border-radius: var(--nv-radius-md);
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  user-select: none;
  transition:
    background var(--nv-transition),
    border-color var(--nv-transition),
    color var(--nv-transition),
    box-shadow var(--nv-transition),
    transform var(--nv-transition);
}

.nv-btn:focus-visible {
  outline: 2px solid var(--nv-blue);
  outline-offset: 2px;
}

.nv-btn:active {
  transform: translateY(1px);
}

.nv-btn:disabled,
.nv-btn.is-loading {
  opacity: .6;
  cursor: not-allowed;
}

/* Tamanhos */
.nv-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.nv-btn-md { height: 40px; padding: 0 16px; font-size: 13px; }
.nv-btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

.nv-btn.is-full { width: 100%; }

.nv-btn-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nv-btn-icon { display: inline-flex; align-items: center; }
.nv-btn-icon svg { width: 16px; height: 16px; }

/* Variantes */
.nv-btn-primary {
  background: var(--nv-blue);
  color: var(--nv-text-inverse);
  border-color: var(--nv-blue);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .24);
}
.nv-btn-primary:hover:not(:disabled):not(.is-loading) {
  background: var(--nv-blue-strong);
  border-color: var(--nv-blue-strong);
}

.nv-btn-secondary {
  background: var(--nv-surface);
  color: var(--nv-text);
  border-color: var(--nv-border-strong);
}
.nv-btn-secondary:hover:not(:disabled):not(.is-loading) {
  background: var(--nv-surface-subtle);
  border-color: var(--nv-blue);
  color: var(--nv-blue);
}

.nv-btn-ghost {
  background: transparent;
  color: var(--nv-text-muted);
  border-color: transparent;
}
.nv-btn-ghost:hover:not(:disabled):not(.is-loading) {
  background: var(--nv-surface-subtle);
  color: var(--nv-text);
}

.nv-btn-danger {
  background: var(--nv-danger);
  color: var(--nv-text-inverse);
  border-color: var(--nv-danger);
}
.nv-btn-danger:hover:not(:disabled):not(.is-loading) { filter: brightness(.92); }

.nv-btn-success {
  background: var(--nv-success);
  color: var(--nv-text-inverse);
  border-color: var(--nv-success);
}
.nv-btn-success:hover:not(:disabled):not(.is-loading) { filter: brightness(.92); }

/* Spinner (estado loading) */
.nv-btn-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: nvBtnSpin .7s linear infinite;
}

@keyframes nvBtnSpin {
  to { transform: rotate(360deg); }
}

/* ══════════════ Responsivo (cabeçalhos/botões) ══════════════ */
@media (max-width: 560px) {
  .nv-page-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .nv-page-header-actions {
    width: 100%;
  }
  .nv-page-header-actions > .nv-btn,
  .nv-section-header-actions > .nv-btn {
    flex: 1 1 min(220px, 100%);
  }
}

@media (max-width: 720px) {
  .nv-page-header-title,
  .nv-page-header-subtitle,
  .nv-page-header-meta,
  .nv-section-header-title,
  .nv-section-header-subtitle {
    min-width: 0;
  }

  .nv-page-header-actions,
  .nv-section-header-actions {
    width: 100%;
  }

  .nv-page-header-actions > .nv-btn,
  .nv-section-header-actions > .nv-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* Design System showcase/demo guardrails: keep action rows readable under zoom/mobile. */
.nv-demo-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
  align-items: center;
  gap: var(--nv-space-2);
  min-width: 0;
}

.nv-demo-action-row .nv-btn,
.nv-demo-action-row .nv-status-pill {
  width: 100%;
  min-width: 0;
}

.nv-demo-action-row .nv-btn-label,
.nv-demo-action-row .nv-status-pill {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ciclo 2026-08-24 00:04 UTC — ChartCard canônico responsivo.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-chart-card,
.nv-chart-card-head,
.nv-chart-card-text,
.nv-chart-card-actions,
.nv-chart-card-body,
.nv-chart-card-footer {
  min-width: 0;
}

.nv-chart-card-title,
.nv-chart-card-subtitle,
.nv-chart-card-footer {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nv-chart-card-actions {
  justify-content: flex-end;
  max-width: 100%;
}

.nv-chart-card-actions > * {
  min-width: 0;
  max-width: 100%;
}

.nv-chart-card-body {
  overflow: hidden;
  border-radius: calc(var(--nv-radius-card) - 6px);
}

@media (max-width: 720px) {
  .nv-chart-card {
    padding: var(--nv-space-4);
  }

  .nv-chart-card-head {
    display: grid;
    gap: var(--nv-space-3);
  }

  .nv-chart-card-actions {
    justify-content: stretch;
  }

  .nv-chart-card-actions > * {
    flex: 1 1 min(180px, 100%);
  }

  .nv-chart-card-body {
    min-height: 220px;
  }
}

@media (max-width: 460px) {
  .nv-chart-card {
    padding: var(--nv-space-3);
  }

  .nv-chart-card-title {
    font-size: 14px;
  }

  .nv-chart-card-actions > * {
    flex-basis: 100%;
  }
}

/* Ciclo 2026-09-01 15:04 UTC — ChartCard canônico com rodapé e ações mais seguros.
   Visual-only: preserva componentes, dados, séries, estados, APIs, backend e fluxos existentes. */
.nv-chart-card-text {
  flex: 1 1 240px;
  max-width: min(100%, 72ch);
}

.nv-chart-card-title {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.nv-chart-card-subtitle {
  max-width: 68ch;
}

.nv-chart-card-actions {
  max-width: min(100%, 360px);
}

.nv-chart-card-footer > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .nv-chart-card-text,
  .nv-chart-card-actions {
    width: 100%;
    max-width: 100%;
  }

  .nv-chart-card-footer > * {
    flex: 1 1 100%;
  }

  .nv-chart-card-footer {
    align-items: flex-start;
    line-height: 1.35;
  }
}

@media (max-width: 460px) {
  .nv-chart-card-footer {
    display: grid;
    gap: 6px;
  }
}

/* Ciclo 2026-08-24 03:04 UTC — ActionButton canônico responsivo em containers estreitos.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-btn {
  min-height: var(--nv-button-height, 40px);
  overflow: hidden;
}

.nv-btn-label {
  max-width: 100%;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.nv-btn-icon {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .nv-btn {
    white-space: normal;
    min-height: 40px;
    height: auto;
    padding-block: 10px;
  }

  .nv-btn-sm { min-height: 34px; padding-block: 8px; }
  .nv-btn-lg { min-height: 48px; padding-block: 12px; }

  .nv-btn-label {
    display: inline;
    text-overflow: clip;
  }
}

/* Ciclo 2026-08-24 09:04 UTC — SectionHeader canônico com ações mais seguras.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-section-header,
.nv-section-header-text,
.nv-section-header-actions {
  min-width: 0;
}

.nv-section-header-text {
  flex: 1 1 min(420px, 100%);
}

.nv-section-header-subtitle {
  max-width: min(100%, 72ch);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nv-section-header-actions {
  justify-content: flex-end;
  max-width: 100%;
}

.nv-section-header-actions > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 720px) {
  .nv-section-header {
    align-items: stretch;
  }

  .nv-section-header-actions {
    justify-content: stretch;
  }

  .nv-section-header-actions > * {
    flex: 1 1 min(180px, 100%);
  }
}

@media (max-width: 460px) {
  .nv-section-header-title {
    text-wrap: balance;
  }

  .nv-section-header-actions > * {
    flex-basis: 100%;
  }
}

/* Ciclo 2026-08-24 18:04 UTC — PageHeader canônico responsivo em zoom/mobile.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-page-header,
.nv-page-header-main,
.nv-page-header-actions,
.nv-page-header-meta {
  min-width: 0;
}

.nv-page-header-main {
  flex: 1 1 min(560px, 100%);
}

.nv-page-header-subtitle,
.nv-page-header-meta {
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nv-page-header-actions {
  justify-content: flex-end;
  max-width: 100%;
}

.nv-page-header-actions > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 720px) {
  .nv-page-header {
    align-items: stretch;
  }

  .nv-page-header-actions {
    justify-content: stretch;
    width: 100%;
  }

  .nv-page-header-actions > * {
    flex: 1 1 min(180px, 100%);
  }
}

@media (max-width: 460px) {
  .nv-page-header {
    gap: var(--nv-space-3);
    padding-bottom: var(--nv-space-4);
  }

  .nv-page-header-title {
    text-wrap: balance;
  }

  .nv-page-header-actions > * {
    flex-basis: 100%;
  }
}

/* Ciclo 2026-09-03 03:04 UTC — ChartCard canônico com altura fluida e cabeçalho seguro.
   Visual-only: preserva componentes, dados, séries, estados, APIs, backend e fluxos existentes. */
.nv-chart-card {
  contain: inline-size;
}

.nv-chart-card-head {
  container-type: inline-size;
}

.nv-chart-card-body {
  min-height: clamp(220px, 34vw, 340px);
  max-height: min(58vh, 420px);
}

.nv-chart-card-title,
.nv-chart-card-subtitle {
  max-width: 100%;
}

@media (max-width: 720px) {
  .nv-chart-card-body {
    min-height: 210px;
    max-height: none;
  }
}

@media (max-width: 460px) {
  .nv-chart-card-head {
    gap: var(--nv-space-2);
  }

  .nv-chart-card-body {
    min-height: 190px;
    border-radius: var(--nv-radius-md);
  }
}

/* Ciclo 2026-09-03 18:04 UTC — PageHeader meta/ações com leitura executiva em zoom.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-page-header-kicker,
.nv-page-header-meta > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.nv-page-header-meta > * {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-pill);
  background: var(--nv-surface-subtle);
  line-height: 1.25;
  text-wrap: balance;
}

.nv-page-header-actions {
  container-type: inline-size;
}

.nv-page-header-actions > :where(.nv-btn, button, a) {
  min-width: 0;
}

@container (max-width: 360px) {
  .nv-page-header-actions > :where(.nv-btn, button, a) {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .nv-page-header-kicker {
    letter-spacing: .12em;
  }

  .nv-page-header-meta > * {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Ciclo 2026-09-04 00:04 UTC — ActionButton canônico com estados seguros em zoom/mobile.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-btn:disabled,
.nv-btn.is-loading {
  transform: none;
  box-shadow: none;
  filter: saturate(.82);
}

.nv-btn.is-loading .nv-btn-label,
.nv-btn:disabled .nv-btn-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nv-btn-spinner {
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

@media (prefers-reduced-motion: reduce) {
  .nv-btn,
  .nv-btn-spinner {
    animation: none;
    transition: none;
  }
}

@media (max-width: 460px) {
  .nv-btn.is-loading,
  .nv-btn:disabled {
    justify-content: center;
  }

  .nv-btn-spinner {
    width: 13px;
    height: 13px;
  }
}

/* Ciclo 2026-09-05 00:04 UTC — ActionButton canônico com alvo de toque estável.
   Visual-only: preserva componentes, dados, estados, APIs, backend e fluxos existentes. */
.nv-btn-md,
.nv-btn-lg {
  min-height: 44px;
}

.nv-btn:where(:hover, :focus-visible):not(:disabled):not(.is-loading) {
  text-decoration: none;
}

.nv-btn-label {
  text-align: center;
  text-wrap: balance;
}

.nv-btn-icon-right {
  margin-left: auto;
}

.nv-btn:not(.is-full) .nv-btn-icon-right:first-child,
.nv-btn:not(.is-full) .nv-btn-label + .nv-btn-icon-right {
  margin-left: 0;
}

@container (max-width: 260px) {
  .nv-btn {
    width: 100%;
  }
}

@media (max-width: 720px), (pointer: coarse) {
  .nv-btn-sm {
    min-height: 40px;
  }

  .nv-btn-md,
  .nv-btn-lg {
    min-height: 44px;
  }
}

/* Ciclo 2026-09-04 03:04 UTC — ChartCard rodapé/legendas seguros em zoom/mobile.
   Visual-only: preserva componentes, dados, séries, estados, APIs, backend e fluxos existentes. */
.nv-chart-card-footer,
.nv-chart-card-footer > * {
  min-width: 0;
  max-width: 100%;
}

.nv-chart-card-footer {
  container-type: inline-size;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nv-chart-card-footer :where(.nv-status-pill, .metric-delta-pill, .soft-badge, span, small) {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@container (max-width: 420px) {
  .nv-chart-card-footer {
    align-items: flex-start;
    gap: 8px;
  }

  .nv-chart-card-footer > * {
    flex: 1 1 min(160px, 100%);
  }
}

@media (max-width: 460px) {
  .nv-chart-card-footer {
    font-size: 10.5px;
    line-height: 1.35;
  }
}

/* Ciclo 2026-09-04 21:04 UTC — ChartCard corpo com superfície e contenção mais estáveis.
   Visual-only: preserva componentes, dados, séries, estados, APIs, backend e fluxos existentes. */
.nv-chart-card-body {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, .82), rgba(255, 255, 255, .92)),
    radial-gradient(circle at 16% 12%, rgba(37, 99, 235, .08), transparent 30%);
  border: 1px solid rgba(226, 232, 240, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.nv-chart-card-body :where(.recharts-wrapper, .recharts-responsive-container, svg) {
  max-width: 100%;
}

.nv-chart-card-body :where(.recharts-cartesian-axis-tick-value, .recharts-legend-item-text) {
  fill: var(--nv-text-muted);
  color: var(--nv-text-muted) !important;
  font-weight: 700;
}

.nv-chart-card-body :where(.recharts-tooltip-wrapper) {
  max-width: min(320px, calc(100cqi - 24px));
  overflow-wrap: anywhere;
}

@container (max-width: 460px) {
  .nv-chart-card-body {
    min-height: 200px;
    background: var(--nv-surface-subtle);
  }
}

/* Ciclo 2026-09-05 18:04 UTC — ChartCard cabeçalho seguro em containers estreitos.
   Visual-only: preserva componentes, dados, séries, estados, APIs, backend, banco e fluxos existentes. */
.nv-chart-card {
  container-type: inline-size;
}

.nv-chart-card-head {
  min-inline-size: 0;
}

.nv-chart-card-actions {
  container-type: inline-size;
}

.nv-chart-card-actions > :where(.nv-btn, button, a, .nv-status-pill, .metric-delta-pill, .soft-badge) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.nv-chart-card-actions > :where(.nv-btn, button, a) {
  flex: 0 1 auto;
}

@container (max-width: 520px) {
  .nv-chart-card-head {
    display: grid;
    gap: var(--nv-space-3);
  }

  .nv-chart-card-text,
  .nv-chart-card-actions {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .nv-chart-card-actions {
    justify-content: stretch;
  }

  .nv-chart-card-actions > :where(.nv-btn, button, a) {
    flex: 1 1 min(180px, 100%);
  }
}

@container (max-width: 340px) {
  .nv-chart-card-actions > :where(.nv-btn, button, a) {
    inline-size: 100%;
    flex-basis: 100%;
  }
}
/* Régua de cobrança — acabamento visual do motor nativo.
   Classes visuais apenas; não altera ações, estados ou integrações. */
.frappe-motor-container {
  border: 1px solid var(--nv-border-strong, #e2e8f0);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
  background: var(--nv-surface, #fff);
  min-width: 0;
  overflow: hidden;
}

.motor-empty-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  border: 1px dashed var(--nv-border-strong, #cbd5e1);
  border-radius: 10px;
  background: var(--nv-surface-muted, #f8fafc);
  color: var(--nv-text, #334155);
}

.motor-empty-state-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nv-primary-soft, #dbeafe);
  color: var(--nv-primary, #1d4ed8);
  font-size: 20px;
  line-height: 1;
}

.motor-empty-state strong {
  display: block;
  color: var(--nv-text-strong, #0f172a);
  font-size: 13px;
}

.motor-empty-state p {
  margin: 4px 0 0;
  color: var(--nv-text-muted, #475569);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .frappe-motor-container { padding: 14px !important; border-radius: 14px; margin-bottom: 16px; }
  .frappe-motor-container > div { max-width: 100%; }

  .motor-empty-state { padding: 14px; }

  /* Mantém os controles legíveis sem alterar a ordem ou as ações do motor. */
  .frappe-motor-container .motor-header {
    align-items: stretch !important;
  }

  .frappe-motor-container .motor-header > div,
  .frappe-motor-container .motor-header > div:last-child {
    width: 100% !important;
  }

  .frappe-motor-container .motor-header > div:last-child {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .frappe-motor-container .motor-config-grid,
  .frappe-motor-container .motor-preview-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .frappe-motor-container .motor-action-row {
    align-items: stretch !important;
    flex-direction: column;
  }

  .frappe-motor-container .motor-action-row button {
    min-height: 42px;
    width: 100%;
  }

  .frappe-motor-container table {
    table-layout: fixed;
  }

  .frappe-motor-container th,
  .frappe-motor-container td {
    overflow-wrap: anywhere;
  }
}

/* Foco visível consistente para navegação por teclado dentro do motor. */
.frappe-motor-container :where(button, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nv-primary, #2563eb) 32%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .frappe-motor-container *, .frappe-motor-container *::before, .frappe-motor-container *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* Nacional Vision — Charts (Etapa 4) */

.nv-chart-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.nv-chart-tooltip {
  display: grid;
  gap: 4px;
  min-width: 170px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-radius-md);
  background: var(--nv-surface);
  color: var(--nv-text-muted);
  box-shadow: var(--nv-shadow-md);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.nv-chart-tooltip strong {
  color: var(--nv-text);
  font-size: 12px;
  line-height: 1.25;
  text-wrap: balance;
}

.nv-chart-tooltip span,
.nv-chart-tooltip small {
  min-width: 0;
  color: var(--nv-text-muted);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nv-chart-tooltip b {
  color: var(--nv-text);
  font-variant-numeric: tabular-nums;
}

.recharts-cartesian-axis-tick-value {
  font-family: var(--nv-font);
}

/* Ciclo 2026-09-01 09:04 UTC — gráficos canônicos contidos em zoom/mobile.
   Visual-only: preserva dados, séries, tooltips, componentes, APIs, backend e fluxos existentes. */
.nv-chart-shell .recharts-wrapper,
.nv-chart-shell .recharts-responsive-container,
.nv-chart-shell .recharts-surface {
  max-width: 100%;
}

.nv-chart-shell .recharts-cartesian-axis-tick-value,
.nv-chart-shell .recharts-legend-item-text {
  fill: var(--nv-chart-axis);
  font-size: 11px;
  font-weight: 750;
}

.nv-chart-shell .recharts-legend-wrapper {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.nv-chart-shell .recharts-default-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  min-width: 0;
}

.nv-chart-shell .recharts-legend-item {
  display: inline-flex;
  align-items: center;
  margin-right: 0 !important;
  min-width: 0;
}

.nv-chart-shell .recharts-legend-item-text {
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 720px) {
  .nv-chart-tooltip {
    min-width: min(160px, calc(100vw - 32px));
    padding: 9px 10px;
    font-size: 11.5px;
  }

  .nv-chart-shell .recharts-cartesian-axis-tick-value,
  .nv-chart-shell .recharts-legend-item-text {
    font-size: 10.5px;
  }

  .nv-chart-shell .recharts-default-legend {
    gap: 4px 10px;
  }
}

@media (max-width: 460px) {
  .nv-chart-tooltip {
    max-width: calc(100vw - 24px);
  }

  .nv-chart-shell .recharts-legend-wrapper {
    padding-inline: 2px;
  }

  .nv-chart-shell .recharts-default-legend {
    justify-content: flex-start;
  }
}

/* Ciclo 2026-09-02 15:04 UTC — chart shells canônicos com eixos/tooltip seguros em mobile/zoom.
   Visual-only: preserva dados, séries, tooltips, componentes, APIs, backend e fluxos existentes. */
.nv-chart-shell,
.nv-chart-shell .recharts-wrapper,
.nv-chart-shell .recharts-surface {
  min-width: 0;
}

.nv-chart-shell .recharts-cartesian-axis-tick-value tspan,
.nv-chart-shell .recharts-label,
.nv-chart-shell .recharts-text {
  font-variant-numeric: tabular-nums;
}

.nv-chart-shell .recharts-tooltip-wrapper {
  max-width: min(320px, calc(100vw - 32px));
  outline: none;
}

.nv-chart-shell .recharts-bar-rectangle,
.nv-chart-shell .recharts-line-curve,
.nv-chart-shell .recharts-active-dot {
  transition: opacity 200ms ease, filter 200ms ease;
}

.nv-chart-shell .recharts-bar-rectangle:hover,
.nv-chart-shell .recharts-line-curve:hover {
  filter: drop-shadow(0 6px 12px rgba(30, 64, 175, .16));
}

@media (max-width: 720px) {
  .nv-chart-shell {
    min-height: 220px;
  }

  .nv-chart-shell .recharts-wrapper,
  .nv-chart-shell .recharts-surface {
    overflow: visible;
  }

  .nv-chart-shell .recharts-cartesian-axis-tick-value,
  .nv-chart-shell .recharts-text {
    letter-spacing: -.01em;
  }
}

@media (max-width: 460px) {
  .nv-chart-shell {
    min-height: 200px;
  }

  .nv-chart-shell .recharts-cartesian-axis-tick-value,
  .nv-chart-shell .recharts-legend-item-text {
    font-size: 10px;
  }

  .nv-chart-shell .recharts-tooltip-wrapper {
    max-width: calc(100vw - 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-chart-shell .recharts-bar-rectangle,
  .nv-chart-shell .recharts-line-curve,
  .nv-chart-shell .recharts-active-dot {
    transition: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   NACIONAL VISION — visual-normalize.css
   ─────────────────────────────────────────────────────────────────
   Arquivo de normalização visual. Usa EXCLUSIVAMENTE tokens já
   definidos pelo sistema Frappe (index.css) e pelos --nv-* (tokens.css).
   
   NÃO redefine, NÃO sobrescreve, NÃO altera o Frappe.
   Apenas normaliza valores hardcoded inconsistentes nos componentes.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. ESCALA TIPOGRÁFICA — tokens de tamanho padronizados
   Elimina os meios-pixels (10.5px, 11.5px, 13.5px etc.)
   ───────────────────────────────────────────────────────────────── */
:root {
  /* Escala tipográfica fixa — 5 tamanhos apenas */
  --fs-xs:   11px;   /* labels, badges, caps */
  --fs-sm:   12px;   /* meta, timestamps, captions */
  --fs-md:   13px;   /* texto de tabela, filtros */
  --fs-base: 14px;   /* corpo de texto padrão */
  --fs-lg:   16px;   /* subtítulos de seção */
  --fs-xl:   20px;   /* títulos de seção */
  --fs-2xl:  24px;   /* título de página */

  /* Escala de border-radius — 4 tamanhos apenas */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;
}

/* ─────────────────────────────────────────────────────────────────
   2. SIDEBAR — normaliza o visual sem alterar estrutura Frappe
   ───────────────────────────────────────────────────────────────── */

/* Links do menu: border-radius e font-size consistentes */
.side-nav-links a {
  border-radius: var(--r-sm) !important;
  font-size: var(--fs-md) !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  line-height: 1.35 !important;
}

/* Estado ativo: usa a cor de marca Nacional Carnes */
.side-nav-links a.active {
  background: rgba(139, 29, 24, 0.07) !important;
  color: #8b1d18 !important;
  font-weight: 600 !important;
  border-left: 2px solid #8b1d18 !important;
  padding-left: 8px !important;
}

/* Títulos dos grupos de menu */
.side-nav-group-title,
.side-nav-section-label {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 14px 12px 4px !important;
  color: var(--text-muted) !important;
}

/* Nome da marca no topo da sidebar */
.side-brand strong {
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.side-brand small {
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Ícones no menu */
.nav-icon,
.side-nav-links a svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* Área do usuário no rodapé */
.side-user-area {
  border-top: 1px solid var(--outline-gray-2) !important;
  padding: 12px !important;
}

.side-user-meta strong {
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
}

.side-user-meta small,
.side-user-meta span {
  font-size: var(--fs-xs) !important;
  color: var(--text-muted) !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. TOPBAR — altura e tipografia consistentes
   ───────────────────────────────────────────────────────────────── */
.top-header,
.clean-top-header {
  height: 52px !important;
  min-height: 52px !important;
}

/* Título da página no topbar */
.top-header-copy strong {
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.top-header-copy span,
.top-header-copy small {
  font-size: var(--fs-xs) !important;
}

/* Chip do usuário */
.header-user-chip {
  border-radius: var(--r-md) !important;
  padding: 6px 12px !important;
  min-width: unset !important;
}

.header-user-chip strong {
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. CARDS — border-radius e font-size padronizados
   ───────────────────────────────────────────────────────────────── */

/* KPI Cards: mesma altura e padding */
.nv-kpi-card {
  min-height: 120px !important;
  padding: 20px !important;
}

/* Valores dos KPIs */
.nv-kpi-value {
  font-size: var(--fs-2xl) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

/* Labels dos KPIs */
.nv-kpi-title > span:last-child {
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.07em !important;
}

/* Cards genéricos */
.nv-card {
  border-radius: var(--r-lg) !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. TABELAS — tipografia uniforme
   ───────────────────────────────────────────────────────────────── */

/* Cabeçalhos de tabela */
.nv-data-table th,
.nv-table th {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* Células de tabela */
.nv-data-table td,
.nv-table td {
  font-size: var(--fs-md) !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

/* Correção dos meios-pixels em tabelas das páginas de BI */
.bi-table th,
.report-table th,
.manager-table th {
  font-size: var(--fs-xs) !important;
  white-space: nowrap !important;
}

.bi-table td,
.report-table td,
.manager-table td {
  font-size: var(--fs-md) !important;
}

/* ─────────────────────────────────────────────────────────────────
   6. FILTROS / TOOLBAR — layout e tamanhos consistentes
   ───────────────────────────────────────────────────────────────── */
.nv-filter-bar {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Selects e inputs nos filtros */
.nv-filter-bar select,
.nv-filter-bar input[type="text"],
.nv-filter-bar input[type="date"],
.nv-filter-bar input[type="month"] {
  font-size: var(--fs-md) !important;
  border-radius: var(--r-md) !important;
  height: 34px !important;
  padding: 0 10px !important;
  min-width: 140px !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. BADGES / STATUS — tamanho e padding consistentes
   ───────────────────────────────────────────────────────────────── */
.nv-status-pill,
.nv-chip,
.status-badge {
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: var(--r-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. PAGE HEADER — título e subtítulo padronizados
   ───────────────────────────────────────────────────────────────── */
.nv-page-header-title {
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}

.nv-page-header-subtitle {
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}

.nv-page-header-kicker {
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.12em !important;
}

/* ─────────────────────────────────────────────────────────────────
   9. SECTION HEADER — seções internas das páginas
   ───────────────────────────────────────────────────────────────── */
.nv-section-header-title {
  font-size: var(--fs-lg) !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.nv-section-header-subtitle {
  font-size: var(--fs-sm) !important;
}

/* ─────────────────────────────────────────────────────────────────
   10. BOTÕES — tamanhos e border-radius consistentes
   (sem alterar cores, apenas geometria)
   ───────────────────────────────────────────────────────────────── */
.icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--r-md) !important;
}

.outline-btn,
.primary-btn {
  border-radius: var(--r-md) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Botão pequeno */
.outline-btn.small-btn,
.primary-btn.small-btn {
  padding: 5px 10px !important;
  font-size: var(--fs-sm) !important;
}

/* ─────────────────────────────────────────────────────────────────
   11. GRIDS DE KPI — colunas consistentes em todas as páginas
   ───────────────────────────────────────────────────────────────── */
.kpi-grid,
.kpi-row,
.stats-grid {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

/* ─────────────────────────────────────────────────────────────────
   12. CORREÇÕES DE MEIOS-PIXELS — elimina 10.5px, 11.5px, 13.5px etc.
   Alvos identificados nos bi-layout-fixes e manager-layout-fixes
   ───────────────────────────────────────────────────────────────── */

/* Elimina meios-pixels em qualquer classe que os use */
[style*="font-size: 10.5px"],
[style*="font-size:10.5px"] { font-size: var(--fs-xs) !important; }

[style*="font-size: 11.5px"],
[style*="font-size:11.5px"] { font-size: var(--fs-xs) !important; }

[style*="font-size: 12.5px"],
[style*="font-size:12.5px"] { font-size: var(--fs-sm) !important; }

[style*="font-size: 13.5px"],
[style*="font-size:13.5px"] { font-size: var(--fs-md) !important; }

[style*="font-size: 8.5px"],
[style*="font-size:8.5px"] { font-size: var(--fs-xs) !important; }

[style*="font-size: 9.5px"],
[style*="font-size:9.5px"] { font-size: var(--fs-xs) !important; }
/* ═══════════════════════════════════════════════════════════════════
   NACIONAL VISION — page-fixes.css
   ─────────────────────────────────────────────────────────────────
   Correções visuais cirúrgicas por página, baseadas nas inconsistências
   identificadas nas screenshots. Usa apenas tokens Frappe e --nv-*.
   NÃO altera o index.css (Frappe).
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. PEDIDOS TEMPO REAL — header escuro da tabela
   Problema: .exec-table thead th tem background escuro (#2d0f16)
   ───────────────────────────────────────────────────────────────── */
.exec-table thead th,
.exec-table thead {
  background: var(--surface-gray-1, #f8f8f8) !important;
  color: var(--ink-gray-6, #525252) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  padding: 8px 12px !important;
}

/* Remove o hover escuro */
.exec-table thead th:hover {
  background: var(--surface-gray-2, #ededed) !important;
}

/* Linhas da tabela de pedidos */
.exec-table tbody tr:hover td {
  background: var(--surface-gray-1, #f8f8f8) !important;
}

/* ─────────────────────────────────────────────────────────────────
   2. DASHBOARD — hero banner escuro
   Problema: .nv-dash-exec-hero tem background navy escuro
   — mantém a barra de info mas clareia para o padrão da página
   ───────────────────────────────────────────────────────────────── */
.nv-dash-exec-hero {
  background: var(--surface-base, #ffffff) !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--ink-gray-8, #383838) !important;
  padding: 16px 20px !important;
}

/* Textos dentro do hero */
.nv-dash-exec-hero h1,
.nv-dash-exec-hero h2,
.nv-dash-exec-hero strong {
  color: var(--ink-gray-9, #171717) !important;
}

.nv-dash-exec-hero p,
.nv-dash-exec-hero span:not(.status-pill):not([class*="badge"]):not([class*="chip"]) {
  color: var(--ink-gray-6, #525252) !important;
}

/* Badges dentro do hero — mantém as cores originais */
.nv-dash-exec-hero .status-pill,
.nv-dash-exec-hero [class*="badge"],
.nv-dash-exec-hero [class*="chip"] {
  color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. VISÃO COMERCIAL — cards de KPI desalinhados
   Problema: Cards têm alturas diferentes e o FilterBar flutua
   ───────────────────────────────────────────────────────────────── */

/* Grid dos cards superiores */
.visao-comercial-page .visao-card-grid-top {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Cada card KPI da Visão Comercial */
.visao-comercial-page .visao-kpi,
.visao-comercial-page .panel-shell.visao-kpi {
  min-height: 90px !important;
  height: auto !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  background: var(--surface-base, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Label do KPI */
.visao-comercial-page .visao-kpi span:first-child,
.visao-comercial-page .visao-kpi > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink-gray-5, #7c7c7c) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Valor do KPI */
.visao-comercial-page .visao-kpi strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--ink-gray-9, #171717) !important;
  display: block !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Nota / sub-label */
.visao-comercial-page .visao-kpi small,
.visao-comercial-page .visao-kpi .kpi-note {
  font-size: 10px !important;
  color: var(--ink-gray-4, #999999) !important;
  display: block !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Barra de progresso colorida no rodapé do card */
.visao-comercial-page .visao-kpi .kpi-bar,
.visao-comercial-page .visao-kpi [class*="progress"],
.visao-comercial-page .visao-kpi [class*="bar"] {
  height: 2px !important;
  border-radius: 999px !important;
  margin-top: 6px !important;
}

/* FilterBar da Visão Comercial — fix do floatado */
.visao-comercial-page .visao-filters,
.visao-comercial-page .visao-filters-compact {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  background: var(--surface-base, #ffffff) !important;
  padding: 12px 16px !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. BI NACIONAL — bordas coloridas dos cards
   Problema: border-left de 4 cores diferentes por card
   — mantém o indicador mas padroniza a espessura
   ───────────────────────────────────────────────────────────────── */
.bi-nacional-page .bi-finance-card,
.bi-nacional-page .bi-executive-card {
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-radius: 8px !important;
  background: var(--surface-base, #ffffff) !important;
}

/* ─────────────────────────────────────────────────────────────────
   5. DASHBOARD — cards KPI com bordas top coloridas inconsistentes
   Problema: .summary-tile.danger tem border-top: 4px solid #EF4444
             mas outros cards não têm borda top
   Solução: todos os summary-tile têm borda left com mesma espessura
   ───────────────────────────────────────────────────────────────── */
.summary-tile.danger {
  border-top: none !important;
  border-left: 3px solid #EF4444 !important;
}

.summary-tile.warning {
  border-top: none !important;
  border-left: 3px solid #F59E0B !important;
}

/* ─────────────────────────────────────────────────────────────────
   6. DASHBOARD — cards executivos (nv-kpi-card) — barra top
   Problema: .nv-kpi-card::before gera barra azul no topo de todos
   Padroniza: vinho para os principais, cinza para os demais
   ───────────────────────────────────────────────────────────────── */
.nv-kpi-card::before {
  height: 3px !important;
  background: var(--outline-gray-3, #e2e2e2) !important;
}

/* Cards de faturamento principal — destaque em vinho */
.nv-kpi-card.primary::before,
.nv-kpi-card.highlight::before {
  background: #8b1d18 !important;
}

/* Cards de perigo/alerta */
.nv-kpi-card.danger::before { background: var(--red-500, #e03434) !important; }
.nv-kpi-card.success::before { background: var(--green-600, #268c5c) !important; }
.nv-kpi-card.warning::before { background: var(--amber-500, #df9311) !important; }

/* ─────────────────────────────────────────────────────────────────
   7. GERAL — padroniza todos os .panel-shell
   Problema: diferentes páginas têm border-radius diferente nos painéis
   ───────────────────────────────────────────────────────────────── */
.panel-shell {
  border-radius: 8px !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  background: var(--surface-base, #ffffff) !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. GERAL — screen-block padding consistente
   Problema: .screen-block tem padding 10px em algumas rotas, 18px em outras
   ───────────────────────────────────────────────────────────────── */
.screen-block {
  padding: 16px !important;
  gap: 14px !important;
}

@media (min-width: 1200px) {
  .screen-block {
    padding: 20px !important;
    gap: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   9. TIPOGRAFIA — títulos de página consistentes em todas as páginas
   ───────────────────────────────────────────────────────────────── */

/* Título na topbar */
.top-header-copy strong {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-gray-9, #171717) !important;
}

.top-header-copy span {
  font-size: 11px !important;
  color: var(--ink-gray-5, #7c7c7c) !important;
  font-weight: 400 !important;
}

/* Títulos h2 dentro de painéis */
.panel-head h2,
.panel-head .panel-title,
.compact-head h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink-gray-8, #383838) !important;
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   10. FONTES DISTINTAS — corrige o font-size nos títulos de cards
   ───────────────────────────────────────────────────────────────── */

/* Valores numéricos nos KPIs */
.reference-kpi-card strong,
.kpi-compact-card strong {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink-gray-9, #171717) !important;
  letter-spacing: -0.02em !important;
}

/* Labels dos KPIs */
.reference-kpi-card span,
.kpi-compact-card span,
.kpi-card-header span {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ink-gray-5, #7c7c7c) !important;
}

/* ─────────────────────────────────────────────────────────────────
   11. MODERN TABLE — th consistente em todas as páginas
   ───────────────────────────────────────────────────────────────── */
.modern-table th {
  background: var(--surface-gray-1, #f8f8f8) !important;
  color: var(--ink-gray-6, #525252) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  white-space: nowrap !important;
}

.modern-table td {
  font-size: 13px !important;
  padding: 10px 12px !important;
  color: var(--ink-gray-7, #525252) !important;
  border-bottom: 1px solid var(--outline-gray-1, #ededed) !important;
}

.modern-table tr:last-child td { border-bottom: none !important; }
.modern-table tbody tr:hover td { background: var(--surface-gray-1, #f8f8f8) !important; }

/* ─────────────────────────────────────────────────────────────────
   12. FILTROS — select e input de filtro com tamanho consistente
   ───────────────────────────────────────────────────────────────── */
.filter-row select,
.filter-row input,
.filter-area select,
.filter-area input,
.filters-bar select,
.filters-bar input {
  height: 34px !important;
  font-size: 13px !important;
  border-radius: 6px !important;
  border: 1px solid var(--outline-gray-3, #c7c7c7) !important;
  background: var(--surface-base, #ffffff) !important;
  padding: 0 10px !important;
  color: var(--ink-gray-8, #383838) !important;
}


/* ═══════ v2 FIXES — primary-btn, bi-cards, hero ═══════ */

/* PRIMARY BTN — vinho Nacional Carnes (vence gray-900 do Frappe) */
.light-shell .primary-btn,
.enterprise-shell .primary-btn,
.bi-nacional-page .primary-btn,
.visao-comercial-page .primary-btn,
.screen-block .primary-btn,
.panel-shell .primary-btn,
.filter-area .primary-btn,
.bi-command-actions .primary-btn {
  background: #8b1d18 !important;
  color: #ffffff !important;
  border: 1px solid #8b1d18 !important;
  box-shadow: 0 1px 3px rgba(139,29,24,0.22) !important;
}
.light-shell .primary-btn:hover,
.enterprise-shell .primary-btn:hover,
.bi-nacional-page .primary-btn:hover,
.visao-comercial-page .primary-btn:hover,
.screen-block .primary-btn:hover {
  background: #6d1614 !important;
  border-color: #6d1614 !important;
  box-shadow: 0 2px 6px rgba(139,29,24,0.28) !important;
}

/* BI-KPI-CARD status cards — altura e borda uniformes */
.bi-nacional-page .bi-kpi-card {
  min-height: 96px !important;
  border-radius: 8px !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  border-left-width: 1px !important;
  background: var(--surface-base, #ffffff) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* BI-FINANCE-CARD — apenas indicador de 3px no status */
.bi-nacional-page .bi-finance-card {
  border-left: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  border-radius: 8px !important;
  background: var(--surface-base, #ffffff) !important;
}
.bi-nacional-page .bi-finance-card.success { border-left: 3px solid #268c5c !important; }
.bi-nacional-page .bi-finance-card.warning { border-left: 3px solid #df9311 !important; }
.bi-nacional-page .bi-finance-card.danger  { border-left: 3px solid #e03434 !important; }
.bi-nacional-page .bi-finance-card.blue    { border-left: 3px solid #077ddf !important; }

/* BI-EXECUTIVE-CARD */
.bi-nacional-page .bi-executive-card {
  border-left: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  border-radius: 8px !important;
}
.bi-nacional-page .bi-executive-card.success { border-left: 3px solid #268c5c !important; }
.bi-nacional-page .bi-executive-card.warning { border-left: 3px solid #df9311 !important; }
.bi-nacional-page .bi-executive-card.danger  { border-left: 3px solid #e03434 !important; }

/* DASHBOARD HERO — branco ao invés de navy escuro */
.nv-dash-exec-hero {
  background: var(--surface-base, #ffffff) !important;
  border: 1px solid var(--outline-gray-2, #e2e2e2) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--ink-gray-8, #383838) !important;
}
.nv-dash-exec-hero h1,
.nv-dash-exec-hero h2,
.nv-dash-exec-hero strong {
  color: var(--ink-gray-9, #171717) !important;
}
.nv-dash-exec-hero p {
  color: var(--ink-gray-6, #525252) !important;
}


/* ═══════════════════════════════════════════════════
   NACIONAL VISION — Enterprise Design System v3
   Paleta: Azul Corporativo (SAP · Totvs · Salesforce)
═══════════════════════════════════════════════════ */

:root {
  /* ─── FUNDOS ─── */
  --bg-base:        #F8FAFC;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      #F1F5F9;
  --bg-hover:       #F1F5F9;
  --bg-active:      #EFF6FF;

  /* ─── SIDEBAR ─── */
  --sidebar-bg:     #0F172A;
  --sidebar-bg2:    #1E293B;
  --sidebar-active: rgba(37,99,235,0.22);
  --sidebar-glow:   rgba(37,99,235,0.40);

  /* ─── BORDAS ─── */
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  --border-accent:  rgba(37,99,235,0.28);

  /* ─── TEXTO ─── */
  --text-primary:   #0F172A;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --text-inverse:   #FFFFFF;

  /* ─── MARCA — Azul Corporativo Nacional Vision ─── */
  --accent:         #2563EB;
  --accent-dim:     #1E40AF;
  --accent-light:   #3B82F6;
  --accent-soft:    rgba(37,99,235,0.08);
  --accent-glow:    rgba(37,99,235,0.22);

  /* ─── SEMÂNTICAS ─── */
  --success:        #10B981;
  --success-soft:   rgba(16,185,129,0.10);
  --success-border: rgba(16,185,129,0.28);
  --warning:        #F59E0B;
  --warning-soft:   rgba(245,158,11,0.10);
  --warning-border: rgba(245,158,11,0.28);
  --danger:         #EF4444;
  --danger-soft:    rgba(239,68,68,0.08);
  --danger-border:  rgba(239,68,68,0.28);
  --info:           #0EA5E9;
  --info-soft:      rgba(14,165,233,0.10);
  --info-border:    rgba(14,165,233,0.28);

  /* ─── RAIOS ─── */
  --radius-xl:   24px;
  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-sm:   8px;
  --radius-xs:   6px;
  --radius-pill: 999px;

  /* ─── SOMBRAS ─── */
  --shadow-xs:       0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:       0 2px 8px rgba(15,23,42,0.06);
  --shadow-card:     0 4px 16px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
  --shadow-md:       0 8px 24px rgba(15,23,42,0.08);
  --shadow-soft:     0 12px 40px rgba(15,23,42,0.10);
  --shadow-btn:      0 4px 14px rgba(37,99,235,0.24);
  --shadow-btn-hover:0 8px 28px rgba(37,99,235,0.34);
  --shadow-premium:  0 20px 60px rgba(15,23,42,0.12), 0 4px 16px rgba(15,23,42,0.06);

  /* ─── TRANSIÇÕES ─── */
  --transition:      all 0.20s ease;
  --transition-fast: all 0.12s ease;

  /* ─── TIPOGRAFIA ─── */
  line-height: 1.5;
  font-weight: 400;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-base);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* aliases legados */
  --bg-primary:       var(--bg-base);
  --bg-secondary:     var(--bg-subtle);
  --bg-tertiary:      var(--bg-elevated);
  --surface:          var(--bg-elevated);
  --surface-soft:     var(--bg-subtle);
  --surface-muted:    var(--bg-subtle);
  --surface-elevated: var(--bg-surface);
}

/* ─── DARK THEME ─── */

:root[data-theme='dark'] {
  --bg-base:        #060A14;
  --bg-surface:     #0D1220;
  --bg-elevated:    #111827;
  --bg-subtle:      #161F32;
  --bg-hover:       #1C2840;
  --bg-active:      #1E3A5F;

  --sidebar-bg:     #050810;
  --sidebar-bg2:    #0D1220;

  --border:         rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.14);

  --text-primary:   #F0F6FF;
  --text-secondary: #8BA3C0;
  --text-muted:     #4A607A;
  --text-inverse:   #0F172A;

  --shadow-card:    0 4px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
  --shadow-soft:    0 12px 40px rgba(0,0,0,0.5);
  --shadow-premium: 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.4);
}

a { color: inherit; text-decoration: none; }

/* Catálogo Nacional Carnes - adaptado do esboço Lovable */

.catalogo-page { min-height: calc(100vh - 120px); background: #faf9f6; color: #251a17; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(35, 18, 12, .08); }

.catalogo-hero { position: sticky; top: 0; z-index: 10; background: linear-gradient(135deg, #7b1f17 0%, #4b120e 100%); color: #fff; box-shadow: 0 10px 28px rgba(75, 18, 14, .25); }

.catalogo-hero-inner { max-width: none; margin: 0; padding: 16px 18px 14px; display: grid; grid-template-columns: auto minmax(320px, 520px); align-items: center; gap: 18px; }

.catalogo-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.catalogo-logo { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 27px; flex: 0 0 auto; }

.catalogo-logo-image { width: 118px; height: 52px; padding: 6px 8px; background: #fff; border-radius: 14px; }

.catalogo-logo-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.catalogo-brand h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); letter-spacing: -.04em; color: #fff; }

.catalogo-brand p { margin: 3px 0 0; color: rgba(255,255,255,.78); }

.catalogo-admin-link { position: absolute; right: 34px; top: 28px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 13px; background: rgba(255,255,255,.1); font-weight: 800; font-size: 13px; }

.catalogo-search { display: flex; align-items: center; gap: 10px; margin-top: 0; background: #fff; color: #251a17; border-radius: 14px; padding: 0 10px 0 14px; box-shadow: 0 12px 26px rgba(0,0,0,.14); }

.catalogo-search-icon { width: 18px; height: 18px; color: #1e40af; display: inline-flex; flex: 0 0 auto; }

.catalogo-search-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.catalogo-search input { width: 100%; border: 0; outline: 0; padding: 14px 4px; font-size: 15px; background: transparent; color: inherit; }

.catalogo-search button { border: 1px solid rgba(30,64,175,.16); border-radius: 999px; padding: 7px 12px; background: #eff6ff; color: #1e40af; font-weight: 800; white-space: nowrap; cursor: pointer; transition: .2s ease; }

.catalogo-search button:hover { background: #dbeafe; transform: translateY(-1px); }

.catalogo-chips { display: flex; gap: 9px; overflow-x: auto; padding: 14px 0 2px; }

.catalogo-chips button { border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; white-space: nowrap; cursor: pointer; }

.catalogo-chips button.active { background: #fff; color: #7b1f17; }

.catalogo-content { max-width: 1180px; margin: 0 auto; padding: 26px 22px 34px; }

.catalogo-selection-bar { position: sticky; top: 0; z-index: 20; max-width: 1180px; margin: 12px auto 0; border: 1px solid #ead9cf; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 28px rgba(62,30,20,.12); }

.catalogo-selection-bar div { display: grid; gap: 2px; margin-right: auto; }

.catalogo-selection-bar strong { color: #251a17; }

.catalogo-selection-bar span { color: #806b62; font-size: 12px; font-weight: 700; }

.catalogo-selected-pill { width: fit-content; border-radius: 999px; background: #dcfce7; color: #166534; padding: 4px 8px; font-size: 11px; font-weight: 900; }

@media (max-width: 760px) { .catalogo-selection-bar { left: 10px; right: 10px; margin: 10px; flex-wrap: wrap; } .catalogo-selection-bar .catalogo-whatsapp { width: 100%; } }

.catalogo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

.catalogo-card { border: 1px solid #ece5df; background: #fff; border-radius: 14px; overflow: hidden; text-align: left; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.045); transition: transform .18s ease, box-shadow .18s ease; color: inherit; }

.catalogo-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(62, 30, 20, .12); }

.catalogo-photo { aspect-ratio: 1.16/1; background: #f1ece6; display: grid; place-items: center; color: #7b1f17; font-size: 28px; overflow: hidden; }

.catalogo-photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; padding: 10px; background: radial-gradient(circle at 30% 20%, #fff6ef, #e8ddd5); text-align: center; }

.catalogo-photo-placeholder strong { font-size: 11px; word-break: break-word; }

.catalogo-photo-placeholder small { color: #806b62; margin-top: 3px; font-size: 10px; }

.catalogo-card-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; }

.catalogo-category { width: fit-content; max-width: 100%; border-radius: 999px; padding: 3px 7px; background: #f2e8e2; color: #7b1f17; font-size: 9px; line-height: 1; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.catalogo-card h2 { margin: 0; min-height: 30px; font-size: 12px; line-height: 1.18; letter-spacing: -.025em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.catalogo-meta-item { display: inline-flex; align-items: center; gap: 5px; }

.catalogo-meta-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.catalogo-card-body > strong { color: #7b1f17; font-size: 22px; letter-spacing: -.04em; }

.catalogo-price-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

.catalogo-price-stack span { border: 1px solid #f0dfd4; background: #fff7f1; border-radius: 9px; padding: 5px 6px; color: #7b1f17; font-size: 12px; line-height: 1.05; font-weight: 950; letter-spacing: -.035em; }

.catalogo-price-stack b { display: block; margin-bottom: 1px; color: #806b62; font-size: 8px; line-height: 1; letter-spacing: .08em; }

.catalogo-modal-prices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.catalogo-modal-prices p { margin: 0; border: 1px solid #efd7ca; background: linear-gradient(180deg, #fff8f3, #fff); border-radius: 16px; padding: 14px; }

.catalogo-modal-prices span { display: block; color: #806b62; font-size: 12px; font-weight: 800; margin-bottom: 4px; }

.catalogo-modal-prices strong { color: #7b1f17; font-size: 28px; font-weight: 950; letter-spacing: -.05em; }

.catalogo-share-editor { border: 1px solid #efdfd4; background: #fff8f3; border-radius: 14px; padding: 9px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.catalogo-share-editor label { display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #ead9cf; background: #fff; border-radius: 10px; padding: 8px; font-size: 13px; font-weight: 900; cursor: pointer; }

.catalogo-share-editor label.active { border-color: #7b1f17; box-shadow: 0 0 0 2px rgba(123,31,23,.08); color: #7b1f17; }

.catalogo-share-editor label small { margin-left: auto; color: #806b62; font-weight: 850; }

.catalogo-price-edit { grid-column: 1 / -1; display: grid; gap: 4px; }

.catalogo-price-edit span { color: #806b62; font-size: 10px; font-weight: 850; }

.catalogo-price-edit input { width: 100%; border: 1px solid #e7d5ca; border-radius: 10px; padding: 8px 9px; font-size: 15px; font-weight: 950; color: #7b1f17; outline: 0; }

.catalogo-price-edit input:focus { border-color: #7b1f17; box-shadow: 0 0 0 3px rgba(123,31,23,.1); }

.catalogo-share-actions { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.catalogo-share-image { border: 0; border-radius: 12px; background: #7b1f17; color: #fff; text-align: center; padding: 10px 12px; font-weight: 900; box-shadow: 0 10px 20px rgba(123,31,23,.2); cursor: pointer; }

.catalogo-share-image:hover, .catalogo-whatsapp:hover { transform: translateY(-1px); filter: brightness(1.03); }

.catalogo-meta { display: flex; gap: 5px; flex-wrap: wrap; color: #76665f; font-size: 10px; line-height: 1.1; }

.catalogo-empty { border: 1px dashed #d9ccc3; background: #fff; border-radius: 18px; padding: 50px; text-align: center; color: #806b62; }

.catalogo-footer { border-top: 1px solid #ede5df; padding: 20px; text-align: center; color: #806b62; font-size: 12px; background: #fff; }

.catalogo-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(24, 12, 8, .55); display: grid; place-items: center; padding: 20px; }

.catalogo-modal { position: relative; width: min(920px, 100%); background: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 30px 80px rgba(0,0,0,.35); }

.catalogo-close { position: absolute; right: 14px; top: 14px; z-index: 2; border: 0; background: rgba(0,0,0,.08); width: 36px; height: 36px; border-radius: 999px; font-size: 22px; cursor: pointer; }

.catalogo-modal-photo { min-height: 390px; background: #f1ece6; display: grid; place-items: center; color: #7b1f17; font-size: 46px; padding: 26px; text-align: center; }

.catalogo-modal-photo strong { display: block; font-size: 22px; word-break: break-word; }

.catalogo-modal-photo small { display: block; margin-top: 10px; color: #806b62; font-size: 12px; word-break: break-word; }

.catalogo-modal-info { padding: 34px; display: flex; flex-direction: column; gap: 16px; }

.catalogo-modal-info h2 { margin: 0; font-size: clamp(24px, 4vw, 36px); line-height: 1.05; letter-spacing: -.05em; }

.catalogo-price { margin: 0; color: #7b1f17; font-size: 34px; font-weight: 950; letter-spacing: -.05em; }

.catalogo-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.catalogo-detail-grid div { background: #faf7f4; border: 1px solid #efe5de; border-radius: 14px; padding: 12px; }

.catalogo-detail-grid small { display: block; color: #806b62; font-weight: 700; margin-bottom: 4px; }

.catalogo-detail-grid strong { font-size: 16px; }

.catalogo-whatsapp { margin-top: auto; border-radius: 12px; background: #22a45a; color: #fff; text-decoration: none; text-align: center; padding: 10px 12px; font-weight: 900; box-shadow: 0 10px 20px rgba(34,164,90,.22); }

.skeleton-card { padding: 18px; min-height: 280px; }

@media (max-width: 1100px) { .catalogo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 760px) { .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .catalogo-admin-link { position: static; display: inline-block; margin-top: 14px; } .catalogo-modal { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; } .catalogo-modal-photo { min-height: 260px; } }

.catalogo-code { color: #806b62; font-size: 10px; font-weight: 800; }

.catalogo-page .catalogo-hero { top: 0; }

.product-image { width: 100%; height: 100%; object-fit: cover; display: block; background: #f1ece6; }

.product-image-fallback { width: 100%; height: 100%; min-height: 72px; display: grid; place-items: center; align-content: center; gap: 4px; background: radial-gradient(circle at 30% 20%, #fff6ef, #e8ddd5); color: #7b1f17; text-align: center; }

.product-image-fallback span { font-size: 28px; line-height: 1; }

.product-image-fallback small { color: #806b62; font-size: 11px; font-weight: 800; }

.product-thumb { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(123,31,23,.14); background: #f1ece6; }

.catalogo-modal-photo .product-image, .catalogo-modal-photo .product-image-fallback { min-height: 390px; }

@media (max-width: 760px) { .catalogo-modal-photo .product-image, .catalogo-modal-photo .product-image-fallback { min-height: 260px; } }

.catalogo-model-code { color: #5f5752; font-size: 18px; font-weight: 900; letter-spacing: .04em; }

.catalogo-model-table { margin: 18px 0 12px; display: grid; grid-template-columns: 1.15fr 1fr .75fr 1.25fr; gap: 10px; align-items: stretch; }

.catalogo-model-table > div { border: 1px solid #eadfd8; border-radius: 16px; padding: 13px 10px; text-align: center; background: #fffdfc; display: grid; gap: 8px; }

.catalogo-model-table small { color: #7b1f17; font-size: 11px; font-weight: 950; letter-spacing: .04em; }

.catalogo-model-table strong { color: #211915; font-size: 23px; font-weight: 950; white-space: nowrap; }

.catalogo-model-table span { color: #766760; font-size: 12px; font-weight: 850; }

.catalogo-model-rule { margin: 4px 0 0; border: 1px solid #7b1f17; border-radius: 20px; padding: 18px 18px; color: #fff; background: linear-gradient(135deg, #7b1f17 0%, #4b120e 100%); text-align: center; font-weight: 950; letter-spacing: .02em; display: grid; place-items: center; gap: 6px; min-height: 132px; box-shadow: 0 14px 28px rgba(123,31,23,.22); position: relative; }

.catalogo-model-rule > span { font-size: 12px; text-transform: uppercase; opacity: .86; }

.catalogo-model-rule > strong { font-size: clamp(42px, 5.4vw, 72px); line-height: .9; letter-spacing: -.06em; }

.catalogo-box-price { position: absolute; right: 12px; top: 12px; border-radius: 14px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); padding: 8px 10px; min-width: 116px; text-align: right; }

.catalogo-box-price span { display: block; color: rgba(255,255,255,.76); font-size: 9px; text-transform: uppercase; font-weight: 900; line-height: 1; }

.catalogo-box-price strong { display: block; color: #fff; font-size: 18px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; }

.catalogo-model-editor-title { margin: 0 0 8px; display: grid; gap: 3px; }

.catalogo-model-editor-title span { width: fit-content; border-radius: 999px; background: #eef7ff; color: #13628a; padding: 3px 7px; font-size: 10px; font-weight: 900; text-transform: uppercase; }

.catalogo-model-editor-title strong { color: #251a17; font-size: 14px; font-weight: 950; }

.catalogo-model-editor { grid-template-columns: .55fr .55fr 1.1fr .7fr .9fr 1fr; gap: 8px; align-items: end; }

.catalogo-model-editor .catalogo-price-edit { grid-column: auto; }

.catalogo-model-editor select { border: 0; background: transparent; color: #251a17; font-size: 15px; font-weight: 900; outline: none; width: 100%; }

.catalogo-negotiation-note { margin: 6px 0 0; color: #8a7a72; font-size: 11px; font-weight: 750; }

@media (max-width: 760px) { .catalogo-model-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalogo-model-editor { grid-template-columns: 1fr; } }

.catalogo-shell { max-width: none; margin: 0; padding: 16px 14px 24px 0; display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 12px; align-items: start; }

.catalogo-sidebar { position: sticky; top: 104px; border: 1px solid #ead9cf; border-left: 0; background: #fffdfc; border-radius: 0 18px 18px 0; padding: 12px 10px 12px 8px; display: grid; gap: 6px; box-shadow: 8px 14px 30px rgba(62,30,20,.08); max-height: calc(100vh - 120px); overflow: auto; }

.catalogo-sidebar strong { color: #251a17; font-size: 13px; font-weight: 950; margin-bottom: 2px; padding-left: 4px; }

.catalogo-sidebar button { border: 0; border-radius: 11px; background: #faf4ef; color: #5b453d; padding: 8px 9px; text-align: left; font-size: 12px; line-height: 1.08; font-weight: 850; cursor: pointer; }

.catalogo-sidebar button.active, .catalogo-sidebar button:hover { background: #7b1f17; color: white; }

.catalogo-sidebar small { margin-top: 6px; color: #8a7a72; font-size: 11px; font-weight: 700; line-height: 1.25; padding-left: 4px; }

.catalogo-shell .catalogo-content { padding: 0; max-width: none; margin: 0; }

.catalogo-product-detail-modal { width: min(1180px, calc(100vw - 22px)); height: min(760px, calc(100vh - 22px)); max-height: calc(100vh - 22px); overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 0; background: #f7f2ee; }

.catalogo-product-detail-modal .catalogo-close { z-index: 5; }

.catalogo-client-block { min-height: 0; display: grid; grid-template-columns: 43% 57%; gap: 0; background: #fff; border-radius: 22px 22px 0 0; overflow: hidden; }

.catalogo-client-photo { background: #f7f1ed; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; }

.catalogo-client-photo .product-image { width: 100%; height: 100%; max-height: 100%; object-fit: contain; border-radius: 18px; background: #fff; }

.catalogo-client-photo .product-image-fallback { width: 100%; height: 100%; min-height: 260px; }

.catalogo-client-info { min-height: 0; padding: 26px 32px 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }

.catalogo-client-info h2 { margin: 0; color: #1f1714; font-size: clamp(24px, 3vw, 40px); line-height: .98; letter-spacing: -.055em; font-weight: 950; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.catalogo-client-block .catalogo-model-table { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 6px; }

.catalogo-client-block .catalogo-model-table > div { border-radius: 16px; padding: 10px 8px; box-shadow: 0 8px 18px rgba(80,42,26,.06); }

.catalogo-client-block .catalogo-model-table small { font-size: 10px; line-height: 1.05; white-space: nowrap; }

.catalogo-client-block .catalogo-model-table strong { font-size: clamp(18px, 2vw, 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.catalogo-client-block .catalogo-model-table span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.catalogo-model-table-compact > div { min-height: 74px; display: grid; align-content: center; min-width: 0; }

.catalogo-seller-block { border-top: 1px solid #ead9cf; padding: 12px 18px 14px; background: #fbf7f4; }

.catalogo-seller-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }

.catalogo-seller-head span { color: #7b1f17; font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }

.catalogo-seller-head strong { color: #251a17; font-size: 16px; font-weight: 950; }

.catalogo-stepper { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 4px; }

.catalogo-stepper button { border: 0; border-radius: 9px; background: #7b1f17; color: white; height: 32px; font-size: 18px; font-weight: 950; cursor: pointer; }

.catalogo-stepper input { text-align: center; }

@media (max-width: 980px) { .catalogo-client-block { grid-template-columns: 1fr; } .catalogo-product-detail-modal { height: min(880px, calc(100vh - 18px)); overflow: auto; } .catalogo-client-photo { min-height: 260px; max-height: 38vh; } .catalogo-client-info { padding: 22px 18px; } .catalogo-model-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalogo-share-actions { grid-template-columns: 1fr; } }

/* Design System cycle: safer responsive containment for dense catalog layouts */

.catalogo-product-detail-modal,
.catalogo-selection-bar,
.catalogo-sidebar,
.catalogo-card,
.catalogo-client-info,
.catalogo-seller-block {
  min-width: 0;
}

.catalogo-product-detail-modal {
  overscroll-behavior: contain;
}

.catalogo-selection-bar {
  top: 12px;
}

.catalogo-client-info h2,
.catalogo-card h2,
.catalogo-sidebar button,
.catalogo-model-table strong {
  overflow-wrap: anywhere;
}

.catalogo-client-block .catalogo-model-table > div {
  min-width: 0;
}

.catalogo-model-table strong {
  white-space: normal;
  line-height: 1.05;
}

@media (max-width: 1240px) {
  .catalogo-shell {
    grid-template-columns: 158px minmax(0, 1fr);
    gap: 10px;
    padding-right: 10px;
  }

  .catalogo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .catalogo-sidebar button {
    font-size: 11px;
    padding: 7px 8px;
  }
}

@media (max-width: 900px) {
  .catalogo-shell {
    grid-template-columns: 1fr;
    padding: 12px 12px 24px;
  }

  .catalogo-sidebar {
    position: static;
    display: flex;
    overflow-x: auto;
    border-left: 1px solid #ead9cf;
    border-radius: 16px;
    padding: 10px;
    max-height: none;
  }

  .catalogo-sidebar strong, .catalogo-sidebar small { display: none; }
  .catalogo-sidebar button { white-space: nowrap; }
  .catalogo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .catalogo-selection-bar {
    position: relative;
    top: auto;
  }

  .catalogo-client-block {
    min-height: auto;
  }

  .catalogo-client-photo {
    min-height: 320px;
  }

  .catalogo-client-info h2 {
    font-size: clamp(28px, 8vw, 42px);
  }
}

@media (max-width: 560px) {
  .catalogo-page {
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
  }

  .catalogo-hero {
    position: relative;
  }

  .catalogo-hero-inner {
    padding: 16px 12px 14px;
    display: block;
  }

  .catalogo-brand {
    gap: 10px;
  }

  .catalogo-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 22px;
  }

  .catalogo-logo-image {
    width: 96px;
    height: 42px;
    padding: 5px 7px;
  }

  .catalogo-brand h1 {
    font-size: 25px;
  }

  .catalogo-brand p {
    font-size: 13px;
  }

  .catalogo-search {
    margin-top: 14px;
    padding-left: 12px;
    gap: 8px;
  }

  .catalogo-hero-actions {
    grid-column: auto;
    margin-top: 12px;
  }

  .catalogo-search input {
    min-width: 0;
    font-size: 14px;
    padding: 12px 0;
  }

  .catalogo-search button {
    padding: 6px 9px;
    font-size: 12px;
  }

  .catalogo-shell {
    width: 100%;
    max-width: 100%;
    padding: 10px 10px 22px;
    gap: 10px;
  }

  .catalogo-sidebar {
    position: sticky;
    top: 0;
    z-index: 9;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-left: 1px solid #ead9cf;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 8px 22px rgba(62,30,20,.08);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .catalogo-sidebar::-webkit-scrollbar {
    display: none;
  }

  .catalogo-sidebar button {
    flex: 0 0 auto;
    max-width: 72vw;
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 11px;
  }

  .catalogo-shell .catalogo-content {
    width: 100%;
    max-width: 100%;
  }

  .catalogo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .catalogo-card {
    border-radius: 12px;
  }

  .catalogo-card-body {
    padding: 7px;
    gap: 4px;
  }

  .catalogo-card h2 {
    min-height: 34px;
    font-size: 11.5px;
  }

  .catalogo-price-stack {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .catalogo-price-stack span {
    padding: 5px;
    font-size: 11px;
  }

  .catalogo-selection-bar {
    align-items: stretch;
  }

  .catalogo-selection-bar .outline-btn,
  .catalogo-selection-bar .catalogo-share-image,
  .catalogo-selection-bar .catalogo-whatsapp {
    width: 100%;
  }

  .catalogo-modal-backdrop {
    padding: 6px;
    overflow: hidden;
  }

  .catalogo-product-detail-modal {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 18px;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .catalogo-client-block {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: 25vh minmax(0, 1fr);
  }

  .catalogo-client-photo {
    min-height: 0;
    max-height: none;
    padding: 8px;
  }

  .catalogo-client-info {
    min-height: 0;
    padding: 12px 12px 8px;
    gap: 6px;
    justify-content: start;
  }

  .catalogo-client-info h2 {
    font-size: clamp(19px, 5.8vw, 26px);
    -webkit-line-clamp: 2;
  }

  .catalogo-client-block .catalogo-model-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 4px 0;
  }

  .catalogo-client-block .catalogo-model-table > div {
    border-radius: 12px;
    padding: 7px 6px;
    gap: 4px;
  }

  .catalogo-client-block .catalogo-model-table small {
    font-size: 8px;
  }

  .catalogo-client-block .catalogo-model-table strong {
    font-size: 16px;
  }

  .catalogo-client-block .catalogo-model-table span {
    font-size: 10px;
  }

  .catalogo-model-code {
    font-size: 13px;
  }

  .catalogo-model-rule {
    padding: 5px 4px;
    font-size: 9px;
  }

  .catalogo-seller-block {
    padding: 8px;
  }

  .catalogo-seller-head {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
  }

  .catalogo-seller-head span {
    font-size: 8px;
  }

  .catalogo-seller-head strong {
    font-size: 12px;
  }

  .catalogo-share-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
  }

  .catalogo-share-editor label,
  .catalogo-price-edit input,
  .catalogo-model-editor select {
    font-size: 12px;
    padding: 6px;
  }

  .catalogo-price-edit span {
    font-size: 8px;
  }

  .catalogo-stepper {
    grid-template-columns: 27px 1fr 27px;
  }

  .catalogo-stepper button {
    height: 28px;
    border-radius: 8px;
  }

  .catalogo-negotiation-note {
    display: none;
  }

  .catalogo-share-actions {
    margin-top: 6px;
    gap: 5px;
  }

  .catalogo-share-image,
  .catalogo-whatsapp,
  .catalogo-share-actions .outline-btn {
    padding: 8px;
    font-size: 12px;
    border-radius: 10px;
  }
}

.catalogo-hero-actions { grid-column: 2; margin-top: -8px; display: flex; justify-content: flex-end; }

.catalogo-offer-btn, .catalogo-offer-secondary { border: 0; border-radius: 999px; background: #ffd166; color: #5b120f; padding: 10px 15px; font-weight: 950; cursor: pointer; box-shadow: 0 12px 24px rgba(0,0,0,.16); }

.catalogo-offer-secondary { border-radius: 12px; padding: 10px 12px; box-shadow: none; }

.catalogo-offer-backdrop { z-index: 130; }

.catalogo-offer-modal { position: relative; width: min(1120px, calc(100vw - 18px)); height: min(760px, calc(100vh - 18px)); background: #fff8f1; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: 390px minmax(0, 1fr); box-shadow: 0 30px 80px rgba(0,0,0,.36); }

.catalogo-offer-form { min-width: 0; padding: 26px; background: #fff; border-right: 1px solid #edd9cc; display: flex; flex-direction: column; gap: 14px; overflow: auto; }

.catalogo-offer-kicker { width: fit-content; border-radius: 999px; background: #fff0cc; color: #7b1f17; padding: 5px 9px; font-size: 11px; font-weight: 950; text-transform: uppercase; }

.catalogo-offer-form h2 { margin: 8px 0 3px; color: #251a17; font-size: 30px; letter-spacing: -.04em; }

.catalogo-offer-form p { margin: 0; color: #806b62; font-weight: 700; }

.catalogo-offer-form label { display: grid; gap: 6px; color: #5b453d; font-size: 12px; font-weight: 900; }

.catalogo-offer-form input { width: 100%; border: 1px solid #e7d5ca; border-radius: 12px; padding: 11px 12px; color: #251a17; font-size: 15px; font-weight: 850; outline: 0; }

.catalogo-offer-code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.catalogo-offer-code-row button { border: 0; border-radius: 12px; background: #7b1f17; color: white; padding: 0 14px; font-weight: 900; cursor: pointer; }

.catalogo-offer-product-mini { border: 1px solid #ead9cf; background: #fffaf6; border-radius: 16px; padding: 10px; display: flex; gap: 10px; align-items: center; }

.catalogo-offer-product-mini div:last-child { min-width: 0; display: grid; gap: 3px; }

.catalogo-offer-product-mini strong { color: #251a17; font-size: 13px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.catalogo-offer-product-mini span, .catalogo-offer-empty { color: #806b62; font-size: 12px; font-weight: 800; }

.catalogo-offer-empty { border: 1px dashed #dfcabe; border-radius: 14px; padding: 14px; text-align: center; }

.catalogo-offer-price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.catalogo-offer-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.catalogo-offer-actions button:disabled { opacity: .55; cursor: not-allowed; }

.catalogo-offer-preview { min-width: 0; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 50% 0%, #fff5ed, #ecd6c8); overflow: hidden; }

.card-oferta {
  width: min(520px, 100%);
  aspect-ratio: 520 / 650;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 28px 70px rgba(80, 20, 15, .35);
  font-family: Arial, Helvetica, sans-serif;
  color: #171717;
}

.card-oferta .topo {
  height: 28%;
  background: radial-gradient(circle at top left, #e63225, #8b1712 65%);
  color: #fff;
  text-align: center;
  padding-top: 4.6%;
  position: relative;
}

.card-oferta .topo::after {
  content: "";
  position: absolute;
  bottom: -45px;
  left: -10%;
  width: 120%;
  height: 90px;
  background: #fff;
  border-radius: 50% 50% 0 0;
}

.card-oferta .selo {
  display: inline-block;
  background: #ffcc22;
  color: #300;
  padding: 9px 28px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 10px;
}

.card-oferta .titulo {
  font-size: 72px;
  font-weight: 1000;
  letter-spacing: -4px;
  line-height: .85;
  text-shadow: 0 5px 0 rgba(0,0,0,.22);
}

.card-oferta .subtitulo {
  background: #5d100d;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  margin-top: 12px;
  font-weight: 900;
  font-size: 18px;
}

.card-oferta .corpo {
  position: relative;
  z-index: 2;
  padding: 8px 24px 0;
}

.card-oferta .produto {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: 10px;
  align-items: center;
}

.card-oferta .foto-box {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transform: translateX(-8px);
}

.card-oferta .foto-box img,
.card-oferta .foto-box .product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.card-oferta .foto-placeholder {
  font-size: 90px;
}

.card-oferta .info h2 {
  font-size: 23px;
  line-height: 1.02;
  font-weight: 1000;
  color: #171717;
  margin-bottom: 7px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-oferta .codigo {
  font-size: 15px;
  color: #555;
  margin-bottom: 14px;
}

.card-oferta .de {
  font-size: 22px;
  font-weight: 900;
  color: #2b2b2b;
}

.card-oferta .de span {
  text-decoration: line-through;
  color: #222;
}

.card-oferta .preco {
  margin-top: 8px;
  background: linear-gradient(135deg, #8c1712, #df1f1a);
  border-radius: 18px 18px 0 0;
  padding: 12px 14px;
  color: white;
  box-shadow: 0 14px 28px rgba(140,23,18,.3);
}

.card-oferta .preco .label {
  font-size: 24px;
  font-weight: 1000;
}

.card-oferta .preco .valor {
  font-size: clamp(44px, 10.5vw, 58px);
  font-weight: 1000;
  line-height: .9;
  letter-spacing: -3px;
  white-space: nowrap;
}

.card-oferta .regra {
  margin-top: 0;
  background: #ffcc22;
  color: #290000;
  padding: 10px;
  text-align: center;
  font-weight: 1000;
  font-size: 18px;
  border-radius: 0 0 14px 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-oferta .rodape {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #5e0e0b, #8c1712);
  color: white;
  padding: 14px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  min-height: 78px;
  border-top: 5px solid #ffcc22;
}

.card-oferta .rodape small {
  display: block;
  opacity: .85;
  font-size: 12px;
  margin-top: 4px;
}

.card-oferta .marca {
  font-size: 26px;
  font-weight: 1000;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 760px) { .catalogo-hero-actions { justify-content: stretch; } .catalogo-offer-btn { width: 100%; } .catalogo-offer-modal { height: calc(100dvh - 12px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .catalogo-offer-form { padding: 14px; border-right: 0; border-bottom: 1px solid #edd9cc; gap: 9px; overflow: visible; } .catalogo-offer-form h2 { font-size: 23px; margin: 4px 0 0; } .catalogo-offer-form p, .catalogo-offer-kicker { display: none; } .catalogo-offer-form input { padding: 8px 10px; font-size: 13px; } .catalogo-offer-product-mini { padding: 7px; } .catalogo-offer-actions { margin-top: 0; } .catalogo-offer-preview { padding: 8px; align-items: start; } .card-oferta { width: min(300px, 100%); border-radius: 18px; } .card-oferta .topo { height: 26%; padding-top: 9px; } .card-oferta .topo::after { bottom: -28px; height: 58px; } .card-oferta .selo { font-size: 14px; padding: 6px 18px; margin-bottom: 7px; } .card-oferta .titulo { font-size: 44px; letter-spacing: -2px; } .card-oferta .subtitulo { font-size: 12px; margin-top: 8px; padding: 6px 12px; } .card-oferta .corpo { padding: 5px 14px 0; } .card-oferta .produto { grid-template-columns: 49% 51%; gap: 7px; } .card-oferta .foto-box { height: 185px; transform: translateX(-5px); } .card-oferta .info h2 { font-size: 14px; margin-bottom: 5px; } .card-oferta .codigo { font-size: 10px; margin-bottom: 6px; } .card-oferta .de { font-size: 14px; } .card-oferta .preco { margin-top: 5px; border-radius: 12px; padding: 8px 10px; } .card-oferta .preco .label { font-size: 14px; } .card-oferta .preco .valor { font-size: 28px; letter-spacing: -2px; } .card-oferta .regra { padding: 6px; font-size: 10px; border-radius: 0 0 10px 10px; } .card-oferta .rodape { padding: 10px 14px; font-size: 11px; } .card-oferta .rodape small { font-size: 9px; } .card-oferta .marca { font-size: 14px; } }

.catalogo-mode-toggle { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.catalogo-mode-toggle button { border: 1px solid #ead9cf; background: #fff; color: #7b1f17; border-radius: 10px; padding: 9px; font-weight: 950; cursor: pointer; }

.catalogo-mode-toggle button.active { background: #7b1f17; color: #fff; border-color: #7b1f17; box-shadow: 0 8px 18px rgba(123,31,23,.18); }

/* Catálogo: seleção editável mais compacta e clara */

.catalogo-selection-bar {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.catalogo-selection-bar div { margin-right: 0; }

.catalogo-selection-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalogo-selection-head > div:first-child { display: grid; gap: 2px; }

.catalogo-selection-total {
  min-width: 132px;
  border-radius: 14px;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  text-align: right;
}

.catalogo-selection-total small { display: block; color: #9a3412; font-size: 10px; font-weight: 900; text-transform: uppercase; }

.catalogo-selection-total b { color: #7c2d12; font-size: 16px; }

.catalogo-selection-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px !important;
}

.catalogo-selection-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px !important;
  border: 1px solid #f0e2da;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fffaf7);
  padding: 10px;
}

.catalogo-selection-chip-main { min-width: 0; display: grid !important; gap: 2px !important; }

.catalogo-selection-chip-main strong {
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalogo-selection-chip-main span { font-size: 10px; color: #9b8175; }

.catalogo-selection-qty {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
}

.catalogo-selection-qty em {
  font-style: normal;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f7f1ec;
  color: #7b1f17;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.catalogo-selection-qty em.total { background: #dcfce7; color: #166534; }

.catalogo-selection-chip-actions {
  display: flex !important;
  gap: 6px !important;
}

.catalogo-selection-chip-actions button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.catalogo-selection-chip-actions button:first-child { background: #7b1f17; color: #fff; }

.catalogo-selection-chip-actions button:last-child { background: #fee2e2; color: #991b1b; }

.catalogo-selection-actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 8px !important;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .catalogo-selection-head { align-items: stretch; flex-direction: column; }
  .catalogo-selection-total { text-align: left; }
  .catalogo-selection-chip { grid-template-columns: 1fr; }
  .catalogo-selection-qty { flex-wrap: wrap; }
  .catalogo-selection-chip-actions button { flex: 1; }
}

/* Catálogo por segmento */

.catalogo-segment-panel {
  border: 1px solid #ead9cf;
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fff8f4);
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(62,30,20,.08);
}

.catalogo-segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.catalogo-segment-head div { display: grid; gap: 2px; }

.catalogo-segment-head strong { color: #251a17; font-size: 16px; }

.catalogo-segment-head span { color: #806b62; font-size: 12px; font-weight: 700; }

.catalogo-segment-head button {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: #7b1f17;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.catalogo-segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.catalogo-segment-grid button {
  border: 1px solid #f0e2da;
  border-radius: 14px;
  padding: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}

.catalogo-segment-grid button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(62,30,20,.1); }

.catalogo-segment-grid button.active { border-color: #7b1f17; background: #fff1ed; box-shadow: inset 0 0 0 1px #7b1f17; }

.catalogo-segment-grid strong { display: block; color: #251a17; font-size: 13px; margin-bottom: 4px; }

.catalogo-segment-grid span { display: block; color: #806b62; font-size: 11px; line-height: 1.25; }

.catalogo-segment-note { margin: 10px 2px 0; color: #7b1f17; font-size: 12px; font-weight: 800; }

@media (max-width: 760px) {
  .catalogo-segment-head { align-items: stretch; flex-direction: column; }
  .catalogo-segment-head button { width: 100%; }
}

.catalogo-segment-actions { display: flex !important; align-items: center; gap: 8px !important; }

.catalogo-segment-actions label { display: flex; align-items: center; gap: 6px; border: 1px solid #ead9cf; border-radius: 999px; padding: 6px 8px; background: #fff; }

.catalogo-segment-actions label span { color: #806b62; font-size: 11px; font-weight: 900; }

.catalogo-segment-actions select { border: 0; outline: 0; background: transparent; color: #7b1f17; font-weight: 900; }

@media (max-width: 760px) { .catalogo-segment-actions { flex-direction: column; align-items: stretch; } .catalogo-segment-actions label { justify-content: space-between; border-radius: 14px; } }

.catalogo-stock-item { color: #166534; background: #dcfce7; border-radius: 999px; padding: 3px 7px; font-weight: 900; }

.catalogo1-page{min-height:100vh;background:#fbfaf9;color:#251a17}

.catalogo1-top{background:linear-gradient(135deg,#7b1f17,#2f0d0a);color:#fff;padding:24px;display:grid;grid-template-columns:1fr minmax(320px,520px);gap:20px}

.catalogo1-top h1{margin:0;font-size:34px}

.catalogo1-top p{margin:4px 0 0;color:#ffe4dc}

.catalogo1-client{position:relative}

.catalogo1-client label{display:grid;gap:6px;font-weight:900}

.catalogo1-client label div{display:flex;gap:8px}

.catalogo1-client input,.catalogo1-context input,.catalogo1-context select,.catalogo1-search input{width:100%;border:1px solid #ead9cf;border-radius:12px;padding:11px;background:#fff;color:#251a17}

.catalogo1-client button,.catalogo1-card-actions button,.catalogo1-finish,.catalogo1-whatsapp{border:0;border-radius:12px;padding:11px 13px;background:#7b1f17;color:#fff;font-weight:900;cursor:pointer;text-decoration:none;text-align:center}

.catalogo1-client-results{position:absolute;z-index:30;left:0;right:0;top:72px;background:#fff;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.2);overflow:hidden}

.catalogo1-client-results button{display:grid;width:100%;text-align:left;background:#fff;color:#251a17;border-radius:0;border-bottom:1px solid #f0e2da}

.catalogo1-client-results small{color:#806b62}

.catalogo1-context{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 22px;background:#fff;border-bottom:1px solid #ead9cf}

.catalogo1-context label{display:flex;align-items:center;gap:6px;font-weight:900}

.catalogo1-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;padding:18px 22px}

.catalogo1-search{display:flex;align-items:center;gap:12px;margin-bottom:14px}

.catalogo1-search span{font-size:12px;color:#806b62;font-weight:900;white-space:nowrap}

.catalogo1-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}

.catalogo1-card{background:#fff;border:1px solid #ead9cf;border-radius:16px;padding:10px;box-shadow:0 8px 20px rgba(62,30,20,.07)}

.catalogo1-photo{aspect-ratio:1.15/1;background:#f6f1ed;border-radius:12px;display:grid;place-items:center;overflow:hidden}

.catalogo1-card h2{font-size:13px;line-height:1.2;min-height:32px;margin:8px 0 4px}

.catalogo1-card small{display:block;color:#806b62;font-size:11px;font-weight:800}

.catalogo1-card strong{display:block;margin:7px 0;color:#7b1f17;font-size:18px}

.catalogo1-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.catalogo1-card-actions button:last-child{background:#1e40af}

.catalogo1-cart{position:sticky;top:12px;align-self:start;background:#fff;border:1px solid #ead9cf;border-radius:18px;padding:14px;box-shadow:0 12px 30px rgba(62,30,20,.12);display:grid;gap:10px}

.catalogo1-cart-head{display:flex;justify-content:space-between;align-items:center}

.catalogo1-cart-head>div{display:grid;gap:2px}

.catalogo1-cart-head span{font-size:11px;color:#806b62;font-weight:900}

.catalogo1-cart-actions-top{position:sticky;top:0;z-index:5;background:#fff;padding:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;border-bottom:1px solid #f0e2da}

.catalogo1-cart h2{margin:0}

.catalogo1-cart-item{border:1px solid #f0e2da;border-radius:14px;padding:10px;display:grid;gap:7px}

.catalogo1-cart-item strong{font-size:13px}

.catalogo1-cart-item small{color:#166534;font-weight:900}

.catalogo1-cart-item div{display:grid;grid-template-columns:1fr 1fr 1.15fr auto;gap:6px;align-items:end}

.catalogo1-cart-item label{font-size:10px;font-weight:900;color:#806b62}

.catalogo1-cart-item input{width:100%;border:1px solid #ead9cf;border-radius:10px;padding:7px}

.catalogo1-cart-item button{border:0;border-radius:10px;background:#fee2e2;color:#991b1b;font-weight:900;padding:8px}

.catalogo1-whatsapp{background:#16a34a}

.catalogo1-whatsapp.disabled{opacity:.45;pointer-events:none}

.catalogo1-finish:disabled{opacity:.45;cursor:not-allowed}

@media(max-width:900px){.catalogo1-top,.catalogo1-layout{grid-template-columns:1fr}.catalogo1-cart{position:static}.catalogo1-context{align-items:stretch}.catalogo1-context label{width:100%}}

.catalogo1-client-panel{margin:14px 22px 0;background:#fff;border:1px solid #ead9cf;border-radius:20px;padding:16px;box-shadow:0 12px 30px rgba(62,30,20,.08);display:grid;gap:14px}

.catalogo1-client-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}

.catalogo1-client-panel-head span{font-size:11px;font-weight:900;text-transform:uppercase;color:#7b1f17}

.catalogo1-client-panel-head h2{margin:2px 0;font-size:22px}

.catalogo1-client-panel-head p{margin:0;color:#806b62;font-weight:800}

.catalogo1-credit-badge{border-radius:999px;padding:9px 12px;font-weight:900;font-size:12px;white-space:nowrap}

.catalogo1-credit-badge.ok{background:#dcfce7;color:#166534}

.catalogo1-credit-badge.warn{background:#fee2e2;color:#991b1b}

.catalogo1-client-kpis{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px}

.catalogo1-client-kpis div{background:#fbfaf9;border:1px solid #f0e2da;border-radius:14px;padding:10px;display:grid;gap:3px}

.catalogo1-client-kpis span{font-size:11px;text-transform:uppercase;color:#806b62;font-weight:900}

.catalogo1-client-kpis strong{font-size:17px;color:#251a17}

.catalogo1-client-kpis small{color:#806b62;font-weight:800}

.catalogo1-client-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.catalogo1-client-lists>div{border:1px solid #f0e2da;border-radius:16px;padding:12px;display:grid;gap:8px}

.catalogo1-client-lists h3{margin:0;font-size:15px}

.catalogo1-client-lists button{border:1px solid #ead9cf;background:#fff;border-radius:12px;padding:9px;text-align:left;cursor:pointer;display:grid;gap:3px}

.catalogo1-client-lists button:hover{border-color:#7b1f17;background:#fff7f4}

.catalogo1-client-lists button strong{font-size:13px}

.catalogo1-client-lists button span,.catalogo1-client-lists p{font-size:11px;color:#806b62;font-weight:800;margin:0}

@media(max-width:900px){.catalogo1-client-panel-head,.catalogo1-client-lists{grid-template-columns:1fr;display:grid}.catalogo1-client-kpis{grid-template-columns:1fr 1fr}.catalogo1-credit-badge{justify-self:start}}

.catalogo1-client-panel.collapsed{padding:12px 16px}

.catalogo1-client-panel-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.catalogo1-client-panel-actions button{border:1px solid #ead9cf;border-radius:999px;background:#fff;color:#7b1f17;font-weight:900;padding:9px 12px;cursor:pointer}

.catalogo1-client-compact{display:flex;gap:12px;flex-wrap:wrap;color:#806b62;font-weight:900;font-size:12px}

.catalogo1-client-panel:not(.collapsed) .catalogo1-client-compact{border-top:1px solid #f0e2da;padding-top:10px}

.catalogo1-cart-product{display:grid!important;grid-template-columns:52px 1fr!important;gap:8px!important;align-items:center!important}

.catalogo1-cart-photo{width:52px;height:52px;border-radius:12px;background:#f6f1ed;overflow:hidden;display:grid;place-items:center}

.catalogo1-cart-photo img{width:100%;height:100%;object-fit:cover}

.catalogo1-cart-summary {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.catalogo1-cart-summary div {
  display: grid;
  gap: 3px;
}

.catalogo1-cart-summary span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-text, #94a3b8);
  font-weight: 800;
}

.catalogo1-cart-summary strong {
  color: var(--text-color, #f8fafc);
  font-size: 0.92rem;
  line-height: 1.2;
}

.catalogo1-cart-summary div:last-child {
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.catalogo1-cart-summary div:last-child strong {
  font-size: 1.25rem;
  color: #22c55e;
}

.catalogo-standalone-shell {
  min-height: 100vh;
  background: var(--page-bg, #050816);
  padding: 18px;
}

.catalogo-standalone-inner {
  width: min(1800px, 100%);
  margin: 0 auto;
}

.catalogo-standalone-shell .catalogo1-page {
  margin: 0;
}

@media (max-width: 760px) {
  .catalogo-standalone-shell {
    padding: 10px;
  }
}

.catalogo1-card h2 {
  min-height: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalogo1-cart-head h2 {
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #7b1f17;
  color: #fff;
  font-size: 20px;
}

.catalogo1-context select {
  min-width: 150px;
}

/* Ajustes para o catálogo de vendas ficar integrado, sem aparência de tela flutuante */

.catalogo-standalone-shell {
  background: #fbfaf9 !important;
  padding: 0 !important;
}

.catalogo-standalone-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.catalogo-standalone-shell .catalogo1-page {
  min-height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

.catalogo1-top {
  background: linear-gradient(135deg, #7b1f17 0%, #5e0e0b 48%, #2f0d0a 100%) !important;
}

.catalogo1-brand-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.catalogo1-logo {
  width: 172px;
  min-height: 72px;
  border-radius: 18px;
  background: #fff;
  padding: 10px 14px;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

.catalogo1-logo img {
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  display: block;
}

.catalogo1-cat-link {
  align-self: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: .18s ease;
}

.catalogo1-cat-link:hover {
  background: #fff;
  color: #7b1f17;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .catalogo1-brand-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .catalogo1-logo {
    width: 148px;
    min-height: 60px;
  }
}

/* Carrinho sem quadro duplicado de cliente/prazo/total */

.catalogo1-cart-summary { display: none !important; }

/* Catalogo-1 v2 — painel de venda inteligente */

.catalogo1-page{background:#F7F8FA!important}

.catalogo1-top.compact{padding:14px 22px!important;grid-template-columns:minmax(0,1fr) minmax(320px,480px)!important;align-items:center}

.catalogo1-top.compact h1{font-size:24px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-top.compact p{font-size:13px}

.catalogo1-context-compact{position:sticky;top:0;z-index:20;padding:10px 22px!important;box-shadow:0 10px 26px rgba(15,23,42,.06);border-bottom:0!important}

.catalogo1-context-compact span{font-size:12px;color:#64748b;font-weight:900}

.catalogo1-ai-strip{margin:14px 22px 0;background:#fff;border:1px solid #ECECEC;border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(220px,1fr) 180px auto auto;align-items:center;gap:16px;box-shadow:0 12px 30px rgba(15,23,42,.07)}

.catalogo1-ai-strip span{font-size:12px;color:#7b1f17;text-transform:uppercase;font-weight:900}

.catalogo1-ai-strip strong{display:block;font-size:20px;color:#111827}

.catalogo1-ai-strip p{margin:4px 0 0;color:#64748b;font-size:13px;font-weight:800}

.catalogo1-ai-strip>b{color:#166534}

.catalogo1-ai-strip button{border:0;border-radius:12px;background:#7b1f17;color:#fff;font-weight:900;height:44px;padding:0 18px;cursor:pointer}

.catalogo1-ai-meter{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}

.catalogo1-ai-meter i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:999px}

.catalogo1-client-panel{border-color:#ECECEC!important;box-shadow:0 12px 30px rgba(15,23,42,.06)!important}

.catalogo1-card{border-color:#ECECEC!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(15,23,42,.06)!important;transition:transform .2s ease,box-shadow .2s ease}

.catalogo1-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,23,42,.12)!important}

.catalogo1-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}

.catalogo1-badges span{font-size:10px;font-weight:900;border-radius:999px;background:#fff7ed;color:#c2410c;padding:4px 6px}

.catalogo1-badges .ok{background:#dcfce7;color:#166534}

.catalogo1-badges .warn{background:#fee2e2;color:#991b1b}

.catalogo1-margin{display:block;color:#166534;font-style:normal;font-size:11px;font-weight:900;margin:-3px 0 7px}

.catalogo1-cart{border-color:#ECECEC!important;box-shadow:0 16px 40px rgba(15,23,42,.1)!important}

.catalogo1-cart-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

.catalogo1-cart-kpis span{background:#F7F8FA;border-radius:12px;padding:8px;color:#64748b;font-size:11px;font-weight:900}

.catalogo1-cart-kpis b{display:block;color:#111827;font-size:13px}

.catalogo1-progress{display:grid;gap:6px;background:#F7F8FA;border-radius:12px;padding:9px;overflow:hidden}

.catalogo1-progress:before{content:"";display:none}

.catalogo1-progress i{height:8px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:999px}

.catalogo1-progress small{color:#64748b;font-weight:900;font-size:11px}

@media(max-width:900px){.catalogo1-ai-strip{grid-template-columns:1fr}.catalogo1-top.compact{grid-template-columns:1fr!important}}

/* Catalogo-1 — cards de recomendação comercial */

.catalogo1-last-order{display:grid;grid-template-columns:220px 1fr;gap:14px;background:#F7F8FA;border-radius:18px;padding:14px}

.catalogo1-last-order h3,.catalogo1-client-lists h3{margin:0;color:#111827}

.catalogo1-last-order p{margin:4px 0 0;color:#64748b;font-size:12px;font-weight:800}

.catalogo1-last-order-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}

.catalogo1-last-order-list button{border:1px solid #fee2e2;background:#fff;border-radius:14px;padding:10px;text-align:left;display:grid;gap:3px;cursor:pointer}

.catalogo1-last-order-list button.added{border-color:#bbf7d0;background:#f0fdf4}

.catalogo1-last-order-list span{font-size:18px}

.catalogo1-last-order-list strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-last-order-list small{color:#64748b;font-weight:900}

.catalogo1-opportunity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

.catalogo1-opportunity-grid>div{background:#fff;border:1px solid #ECECEC!important;box-shadow:0 8px 24px rgba(15,23,42,.05)}

.catalogo1-suggestion-card{border:1px solid #ECECEC;background:#fff;border-radius:16px;padding:10px;display:grid;grid-template-columns:66px 1fr;gap:10px;align-items:center;transition:transform .2s ease,box-shadow .2s ease}

.catalogo1-suggestion-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.1)}

.catalogo1-suggestion-photo{width:66px;height:66px;border-radius:14px;background:#F7F8FA;overflow:hidden;display:grid;place-items:center}

.catalogo1-suggestion-photo img{width:100%;height:100%;object-fit:cover}

.catalogo1-segment-score{width:66px;height:66px;border-radius:14px;background:#fff7ed;color:#c2410c;display:grid;place-items:center;text-align:center;font-size:12px;font-weight:900}

.catalogo1-suggestion-body{display:grid;gap:5px}

.catalogo1-suggestion-body strong{font-size:14px;color:#111827}

.catalogo1-suggestion-meta{display:flex;gap:6px;flex-wrap:wrap}

.catalogo1-suggestion-meta span{border-radius:999px;background:#F7F8FA;color:#64748b;padding:4px 7px;font-size:10px;font-weight:900}

.catalogo1-suggestion-body p{margin:0;color:#64748b;font-size:11px;font-weight:800}

.catalogo1-suggestion-body button{justify-self:start;border:0;border-radius:10px;background:#7b1f17;color:#fff;font-weight:900;padding:8px 12px;cursor:pointer}

.catalogo1-suggestion-card.premium .catalogo1-segment-score{background:#dcfce7;color:#166534}

.catalogo1-suggestion-card.promo .catalogo1-suggestion-meta span:first-child{background:#ffedd5;color:#c2410c}

@media(max-width:900px){.catalogo1-last-order,.catalogo1-opportunity-grid{grid-template-columns:1fr!important}}

/* Carrinho: remover métricas confusas e manter só explicação útil da IA */

.catalogo1-cart-kpis,.catalogo1-progress{display:none!important}

.catalogo1-smart-note{border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0;padding:10px;display:grid;gap:4px}

.catalogo1-smart-note strong{font-size:12px;color:#7b1f17}

.catalogo1-smart-note span{font-size:12px;color:#475569;font-weight:800;line-height:1.35}

/* Atalhos e IA mais objetiva */

.catalogo1-shortcuts{color:#94a3b8;font-size:11px;font-weight:900;white-space:nowrap}

.catalogo1-ai-actions{display:grid;gap:3px}

.catalogo1-ai-actions b{color:#166534}

.catalogo1-ai-actions small{color:#64748b;font-size:11px;font-weight:900}

.catalogo1-search{flex-wrap:wrap}

.catalogo1-search input:focus{outline:3px solid rgba(123,31,23,.16);border-color:#7b1f17!important}

/* Compactação dos nomes de produto: sempre uma linha com reticências */

.catalogo1-card h2,.catalogo1-suggestion-body strong,.catalogo1-last-order-list strong,.catalogo1-cart-product strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-card{min-width:0}

.catalogo1-card h2{font-size:15px;line-height:1.2;min-height:auto}

.catalogo1-suggestion-body,.catalogo1-cart-product>div{min-width:0}

.catalogo1-margin{display:none!important}

/* Carrinho: foto menos espremida e mais limpa */

.catalogo1-cart-product{grid-template-columns:1fr!important;gap:6px!important}

.catalogo1-cart-photo{display:none!important}

.catalogo1-cart-item{padding:9px}

.catalogo1-cart-item strong{font-size:12px;line-height:1.2}

.catalogo1-cart-item small{font-size:12px}

.catalogo1-cart-item>div:last-child{grid-template-columns:.72fr .72fr 1fr auto;gap:5px}

.catalogo1-cart-item input{padding:6px 7px}

.catalogo1-cart-item button{padding:7px 8px;font-size:11px}

/* Selos comerciais mais honestos */

.catalogo1-badges span:first-child{max-width:94px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(62,30,20,.12);border-color:#e4c8bd}

.catalogo1-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}

/* Carrinho: foto voltou, mas sem ficar espremida */

.catalogo1-cart-product{grid-template-columns:46px minmax(0,1fr)!important;gap:8px!important;align-items:center!important}

.catalogo1-cart-photo{display:grid!important;width:46px!important;height:46px!important;min-width:46px!important;border-radius:12px;background:#fff7ed;border:1px solid #f1e2d8;overflow:hidden;place-items:center!important}

.catalogo1-cart-photo img{width:100%!important;height:100%!important;object-fit:contain!important;padding:3px;box-sizing:border-box}

.catalogo1-cart-product>div:last-child{display:block!important;min-width:0!important}

.catalogo1-cart-product strong{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-cart-product small{display:block;margin-top:2px}

/* Catalogo-1 UX premium compacta — sem alterar regra de negócio */

.catalogo1-page{background:#F7F8FA!important;color:#1f2933!important}

.catalogo1-top.compact{padding:12px 18px!important;grid-template-columns:minmax(0,1fr) minmax(300px,440px)!important;gap:14px!important;background:linear-gradient(135deg,#7b1f17,#43110d)!important}

.catalogo1-brand-head{align-items:center!important;gap:14px!important}

.catalogo1-logo{width:132px!important;height:44px!important;border-radius:12px!important}

.catalogo1-top h1{font-size:23px!important;line-height:1.05!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:780px}

.catalogo1-top p{font-size:12px!important;margin-top:3px!important}

.catalogo1-client label{gap:4px!important}

.catalogo1-client input{padding:9px 10px!important}

.catalogo1-client button{padding:9px 12px!important}

.catalogo1-context-compact{padding:8px 18px!important;gap:8px!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid #EAEAEA!important}

.catalogo1-context-compact strong{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.catalogo1-context-compact span,.catalogo1-context-compact label{font-size:12px!important}

.catalogo1-context select{padding:7px 9px!important;border-radius:10px!important}

.catalogo1-ai-strip{margin:10px 18px!important;padding:12px 14px!important;border:1px solid #EAEAEA!important;border-radius:16px!important;background:linear-gradient(135deg,#fff,#fff7f3)!important;box-shadow:0 12px 30px rgba(17,24,39,.07)!important;grid-template-columns:minmax(0,1.35fr) 130px minmax(210px,.8fr) auto!important;gap:12px!important;align-items:center!important}

.catalogo1-ai-strip>div:first-child{display:grid;gap:2px}

.catalogo1-ai-strip span{font-size:11px!important;color:#7b1f17!important;font-weight:950}

.catalogo1-ai-strip strong{font-size:18px!important;letter-spacing:-.02em}

.catalogo1-ai-strip p{margin:0!important;font-size:12px!important;line-height:1.25!important;color:#64748b!important}

.catalogo1-ai-meter{height:9px!important;border-radius:999px;background:#f1e7e1!important;overflow:hidden}

.catalogo1-ai-meter i{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,#16a34a,#f59e0b,#7b1f17)}

.catalogo1-ai-strip button{height:42px!important;border-radius:12px!important;border:0!important;background:#7b1f17!important;color:#fff!important;font-weight:950!important;padding:0 16px!important;box-shadow:0 10px 22px rgba(123,31,23,.2)}

.catalogo1-client-panel{margin:0 18px 10px!important;padding:10px 12px!important;border:1px solid #EAEAEA!important;border-radius:16px!important;background:#fff!important;box-shadow:0 10px 24px rgba(17,24,39,.05)!important}

.catalogo1-client-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

.catalogo1-client-panel-head h2{font-size:17px!important;margin:1px 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:620px}

.catalogo1-client-panel-head p{margin:0!important;font-size:12px!important;color:#64748b}

.catalogo1-client-panel-head span{font-size:11px!important;color:#7b1f17;font-weight:950}

.catalogo1-client-panel-actions button,.catalogo1-credit-badge{padding:7px 10px!important;font-size:11px!important}

.catalogo1-client-compact{padding-top:7px!important;gap:10px!important;font-size:12px!important}

.catalogo1-client-kpis{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;margin-top:8px!important}

.catalogo1-client-kpis>div{padding:8px 10px!important;border-radius:14px!important;background:#F7F8FA!important;border:1px solid #EAEAEA!important}

.catalogo1-client-kpis span{font-size:10px!important;color:#64748b!important}

.catalogo1-client-kpis strong{font-size:13px!important}

.catalogo1-last-order{margin-top:8px!important;padding:10px!important;border-radius:14px!important;background:#fff!important;border:1px solid #EAEAEA!important}

.catalogo1-last-order h3{margin:0!important;font-size:14px!important}

.catalogo1-last-order p{display:none}

.catalogo1-last-order-list{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}

.catalogo1-last-order-list button{min-height:42px!important;padding:7px!important;border-radius:12px!important}

.catalogo1-opportunity-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin-top:10px!important}

.catalogo1-opportunity-grid>div{padding:10px!important;border:1px solid #EAEAEA!important;border-radius:16px!important;background:#fff!important;box-shadow:0 8px 20px rgba(17,24,39,.04)!important}

.catalogo1-opportunity-grid h3{margin:0 0 8px!important;font-size:14px!important}

.catalogo1-suggestion-card{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;gap:8px!important;padding:8px!important;border:0!important;border-radius:14px!important;background:#F7F8FA!important;box-shadow:none!important;margin-bottom:7px!important;align-items:center!important}

.catalogo1-suggestion-photo{width:44px!important;height:44px!important;border-radius:12px!important;background:#fff!important}

.catalogo1-suggestion-photo img{object-fit:contain!important;padding:3px!important}

.catalogo1-segment-score{width:44px!important;height:44px!important;border-radius:12px!important;display:grid!important;place-items:center!important;background:#fff3e8!important;color:#92400e!important;font-size:12px!important}

.catalogo1-suggestion-body{gap:4px!important;display:grid!important}

.catalogo1-suggestion-body strong{font-size:12px!important}

.catalogo1-suggestion-meta{display:flex!important;gap:6px!important;flex-wrap:wrap!important}

.catalogo1-suggestion-meta span{font-size:10px!important;color:#64748b!important;background:#fff!important;border-radius:999px!important;padding:2px 6px!important}

.catalogo1-suggestion-body p{display:none!important}

.catalogo1-suggestion-body button{justify-self:start!important;border:0!important;border-radius:10px!important;background:#7b1f17!important;color:#fff!important;font-size:11px!important;font-weight:950!important;padding:6px 9px!important}

.catalogo1-layout{grid-template-columns:minmax(0,1fr) 370px!important;gap:14px!important;padding:0 18px 18px!important}

.catalogo1-search{background:#fff!important;border:1px solid #EAEAEA!important;border-radius:16px!important;padding:9px!important;margin-bottom:10px!important;box-shadow:0 8px 22px rgba(17,24,39,.04)!important}

.catalogo1-grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))!important;gap:11px!important}

.catalogo1-card{border:1px solid #EAEAEA!important;border-radius:16px!important;background:#fff!important;padding:10px!important;box-shadow:0 8px 22px rgba(17,24,39,.05)!important}

.catalogo1-photo{aspect-ratio:1.28/1!important;border-radius:14px!important;background:#F7F8FA!important}

.catalogo1-photo img{object-fit:contain!important;padding:4px!important}

.catalogo1-card h2{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:34px!important;font-size:13px!important;line-height:1.25!important}

.catalogo1-badges{display:flex!important;gap:5px!important;align-items:center!important;margin-top:7px!important}

.catalogo1-badges span{font-size:10px!important;border-radius:999px!important;padding:4px 6px!important;background:#f8fafc!important;color:#475569!important;font-weight:950!important}

.catalogo1-badges .ok{background:#dcfce7!important;color:#166534!important}

.catalogo1-badges .warn{background:#fff7ed!important;color:#c2410c!important}

.catalogo1-card>strong{font-size:20px!important;color:#7b1f17!important;letter-spacing:-.03em!important;margin:6px 0!important}

.catalogo1-card-actions button{height:36px!important;padding:0!important;border-radius:11px!important}

.catalogo1-cart{top:10px!important;border:1px solid #EAEAEA!important;border-radius:16px!important;background:#fff!important;box-shadow:0 14px 32px rgba(17,24,39,.09)!important;padding:12px!important;max-height:calc(100vh - 20px)!important;overflow:auto!important}

.catalogo1-cart-head{position:sticky;top:-12px;z-index:6;background:#fff;padding:2px 0 8px;border-bottom:1px solid #EAEAEA}

.catalogo1-cart-head b{font-size:20px;color:#7b1f17}

.catalogo1-cart-actions-top{top:43px!important;padding:8px 0!important}

.catalogo1-cart-actions-top a,.catalogo1-cart-actions-top button{height:40px!important;display:grid!important;place-items:center!important;border-radius:12px!important}

.catalogo1-smart-note{border:0!important;background:#f8fafc!important}

.catalogo1-cart-item{border:1px solid #EAEAEA!important;border-radius:14px!important;background:#fff!important;box-shadow:0 6px 14px rgba(17,24,39,.04)!important}

.catalogo1-cart-photo{background:#F7F8FA!important;border-color:#EAEAEA!important}

@media(max-width:1200px){.catalogo1-opportunity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.catalogo1-ai-strip{grid-template-columns:1fr!important}.catalogo1-last-order-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

@media(max-width:900px){.catalogo1-top.compact,.catalogo1-layout{grid-template-columns:1fr!important}.catalogo1-opportunity-grid{grid-template-columns:1fr!important}}

/* Catalogo-1: alinhar conteúdo dos quadros sempre de cima para baixo */

.catalogo1-opportunity-grid{align-items:start!important}

.catalogo1-opportunity-grid>div{align-self:start!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-content:flex-start!important;min-height:0!important}

.catalogo1-opportunity-grid>div>*{flex:0 0 auto}

.catalogo1-client-lists{align-items:start!important}

.catalogo1-suggestion-card{align-self:stretch!important}

.catalogo1-last-order{align-self:start!important}

.catalogo1-layout{align-items:start!important}

.catalogo1-client-panel{align-self:start!important}

/* Busca operacional rápida */

.catalogo1-clear-search{border:0;border-radius:10px;background:#f1f5f9;color:#475569;font-weight:950;padding:8px 10px;cursor:pointer}

.catalogo1-quick-filters{display:flex;gap:6px;flex-wrap:wrap;width:100%;padding-top:2px}

.catalogo1-quick-filters button{border:1px solid #EAEAEA;background:#fff;color:#475569;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:950;cursor:pointer}

.catalogo1-quick-filters button:hover{border-color:#7b1f17;color:#7b1f17;background:#fff7f3}

/* Correção definitiva: foto visível no carrinho */

.catalogo1-cart .catalogo1-cart-product{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:9px!important;align-items:center!important}

.catalogo1-cart .catalogo1-cart-photo{display:block!important;width:54px!important;height:54px!important;min-width:54px!important;max-width:54px!important;border-radius:13px!important;background:#F7F8FA!important;border:1px solid #EAEAEA!important;overflow:hidden!important}

.catalogo1-cart .catalogo1-cart-photo img,.catalogo1-cart .catalogo1-cart-photo .product-image{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;padding:3px!important;box-sizing:border-box!important}

.catalogo1-cart .catalogo1-cart-photo .product-image-fallback{display:grid!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;box-sizing:border-box!important}

.catalogo1-cart .catalogo1-cart-photo .product-image-fallback span{font-size:18px!important}

.catalogo1-cart .catalogo1-cart-photo .product-image-fallback small{display:none!important}

.catalogo-back-cat-link { text-decoration: none; display: inline-grid; place-items: center; min-width: 48px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.32); font-weight: 950; letter-spacing: .06em; }

.catalogo-back-cat-link:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

.catalogo-hero-actions { gap: 8px; align-items: center; }

@media (max-width: 760px) { .catalogo-back-cat-link { width: 100%; } }

/* Equaliza a barra superior do /catalogo-1 com o vermelho do /catalogo */

.catalogo1-top,
.catalogo1-top.compact {
  background: linear-gradient(135deg, #7b1f17 0%, #4b120e 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(75, 18, 14, .25) !important;
}

.catalogo1-top p,
.catalogo1-top.compact p {
  color: #ffe4dc !important;
}

/* /catalogo-1: a barra fixa abaixo do topo também deve usar o mesmo vermelho do catálogo */

.catalogo1-context.catalogo1-context-compact {
  background: linear-gradient(135deg, #7b1f17 0%, #4b120e 100%) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 10px 28px rgba(75, 18, 14, .25) !important;
  backdrop-filter: none !important;
}

.catalogo1-context.catalogo1-context-compact strong,
.catalogo1-context.catalogo1-context-compact span,
.catalogo1-context.catalogo1-context-compact label {
  color: #fff !important;
}

.catalogo1-context.catalogo1-context-compact select {
  background: rgba(255,255,255,.96) !important;
  color: #251a17 !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* Botão de sair nas telas do catálogo */

.catalogo-logout-bar{position:fixed;right:14px;bottom:14px;z-index:90;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.96);border:1px solid #ead9cf;border-radius:999px;padding:7px 8px 7px 12px;box-shadow:0 12px 30px rgba(17,24,39,.16);color:#251a17;font-size:12px;font-weight:900}

.catalogo-logout-btn{border:0;border-radius:999px;background:#7b1f17;color:#fff;font-weight:950;padding:9px 12px;cursor:pointer;white-space:nowrap}

.catalogo-logout-btn:hover{background:#4b120e}

.catalogo-user-mini{color:#fff;font-size:12px;font-weight:900;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.95}

@media(max-width:760px){.catalogo-logout-bar{right:10px;bottom:10px}.catalogo-logout-bar span{display:none}.catalogo-user-mini{display:none}.catalogo-hero-actions .catalogo-logout-btn{width:100%}}

/* Política comercial do carrinho */

.catalogo1-price-policy-range{display:block;margin-top:3px;color:#888;font-size:10px;font-weight:700;line-height:1.2}

.catalogo1-price-policy-warn{display:block;margin-top:2px;color:#c0392b;font-size:10px;font-weight:900;line-height:1.2}

.catalogo1-cart-item label:has(.catalogo1-price-policy-range){min-width:150px}

/* Catálogo público */

.catalogo-publico-page .catalogo-hero{min-height:auto}

.catalogo-publico-page .catalogo-hero-inner{padding-bottom:28px}

.catalogo-publico-shell{align-items:start}

.catalogo-publico-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:14px 18px;border:1px solid #ead9cf;border-radius:18px;background:#fff}

.catalogo-publico-head strong{font-size:18px;color:#4b120e}

.catalogo-publico-head span{color:#806b62;font-weight:700}

.catalogo-publico-card{cursor:default;text-align:left}

.catalogo-publico-card:hover{transform:translateY(-2px)}

.catalogo-publico-card .catalogo-card-body{min-height:118px}

.catalogo-publico-card .catalogo-code{margin-top:auto}

.catalogo-publico-page .catalogo-sidebar small{line-height:1.35}

/* Preço promocional no catálogo operacional */

.catalogo1-promo-price{display:flex;flex-direction:column;gap:2px;margin-top:4px}

.catalogo1-promo-price span{width:max-content;padding:3px 7px;border-radius:999px;background:#ffedd5;color:#9a3412;font-size:10px;font-weight:900;text-transform:uppercase}

.catalogo1-promo-price del{color:#9ca3af;font-size:12px;font-weight:800}

.catalogo1-promo-price strong{color:#b91c1c;font-size:20px;font-weight:950}

/* Visão Comercial BI */

.visao-comercial-page{display:flex;flex-direction:column;gap:18px}

.visao-hero{background:linear-gradient(135deg,#062f2a 0%,#0f766e 48%,#22c55e 100%)}

.visao-tabs{display:flex;gap:8px;overflow:auto;padding:4px}

.visao-tabs button{border:1px solid var(--border-color,#dbe3ef);background:rgba(255,255,255,.82);color:var(--text-color,#0f172a);border-radius:999px;padding:9px 14px;font-weight:800;white-space:nowrap}

.visao-tabs button.active{background:#0f766e;color:#fff;border-color:#0f766e}

.visao-filters{display:grid;grid-template-columns:repeat(8,minmax(130px,1fr));gap:12px;align-items:end}

.visao-card-grid{grid-template-columns:repeat(5,minmax(160px,1fr))}

.visao-kpi{position:relative;overflow:hidden}

.visao-kpi::after{content:'';position:absolute;inset:auto 14px 10px 14px;height:4px;border-radius:999px;background:#94a3b8}

.visao-kpi.ok::after{background:#22c55e}

.visao-kpi.warn::after{background:#f59e0b}

.visao-kpi.bad::after{background:#ef4444}

.visao-main-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.7fr);gap:16px;align-items:start}

.visao-table-panel{min-width:0}

.radar-list{display:flex;flex-direction:column;gap:10px;max-height:620px;overflow:auto}

.radar-item{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0}

.radar-item span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#f59e0b;color:#fff;font-weight:950}

.radar-item.critical span{background:#ef4444}

.radar-item strong{display:block;font-size:13px;color:#0f172a}

.radar-item p{margin:2px 0 0;color:#64748b;font-size:12px;line-height:1.35}

.daily-chart{height:270px;display:flex;align-items:stretch;gap:8px;padding:10px 4px 0;overflow:auto}

.daily-bar{min-width:34px;display:grid;grid-template-rows:22px 1fr 32px;gap:6px;text-align:center;color:#64748b;font-size:11px;font-weight:800}

.daily-bar>div{position:relative;border-radius:14px;background:linear-gradient(180deg,#f8fafc,#e2e8f0);overflow:hidden;border:1px solid #e2e8f0}

.daily-bar i{position:absolute;left:6px;right:6px;bottom:0;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#22c55e,#0f766e)}

.daily-bar em{position:absolute;left:0;right:0;height:2px;background:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.2)}

.daily-bar small{font-size:9px;color:#475569;writing-mode:vertical-rl;justify-self:center;max-height:32px;overflow:hidden}

@media(max-width:1200px){.visao-filters{grid-template-columns:repeat(3,1fr)}.visao-card-grid{grid-template-columns:repeat(2,1fr)}.visao-main-grid{grid-template-columns:1fr}}

@media(max-width:700px){.visao-filters,.visao-card-grid{grid-template-columns:1fr}.daily-chart{height:220px}.daily-bar{min-width:28px}}

/* Ajuste Visão Comercial: cards reais e seções sem sobreposição */

.visao-comercial-page .visao-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
  gap:14px !important;
  align-items:stretch !important;
  width:100% !important;
}

.visao-comercial-page .visao-kpi{
  min-height:118px !important;
  border-radius:22px !important;
  padding:18px 18px 22px !important;
  background:var(--surface-color,#fff) !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 18px 45px rgba(15,23,42,.08) !important;
}

.visao-comercial-page .visao-kpi span{display:block;font-size:12px;font-weight:850;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}

.visao-comercial-page .visao-kpi strong{display:block;font-size:clamp(22px,2.2vw,32px);line-height:1.05;color:var(--text-color,#0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.visao-comercial-page .visao-kpi small{display:block;margin-top:8px;color:#64748b;font-weight:750}

.visao-comercial-page .visao-main-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:18px !important;
  align-items:start !important;
  position:relative !important;
  clear:both !important;
  width:100% !important;
}

.visao-comercial-page .visao-table-panel,
.visao-comercial-page .radar-panel,
.visao-comercial-page .daily-chart-panel{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.visao-comercial-page .table-wrap{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  display:block !important;
}

.visao-comercial-page table{min-width:1500px !important;border-collapse:separate !important;border-spacing:0 !important}

.visao-comercial-page .radar-panel{grid-column:auto !important;max-height:none !important}

.visao-comercial-page .daily-chart-panel{margin-top:18px !important;clear:both !important;width:100% !important}

.visao-comercial-page .daily-chart{height:300px !important;min-height:300px !important;overflow-x:auto !important;overflow-y:hidden !important}

.visao-comercial-page .panel-shell{box-sizing:border-box !important}

@media(max-width:1280px){
  .visao-comercial-page .visao-main-grid{grid-template-columns:1fr !important}
  .visao-comercial-page .radar-panel{grid-column:1 !important}
}

@media(max-width:760px){
  .visao-comercial-page .visao-card-grid{grid-template-columns:1fr !important}
  .visao-comercial-page .daily-chart{height:230px !important;min-height:230px !important}
}

/* Visão Comercial - layout solicitado: cards no topo, 6 por linha, tabela full e radar abaixo */

.visao-compact-page{gap:12px !important;padding-top:0 !important}

.visao-compact-page .visao-hero{display:none !important}

.visao-compact-page .visao-card-grid-top{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:0 !important;
  order:0 !important;
}

.visao-compact-page .visao-kpi{
  min-height:104px !important;
  padding:14px 14px 20px !important;
  border-radius:18px !important;
}

.visao-compact-page .visao-kpi span{font-size:10.5px !important;margin-bottom:6px !important}

.visao-compact-page .visao-kpi strong{font-size:clamp(17px,1.45vw,24px) !important;letter-spacing:-.04em !important}

.visao-compact-page .visao-kpi small{font-size:11px !important;margin-top:6px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.visao-compact-page .visao-filters-compact{grid-template-columns:repeat(8,minmax(110px,1fr)) !important;padding:12px !important;gap:10px !important}

.visao-compact-page .visao-tabs-compact{padding:0 !important;margin:0 !important}

.visao-content-stack{display:flex !important;flex-direction:column !important;gap:14px !important;width:100% !important;min-width:0 !important}

.visao-table-full{width:100% !important;min-height:calc(100vh - 390px) !important;display:flex !important;flex-direction:column !important}

.visao-table-full .table-wrap{flex:1 !important;min-height:420px !important;overflow:auto !important}

.visao-table-full table{min-width:1500px !important;width:100% !important}

.radar-panel-bottom{width:100% !important;max-height:none !important;overflow:visible !important}

.radar-panel-bottom .radar-list-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:10px !important;max-height:none !important;overflow:visible !important}

.radar-panel-bottom .radar-item{min-height:82px !important}

@media(max-width:1500px){.visao-compact-page .visao-card-grid-top{grid-template-columns:repeat(3,minmax(0,1fr)) !important}.radar-panel-bottom .radar-list-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

@media(max-width:900px){.visao-compact-page .visao-card-grid-top{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.visao-compact-page .visao-filters-compact{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.radar-panel-bottom .radar-list-grid{grid-template-columns:1fr !important}.visao-table-full{min-height:auto !important}}

@media(max-width:560px){.visao-compact-page .visao-card-grid-top,.visao-compact-page .visao-filters-compact{grid-template-columns:1fr !important}}

/* Catalogo-1: equaliza altura/alinhamento dos cards de produto */

.catalogo1-grid{
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
}

.catalogo1-grid .catalogo1-card{
  height:100% !important;
  min-height:294px !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}

.catalogo1-grid .catalogo1-photo{
  height:132px !important;
  aspect-ratio:auto !important;
  flex:0 0 132px !important;
}

.catalogo1-grid .catalogo1-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

.catalogo1-grid .catalogo1-badges{
  min-height:24px !important;
  flex:0 0 auto !important;
  overflow:hidden !important;
}

.catalogo1-grid .catalogo1-card h2{
  min-height:34px !important;
  max-height:34px !important;
  margin:8px 0 4px !important;
  overflow:hidden !important;
}

.catalogo1-grid .catalogo1-card small{
  min-height:15px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.catalogo1-grid .catalogo1-card > strong,
.catalogo1-grid .catalogo1-promo-price{
  min-height:32px !important;
  display:flex !important;
  align-items:center !important;
  margin:6px 0 !important;
}

.catalogo1-grid .catalogo1-card-actions{
  margin-top:auto !important;
}

@media(max-width:760px){
  .catalogo1-grid .catalogo1-card{min-height:282px !important}
  .catalogo1-grid .catalogo1-photo{height:120px !important;flex-basis:120px !important}
}

/* Catalogo-1: preço compacto e sempre alinhado no card */

.catalogo1-grid .catalogo1-card > strong{
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  display:flex !important;
  align-items:center !important;
  margin:6px 0 8px !important;
  font-size:20px !important;
  line-height:1 !important;
}

.catalogo1-grid .catalogo1-promo-price{
  height:36px !important;
  min-height:36px !important;
  max-height:36px !important;
  margin:6px 0 8px !important;
  display:grid !important;
  grid-template-columns:auto 1fr !important;
  grid-template-rows:14px 20px !important;
  column-gap:6px !important;
  row-gap:1px !important;
  align-items:center !important;
  overflow:hidden !important;
}

.catalogo1-grid .catalogo1-promo-price span{
  grid-column:1 / 2 !important;
  grid-row:1 / 2 !important;
  max-width:62px !important;
  padding:2px 5px !important;
  font-size:8.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.catalogo1-grid .catalogo1-promo-price del{
  grid-column:2 / 3 !important;
  grid-row:1 / 2 !important;
  font-size:10px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.catalogo1-grid .catalogo1-promo-price strong{
  grid-column:1 / 3 !important;
  grid-row:2 / 3 !important;
  margin:0 !important;
  font-size:20px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Design System cycle 2026-07-21: corporate blue hero cleanup for Compras routes */

.compras-page .compras-hero,
.leadtime-page .leadtime-hero {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, .18), transparent 36%),
    linear-gradient(135deg, #0f172a 0%, #1e40af 62%, #2563eb 100%);
}

/* Design System cycle 2026-07-29: catalogo operacional blue token cleanup */

.catalogo1-top,
.catalogo1-top.compact,
.catalogo1-context.catalogo1-context-compact {
  background: linear-gradient(135deg, #0f172a 0%, #1e40af 58%, #2563eb 100%) !important;
  box-shadow: 0 14px 34px rgba(30, 64, 175, .22) !important;
}

.catalogo1-top p,
.catalogo1-top.compact p,
.catalogo1-context.catalogo1-context-compact strong,
.catalogo1-context.catalogo1-context-compact span,
.catalogo1-context.catalogo1-context-compact label {
  color: rgba(255, 255, 255, .9) !important;
}

.catalogo1-context.catalogo1-context-compact select {
  color: #0f172a !important;
  border-color: rgba(226, 232, 240, .95) !important;
}

.catalogo1-cart-head h2,
.catalogo1-client button,
.catalogo1-card-actions button:first-child,
.catalogo1-ai-strip button,
.catalogo1-suggestion-body button,
.catalogo1-segment-head button,
.catalogo1-client-panel-actions button:hover,
.catalogo1-clear-search:hover,
.catalogo-logout-btn {
  background: #1e40af !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
  box-shadow: 0 10px 24px rgba(30, 64, 175, .18) !important;
}

.catalogo1-cat-link:hover,
.catalogo1-client-panel-head span,
.catalogo1-ai-strip span,
.catalogo1-smart-note strong,
.catalogo1-card > strong,
.catalogo1-cart-head b,
.catalogo1-client-panel-actions button,
.catalogo1-quick-filters button:hover,
.catalogo-publico-head strong,
.catalogo-mode-toggle button,
.catalogo-selection-total b,
.catalogo-segment-note,
.catalogo-segment-actions select {
  color: #1e40af !important;
}

.catalogo-mode-toggle button.active,
.catalogo-selection-chip-actions button:first-child {
  background: #1e40af !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(30, 64, 175, .18) !important;
}

.catalogo-mode-toggle button,
.catalogo-selection-chip,
.catalogo-selection-total,
.catalogo-segment-panel,
.catalogo-segment-grid button,
.catalogo-segment-actions label,
.catalogo-logout-bar,
.catalogo-publico-head {
  border-color: #e2e8f0 !important;
}

.catalogo-selection-total,
.catalogo-segment-panel,
.catalogo1-ai-strip,
.catalogo1-photo,
.catalogo1-cart-photo,
.catalogo1-segment-score {
  background: #f8fafc !important;
}

.catalogo-segment-grid button.active {
  border-color: #1e40af !important;
  background: #eff6ff !important;
  box-shadow: inset 0 0 0 1px #1e40af !important;
}

.catalogo1-search input:focus {
  outline-color: rgba(37, 99, 235, .18) !important;
  border-color: #2563eb !important;
}

/* Design System cycle 2026-07-29: Catalogo-1 corporate blue cleanup */

.catalogo1-top,
.catalogo1-top.compact,
.catalogo1-context.catalogo1-context-compact {
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(30, 64, 175, .20) !important;
}

.catalogo1-top p,
.catalogo1-top.compact p,
.catalogo1-brand-head p,
.catalogo1-context.catalogo1-context-compact strong,
.catalogo1-context.catalogo1-context-compact span,
.catalogo1-context.catalogo1-context-compact label {
  color: #DBEAFE !important;
}

.catalogo1-ai-strip {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%) !important;
  border-color: #E2E8F0 !important;
}

.catalogo1-ai-strip span,
.catalogo1-client-panel-head span,
.catalogo1-smart-note strong,
.catalogo1-card > strong,
.catalogo1-cart-head b,
.catalogo1-grid .catalogo1-card > strong,
.catalogo1-grid .catalogo1-promo-price strong {
  color: #1E40AF !important;
}

.catalogo1-client button,
.catalogo1-ai-strip button,
.catalogo1-suggestion-body button,
.catalogo1-quick-filters button:hover,
.catalogo-logout-btn {
  background: #1E40AF !important;
  border-color: #1E40AF !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(30, 64, 175, .18) !important;
}

.catalogo1-search input:focus,
.catalogo1-client-lists button:hover {
  border-color: #2563EB !important;
  outline-color: rgba(37, 99, 235, .16) !important;
  background: #EFF6FF !important;
}

.catalogo1-card:hover {
  border-color: #BFDBFE !important;
  box-shadow: 0 16px 34px rgba(30, 64, 175, .12) !important;
}

.catalogo-back-cat-link,
.catalogo1-clear-search,
.catalogo1-quick-filters button {
  border-color: #E2E8F0 !important;
  color: #1E40AF !important;
}

/* Design System cycle 2026-07-30: neutraliza resíduos quentes do Catálogo operacional sem alterar fluxo */

.catalogo1-top,
.catalogo1-top.compact,
.catalogo1-context.catalogo1-context-compact {
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%) !important;
  box-shadow: 0 14px 32px rgba(30, 64, 175, .22) !important;
}

.catalogo1-top p,
.catalogo1-top.compact p {
  color: #DBEAFE !important;
}

.catalogo1-ai-strip {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%) !important;
  border-color: #DBEAFE !important;
}

.catalogo1-ai-strip span,
.catalogo1-client-panel-head span,
.catalogo1-card > strong,
.catalogo1-cart-head b,
.catalogo1-quick-filters button:hover {
  color: #1E40AF !important;
}

.catalogo1-ai-meter {
  background: #DBEAFE !important;
}

.catalogo1-ai-meter i {
  background: linear-gradient(90deg, #10B981, #2563EB) !important;
}

.catalogo1-ai-strip button,
.catalogo1-suggestion-body button,
.catalogo1-logout-btn,
.catalogo1-client button,
.catalogo1-card-actions button,
.catalogo1-finish,
.catalogo1-whatsapp:not(.disabled) {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
}

.catalogo1-logout-btn:hover {
  background: #1E3A8A !important;
}

.catalogo1-quick-filters button:hover {
  border-color: #2563EB !important;
  background: #EFF6FF !important;
}

.catalogo1-cart-photo,
.catalogo1-photo,
.catalogo1-client-kpis > div,
.catalogo1-smart-note {
  background: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

.catalogo1-segment-score,
.catalogo1-promo-price span {
  background: #EFF6FF !important;
  color: #1E40AF !important;
}

.catalogo1-promo-price strong {
  color: #1E40AF !important;
}

/* Design System cycle 2026-07-30 03:04 UTC: alinha Catálogo público aos tokens SaaS Enterprise */

.catalogo-page {
  background: #F8FAFC !important;
  color: #0F172A !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .08) !important;
}

.catalogo-page .catalogo-hero,
.catalogo-page .catalogo-model-rule {
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 100%) !important;
  border-color: rgba(37, 99, 235, .36) !important;
  box-shadow: 0 14px 32px rgba(30, 64, 175, .22) !important;
}

.catalogo-page .catalogo-chips button.active,
.catalogo-page .catalogo-category,
.catalogo-page .catalogo-card-body > strong,
.catalogo-page .catalogo-modal-prices strong,
.catalogo-page .catalogo-price,
.catalogo-page .catalogo-price-edit input,
.catalogo-page .catalogo-model-table small,
.catalogo-page .catalogo-model-editor-title strong {
  color: #1E40AF !important;
}

.catalogo-page .catalogo-card,
.catalogo-page .catalogo-selection-bar,
.catalogo-page .catalogo-modal,
.catalogo-page .catalogo-detail-grid div,
.catalogo-page .catalogo-model-table > div,
.catalogo-page .catalogo-share-editor,
.catalogo-page .catalogo-share-editor label,
.catalogo-page .product-thumb {
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06) !important;
}

.catalogo-page .catalogo-photo,
.catalogo-page .catalogo-modal-photo,
.catalogo-page .product-image,
.catalogo-page .product-image-fallback,
.catalogo-page .catalogo-detail-grid div,
.catalogo-page .catalogo-price-stack span,
.catalogo-page .catalogo-modal-prices p,
.catalogo-page .catalogo-share-editor,
.catalogo-page .catalogo-model-table > div {
  background: #F8FAFC !important;
}

.catalogo-page .catalogo-photo-placeholder,
.catalogo-page .product-image-fallback {
  background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 100%) !important;
  color: #1E40AF !important;
}

.catalogo-page .catalogo-category,
.catalogo-page .catalogo-price-stack span,
.catalogo-page .catalogo-model-editor-title span {
  background: #EFF6FF !important;
  border-color: #DBEAFE !important;
}

.catalogo-page .catalogo-search button,
.catalogo-page .catalogo-share-image {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
}

.catalogo-page .catalogo-share-editor label.active,
.catalogo-page .catalogo-price-edit input:focus {
  border-color: #2563EB !important;
  color: #1E40AF !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important;
}

.catalogo-page .catalogo-meta,
.catalogo-page .catalogo-code,
.catalogo-page .catalogo-selection-bar span,
.catalogo-page .catalogo-modal-prices span,
.catalogo-page .catalogo-detail-grid small,
.catalogo-page .catalogo-price-stack b,
.catalogo-page .product-image-fallback small,
.catalogo-page .catalogo-modal-photo small,
.catalogo-page .catalogo-negotiation-note,
.catalogo-page .catalogo-footer {
  color: #64748B !important;
}

/* Design System cycle 2026-07-31 12:04 UTC: refinamento mobile do Catálogo público */

.catalogo-page .catalogo-modal-backdrop {
  background: rgba(15, 23, 42, .52) !important;
  backdrop-filter: blur(10px);
}

.catalogo-page .catalogo-modal {
  max-height: min(92vh, 820px);
  overflow: auto;
  overscroll-behavior: contain;
}

.catalogo-page .catalogo-modal-info,
.catalogo-page .catalogo-client-info {
  min-width: 0;
}

.catalogo-page .catalogo-modal-info h2,
.catalogo-page .catalogo-card h2,
.catalogo-page .catalogo-card-body strong,
.catalogo-page .catalogo-detail-grid strong,
.catalogo-page .catalogo-selection-bar strong {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .catalogo-page .catalogo-modal-backdrop {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    align-items: start;
  }

  .catalogo-page .catalogo-modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 18px !important;
    grid-template-columns: 1fr !important;
  }

  .catalogo-page .catalogo-modal-info {
    padding: 22px 18px 20px !important;
    gap: 14px;
  }

  .catalogo-page .catalogo-modal-prices,
  .catalogo-page .catalogo-share-editor {
    grid-template-columns: 1fr !important;
  }

  .catalogo-page .catalogo-modal-prices strong,
  .catalogo-page .catalogo-price {
    font-size: clamp(24px, 9vw, 30px) !important;
  }

  .catalogo-page .catalogo-selection-bar {
    align-items: stretch;
  }
}

/* Design System cycle 2026-07-31 18:04 UTC: neutralização fina de resíduos quentes no Catálogo operacional */

.catalogo1-page .catalogo1-ai-strip {
  background: linear-gradient(135deg, #FFFFFF, #EFF6FF) !important;
  border-color: #BFDBFE !important;
}

.catalogo1-page .catalogo1-ai-strip span,
.catalogo1-page .catalogo1-client-panel-head span {
  color: #1E40AF !important;
}

.catalogo1-page .catalogo1-ai-meter {
  background: #DBEAFE !important;
}

.catalogo1-page .catalogo1-ai-meter i {
  background: linear-gradient(90deg, #10B981, #0EA5E9, #1E40AF) !important;
}

.catalogo1-page .catalogo1-ai-strip button,
.catalogo1-page .catalogo1-suggestion-body button {
  background: linear-gradient(135deg, #1E40AF, #2563EB) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18) !important;
}

.catalogo1-page .catalogo1-segment-score {
  background: #EFF6FF !important;
  color: #1E40AF !important;
}

.catalogo1-page .catalogo1-card > strong,
.catalogo1-page .catalogo1-cart-head b {
  color: #1E40AF !important;
}

.catalogo1-page .catalogo1-badges .warn {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

/* Design System cycle 2026-07-31 21:04 UTC — neutralize legacy public catalog warm surfaces */

.catalogo-page .catalogo-hero,
.catalogo-page .catalogo-model-rule {
  background: linear-gradient(135deg, #0F172A 0%, #1E40AF 58%, #2563EB 100%) !important;
  border-color: rgba(191, 219, 254, .42) !important;
  box-shadow: 0 18px 42px rgba(30, 64, 175, .22) !important;
}

.catalogo-page .catalogo-hero p,
.catalogo-page .catalogo-model-rule small {
  color: #DBEAFE !important;
}

.catalogo-page .catalogo-photo-placeholder,
.catalogo-page .product-image-fallback,
.catalogo-page .catalogo-offer-preview {
  background: radial-gradient(circle at 30% 20%, #FFFFFF 0%, #EFF6FF 54%, #DBEAFE 100%) !important;
  color: #1E40AF !important;
}

.catalogo-page .catalogo-modal-prices p {
  border-color: #BFDBFE !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6FF 100%) !important;
}

/* Enterprise DS polish: neutralize warm catalog selection bar residues */

.catalogo-selection-bar {
  background: #FFFFFF !important;
  border: 1px solid #DBEAFE !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

.catalogo-selection-total,
.catalogo-selection-total b {
  color: #1E40AF !important;
}

.catalogo-selection-bar .catalogo-selection-actions button,
.catalogo-selection-bar .catalogo-selection-actions a {
  border-color: #BFDBFE !important;
}

.catalogo-selection-bar .catalogo-selection-actions button:hover,
.catalogo-selection-bar .catalogo-selection-actions a:hover {
  background: #EFF6FF !important;
  border-color: #2563EB !important;
  color: #1E40AF !important;
}

/* Design System cycle 2026-08-02 12:04 UTC — refine public catalog operational warm residues */

.catalogo1-ai-strip {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%) !important;
  border-color: #DBEAFE !important;
  box-shadow: 0 12px 30px rgba(30, 64, 175, .08) !important;
}

.catalogo1-ai-strip span,
.catalogo1-client-panel-head span,
.catalogo1-page .catalogo1-cart-head b,
.catalogo1-page .catalogo1-card > strong {
  color: #1E40AF !important;
}

.catalogo1-ai-meter {
  background: #DBEAFE !important;
}

.catalogo1-ai-strip button,
.catalogo1-suggestion-body button {
  background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 22px rgba(30, 64, 175, .18) !important;
}

.catalogo1-segment-score,
.catalogo1-badges span,
.catalogo1-page .catalogo1-badges .warn,
.catalogo1-suggestion-card.promo .catalogo1-suggestion-meta span:first-child,
.catalogo1-promo-price span,
.catalogo1-cart-photo {
  background: #EFF6FF !important;
  border-color: #BFDBFE !important;
  color: #1E40AF !important;
}

.dashboard-source-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.dashboard-source-pill,
.dashboard-source-detail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
}

.dashboard-source-pill.is-fiscal {
  color: #047857;
  border-color: rgba(16, 185, 129, .28);
  background: rgba(16, 185, 129, .1);
}

.dashboard-source-pill.is-fallback {
  color: #92400e;
  border-color: rgba(245, 158, 11, .3);
  background: rgba(245, 158, 11, .12);
}

.dashboard-source-detail {
  color: var(--text-secondary);
  background: var(--bg-surface);
}

.dashboard-source-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px currentColor;
  opacity: .22;
}
/* ═══════════════════════════════════════════════════════════════════
   NACIONAL VISION — Design System Tokens & Unified Corporate DS
   ═══════════════════════════════════════════════════════════════════
   Padrão Corporativo:
   - Fonte Inter
   - Background geral: #F6F8FA
   - Superfícies: #FFFFFF
   - Texto principal: #111827
   - Texto secundário: #64748B
   - Bordas: #E5E7EB
   - Primary: #2563EB
   - Success: #16A34A
   - Warning: #D97706
   - Danger: #DC2626
   - Radius padrão: 10px
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --ds-bg: #F6F8FA;
  --ds-surface: #FFFFFF;
  --ds-surface-subtle: #F8FAFC;
  --ds-surface-muted: #F1F5F9;
  
  --ds-text-1: #111827;
  --ds-text-2: #334155;
  --ds-text-3: #64748B;
  --ds-text-inverse: #FFFFFF;
  
  --ds-border: #E5E7EB;
  --ds-border-strong: #CBD5E1;
  --ds-border-subtle: #F1F5F9;
  
  --ds-primary: #2563EB;
  --ds-primary-hover: #1D4ED8;
  --ds-primary-active: #1E40AF;
  --ds-primary-soft: #EFF6FF;
  --ds-primary-border: #BFDBFE;
  
  --ds-success: #16A34A;
  --ds-success-soft: #F0FDF4;
  --ds-success-border: #BBF7D0;
  
  --ds-warning: #D97706;
  --ds-warning-soft: #FFFBEB;
  --ds-warning-border: #FDE68A;
  
  --ds-danger: #DC2626;
  --ds-danger-soft: #FEF2F2;
  --ds-danger-border: #FECACA;
  
  --ds-radius-sm: 6px;
  --ds-radius: 10px;
  --ds-radius-lg: 12px;
  
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ds-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
  
  --ds-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Aliases para compatibilidade */
  --nv-bg: var(--ds-bg);
  --nv-surface: var(--ds-surface);
  --nv-border: var(--ds-border);
  --nv-primary: var(--ds-primary);
  --nv-text: var(--ds-text-1);
  --nv-text-muted: var(--ds-text-3);
  --nv-radius: var(--ds-radius);
  --primary-color: var(--ds-primary);
}

/* ─── BASE RESET & LAYOUT ─── */
body, #root, .enterprise-shell, .screen-block, .page-container, .page-inner {
  background-color: var(--ds-bg) !important;
  color: var(--ds-text-1) !important;
  font-family: var(--ds-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* ─── TOPBAR & BRAND ─── */
.top-header, .app-header {
  background: var(--ds-surface) !important;
  border-bottom: 1px solid var(--ds-border) !important;
}

/* ─── CARDS E PAINÉIS ─── */
.panel-shell, .nv-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}

/* ─── BOTÕES GLOBAIS ─── */
.primary-btn, button.primary-btn, a.primary-btn {
  background: var(--ds-primary) !important;
  border: 1px solid var(--ds-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: var(--ds-radius-sm) !important;
  transition: all var(--ds-transition) !important;
}

.primary-btn:hover:not(:disabled) {
  background: var(--ds-primary-hover) !important;
  border-color: var(--ds-primary-hover) !important;
}

.outline-btn, button.outline-btn, a.outline-btn {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-strong) !important;
  color: var(--ds-text-2) !important;
  font-weight: 500 !important;
  border-radius: var(--ds-radius-sm) !important;
  transition: all var(--ds-transition) !important;
}

.outline-btn:hover:not(:disabled) {
  background: var(--ds-surface-subtle) !important;
  border-color: #94A3B8 !important;
  color: var(--ds-text-1) !important;
}

/* ════════════════════════════════════════════════════════════════
   FILTERBAR CORPORATIVO (Estrutura Definitiva)
   ════════════════════════════════════════════════════════════════ */

.nv-filter-bar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  padding: 16px 20px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: static !important;
  margin-bottom: 16px !important;
}

/* Cabeçalho do FilterBar */
.nv-filter-bar-head {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: 100% !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ds-border-subtle) !important;
}

.nv-filter-bar-title-block,
.nv-filter-bar-head > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.nv-filter-bar-head strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ds-text-1) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.nv-filter-bar-head span,
.nv-filter-bar-subtitle {
  font-size: 12px !important;
  color: var(--ds-text-3) !important;
  line-height: 1.3 !important;
}

/* Bloco de Ações e Status no Cabeçalho */
.nv-filter-bar-actions-block,
.nv-filter-header-actions,
.bi-filter-command-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.bi-health-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: var(--ds-radius-sm) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border: 1px solid var(--ds-success-border) !important;
  background: var(--ds-success-soft) !important;
  color: #166534 !important;
}

.bi-health-chip.warning {
  background: var(--ds-warning-soft) !important;
  border-color: var(--ds-warning-border) !important;
  color: #92400E !important;
}

.bi-health-chip.critical {
  background: var(--ds-danger-soft) !important;
  border-color: var(--ds-danger-border) !important;
  color: #991B1B !important;
}

.bi-health-chip strong {
  font-weight: 600 !important;
  font-size: 11px !important;
  color: inherit !important;
}

.bi-health-chip small {
  font-size: 11px !important;
  opacity: 0.85 !important;
  color: inherit !important;
}

.bi-filter-command-actions .outline-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--ds-radius-sm) !important;
  white-space: nowrap !important;
}

.bi-filter-command-actions .primary-btn {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--ds-radius-sm) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.nv-active-filters {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.nv-active-filters span {
  font-size: 11px !important;
  font-weight: 500 !important;
  background: var(--ds-primary-soft) !important;
  color: var(--ds-primary) !important;
  border: 1px solid var(--ds-primary-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
}

/* ─── Linha / Grid dos Campos de Filtro ─── */
.nv-filter-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px !important;
  width: 100% !important;
}

.nv-filter-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 1 140px !important;
  min-width: 120px !important;
  max-width: 240px !important;
}

.nv-filter-field > span:first-child {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-3) !important;
  line-height: 1.2 !important;
}

.nv-filter-control-shell {
  display: block !important;
  width: 100% !important;
}

.nv-filter-field input,
.nv-filter-field select,
.nv-filter-control-shell input,
.nv-filter-control-shell select {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ds-border-strong) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-1) !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition) !important;
}

.nv-filter-field input:focus,
.nv-filter-field select:focus,
.nv-filter-control-shell input:focus,
.nv-filter-control-shell select:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Botões Limpar e Aplicar na linha de filtros */
.nv-filter-grid > button,
.nv-filter-grid > .outline-btn,
.nv-filter-grid > .primary-btn {
  height: 38px !important;
  min-height: 38px !important;
  align-self: flex-end !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* ════════════════════════════════════════════════════════════════
   BI NACIONAL — NAVEGAÇÃO TEMÁTICA (Tabs)
   ════════════════════════════════════════════════════════════════ */

.bi-nacional-page .bi-section-nav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 16px 0 !important;
}

.bi-nacional-page .bi-section-nav a {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text-3) !important;
  text-decoration: none !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: all var(--ds-transition) !important;
}

.bi-nacional-page .bi-section-nav a:hover {
  border-color: var(--ds-border-strong) !important;
  background: var(--ds-surface-subtle) !important;
}

.bi-nacional-page .bi-section-nav a.active {
  border-color: #93C5FD !important;
  background: var(--ds-primary-soft) !important;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.08) !important;
}

.bi-nacional-page .bi-section-nav strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ds-text-1) !important;
}

.bi-nacional-page .bi-section-nav a.active strong {
  color: var(--ds-primary) !important;
}

.bi-nacional-page .bi-section-nav span {
  font-size: 11px !important;
  color: var(--ds-text-3) !important;
}

.bi-nacional-page .bi-section-nav a.active span {
  color: var(--ds-primary) !important;
}

/* ════════════════════════════════════════════════════════════════
   KPI CARDS CORPORATIVOS (Faturado, Meta, etc.)
   ════════════════════════════════════════════════════════════════ */

.bi-executive-grid, .bi-comparison-grid, .metric-grid, .visao-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.bi-executive-card, .bi-comparison-card, .metric-card, .bi-kpi-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  padding: 14px 16px !important;
  box-shadow: var(--ds-shadow-xs) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.bi-executive-card strong, .bi-comparison-card strong, .metric-card strong, .bi-kpi-card strong {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ds-text-1) !important;
  letter-spacing: -0.02em !important;
}

.bi-executive-card span, .bi-comparison-card span, .metric-card span, .bi-kpi-card span {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ds-text-3) !important;
}

.bi-executive-card small, .bi-comparison-card small, .metric-card small, .bi-kpi-card small {
  font-size: 11px !important;
  color: var(--ds-text-3) !important;
}

/* Accent borders */
.bi-executive-card.success, .metric-card.success, .bi-kpi-card.success {
  border-left: 3px solid var(--ds-success) !important;
}
.bi-executive-card.warning, .metric-card.warning, .bi-kpi-card.warning {
  border-left: 3px solid var(--ds-warning) !important;
}
.bi-executive-card.danger, .metric-card.danger, .bi-kpi-card.danger {
  border-left: 3px solid var(--ds-danger) !important;
}
.bi-executive-card.blue, .metric-card.blue, .bi-kpi-card.blue {
  border-left: 3px solid var(--ds-primary) !important;
}

/* Badges */
.bi-executive-badge.success {
  background: var(--ds-success-soft) !important;
  color: var(--ds-success) !important;
  border: 1px solid var(--ds-success-border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.bi-executive-badge.warning {
  background: var(--ds-warning-soft) !important;
  color: var(--ds-warning) !important;
  border: 1px solid var(--ds-warning-border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}


/* ─── OVERRIDE DE ALTA ESPECIFICIDADE: Primary Button sempre Azul #2563EB ─── */
.light-shell .primary-btn,
.enterprise-shell .primary-btn,
.bi-nacional-page .primary-btn,
.visao-comercial-page .primary-btn,
.screen-block .primary-btn,
.panel-shell .primary-btn,
.filter-area .primary-btn,
.nv-filter-bar .primary-btn,
.nv-filter-grid .primary-btn,
.bi-command-actions .primary-btn,
.bi-filter-command-actions .primary-btn {
  background: #2563EB !important;
  border: 1px solid #2563EB !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2) !important;
}

.light-shell .primary-btn:hover,
.enterprise-shell .primary-btn:hover,
.bi-nacional-page .primary-btn:hover,
.visao-comercial-page .primary-btn:hover,
.screen-block .primary-btn:hover,
.nv-filter-bar .primary-btn:hover,
.nv-filter-grid .primary-btn:hover,
.bi-filter-command-actions .primary-btn:hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/* Evitar truncamento dos valores de KPI com reticências */
.bi-executive-card strong,
.bi-comparison-card strong,
.bi-kpi-card strong,
.metric-card strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Alinhamento perfeito do header do FilterBar */
.nv-filter-bar-actions-block {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
:root {
  color: var(--text-primary);
  background: #f8fafc;
}
* { box-sizing: border-box; }
html { background: #f8fafc; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f8fafc;
  color: #0f172a;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(148,163,184,0.05), transparent 24%);
  opacity: .7;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
#root { min-height: 100vh; height: auto; overflow: visible; }
a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(37, 99, 235, 0.24);
  color: #fff;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 30%),
    linear-gradient(180deg, #0f172a, #020617);
}
.login-card {
  width: min(480px, 100%);
  background: rgba(18, 25, 43, 0.92);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.section-kicker { margin: 0 0 8px; color: var(--info); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: 28px; margin-bottom: 10px; letter-spacing: -.03em; }
h2 { font-size: 20px; margin-bottom: 10px; letter-spacing: -.02em; }
.section-subtitle, .panel-subtitle, .plain-text { color: var(--text-secondary); line-height: 1.7; }
.credential-box {
  display: grid;
  gap: 6px;
  margin: 20px 0 0;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(31, 46, 74, 0.76);
  border-radius: var(--radius-md);
}
.form-grid { display: grid; gap: 16px; margin-top: 24px; }
.form-grid label { display: grid; gap: 8px; color: var(--text-secondary); font-size: 14px; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(13, 19, 33, 0.84);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(96, 165, 250, 0.45);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12);
  background: rgba(18, 26, 45, 0.96);
}
.input-like {
  width: 100%;
  border: 1px solid var(--border);
  background: rgba(13, 19, 33, 0.84);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 13px 14px;
}
.input-like.disabled { background: rgba(31, 46, 74, 0.55); color: var(--text-secondary); }
.primary-btn, .outline-btn, .icon-btn, .tab { border-radius: 14px; border: 1px solid transparent; transition: all .18s ease; }
.primary-btn {
  background: linear-gradient(135deg, #1E40AF, #2563EB 55%, #0EA5E9);
  color: #fff;
  padding: 13px 18px;
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.24);
  font-weight: 700;
}
.primary-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 34px rgba(37, 99, 235, 0.30); }
.outline-btn {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  border-color: var(--border);
  padding: 12px 18px;
}
.outline-btn:hover { background: rgba(255,255,255,0.06); border-color: var(--border-strong); }
.danger-btn { color: #ffd7dd; border-color: rgba(234, 102, 125, 0.28); background: rgba(234, 102, 125, 0.08); }
.icon-btn {
  background: rgba(255,255,255,0.03);
  border-color: var(--border);
  width: 42px;
  height: 42px;
  color: var(--text-secondary);
}
.error-text { margin: 0; color: #ff8b9c; }
.success-text { margin-top: 16px; color: #7ce8b7; }
.empty-state-cell { text-align: center; color: var(--text-secondary); padding: 28px 14px; }

.light-shell { min-height: 100vh; background: transparent; }
.enterprise-shell {
  --sidebar-width: 168px;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  height: 100vh;
  position: relative;
  transition: grid-template-columns .24s ease;
  overflow: hidden;
}
.enterprise-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}
.side-nav {
  background: var(--surface-sidebar);
  border-right: 1px solid var(--outline-gray-2);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 12px 8px;
  gap: 8px;
  width: 172px;
  overflow: hidden;
  backdrop-filter: none;
  position: sticky;
  top: 0;
  height: 100vh;
  transform: translateX(0);
  transition: transform .2s ease, opacity .15s ease;
  box-shadow: none;
}
.side-nav.is-hidden {
  transform: translateX(-100%);
  pointer-events: none;
  opacity: 0;
}
.shell-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}
.main-panel-shell {
  min-width: 0;
}
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  height: 48px;
  min-height: 48px;
  border-bottom: 1px solid var(--outline-gray-2);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: none;
}
.header-user-chip {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  min-width: 160px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: #ffffff;
}
.header-user-chip strong {
  font-size: 13px;
}
.header-user-label,
.top-header-copy small,
.side-nav-section-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.top-header-copy strong {
  font-size: 18px;
  letter-spacing: -.03em;
}
.page-inner {
  width: 100%;
  max-width: 1720px;
  height: 100%;
  margin: 0 auto;
}
.shell-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(6, 11, 23, 0.52);
  backdrop-filter: blur(3px);
  z-index: 35;
}
@media (min-width: 901px) {
  .shell-backdrop {
    display: none;
  }
}
.top-header-left,
.top-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.top-header-copy {
  display: grid;
  gap: 2px;
}
.top-header-copy.compact {
  gap: 0;
}
.top-header-copy span {
  color: var(--text-secondary);
  font-size: 12px;
}
.top-header-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.theme-toggle-btn {
  min-height: 34px;
  padding: 7px 12px;
}
.side-nav-top { display: flex; align-items: center; gap: 10px; }
.side-brand { display: grid; gap: 4px; min-width: 0; }
.side-nav-section-label {
  padding: 0 12px;
}
.side-brand strong { font-size: 16px; line-height: 1.1; color: #0f172a; letter-spacing: -.02em; }
.side-brand small { color: #64748b; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.side-nav-links { display: grid; align-content: start; gap: 8px; overflow: visible; }
.side-nav-links a {
  padding: 6px 10px;
  color: var(--ink-gray-7);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.nav-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--ink-gray-6);
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--surface-gray-2);
  font-size: 13px;
}
.side-nav-links a:hover { background: #f8fafc; color: #0f172a; transform: none; }
.side-nav-links a.active {
  color: var(--ink-gray-9);
  background: #ffffff;
  border-color: var(--outline-gray-2);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.side-nav-links a.active .nav-icon {
  background: rgba(37, 99, 235, 0.14);
  color: #1e40af;
}
.side-user-area { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #64748b; border-top: 1px solid rgba(148, 163, 184, 0.16); padding: 16px 4px 0; }
.side-user-meta { display: grid; gap: 4px; min-width: 0; }
.side-user-meta strong { font-size: 13px; color: var(--text-primary); }
.side-user-area span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-toggle { flex-shrink: 0; }
.page-container {
  padding: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--surface-gray-1);
}
.screen-block { display: grid; gap: 10px; min-height: 100%; height: 100%; align-content: start; padding: 10px; overflow: hidden; min-width: 0; }
.hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; min-width: 0; padding-bottom: 2px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.title-area { display: grid; gap: 10px; max-width: 900px; }
.title-area h1 { font-size: 34px; margin-bottom: 0; font-weight: 800; letter-spacing: -.05em; line-height: 1.02; }
.title-area p { color: var(--text-secondary); font-size: 15px; margin-bottom: 0; max-width: 72ch; }
.tab-strip { display: inline-flex; gap: 8px; padding: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 18px; width: fit-content; }
.tab { padding: 11px 18px; background: transparent; color: var(--text-secondary); }
.tab.active { background: rgba(255,255,255,0.08); color: #fff; box-shadow: none; font-weight: 700; border-color: rgba(255,255,255,0.04); }
.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 18px; }
.dashboard-summary-grid { align-items: stretch; }
.summary-tile, .panel-shell {
  background: #ffffff;
  border: 1px solid var(--outline-gray-2);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
}
.panel-shell {
  position: relative;
  overflow: hidden;
}
.panel-shell::before {
  content: none;
}
.panel-shell > * {
  position: relative;
  z-index: 1;
}
.summary-tile { padding: 22px; min-height: 152px; }
.summary-tile span { display: block; color: var(--text-secondary); font-size: 12px; margin-bottom: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.summary-tile strong { display: block; font-size: 30px; margin-bottom: 6px; letter-spacing: -.05em; }
.summary-tile small { color: var(--text-muted); }
.summary-tile.danger,
.summary-tile.warning {
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}
.summary-tile.danger {
  border-color: rgba(239, 68, 68, 0.22);
  border-top: 4px solid #EF4444;
}
.summary-tile.warning {
  border-color: rgba(245, 158, 11, 0.24);
  border-top: 4px solid #F59E0B;
}
.panel-shell { padding: 24px; }
.main-panel { padding-top: 20px; }
.hero-highlight-panel {
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 42%),
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
  border-color: rgba(37, 99, 235, 0.18);
}
.hero-highlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: 18px;
  align-items: center;
}
.hero-highlight-grid h2 {
  font-size: 26px;
  margin-bottom: 10px;
  letter-spacing: -.04em;
}
.hero-highlight-aside {
  display: flex;
  justify-content: flex-end;
}
.soft-metric-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
  border: 1px solid #E2E8F0;
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
}
.soft-metric-card span {
  font-size: 11px;
  color: var(--info);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
}
.soft-metric-card strong {
  font-size: 20px;
  letter-spacing: -.03em;
}
.soft-metric-card small {
  color: var(--text-secondary);
  line-height: 1.6;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.compact-head { margin-bottom: 14px; }
.head-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.soft-badge { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,0.04); }
.soft-badge.active { background: rgba(57, 194, 138, 0.12); color: #aef2d2; border-color: rgba(57, 194, 138, 0.2); }
.webhook-info-row { display: grid; gap: 12px; }
.webhook-url {
  display: block;
  padding: 14px 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.toolbar-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.toolbar-grid > * {
  min-width: 0;
}
.toolbar-grid.refined { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.source-hint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.source-hint { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); background: rgba(11, 16, 32, 0.56); border-radius: 16px; }
.source-hint strong { font-size: 14px; color: var(--text-primary); }
.source-hint span { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: var(--info); }
.source-hint small { color: var(--text-secondary); line-height: 1.5; }
.pdf-hint { margin-bottom: 16px; }
.inline-link { color: #8ec5ff; font-weight: 600; }
.table-wrap { overflow-x: auto; overflow-y: visible; width: 100%; min-width: 0; }
.refined-wrap { border: 1px solid var(--border); border-radius: 18px; overflow-x: auto; overflow-y: visible; width: 100%; min-width: 0; background: rgba(11, 16, 32, 0.4); }
.modern-table { width: 100%; max-width: 100%; border-collapse: collapse; background: transparent; table-layout: fixed; }
.refined-table thead { background: rgba(255,255,255,0.04); }
.modern-table th { text-align: left; color: var(--text-secondary); font-weight: 700; font-size: 12px; padding: 16px; border-bottom: 1px solid var(--border); white-space: nowrap; text-transform: uppercase; letter-spacing: .08em; }
.modern-table td { padding: 18px 16px; border-bottom: 1px solid rgba(148,163,184,.08); vertical-align: middle; color: var(--text-primary); }
.refined-table td,
.refined-table th {
  min-width: 120px;
}
.refined-table td:first-child,
.refined-table th:first-child {
  min-width: 180px;
}
.modern-table tbody tr {
  transition: background .16s ease, transform .16s ease;
}
.modern-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}
.no-wrap-table th, .no-wrap-table td { white-space: nowrap; }
.no-wrap-table .cell-title { white-space: nowrap; }
.modern-table td, .modern-table th { overflow-wrap: anywhere; word-break: break-word; }
.no-wrap-table td, .no-wrap-table th { overflow-wrap: normal; word-break: normal; }
.cell-title { font-weight: 700; color: var(--text-primary); }
.cell-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.negative { color: #ff8b9c; }
.strong { font-weight: 800; }
.status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 94px; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.status-pill.lost { color: #ffd7dd; background: rgba(234, 102, 125, 0.12); border-color: rgba(234, 102, 125, 0.22); }
.status-pill.ok { color: #b8f5d7; background: rgba(57, 194, 138, 0.12); border-color: rgba(57, 194, 138, 0.2); }
.sync-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 23, 0.68);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
}
.sync-modal {
  width: min(1200px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: rgba(18, 25, 43, 0.98);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.bottom-grid { display: grid; gap: 20px; }
.dashboard-overview-grid { grid-template-columns: 1.1fr .9fr; }
.portfolio-layout-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); align-items: start; }
.stack-panel-group { display: grid; gap: 20px; align-content: start; }
.refined-bottom { grid-template-columns: 1.05fr .95fr; }
.campaign-layout { grid-template-columns: .95fr 1.05fr; }
.billing-layout { grid-template-columns: 1.1fr .9fr; }
.overview-list {
  display: grid;
  gap: 14px;
}
.overview-item {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(11, 16, 32, 0.44);
}
.overview-item:hover,
.summary-tile:hover,
.panel-shell:hover {
  border-color: var(--border-strong);
}
.dashboard-summary-grid .summary-tile,
.hero-highlight-panel,
.main-panel,
.preview-shell {
  min-width: 0;
}
.command-home { gap: 20px; }
.bi-home { gap: 12px; }
.bi-home-reference {
  gap: 10px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.bi-home-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
}
.reference-header-row { align-items: center; }
.single-row-toolbar { justify-content: flex-start; }
.top-kpi-row { margin-top: 0; }
.bi-title-area h1 { color: #0f172a; }
.reference-title-area { gap: 4px; }
.reference-title-area h1 { font-size: 18px; margin-bottom: 0; }
.reference-title-area p { font-size: 12px; color: #64748b; }
.bi-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.reference-toolbar { flex-wrap: nowrap; gap: 8px; }
.reference-header-row .reference-toolbar { width: 100%; }
.bi-search {
  min-width: 280px;
  background: #ffffff;
}
.search-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 0 10px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  background: #fff;
  height: 40px;
}
.search-shell input {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.search-shell kbd {
  font-size: 11px;
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,0.2);
  border-radius: 6px;
  padding: 2px 6px;
}
.date-filter-btn { white-space: nowrap; }
.icon-only-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}
.reference-user-chip { min-width: 132px; }
.reference-user-chip span { font-size: 12px; color: #64748b; }
.bi-kpi-grid { margin-top: 0; }
.reference-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.bi-kpi-card { min-height: 178px; }
.reference-kpi-card {
  min-height: 144px;
  padding: 16px;
  gap: 10px;
  border-radius: 14px;
  min-width: 0;
}
.bi-kpi-header { align-items: start; }
.bi-kpi-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bi-kpi-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  flex-shrink: 0;
}
.reference-kpi-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.reference-kpi-svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
.reference-kpi-card strong { font-size: clamp(18px, 1.1vw, 24px); }
.reference-kpi-card p { font-size: 12px; }
.reference-kpi-card .sparkline-row.subtle { height: 22px; }
.reference-kpi-card .bi-kpi-title span:last-child {
  font-size: clamp(11px, .78vw, 13px);
  line-height: 1.2;
}
.reference-kpi-card .sparkline-row.subtle span { width: auto; }
.reference-kpi-card .sparkline-row.bars span { border-radius: 3px 3px 0 0; }
.bi-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
  gap: 18px;
}
.reference-main-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  position: relative;
  z-index: 2;
}
.reference-chart-panel { grid-column: span 2; min-height: 420px; }
.reference-ranking-panel { grid-column: span 2; min-height: 420px; }
.bi-chart-panel,
.bi-ranking-panel { min-width: 0; }
.reference-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.reference-panel-head > div { min-width: 0; }
.reference-panel-head h2 { white-space: normal; font-size: 16px; margin-bottom: 0; }
.bi-chart-clean { height: 340px; }
.reference-chart-panel { padding: 12px; min-width: 0; }
.reference-ranking-panel { min-width: 0; padding: 12px; }
.reference-chart-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.reference-chart-topline strong { display: block; font-size: 21px; margin: 4px 0 2px; color: #0f172a; letter-spacing: -.03em; }
.reference-chart-legend.compact { display: flex; gap: 10px; color: #64748b; font-size: 11px; }
.reference-chart-tooltip {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 12px;
  background: #fff;
  font-size: 11px;
  color: #475569;
}
.line-chart-reference-shell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 6px;
  min-height: 220px;
}
.reference-y-axis {
  display: grid;
  align-content: stretch;
  color: #94a3b8;
  font-size: 10px;
}
.reference-y-axis span { display: flex; align-items: flex-end; justify-content: flex-end; }
.reference-lines-area {
  position: relative;
  min-height: 150px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fcfdff);
}
.reference-grid { border-radius: 14px; }
.reference-line-svg {
  position: absolute;
  inset: 0 0 20px;
  width: 100%;
  height: calc(100% - 20px);
}
.reference-x-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-top: 6px;
  color: #94a3b8;
  font-size: 10px;
}
.text-link-btn {
  border: 0;
  background: transparent;
  color: #2563eb;
  font-weight: 600;
  padding: 0;
  text-align: left;
}
.small-link { font-size: 12px; }
.bi-ranking-head,
.bi-ranking-row {
  grid-template-columns: 44px minmax(160px, 1.4fr) minmax(120px, 1fr) minmax(110px, .9fr) 82px minmax(120px, .8fr);
}
.reference-ranking-table { display: grid; gap: 8px; align-content: start; min-height: 320px; }
.reference-ranking-head { grid-template-columns: 32px minmax(150px, 1.4fr) minmax(110px, 1fr) 72px 96px; padding-bottom: 4px; font-size: 10px; }
.reference-ranking-row { grid-template-columns: 32px minmax(150px, 1.4fr) minmax(110px, 1fr) 72px 96px; padding: 4px 0; border: 0; border-bottom: 1px solid #eef2f7; border-radius: 0; background: transparent; font-size: 11px; }
.reference-ranking-row .ranking-seller-cell strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rank-text { color: #0f172a; font-weight: 700; }
.ranking-seller-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.seller-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1d4ed8;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.ranking-progress-cell { display: grid; gap: 4px; }
.ranking-bar.compact.colored { height: 5px; background: #edf2f7; }
.ranking-bar.compact.colored i.is-good { background: linear-gradient(90deg, #22c55e, #86efac); }
.ranking-bar.compact.colored i.is-mid { background: linear-gradient(90deg, #f59e0b, #facc15); }
.ranking-bar.compact.colored i.is-low { background: linear-gradient(90deg, #ef4444, #f87171); }
.bi-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.reference-bottom-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.reference-bottom-card { min-width: 0; min-height: 280px; padding: 14px; overflow: hidden; }
.simple-home-grid > :first-child { grid-column: span 2; }
.simple-home-grid > :not(:first-child) { grid-column: span 1; }
.city-bars { display: grid; gap: 10px; }
.reference-city-bars { gap: 8px; }
.city-bar-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
}
.reference-city-row { grid-template-columns: 60px minmax(0, 1fr) 68px 38px; }
.city-bar-row span,
.city-bar-row strong { font-size: 11px; }
.reference-city-row small { color: #64748b; font-size: 10px; text-align: right; }
.city-bar-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.city-bar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
}
.goal-ring-shell {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  min-height: 146px;
}
.goal-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.goal-ring-hole {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
}
.goal-ring-hole strong { font-size: 19px; color: #0f172a; }
.goal-ring-hole span { font-size: 9px; color: #64748b; }
.donut-shell {
  display: grid;
  place-items: center;
  min-height: 180px;
}
.reference-donut-shell { min-height: 112px; }
.fake-donut {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.fake-donut-hole {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
}
.fake-donut-hole strong { font-size: 11px; color: #0f172a; }
.fake-donut-hole span { font-size: 9px; color: #64748b; }
.mix-legend-list { display: grid; gap: 6px; margin-top: 6px; }
.mix-legend-item { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 11px; color: #475569; }
.mix-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.bi-alert-list { gap: 10px; }
.bi-alert-card { gap: 10px; }
.reference-alert-list { gap: 6px; }
.reference-alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid #eef2f7;
}
.reference-alert-item:last-child { border-bottom: 0; }
.reference-alert-item p { margin: 2px 0 0; color: #64748b; font-size: 10px; line-height: 1.3; }
.reference-alert-item small { color: #94a3b8; font-size: 10px; }
.severity-icon { font-size: 9px; line-height: 1.5; }
.severity-icon.critical { color: #ef4444; }
.severity-icon.warning { color: #f59e0b; }
.severity-icon.neutral { color: #3b82f6; }
.severity-icon.success { color: #10b981; }
.severity-badge.neutral { color: #334155; background: #e2e8f0; }
.command-hero,
.command-grid-top,
.command-content-grid { display: grid; gap: 18px; }
.command-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.command-title-area { max-width: none; }
.command-title-area h1 { font-size: 42px; line-height: 1.04; max-width: 14ch; color: #0f172a; }
.command-hero-actions { justify-content: flex-end; align-self: start; }
.command-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.command-meta-row-top { margin-top: 0; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,0.18);
  color: #64748b;
  background: #ffffff;
}
.status-chip.success { color: #15803d; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.18); }
.status-chip.neutral { color: #475569; }
.command-grid-top { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; }
.command-insight-card,
.command-chart-card,
.ranking-compact-panel,
.alerts-clean-panel { min-width: 0; }
.command-insight-card,
.command-chart-card,
.ranking-compact-panel,
.alerts-clean-panel,
.kpi-compact-card { border-radius: 18px; }
.insight-card-body { display: grid; gap: 12px; }
.insight-card-body strong { font-size: 30px; line-height: 1.15; letter-spacing: -.04em; color: #0f172a; }
.insight-card-body p { margin: 0; color: #64748b; line-height: 1.7; max-width: 62ch; }
.command-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.command-kpi-grid-top { margin-top: 0; }
.kpi-compact-card { padding: 18px; display: grid; gap: 12px; min-height: 172px; }
.kpi-card-header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.kpi-card-header span { font-size: 12px; color: #64748b; font-weight: 700; letter-spacing: .04em; line-height: 1.4; }
.kpi-compact-card strong { font-size: 28px; letter-spacing: -.04em; line-height: 1.05; color: #0f172a; }
.kpi-compact-card p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.sparkline-row.subtle { height: 36px; gap: 5px; margin-top: auto; }
.sparkline-row.subtle span { background: rgba(99, 102, 241, 0.72); box-shadow: none; }
.command-content-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.ranking-table { display: grid; gap: 10px; min-width: 0; }
.ranking-table-head,
.ranking-table-row {
  display: grid;
  grid-template-columns: 44px minmax(160px, 1.4fr) minmax(120px, 1fr) 100px 110px 82px minmax(120px, .9fr);
  gap: 12px;
  align-items: center;
}
.ranking-table-head {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 0 4px 8px;
}
.ranking-table-row {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.14);
  background: #ffffff;
  min-width: 0;
}
.ranking-table-row strong,
.ranking-table-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-badge {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.10);
  color: #1e40af;
  font-weight: 800;
}
.ranking-bar.compact { height: 8px; }
.alert-group-list { display: grid; gap: 12px; }
.alert-group-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.14);
  background: #ffffff;
  display: grid;
  gap: 12px;
}
.alert-group-head { display: flex; align-items: center; justify-content: flex-start; }
.severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.severity-badge.critical { color: #fecaca; background: rgba(239,68,68,0.12); }
.severity-badge.warning { color: #fde68a; background: rgba(245,158,11,0.12); }
.severity-badge.success { color: #bbf7d0; background: rgba(34,197,94,0.12); }
.alert-item-list { display: grid; gap: 8px; }
.alert-clean-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  line-height: 1.55;
}
.clean-top-header { padding: 12px 18px; background: rgba(248, 250, 252, 0.92); box-shadow: none; }
.top-header-copy.compact strong { font-size: 14px; color: #0f172a; }
.top-header-copy.compact span { font-size: 11px; color: #64748b; }
.top-header-copy.compact small { font-size: 10px; }
.header-user-chip.compact { min-width: 142px; padding: 8px 12px; }
.text-success { color: #22c55e; }
.text-warning { color: #f59e0b; }
.text-danger { color: #ef4444; }
.executive-home { gap: 22px; }
.executive-hero-row { align-items: end; }
.executive-title-area h1 { font-size: 42px; line-height: .98; }
.executive-hero-panel {
  background:
    radial-gradient(circle at top right, rgba(33, 211, 146, 0.14), transparent 28%),
    radial-gradient(circle at top left, rgba(79, 124, 255, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(12, 20, 36, 0.96), rgba(18, 28, 50, 0.92));
  border-color: rgba(96, 165, 250, 0.22);
  box-shadow: 0 22px 50px rgba(8, 15, 30, 0.28);
}
.executive-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 22px; align-items: stretch; }
.executive-hero-copy { display: grid; gap: 12px; }
.executive-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.executive-hero-side { display: flex; align-items: stretch; justify-content: flex-end; }
.executive-priority-card {
  width: min(360px, 100%);
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.74), rgba(12, 20, 36, 0.9));
  border: 1px solid rgba(57, 194, 138, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.executive-priority-card span,
.executive-opportunity-card span,
.executive-footer-grid span,
.executive-kpi-top span { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-muted); font-weight: 800; }
.executive-priority-card strong { font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.executive-priority-card small { color: var(--text-secondary); line-height: 1.6; }
.executive-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.executive-kpi-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 16, 30, 0.96));
  box-shadow: 0 16px 34px rgba(3, 8, 20, 0.22);
}
.executive-kpi-card::after {
  content: '';
  position: absolute;
  inset: auto -10% -45% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,124,255,0.18), transparent 60%);
  pointer-events: none;
}
.executive-kpi-card.danger::after { background: radial-gradient(circle, rgba(234,102,125,0.16), transparent 60%); }
.executive-kpi-top,
.executive-kpi-bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.executive-kpi-top { align-items: start; flex-direction: column; }
.executive-kpi-top strong { font-size: 28px; letter-spacing: -.04em; }
.executive-kpi-delta { font-size: 13px; font-weight: 800; }
.executive-kpi-delta.positive { color: #86efac; }
.executive-kpi-delta.negative { color: #fda4af; }
.sparkline-row { display: flex; align-items: end; gap: 6px; height: 48px; }
.sparkline-row span { flex: 1; border-radius: 999px; background: linear-gradient(180deg, rgba(96, 165, 250, 0.42), rgba(37, 99, 235, 0.95)); box-shadow: 0 0 14px rgba(37, 99, 235, 0.18); }
.executive-kpi-card.danger .sparkline-row span { background: linear-gradient(180deg, rgba(244,114,182,0.42), rgba(239,68,68,0.92)); box-shadow: 0 0 14px rgba(239,68,68,0.15); }
.executive-main-grid,
.executive-secondary-grid { display: grid; gap: 20px; }
.executive-main-grid { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); }
.executive-secondary-grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.executive-chart-panel,
.executive-map-panel,
.executive-alerts-panel,
.executive-footer-panel { min-width: 0; }
.executive-line-chart {
  position: relative;
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(7, 12, 24, 0.9), rgba(12, 20, 36, 0.8));
  border: 1px solid rgba(148, 163, 184, 0.1);
}
.line-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
  background-size: 100% 25%, 8.33% 100%;
}
.line-series { position: absolute; inset: 18px 18px 24px; }
.line-series span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}
.line-series.current span { background: #60a5fa; box-shadow: 0 0 0 6px rgba(96,165,250,0.14); }
.line-series.previous span { background: #34d399; box-shadow: 0 0 0 6px rgba(52,211,153,0.12); }
.executive-chart-legend { display: flex; gap: 18px; margin-top: 14px; color: var(--text-secondary); font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.legend-dot.current { background: #60a5fa; }
.legend-dot.previous { background: #34d399; }
.executive-map-grid,
.executive-opportunities-grid,
.executive-footer-grid { display: grid; gap: 14px; }
.executive-map-grid { grid-template-columns: 1fr; }
.state-card,
.executive-opportunity-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(11, 16, 32, 0.52);
}
.state-card.high { border-color: rgba(57,194,138,0.24); box-shadow: inset 0 0 0 1px rgba(57,194,138,0.08); }
.state-card.medium { border-color: rgba(96,165,250,0.24); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.08); }
.state-card.alert { border-color: rgba(242,185,75,0.24); box-shadow: inset 0 0 0 1px rgba(242,185,75,0.08); }
.state-card strong { font-size: 20px; }
.state-card span { font-size: 16px; font-weight: 800; }
.state-card small { color: var(--text-secondary); }
.executive-ranking-list { display: grid; gap: 12px; }
.ranking-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) auto minmax(140px, .8fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.1);
  background: rgba(11, 16, 32, 0.44);
}
.ranking-medal {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(255,255,255,0.06);
}
.ranking-medal.ouro { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #221308; }
.ranking-medal.prata { background: linear-gradient(135deg, #dbe4f0, #94a3b8); color: #122033; }
.ranking-medal.bronze { background: linear-gradient(135deg, #fdba74, #c2410c); color: #2a1205; }
.ranking-copy { min-width: 0; display: grid; gap: 4px; }
.ranking-copy small,
.ranking-metrics span:last-child { color: var(--text-secondary); }
.ranking-metrics { display: grid; gap: 4px; text-align: right; }
.ranking-metrics span:first-child { color: #86efac; font-weight: 800; }
.ranking-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  overflow: hidden;
}
.ranking-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #2563eb, #34d399);
}
.executive-alert-item strong { color: #fbbf24; }
.executive-opportunities-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.executive-opportunity-card strong { font-size: 22px; letter-spacing: -.03em; }
.executive-opportunity-card small { color: var(--text-secondary); }
.executive-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.executive-footer-grid div {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(11, 16, 32, 0.46);
  border: 1px solid rgba(148,163,184,0.1);
}
.executive-footer-grid strong { font-size: 18px; }
.row-actions {
  align-items: center;
}
.overview-item strong {
  font-size: 14px;
  color: var(--text-primary);
}
.overview-item span {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 13px;
}
.compact-overview-list .overview-item {
  padding: 14px 16px;
}
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.quick-action-btn {
  justify-content: flex-start;
  min-height: 52px;
  font-weight: 700;
}
.refined-schedule { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.group-member-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.billing-filters-grid { grid-template-columns: 150px 150px 1fr 1fr 1.3fr 160px; }
.campaign-dashboard-filters { grid-template-columns: 150px 150px 1fr 1.4fr 160px; }
.member-actions, .row-actions, .pagination-row { display: flex; gap: 8px; flex-wrap: wrap; }
.small-btn { padding: 8px 12px; border-radius: 10px; }
.no-margin { margin: 0; }
.message-preview.light { margin: 0; white-space: pre-wrap; color: var(--text-secondary); line-height: 1.7; font-family: inherit; }
.refined-preview { background: rgba(11, 16, 32, 0.68); border: 1px solid var(--border); border-radius: 16px; padding: 16px; min-height: 260px; }
.preview-shell { align-self: start; }
.selected-row { background: rgba(96, 165, 250, 0.08); }
.selected-row td { font-weight: 700; }
.pagination-row { justify-content: flex-end; align-items: center; margin-top: 14px; color: var(--text-secondary); }
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: 0; height: 100%; min-height: 0; overflow: hidden; min-width: 0; }
.chat-sidebar, .chat-main { display: grid; min-height: 0; min-width: 0; }
.chat-sidebar { border-right: 1px solid #e5e7eb; padding-right: 0; }
.chat-conversation-list { display: grid; gap: 0; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 220px); background: #f7f8fa; }
.chat-conversation-item { width: 100%; min-height: 62px; text-align: left; border: 0; background: transparent; border-radius: 0; padding: 7px 10px; display: grid; gap: 1px; }
.chat-conversation-item.active { background: #e6f0ff; box-shadow: inset 3px 0 0 #2563eb; }
.chat-conversation-top, .chat-conversation-bottom { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-conversation-top strong { font-size: 13px; font-weight: 600; color: #111827; letter-spacing: -.01em; }
.chat-conversation-top span { font-size: 10px; color: #6b7280; flex-shrink: 0; }
.chat-conversation-bottom span:first-child { color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.chat-main { grid-template-rows: auto 1fr auto; gap: 0; }
.chat-header { display: grid; gap: 0; padding: 6px 10px; padding-bottom: 0; border-bottom: 1px solid #e5e7eb; }
.chat-header span { color: #6b7280; font-size: 12px; }
.chat-messages { display: flex; flex-direction: column; gap: 3px; padding: 8px 4px; overflow: auto; max-height: none; }
.chat-bubble { max-width: 58%; padding: 8px 10px; border-radius: 12px; display: grid; gap: 1px; line-height: 1.34; font-size: 12.5px; box-shadow: 0 1px .5px rgba(11,20,26,.10); }
.chat-bubble.in { background: #fff; justify-self: start; }
.chat-bubble.out { background: #dcf8c6; justify-self: end; }
.chat-bubble small { color: #6b7280; font-size: 9.5px; justify-self: end; }
.chat-input-row { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 8px; align-items: center; }
.whatsapp-shell { padding: 0; overflow: hidden; gap: 0; border-radius: 12px; width: 100%; height: 100%; background: #fff; border: 1px solid #e9edf2; box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06); }
.whatsapp-sidebar { background: #f7f8fa; padding: 0; border-right: 1px solid #e5e7eb; grid-template-rows: auto 1fr; }
.chat-sidebar-top { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid #e9edf2; background: #f7f8fa; }
.chat-sidebar-toolbar { display: flex; justify-content: space-between; align-items: center; }
.chat-sidebar-toolbar strong { font-size: 18px; font-weight: 700; color: #111827; }
.sidebar-actions { display: flex; gap: 8px; }
.chat-search-box input { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: none; }
.chat-new-conversation-box { display: grid; gap: 8px; background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: 10px; }
.chat-new-actions { display: flex; gap: 8px; justify-content: flex-end; }
.whatsapp-conversation-item { border: none; border-bottom: 1px solid #edf1f5; border-radius: 0; padding: 8px 12px; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
.whatsapp-conversation-item.active { background: #eef4ff; border-color: #edf1f5; }
.whatsapp-conversation-item.unread { background: #f7f8fa; }
.whatsapp-conversation-item.unread .chat-conversation-top strong { font-weight: 700; }
.chat-conversation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid #edf1f5; background: #fff; }
.chat-conversation-row.active { background: #eef4ff; }
.chat-conversation-row.unread { background: #f7f8fa; }
.chat-conversation-row .whatsapp-conversation-item { border-bottom: 0; }
.clear-conversation-btn { border: 0; border-left: 1px solid #edf1f5; background: transparent; color: #6b7280; font-size: 12px; font-weight: 600; padding: 0 12px; cursor: pointer; }
.clear-conversation-btn:hover { background: #fff7ed; color: #c2410c; }
.conversation-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #9fb3c8, #7f93ab); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .03em; box-shadow: none; }
.conversation-avatar.large { width: 40px; height: 40px; font-size: 12px; }
.conversation-content { min-width: 0; display: grid; gap: 2px; }
.conversation-number { color: #6b7280; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-empty-state { padding: 20px 16px; color: #6b7280; font-size: 13px; }
.whatsapp-main { background: #efeae2; grid-template-rows: 60px 1fr auto; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.whatsapp-header { background: #fff; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; }
.chat-header-profile { display: flex; align-items: center; gap: 10px; height: 100%; }
.chat-header-meta { display: grid; gap: 1px; }
.chat-header-meta strong { font-size: 14px; font-weight: 600; color: #111827; }
.whatsapp-messages { padding: 14px 22px; min-height: 0; height: 100%; max-height: calc(100vh - 188px); overflow-y: auto; overflow-x: hidden; background: #efeae2; background-image: radial-gradient(rgba(215,205,190,.22) .8px, transparent .8px); background-size: 24px 24px; }
.whatsapp-bubble.in { background: #fff; }
.whatsapp-bubble.out { background: #dcf8c6; }
.whatsapp-input-row { background: #fff; padding: 10px 14px; border-top: 1px solid #e5e7eb; }
.whatsapp-input-row input { border-radius: 999px; border: 1px solid #e5e7eb; padding: 11px 14px; background: #fff; font-size: 14px; box-shadow: none; min-height: 42px; }
.composer-side-btn { width: 34px; height: 34px; border: 0; background: transparent; color: #6b7280; font-size: 18px; line-height: 1; border-radius: 50%; }
.send-icon-btn { width: 36px; height: 36px; border: none; border-radius: 50%; background: #22c55e; color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: 0 6px 14px rgba(34, 197, 94, .24); }
.send-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 32px; height: 32px; border: 0; background: transparent; color: #6b7280; }
.soft-badge.active { background: #dbeafe; color: #1d4ed8; }

.copilot-panel { background: #fff; border-left: 1px solid #e9edf2; display: grid; grid-template-rows: auto minmax(0, 42%) minmax(0, 58%); align-content: start; gap: 8px; padding: 10px 12px; overflow: hidden; height: 100%; min-height: 0; min-width: 0; }
.copilot-header { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #e9edf2; }
.copilot-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #111827; }
.copilot-header span { font-size: 11px; color: #6b7280; }
.executive-copilot .copilot-header h3 { font-size: 15px; }
.executive-copilot .copilot-header span { font-size: 10.5px; }
.copilot-section { background: transparent; border: 0; border-bottom: 1px solid #e9edf2; border-radius: 0; padding: 6px 0 8px; display: grid; gap: 6px; box-shadow: none; align-content: start; min-width: 0; }
.copilot-section:last-child { border-bottom: 0; }
.copilot-section strong { color: #111827; }
.copilot-section-head { display: grid; gap: 6px; }
.copilot-actions { display: flex; gap: 6px; flex-wrap: nowrap; }
.copilot-actions .outline-btn.small-btn { padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.2; border-color: #e5e7eb; }
.copilot-text { margin: 0; color: #374151; line-height: 1.45; font-size: 12.5px; }
.copilot-list { margin: 0; padding-left: 16px; display: grid; gap: 6px; color: #374151; font-size: 12.5px; }
.copilot-list.alerts li { color: #92400e; }
.copilot-meta-grid { display: grid; gap: 6px; font-size: 12px; color: #374151; }
.copilot-meta-grid span strong { color: #111827; }
.copilot-meta-grid.compact { gap: 8px; }
.copilot-meta-grid.compact span { display: grid; gap: 2px; }
.copilot-meta-grid.compact em { font-style: normal; color: #111827; font-size: 12.5px; }
.copilot-top-sections { min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; display: grid; align-content: start; gap: 0; padding-right: 2px; }
.emphasis-section { background: #f8fbff; border-bottom-color: #dbeafe; padding: 10px; border-radius: 10px; }
.actionable-list { padding-left: 18px; }
.actionable-list li { display: flex; gap: 8px; align-items: flex-start; }
.actionable-list li::marker { color: #2563eb; }
.compact-list { gap: 4px; }
.compact-list li { line-height: 1.3; }
.alerts-section { background: #fffaf5; border-bottom-color: #fed7aa; padding: 10px; border-radius: 10px; }
.alert-icon { color: #f59e0b; font-size: 12px; line-height: 1.4; margin-top: 1px; }
.executive-summary { background: #f9fafb; border-radius: 10px; padding: 10px; border-bottom-color: #e5e7eb; }
.executive-chat { border-top: 1px solid #eef2f7; padding-top: 10px; min-height: 0; }
.copiloto-chat-section { min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.copilot-chat-log { min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.copilot-chat-bubble { max-width: 100%; padding: 7px 9px; border-radius: 10px; font-size: 12px; line-height: 1.4; }
.copilot-chat-bubble.assistant { background: #f3f4f6; color: #111827; align-self: flex-start; }
.copilot-chat-bubble.user { background: #eff6ff; color: #1e3a8a; align-self: flex-end; }
.copilot-chat-input { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding-top: 4px; }
.copilot-chat-input input { width: 100%; border: 1px solid #e5e7eb; border-radius: 999px; padding: 8px 10px; font-size: 12px; min-width: 0; }

@media (max-width: 1380px) {
  .chat-layout { grid-template-columns: 250px minmax(0, 1fr) 280px; }
}

@media (max-width: 1120px) {
  .chat-layout { grid-template-columns: 220px minmax(0, 1fr) 260px; }
  .copilot-panel { padding: 8px 10px; gap: 4px; }
  .copilot-header h3 { font-size: 14px; }
  .copilot-section strong { font-size: 13px; }
  .copilot-text,
  .copilot-list,
  .copilot-meta-grid,
  .copilot-chat-bubble,
  .copilot-chat-input input { font-size: 11.5px; }
}

@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar { border-right: 0; border-bottom: 1px solid #dfe5ea; }
  .copilot-panel { grid-column: auto; height: auto; }
}

.chat-conversation-list::-webkit-scrollbar,
.whatsapp-messages::-webkit-scrollbar,
.copilot-panel::-webkit-scrollbar { width: 0; height: 0; }
.chat-conversation-list,
.whatsapp-messages,
.copilot-panel { scrollbar-width: none; }

@media (max-width: 1540px) {
  .reference-kpi-grid,
  .top-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reference-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .enterprise-shell { grid-template-columns: 168px minmax(0, 1fr); }
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-highlight-grid,
  .dashboard-overview-grid,
  .portfolio-layout-grid,
  .toolbar-grid.refined,
  .refined-schedule,
  .refined-bottom,
  .source-hint-grid,
  .campaign-layout,
  .billing-layout,
  .executive-main-grid,
  .executive-secondary-grid,
  .executive-hero-grid,
  .command-grid-top,
  .command-content-grid,
  .bi-main-grid { grid-template-columns: 1fr; }
  .bi-bottom-grid,
  .reference-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-kpi-grid,
  .reference-kpi-grid,
  .top-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .executive-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .executive-opportunities-grid,
  .executive-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .screen-block { padding: 14px; gap: 14px; }
  .title-area h1 { font-size: 30px; }
  .hero-row { flex-direction: column; }
  .hero-actions { justify-content: flex-start; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-highlight-grid,
  .dashboard-overview-grid,
  .portfolio-layout-grid,
  .quick-actions-grid,
  .toolbar-grid.refined,
  .refined-schedule,
  .refined-bottom,
  .source-hint-grid,
  .campaign-layout,
  .billing-layout,
  .group-member-grid,
  .billing-filters-grid,
  .campaign-dashboard-filters,
  .executive-main-grid,
  .executive-secondary-grid,
  .executive-hero-grid,
  .executive-opportunities-grid,
  .executive-footer-grid,
  .command-grid-top,
  .command-content-grid,
  .command-hero,
  .bi-home-header-row { grid-template-columns: 1fr; }
  .command-title-area h1,
  .executive-title-area h1,
  .bi-title-area h1,
  .reference-title-area h1 { font-size: 22px; }
  .command-kpi-grid,
  .executive-kpi-grid,
  .bi-bottom-grid,
  .reference-bottom-grid,
  .reference-kpi-grid,
  .top-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bi-toolbar,
  .reference-toolbar { justify-content: flex-start; flex-wrap: wrap; }
  .bi-search { min-width: 0; }
  .search-shell { min-width: min(100%, 260px); }
  .ranking-row { grid-template-columns: auto minmax(0, 1fr); }
  .ranking-metrics,
  .ranking-bar { grid-column: 2; }
  .ranking-metrics { text-align: left; }
  .ranking-table-head,
  .ranking-table-row,
  .bi-ranking-head,
  .bi-ranking-row,
  .reference-ranking-head,
  .reference-ranking-row { grid-template-columns: 40px minmax(0, 1fr); }
  .ranking-table-head span:nth-child(n+3),
  .ranking-table-row > :nth-child(n+3),
  .bi-ranking-head span:nth-child(n+3),
  .bi-ranking-row > :nth-child(n+3),
  .reference-ranking-head span:nth-child(n+3),
  .reference-ranking-row > :nth-child(n+3) { grid-column: 2; }
  .panel-shell,
  .summary-tile { min-width: 0; }
}
@media (max-width: 900px) {
  .enterprise-shell,
  .enterprise-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100vh; overflow: visible; }
  .side-nav {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    box-shadow: var(--shadow-soft);
  }
  .side-nav.is-hidden { transform: translateX(-100%); }
  .top-header {
    padding: 10px 12px;
  }
  .top-header-actions { margin-left: auto; }
  .shell-main,
  .page-container,
  .screen-block,
  .page-inner { height: auto; overflow: visible; }
  .screen-block { padding: 14px; }
  .summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .screen-block { padding: 12px; gap: 12px; }
  .title-area h1 { font-size: 26px; }
  .command-title-area h1,
  .executive-title-area h1,
  .bi-title-area h1,
  .reference-title-area h1 { font-size: 18px; }
  .title-area p { font-size: 14px; }
  .panel-shell { padding: 16px; border-radius: 18px; }
  .summary-tile { padding: 16px; min-height: 0; }
  .summary-tile strong { font-size: 24px; }
  .toolbar-grid,
  .hero-actions,
  .row-actions,
  .member-actions,
  .chat-new-actions,
  .pagination-row,
  .reference-toolbar { width: 100%; }
  .toolbar-grid { grid-template-columns: 1fr !important; }
  .reference-kpi-grid,
  .top-kpi-row,
  .bi-bottom-grid,
  .reference-bottom-grid { grid-template-columns: 1fr; }
  .hero-actions > *,
  .member-actions > *,
  .row-actions > * { flex: 1 1 100%; }
  .modern-table,
  .modern-table thead,
  .modern-table tbody,
  .modern-table th,
  .modern-table td,
  .modern-table tr {
    display: block;
  }
  .modern-table thead {
    display: none;
  }
  .refined-wrap,
  .table-wrap {
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .modern-table,
  .no-wrap-table {
    table-layout: auto;
  }
  .modern-table tbody {
    display: grid;
    gap: 12px;
  }
  .modern-table tr {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 10px 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
    box-shadow: var(--shadow-card);
  }
  .modern-table td,
  .no-wrap-table td,
  .no-wrap-table th {
    border-bottom: 0;
    padding: 8px 0;
    min-width: 0 !important;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .modern-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .modern-table td:not([data-label])::before {
    display: none;
  }
  .empty-state-cell {
    text-align: left;
  }
  .top-header {
    align-items: flex-start;
  }
  .top-header-left,
  .top-header-actions {
    width: 100%;
  }
  .top-header-actions { justify-content: space-between; }
  .header-user-chip {
    min-width: 0;
    flex: 1;
  }
  .tab-strip {
    width: 100%;
    overflow: auto;
  }
}

/* Design System QA — abas densas permanecem navegáveis em telas estreitas. */
@media (max-width: 760px) {
  .screen-block > div[style*="border-bottom"] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .screen-block > div[style*="border-bottom"] > button {
    flex: 0 0 auto;
    min-height: 40px;
    white-space: nowrap;
  }
}

/* Design System QA — keyboard focus ring
   Keeps keyboard navigation visible without changing interaction flows. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-500, #7c3aed);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════
   Nacional Vision — Frappe Espresso Design System (Aligned with Frappe HR)
   Escopo: UI/UX, cores, fontes Inter, densidade operacional e componentes.
═══════════════════════════════════════════════════ */
:root {
  --bg-base: var(--surface-gray-1);
  --bg-surface: var(--surface-base);
  --text-primary: var(--ink-gray-8);
  --text-secondary: var(--ink-gray-6);
  --text-muted: var(--ink-gray-4);
  --border: var(--outline-gray-2);
  --border-strong: var(--outline-gray-3);
  --accent: var(--blue-700);
  --accent-dim: var(--blue-900);
  --accent-hover: var(--blue-800);
  --accent-soft: var(--blue-50);
  --success: var(--green-600);
  --warning: var(--amber-600);
  --danger: var(--red-600);
  --info: var(--blue-600);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-premium: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html, body, #root {
  background: var(--surface-gray-1) !important;
  color: var(--ink-gray-8);
  font-family: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px;
  line-height: 1.45;
}
body::before {
  display: none !important;
}

/* Tipografia Frappe Espresso */
h1 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; color: var(--ink-gray-9) !important; }
h2 { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.015em !important; color: var(--ink-gray-9) !important; }
h3 { font-size: 15px !important; font-weight: 600 !important; color: var(--ink-gray-8) !important; }
.title-area p, .section-subtitle, .panel-subtitle, .plain-text { color: var(--ink-gray-6); font-size: 13px; line-height: 1.5; }
.section-kicker { color: var(--blue-600); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* Shell e Sidebar Frappe Desk */
.enterprise-shell { --sidebar-width: 190px; grid-template-columns: var(--sidebar-width) minmax(0,1fr); background: var(--surface-gray-1); }
.enterprise-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.side-nav {
  width: 190px !important;
  padding: 12px 8px !important;
  gap: 10px !important;
  background: var(--surface-sidebar) !important;
  border-right: 1px solid var(--outline-gray-2) !important;
  box-shadow: none !important;
}
.side-nav-top { padding: 4px 6px 12px; border-bottom: 1px solid var(--outline-gray-2); }
.side-brand strong { color: var(--ink-gray-9) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; }
.side-brand small, .side-nav-section-label { color: var(--ink-gray-4) !important; font-size: 11px !important; font-weight: 600 !important; }
.side-nav-section-label { padding: 0 8px; }
.side-nav-links { gap: 4px !important; }
.side-nav-links a {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  color: var(--ink-gray-7) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: background .15s ease, color .15s ease !important;
}
.nav-icon {
  width: 22px !important; height: 22px !important; border-radius: 4px !important;
  color: var(--ink-gray-6) !important;
  background: var(--surface-gray-2) !important;
  font-size: 12px !important;
}
.side-nav-links a:hover {
  background: var(--surface-gray-2) !important;
  color: var(--ink-gray-9) !important;
  transform: none !important;
}
.side-nav-links a.active {
  color: var(--ink-gray-9) !important;
  background: #FFFFFF !important;
  border-color: var(--outline-gray-2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  font-weight: 600 !important;
}
.side-nav-links a.active .nav-icon { background: var(--surface-gray-3) !important; color: var(--ink-gray-9) !important; }
.side-user-area { border-top: 1px solid var(--outline-gray-2) !important; color: var(--ink-gray-6) !important; padding-top: 10px !important; }
.side-user-meta strong { color: var(--ink-gray-8) !important; font-size: 13px !important; }

/* Header e Área de Conteúdo Frappe Navbar */
.top-header, .clean-top-header {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--outline-gray-2) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.top-header-copy strong, .top-header-copy.compact strong { color: var(--ink-gray-9) !important; font-size: 16px !important; }
.header-user-chip { background: var(--surface-gray-1) !important; border: 1px solid var(--outline-gray-2) !important; border-radius: 6px !important; box-shadow: none !important; padding: 4px 10px !important; min-height: 32px !important; }
.page-container { background: var(--surface-gray-1) !important; }
.screen-block { padding: 18px !important; gap: 16px !important; overflow: auto; }
.hero-row { padding: 2px 0; }

/* Cards & Painéis Frappe */
.panel-shell, .summary-tile, .kpi-compact-card, .reference-kpi-card, .alert-group-card, .ranking-table-row, .overview-item, .state-card, .executive-opportunity-card {
  background: #FFFFFF !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--ink-gray-8) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.panel-shell { padding: 16px !important; }
.panel-shell:hover, .summary-tile:hover, .kpi-compact-card:hover, .reference-kpi-card:hover {
  transform: none !important;
  border-color: var(--outline-gray-3) !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06) !important;
}
.summary-tile.danger, .summary-tile.warning { background: #FFFFFF !important; }
.summary-tile.danger { border-top: 3px solid var(--red-600) !important; }
.summary-tile.warning { border-top: 3px solid var(--amber-600) !important; }
.summary-tile strong { font-size: 24px !important; font-weight: 600 !important; color: var(--ink-gray-9) !important; }
.summary-tile span { color: var(--ink-gray-6) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.summary-tile small { color: var(--ink-gray-4) !important; font-size: 11px !important; }
.executive-priority-card {
  background: #FFFFFF !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  color: var(--ink-gray-8) !important;
}
.executive-priority-card span { color: var(--ink-gray-6) !important; font-size: 12px !important; }
.executive-priority-card strong { color: var(--ink-gray-9) !important; font-size: 14px !important; }
.executive-priority-card small { color: var(--ink-gray-4) !important; }

/* KPI Cards */
.bi-kpi-icon, .reference-kpi-icon {
  width: 32px !important; height: 32px !important; border-radius: 6px !important;
  background: var(--blue-50) !important; color: var(--blue-700) !important;
  font-weight: 600; font-size: 14px !important;
}
.reference-kpi-card, .kpi-compact-card { min-height: 120px !important; padding: 16px !important; border-radius: 8px !important; }
.reference-kpi-card strong, .kpi-compact-card strong { font-size: 22px !important; font-weight: 600 !important; color: var(--ink-gray-9) !important; }
.reference-kpi-card p, .kpi-compact-card p { color: var(--ink-gray-6) !important; font-size: 12px !important; }
.kpi-card-header span, .bi-kpi-title span:last-child { color: var(--ink-gray-6) !important; font-size: 12px !important; font-weight: 600 !important; }
.sparkline-row.subtle span { background: var(--blue-500) !important; }
.text-success { color: var(--green-600) !important; }
.text-warning { color: var(--amber-600) !important; }
.text-danger, .negative { color: var(--red-600) !important; }

/* Botões Frappe */
.primary-btn, .outline-btn, .tab, .small-btn, .icon-btn, .theme-toggle-btn {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
}
.primary-btn {
  background: var(--gray-900) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--gray-900) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}
.primary-btn:hover { background: var(--gray-800) !important; border-color: var(--gray-800) !important; transform: none !important; box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important; }
.outline-btn, .tab, .icon-btn, .theme-toggle-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--outline-gray-2) !important;
  color: var(--ink-gray-8) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.outline-btn:hover, .tab:hover, .icon-btn:hover {
  background: var(--surface-gray-2) !important;
  border-color: var(--outline-gray-3) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Inputs, Selects & Toolbars */
input, select, .input-like, .search-shell {
  background: var(--surface-gray-2) !important;
  color: var(--ink-gray-8) !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 6px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
textarea {
  background: var(--surface-gray-2) !important;
  color: var(--ink-gray-8) !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 6px !important;
  min-height: 80px;
  padding: 8px 10px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  resize: vertical;
}
input:focus, select:focus, textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--outline-gray-4) !important;
  box-shadow: 0 0 0 2px var(--surface-gray-3) !important;
}

/* Editor de Mensagem de Cobrança com Altura Livre e Redimensionável */
.cobranca-template-editor,
textarea.cobranca-template-editor,
.cobranca-cron-modal textarea {
  min-height: 200px !important;
  height: 220px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #64748B !important;
  box-sizing: border-box !important;
}

.cobranca-cron-modal.is-expanded textarea.cobranca-template-editor,
.cobranca-modal-expanded textarea.cobranca-template-editor {
  min-height: 340px !important;
  height: 340px !important;
}
.toolbar-grid.refined, .billing-filters-grid, .campaign-dashboard-filters, .refined-schedule {
  background: #FFFFFF !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}

/* Abas da régua: rolagem horizontal no mobile sem quebrar rótulos */
.cobranca-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--nv-border, var(--outline-gray-2));
  margin-bottom: 20px;
  padding: 4px 8px 0;
  background: var(--nv-surface, #fff);
  border-radius: 8px 8px 0 0;
  scrollbar-width: thin;
  scrollbar-color: var(--nv-border-strong, var(--outline-gray-2)) transparent;
}
.cobranca-tabs::-webkit-scrollbar { height: 6px; }
.cobranca-tabs::-webkit-scrollbar-thumb {
  background: var(--nv-border-strong, var(--outline-gray-2));
  border-radius: 999px;
}
.cobranca-tabs::-webkit-scrollbar-track { background: transparent; }
.cobranca-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-gray-5);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.cobranca-tab:hover { background: var(--nv-surface-subtle); color: var(--nv-text); }
.cobranca-tab.active { border-bottom-color: var(--nv-blue); color: var(--nv-blue); font-weight: 700; }
.cobranca-tab:focus-visible { outline: var(--nv-focus-outline); outline-offset: -2px; }
@media (max-width: 700px) {
  .cobranca-tabs { margin-inline: -4px; padding-inline: 4px; }
  .cobranca-tab { padding-inline: 14px; font-size: 13px; }
}

/* Respeita preferências de movimento sem alterar a interação das abas. */
@media (prefers-reduced-motion: reduce) {
  .cobranca-tab { transition: none; }
}

/* Mantém contraste e indicação de estado em modos de alto contraste do sistema. */
@media (forced-colors: active) {
  .cobranca-tabs { border-bottom-color: CanvasText; }
  .cobranca-tab { color: ButtonText; }
  .cobranca-tab.active { border-bottom-color: Highlight; color: Highlight; }
  .cobranca-tab:hover { background: ButtonFace; color: ButtonText; }
  .cobranca-tab:focus-visible { outline: 2px solid Highlight; }
}

/* Tabelas Frappe */
.refined-wrap, .table-wrap {
  background: #FFFFFF !important;
  border: 1px solid var(--outline-gray-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.modern-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-gray-1) !important;
  color: var(--ink-gray-6) !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 1px solid var(--outline-gray-2) !important;
  padding: 8px 12px !important;
}
.modern-table td {
  color: var(--ink-gray-8) !important;
  border-bottom: 1px solid var(--outline-gray-1) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}
.modern-table tbody tr:nth-child(even) { background: transparent; }
.modern-table tbody tr:hover { background: var(--surface-gray-1) !important; }
.cell-title, .rank-text { color: var(--ink-gray-9) !important; font-weight: 600 !important; }
.cell-sub { color: var(--ink-gray-5) !important; font-size: 12px !important; }
.status-pill, .soft-badge, .status-chip, .severity-badge {
  border-radius: 9999px !important;
  border: 1px solid var(--outline-gray-2) !important;
  background: var(--surface-gray-1) !important;
  color: var(--ink-gray-7) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
}
html, body, #root {
  min-height: 100%;
}

.login-card,
.login-card * {
  box-sizing: border-box !important;
}

.login-page {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding:
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-top))
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-right))
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-bottom))
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-left)) !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(37, 99, 235, .22) 0, transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(14, 165, 233, .16) 0, transparent 28%),
    linear-gradient(160deg, #0f172a 0%, #1e293b 45%, #1e40af 100%) !important;
  position: relative !important;
  z-index: 1000 !important;
}

.login-card {
  width: min(460px, 100%) !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: clamp(20px, 3vw, 28px) !important;
  padding: clamp(24px, 4vw, 36px) !important;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .35) !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1001 !important;
  overflow: hidden !important;
}

.login-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px 0 auto !important;
  height: 96px !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, .08), transparent) !important;
  pointer-events: none !important;
}

@supports (min-height: 100dvh) {
  .login-page {
    min-height: 100dvh !important;
  }

  .login-card {
    max-height: calc(100dvh - 32px) !important;
  }
}

.login-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 5px !important;
  background: linear-gradient(90deg, #1E40AF, #2563EB 52%, #0EA5E9) !important;
  pointer-events: none !important;
}

.login-card .section-kicker {
  color: #1E40AF !important;
  letter-spacing: .14em !important;
  text-wrap: balance !important;
}

.login-card h1 {
  margin-block: 8px 10px !important;
  color: #0f172a !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance !important;
}

.login-card .section-subtitle {
  color: #475569 !important;
  max-width: 34ch !important;
  line-height: 1.55 !important;
  text-wrap: pretty !important;
}

.login-card .form-grid {
  gap: clamp(14px, 2vw, 18px) !important;
  position: relative !important;
  z-index: 1002 !important;
}

.login-card label {
  color: #334155 !important;
  font-weight: 700 !important;
}

.login-card input {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  pointer-events: auto !important;
  user-select: text !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1002 !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

@media (hover: hover) {
  .login-card input:not(:disabled):hover {
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .14) !important;
  }
}

.login-card input:focus {
  border-color: #1E40AF !important;
  box-shadow: 0 0 0 3px rgba(30, 64, 175, .16) !important;
}

.login-card .primary-btn {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1002 !important;
  min-height: 48px !important;
  width: 100% !important;
  box-shadow: 0 16px 34px rgba(30, 64, 175, .22) !important;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease !important;
}

@media (min-width: 900px) and (min-height: 760px) {
  .login-card {
    width: min(480px, 100%) !important;
  }

  .login-card .form-grid {
    gap: 18px !important;
  }
}

.login-card .primary-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 42px rgba(30, 64, 175, .28) !important;
  filter: saturate(1.04) !important;
}

.login-card .primary-btn:active {
  transform: translateY(0) !important;
}

.login-card input:focus-visible,
.login-card .primary-btn:focus-visible {
  outline: 3px solid rgba(14, 165, 233, .28) !important;
  outline-offset: 3px !important;
}

.login-card input::placeholder {
  color: #94a3b8 !important;
}

.login-card input::selection,
.login-card label::selection,
.login-card .section-kicker::selection,
.login-card .error-text::selection,
.login-card h1::selection,
.login-card .section-subtitle::selection {
  color: #ffffff !important;
  background: #1E40AF !important;
}

.login-card input:autofill {
  color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(30, 64, 175, .12) !important;
}

.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a !important;
  box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(30, 64, 175, .12) !important;
  caret-color: #0f172a !important;
}

.login-card .error-text {
  margin: -2px 0 2px !important;
  padding: 12px 14px !important;
  color: #991b1b !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.login-card input:disabled,
.login-card .primary-btn:disabled {
  cursor: not-allowed !important;
  opacity: .68 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Spinner visual quando o botão está disabled (= loading de submit) */
.login-card .primary-btn:disabled {
  position: relative !important;
  color: transparent !important;
}

.login-card .primary-btn:disabled::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 22px !important;
  height: 22px !important;
  margin: -11px 0 0 -11px !important;
  border: 2.5px solid rgba(255, 255, 255, .35) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: login-btn-spin 650ms linear infinite !important;
}

@keyframes login-btn-spin {
  to { transform: rotate(360deg); }
}

@media (max-height: 720px) and (min-width: 640px) {
  .login-page {
    align-items: start !important;
    padding-block: 18px !important;
  }

  .login-card {
    padding: 24px 30px !important;
  }

  .login-card h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem) !important;
  }

  .login-card .section-subtitle {
    margin-bottom: 2px !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .login-page {
    align-items: start !important;
    padding-block: 10px !important;
  }

  .login-card {
    padding: 18px 24px !important;
    border-radius: 18px !important;
  }

  .login-card::after {
    height: 56px !important;
  }

  .login-card h1 {
    margin-block: 4px 6px !important;
    font-size: clamp(1.65rem, 4vw, 2.15rem) !important;
  }

  .login-card .form-grid {
    gap: 10px !important;
  }

  .login-card .section-subtitle {
    line-height: 1.42 !important;
  }
}

@media (max-width: 520px) {
  .login-page {
    align-items: start !important;
    padding: 14px !important;
  }

  .login-card {
    max-height: calc(100vh - 28px) !important;
    border-radius: 20px !important;
    padding: 22px !important;
    box-shadow: 0 20px 54px rgba(2, 6, 23, .32) !important;
  }

  .login-card h1 {
    font-size: clamp(1.82rem, 12vw, 2.35rem) !important;
  }

  .login-card .section-subtitle {
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .login-page {
    padding: 10px !important;
  }

  .login-card {
    border-radius: 18px !important;
    padding: 18px !important;
  }

  .login-card input,
  .login-card .primary-btn {
    min-height: 46px !important;
  }

  .login-card h1,
  .login-card .section-subtitle,
  .login-card label,
  .login-card .error-text {
    overflow-wrap: anywhere !important;
  }
}

@media (prefers-contrast: more) {
  .login-card {
    border-color: #94a3b8 !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .48) !important;
  }

  .login-card input {
    border-color: #64748b !important;
  }
}

@media (forced-colors: active) {
  .login-page,
  .login-card,
  .login-card::before,
  .login-card::after {
    background: Canvas !important;
  }

  .login-card,
  .login-card input,
  .login-card .primary-btn {
    border: 1px solid ButtonText !important;
  }

  .login-card input:focus-visible,
  .login-card .primary-btn:focus-visible {
    outline: 2px solid Highlight !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-card input,
  .login-card .primary-btn {
    transition: none !important;
  }

  .login-card .primary-btn:hover,
  .login-card .primary-btn:active {
    transform: none !important;
  }

  .login-card .primary-btn:disabled::after {
    animation-duration: 1200ms !important;
  }
}

/* Design System cycle: compact safe-area polish for small-height devices */
@media (max-height: 680px) {
  .login-page {
    align-items: start !important;
  }

  .login-card {
    margin-block: 0 !important;
    padding: clamp(20px, 3.5vw, 28px) !important;
  }

  .login-card h1 {
    font-size: clamp(1.8rem, 7vw, 2.55rem) !important;
  }

  .login-card .section-subtitle {
    font-size: .95rem !important;
  }
}

@media (max-width: 420px) {
  .login-card {
    border-radius: 20px !important;
  }

  .login-card input,
  .login-card .primary-btn {
    min-height: 52px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════
   DEVOLUÇÕES REPORT - DESIGN EXECUTIVO PROFISSIONAL
   ═══════════════════════════════════════════════════════════════════ */

.de-report-root {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.25s ease-out;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 4px 32px 4px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Hero Banner ─── */
.de-hero-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  border-radius: 16px;
  background: 
    radial-gradient(ellipse at 80% 20%, rgba(225, 29, 72, 0.12), transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(37, 99, 235, 0.10), transparent 45%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
  color: #f8fafc;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-hero-info {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.de-hero-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.de-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.de-pill-oracle {
  background: rgba(225, 29, 72, 0.18);
  color: #fda4af;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.de-pill-highlight {
  background: rgba(37, 99, 235, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.de-pill-muted {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.de-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  animation: dePulse 2s infinite;
}

@keyframes dePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
}

.de-hero-info h1 {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
}

.de-hero-info p {
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  max-width: 780px;
  margin: 0;
}

.de-period-selector-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(15, 23, 42, 0.65);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.de-selector-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 700;
}

.de-selector-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.de-select-month {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 260px !important;
  height: 38px !important;
  min-height: 38px !important;
  color-scheme: dark !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}

.de-select-month:hover {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

.de-select-month:focus,
.de-select-month:active {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

.de-select-month option {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #f8fafc !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

.de-select-month option:hover,
.de-select-month option:checked {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

/* ─── Error Box ─── */
.de-error-box {
  background: #fef2f2;
  border: 1px solid #f87171;
  color: #991b1b;
  padding: 14px 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

/* ─── Master KPI Grid ─── */
.de-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  min-width: 0;
  box-sizing: border-box;
}

.de-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.de-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.de-kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.de-kpi-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #475569;
}

.de-badge-rose { background: #ffe4e6; color: #be123c; }
.de-badge-emerald { background: #d1fae5; color: #047857; }
.de-badge-green { background: #dcfce7; color: #15803d; }
.de-badge-yellow { background: #fef3c7; color: #b45309; }
.de-badge-red { background: #fee2e2; color: #b91c1c; }

.de-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.de-kpi-sub {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.de-kpi-blue { border-top: 4px solid #2563eb; }
.de-kpi-rose { border-top: 4px solid #e11d48; }
.de-kpi-amber { border-top: 4px solid #d97706; }
.de-kpi-emerald { border-top: 4px solid #059669; }
.de-kpi-cyan { border-top: 4px solid #0891b2; }
.de-kpi-purple { border-top: 4px solid #7c3aed; }

/* ─── Chart Card ─── */
.de-chart-card,
.de-breakdown-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.de-card-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-card-header-row h2 {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.de-card-header-row p {
  font-size: 13px;
  color: #64748b;
  margin: 3px 0 0 0;
}

.de-chart-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.de-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.de-legend-bar {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.de-bar-fat { background: #3b82f6; }
.de-bar-dev { background: #f43f5e; }
.de-legend-line {
  width: 16px;
  height: 3px;
  background: #d97706;
  border-radius: 2px;
}

/* ─── Visual Bar Chart ─── */
.de-visual-chart-wrap {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 20px 14px 20px;
  height: 250px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.de-bars-container {
  display: flex;
  flex: 1;
  gap: 12px;
  justify-content: space-around;
  align-items: flex-end;
  height: 100%;
  min-width: 100%;
}

.de-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
  max-width: 90px;
}

.de-chart-col:hover {
  transform: translateY(-4px);
}

.de-chart-col.selected .de-col-label strong {
  color: #2563eb;
  font-weight: 900;
}

.de-col-badge-pct {
  position: absolute;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.de-col-tracks {
  flex: 1;
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #cbd5e1;
}

.de-bar-track {
  width: 18px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: rgba(226, 232, 240, 0.4);
  border-radius: 4px 4px 0 0;
}

.de-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
}

.de-fill-fat {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
}

.de-fill-dev {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
}

.de-col-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  gap: 2px;
}

.de-col-label strong {
  font-size: 11px;
  color: #334155;
}

.de-col-label small {
  font-size: 10px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* ─── Tables ─── */
.de-responsive-table {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

.de-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.de-table th {
  background: #f8fafc;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.de-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  white-space: nowrap;
}

.de-table tbody tr:hover {
  background: #f8fafc;
}

.de-tr-highlight {
  background: #eff6ff !important;
}

.de-tr-totals {
  background: #f1f5f9;
  font-weight: 800;
}

.de-tr-totals td {
  border-top: 2px solid #cbd5e1;
  color: #0f172a;
}

.de-th-right, .de-td-right { text-align: right; }
.de-th-center, .de-td-center { text-align: center; }

.de-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.de-col-dev { color: #be123c; font-weight: 700; }
.de-col-liq { color: #047857; font-weight: 700; }

.de-pill-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.de-tag-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
}

.de-month-icon, .de-truck-icon, .de-motivo-tag {
  margin-right: 6px;
}

.de-avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #1e293b;
  font-size: 10px;
  font-weight: 800;
  margin-right: 8px;
}

.de-pill-reason {
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #475569;
}

/* ─── Share progress bar ─── */
.de-share-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.de-share-track {
  width: 60px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
}

.de-share-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 9999px;
}

.de-fill-amber { background: #f59e0b; }
.de-fill-rose { background: #f43f5e; }

/* ─── Tabs Header in Breakdown Card ─── */
.de-tabs-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-tab-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}

.de-tab-btn {
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.de-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.de-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.de-search-box {
  flex: 0 1 280px;
  min-width: 190px;
  max-width: 320px;
}

.de-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.de-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.de-td-empty {
  text-align: center;
  padding: 24px;
  color: #94a3b8;
  font-size: 13px;
}

/* ─── Visão Geral da Empresa Subtab ─── */
.de-general-tab-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-company-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-subcard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.de-subcard h3 {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.de-metric-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.de-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #475569;
}

.de-metric-row strong {
  font-size: 14px;
  color: #0f172a;
}

.de-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-ranking-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.de-ranking-pos {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #334155;
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.de-ranking-desc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.de-ranking-title {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.de-ranking-sub {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.de-ranking-val {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: 75px;
}

.de-ranking-val small {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}

.de-subcard-table-wrap {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.de-subcard-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.de-subcard-title-row h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.de-empty-note {
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 0;
  text-align: center;
}

.active-filter-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

.de-chart-loading-state {
  padding: 40px;
}

/* ─── Dark Mode Support ─── */
[data-theme='dark'] .de-subcard,
[data-theme='dark'] .de-subcard-table-wrap {
  background: #1e293b;
  border-color: #334155;
}

[data-theme='dark'] .de-subcard h3,
[data-theme='dark'] .de-subcard-title-row h4,
[data-theme='dark'] .de-metric-row strong,
[data-theme='dark'] .de-ranking-title {
  color: #f8fafc;
}

[data-theme='dark'] .de-subcard h3 {
  border-color: #334155;
}

[data-theme='dark'] .de-metric-row {
  color: #94a3b8;
}

[data-theme='dark'] .de-ranking-item {
  background: #0f172a;
  border-color: #1e293b;
}

[data-theme='dark'] .de-ranking-pos {
  background: #334155;
  color: #f1f5f9;
}

[data-theme='dark'] .de-tab-btn {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}

[data-theme='dark'] .de-tab-btn:hover {
  background: #334155;
  color: #ffffff;
}

[data-theme='dark'] .de-tab-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

[data-theme='dark'] .de-search-input {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}


/* ═══════════════════════════════════════════════════════════════════
   DEVOLUÇÕES - CONTROLES DE FILTRO DE TABELA E PERÍODO DESLIZANTE
   ═══════════════════════════════════════════════════════════════════ */

.de-chart-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.de-period-pill-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

[data-theme='dark'] .de-period-pill-toggle {
  background: rgba(15, 23, 42, 0.6);
  border-color: #334155;
}

.de-pill-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.de-pill-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .de-pill-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

.de-pill-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* Barra de Filtro Dedicada da Tabela */
.de-table-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

[data-theme='dark'] .de-table-filter-toolbar {
  background: #0f172a;
  border-color: #1e293b;
}

.de-table-filter-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.de-filter-title {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

[data-theme='dark'] .de-filter-title {
  color: #cbd5e1;
}

.de-table-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.de-pill-filter-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

[data-theme='dark'] .de-pill-filter-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.de-pill-filter-btn:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

[data-theme='dark'] .de-pill-filter-btn:hover {
  background: #334155;
  color: #ffffff;
}

.de-pill-filter-btn.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.3);
}

.de-table-filter-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.de-select-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.de-filter-inline-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

[data-theme='dark'] .de-filter-inline-label {
  color: #94a3b8;
}

.de-select-table-month {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}

[data-theme='dark'] .de-select-table-month {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

.de-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.de-table-search-input {
  min-width: 190px;
  padding: 5px 26px 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

[data-theme='dark'] .de-table-search-input {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

.de-clear-search-btn {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 11px;
}

.de-clear-search-btn:hover {
  color: #ef4444;
}

.de-reset-filter-btn {
  padding: 4px 10px;
  font-size: 11px;
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANÁLISE DIMENSIONAL REPORT - POWER BI EXECUTIVE AESTHETICS
   Palette: Deep Maroon/Burgundy (#4A0E17), Royal Blue (#0F4C81), Crisp Slate
   ══════════════════════════════════════════════════════════════════════════════ */

.dim-report-root {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
}

.dim-report-root.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f8fafc;
  padding: 18px 24px;
  overflow-y: auto;
}

/* ─── 1. TOP FILTER BAR (EXACT POWER BI CARDS LOOK) ─── */
.dim-filter-bar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}

.dim-filter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 12px;
  min-width: 130px;
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dim-filter-card:focus-within,
.dim-filter-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}

.dim-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 2px;
  display: block;
}

.dim-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.dim-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  padding-right: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.dim-select-arrow {
  position: absolute;
  right: 0;
  pointer-events: none;
  font-size: 8px;
  color: #94a3b8;
}

/* ─── 2. CONTROLS BAR: DIMENSION SELECTOR + TOOLS ─── */
.dim-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.dim-dimension-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dim-tab-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dim-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.dim-tab-btn.active {
  background: #4a0e17; /* Burgundy matching table header */
  border-color: #4a0e17;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(74, 14, 23, 0.35);
}

.dim-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dim-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.dim-search-input {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 24px 5px 10px;
  font-size: 12px;
  color: #1e293b;
  outline: none;
  width: 170px;
  transition: all 0.15s ease;
}

.dim-search-input:focus {
  border-color: #4a0e17;
  background: #ffffff;
  width: 210px;
}

.dim-clear-search {
  position: absolute;
  right: 6px;
  background: transparent;
  border: none;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
}

.dim-tool-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dim-tool-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.dim-tool-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* ─── 3. ERROR BANNER ─── */
.dim-error-banner {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dim-error-banner button {
  background: #991b1b;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

/* ─── 4. DATA TABLE (EXACT BURGUNDY HEADER & POWER BI TABLE) ─── */
.dim-table-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.dim-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a0e17;
}

.dim-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #fecaca;
  border-top-color: #4a0e17;
  border-radius: 50%;
  animation: dim-spin 0.7s linear infinite;
}

@keyframes dim-spin {
  to { transform: rotate(360deg); }
}

.dim-powerbi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

/* ─── Header: Burgundy #4A0E17 ─── */
.dim-powerbi-table thead tr {
  background: #4a0e17;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.dim-powerbi-table th {
  padding: 7px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: left;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid #33080e;
  user-select: none;
}

.dim-powerbi-table th.num {
  text-align: right;
}

.dim-powerbi-table th.dim-th-sortable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.dim-powerbi-table th.dim-th-sortable:hover {
  background: #5c121d;
}

.dim-sort-arrow {
  font-size: 9px;
  opacity: 0.9;
}

/* ─── Body Rows ─── */
.dim-powerbi-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.1s ease;
}

.dim-powerbi-table tbody tr:nth-child(even) {
  background: #fbfcfe;
}

.dim-powerbi-table tbody tr:hover {
  background: #f1f5f9;
}

.dim-powerbi-table td {
  padding: 4.5px 8px;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid #f1f5f9;
}

.dim-powerbi-table td.num {
  text-align: right;
  font-family: inherit;
}

.dim-empty-cell {
  text-align: center;
  padding: 30px !important;
  color: #64748b;
  font-style: italic;
}

/* ─── Dimension Name Column ─── */
.col-dimension {
  min-width: 170px;
  max-width: 240px;
  text-align: left !important;
  font-weight: 600;
  color: #0f172a;
}

.dim-tree-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dim-tree-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.1s ease;
}

.dim-tree-btn:hover {
  background: #4a0e17;
  color: #ffffff;
  border-color: #4a0e17;
}

.dim-tree-placeholder {
  font-size: 10px;
  color: #94a3b8;
  display: inline-block;
  width: 14px;
  text-align: center;
}

.dim-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── PILLS FOR % TENDENCIA ─── */
.col-badge {
  text-align: center !important;
  padding: 3px 6px !important;
}

.dim-pill {
  display: inline-block;
  min-width: 58px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Wine/Burgundy when < 100% (matching screenshot) */
.dim-pill.pill-burgundy {
  background: #7b1824;
}

/* Blue when >= 100% (matching screenshot) */
.dim-pill.pill-blue {
  background: #0f4c81;
}

/* ─── Positive / Negative Lacuna ─── */
.dim-negative {
  color: #1e293b;
}

.dim-positive {
  color: #0f4c81;
  font-weight: 600;
}

/* ─── Sub-Rows (Expanded Drill-down) ─── */
.dim-sub-header-row {
  background: #f1f5f9 !important;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
}

.dim-sub-th-item {
  padding: 4px 8px 4px 28px !important;
  font-size: 9.5px !important;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
}

.dim-sub-th {
  padding: 4px 8px !important;
  font-size: 9.5px !important;
  color: #64748b;
  text-align: right;
}

.dim-sub-row {
  background: #fafafa !important;
  font-size: 10.5px;
}

.dim-sub-row:hover {
  background: #f1f5f9 !important;
}

.dim-sub-name-cell {
  padding-left: 24px !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dim-sub-bullet {
  color: #94a3b8;
  font-size: 11px;
}

.dim-sub-item-text {
  color: #334155;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── 5. PINNED TOTAL FOOTER (EXACT MATCHING SCREENSHOT) ─── */
.dim-powerbi-table tfoot tr.dim-total-row {
  background: #ffffff;
  border-top: 2.5px solid #0f172a;
  border-bottom: 2px solid #0f172a;
  font-weight: 700;
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
}

.dim-powerbi-table tfoot td {
  padding: 7px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  border-right: 1px solid #e2e8f0;
}

.dim-powerbi-table tfoot td.col-dimension {
  font-size: 12px;
  text-transform: none;
}
/* ══════════════════════════════════════════════════════════════════════════════
   ANO X ANO COMPARATIVE REPORT - EXECUTIVE POWER BI AESTHETICS
   ══════════════════════════════════════════════════════════════════════════════ */

.ano-report-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
}

/* ─── 1. TOP DIMENSION SELECTOR STRIP ─── */
.ano-dimension-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ano-dimension-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 6px;
}

.ano-dimension-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ano-dimension-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ano-dimension-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}

/* ─── 2. PERIOD SELECTOR CARD ─── */
.ano-period-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ano-period-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ano-period-preset-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ano-period-preset-btn:hover {
  background: #e2e8f0;
}

.ano-period-preset-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.ano-months-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}

.ano-month-tag {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  user-select: none;
  transition: all 0.12s ease;
}

.ano-month-tag:hover {
  border-color: #94a3b8;
  color: #0f172a;
}

.ano-month-tag.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}

/* ─── 3. KPI CARDS ROW ─── */
.ano-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}

.ano-kpi-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.ano-kpi-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  margin-bottom: 4px;
}

.ano-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
}

.ano-kpi-subtitle {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ano-badge-pos {
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.ano-badge-neg {
  color: #dc2626;
  background: #fee2e2;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* ─── 4. MAIN WORKSPACE WITH TABLE AND SIDEBAR ─── */
.ano-workspace-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.ano-table-container {
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ano-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ano-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  flex: 1 1 200px;
  max-width: 380px;
}

.ano-search-box input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #1e293b;
}

.ano-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  max-height: 650px;
  overflow-y: auto;
}

.ano-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.ano-table thead th {
  background: #000000;
  color: #ffffff;
  padding: 8px 10px;
  font-weight: 700;
  text-align: right;
  border-right: 1px solid #334155;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ano-table thead th:first-child {
  text-align: left;
  border-left: none;
}

.ano-table thead th:last-child {
  border-right: none;
}

.ano-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}

.ano-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: #0f172a;
}

.ano-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.ano-table tbody tr:hover td {
  background: #f1f5f9;
}

.ano-table tfoot tr td {
  background: #ffffff;
  color: #000000;
  font-weight: 800;
  font-size: 12.5px;
  padding: 10px;
  border-top: 2px solid #0f172a;
  border-bottom: 2px solid #0f172a;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.ano-table tfoot tr td:first-child {
  text-align: left;
}

/* ─── 5. RIGHT SIDEBAR FILTERS (EXACT FROM USER PHOTO) ─── */
.ano-sidebar-filters {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ano-sidebar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ano-sidebar-card label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}

.ano-sidebar-card select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  cursor: pointer;
}

.ano-sidebar-card select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.ano-clear-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.ano-clear-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .ano-workspace-layout {
    flex-direction: column;
  }
  .ano-sidebar-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ─── 6. HIERARCHY TOGGLE GROUP (SUPERVISOR / VENDEDOR) ─── */
.ano-hierarchy-toggle-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
}

.ano-hierarchy-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.15;
}

.ano-hierarchy-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ano-hierarchy-btn.active {
  background: #ffffff;
  color: #1e3a8a;
  border-color: #3b82f6;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.18);
}

.ano-hierarchy-btn strong {
  font-size: 12px;
  font-weight: 700;
}

.ano-hierarchy-btn .sub {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

.ano-hierarchy-btn.active .sub {
  color: #2563eb;
  font-weight: 600;
}

.ano-hierarchy-btn.comp {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
}

.ano-hierarchy-btn.comp.active {
  background: #ecfdf5;
  color: #065f46;
  border-color: #10b981;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);
}

.ano-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* ─── 7. HIERARCHY TREE DRILLDOWN (+ / -) STYLES ─── */
.ano-tree-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

.ano-tree-ctrl-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ano-tree-ctrl-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.ano-tree-cell-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ano-btn-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #94a3b8;
  background: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ano-btn-tree-toggle:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.ano-btn-tree-toggle.expanded {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.ano-tree-spacer {
  width: 20px;
  height: 20px;
  display: inline-block;
  flex-shrink: 0;
}

.ano-nivel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.badge-supervisor {
  background: #0f172a;
  color: #ffffff;
}

.badge-vendedor {
  background: #2563eb;
  color: #ffffff;
}

.badge-cliente {
  background: #059669;
  color: #ffffff;
}

.ano-node-title {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.ano-node-counter {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

.ano-tree-row {
  transition: background-color 0.15s ease;
}

.ano-tree-row.row-depth-0 {
  background-color: #ffffff;
  font-weight: 600;
}

.ano-tree-row.row-depth-0:hover {
  background-color: #f8fafc;
}

.ano-tree-row.row-depth-1 {
  background-color: #f8fafc;
}

.ano-tree-row.row-depth-1:hover {
  background-color: #f1f5f9;
}

.ano-tree-row.row-depth-2 {
  background-color: #fcfdfe;
}

.ano-tree-row.row-depth-2:hover {
  background-color: #f1f5f9;
}


/* ══════════════════════════════════════════════════════════════════════════════
   HISTÓRICO DE VENDAS - POWER BI HIGH FIDELITY EXECUTIVE STYLING
   ══════════════════════════════════════════════════════════════════════════════ */

.historico-report-root {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  font-family: var(--ds-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  color: var(--ds-text-1, #111827);
  background: var(--ds-bg, #F6F8FA);
  min-height: calc(100vh - 120px);
  padding: 16px;
  box-sizing: border-box;
}

.historico-report-root.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: #F6F8FA;
  padding: 20px;
  overflow-y: auto;
}

/* ─── 1. TOPBAR POWER BI STYLE ─── */
.historico-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid var(--ds-border, #E5E7EB);
  border-radius: 10px;
  padding: 12px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.historico-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.historico-header-icon {
  font-size: 22px;
  background: #EFF6FF;
  padding: 6px 10px;
  border-radius: 8px;
  color: #2563EB;
}

.historico-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.historico-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  letter-spacing: -0.01em;
}

.historico-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
}

.historico-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.historico-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #475569;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.historico-icon-btn:hover {
  background: #F8FAFC;
  color: #0F172A;
  border-color: #CBD5E1;
}

.historico-icon-btn.is-fav {
  color: #EAB308;
  border-color: #FDE047;
  background: #FEF9C3;
}

.historico-btn-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.historico-btn-fullscreen:hover {
  background: #1E293B;
}

/* ─── 2. STRIP DE PRESETS DE PERÍODO (1 ANO, 2 ANOS, ETC.) ─── */
.historico-period-preset-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--ds-border, #E5E7EB);
  border-radius: 10px;
  padding: 8px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow-x: auto;
}

.historico-preset-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  white-space: nowrap;
}

.historico-preset-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.historico-preset-btn {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.historico-preset-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.historico-preset-btn.active {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* ─── 3. LAYOUT GRID (CARDS + FILTROS) ─── */
.historico-layout-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1200px) {
  .historico-layout-grid {
    grid-template-columns: 1fr 240px;
  }
}

@media (max-width: 900px) {
  .historico-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── 4. COLUNA DE CARDS DOS 14 INDICADORES ─── */
.historico-cards-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.historico-card {
  background: #FFFFFF;
  border: 1px solid var(--ds-border, #E5E7EB);
  border-radius: 10px;
  padding: 16px 20px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.15s ease;
}

.historico-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.historico-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.historico-card-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1E293B;
  text-transform: uppercase;
  margin: 0;
}

.historico-card-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.historico-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.historico-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.historico-legend-line {
  width: 14px;
  height: 2px;
  background: #2563EB;
  border-radius: 1px;
}

/* ─── 5. CHART WRAPPER & TIMELINE BARS ─── */
.historico-chart-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.historico-chart-timeline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 140px;
  min-width: 600px;
  padding-top: 28px;
  padding-bottom: 24px;
  position: relative;
  border-bottom: 1px solid #E2E8F0;
}

.historico-bar-col {
  flex: 1;
  min-width: 44px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.historico-bar-col:hover .historico-bar {
  filter: brightness(1.1);
  transform: scaleY(1.02);
}

.historico-bar {
  width: 100%;
  max-width: 48px;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom;
}

.historico-bar-value {
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  pointer-events: none;
}

.historico-bar-label {
  position: absolute;
  bottom: -22px;
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
}

/* Ponto flutuante da Linha % A.A */
.historico-line-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.historico-point-dot {
  width: 6px;
  height: 6px;
  background: #2563EB;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #2563EB;
}

.historico-point-label {
  font-size: 9px;
  font-weight: 700;
  color: #1D4ED8;
  background: rgba(239, 246, 255, 0.9);
  padding: 1px 3px;
  border-radius: 3px;
  margin-top: 2px;
  white-space: nowrap;
}

/* ─── 6. PAINEL DE FILTROS LATERAL (RIGHT SIDEBAR) ─── */
.historico-filters-sidebar {
  background: #FFFFFF;
  border: 1px solid var(--ds-border, #E5E7EB);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}

.historico-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.historico-filters-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0F172A;
}

.historico-filters-clear-btn {
  background: transparent;
  border: none;
  color: #2563EB;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.historico-filters-clear-btn:hover {
  background: #EFF6FF;
}

.historico-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.historico-filter-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.historico-filter-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.03em;
}

.historico-filter-count-badge {
  background: #EFF6FF;
  color: #2563EB;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid #BFDBFE;
}

.historico-select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1E293B;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.historico-select:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ─── 7. MULTI-SELECT DROPDOWN & CHIPS PARA ANO, MÊS ─── */
.historico-multiselect-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #1E293B;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.historico-multiselect-trigger:hover {
  border-color: #94A3B8;
}

.historico-multiselect-trigger.has-selection {
  border-color: #2563EB;
  background: #F8FAFC;
}

.historico-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}

.historico-trigger-icon {
  font-size: 10px;
  color: #64748B;
  margin-left: 6px;
}

/* PAINEL FLUTUANTE DE MESES */
.historico-month-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 14px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.historico-month-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #0F172A;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 8px;
}

.historico-panel-close-btn {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}

.historico-panel-close-btn:hover {
  color: #0F172A;
}

.historico-month-shortcuts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.historico-month-shortcuts button {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.historico-month-shortcuts button:hover {
  background: #EFF6FF;
  color: #2563EB;
  border-color: #BFDBFE;
}

.historico-years-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.historico-year-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  padding: 8px 10px;
}

.historico-year-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.historico-year-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1E293B;
  cursor: pointer;
}

.historico-year-checkbox-label input {
  cursor: pointer;
}

.historico-year-count {
  font-size: 10px;
  color: #64748B;
  font-weight: 600;
}

.historico-month-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.historico-month-chip {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.historico-month-chip:hover {
  border-color: #2563EB;
  color: #2563EB;
  background: #F0FDF4;
}

.historico-month-chip.active {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
}

.historico-month-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #F1F5F9;
  padding-top: 10px;
}

.historico-footer-info {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.historico-panel-confirm-btn {
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.historico-panel-confirm-btn:hover {
  background: #1E293B;
}

/* ─── 8. ESTADOS DE CARREGAMENTO E VAZIO ─── */
.historico-loading-state,
.historico-empty-state {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 60px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #64748B;
}

.historico-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E2E8F0;
  border-top-color: #2563EB;
  border-radius: 50%;
  animation: hist-spin 0.8s linear infinite;
}

@keyframes hist-spin {
  to { transform: rotate(360deg); }
}

.historico-btn-reset {
  background: #2563EB;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* ══════════════════════════════════════════════════════════════════════════════
   VISÃO GERAL REPORT - EXECUTIVE POWER BI PIXEL-PERFECT AESTHETICS
   Palette: Dark Navy Header (#0b1926), Deep Teal Table (#015b5b), Clean White Panels
   ══════════════════════════════════════════════════════════════════════════════ */

.vg-report-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
}

/* Fullscreen / Focus Mode */
.vg-report-root.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f1f5f9;
  padding: 16px;
  overflow-y: auto;
}

/* ─── 1. DARK POWER BI HEADER ─── */
.vg-header-bar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #172554 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 16px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vg-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.vg-title-group {
  display: flex;
  flex-direction: column;
}

.vg-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.vg-title-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.vg-title-sub {
  font-size: 11px;
  color: #cbd5e1;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.vg-update-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  color: #cbd5e1;
  text-transform: uppercase;
}

/* Header Controls & View Toggle */
.vg-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.vg-view-mode-group {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.vg-view-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.vg-view-btn:hover {
  color: #ffffff;
}

.vg-view-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.4);
}

.vg-action-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.18s ease;
}

.vg-action-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #38bdf8;
}

/* ─── FILTERS ROW IN HEADER ─── */
.vg-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 2px;
}

.vg-filter-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vg-filter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #cbd5e1;
  letter-spacing: 0.4px;
}

.vg-filter-select {
  background: #1e293b !important;
  background-color: #1e293b !important;
  border: 1px solid #475569 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  padding: 4px 22px 4px 8px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  outline: none !important;
  cursor: pointer !important;
  min-width: 110px !important;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  color-scheme: dark !important;
  transition: border-color 0.2s ease !important;
}

.vg-filter-select:hover, .vg-filter-select:focus {
  background: #1e293b !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.vg-filter-select option {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
}

/* ─── 2. TOP 4 MASTER KPI CARDS ─── */
.vg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 1100px) {
  .vg-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .vg-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.vg-kpi-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vg-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.vg-kpi-content {
  display: flex;
  flex-direction: column;
}

.vg-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: capitalize;
  margin-bottom: 2px;
}

.vg-kpi-value-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vg-kpi-bar {
  width: 3px;
  height: 20px;
  background: #64748b;
  border-radius: 2px;
}

.vg-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vg-kpi-sub {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 3px;
  padding-left: 8px;
}

/* KPI Circle Icons */
.vg-kpi-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vg-kpi-icon-badge svg {
  width: 17px;
  height: 17px;
}

.vg-icon-purple {
  background: #6b46c1;
  color: #ffffff;
}

.vg-icon-blue {
  background: #64748b;
  color: #ffffff;
}

.vg-icon-brown {
  background: #92400e;
  color: #ffffff;
}

.vg-icon-teal {
  background: #0f766e;
  color: #ffffff;
}

/* ─── 3. ANALYTICAL MATRIX TABLE ─── */
.vg-table-container {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Teal Header Strip & Power BI Tool icons */
.vg-table-teal-strip {
  background: #015b5b;
  color: #ffffff;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vg-table-strip-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vg-pbi-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vg-pbi-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vg-pbi-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

/* Secondary Table Toolbar */
.vg-table-toolbar {
  padding: 4px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.vg-table-search {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  min-width: 180px;
  outline: none;
}

.vg-table-search:focus {
  border-color: #015b5b;
}

.vg-table-meta-text {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

/* Table Scroll Wrapper */
.vg-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  max-height: clamp(240px, 36vh, 400px);
}

.vg-matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10.5px;
  white-space: nowrap;
}

/* Fixed Table Header */
.vg-matrix-table th {
  background: #015b5b;
  color: #ffffff;
  font-weight: 600;
  padding: 5px 6px;
  text-align: right;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  user-select: none;
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: 0.1px;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background 0.15s ease;
}

.vg-matrix-table th:hover {
  background: #026d6d;
}

.vg-matrix-table th:first-child {
  text-align: left;
  min-width: 160px;
  position: sticky;
  left: 0;
  z-index: 20;
  background: #014c4c;
}

.vg-matrix-table th.sorted {
  background: #027373;
}

/* Table Cells */
.vg-matrix-table td {
  padding: 3.5px 6px;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  text-align: right;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  background: #ffffff;
  font-size: 10.5px;
  line-height: 1.2;
}

.vg-matrix-table td:first-child {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  z-index: 5;
  background: #ffffff;
}

/* Supervisor Rows */
.vg-row-supervisor td {
  background: #ffffff;
  font-weight: 600;
}

.vg-row-supervisor:hover td {
  background: #f1f5f9;
}

.vg-row-supervisor:hover td:first-child {
  background: #f1f5f9;
}

/* Vendedor Child Rows */
.vg-row-vendedor td {
  background: #f8fafc;
  color: #475569;
  font-size: 11.5px;
}

.vg-row-vendedor td:first-child {
  padding-left: 32px;
  background: #f8fafc;
  font-weight: 500;
}

.vg-row-vendedor:hover td, .vg-row-vendedor:hover td:first-child {
  background: #edf2f7;
}

/* Expand / Collapse Icon Button */
.vg-expand-btn {
  background: transparent;
  border: 1px solid #94a3b8;
  color: #015b5b;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}

.vg-expand-btn:hover {
  background: #015b5b;
  color: #ffffff;
  border-color: #015b5b;
}

/* Electric Royal Blue Badge (Júnior Foba % TenFin 111,3%) */
.vg-badge-blue {
  background: #184cd7 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 2px;
  padding: 2px 6px;
  display: inline-block;
}

/* Consolidated Total Row */
.vg-row-total td {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-top: 2px solid #015b5b !important;
  border-bottom: 2px solid #015b5b !important;
  font-size: 11px;
  padding: 5px 6px !important;
}

.vg-row-total td:first-child {
  background: #e2e8f0 !important;
  font-weight: 800 !important;
}

/* ─── 4. BOTTOM SECTION: BAR CHART & INAD90D ─── */
.vg-bottom-grid {
  display: grid;
  grid-template-columns: 3.2fr 1fr;
  gap: 10px;
}

@media (max-width: 950px) {
  .vg-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Chart Card */
.vg-chart-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vg-card-teal-strip {
  background: #015b5b;
  color: #ffffff;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vg-chart-body {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vg-chart-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin: 0;
}

/* Chart Canvas Area */
.vg-chart-stage {
  display: flex;
  height: 115px;
  position: relative;
  margin-top: 4px;
}

.vg-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 6px;
  font-size: 8.5px;
  color: #64748b;
  font-weight: 700;
  text-align: right;
  min-width: 30px;
  user-select: none;
}

.vg-chart-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  flex: 1;
  border-bottom: 2px solid #64748b;
  padding-bottom: 2px;
  overflow-x: auto;
}

.vg-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 25px;
  flex: 1;
  height: 100%;
  justify-content: flex-end;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}

.vg-bar-col:hover {
  transform: translateY(-2px);
}

.vg-bar-label-top {
  font-size: 7.5px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.9);
  padding: 1px 2px;
  border-radius: 2px;
  margin-bottom: 2px;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.vg-bar-rect {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease;
}

.vg-bar-default {
  background: #033e3e;
}

.vg-bar-danger {
  background: #dc2626;
}

.vg-bar-primary {
  background: #184cd7;
}

.vg-bar-month {
  font-size: 9px;
  color: #0f172a;
  margin-top: 4px;
  transform: none !important;
  white-space: nowrap;
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.3px;
  line-height: 1;
}

.vg-bar-month.active-month {
  color: #0284c7;
  background: #e0f2fe;
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 900;
}

/* Right Inad90Dias Card */
.vg-inad-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vg-inad-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.vg-inad-inner {
  border-left: 3px solid #b91c1c;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vg-inad-val-main {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.vg-inad-lbl-main {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-top: 1px;
}

.vg-inad-val-sub {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.vg-inad-lbl-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-top: 1px;
}

/* ─── LOADING STATE ─── */
.vg-loading-shell {
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #64748b;
}

.vg-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e2e8f0;
  border-top-color: #015b5b;
  border-radius: 50%;
  animation: vg-spin 0.8s linear infinite;
}

@keyframes vg-spin {
  to { transform: rotate(360deg); }
}

.vg-badge-red {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   VISÃO GERAL - CONTROLE DE PERÍODO NO GRÁFICO DE FATURAMENTO
   ═══════════════════════════════════════════════════════════════════ */

.vg-chart-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vg-chart-period-toggles {
  display: flex;
  gap: 4px;
}

.vg-toggle-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vg-toggle-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.vg-toggle-btn.active {
  background: #0f766e;
  border-color: #0f766e;
  color: #ffffff !important;
}

[data-theme='dark'] .vg-toggle-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

[data-theme='dark'] .vg-toggle-btn:hover {
  background: #334155;
  color: #f8fafc;
}

[data-theme='dark'] .vg-toggle-btn.active {
  background: #14b8a6;
  border-color: #14b8a6;
  color: #042f2e !important;
  font-weight: 700;
}
/* ══════════════════════════════════════════════════════════════════════════════
   HIERARQUIA COMERCIAL REPORT - EXECUTIVE POWER BI AESTHETICS
   Palette: Deep Teal Header (#015b5b), Clean High-Contrast Matrix, Crisp Typography
   ══════════════════════════════════════════════════════════════════════════════ */

.hierarquia-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  animation: fadeIn 0.2s ease-in-out;
  color: #0f172a;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 1. HEADER & CONTROLS ─── */
.hierarquia-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hierarquia-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0284c7;
  text-transform: uppercase;
}

.modo-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.tag-venda {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.tag-carteira {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.hierarquia-title {
  margin: 4px 0 4px 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.hierarquia-subtitle {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}

.hierarquia-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

.select-custom {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.select-custom:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.input-search-hierarquia {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  width: 280px;
  outline: none;
  transition: border-color 0.15s;
}

.input-search-hierarquia:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

.input-search-hierarquia::placeholder {
  color: #94a3b8;
}

.btn-clear-search {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
}

.btn-clear-search:hover {
  color: #0f172a;
}

.btn-export-hierarquia {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-export-hierarquia:hover {
  background: #0369a1;
}

/* ─── 2. KPI CARDS ─── */
.hierarquia-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.kpi-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.kpi-card.kpi-highlight {
  border-color: #0284c7;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.kpi-card.kpi-success {
  border-color: #10b981;
}

.kpi-card.kpi-devol {
  border-color: #ef4444;
}

.kpi-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kpi-value {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.kpi-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* ─── 3. TOOLBAR DE NÍVEIS ─── */
.hierarquia-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
}

.level-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-level {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-level:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.btn-level.active-level {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.btn-level.btn-collapse {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

.btn-level.btn-collapse:hover {
  background: #ef4444;
  color: #ffffff;
}

/* ─── 4. TABELA HIERÁRQUICA TREEGRID (ALTO CONTRASTE) ─── */
.hierarquia-table-container {
  position: relative;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  max-height: 80vh;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.hierarquia-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  background: #ffffff;
}

/* Cabeçalho Teal Oficial Power BI */
.hierarquia-table thead tr.header-primary {
  background: #015b5b; /* Power BI Teal */
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.hierarquia-table th {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid #014c4c;
}

.hierarquia-table th.highlight-head {
  background: #014c4c;
  color: #5eead4 !important;
}

.col-hierarquia-head {
  min-width: 280px;
}

/* ─── 5. LINHAS POR NÍVEL HIERÁRQUICO ─── */
.hierarchy-row {
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.12s ease;
}

.hierarchy-row:hover td {
  background-color: #f1f5f9 !important;
}

/* Células Gerais */
.hierarquia-table td {
  padding: 6px 10px;
  white-space: nowrap;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
}

/* NÍVEL 0: EMPRESA */
.hierarchy-row.row-level-empresa td {
  background-color: #f8fafc;
  color: #0f172a !important;
  font-weight: 800;
}

/* NÍVEL 1: GERENTE */
.hierarchy-row.row-level-gerente td {
  background-color: #f1f5f9;
  color: #0f172a !important;
  font-weight: 800;
}

/* NÍVEL 2: SUPERVISOR (DESTAQUE NÍTIDO) */
.hierarchy-row.row-level-supervisor td {
  background-color: #ffffff;
  color: #0f172a !important;
  font-weight: 700;
  border-bottom: 1px solid #cbd5e1;
}

.hierarchy-row.row-level-supervisor .node-nome {
  color: #0f172a !important;
  font-weight: 800;
  font-size: 12.5px;
}

.hierarchy-row.row-level-supervisor .num-cell {
  color: #0f172a !important;
  font-weight: 700;
}

/* NÍVEL 3: VENDEDOR */
.hierarchy-row.row-level-vendedor td {
  background-color: #fafafa;
  color: #1e293b !important;
  font-weight: 600;
}

.hierarchy-row.row-level-vendedor .node-nome {
  color: #1e293b !important;
  font-weight: 600;
}

.hierarchy-row.row-level-vendedor .num-cell {
  color: #334155 !important;
}

/* NÍVEL 4: CLIENTE */
.hierarchy-row.row-level-cliente td {
  background-color: #ffffff;
  color: #475569 !important;
  font-size: 11.5px;
}

.hierarchy-row.row-level-cliente .node-nome {
  color: #475569 !important;
  font-weight: 500;
}

.hierarchy-row.row-level-cliente .num-cell {
  color: #64748b !important;
}

/* Conteúdo da Célula de Hierarquia */
.hierarquia-cell-content {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Botão Tree Toggle [+] e [-] */
.btn-tree-toggle {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-tree-toggle:hover {
  border-color: #0284c7;
  background: #0284c7;
  color: #ffffff;
}

.tree-leaf-spacer {
  width: 19px;
  display: inline-block;
}

/* Badges de Nível */
.nivel-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-empresa {
  background: #047857;
  color: #ffffff;
}

.badge-gerente {
  background: #1d4ed8;
  color: #ffffff;
}

.badge-supervisor {
  background: #0f766e;
  color: #ffffff;
}

.badge-vendedor {
  background: #6366f1;
  color: #ffffff;
}

.badge-cliente {
  background: #e2e8f0;
  color: #475569;
}

.node-nome {
  font-weight: inherit;
  color: #0f172a;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.num-cell {
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* Destaque Faturamento */
.highlight-fat {
  color: #0284c7 !important;
  font-weight: 800;
}

/* % TenFin Condicional */
.cell-tenfin-super {
  background-color: #1e3a8a !important; /* Azul escuro idêntico ao 114,9% do print */
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 3px;
}

.cell-tenfin-ok {
  color: #059669 !important;
  font-weight: 700;
}

.cell-tenfin-alert {
  color: #d97706 !important;
  font-weight: 700;
}

.cell-devol {
  color: #dc2626 !important;
  font-weight: 700;
}

/* ─── 6. FOOTER TOTALIZADOR DA EMPRESA ─── */
.hierarquia-table tfoot tr.footer-total-row td {
  background: #014c4c !important;
  color: #ffffff !important;
  font-weight: 800;
  padding: 9px 10px;
  font-size: 12.5px;
  border-top: 2px solid #5eead4;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.total-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5eead4 !important;
}

.hierarquia-table tfoot .highlight-fat {
  color: #5eead4 !important;
}

.hierarquia-table tfoot .cell-devol {
  color: #fca5a5 !important;
}

/* ─── 7. ESTADOS DE LOADING E ERRO ─── */
.table-loading-overlay {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #64748b;
  font-weight: 600;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #0284c7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.table-error-banner {
  padding: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  margin: 16px;
}

.table-empty-banner {
  padding: 40px;
  text-align: center;
  color: #64748b;
  font-weight: 600;
}

/* ─── 8. SUPORTE A DARK THEME EXPLICITO SE ATIVADO ─── */
[data-theme="dark"] .hierarquia-header {
  background: #1e222d;
  border-color: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .hierarquia-title {
  color: #f8fafc;
}

[data-theme="dark"] .kpi-card {
  background: #1e222d;
  border-color: #334155;
}

[data-theme="dark"] .kpi-value {
  color: #f8fafc;
}

[data-theme="dark"] .hierarquia-table-container {
  background: #1e222d;
  border-color: #334155;
}

[data-theme="dark"] .hierarquia-table {
  background: #1e222d;
}

[data-theme="dark"] .hierarquia-table td {
  color: #f8fafc !important;
  border-color: #334155;
}

[data-theme="dark"] .hierarchy-row.row-level-supervisor td {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .hierarchy-row.row-level-supervisor .node-nome {
  color: #f8fafc !important;
}

[data-theme="dark"] .hierarchy-row.row-level-supervisor .num-cell {
  color: #f8fafc !important;
}

[data-theme="dark"] .hierarchy-row.row-level-vendedor td {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .hierarchy-row.row-level-cliente td {
  background-color: #1e222d !important;
  color: #94a3b8 !important;
}
/* ══════════════════════════════════════════════════════════════════════════════
   TELEVENDAS REPORT - EXECUTIVE POWER BI AESTHETICS (IDENTICAL TO PRINT)
   Palette: Deep Teal Header (#015b5b / #014c4c), Clean High-Contrast Matrix, Tabular Nums
   ══════════════════════════════════════════════════════════════════════════════ */

.televendas-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  animation: tvFadeIn 0.2s ease-in-out;
  color: #0f172a;
  box-sizing: border-box;
}

@keyframes tvFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 1. HEADER & CONTROLS ─── */
.televendas-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  background: #ffffff;
  padding: 18px 22px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.televendas-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0284c7;
  text-transform: uppercase;
}

.modo-televendas-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.televendas-title {
  margin: 4px 0 4px 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.televendas-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: #475569;
  line-height: 1.4;
}

.televendas-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tv-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #334155;
  font-weight: 600;
}

.tv-select-custom {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.tv-select-custom:focus {
  border-color: #0284c7;
}

.tv-search-input {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  min-width: 220px;
  transition: border-color 0.15s;
}

.tv-search-input:focus {
  border-color: #0284c7;
}

.tv-btn-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.tv-btn-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.tv-btn-export {
  background: #0284c7;
  color: #ffffff;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tv-btn-export:hover {
  background: #0369a1;
}

/* ─── 2. KPI CARDS ─── */
.televendas-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.tv-kpi-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 12px 14px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tv-kpi-card.kpi-fat {
  border-color: #0284c7;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

.tv-kpi-card.kpi-comissao {
  border-color: #f97316;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.tv-kpi-card.kpi-impostos {
  border-color: #8b5cf6;
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 100%);
}

.tv-kpi-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.tv-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.tv-kpi-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* ─── 3. TOOLBAR ─── */
.televendas-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.tv-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tv-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
}

.tv-btn-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 5px 11px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.tv-btn-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.tv-btn-pill.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.tv-badge-operadores-fixos {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ─── 4. TABELA PRINCIPAL POWER BI MATRIX ─── */
.televendas-table-wrapper {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  max-width: 100%;
}

.televendas-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
}

/* Cabeçalho Oficial Deep Teal */
.televendas-table thead tr {
  background: #014c4c;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.televendas-table th {
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 2px solid #003636;
}

.televendas-table th.th-highlight {
  background: #003e3e;
  color: #5eead4 !important;
}

.televendas-table th.th-comissao {
  background: #854d0e;
  color: #fef08a !important;
}

.col-hierarquia-head {
  min-width: 290px;
  position: sticky;
  left: 0;
  background: #014c4c;
  z-index: 11;
}

/* ─── 5. LINHAS POR NÍVEL ─── */
.televendas-row {
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.12s ease;
}

.televendas-row:hover td {
  background-color: #f8fafc !important;
}

.televendas-table td {
  padding: 7px 10px;
  white-space: nowrap;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  color: #0f172a;
  vertical-align: middle;
}

/* NÍVEL 0: EMPRESA (RAIZ) */
.televendas-row.row-level-empresa td {
  background-color: #f8fafc;
  color: #0f172a !important;
  font-weight: 800;
}

.televendas-row.row-level-empresa td.col-hierarquia {
  background-color: #f8fafc;
}

/* NÍVEL 1: OPERADORA TELEVENDAS (DESTAQUE NÍTIDO) */
.televendas-row.row-level-operadora td {
  background-color: #ffffff;
  color: #0f172a !important;
  font-weight: 700;
  border-bottom: 1px solid #cbd5e1;
}

.televendas-row.row-level-operadora td.col-hierarquia {
  background-color: #ffffff;
}

.televendas-row.row-level-operadora .node-nome {
  color: #0f172a !important;
  font-weight: 800;
  font-size: 13px;
}

/* NÍVEL 2: VENDEDOR DA CARTEIRA */
.televendas-row.row-level-vendedor td {
  background-color: #fafbfc;
  color: #1e293b !important;
  font-weight: 600;
}

.televendas-row.row-level-vendedor td.col-hierarquia {
  background-color: #fafbfc;
}

.televendas-row.row-level-vendedor .node-nome {
  color: #1e293b !important;
  font-weight: 600;
}

/* Célula de Hierarquia */
.col-hierarquia {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 5;
  box-shadow: 1px 0 0 rgba(0,0,0,0.06);
}

.hierarquia-cell-content {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Botão Tree Toggle [+] e [-] */
.btn-tree-toggle {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #94a3b8;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}

.btn-tree-toggle:hover {
  border-color: #0284c7;
  background: #0284c7;
  color: #ffffff;
}

.tree-leaf-spacer {
  width: 20px;
  display: inline-block;
}

/* Badges de Nível */
.nivel-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge-empresa {
  background: #047857;
  color: #ffffff;
}

.badge-operadora {
  background: #0f766e;
  color: #ffffff;
}

.badge-vendedor {
  background: #2563eb;
  color: #ffffff;
}

.node-nome {
  color: #0f172a;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alinhamento e Tipografia Numérica */
.text-right {
  text-align: right;
}

.font-bold {
  font-weight: 700;
}

.num-cell {
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* Destaque Faturamento */
.highlight-fat {
  color: #0284c7 !important;
  font-weight: 800;
}

/* % TenFin Condicional (Azul marinho idêntico ao 100,4% do print) */
.cell-tenfin-super {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 3px;
  padding: 2px 6px;
}

.cell-tenfin-ok {
  color: #059669 !important;
  font-weight: 700;
}

.cell-tenfin-alert {
  color: #d97706 !important;
  font-weight: 700;
}

.cell-devol {
  color: #dc2626 !important;
  font-weight: 700;
}

/* Destaque Comissão Perdida */
.cell-comissao-perdida {
  color: #c2410c !important;
  font-weight: 800 !important;
  background-color: #fff7ed !important;
}

/* ─── 6. FOOTER TOTALIZADOR DA EMPRESA ─── */
.televendas-table tfoot tr.footer-total-row td {
  background: #014c4c !important;
  color: #ffffff !important;
  font-weight: 800;
  padding: 10px 10px;
  font-size: 12.5px;
  border-top: 2px solid #5eead4;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-total-row .col-hierarquia {
  background: #014c4c !important;
  color: #ffffff !important;
}

.total-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5eead4 !important;
  font-weight: 800;
}

/* ─── 7. ESTADOS DE CARREGAMENTO E ERRO ─── */
.televendas-loading-box,
.televendas-error-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: #475569;
}

.tv-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #0284c7;
  border-radius: 50%;
  animation: tvSpin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes tvSpin {
  to { transform: rotate(360deg); }
}