/* =====================================================================
   Sistema Iunix — Design System
   Corporativo vibrante, mas disciplinado: a cor de destaque é sempre a
   da EMPRESA (marca do tenant, configurável em Aparência) — nunca uma
   cor fixa competindo com ela. Tipografia Inter (vendorizada localmente,
   sem CDN externo) pra reforçar o ar corporativo.
   ===================================================================== */

/* Inter, self-hosted (assets/vendor/fonts) — sem depender de CDN externo,
   mesmo padrão de vendorizar tudo localmente já usado pro Bootstrap/jQuery/
   DataTables/Chart.js neste projeto (funciona offline / PWA instalado). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../vendor/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --brand-900: #2e1065;
  --brand-700: #5b21b6;
  --brand-600: #7c3aed;
  --brand-500: #8b5cf6;
  --brand-100: #ede9fe;
  --brand-50:  #f5f3ff;
  --brand-accent: #a855f7;
  --brand-gradient: linear-gradient(135deg, #7c3aed, #5b21b6);

  /* Único par de cores fora da marca do tenant: o vermelho semântico de alerta/negativo
     nos cards de indicador (ver ".card-stat" mais abaixo). */
  --accent-negativo-from: #f43f5e; --accent-negativo-to: #9f1239;

  --ink-900: #18181b;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --ink-400: #a1a1aa;

  --surface: #ffffff;
  --surface-alt: #fafafa;
  --surface-sunken: #f2f2f3;
  --border-color: #e7e7ea;

  --danger: #b91c1c;
  --danger-50: #fef2f2;
  --success: #15803d;
  --success-50: #f0fdf4;
  --warning: #b45309;
  --warning-50: #fffbeb;
  --info: #0369a1;

  /* Sidebar: identidade fixa "corporate premium" — escura sempre, independente do tema
     claro/escuro do conteúdo (mesmo padrão de Stripe/Vercel/Linear: sidebar é marca, não tema). */
  --side-bg: #0b1220;
  --side-bg-elevated: #111a2c;
  --side-border: rgba(255,255,255,.07);
  --side-text: rgba(255,255,255,.72);
  --side-text-strong: #ffffff;
  --side-text-faint: rgba(255,255,255,.4);
  --side-hover-bg: rgba(255,255,255,.06);

  --radius-sm: .5rem;
  --radius: .75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
  --shadow-md: 0 6px 20px rgba(24, 24, 27, .08);
  --shadow-lg: 0 16px 40px rgba(24, 24, 27, .14);

  --sidebar-w: 272px;
  --topbar-h: 66px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--ink-700);
  --bs-body-bg: var(--surface-alt);
  --bs-emphasis-color: var(--ink-900);
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: var(--brand-600);
  --bs-link-hover-color: var(--brand-700);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: var(--radius);
  --bs-border-color: var(--border-color);
  --bs-success: var(--success);
  --bs-danger: var(--danger);
  --bs-warning: var(--warning);
  --bs-info: var(--info);
  --bs-secondary-color: var(--ink-500);
}

[data-bs-theme="dark"] {
  --ink-900: #f4f4f5;
  --ink-700: #d4d4d8;
  --ink-500: #a1a1aa;
  --ink-400: #71717a;

  --surface: #1c1b1f;
  --surface-alt: #131215;
  --surface-sunken: #26242a;
  --border-color: #322f36;

  --brand-100: #2e1a54;
  --brand-50: #21123d;

  --danger-50: #2a1414;
  --success-50: #0f2419;
  --warning-50: #2a1f0d;

  --bs-body-bg: var(--surface-alt);
  --bs-tertiary-bg: var(--surface-sunken);
}

/* ---- Base ---- */
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--surface-alt);
  color: var(--ink-700);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink-900); font-weight: 700; letter-spacing: -.01em; }
a { text-decoration: none; color: var(--brand-600); }
a:hover { color: var(--brand-700); }
small, .small { color: var(--ink-500); }

/* ---- Layout shell ---- */
.app-shell { min-height: 100vh; }
.app-main {
  min-width: 0;
  padding: 1.75rem clamp(1rem, 2.5vw, 2.25rem) 3rem;
}

/* Scrollbar refinado (Chromium/WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-400); border-radius: 999px; border: 2px solid var(--surface-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border: none; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }

/* ---- Topbar ---- */
.impersonation-banner {
  background: var(--ink-900); color: #fff; font-size: .82rem; padding: .5rem 1rem;
  position: sticky; top: 0; z-index: 1050;
}
.impersonation-banner strong { color: #fff; }

.topbar {
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1040;
}
.topbar .btn-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color); background: var(--surface); color: var(--ink-700);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  flex-shrink: 0;
}
.topbar .btn-icon:hover { background: var(--surface-sunken); color: var(--brand-600); border-color: var(--brand-100); }

