/* ============================================================
   Dashboard Comercial — Tema visual (replicando o mockup)
   ============================================================ */

:root {
  --sidebar-bg-1: #5B0A0A;
  --sidebar-bg-2: #3D0707;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --text: #1F2733;
  --muted: #6B7280;
  --primary: #2D4F8A;
  --positive: #1E9E5A;
  --negative: #C0392B;
  --border: #E9ECF2;

  /* Tokens de design premium */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 28px rgba(45,79,138,0.16);
  --kpi-glow: none;

  /* Paleta ACL Data — usada no portal de abertura */
  --duby-bg: #ffffff;
  --duby-principal: #1F6AAB;   /* azul médio (texto DATA da logo) */
  --duby-comp-1: #1A5790;      /* hover */
  --duby-comp-2: #14416E;      /* gradiente médio */
  --duby-tipografia: #0F2545;  /* texto principal navy */
  --duby-extra: #5DC1E8;       /* ciano do swoosh — acento */

  /* Gradiente azul ACL Data (anexo Figma) — fundo do login */
  --acl-grad-1: #30648A;
  --acl-grad-2: #5FBADD;

  /* Login dark navy (paleta do arquivo da logo ACL Data) */
  --login-bg-glow: #16315C;   /* brilho azul atrás da logo (centro) */
  --login-bg-deep: #0C1E3D;   /* navy base */
  --login-bg-edge: #081328;   /* navy nas bordas */
  --login-card:    #122A4D;   /* card um pouco mais claro que o fundo */
  --login-card-bd: rgba(255,255,255,0.10);
  --login-input:   #0E2142;   /* fundo dos inputs */
  --login-input-bd: rgba(255,255,255,0.16);
  --login-text:    #EAF1F9;   /* texto claro */
  --login-muted:   #93A4BA;   /* labels/subtítulo */
}