.search-shell { position: relative; max-width: 440px; width: 100%; }
.search-shell .bi-search {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  color: var(--ink-400); pointer-events: none; font-size: .9rem;
}
.search-input {
  width: 100%; border: 1px solid var(--border-color); background: var(--surface-sunken);
  border-radius: 999px; padding: .55rem 1rem .55rem 2.4rem; font-size: .875rem; color: var(--ink-900);
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.search-input::placeholder { color: var(--ink-400); }
.search-input:focus {
  outline: none; background: var(--surface); border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
#buscaGlobalResultados {
  background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); margin-top: .4rem; overflow: hidden;
}
#buscaGlobalResultados .list-group-item { cursor: pointer; border: none; border-bottom: 1px solid var(--border-color); padding: .65rem 1rem; background: var(--surface); color: var(--ink-900); }
#buscaGlobalResultados .list-group-item:last-child { border-bottom: none; }
#buscaGlobalResultados .list-group-item:hover { background: var(--brand-50); }
#buscaGlobalResultados .list-group-item small { display:block; color: var(--ink-500); }

/* LIA — busca no menu (caixa dentro do sidebar escuro) */
.sidebar-search { padding: .5rem .9rem .8rem; }
.sidebar-search .search-input { background: rgba(255,255,255,.07); border-color: var(--side-border); color: var(--side-text-strong); }
.sidebar-search .search-input::placeholder { color: var(--side-text-faint); }
.sidebar-search .search-input:focus { background: rgba(255,255,255,.11); border-color: var(--brand-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 30%, transparent); }
.sidebar-search .bi-search { color: var(--side-text-faint); }
#buscaMenuResultados { background: var(--side-bg-elevated); border: 1px solid var(--side-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); margin-top: .35rem; overflow: hidden; max-height: 320px; overflow-y: auto; }
#buscaMenuResultados .list-group-item { cursor: pointer; border: none; border-bottom: 1px solid var(--side-border); padding: .6rem .9rem; background: var(--side-bg-elevated); color: var(--side-text); }
#buscaMenuResultados .list-group-item:last-child { border-bottom: none; }
#buscaMenuResultados .list-group-item:hover { background: var(--side-hover-bg); color: var(--side-text-strong); }
#buscaMenuResultados .list-group-item strong { color: var(--side-text-strong); }
#buscaMenuResultados .list-group-item small { display:block; color: var(--side-text-faint); }

/* LIA — widget flutuante (disponível em toda a área logada) */
.lia-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1040;
  width: 54px; height: 54px; border-radius: 999px; border: none;
  background: var(--brand-gradient); color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-600) 40%, transparent); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.lia-fab:hover { transform: scale(1.06); color: #fff; box-shadow: 0 12px 30px color-mix(in srgb, var(--brand-600) 50%, transparent); }
@media print { .lia-fab, .lia-panel { display: none !important; } }
/* No catálogo de vendas (e qualquer outra tela com o carrinho flutuante) os dois botões
   flutuantes disputavam o mesmo canto — a LIA (z-index maior) ficava por cima e escondia o
   carrinho do vendedor. Empilha a LIA acima do carrinho em vez de sobrepor. */
body:has(.carrinho-flutuante:not(.d-none)) .lia-fab { bottom: 5.75rem; }
body:has(.carrinho-flutuante:not(.d-none)) .lia-panel { bottom: 9.75rem; }

/* LIA — painel de chat ancorado no canto (não é modal: fica junto do botão, sem backdrop) */
.lia-panel {
  position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 1039;
  width: 360px; max-width: calc(100vw - 2rem); height: 480px; max-height: calc(100vh - 8rem);
  background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.lia-panel.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lia-panel-header {
  background: var(--brand-gradient); color: #fff; padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.lia-panel-title { font-weight: 700; font-size: .9rem; line-height: 1.1; }
.lia-panel-subtitle { font-size: .68rem; opacity: .85; }
.lia-panel-close {
  background: rgba(255,255,255,.18); border: none; color: #fff; width: 28px; height: 28px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.lia-panel-close:hover { background: rgba(255,255,255,.3); }
.lia-panel-body { flex-grow: 1; overflow-y: auto; padding: .85rem; display: flex; flex-direction: column; gap: .6rem; background: var(--surface-alt); }
.lia-msg { max-width: 88%; padding: .55rem .75rem; border-radius: .8rem; font-size: .82rem; line-height: 1.4; }
.lia-msg-lia { align-self: flex-start; background: var(--surface); border: 1px solid var(--border-color); border-bottom-left-radius: .2rem; color: var(--ink-900); }
.lia-msg-usuario { align-self: flex-end; background: var(--brand-600); color: #fff; border-bottom-right-radius: .2rem; }
.lia-resultados { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.lia-resultado-item {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .5rem;
  background: var(--surface-sunken); text-decoration: none; color: var(--ink-900); transition: background .12s ease;
}
.lia-resultado-item:hover { background: var(--brand-50); color: var(--brand-700); }
.lia-resultado-item i { color: var(--brand-600); font-size: .95rem; flex-shrink: 0; }
.lia-resultado-item small { display: block; color: var(--ink-500); font-size: .68rem; }
.lia-panel-footer { display: flex; gap: .5rem; padding: .65rem; border-top: 1px solid var(--border-color); flex-shrink: 0; background: var(--surface); }
.lia-panel-input { flex-grow: 1; border: 1px solid var(--border-color); border-radius: 999px; padding: .5rem .9rem; font-size: .82rem; background: var(--surface-sunken); color: var(--ink-900); }
.lia-panel-input::placeholder { color: var(--ink-400); }
.lia-panel-input:focus { outline: none; border-color: var(--brand-500); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-100); }
.lia-panel-send {
  width: 38px; height: 38px; border-radius: 999px; border: none; background: var(--brand-gradient); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: filter .12s ease;
}
.lia-panel-send:hover { filter: brightness(1.08); }
@media (max-width: 480px) {
  .lia-panel { right: .75rem; left: .75rem; width: auto; bottom: 5rem; height: min(70vh, 520px); }
  body:has(.carrinho-flutuante:not(.d-none)) .lia-panel { bottom: 9.25rem; }
}

.user-menu-trigger {
  display: flex; align-items: center; gap: .6rem; padding: .3rem .7rem .3rem .3rem;
  border-radius: 999px; border: 1px solid var(--border-color); background: var(--surface); cursor: pointer;
  flex-shrink: 0;
}
.user-menu-trigger:hover { background: var(--surface-sunken); }
.avatar-circle {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; flex-shrink: 0;
}
.user-menu-trigger .user-name { font-size: .84rem; font-weight: 600; color: var(--ink-900); line-height: 1.1; white-space: nowrap; }
.user-menu-trigger .user-role { font-size: .72rem; color: var(--ink-500); white-space: nowrap; }

#listaNotificacoes { background: var(--surface); }
#listaNotificacoes .notificacao-item { white-space: normal; border-bottom: 1px solid var(--border-color); padding: .7rem .9rem; }
#listaNotificacoes .notificacao-item:last-child { border-bottom: none; }
#listaNotificacoes .notificacao-item.nao-lida { background-color: var(--brand-50); }

/* ---- Sidebar ---- */
#sidebar.sidebar {
  width: var(--sidebar-w);
  --bs-offcanvas-width: var(--sidebar-w);
  --bs-offcanvas-bg: var(--side-bg);
  background-color: var(--side-bg) !important;
  border-right: 1px solid var(--side-border);
  flex-shrink: 0;
  color: var(--side-text);
}
@media (min-width: 768px) {
  .sidebar { position: sticky; top: 0; height: 100vh; }
  /* O próprio Bootstrap reseta .offcanvas-md .offcanvas-body nesse breakpoint (é assim que ele
     vira uma sidebar "normal" sempre visível, em vez do painel deslizante do celular) — e esse
     reset zera o flex-grow que a gente depende pra empurrar o menu até esticar e caber a área
     de rolagem. Força aqui de volta, por cima do reset, senão o menu simplesmente não tem pra
     onde rolar e os itens do fim ficam inacessíveis. */
  #sidebar.offcanvas-md {
    display: flex !important;
    flex-direction: column !important;
  }
  #sidebar.offcanvas-md .offcanvas-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}
.sidebar-brand {
  display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.15rem; height: var(--topbar-h);
  border-bottom: 1px solid var(--side-border);
}
.sidebar-brand .brand-mark {
  height: 36px; width: 36px; min-width: 36px; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--side-border); padding: 5px;
}
.brand-mark img { height: 100%; width: auto; display: block; }
.sidebar-brand .brand-text { line-height: 1.15; }
.sidebar-brand .brand-title { font-weight: 700; font-size: .95rem; color: var(--side-text-strong); letter-spacing: -.01em; }
.sidebar-brand .brand-subtitle { font-size: .68rem; color: var(--side-text-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.revenda-link {
  display: flex; align-items: center; gap: .5rem; margin: .75rem 1rem 0; padding: .55rem .75rem;
  background: rgba(124,58,237,.14); color: #c4b5fd; border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 700; text-decoration: none; border: 1px dashed rgba(196,181,253,.4);
}
.revenda-link:hover { background: rgba(124,58,237,.22); color: #ddd6fe; }

/* #sidebar é flex column (Bootstrap offcanvas) com .offcanvas-body como filho flex, que por
   sua vez tem .sidebar-nav como filho flex — os DOIS níveis precisam de min-height:0, senão
   qualquer um deles recusa encolher (min-height:auto é o padrão do flexbox) e o conteúdo
   transborda pra fora da caixa da sidebar em vez de rolar internamente. Overflow:hidden no
   próprio #sidebar garante que nada vaze visualmente por cima do conteúdo da página mesmo
   que sobre algum caso não previsto.
*/
#sidebar.sidebar { overflow: hidden; }
#sidebar .offcanvas-body { min-height: 0; }
.sidebar-nav {
  padding: .6rem .75rem 2rem;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.sidebar-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; border-top: 1px solid var(--side-border);
  padding: .85rem .65rem .5rem; margin-top: .3rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--side-text-faint); cursor: pointer;
}
.sidebar-nav > .sidebar-group-toggle:first-child { border-top: none; margin-top: 0; }
.sidebar-group-toggle:hover { color: var(--side-text); }
.sidebar-group-toggle > i { transition: transform .15s ease; font-size: .65rem; flex-shrink: 0; }
.sidebar-group-toggle.collapsed > i { transform: rotate(-90deg); }
.sidebar-group-icon { font-size: .82rem; color: var(--brand-500); }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .65rem; margin-bottom: .15rem;
  border-radius: var(--radius-sm); color: var(--side-text); font-size: .855rem; font-weight: 500;
  transition: background .12s ease, color .12s ease;
  position: relative;
}
.sidebar-nav .nav-link i { font-size: 1.02rem; width: 20px; text-align: center; color: var(--side-text-faint); flex-shrink: 0; transition: color .12s ease; }
.sidebar-nav .nav-link:hover { background: var(--side-hover-bg); color: var(--side-text-strong); }
.sidebar-nav .nav-link:hover i { color: var(--brand-500); }
.sidebar-nav .nav-link.active {
  background: var(--brand-600); color: #fff; font-weight: 700;
}
.sidebar-nav .nav-link.active i { color: #fff; }

/* ---- Page header ---- */
.page-header { margin-bottom: 1.5rem; }
.page-header h4 { font-size: 1.5rem; margin: 0; font-weight: 700; letter-spacing: -.02em; }
.page-header-desc { margin: .3rem 0 0; font-size: .87rem; color: var(--ink-500); max-width: 680px; line-height: 1.5; }
.btn-modulo-info {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; flex-shrink: 0;
  color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: .4rem .9rem; white-space: nowrap; transition: background .15s ease;
}
.btn-modulo-info:hover { background: var(--brand-100); }
.btn-modulo-info .bi-chevron-down { transition: transform .15s ease; font-size: .68rem; }
.btn-modulo-info.active .bi-chevron-down { transform: rotate(180deg); }
.page-header-funcs {
  list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .45rem 1.2rem;
}
.page-header-funcs.show { max-height: 260px; opacity: 1; margin-top: .9rem; padding: .9rem 1rem; background: var(--brand-50); border-radius: var(--radius); border: 1px solid var(--brand-100); }
.page-header-funcs li { font-size: .82rem; color: var(--ink-700); padding-left: 1.2rem; position: relative; }
.page-header-funcs li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand-600); font-weight: 700; font-size: .75rem; }

/* ---- Cards ---- */
.card {
  border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: var(--surface); transition: box-shadow .15s ease; position: relative;
}
.card-title { font-size: .92rem; font-weight: 700; color: var(--ink-900); }

/* Cards de indicador (KPI) — versão "clean/empresarial" (revisão): fundo branco sempre, a cor da
   empresa (--brand-*, per-tenant via Configurações > Aparência) vira SÓ um acento (badge do ícone +
   friso superior de 3px), não mais um preenchimento cheio — blocos de cor saturada liam mais
   "app de consumo" do que relatório corporativo. Números em tinta escura (--ink-900), não branco.
   ".negativo" segue o mesmo idioma (friso/ícone vermelho em vez de cartão inteiro escuro) — discreto
   o bastante pra não competir com a marca do tenant mesmo quando ela própria já é avermelhada. */
.card-stat {
  --stat-accent: var(--brand-600);
  border: 1px solid var(--border-color); border-top: 3px solid var(--stat-accent);
  position: relative; overflow: hidden; color: var(--ink-900); background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card-stat:hover { box-shadow: 0 8px 20px -8px rgba(16,24,40,.18); transform: translateY(-2px); }
.card-stat.negativo { --stat-accent: var(--danger); }
.card-stat.negativo .card-stat-icon { background: var(--danger-50); color: var(--danger); }
.card-stat.negativo .stat-valor { color: var(--danger); }
.card-stat .card-body { padding: 1.25rem 1.35rem; }
/* clamp() encolhe o valor em telas com muitos cards por linha (ex.: 6 no dashboard) — sem isso um
   valor grande (ex.: "R$ 556.089,28") não cabia e o navegador quebrava no meio do número, já que
   não há espaço pra quebrar depois de "R$". word-break:keep-all garante que, se ainda faltar
   espaço, quebra o valor inteiro pra outra linha, nunca no meio de um dígito. */
.card-stat .stat-valor {
  font-size: clamp(1.05rem, 1.75vw, 1.6rem); font-weight: 700; color: var(--ink-900); letter-spacing: -.02em;
  overflow-wrap: normal; word-break: keep-all;
}
.card-stat .text-muted.small { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ink-500) !important; }
.card-stat .small.text-muted { color: var(--ink-500) !important; }
.card-stat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--stat-accent) 14%, white); color: var(--stat-accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; float: right;
}

/* ---- Dashboard: cabeçalho executivo + indicadores de tendência ---- */
.dash-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding: 0 0 1.1rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--border-color);
}
.dash-header h1 { color: var(--ink-900); font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.dash-header .dash-sub { color: var(--ink-500); font-size: .82rem; text-transform: capitalize; margin-top: .15rem; }
.dash-header .dash-badge {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--surface);
  border: 1px solid var(--border-color); border-radius: 999px; padding: .35rem .8rem;
  font-size: .78rem; font-weight: 600; color: var(--ink-500);
}
.dash-header .dash-badge i { font-size: .9rem; color: var(--brand-600); }