/* ============== DARK MODE OVERRIDES =============== */
[data-theme="dark"] {
  --bg: #0F1320;
  --card: #1A1F2E;
  --text: #D7DBE3;
  --muted: #8A91A0;
  --primary: #5B86C7;
  --border: #272D3A;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.50);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.60);
  --kpi-glow: 0 0 18px rgba(91,134,199,0.28);
}
[data-theme="dark"] .main-content {
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] #react-entry-point,
[data-theme="dark"] #_dash-app-content { background: var(--bg); color: var(--text); }
[data-theme="dark"] .panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .panel:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .page-title { color: var(--text); }
[data-theme="dark"] .page-title b { color: #FFF; }
[data-theme="dark"] .panel-title { color: var(--empresa-cor, #E0E0E0); }
[data-theme="dark"] .filter-label { color: var(--muted); }
[data-theme="dark"] .last-update { color: var(--muted); }
[data-theme="dark"] .form-label { color: #B8BCC4; }
[data-theme="dark"] .form-hint { color: #888; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-dd .Select-control,
[data-theme="dark"] .dim-dropdown .Select-control,
[data-theme="dark"] .Select.is-focused > .Select-control {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .Select-input > input { color: var(--text) !important; }
[data-theme="dark"] .Select-menu-outer {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .VirtualizedSelectOption { color: var(--text); }
[data-theme="dark"] .VirtualizedSelectFocusedOption { background: #2D3138 !important; }
[data-theme="dark"] .btn-toolbar {
  background: #262A31;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .btn-toolbar.btn-primary {
  background: var(--primary);
  color: #FFF;
}
[data-theme="dark"] .data-table { color: var(--text); }
[data-theme="dark"] .data-table th { background: #262A31; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .data-table td { border-color: var(--border); }
[data-theme="dark"] .data-table tbody tr:nth-child(odd) { background: #1B1E24; }
[data-theme="dark"] .data-table tbody tr:hover td { background: #262A31; }
[data-theme="dark"] .kpi-card {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .kpi-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .kpi-value { color: #F0F2F6; }
[data-theme="dark"] .kpi-title { color: var(--muted); }
[data-theme="dark"] .delta-label { color: #888; }
[data-theme="dark"] .dev-table thead th,
[data-theme="dark"] .conf-table thead th {
  background: var(--card);
  color: var(--empresa-cor, #E0E0E0);
  border-color: var(--border);
}
[data-theme="dark"] .dev-table tbody td,
[data-theme="dark"] .conf-table tbody td {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .dev-table tbody tr:hover td,
[data-theme="dark"] .conf-table tbody tr:hover td {
  background: #262A31;
}
[data-theme="dark"] .dev-table tfoot td { background: #262A31; }
[data-theme="dark"] .dev-table tbody tr.dev-row-selected td,
[data-theme="dark"] .conf-table tbody tr.conf-row-selected td {
  background: #232838;
}
[data-theme="dark"] .chip {
  background: #262A31;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .audit-changes {
  background: #1B1E24;
  border-left-color: var(--border);
}
[data-theme="dark"] .audit-detail-line { color: var(--text); }
[data-theme="dark"] .audit-field { color: #B8BCC4; }
[data-theme="dark"] .audit-before { background: #3a1f1f; color: #FF6E6E; }
[data-theme="dark"] .audit-after { background: #1f3a26; color: #7CD789; }
/* Compras DataTable */
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner table {
  background: var(--card);
  color: var(--text);
}
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--primary) !important;
}
[data-theme="dark"] .dash-cell {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .dash-cell.focused { background: #2D3138 !important; }
/* Botão de tema na sidebar */
.btn-theme {
  background: rgba(255,255,255,0.10);
  color: #FFF;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.btn-theme:hover { background: rgba(255,255,255,0.20); }
.user-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.user-actions .btn-logout,
.user-actions .btn-theme { flex: 1; justify-content: center; }
.app-shell.collapsed .btn-theme .menu-label,
.app-shell.collapsed .btn-logout .menu-label { display: none; }

* { box-sizing: border-box; }
html, body, #react-entry-point, #_dash-app-content {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============== LAYOUT ROOT =============== */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.main-content {
  flex: 1;
  min-width: 0;
  padding: 18px 24px;
  margin-left: 200px;
}

/* ============== SIDEBAR =============== */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 200px;
  height: 100vh;
  background: linear-gradient(180deg, var(--sidebar-bg-1) 0%, var(--sidebar-bg-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 0;
  box-shadow: 2px 0 6px rgba(0,0,0,0.08);
  z-index: 10;
  transition: width 0.06s ease-out;
}
.main-content { transition: margin-left 0.06s ease-out; }
.logo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
  gap: 6px;
}
.sidebar-logo {
  max-width: 140px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: max-width 0.06s ease-out, max-height 0.06s ease-out,
              padding 0.06s ease-out;
}
.sidebar-empresa-name {
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  max-width: 160px;
}
.sidebar-empresa-name:empty { display: none; }

/* Botão chevron de recolher / expandir a sidebar */
.sidebar-toggle-btn {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sidebar-bg-1);
  border: 2px solid var(--sidebar-bg-1);
  cursor: pointer;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.sidebar-toggle-btn:hover {
  background: #FFE9E9;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.sidebar-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.25);
}
.sidebar-toggle-btn i {
  transition: transform 0.12s ease;
}
.app-shell.collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg);
}
.logo-circle {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: white;
  color: var(--sidebar-bg-1);
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* .rocha-logo: legacy alias — preserva compat caso exista markup antigo;
   o componente atual usa .sidebar-logo. Mantém estilo similar ao novo. */
.rocha-logo {
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1;
}
.menu-link { text-decoration: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.menu-item.active {
  background: white;
  color: var(--sidebar-bg-1);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sidebar-bg-1);
}
.menu-icon {
  width: 20px;
  font-size: 16px;
  text-align: center;
  opacity: 0.9;
}
.menu-item.active .menu-icon { opacity: 1; }
.clear-filters {
  margin: 16px 10px 0 10px;
  font-size: 13px;
  opacity: 0.85;
}

/* ============== HEADER =============== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
/* Faixa única agrupando Ano/Mês/Dia + Empresa (pílulas) */
.filters-group {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ===== Botão "Filtros" (icon-only, na toolbar ao lado do Atualizar) ===== */
.filters-dropdown { position: relative; display: inline-flex; }
/* realce quando o painel está aberto (o botão herda .btn-icon) */
.filters-dropdown.open .filters-toggle-btn { filter: brightness(1.12); }

.filters-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.18), 0 2px 6px rgba(16,24,40,0.08);
  padding: 14px;
  min-width: 248px;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.filters-dropdown.open .filters-panel { display: flex; }
/* setinha premium apontando para o botão */
.filters-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-top: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  transform: rotate(45deg);
}
/* dentro do painel: filtros empilhados, compactos */
.filters-panel .filters-row { flex-direction: column; align-items: stretch; gap: 10px; }
.filters-panel .filter-block,
.filters-panel .empresa-segmentador-wrap { width: 100%; }
.filters-panel .filter-label { margin-bottom: 3px; font-size: 10px; }
.filters-panel .Select-control { min-height: 30px !important; border-radius: 14px; }

.filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.filters-dropdown.open .filters-backdrop { display: block; }
.page-title {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
.page-title b { font-weight: 700; }

/* ===== Telas administrativas com a paleta ACL Data (navy + azul) ===== */
.admin-page {
  --empresa-cor: #0F2545;   /* títulos/cabeçalhos em navy ACL */
  --primary: #1F6AAB;       /* botões/ações/foco/edit em azul ACL */
}
.admin-page .btn-toolbar.btn-primary {
  background: var(--duby-principal);
  border-color: var(--duby-principal);
}
.admin-page .btn-toolbar.btn-primary:hover {
  background: #2A77BC;
  border-color: #2A77BC;
}
.filters-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.filter-block {
  display: flex;
  flex-direction: column;
}
.filter-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.filter-block .Select-control,
.filter-block .dash-dropdown {
  min-width: 110px;
  font-size: 13px;
}

/* ====== Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas ======
   Escopado aos filtros de período/empresa — NÃO afeta o f-dim ("FATURAMENTO
   POR") que também usa .dim-dropdown dentro de .panel-title. */
.filters-row .filter-block .Select-control,
.empresa-segmentador-wrap .Select-control {
  background: var(--empresa-cor, #1F3864) !important;
  border: 1px solid var(--empresa-cor, #1F3864) !important;
  border-radius: 18px;
  min-height: 32px;
  padding-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.filters-row .filter-block .Select-value-label,
.filters-row .filter-block .Select-placeholder,
.filters-row .filter-block .Select-input > input,
.filters-row .filter-block .Select--single > .Select-control .Select-value .Select-value-label,
.empresa-segmentador-wrap .Select-value-label,
.empresa-segmentador-wrap .Select-placeholder,
.empresa-segmentador-wrap .Select-input > input {
  color: #fff !important;
}
.filters-row .filter-block .Select-arrow,
.empresa-segmentador-wrap .Select-arrow {
  border-top-color: #fff;
}
.filters-row .filter-block .is-open .Select-arrow,
.empresa-segmentador-wrap .is-open .Select-arrow {
  border-top-color: transparent;
  border-bottom-color: #fff;
}
.filters-row .filter-block .Select-clear,
.empresa-segmentador-wrap .Select-clear {
  color: rgba(255,255,255,0.85);
}

/* ============== KPI CARDS =============== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
/* Linha com 3 cards (Compras) — sem isto os cards ficariam com 1/5 da largura. */
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.kpi-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.kpi-text { flex: 1; }
.kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--kpi-glow);
}
.kpi-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.kpi-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  margin-top: 6px;
}
.kpi-delta.positive { color: var(--positive); }
.kpi-delta.negative { color: var(--negative); }
.kpi-delta.neutral { color: var(--muted); }
.delta-pct { font-weight: 700; }
.delta-label { color: var(--muted); margin-left: 4px; }

/* Layout colunar dos KPIs (rótulo | valor anterior | %) — grid único p/ as duas
   linhas alinharem as colunas entre si. display:contents no wrapper de linha faz
   os 3 spans participarem do grid e herdarem a cor (verde alta / vermelho queda). */
.kpi-deltas.cols {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3px 10px;
  margin-top: 6px;
  font-size: 11px;
}
.kpi-delta-row { display: contents; }
.kpi-delta-row.positive { color: var(--positive); }
.kpi-delta-row.negative { color: var(--negative); }
.kpi-delta-row.neutral  { color: var(--muted); }
.kpi-deltas.cols .delta-label { color: inherit; margin-left: 0; }
.kpi-deltas.cols .delta-val { text-align: right; font-variant-numeric: tabular-nums; }
.kpi-deltas.cols .delta-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--empresa-cor, var(--primary)) 90%, #fff),
              color-mix(in srgb, var(--empresa-cor, var(--primary)) 65%, #000));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--empresa-cor, var(--primary)) 35%, transparent);
}

/* ============== PANELS / CARDS DE GRÁFICO =============== */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* ESTABILIDADE DE LAYOUT (evita "abre pequeno" / layout que pula) -------------
   Rede de segurança: todo gráfico dentro de .panel reserva altura mínima já no
   primeiro paint, então o Plotly renderiza no tamanho certo em vez de nascer
   pequeno e "abrir" quando a cascata de resize roda. Alturas inline (style=...)
   maiores continuam valendo. Sparklines ficam em .dev-kpi-card, fora daqui. */
.panel .dash-graph { min-height: 300px; }
/* Revela cada gráfico suavemente quando a query volta e ele monta (fade-in só na
   1ª montagem — o Plotly reusa o nó no auto-refresh, então NÃO re-anima e não
   "pisca" a cada atualização). */
.panel .js-plotly-plot { animation: acl-chart-in .35s ease-out both; }
@keyframes acl-chart-in { from { opacity: 0; } to { opacity: 1; } }

/* ESQUELETO (shimmer) enquanto a query carrega — no lugar do branco. Usado como
   custom_spinner do dcc.Loading (components/loading.py). Preenche o espaço já
   reservado pela altura mínima do painel. */
.acl-skel {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.04);
  background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.00) 0%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.00) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: acl-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes acl-skel-shimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
[data-theme="dark"] .acl-skel {
  background-color: rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.00) 100%);
}

/* Botão "expandir" no canto superior direito de cada panel */
.panel-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--empresa-cor, #5C0A0A);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.panel:hover .panel-expand { opacity: 0.9; }
.panel-expand:hover { background: rgba(0, 0, 0, 0.06); opacity: 1; }
[data-theme="dark"] .panel-expand { color: #E0E0E0; }
[data-theme="dark"] .panel-expand:hover { background: rgba(255, 255, 255, 0.1); }

/* Modal de apresentação (expandir gráfico) */
.zoom-wrap { display: none; }
.zoom-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.zoom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sem teto de largura: o "expandir" é pra ocupar a tela. O teto de 1400px
     deixava faixa branca dos dois lados em monitor grande (1920+). */
  width: 96vw;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 16px 20px 20px;
}
.zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zoom-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .zoom-title { color: #E0E0E0; }
.zoom-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.zoom-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .zoom-close { color: #E0E0E0; }
[data-theme="dark"] .zoom-close:hover { background: rgba(255, 255, 255, 0.12); }

/* Modebar premium dentro do modal de apresentação */
.zoom-modal .modebar {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 5px;
  box-shadow: var(--shadow-sm);
}
.zoom-modal .modebar-group { margin: 0 1px !important; }
.zoom-modal .modebar-btn svg { fill: var(--muted, #8A93A2); transition: fill 0.12s; }
.zoom-modal .modebar-btn:hover svg { fill: var(--empresa-cor, var(--primary)); }
.zoom-modal .modebar-btn.active svg { fill: var(--empresa-cor, var(--primary)); }
[data-theme="dark"] .zoom-modal .modebar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .zoom-modal .modebar-btn svg { fill: #B8C0CC; }
.panel.panel--filtering {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(31,56,100,0.18);
}
.panel:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
.panel:active,
.panel.is-clicked {
  box-shadow: 0 2px 6px rgba(31,56,100,0.18) inset, 0 6px 18px rgba(31,56,100,0.14);
  transform: translateY(0);
}
.kpi-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
/* Plotly cursor pointer nos elementos clicáveis */
.panel .js-plotly-plot .plotly .plot .barlayer .point,
.panel .js-plotly-plot .plotly .plot .surfacelayer .slice {
  cursor: pointer !important;
}
.panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--empresa-cor, #5C0A0A);
  margin-bottom: 6px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  padding-right: 30px;   /* reserva o canto p/ o botão expandir, sem sobrepor */
}
/* Ícone (i) com o significado da métrica — tooltip NATIVO via atributo `title`
   (hover). Usa o tooltip do navegador de propósito: ele é desenhado fora do
   fluxo do DOM, então nunca é cortado pelo overflow:hidden do .panel/.kpi-card
   (uma tooltip-box em CSS, posicionada dentro do painel, seria decepada perto
   das bordas — ver comentário da linha ~609). */
.info-icon {
  font-size: 11px;
  color: var(--muted);
  cursor: help;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.info-icon:hover { opacity: 1; color: var(--empresa-cor, var(--primary)); }

.panel-title .dim-dropdown {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
}

/* Seletor de métrica premium (R$ | Qtd | %) — segmented control */
.panel-title .metric-toggle { margin-left: auto; }
.metric-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  flex-shrink: 0;
}
.metric-toggle label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted, #8A93A2);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.metric-toggle label:not(:last-child) { border-right: 1px solid var(--border); }
.metric-toggle input { display: none; }
.metric-toggle label:hover { background: rgba(0, 0, 0, 0.04); }
.metric-toggle label:has(input:checked) {
  background: var(--empresa-cor, var(--primary));
  color: #fff;
}
[data-theme="dark"] .metric-toggle label:hover { background: rgba(255, 255, 255, 0.06); }

.row-2col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* Coluna de painéis empilhados dentro de uma linha do grid (ex.: as duas roscas
   do Gerencial, uma sobre a outra, ao lado do painel de grupo). */
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* Painel que ESTICA: o card é alongado pelo grid até a altura da coluna vizinha,
   e o gráfico acompanha em vez de deixar faixa branca embaixo. O min-height é
   rede de segurança — dcc.Graph sem altura definida colapsa para zero. */
.panel-fill {
  display: flex;
  flex-direction: column;
}
.panel-fill .panel-body {
  position: relative;      /* âncora do .graph-fill abaixo */
  flex: 1 1 auto;
  min-height: 460px;       /* rede: sem isto um colapso vira gráfico de altura 0 */
}
/* O dcc.Loading envolve o gráfico em dois divs SEM classe: o de fora leva
   `position:relative` INLINE. Como ele é posicionado, é ELE (não o .panel-body)
   que ancora o .graph-fill absoluto — e, tendo como único filho um elemento
   absoluto, sua altura desaba para 0. O gráfico ficava sem altura de container e
   o Plotly caía no default dele, deixando faixa branca no resto do card. Esticar
   os dois wrappers devolve a altura do .panel-body à âncora. */
.panel-fill .panel-body > div,
.panel-fill .panel-body > div > div {
  height: 100%;
}
/* O gráfico é ANCORADO nesse wrapper (já esticado acima), não encadeado por
   height:100% no próprio dcc.Graph: o Loading quebra a cadeia de percentuais. */
.panel-fill .graph-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.row-2col-eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Linha de um painel só, largura total. */
.row-1col { margin-bottom: 14px; }

/* Dois painéis de ranking lado a lado, colunas iguais (Grupo | SubGrupo etc.). */
.row-rank-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* min-width:0 — sem isso o item de grid usa a largura mínima do conteúdo e o
   par de painéis estoura a linha em nomes longos (cliente/produto). */
.row-rank-2col > .panel { min-width: 0; }
/* Abaixo de 1100px as barras horizontais não cabem em meia tela: empilha. */
@media (max-width: 1100px) {
  .row-rank-2col { grid-template-columns: 1fr; }
}

/* Três painéis lado a lado (ex.: Faturamento por Grupo/SubGrupo/Produto). */
.row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 1100px) {
  .row-3col { grid-template-columns: 1fr; }
}

/* ============== TABELA TOP VENDEDORES =============== */
.top-vendedores-table .dash-spreadsheet-container {
  border: none !important;
}
.top-vendedores-table table { border-collapse: collapse; }
.top-vendedores-table th {
  background: white !important;
  color: #555 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  border-bottom: 1px solid #DDD !important;
}
.top-vendedores-table td {
  font-size: 12px !important;
  padding: 8px 10px !important;
  color: white !important;
}
.top-vendedores-table .vend-row {
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.top-vendedores-table .vend-row:hover {
  filter: brightness(1.15);
}
.top-vendedores-table .vend-row.selected td {
  box-shadow: inset 0 0 0 2px white;
}
.top-vendedores-table .vend-row:active {
  transform: scale(0.995);
}

/* Top Produtos por filial: N tabelas lado a lado (grid-template-columns vem
   inline, com o nº de filiais em escopo). */
.top-prod-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}
.top-prod-col { min-width: 0; }
.top-prod-filial {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0 0 6px 2px;
  margin-bottom: 4px;
  border-bottom: 2px solid transparent;
}
/* Em telas estreitas as tabelas empilham (nomes de produto não cabem em 1/3). */
@media (max-width: 1100px) {
  .top-prod-grid { grid-template-columns: 1fr !important; }
}

/* ============== PLACEHOLDER =============== */
.placeholder-page {
  background: var(--card);
  border-radius: 8px;
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--border);
}
.placeholder-page h2 {
  color: #5C0A0A;
  margin-bottom: 8px;
}

/* ============== UTILS =============== */
.dim-dropdown .Select-control { border: 1px solid #DDD; min-height: 28px; }

/* ============== TOOLBAR (atualizar / limpar / timestamp) =============== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
}
/* Toggle "Por loja | Mensal" dos relatórios de pivô (Grupo/SubGrupo/Produto):
   reaproveita a pele do .metric-toggle, só alinhando à altura da toolbar. */
.view-toggle-wrap {
  display: flex;
  align-items: center;
}
.view-toggle-wrap .metric-toggle {
  margin: 0;
}
/* `hidden_columns` faz o DataTable renderizar o menu "Toggle Columns". Nesses
   relatórios as colunas ocultas são internas (marcador da linha de total e o
   valor numérico da variação, usado só para colorir), então o menu não serve
   a ninguém e ainda rouba altura da tabela. */
#grupo-table .dash-spreadsheet-menu,
#subgrupo-table .dash-spreadsheet-menu,
#produto-table .dash-spreadsheet-menu {
  display: none;
}
/* Retorno do upload de planilha (relatório Previsão). */
.upload-msg:empty { display: none; }
.upload-msg {
  margin: 6px 0 10px;
  font-size: 12px;
  border-radius: 6px;
  padding: 8px 12px;
}
.upload-msg .upload-ok {
  color: var(--positive);
}
.upload-msg .upload-erro {
  color: var(--negative);
}
#previsao-table .dash-spreadsheet-menu,
#pagamento-table .dash-spreadsheet-menu {
  display: none;
}
#previsao-table .dash-spreadsheet.dash-freeze-top,
#pagamento-table .dash-spreadsheet.dash-freeze-top {
  max-height: calc(100vh - 158px);
}
/* Compras: cabeçalho congelado ao rolar. Acima da tabela ficam o header do
   relatório e a linha de KPIs (filtros são popover, não ocupam altura).
   Sem `fixed_rows` (recursão do handleResize) — o header é fixado via
   `position: sticky`, e o rolo é o próprio contêiner do style_table.
   O dash_table NÃO usa `<thead>` real: cada linha do cabeçalho (título e a
   linha de filtro do `filter_action="native"`, que só o Compras usa) é uma
   `<table>` própria com `<th>` — por isso `thead{position:sticky}` não pega
   nada. E grudar TODO `th` (`.dash-spreadsheet-container th`) gruda a linha
   de filtro junto, sobrepondo-a na linha de título ao rolar. A fórmula certa
   é grudar só `th.dash-header` (linha de título) — a linha de filtro rola
   normalmente, sem sobrepor nada. */
#compras-table .dash-spreadsheet.dash-freeze-top,
#compras-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 240px);
}
#compras-table th.dash-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Pivôs (grupo/subgrupo/produto) e pagamento/previsao: idem compras — saíram do
   `fixed_rows` (recursão do handleResize). Como têm cabeçalho de 2 linhas
   (merge_duplicate_headers), fixa o thead inteiro em vez de th linha a linha,
   pra as duas linhas não empilharem no topo. O rolo é o style_table. */
#grupo-table thead,
#subgrupo-table thead,
#produto-table thead,
#pagamento-table thead,
#previsao-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* O dash_table embute `.dash-spreadsheet.dash-freeze-top, .dash-virtualized
   { max-height: 500px }`. O `height` do `style_table` vai no contêiner externo,
   mas quem rola é esse elemento interno — e max-height vence height. Sem
   sobrescrever aqui, a tabela trava em 500px e sobra tela em branco.
   O seletor com #id (1,2,0) já supera o do pacote (0,2,0): sem !important. */
#grupo-table .dash-spreadsheet.dash-freeze-top,
#grupo-table .dash-spreadsheet.dash-virtualized,
#subgrupo-table .dash-spreadsheet.dash-freeze-top,
#subgrupo-table .dash-spreadsheet.dash-virtualized,
#produto-table .dash-spreadsheet.dash-freeze-top,
#produto-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 118px);
}
.last-update {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ===== Lado direito do header: faixa de info (filtros ativos + atualizado) ===== */
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.header-right .toolbar { margin-left: 0; }
.header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 640px;
}
/* "Atualizado em ..." bem pequeno, na cor primária da empresa */
.header-info .last-update {
  font-size: 9.5px;
  color: var(--empresa-cor, var(--primary));
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
}

/* Barra de filtros ativos compacta + só informativa (sem remover) */
.header-info .active-filters {
  margin: 0;
  padding: 3px 8px;
  gap: 5px;
  border-radius: 999px;
}
.header-info .active-filters-label { font-size: 9.5px; margin: 0 2px 0 0; }
.header-info .chip {
  padding: 1px 9px;
  font-size: 11px;
  box-shadow: none;
}
.header-info .chip:hover { box-shadow: none; transform: none; }
.header-info .chip-label { font-size: 9.5px; }
.header-info .chip-close {   /* "×" para remover o filtro */
  display: inline-flex;
  width: 16px;
  height: 16px;
  font-size: 12px;
  margin-left: 4px;
}
.btn-toolbar {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid #DDD;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-toolbar:hover { background: #F4F6FB; border-color: #BBB; }
.btn-toolbar.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-toolbar.btn-primary:hover { background: #16294A; border-color: #16294A; }
/* Botões só com ícone (Atualizar / Limpar filtros): quadrados e centrados */
.btn-toolbar.btn-icon {
  justify-content: center;
  padding: 7px;
  width: 34px;
  height: 32px;
  font-size: 14px;
}
/* Botão de ícone primário (Atualizar) usa a cor primária do relatório/empresa */
.btn-toolbar.btn-primary.btn-icon {
  background: var(--empresa-cor, var(--primary));
  border-color: var(--empresa-cor, var(--primary));
}
.btn-toolbar.btn-primary.btn-icon:hover {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 85%, #000);
  border-color: color-mix(in srgb, var(--empresa-cor, var(--primary)) 85%, #000);
}

/* ============== ACTIVE FILTER CHIPS =============== */
/* ===== Barra de filtros ativos (premium) ===== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
}
.active-filters:empty { display: none; }
.active-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 0 2px;
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--empresa-cor, var(--primary));
  opacity: 0.85;
}
.active-filters-label::before {
  content: "\f0b0";                 /* funil (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 35%, var(--border));
  color: var(--text);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(16,24,40,0.06);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.chip:hover {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--empresa-cor, var(--primary)) 22%, transparent);
  border-color: var(--empresa-cor, var(--primary));
}
.chip-label {
  color: var(--muted);
  margin-right: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chip-value {
  font-weight: 700;
  color: var(--empresa-cor, var(--primary));
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.chip-close:hover {
  background: var(--empresa-cor, var(--primary));
  color: #fff;
}

/* ============== LOGIN PAGE — paleta ACL Data =============== */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--login-bg-glow) 0%, transparent 60%),
    linear-gradient(160deg, var(--login-bg-deep) 0%, var(--login-bg-edge) 100%);
  z-index: 100;
}
.login-card {
  background: var(--login-card);
  border: 1px solid var(--login-card-bd);
  border-top: 4px solid var(--duby-extra);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  width: 400px;
  max-width: 92vw;
  text-align: center;
}
.login-logo {
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
}
.login-logo img {
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.login-brand {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--duby-principal);
  margin: 4px 0 2px;
}
.login-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--login-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.95;
}
.login-subtitle {
  font-size: 13px;
  color: var(--login-muted);
  margin: 0 0 22px;
}
.login-form { display: flex; flex-direction: column; text-align: left; }
.login-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--login-muted);
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: 600;
}
.login-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--login-input-bd);
  border-radius: 8px;
  font-size: 14px;
  background: var(--login-input);
  color: var(--login-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input::placeholder { color: #7C8DA3; }
.login-input:focus {
  border-color: var(--duby-extra);
  box-shadow: 0 0 0 3px rgba(93,193,232,0.25);
}
.login-error {
  color: #FF7A7A;
  font-size: 12px;
  min-height: 16px;
  margin-top: 10px;
  font-weight: 600;
}
.login-button {
  margin-top: 20px;
  background: var(--duby-principal);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(31,106,171,0.30);
}
.login-button:hover {
  background: #2A77BC;
  box-shadow: 0 6px 16px rgba(31,106,171,0.45);
}
.login-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(31,106,171,0.30);
}

/* Wordmark fallback — usado se não houver imagem da logomarca */
.duby-wordmark {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1.2px;
  color: var(--duby-principal);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.duby-wordmark::after {
  content: '.';
  color: var(--duby-extra);
  margin-left: 1px;
}

/* ============== USER BOX (sidebar) =============== */
/* Região central rolável: menu ocupa o meio e empurra o rodapé p/ baixo */
.sidebar-menu-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.sidebar-menu-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 3px;
}

/* Bloco ADMIN fixado acima do rodapé (fora da área de scroll) */
.sidebar-admin {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 4px;
  margin-top: 4px;
}

/* Engrenagem ADMIN: botão compacto + popover (evita ocupar espaço fixo) */
.admin-menu-dropdown { position: relative; padding: 4px 8px; }
.admin-menu-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.admin-menu-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.admin-menu-dropdown.open .admin-menu-toggle {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.admin-menu-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  z-index: 2000;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 8px;
  display: none;
}
.admin-menu-dropdown.open .admin-menu-panel { display: block; }
.admin-menu-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  padding: 2px 8px 6px;
}
.admin-menu-panel .menu-nav { padding: 0; }
.admin-menu-panel .menu-item {
  color: var(--text, #333);
}
.admin-menu-panel .menu-item .menu-icon,
.admin-menu-panel .menu-item .menu-label { color: inherit; }
.admin-menu-panel .menu-item:hover,
.admin-menu-panel .menu-item.active {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 10%, transparent);
}
.admin-menu-backdrop {
  display: none;
}
.admin-menu-dropdown.open .admin-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}
.app-shell.collapsed .admin-menu-toggle { justify-content: center; padding: 10px 8px; }
.app-shell.collapsed .admin-menu-panel { left: calc(100% + 8px); bottom: 0; }

/* Rodapé: usuário logado + ações (tema / sair) na parte inferior */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
/* Indicador de status do servidor (rodapé da sidebar) */
.srv-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px rgba(30,158,90,0.25);
  flex: 0 0 auto;
}
.app-shell.collapsed .srv-status #srv-status-text,
.app-shell.collapsed .srv-status span:last-child { display: none; }
.user-box {  /* compat: caso algum lugar ainda referencie */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
}
/* Avatar com inicial, círculo colorido por papel */
.user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  background: linear-gradient(135deg, #5B86C7, #2D4F8A);  /* fallback */
}
.user-avatar.role-admin   { background: linear-gradient(135deg, #4F8DF7, #2D4F8A); }
.user-avatar.role-gerente { background: linear-gradient(135deg, #34C38F, #1E9E5A); }
.user-avatar.role-user    { background: linear-gradient(135deg, #9AA3B2, #6B7280); }
.user-meta { line-height: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge de papel (pílula colorida) */
.user-role-badge {
  align-self: flex-start;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.user-role-badge.role-admin   { background: rgba(79,141,247,0.22); color: #BBD3FB; border: 1px solid rgba(79,141,247,0.45); }
.user-role-badge.role-gerente { background: rgba(52,195,143,0.20); color: #9BE8C7; border: 1px solid rgba(52,195,143,0.45); }
.user-role-badge.role-user    { background: rgba(255,255,255,0.14); color: #D7DBE3; border: 1px solid rgba(255,255,255,0.25); }
.btn-logout {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.btn-logout:hover { background: rgba(255,255,255,0.22); }

/* ============== ADMIN MENU SECTION =============== */
.menu-section-title {
  margin: 14px 14px 4px;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* ============== FORM SUBSECTION (sub-card dentro do form-panel) =============== */
.form-subsection {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  background: #FAFBFE;
}
.form-subsection-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ============== FORMS (usuários, auditoria) =============== */
.form-panel {
  margin-bottom: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.form-input, .form-dd {
  padding: 6px 10px;
  border: 1px solid #DDD;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.form-input:focus, .form-dd:focus-within {
  border-color: var(--primary);
}
.form-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
}
.form-feedback {
  font-size: 12px;
  color: var(--primary);
  margin-left: 8px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.form-check label, .modules-check label {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
}
.modules-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  padding: 6px 0;
}
.form-daterange .DateInput_input { font-size: 12px !important; padding: 5px 8px !important; }

/* ============== DATA TABLE (genérica) =============== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  text-align: left;
  background: #F5F7FB;
  border-bottom: 1px solid #DDD;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
  font-weight: 600;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #EEE;
  vertical-align: middle;
}
.data-table tr:hover td { background: #FAFBFE; }

.btn-tab {
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.btn-tab:hover { background: #F5F7FB; border-color: #BBB; }
.btn-edit { color: var(--primary); border-color: #C9D2E3; }
.btn-edit:hover { background: #E8EDF5; }
.btn-delete { color: var(--negative); border-color: #E8C9C9; }
.btn-delete:hover { background: #FCE9E9; }

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ============== AUDIT COLORS =============== */
.audit-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EEE;
  color: #444;
}
.audit-info { background: #E8EDF5; color: var(--primary); }
.audit-warn { background: #FFF3CD; color: #8A6500; }
.audit-fail { background: #FCE9E9; color: var(--negative); }
.audit-action { display: inline-block; }
.audit-action-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  color: #999;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.audit-detail-line {
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
}
.audit-changes {
  font-size: 11px;
  background: #FAFAF8;
  border-left: 2px solid #DDD;
  padding: 4px 8px;
  border-radius: 3px;
}
.audit-change-line {
  margin: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.audit-field { color: #666; font-weight: 600; }
.audit-before {
  color: #C00000;
  background: #FCE9E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-after {
  color: #2E7D32;
  background: #E7F3E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-arrow { color: #888; margin: 0 2px; }
.audit-table td { vertical-align: top; padding: 8px 10px; }

/* ============== FILTRO DE EMPRESA (dropdown suspenso) =============== */
.empresa-segmentador-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
}
.empresa-segmentador-wrap .filter-label {
  margin: 0;
}
.empresa-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.empresa-error {
  font-size: 12px;
  color: var(--negative);
}

/* ============== UPLOAD / LOGO PREVIEW (admin de empresas) =============== */
.upload-box {
  border: 2px dashed #C9D2E3;
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
  background: #FAFBFE;
  color: #555;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin-bottom: 8px;
}
.upload-box:hover {
  background: #F1F4FA;
  border-color: var(--primary);
}
.emp-logo-preview { margin-top: 6px; }
.emp-logo-thumb-big {
  height: 56px;
  max-width: 180px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  padding: 4px;
}
.emp-logo-thumb {
  height: 28px;
  max-width: 80px;
  object-fit: contain;
  border-radius: 4px;
  background: white;
  padding: 2px;
  border: 1px solid var(--border);
}
.emp-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #DDD;
  vertical-align: middle;
}
.emp-color-input {
  border: 1px solid #DDD;
  cursor: pointer;
}

/* ============== ICON PICKER DROPDOWN (admin de relatórios) =============== */
.icon-picker-dd .Select-menu-outer { max-height: 280px; }
.icon-picker-dd .VirtualizedSelectOption {
  display: flex !important;
  align-items: center !important;
  font-size: 13px;
}
.icon-picker-dd .Select-value-label .fa-solid,
.icon-picker-dd .VirtualizedSelectOption .fa-solid {
  color: var(--primary);
}

/* ============== SIDEBAR — COLLAPSED =============== */
.app-shell.collapsed .sidebar { width: 64px; }
.app-shell.collapsed .main-content { margin-left: 64px; }
.app-shell.collapsed .sidebar-logo,
.app-shell.collapsed .rocha-logo {
  max-width: 44px; max-height: 44px; padding: 2px;
}
.app-shell.collapsed .sidebar-empresa-name,
.app-shell.collapsed .menu-label,
.app-shell.collapsed .user-meta {
  display: none;
}

/* Segmentador de empresa na sidebar: fundo cor primária da empresa,
   texto branco. Usa --sidebar-bg-1 que já vem da cor primária. */
.empresa-fixed {
  background: var(--sidebar-bg-1, #5B0A0A);
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  margin: 4px 8px 12px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.empresa-selector {
  margin: 4px 8px 12px;
}
.empresa-selector .Select-control,
.empresa-selector .Select.is-open > .Select-control,
.empresa-selector .Select.is-focused > .Select-control {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.empresa-selector .Select-value-label,
.empresa-selector .Select-placeholder,
.empresa-selector .Select-input > input {
  color: #FFFFFF !important;
}
.empresa-selector .Select-arrow { border-top-color: rgba(255,255,255,0.85); }
.empresa-selector .is-open .Select-arrow { border-bottom-color: rgba(255,255,255,0.85); }
.empresa-selector .Select-menu-outer {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectOption,
.empresa-selector .Select-option {
  background: transparent !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectFocusedOption,
.empresa-selector .Select-option.is-focused {
  background: rgba(255,255,255,0.12) !important;
}
.empresa-selector .VirtualizedSelectSelectedOption,
.empresa-selector .Select-option.is-selected {
  background: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector label { color: rgba(255,255,255,0.7) !important; }

.app-shell.collapsed .empresa-selector,
.app-shell.collapsed .empresa-fixed,
.app-shell.collapsed .empresa-none,
.app-shell.collapsed .menu-section-title,
.app-shell.collapsed .btn-logout span {
  display: none;
}
.app-shell.collapsed .menu-item {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}
.app-shell.collapsed .menu-nav { padding: 0 6px; }
.app-shell.collapsed .sidebar-footer {
  padding: 10px 4px 4px;
  align-items: center;
}
.app-shell.collapsed .user-info { justify-content: center; }
.app-shell.collapsed .user-actions { flex-direction: column; width: 100%; }
.app-shell.collapsed .btn-logout { padding: 6px 8px; }
.app-shell.collapsed .logo-wrap { margin-bottom: 16px; }

/* ============== RESPONSIVO — TABLET =============== */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .row-2col, .row-2col-eq { grid-template-columns: 1fr; }
  .filters-row { flex-wrap: wrap; gap: 8px; }
}

/* ============== RESPONSIVO — CELULAR =============== */
@media (max-width: 640px) {
  .sidebar { width: 64px; }
  .main-content { margin-left: 64px; padding: 12px 14px; }
  .sidebar-logo,
  .rocha-logo {
    max-width: 44px; max-height: 44px; padding: 2px;
  }
  .sidebar-empresa-name,
  .menu-label,
  .user-meta,
  .empresa-selector,
  .empresa-fixed,
  .empresa-none,
  .menu-section-title,
  .btn-logout span {
    display: none;
  }
  .menu-item { justify-content: center; padding: 10px 8px; gap: 0; }
  .menu-nav { padding: 0 6px; }
  .sidebar-footer { padding: 10px 4px 4px; align-items: center; }
  .user-info { justify-content: center; }
  .user-actions { flex-direction: column; width: 100%; }
  .btn-logout { padding: 6px 8px; }
  .logo-wrap { margin-bottom: 16px; }
  .kpi-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-title { font-size: 18px; }
  .toolbar { margin-left: 0; flex-wrap: wrap; }
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== DEVOLUÇÃO ================== */
.dev-kpi-row-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dev-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px 6px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-height: 110px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
  user-select: none;
}
.dev-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.dev-kpi-card.dev-kpi-selected {
  box-shadow: 0 0 0 2px #fff inset, 0 4px 12px rgba(0,0,0,0.22);
}
.dev-kpi-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.dev-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.dev-kpi-title .info-icon:hover { color: #fff; }
.dev-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dev-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-kpi-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.55);
}
.dev-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}
.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.dev-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.dev-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #F0F0F0;
}
.dev-table tbody tr:hover td {
  background: #FAFAF8;
}
.dev-table tbody tr.dev-row {
  transition: opacity 0.18s ease;
}
.dev-table tbody tr.dev-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
.dev-table tfoot td {
  padding: 8px 10px;
  border-top: 2px solid var(--empresa-cor, #1F3864);
  background: #FAFAF8;
}
@media (max-width: 900px) {
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== CONFERENTE ================== */
.conf-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.conf-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conf-page-h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--empresa-cor, #1F3864);
  letter-spacing: -0.4px;
  line-height: 1.0;
}
.conf-subtitle {
  font-size: 11px;
  color: #888;
}
.conf-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.conf-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 4px;
  padding: 6px 14px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.conf-kpi-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.conf-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.conf-kpi-title .info-icon:hover { color: #fff; }
.conf-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: 'Segoe UI Mono', 'Consolas', monospace;
}
.conf-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.conf-filters-bar .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.conf-table-wrap {
  max-height: 460px;
  overflow-y: auto;
}
.conf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.conf-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.conf-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #F0F0F0;
}
.conf-table tbody tr:hover td {
  background: #FAFAF8;
}
.conf-table tbody tr.conf-row {
  transition: opacity 0.18s ease;
}
.conf-table tbody tr.conf-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
@media (max-width: 1100px) {
  .conf-page-header { flex-direction: column; }
  .conf-kpi-row { grid-template-columns: repeat(2, 1fr); width: 100%; }
}

/* ============================================================
   Sino de notificações de login (sidebar, só admin)
   ============================================================ */
.notif-dropdown { position: relative; padding: 4px 8px 0; }
.notif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-toggle:hover { background: rgba(255, 255, 255, 0.22); }
.notif-dropdown.open .notif-toggle { background: rgba(255, 255, 255, 0.28); }
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: #E03131;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.notif-badge:empty { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  z-index: 2000;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 10px;
  display: none;
}
.notif-dropdown.open .notif-panel { display: block; }
.notif-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 8px;
}
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item {
  padding: 7px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, transparent);
}
.notif-item-top { display: flex; align-items: center; gap: 6px; }
.notif-item-icon { font-size: 11px; color: var(--empresa-cor, var(--primary)); }
.notif-item-user { font-weight: 600; font-size: 13px; color: var(--text, #333); }
.notif-item-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted, #8A93A2);
}
.notif-item-local { text-align: right; }
.notif-empty { font-size: 12px; color: var(--muted, #8A93A2); padding: 6px; }

/* ============================================================
   Modal de Anotações (resumo por regras + nota salva)
   ============================================================ */
.anot-wrap { display: none; }
.anot-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2100;
}
.anot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.anot-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  max-width: 760px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 18px 22px 22px;
}
.anot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.anot-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .anot-title { color: #E0E0E0; }
.anot-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.anot-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .anot-close { color: #E0E0E0; }
.anot-resumo-inner { display: flex; flex-direction: column; gap: 12px; }
.anot-sec {
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--border);
  background: var(--bg, #f6f7f9);
}
.anot-sec.anot-fortes { border-left-color: #2F9E44; background: rgba(47,158,68,0.07); }
.anot-sec.anot-fracos { border-left-color: #E03131; background: rgba(224,49,49,0.07); }
.anot-sec.anot-destaques { border-left-color: #1971C2; background: rgba(25,113,194,0.07); }
.anot-sec-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text, #333);
}
.anot-fortes .anot-sec-title { color: #2F9E44; }
.anot-fracos .anot-sec-title { color: #E03131; }
.anot-destaques .anot-sec-title { color: #1971C2; }
.anot-sec-list { margin: 0; padding-left: 20px; }
.anot-sec-list li { font-size: 13px; line-height: 1.5; color: var(--text, #333); }
[data-theme="dark"] .anot-sec-list li { color: #D8DEE6; }
.anot-empty { font-size: 13px; color: var(--muted, #8A93A2); padding: 8px 0; }
.anot-notes { margin-top: 16px; }
.anot-notes-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 6px;
}
.anot-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--card);
  color: var(--text, #333);
  box-sizing: border-box;
}
.anot-textarea:focus {
  outline: none;
  border-color: var(--empresa-cor, var(--primary));
}
.anot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.anot-feedback { font-size: 12px; color: #2F9E44; font-weight: 600; }

/* ============================================================
   Cards do relatório Vencimento (faixas de prazo a vencer)
   ============================================================ */
.venc-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}
.venc-kpi-card {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 6%, var(--card));
  border: 1px solid var(--border);
  border-left: 4px solid var(--empresa-cor, var(--primary));
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
/* Todos os cards (total + faixas) compartilham a mesma aparência. */
.venc-kpi-card.total { /* sem distinção visual — igual aos demais */ }
.venc-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.venc-kpi-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted, #8A93A2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.venc-kpi-icon { font-size: 15px; color: var(--empresa-cor, var(--primary)); }
.venc-kpi-card.alerta .venc-kpi-icon { color: #E03131; }
.venc-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #1A1A1A);
  line-height: 1.1;
}
[data-theme="dark"] .venc-kpi-value { color: #ECECEC; }
.venc-kpi-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #8A93A2);
}
@media (max-width: 1100px) {
  .venc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Módulo Finanças — lista de contas conectadas
   ============================================================ */
.fin-contas-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.fin-conta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
}
.fin-conta-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-conta-banco { font-weight: 600; font-size: 13px; color: var(--text, #333); }
.fin-conta-tipo {
  font-size: 11px; color: var(--muted, #8A93A2);
  background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px;
}
.fin-conta-saldo { font-weight: 700; font-size: 14px; color: var(--text, #1A1A1A); }
[data-theme="dark"] .fin-conta-banco,
[data-theme="dark"] .fin-conta-saldo { color: #ECECEC; }

/* Finanças — KPI cards sempre em uma única linha (larguras iguais que encolhem). */
.fin-kpi-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* ============================================================
   Finanças — limites por categoria (barras de progresso)
   ============================================================ */
.fin-limite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.fin-limite-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.fin-limite-card.estourado { border-color: #E03131; background: rgba(224,49,49,0.05); }
.fin-limite-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fin-limite-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fin-limite-nome { font-size: 12px; font-weight: 600; color: var(--text, #333);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-limite-tag { margin-left: auto; font-size: 10px; font-weight: 700;
                  color: #C00000; text-transform: uppercase; }
.fin-limite-track { height: 8px; border-radius: 6px; background: rgba(0,0,0,0.08);
                    overflow: hidden; }
.fin-limite-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.fin-limite-sub { margin-top: 6px; font-size: 11px; color: var(--muted, #8A93A2); }
[data-theme="dark"] .fin-limite-nome { color: #ECECEC; }

/* ============================================================
   Finanças — modal "Gerenciar Categorias"
   ============================================================ */
.fin-cat-wrap { display: none; }
.fin-cat-wrap.open { display: block; position: fixed; inset: 0; z-index: 2100; }
.fin-cat-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
                    backdrop-filter: blur(2px); }
.fin-cat-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92vw; max-width: 640px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  padding: 18px 22px 22px;
}
.fin-cat-modal-head { display: flex; align-items: center; justify-content: space-between;
                      margin-bottom: 14px; }
.fin-cat-title { font-weight: 700; font-size: 16px; color: var(--empresa-cor, #2D4F8A); }
[data-theme="dark"] .fin-cat-title { color: #E0E0E0; }
.fin-cat-close { border: none; background: transparent; font-size: 20px; width: 34px;
                 height: 34px; border-radius: 8px; cursor: pointer; color: var(--text, #333); }
.fin-cat-close:hover { background: rgba(0,0,0,0.08); }
.fin-cat-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                margin-bottom: 14px; }
.fin-cat-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
               border-radius: 8px; border: 1px solid var(--border);
               background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 4%, var(--card)); }
.fin-cat-swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; }
.fin-cat-nome { font-weight: 600; font-size: 13px; color: var(--text, #333); flex: 1;
                min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cat-limite { font-size: 12px; color: var(--muted, #8A93A2); }
.fin-cat-actions { display: flex; gap: 6px; }

/* ============================================================
   Loader da marca ACL — overlay do dcc.Loading no page-content
   (aparece na transição login→dashboard e em recargas de página)
   ============================================================ */
@keyframes acl-spin { to { transform: rotate(360deg); } }
@keyframes acl-fade { from { opacity: 0; } to { opacity: 1; } }

.acl-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  animation: acl-fade 0.2s ease-out;
}
[data-theme="dark"] .acl-loader {
  background: rgba(15, 19, 32, 0.55);
}
.acl-loader-badge {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acl-loader-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* leve pulsar pra dar vida sem distrair */
  animation: acl-fade 0.6s ease-in-out alternate infinite;
}
.acl-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--border, #E9ECF2);
  border-top-color: var(--primary, #2D4F8A);
  border-right-color: var(--primary, #2D4F8A);
  animation: acl-spin 0.9s linear infinite;
}
.acl-loader-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted, #6B7280);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .acl-loader-ring {
  border-color: #272D3A;
  border-top-color: var(--primary, #5B86C7);
  border-right-color: var(--primary, #5B86C7);
}

/* ============================================================
   Lista rolável do painel "FATURAMENTO POR:" (Grupo/SubGrupo/Produto)
   Mostra TODAS as barras; a figura cresce e rola dentro deste container,
   que mantém a mesma altura visível do gráfico original (320px).
   ============================================================ */
.ranking-scroll {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.ranking-scroll::-webkit-scrollbar { width: 8px; }
.ranking-scroll::-webkit-scrollbar-track { background: transparent; }
.ranking-scroll::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.ranking-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted, #9AA3B2); }
.ranking-scroll { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }

/* ============================================================
   Popover "Colunas" (Compras) — painel um pouco mais largo p/ caber
   os chips das colunas selecionadas.
   ============================================================ */
#compras-cols-filters-dropdown .filters-panel { min-width: 340px; }

/* ---- Loader de boot: logomarca girando, SÓ na tela de login (overlay #acl-boot) ---- */
/* O overlay e o controle de exibição vêm do index_string (app.py). */
#acl-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: var(--bg, #F6F7FB);
  transition: opacity .35s ease;
}
#acl-boot.show { display: flex; }
#acl-boot.hide { opacity: 0; }
#acl-boot img {
  width: 180px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
@keyframes acl-logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Pulse "respiração" da logomarca ACL nos loaders (boot + troca de menu). */
@keyframes acl-mark-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.55; }
  50%      { transform: scale(1);    opacity: 1; }
}

/* ---- Loader de TROCA DE MENU: logomarca ACL pulsando sobre backdrop leve ---- */
/* Exibição controlada por clientside callbacks (app.py, #acl-nav). */
.acl-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  background: rgba(246, 247, 251, 0.72);
  background: color-mix(in srgb, var(--bg, #F6F7FB) 72%, transparent);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity .28s ease;
}
.acl-nav.show { display: flex; }
.acl-nav.hide { opacity: 0; }
.acl-nav img {
  width: 150px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
/* No tema escuro o navy da marca fica invisível: clareia para um azul legível. */
[data-theme="dark"] .acl-nav { background: rgba(15, 19, 32, 0.78); }
[data-theme="dark"] .acl-nav img { filter: brightness(2.6) saturate(1.15); }


/* ============================================================
   SLICER (components/slicer.py) — busca + "Selecionar tudo" + checkboxes.
   Usado no filtro PRODUTO de Compras (alta cardinalidade: ~9 mil itens).
   ============================================================ */
.slicer {
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 6px;
  background: var(--card, #fff);
  overflow: hidden;
}
.slicer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #E5E5E5);
}
.slicer-search i {
  color: var(--empresa-cor, #4B3FBB);
  font-size: 12px;
}
.slicer-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text, #1F2333);
}
.slicer-search-input::placeholder { color: var(--muted, #9AA3B2); }

/* "Selecionar tudo" fica fixo no topo, separado da lista rolável. */
.slicer-all {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border, #E5E5E5);
  font-weight: 600;
}
.slicer-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 10px 6px;
}
.slicer-all label,
.slicer-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  /* nomes longos de produto não podem alargar o popover */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slicer-list label:hover { color: var(--empresa-cor, #4B3FBB); }
.slicer-all input[type="checkbox"],
.slicer-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  accent-color: var(--empresa-cor, #4B3FBB);
  cursor: pointer;
}
.slicer-hint {
  padding: 5px 10px;
  border-top: 1px solid var(--border, #E5E5E5);
  font-size: 11px;
  color: var(--muted, #9AA3B2);
}
.slicer-hint:empty { display: none; }
.slicer-list::-webkit-scrollbar { width: 8px; }
.slicer-list::-webkit-scrollbar-track { background: transparent; }
.slicer-list::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.slicer-list { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }

/* ============================================================
   SEGMENTADOR (components/segmentador.py) — cabeçalho colapsado + "Selecionar
   tudo" + checkboxes. Usado no MÊS do Comercial (lista curta e fixa).
   Reaproveita .slicer-all/.slicer-list para a pele dos checkboxes.
   A lista abre INLINE (não é position:absolute): o .filters-panel que hospeda
   isto tem overflow-y:auto e deceparia um popover absoluto.
   ============================================================ */
/* O cabeçalho é a MESMA pílula preenchida dos segmentadores de Ano/Dia/Filial
   (ver "Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas" acima) —
   aqui à mão, porque aquelas regras miram o .Select-control do dcc.Dropdown. */
.seg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--empresa-cor, #1F3864);
  border-radius: 18px;
  background: var(--empresa-cor, #1F3864);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font-family: inherit;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.seg-head-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-chev {
  flex: 0 0 auto;
  font-size: 10px;
  color: #fff;
  transition: transform .15s;
}
.seg.open .seg-chev { transform: rotate(180deg); }
/* Lista: card branco logo abaixo da pílula. */
.seg-body {
  display: none;
  margin-top: 6px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  background: var(--card, #fff);
  overflow: hidden;
}
.seg.open .seg-body { display: block; }
/* 12 meses cabem sem rolar; acima disso rola dentro do próprio segmentador. */
.seg .seg-list { max-height: 320px; }

/* ---------- PREVISÃO — grade de lançamento manual ----------
   O menu do dropdown das células (Loja/Grupo/Centro/Mês) é desenhado DENTRO da
   tabela, então todo ancestral com `overflow: hidden|auto` o decepa — era por
   isso que a célula parecia vazia e sem opções. O .panel corta por padrão
   (linha 609); aqui o card precisa deixar o menu escapar. */
.previsao-edit-panel { overflow: visible; }
.previsao-edit-panel .dash-spreadsheet-container,
.previsao-edit-panel .dash-spreadsheet-inner,
.previsao-edit-panel .dash-spreadsheet { overflow: visible !important; }
/* O menu abre por cima das linhas de baixo, não empurrando a tabela. */
.previsao-edit-panel .Select-menu-outer {
  display: block !important;
  z-index: 60;
  max-height: 260px;
}
.previsao-edit-panel .Select-menu { max-height: 258px; }
/* Célula de valor: digitação livre, alinhada à direita como número. */
.previsao-edit-panel .dash-cell input.dash-cell-value { text-align: right; }
/* A célula em edição vem com um vermelho translúcido do dash_table por padrão,
   que parece "campo bloqueado / com erro". Troca por um realce azul discreto —
   só sinaliza foco, sem alarmar. */
.previsao-edit-panel .dash-cell.focused,
.previsao-edit-panel td.dash-cell--selected {
  background: #EAF1FB !important;
  box-shadow: inset 0 0 0 1.5px var(--empresa-cor, #1F3864);
}
[data-theme="dark"] .previsao-edit-panel .dash-cell.focused,
[data-theme="dark"] .previsao-edit-panel td.dash-cell--selected {
  background: #2D3138 !important;
}

/* ---- Dashboard de Vendedores: card hero de faturamento/meta ---- */
.vend-kpi-wrap { display: flex; }
.vend-kpi-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-left: 6px solid var(--empresa-cor, #1F3864);
  width: 100%;
}
.vend-kpi-title {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted, #6B7280); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.vend-kpi-value {
  font-size: 30px; font-weight: 800; margin: 6px 0 10px;
  color: var(--empresa-cor, #1F3864);
}
.vend-kpi-sub { font-size: 12px; margin-top: 4px; color: var(--text, #1F2937); }
.vend-kpi-lbl { color: var(--muted, #6B7280); font-weight: 600; }
.vend-kpi-vs { font-weight: 700; }
.vend-kpi-vs.pos { color: var(--positive, #12805C); }
.vend-kpi-vs.neg { color: var(--negative, #C0202C); }
.vend-kpi-icon { font-size: 30px; color: var(--empresa-cor, #1F3864); opacity: .85; }
[data-theme="dark"] .vend-kpi-value,
[data-theme="dark"] .vend-kpi-icon { color: #9DB2E6; }

/* MÊS do Cliente e do Vendedor como BOTÕES SEGMENTADOS: um dcc.Checklist (value =
   lista de meses) estilizado como fileira de pills. Clicar no mês inclui/remove; a
   pill acende na cor da empresa quando incluída. O checkbox nativo fica escondido.
   (O Comercial usava isto e passou a usar um dcc.Dropdown multi — ver vendas.py.) */
.mes-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.mes-segmented .mes-seg-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 10px;
  border: 1px solid var(--border, #E9ECF2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.mes-segmented .mes-seg-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mes-segmented .mes-seg-label:hover {
  border-color: var(--empresa-cor, #1F3864);
}
/* Selecionado: o label cujo input (escondido) está :checked. `:has()` é
   suportado nos navegadores em uso (Chrome/Firefox recentes). */
.mes-segmented .mes-seg-label:has(.mes-seg-input:checked) {
  background: var(--empresa-cor, #1F3864);
  border-color: var(--empresa-cor, #1F3864);
  color: #fff;
}