.stat-trend {
  display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; font-weight: 700;
  padding: .12rem .5rem; border-radius: 999px; margin-top: .35rem;
}
.stat-trend.up { color: var(--success); background: var(--success-50); }
.stat-trend.down { color: var(--danger); background: var(--danger-50); }
.stat-trend.flat { color: var(--ink-500); background: var(--surface-sunken); }

.chart-card .card-title { display: flex; align-items: center; justify-content: space-between; }
.chart-card .card-title .chart-kpi { font-size: .78rem; font-weight: 700; color: var(--brand-700); }
/* Chart.js com maintainAspectRatio:false precisa de um contêiner com altura FIXA (não 100%/auto) —
   sem isso o canvas cresce, o pai cresce atrás dele, e o gráfico "desce infinitamente" a cada resize. */
.chart-wrap { position: relative; height: 260px; }
@media (max-width: 575.98px) { .chart-wrap { height: 220px; } }

/* ---- Tables ---- */
/* Rede de segurança: se mesmo assim uma tabela não couber (ex.: relatórios muito largos, 15+
   colunas), ela rola na horizontal só dentro do próprio card, nunca estoura a página. Isso é o
   último recurso — a ideia principal é caber tudo na tela sem precisar arrastar nada (ver abaixo). */
.card-body:has(> .table), .card-body:has(> .table-responsive), .card-body:has(> .dt-container),
.table-responsive, .dt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-container table.dataTable { width: 100% !important; table-layout: auto; }

.table {
  color: var(--ink-700); border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.table > thead > tr > th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 800;
  color: var(--ink-900); border-bottom: 2px solid var(--brand-100); background: var(--brand-50);
  padding: .7rem .75rem; white-space: nowrap; vertical-align: middle;
}
.table > thead > tr > th:not(:last-child) { border-right: 1px solid var(--border-color); }
[data-bs-theme="dark"] .table > thead > tr > th { background: var(--surface-sunken); border-bottom-color: var(--border-color); }
/* Célula fica numa linha só e corta com "..." quando o texto é grande demais, em vez de quebrar
   em várias linhas (deixava as linhas com alturas diferentes) ou esticar a tabela a ponto de
   precisar rolar pro lado pra ver o resto. Dado curto (número, data, valor, status) nunca bate
   nesse teto e aparece inteiro normalmente; só dado longo (nome de empresa grande, chave de nota,
   observação) é que trunca — o valor completo continua acessível abrindo o registro (a maioria
   das colunas principais já é um link) ou passando o mouse, via title. Quem realmente precisa
   mostrar o texto inteiro quebrando linha usa a classe .text-wrap na célula. */
.table > :not(caption) > * > * {
  border-bottom-color: var(--border-color); padding: .6rem .75rem; vertical-align: middle;
  white-space: normal; overflow-wrap: break-word; max-width: none;
}
/* A tabela tem que caber inteira na tela: o texto quebra em mais de uma linha em vez de cortar com "..." ou empurrar colunas
   pra fora (que exigia rolar pro lado). Só o que é curto e não deve quebrar fica numa linha: valores, situação (selo) e ações. */
.table > thead > tr > th { white-space: normal; }
/* :has(> .badge) é pra célula que É só o selo (ex.: coluna Status). Célula de nome+selo (ex.: cliente com a tag
   "banco antigo") tem que continuar podendo quebrar linha — senão o nome fica sem quebra E sem corte (max-width
   sem overflow:hidden) e vaza visualmente por cima das colunas vizinhas. */
.table > tbody > tr > td.text-end,
.table > tbody > tr > td:has(> .badge):not(.text-truncate-sm):not(.cell-trunc):not(.text-wrap),
.table > tbody > tr > td:has(> .table-actions),
.table > tbody > tr > td.table-actions, .table > tbody > tr > td.cell-nowrap { white-space: nowrap; }
/* Texto longo demais até pra quebrar (observações, chaves): fica em 1 linha com "..." e o texto inteiro no title */
.table > tbody > tr > td.cell-trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.table td.text-truncate-sm, .table th.text-truncate-sm { max-width: 260px; }
.table td.text-wrap, .table th.text-wrap { max-width: 340px; }
.table-sm > :not(caption) > * > * { padding: .35rem .45rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-alt); color: inherit; }
.table-hover > tbody > tr:hover > * { background-color: var(--brand-50); }
.table > tbody > tr > td { font-weight: 500; }
.table-actions { white-space: nowrap; max-width: none; overflow: visible; }
.table-actions a { margin-right: 10px; color: var(--ink-500); transition: color .12s ease; }
.table-actions a:hover { color: var(--brand-600); }
.table-actions form { display: inline-block; }

/* Controles do DataTables (busca/paginação/qtd. por página) com a mesma linguagem visual
   do resto do sistema — por padrão vinham com a cara "de fábrica" do plugin, destoando. */
.dt-length select, .dt-search input {
  border: 1px solid var(--border-color); border-radius: var(--bs-border-radius); font-size: .85rem;
  background-color: var(--surface); color: var(--ink-900); padding: .4rem .65rem;
}
.dt-search input { border-radius: 999px; padding-left: 1rem; min-width: 220px; }
.dt-length select:focus, .dt-search input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.dt-info { color: var(--ink-500); font-size: .82rem; }
.dt-paging .pagination { gap: .2rem; }
.dt-paging .page-link {
  border-radius: var(--radius-sm) !important; border-color: var(--border-color); color: var(--ink-700);
  font-weight: 600; font-size: .84rem;
}
.dt-paging .page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.dt-paging .page-link:hover { background: var(--brand-50); color: var(--brand-700); }

/* ---- Buttons & forms ---- */
.btn { font-weight: 600; border-radius: var(--bs-border-radius); transition: background-color .12s ease, border-color .12s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }
.btn-success {
  --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
  background-image: var(--brand-gradient); border-color: transparent;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-600) 32%, transparent);
}
.btn-success:hover { box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-600) 40%, transparent); }
.btn-outline-success { --bs-btn-color: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); }
.btn-outline-primary { --bs-btn-color: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); }
.form-control, .form-select {
  border-color: var(--border-color); border-radius: var(--bs-border-radius); font-size: .9rem;
  background-color: var(--surface); color: var(--ink-900);
}
.form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.form-label { font-size: .82rem; font-weight: 600; color: var(--ink-700); margin-bottom: .35rem; }

.badge { font-weight: 600; padding: .42em .75em; border-radius: 999px; letter-spacing: .01em; }

/* Badge de status semântico — cor fixa por SIGNIFICADO (pago/aberto/vencido/cancelado), não pela
   marca do tenant, pra "vencido" continuar lendo como alerta mesmo numa empresa com marca verde.
   Antes cada tela improvisava isso com classes soltas do Bootstrap (bg-info-subtle etc.); um
   nome único por estado deixa fácil aplicar em qualquer tabela nova. */
.badge-status { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; padding: .38em .7em; border-radius: 999px; border: 1px solid transparent; }
.badge-status-sucesso { color: var(--success); background: var(--success-50); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.badge-status-alerta { color: var(--warning); background: var(--warning-50); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.badge-status-perigo { color: var(--danger); background: var(--danger-50); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.badge-status-info { color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.badge-status-neutro { color: var(--ink-500); background: var(--surface-sunken); border-color: var(--border-color); }

/* Barra de ações de listagem — título/filtro à esquerda, botões de ação à direita. Formaliza o
   que cada tela de listagem montava do seu próprio jeito (normalmente um .d-flex improvisado). */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1rem;
}
.list-toolbar-start { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.list-toolbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.nav-tabs { border-bottom-color: var(--border-color); }
.nav-tabs .nav-link { border: none; color: var(--ink-500); font-weight: 600; font-size: .875rem; border-radius: 0; padding: .65rem .2rem; margin-right: 1.4rem; }
.nav-tabs .nav-link.active { background: transparent; color: var(--brand-600); border-bottom: 2px solid var(--brand-600); }

.modal-content { border-radius: var(--radius); border: none; box-shadow: var(--shadow-lg); background: var(--surface); }
.dropdown-menu { border-radius: var(--radius); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); padding: .4rem; background: var(--surface); }
.dropdown-item { border-radius: var(--radius-sm); font-size: .875rem; padding: .5rem .7rem; color: var(--ink-700); }
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }

/* ---- Auth pages (login / 2FA / recuperação e verificação de código / redefinição de senha) ----
   Cena única, escura e "viva" nas 5 telas da família — identidade fixa da PLATAFORMA (não
   do tenant: aqui ainda não se sabe qual empresa é, então não existe cor de marca pra
   resolver), independente do tema claro/escuro do resto do sistema. Efeitos 100% CSS
   (sem canvas/JS): malha de grade, duas manchas de luz à deriva lenta (roxo + ciano) e
   cartão em vidro fosco — tudo contido e discreto, sempre respeitando prefers-reduced-motion. */
@keyframes authFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes authDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -5%) scale(1.1); } }
@keyframes authDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5%, 4%) scale(1.08); } }
@keyframes authPulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--auth-accent-2) 55%, transparent); } 50% { opacity: .45; box-shadow: 0 0 0 4px transparent; } }

.auth-shell {
  --auth-accent: var(--brand-500);
  --auth-accent-2: #22d3ee;
  --auth-border: rgba(255,255,255,.12);
  --auth-text: rgba(255,255,255,.94);
  --auth-text-dim: rgba(255,255,255,.6);
  position: relative; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--side-bg); isolation: isolate; overflow: hidden;
}
/* Malha de grade fina cobrindo a cena inteira, esmaecendo em direção ao centro */
.auth-shell::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 78%);
}

/* -- Painel de marca (esquerda): mancha de luz roxa à deriva -- */
.auth-brand {
  position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 3.5rem; color: #fff;
}
.auth-brand::after {
  content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; top: -180px; right: -200px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--auth-accent) 32%, transparent), transparent 70%);
  pointer-events: none; animation: authDrift 20s ease-in-out infinite;
}

.auth-brand-inner { position: relative; max-width: 440px; animation: authFadeUp .5s ease both; }
.auth-brand .brand-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 1.1rem;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}
.auth-brand .brand-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--auth-accent-2);
  animation: authPulseDot 2.4s ease-in-out infinite;
}
.auth-brand .brand-mark-lg {
  height: 60px; width: auto; min-width: 60px; padding: 0 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.06); border: 1px solid var(--auth-border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--auth-accent) 25%, transparent), 0 8px 30px color-mix(in srgb, var(--auth-accent) 25%, transparent);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.8rem; color: #fff;
}
.brand-mark-lg img { height: 62%; width: auto; display: block; }
.auth-brand h2 { color: #fff; font-size: 1.85rem; margin-bottom: .85rem; letter-spacing: -.02em; font-weight: 700; }
.auth-brand p { color: rgba(255,255,255,.68); font-size: .94rem; line-height: 1.65; }
.auth-brand ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .1rem; }
.auth-brand ul li {
  display: flex; align-items: center; gap: .75rem; font-size: .87rem; color: rgba(255,255,255,.88);
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.auth-brand ul li:last-child { border-bottom: none; }
.auth-brand ul li i {
  color: var(--auth-accent-2); background: color-mix(in srgb, var(--auth-accent-2) 16%, transparent);
  border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0;
}
.auth-brand-stats { display: flex; gap: 1.75rem; margin-top: 1.75rem; }
.auth-brand-stats div { display: flex; flex-direction: column; gap: .1rem; }
.auth-brand-stats strong {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff, var(--auth-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-brand-stats span { font-size: .7rem; color: rgba(255,255,255,.55); }

/* -- Painel do formulário (direita): mesma cena escura, mancha ciano à deriva, cartão em vidro fosco -- */
.auth-form-panel {
  position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.auth-form-panel::before {
  content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; bottom: -200px; left: -180px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--auth-accent-2) 20%, transparent), transparent 70%);
  pointer-events: none; animation: authDrift2 24s ease-in-out infinite;
}
.auth-form-card {
  position: relative; max-width: 400px; width: 100%; animation: authFadeUp .5s .08s ease both;
  background: color-mix(in srgb, var(--side-bg-elevated) 78%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--auth-border); border-radius: var(--radius-lg);
  padding: 2.25rem 2rem; box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden;
}
.auth-form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--auth-accent), var(--auth-accent-2));
  box-shadow: 0 0 16px color-mix(in srgb, var(--auth-accent-2) 60%, transparent);
}
.auth-form-card h4 { color: var(--auth-text); font-weight: 700; letter-spacing: -.01em; }
.auth-form-card p.text-muted, .auth-form-card .text-muted { color: var(--auth-text-dim) !important; }
.auth-form-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700;
  color: var(--auth-accent-2); background: color-mix(in srgb, var(--auth-accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--auth-accent-2) 30%, transparent);
  border-radius: 999px; padding: .3rem .7rem;
}
.auth-form-footnote {
  display: flex; align-items: flex-start; gap: .4rem; font-size: .72rem; color: var(--auth-text-dim);
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--auth-border); line-height: 1.5;
}
.auth-form-footnote i { margin-top: .15rem; flex-shrink: 0; }
.auth-form-card .form-label { font-size: .84rem; font-weight: 600; color: var(--auth-text-dim); }
.auth-form-card .form-control {
  padding: .65rem .9rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--auth-border); color: var(--auth-text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-form-card .form-control::placeholder { color: rgba(255,255,255,.32); }
.auth-form-card .form-control:focus {
  background: rgba(255,255,255,.08); border-color: var(--auth-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent-2) 25%, transparent); color: var(--auth-text);
}
.auth-form-card .form-control.text-center { letter-spacing: .5em; font-weight: 700; font-size: 1.15rem; }
.auth-form-card .input-icon { position: relative; }
.auth-form-card .input-icon i { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: var(--auth-text-dim); font-size: .95rem; pointer-events: none; }
.auth-form-card .input-icon .form-control { padding-left: 2.6rem; }
.auth-form-card .btn-success {
  padding: .68rem; font-weight: 700; border-radius: var(--radius-sm); border: none;
  background: linear-gradient(120deg, var(--auth-accent), var(--auth-accent-2)); position: relative;
  transition: box-shadow .2s ease, transform .15s ease;
}
.auth-form-card .btn-success:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--auth-accent-2) 45%, transparent); transform: translateY(-1px);
}
.auth-form-card a.small { color: var(--auth-accent-2); font-weight: 600; text-decoration: none; }
.auth-form-card a.small:hover { text-decoration: underline; }
.auth-form-card .alert { border: 1px solid transparent; }
.auth-form-card .alert-danger { background: color-mix(in srgb, #f43f5e 16%, transparent); border-color: color-mix(in srgb, #f43f5e 35%, transparent); color: #fda4af; }
.auth-form-card .alert-warning { background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 35%, transparent); color: #fcd34d; }
.auth-form-card .alert-info { background: color-mix(in srgb, var(--auth-accent-2) 14%, transparent); border-color: color-mix(in srgb, var(--auth-accent-2) 32%, transparent); color: #a5f3fc; }
.auth-form-card .alert-success { background: color-mix(in srgb, #22c55e 16%, transparent); border-color: color-mix(in srgb, #22c55e 35%, transparent); color: #86efac; }

@media (prefers-reduced-motion: reduce) {
  .auth-shell, .auth-shell * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 991px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
  .auth-brand { padding: 1.75rem 1.5rem; min-height: 0; }
  .auth-brand::after { display: none; }
  .auth-brand-inner { max-width: 100%; }
  .auth-brand .brand-eyebrow, .auth-brand p, .auth-brand ul, .auth-brand-stats { display: none; }
  .auth-brand h2 { font-size: 1.25rem; margin-bottom: 0; }
  .auth-brand .brand-mark-lg { height: 44px; min-width: 44px; margin-bottom: .8rem; }
  .auth-form-panel::before { display: none; }
  .auth-form-card { box-shadow: none; padding: 1.75rem 1.5rem; }
}
@media (max-width: 575px) {
  .auth-form-panel { padding: 1.5rem 1.15rem; }
  .auth-brand { padding: 1.4rem 1.15rem; }
}

/* ---- Catálogo de vendas ---- */
.catalogo-toolbar { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; margin-bottom: 1.25rem; }
.catalogo-busca { position: relative; flex: 1 1 280px; max-width: 420px; }
.catalogo-busca i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-400); }
.catalogo-busca input { padding-left: 2.4rem; border-radius: 999px; }
.catalogo-filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-filtro {
  border: 1px solid var(--border-color); background: var(--surface); color: var(--ink-700);
  border-radius: 999px; padding: .4rem 1rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.chip-filtro:hover { border-color: var(--brand-500); color: var(--brand-700); }
.chip-filtro.active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.catalogo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem;
}
.produto-card {
  background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease;
}
/* Produto sem estoque no catálogo (inativado automaticamente): aparece por último, apagado e sem ação */
.produto-card.produto-inativo { opacity: .55; filter: grayscale(.85); }
.produto-card.produto-inativo:hover { box-shadow: none; }
.catalogo-separador-inativos { grid-column: 1 / -1; margin-top: .75rem; padding: .55rem .85rem; border-radius: var(--radius); background: var(--surface-sunken); color: var(--ink-500); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.produto-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--brand-500) 30%, var(--border-color)); }
.produto-card-img {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.produto-card-img img { width: 100%; height: 100%; object-fit: cover; }
.produto-card-placeholder { font-size: 2.2rem; color: var(--ink-400); }
.produto-card-img img.carregada ~ .produto-card-placeholder { display: none; }
.badge-promocao {
  position: absolute; top: .5rem; left: .5rem; background: var(--brand-600); color: #fff;
  font-size: .68rem; font-weight: 700; padding: .25em .6em; border-radius: 999px;
}
.produto-card-body { padding: .85rem .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; flex-grow: 1; }
.produto-card-categoria { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--ink-500); }
.produto-card-nome { font-size: .92rem; font-weight: 700; color: var(--ink-900); line-height: 1.25; min-height: 2.3em; }
.produto-card-tag { display: inline-block; font-size: .68rem; font-weight: 600; color: var(--ink-500); background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 6px; margin-top: .2rem; }
.produto-card-preco { font-size: 1.05rem; margin-top: .15rem; }
.produto-card-preco .preco-atual { font-weight: 700; color: var(--brand-600); }
.produto-card-preco .preco-riscado { text-decoration: line-through; color: var(--ink-400); font-size: .82rem; }
.produto-card-estoque { font-size: .76rem; font-weight: 600; margin: .15rem 0 .5rem; }
.produto-card-acao { margin-top: auto; }
.qtd-stepper .form-control { max-width: 100%; }
.qtd-stepper .btn { width: 34px; flex: 0 0 auto; }

.carrinho-flutuante {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030;
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand-gradient); color: #fff;
  border: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-600) 40%, transparent); font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
}
.carrinho-flutuante span {
  position: absolute; top: -4px; right: -4px; background: var(--ink-900); color: #fff;
  font-size: .68rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 .3rem;
}
.carrinho-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border-color); }
.carrinho-item:last-child { border-bottom: none; }
.offcanvas { background: var(--surface); color: var(--ink-700); }
.offcanvas-header { border-bottom: 1px solid var(--border-color); }

@media (max-width: 575px) {
  .catalogo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  .produto-card-nome { min-height: 0; }
}

/* ---- Misc ---- */
.progress { border-radius: 999px; background: var(--surface-sunken); }
.progress-bar { background-color: var(--brand-600); }
hr { border-color: var(--border-color); opacity: 1; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-danger { background-color: var(--danger) !important; }