/* ==========================================================================
   PAINELL — DESIGN SYSTEM (multi-tenant)
   --------------------------------------------------------------------------
   ERP/CRM admin panel. Densidade alta, visual moderno e profissional.

   As variáveis de BRANDING (--fundoMenu, --corAtiva, --bt-*-..., --familyFont,
   etc.) são injetadas POR TENANT via core/theme.php -> renderThemeVars().
   Este arquivo NÃO chumba cores de marca: consome via var(--*) e DERIVA os
   tons (hover/borda/foco) com color-mix(), com fallback estático.

   Sumário:
     1. Tokens base (cores neutras, espaçamento, raios, sombras, tipografia)
     2. Reset/base
     3. Tipografia & utilitários
     4. Botões
     5. Formulários
     6. Cards / painéis
     7. Badges / tags
     8. Alerts
     9. Breadcrumbs
    10. Tabelas (+ harmonização DataTables/Bootstrap)
    11. Layout do painel: sidebar, topbar, conteúdo
    12. Login
    13. Responsivo
   ========================================================================== */

/* ==========================================================================
   1. TOKENS BASE
   - Branding vem de :root injetado pelo PHP (renderThemeVars).
   - Aqui ficam os fallbacks dessas variáveis (caso o <style> não carregue)
     e TODOS os tokens derivados/neutros que não dependem do tenant.
   ========================================================================== */
:root{
  /* ---- Fallbacks do branding (sobrescritos por renderThemeVars; default = slate #51607A) ---- */
  --fundoMenu:#3b4f72; --cor_text_login:#e0e4eb; --corSubmenuA:#7a7a7a;
  --cor_formLabel:#3d485c; --cor_form:#2b2f38; --corAtiva:#51607A;
  --corAtivaBorderLine:#51607A; --corTxtMenu:#FCFCFC; --corMarcadoresSubmenu:#e0e4eb;
  --familyFont:'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif; --fontWeightBase:400;
  --tam_formLabel:15px; --fontSizeMenu:14px; --fontSizeSubmenu:12px; --size_legendForm:22px;
  --bt-success-color:#3E3B3C; --bt-success-background:#DEFF8B; --bt-success-border:#DEFF8B;
  --bt-info-color:#fff; --bt-info-background:#597EB7; --bt-info-border:#4B71AC;
  --bt-warning-color:#3E3B3C; --bt-warning-background:#fff18b; --bt-warning-border:#fff18b;
  --bt-danger-color:#fff; --bt-danger-background:#CC6463; --bt-danger-border:#C65150;
  --bt-go-color:#000; --bt-go-background:#F0C30E; --bt-go-border:#F39B08;
  --chartColors:#3d485c,#4c5a73,#5c6c89,#6d7f9e,#8493ad,#9aa7bc,#b1bbcb,#c8cfda;
  --logo-login:none; --logo-menu:none; --logo-marca:none;

  /* ---- Cores neutras (cinzas do UI, independem do tenant) ---- */
  /* ===== Minimalismo Nubank: branco no FUNDO, cinza nas SUPERFÍCIES/elementos ===== */
  --c-bg:           #ffffff;   /* fundo da área = BRANCO */
  --c-surface:      #f3f4f6;   /* cards/superfícies/elementos = cinza claro (elevação por COR, não sombra) */
  --c-surface-2:    #e9eaef;   /* hover/secundário = cinza um pouco mais */
  --c-brand-dark:   color-mix(in srgb, var(--corAtiva) 26%, #0d0612);   /* fundo escuro tematizado pela marca (login, modos imersivos) */
  --c-border:       #e2e6ee;   /* bordas padrão */
  --c-border-strong:#cdd3e0;
  --c-text:         #2b2f38;   /* texto principal — ~12.3:1 no branco */
  --c-text-muted:   #6b7280;   /* texto secundário — ~4.8:1 (AA) */
  /* A11Y: text-soft carrega TEXTO real (hints, .kpi-sub, .meta) → precisa passar AA.
     Era #97a0af (~2.6:1, reprovava). Agora ~4.6:1. Placeholder transitório usa
     --c-placeholder (segue claro de propósito: campo vazio não pode parecer preenchido). */
  --c-text-soft:    #6e7686;   /* hints/legendas (texto real) — ~4.6:1 (AA) */
  --c-placeholder:  #97a0af;   /* placeholder/affixo (transitório, exceção AA) */
  --c-text-invert:  #ffffff;

  /* ---- Cor de marca derivada (a "acentuação" do tenant) ---- */
  --c-accent:        var(--corAtiva);
  --c-accent-line:   var(--corAtivaBorderLine);
  /* tom suave do accent p/ fundos (fallback = accent translúcido via rgba não dá em var; usamos color-mix) */
  --c-accent-soft:   color-mix(in srgb, var(--corAtiva) 12%, #ffffff);
  --c-accent-hover:  color-mix(in srgb, var(--corAtiva) 86%, #000000);

  /* ---- Feedback semântico (UI states, neutros do sistema) ---- */
  /* feedback semântico — tons suaves/dessaturados (Nubank), legíveis em botão e badge */
  --c-success:#388f61; --c-success-bg:#e9f6ef;
  --c-info:   #4170af; --c-info-bg:   #ecf1f8;
  --c-warning:#ab8036; --c-warning-bg:#f6f0e4;
  --c-danger: #c4454b; --c-danger-bg: #f9ecec;

  /* ---- Tipografia: escala derivada ---- */
  /* A11Y: escala em REM (base 16px do root) — mesmo tamanho visual de hoje,
     mas respeita o zoom/aumento de texto do navegador (px ignora). 1rem=16px:
     11→.6875 · 12→.75 · 13→.8125 · 14→.875 · 16→1 · 18→1.125 · 22→1.375 · 28→1.75 */
  --font-sans: var(--familyFont);
  --fs-xs: .6875rem; --fs-sm: .75rem; --fs-base: .8125rem; --fs-md: .875rem;
  --fs-lg: 1rem; --fs-xl: 1.125rem; --fs-2xl: 1.375rem; --fs-3xl: 1.75rem;
  --lh-tight: 1.25; --lh-base: 1.5;
  --fw-normal: var(--fontWeightBase, 400); --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Espaçamento (escala 4px) ---- */
  --sp-0:0; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;

  /* ---- Raios ---- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;

  /* ---- Sombras (flat: só overlay/menu suspenso tem sombra) ---- */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: 0 10px 30px rgba(16,24,40,.14);   /* mantida: dropdowns / runWindow / overlays */
  --sh-focus: 0 0 0 3px color-mix(in srgb, var(--corAtiva) 35%, transparent);

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 64px;

  --transition: .16s ease;

  /* ---- z-index: escala de empilhamento (use os tokens, não números mágicos) ---- */
  --z-sticky:    20;      /* cabeçalhos/sidebar grudados ao rolar */
  --z-dropdown:  60;      /* menus suspensos / popovers */
  --z-backdrop:  1100;    /* véu escuro de um overlay LOCAL (gaveta off-canvas) */
  --z-overlay:   1200;    /* gaveta/painel local por cima do véu */
  --z-toast:     9000;    /* confirmações flutuantes (auto-save, flash) */
  --z-modal:     10000;   /* runWindow / modal global (casca) */
}

/* ----------------------------------------------------------------------------
   Tipografia no CELULAR (≤680px): a escala base é densa (ERP desktop, corpo 13px)
   e fica apertada no telefone. Aqui SUBIMOS os tokens --fs-* num lugar só — como
   o painel inteiro consome var(--fs-*), TODAS as telas crescem juntas (corpo
   13→15, sm 12→13, etc.), sem tocar tela por tela. Mantém rem (respeita o zoom
   do navegador). --fs-3xl fica em 28 (topbar/capa já são grandes).
   --------------------------------------------------------------------------- */
@media (max-width:680px){
  :root{
    --fs-xs: .75rem;     /* 11 → 12 */
    --fs-sm: .8125rem;   /* 12 → 13 */
    --fs-base: .9375rem; /* 13 → 15 */
    --fs-md: .9375rem;   /* 14 → 15 */
    --fs-lg: 1.0625rem;  /* 16 → 17 */
    --fs-xl: 1.1875rem;  /* 18 → 19 */
    --fs-2xl: 1.5rem;    /* 22 → 24 */
  }
  /* iOS Safari só NÃO dá zoom ao focar um campo se a fonte for ≥16px */
  .form-control,.ds-input,.ds-select,.ds-textarea,.list-q,.list-search input{ font-size:16px; }
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:var(--fw-normal);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--c-accent); text-decoration:none; transition:color var(--transition); }
a:hover{ color:var(--c-accent-hover); }
hr{ border:0; border-top:1px solid var(--c-border); margin:var(--sp-4) 0; }

/* Foco acessível global: anel visível só p/ navegação por teclado */
:focus-visible{ outline:none; box-shadow:var(--sh-focus); border-radius:var(--r-xs); }

/* ==========================================================================
   3. TIPOGRAFIA & UTILITÁRIOS
   ========================================================================== */
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--sp-3); font-weight:var(--fw-semibold); line-height:var(--lh-tight); color:var(--c-text); }
h1{ font-size:var(--fs-3xl); } h2{ font-size:var(--fs-2xl); } h3{ font-size:var(--fs-xl); }
h4{ font-size:var(--fs-lg); } h5{ font-size:var(--fs-md); } h6{ font-size:var(--fs-sm); }
p{ margin:0 0 var(--sp-3); }
small,.text-sm{ font-size:var(--fs-sm); }
.text-muted{ color:var(--c-text-muted); }
.text-soft{ color:var(--c-text-soft); }
.text-accent{ color:var(--c-accent); }
.fw-medium{ font-weight:var(--fw-medium); } .fw-semibold{ font-weight:var(--fw-semibold); } .fw-bold{ font-weight:var(--fw-bold); }
.u-uppercase{ text-transform:uppercase; letter-spacing:.04em; }
.u-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A11Y: nome acessível só p/ leitor de tela (botão só-ícone, contexto de ação).
   Some visualmente sem virar tooltip (use no lugar de title — veja runTitle). */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* fica visível ao receber foco por teclado (ex.: link "pular para o conteúdo") */
.sr-only-focusable:focus,.sr-only-focusable:focus-visible{ position:static!important; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
.u-flex{ display:flex; } .u-items-center{ align-items:center; } .u-justify-between{ justify-content:space-between; }
.u-gap-1{ gap:var(--sp-1); } .u-gap-2{ gap:var(--sp-2); } .u-gap-3{ gap:var(--sp-3); }
.u-mt-2{ margin-top:var(--sp-2); } .u-mt-4{ margin-top:var(--sp-4); }
.u-mb-2{ margin-bottom:var(--sp-2); } .u-mb-4{ margin-bottom:var(--sp-4); }

/* Legenda de formulário (size_legendForm é do tenant) */
.ds-legend{
  font-size:var(--size_legendForm);
  font-weight:var(--fw-semibold);
  color:var(--cor_formLabel);
  margin:0 0 var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-2);
}

/* ==========================================================================
   4. BOTÕES
   - 5 variantes temáveis (success/info/warning/danger/go) + neutro.
   - Tamanhos sm/md. Estados hover/active/disabled/loading.
   - As cores das variantes vêm das vars --bt-*-color/-background/-border.
   ========================================================================== */
.btn{
  --_c: var(--c-text);
  --_bg: var(--c-surface);
  --_bd: var(--c-border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:inherit; font-size:var(--fs-md); font-weight:var(--fw-medium); line-height:1;
  padding:9px 16px; min-height:38px;
  color:var(--_c); background:var(--_bg);
  border:1px solid var(--_bd); border-radius:var(--r-pill);   /* PÍLULA: padrão de todos os botões (Nubank). Hover pinta o fundo do próprio botão = já arredondado. */
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:filter var(--transition), box-shadow var(--transition), background var(--transition), transform .05s ease;
}
.btn:hover{ filter:brightness(.95); color:var(--_c); }   /* reafirma a cor: senão o a:hover global (cor de link) some o texto de um <a class="btn"> */
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ box-shadow:var(--sh-focus); }
.btn[disabled],.btn.is-disabled{ opacity:.55; cursor:not-allowed; filter:none; transform:none; }

/* Tamanhos */
.btn-sm{ padding:6px 12px; min-height:32px; font-size:var(--fs-sm); }
.btn-md{ padding:9px 16px; min-height:38px; }
.btn-lg{ padding:12px 22px; min-height:46px; font-size:var(--fs-lg); }
.btn-block{ display:flex; width:100%; }
/* SÓ-ÍCONE = CÍRCULO PERFEITO: largura == altura nos dois tamanhos. NÃO usar só
   min-height (a largura 32 do btn-sm com altura 38 vira cápsula vertical/oval). */
.btn-icon{ padding:0; width:38px; height:38px; min-height:0; }
.btn-icon.btn-sm{ width:32px; height:32px; min-height:0; }   /* min-height:0 (especificidade 0,2,0) vence o @media .btn-sm{min-height:38} — senão vira 32×38 oval no mobile */

/* Variantes temáveis (mapeiam as vars do tenant) */
.btn-success{ --_c:var(--bt-success-color); --_bg:var(--bt-success-background); --_bd:var(--bt-success-border); }
.btn-info{    --_c:var(--bt-info-color);    --_bg:var(--bt-info-background);    --_bd:var(--bt-info-border); }
.btn-warning{ --_c:var(--bt-warning-color); --_bg:var(--bt-warning-background); --_bd:var(--bt-warning-border); }
.btn-danger{  --_c:var(--bt-danger-color);  --_bg:var(--bt-danger-background);  --_bd:var(--bt-danger-border); }
.btn-go{      --_c:var(--bt-go-color);      --_bg:var(--bt-go-background);      --_bd:var(--bt-go-border); }

/* Botão de acento (usa a cor ativa da marca) */
.btn-accent{ --_c:#fff; --_bg:var(--corAtiva); --_bd:var(--corAtiva); }

/* Neutro / secundário / ghost / link */
.btn-neutral{ --_c:var(--c-text); --_bg:var(--c-surface); --_bd:var(--c-border-strong); }
.btn-ghost{ --_c:var(--c-text-muted); --_bg:transparent; --_bd:transparent; }
.btn-ghost:hover{ background:var(--c-surface-2); filter:none; }
.btn-link{ --_c:var(--c-accent); --_bg:transparent; --_bd:transparent; padding-left:4px; padding-right:4px; }
.btn-link:hover{ text-decoration:underline; filter:none; }

/* --------------------------------------------------------------------------
   AÇÕES (REGRA NUBANK NOVA) — hierarquia por ÊNFASE, não por cor.
   Só a AÇÃO DA VEZ ganha destaque; o resto fica neutro.
     • Primária (Novo/Salvar)        = ROXO sólido (accent).
     • Secundárias (Editar/Ver)      = NEUTRAS (superfície cinza).
     • Cancelar/voltar               = ghost neutro.
     • Excluir                       = NEUTRO em repouso (NÃO vermelho).
     • Vermelho SÓ no passo final de confirmação destrutiva: .btn-delete-confirm.
   As ênfases (.btn-soft/.btn-outline/.btn-text) seguem atuando sobre --act.
   Convenção de ícone:  novo=fa-plus  salvar=fa-check  editar=fa-pen
                        ver=fa-eye  excluir=fa-trash  cancelar=fa-xmark
   -------------------------------------------------------------------------- */
.btn-new    { --act:var(--corAtiva);     --_bg:var(--act); --_c:#fff; --_bd:var(--act); }       /* primária = accent sólido */
.btn-save   { --act:var(--corAtiva);     --_bg:var(--act); --_c:#fff; --_bd:var(--act); }       /* primária = accent sólido */
.btn-edit   { --act:#5b6472;             --_bg:var(--c-surface); --_c:var(--c-text); --_bd:var(--c-border-strong); } /* secundária = neutro */
.btn-view   { --act:#5b6472;             --_bg:var(--c-surface); --_c:var(--c-text); --_bd:var(--c-border-strong); } /* secundária = neutro */
.btn-delete { --act:var(--c-text-muted); --_bg:var(--c-surface); --_c:var(--c-text); --_bd:var(--c-border-strong); } /* excluir NEUTRO em repouso */
.btn-cancel { --act:var(--c-text-muted); --_bg:transparent; --_c:var(--c-text-muted); --_bd:transparent; } /* cancelar/voltar */
.btn-cancel:hover{ background:var(--c-surface-2); filter:none; }
/* passo final de confirmação destrutiva ("Tem certeza?"): AÍ SIM vermelho sólido */
.btn-delete-confirm{ --act:var(--c-danger); --_bg:var(--act); --_c:#fff; --_bd:var(--act); }

/* Ênfases — atuam sobre a cor --act da intenção (vêm depois p/ sobrescrever o sólido) */
.btn-soft{    --_bg:color-mix(in srgb, var(--act,var(--corAtiva)) 12%, #fff); --_c:var(--act,var(--corAtiva)); --_bd:transparent; }
.btn-soft:hover{ filter:none; background:color-mix(in srgb, var(--act,var(--corAtiva)) 18%, #fff); }
.btn-outline{ --_bg:transparent; --_c:var(--act,var(--corAtiva)); --_bd:var(--act,var(--c-border-strong)); }
.btn-outline:hover{ filter:none; background:color-mix(in srgb, var(--act,var(--corAtiva)) 9%, transparent); }
.btn-text{    --_bg:transparent; --_c:var(--act,var(--corAtiva)); --_bd:transparent; padding-left:8px; padding-right:8px; }
.btn-text:hover{ filter:none; background:color-mix(in srgb, var(--act,var(--corAtiva)) 9%, transparent); }

/* --------------------------------------------------------------------------
   ÍCONE DE CARD / AÇÃO — bolinha branca com o glifo dentro. REGRA NUBANK NOVA:
   o ícone NÃO carrega cor de intenção. Só DOIS estados:
     • NEUTRO (padrão) = glifo GRAFITE (--c-text) sobre a bolinha branca.
     • PRIORIDADE (.ico-accent / .ico-priority) = bolinha LAVANDA + glifo ROXO,
       reservado à AÇÃO PRINCIPAL do bloco (ex.: Novo/Criar). Um por grupo.
   As antigas variantes semânticas (ico-new/edit/delete/config/warning/…) ficam
   por COMPAT, mas TODAS resolvem para o neutro grafite — a cor saiu dos ícones. */
.ico-badge{ width:44px; height:44px; border-radius:50%; background:#fff; color:var(--c-text); display:inline-flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; }
.ico-badge.ico-sm{ width:34px; height:34px; font-size:15px; }
.ico-badge.ico-lg{ width:52px; height:52px; font-size:22px; }
/* compat: qualquer intenção antiga = NEUTRO grafite (sem cor) */
.ico-new,.ico-edit,.ico-view,.ico-delete,.ico-warning,.ico-config,
.ico-success,.ico-info,.ico-danger{ color:var(--c-text); }
/* ÚNICA exceção: ÍCONE DE PRIORIDADE (ação principal) = lavanda + roxo */
.ico-accent,.ico-priority{ background:var(--c-accent-soft); color:var(--corAtiva); }

/* Loading */
.btn.is-loading{ color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after{
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  color:var(--_c); animation:ds-spin .6s linear infinite;
}
@keyframes ds-spin{ to{ transform:rotate(360deg); } }

/* Grupo de botões */
.btn-group{ display:inline-flex; }
.btn-group .btn{ border-radius:0; margin-left:-1px; }
.btn-group .btn:first-child{ border-radius:var(--r-sm) 0 0 var(--r-sm); margin-left:0; }
.btn-group .btn:last-child{ border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* o atributo hidden SEMPRE esconde (vence o display:inline-flex de .badge etc.) */
[hidden]{ display:none !important; }

/* Botão só-ícone (quadrado): ações compactas em cabeçalhos de listagem/kanban
   (Novo, Filtro). Use .btn + intenção (.btn-new/.btn-view/…) + .btn-icon.
   Badge de contagem e caret do dropdown ficam ancorados no canto. */
.btn-icon{ width:38px; height:38px; min-height:0; padding:0; justify-content:center; position:relative; flex:0 0 auto; align-self:center; aspect-ratio:1; }
.btn-icon > .badge,.btn-icon > .badge-accent{ position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; font-size:10px; line-height:16px; border-radius:var(--r-pill); }
.btn-icon > .fa-caret-down{ position:absolute; bottom:3px; right:4px; font-size:9px; opacity:.85; }

/* ==========================================================================
   5. FORMULÁRIOS
   ========================================================================== */
.form-group{ margin-bottom:var(--sp-4); }
.form-row{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.form-row > .form-group{ flex:1 1 220px; margin-bottom:0; }
/* FORM em painel (runWindow): SEM caixa — campos soltos no branco (minimalista).
   Vale p/ todo form que usa .form-wrap > .card. O respiro vertical entre campos
   é por tela (.form-row local), padrão ~26-28px. */
.form-wrap > .card{ background:transparent; border:0; box-shadow:none; border-radius:0; margin:0; }
.form-wrap > .card > .card-body{ padding:0; }

.form-label,
label.ds-label{
  display:block;
  font-size:var(--tam_formLabel);
  font-weight:var(--fw-medium);
  color:var(--cor_formLabel);
  margin-bottom:6px;
}
.form-label .req{ color:var(--c-danger); margin-left:2px; }
.form-hint{ display:block; font-size:var(--fs-xs); color:var(--c-text-soft); margin-top:4px; }

.form-control,
input.ds-input, select.ds-select, textarea.ds-textarea,
input[type=text].ds, input[type=email].ds, input[type=password].ds,
input[type=number].ds, input[type=date].ds{
  display:block; width:100%;
  font-family:inherit; font-size:var(--fs-md); line-height:1.4;
  color:var(--cor_form);
  background:transparent;   /* funde com o fundo (underline puro) */
  padding:9px 2px; min-height:38px;
  /* minimalista: só a linha de baixo, sem caixa nem radius */
  border:0; border-bottom:1px solid var(--c-border-strong);
  border-radius:0;
  transition:border-color var(--transition), box-shadow var(--transition);
  appearance:none;
}
textarea.form-control,.ds-textarea{ min-height:96px; resize:vertical; }
.form-control::placeholder{ color:var(--c-placeholder); }
.form-control:hover{ border-color:var(--c-border-strong); }
.form-control:focus,
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{
  outline:none;
  border-bottom-color:var(--corAtiva);
  border-bottom-width:2px;
  padding-bottom:8px;   /* compensa o +1px da borda p/ o conteúdo não pular */
  box-shadow:none;
}
/* readonly/disabled: mantém o underline (SEM caixa cinza) — só texto apagado + cursor */
.form-control[disabled],.form-control[readonly]{ background:transparent; color:var(--c-text-muted); cursor:not-allowed; border-bottom-style:dashed; }
/* autofill do Chrome: preserva o visual underline (sem o fundo amarelo/claro do navegador) */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active{
  -webkit-text-fill-color:var(--cor_form); caret-color:var(--cor_form);
  -webkit-box-shadow:0 0 0 1000px var(--c-surface) inset;
  transition:background-color 9999s ease-in-out 0s;
}

/* Select com caret */
select.form-control,.ds-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:34px;
}

/* Input com ícone (prefixo/sufixo) */
.input-affix{ position:relative; display:flex; align-items:center; }
.input-affix .form-control{ padding-left:26px; }
.input-affix .affix-ico{ position:absolute; left:2px; color:var(--c-placeholder); pointer-events:none; display:flex; }

/* Validação (linha de baixo colorida, sem glow) */
.form-control.is-invalid,.has-error .form-control{ border-bottom-color:var(--c-danger); border-bottom-width:2px; }
.form-control.is-invalid:focus{ border-bottom-color:var(--c-danger); box-shadow:none; }
.form-control.is-valid,.has-success .form-control{ border-bottom-color:var(--c-success); border-bottom-width:2px; }
.invalid-feedback{ display:block; color:var(--c-danger); font-size:var(--fs-xs); margin-top:4px; }
.valid-feedback{ display:block; color:var(--c-success); font-size:var(--fs-xs); margin-top:4px; }

/* ReqGroup — grupo "um ou outro" obrigatório (campo OU campo). Lib: /assets/js/reqgroup.js (data-ou).
   O alvo (.ou-mark) marca cada campo do grupo; ao preencher um, os demais apagam (.off). */
.ou-mark{ font-size:10px; color:var(--corAtiva); opacity:.75; margin-left:4px; cursor:help; }
.ou-mark.off{ opacity:.2; }
.form-group.ou-falta .form-control,
.form-group.ou-falta .ds-input,
.form-group.ou-falta .ds-select{ border-color:var(--c-warning); border-bottom-color:var(--c-warning); }
.form-group.ou-falta .ou-mark{ color:var(--c-warning); opacity:1; }

/* Checkbox / radio custom */
.ds-check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--fs-md); user-select:none; }
.ds-check input[type=checkbox],.ds-check input[type=radio]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0;
  border:1.5px solid var(--c-border-strong); background:var(--c-surface);
  display:grid; place-content:center; cursor:pointer; transition:var(--transition);
}
.ds-check input[type=checkbox]{ border-radius:var(--r-xs); }
.ds-check input[type=radio]{ border-radius:50%; }
.ds-check input:focus-visible{ box-shadow:var(--sh-focus); }
.ds-check input:checked{ background:var(--corAtiva); border-color:var(--corAtiva); }   /* marcado = cor primária */
.ds-check input[type=checkbox]:checked::after{
  content:""; width:5px; height:9px; border:2px solid #fff; border-top:0; border-left:0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.ds-check input[type=radio]:checked::after{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }

/* Toggle switch */
.ds-switch{ position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.ds-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ds-switch .track{ width:38px; height:21px; border-radius:var(--r-pill); background:var(--c-border-strong); transition:var(--transition); position:relative; }
.ds-switch .track::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:var(--sh-xs); transition:var(--transition); }
.ds-switch input:checked + .track{ background:var(--corAtiva); }   /* ligado = cor primária */
.ds-switch input:checked + .track::after{ transform:translateX(17px); }
.ds-switch input:focus-visible + .track{ box-shadow:var(--sh-focus); }

/* ==========================================================================
   5.1 FORMULÁRIO EM PAINEL (CAPA-PERFIL + ABAS-PASTA) — padrão de cadastro/edição
   Para telas de form que abrem em runWindow (modal lateral). Referência viva: modulos/cpfj/form.php.
   Compõe:
     .form-cover            capa escura (cor-de-marca). Dentro:
        .fc-id > .fc-avatar(.is-pj) [upload + .fc-cam hover] + .fc-titles(.fc-eyebrow + h1[.is-ph])
        .fc-prog (progresso) · .fc-x (fechar) · opcional: .rel-seg (segmentado sobre o escuro)
     .form-tabs             ABAS-PASTA: barra = extensão escura da capa; aba .active = língua BRANCA
     .form-body / .tab-pane(.active) / .form-grid (12 col) / .form-head+.fh-main+.form-photo / .form-foot
     .rel-seg > .rel-tg     SEGMENTADO multi-seleção (claro no corpo; branco sobre a capa escura)
     .dropzone > .dz-ico/.dz-txt/.dz-hint   área de arrastar-e-soltar arquivos

   AVISO/ALERTA dentro do form (.alert) — LOCAL CORRETO:
     SEMPRE dentro de .form-body, no TOPO (antes de .form-grid / do grid de conteúdo), margem
     só vertical (ex.: style="margin:0 0 16px"). Quando há abas, fica ABAIXO da .form-tabs.
     NUNCA colocar o .alert ENTRE .form-cover e .form-tabs (nem entre a capa e o <form>): a barra
     de abas é a EXTENSÃO ESCURA da capa — um box claro no meio CORTA essa continuidade e "mata"
     o cabeçalho. (Forms sem abas, ex. combustível: idem — aviso no topo do corpo, não acima da capa.)
   ========================================================================== */
/* ----- CAPA-PERFIL: avatar (upload) + eyebrow + título (pode ser preenchido ao vivo) ----- */
/* glow radial sutil da marca no topo-esquerdo (profundidade "Nubank"), sobre a base escura */
.form-cover{ position:relative; color:#fff; padding:38px 32px 32px;
  background:
    radial-gradient(120% 130% at 12% -25%, color-mix(in srgb, var(--corAtiva) 30%, transparent) 0%, transparent 60%),
    var(--c-brand-dark); }
.form-cover .fc-id{ display:flex; align-items:center; gap:22px; }
.form-cover h1{ margin:0; color:#fff; font-size:var(--fs-3xl); font-weight:var(--fw-bold); letter-spacing:-.02em; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.form-cover h1.is-ph{ opacity:.5; font-weight:var(--fw-semibold); }      /* placeholder enquanto não há nome */
.fc-eyebrow{ display:block; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.72); margin-bottom:2px; }
.fc-titles{ min-width:0; }
/* avatar: clica p/ enviar imagem, hover mostra a câmera. PF = redondo; empresa = .is-pj (quadrado arred.) */
.fc-avatar{ position:relative; flex:0 0 auto; width:90px; height:90px; border-radius:50%; cursor:pointer; overflow:hidden;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.38); display:flex; align-items:center; justify-content:center;
  color:#fff; transition:border-color .15s; }
.fc-avatar.is-pj{ border-radius:18px; }
.fc-avatar:hover{ border-color:#fff; }
.fc-avatar img{ width:100%; height:100%; object-fit:cover; }
.fc-avatar > i{ font-size:36px; opacity:.92; }
.fc-avatar .fc-cam{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.42); color:#fff; font-size:18px; opacity:0; transition:opacity .15s; }
.fc-avatar:hover .fc-cam{ opacity:1; }
.form-cover .fc-prog{ margin-top:20px; height:5px; width:min(420px,55%); background:rgba(255,255,255,.20); border-radius:6px; overflow:hidden; }
.form-cover .fc-prog i{ display:block; height:100%; width:0; background:#fff; border-radius:6px; transition:width .3s; }
.form-cover .fc-x{ position:absolute; top:24px; right:26px; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.form-cover .fc-x:hover{ background:rgba(255,255,255,.30); }

/* ----- ABAS-PASTA: a barra é a extensão ESCURA da capa; a aba ATIVA é uma língua BRANCA que emenda no conteúdo ----- */
.form-tabs{ display:flex; flex-wrap:nowrap; gap:4px; padding:0 24px; background:var(--c-brand-dark); overflow-x:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.form-tabs::-webkit-scrollbar{ height:5px; }
.form-tabs::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; }
.form-tabs:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.20); }
.form-tabs button{ flex:0 0 auto; background:transparent; border:0; cursor:pointer; font-size:var(--fs-md); color:rgba(255,255,255,.72);
  padding:12px 18px; border-radius:10px 10px 0 0; transition:background .12s,color .12s; white-space:nowrap; }
.form-tabs button:hover{ color:#fff; background:rgba(255,255,255,.10); }
.form-tabs button.active,
.form-tabs button.active:hover{ background:var(--c-bg); color:var(--c-text); font-weight:var(--fw-semibold); }

.form-body{ padding:18px 30px 28px; }
.tab-pane{ display:none; } .tab-pane.active{ display:block; }
.form-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:28px 16px; align-items:end; }
.form-head{ display:flex; gap:24px; align-items:flex-start; }
.form-head .fh-main{ flex:1; min-width:0; }
.form-photo{ flex:0 0 auto; width:112px; text-align:center; }
.form-photo .foto-box{ width:112px; height:112px; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center; color:#9aa3b0; font-size:30px; cursor:pointer; overflow:hidden; transition:border-color .15s; }
.form-photo .foto-box:hover{ border-color:var(--corAtiva); }
.form-photo .foto-box img{ width:100%; height:100%; object-fit:cover; }
.form-foot{ display:flex; gap:8px; margin-top:24px; padding-top:18px; align-items:center; }

/* ----- SEGMENTADO multi-seleção em PÍLULA (track arredondado; ativo = pílula "encaixada"/inset).
   Claro = corpo (ativo roxo); escuro = dentro da capa (ativo branco). Formato na base, cor por variante. ----- */
.rel-seg{ display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-pill); padding:4px; }
.rel-tg{ display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:var(--r-pill); cursor:pointer; color:var(--c-text-muted);
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); white-space:nowrap; transition:background .12s,color .12s; user-select:none; }
.rel-tg input{ position:absolute; opacity:0; width:0; height:0; }
.rel-tg i{ font-size:13px; opacity:.85; }
.rel-tg:hover{ color:var(--corAtiva); }
.rel-tg:has(input:checked){ background:var(--corAtiva); color:#fff; margin:5px 0; padding:4px 15px; }   /* ativo = pílula inset (menor, centrada no track) */
.rel-tg:has(input:checked) i, .rel-tg input:checked ~ i{ opacity:1; }
/* variante sobre a capa escura: track translúcido; INATIVO = só texto (sem chip);
   fundo aparece SÓ no hover e no ativo (branco) */
.form-cover .rel-seg{ background:rgba(255,255,255,.10); border:0; margin:26px 0 0; }
.form-cover .rel-tg{ color:#fff; }
.form-cover .rel-tg:hover{ background:rgba(255,255,255,.14); }
.form-cover .rel-tg:has(input:checked){ background:#fff; color:var(--c-text); }

/* ----- DROPZONE (arrastar-e-soltar arquivos; clicar também abre o seletor) ----- */
.dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border:2px dashed var(--c-border-strong); border-radius:14px; padding:40px 20px; cursor:pointer;
  background:var(--c-surface); color:var(--c-text-muted); transition:border-color .15s,background .15s,color .15s; }
.dropzone:hover{ border-color:var(--corAtiva); color:var(--corAtiva); }
.dropzone.dragover{ border-color:var(--corAtiva); background:color-mix(in srgb,var(--corAtiva) 8%,var(--c-surface)); color:var(--corAtiva); }
.dropzone .dz-ico{ font-size:32px; margin-bottom:10px; opacity:.85; }
.dropzone .dz-txt{ font-size:var(--fs-md); }
.dropzone .dz-txt b{ color:var(--c-text); font-weight:var(--fw-semibold); }
.dropzone:hover .dz-txt b,.dropzone.dragover .dz-txt b{ color:var(--corAtiva); }
.dropzone .dz-hint{ font-size:var(--fs-xs); color:var(--c-text-soft); margin-top:6px; }

@media (max-width:760px){
  .form-grid{ grid-template-columns:repeat(2,1fr); }
  .form-grid .form-group{ grid-column:span 2 !important; }
  .form-head{ align-items:flex-start; gap:16px; }
  .form-photo{ width:auto; }
  .form-photo .foto-box{ width:96px; height:96px; margin:0; }
}
@media (max-width:560px){
  .form-cover{ padding:28px 18px 24px; }
  .form-cover h1{ font-size:var(--fs-2xl); }
  .fc-avatar{ width:70px; height:70px; } .fc-avatar > i{ font-size:28px; }
  /* celular: relacionamento em GRID (2 colunas), sem fundo de container */
  .form-cover .rel-seg{ margin-top:20px; width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:0; background:transparent; }
  .form-cover .rel-tg{ justify-content:flex-start; }
  .form-cover .rel-tg:has(input:checked){ margin:0; padding:8px 15px; }   /* grid uniforme: sem o "inset" do desktop */
  .form-cover .fc-x{ top:18px; right:16px; width:40px; height:40px; }
  .form-tabs{ padding:0 12px; }
  .form-body{ padding:16px; }
  /* RODAPÉ DE AÇÕES grudado no fim da viewport no celular: o Salvar NUNCA fica atrás da
     barra do navegador/gestos. Fundo sólido + borda + respiro com a safe-area do iOS. */
  .form-foot{ position:sticky; bottom:0; z-index:var(--z-sticky); margin:18px -16px 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--c-bg); border-top:1px solid var(--c-border); }
}
@media (max-width:480px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .form-group{ grid-column:span 1 !important; }
}

/* ==========================================================================
   6. CARDS / PAINÉIS
   ========================================================================== */
.card,.ds-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  margin-bottom:var(--sp-4);
}
.card-header,.ds-card .card-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--c-border);
}
.card-header h3,.card-header h4{ margin:0; }
.card-body,.ds-card .card-body{ padding:var(--sp-5); }
.card-footer{ padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--c-border); background:var(--c-surface-2); border-radius:0 0 var(--r-lg) var(--r-lg); }
.card-accent{ border-top:3px solid var(--corAtiva); }

/* Card de métrica (dashboards) */
.stat-card{ display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-5); }
.stat-card .stat-label{ font-size:var(--fs-sm); color:var(--c-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.stat-card .stat-value{ font-size:var(--fs-3xl); font-weight:var(--fw-bold); color:var(--c-text); line-height:1.1; }
.stat-card .stat-delta{ font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.stat-card .stat-delta.up{ color:var(--c-success); } .stat-card .stat-delta.down{ color:var(--c-danger); }

/* telas "start" (hubs de atalho): são navegação, não conteúdo — sem seleção de texto */
.start-wrap{ -webkit-user-select:none; user-select:none; }

/* TÍTULO DE SEÇÃO (telas start/dashboard) — separador COESO e ÚNICO, SEM ÍCONE (Nubank).
   Use <h2 class="sec-title">Texto</h2> — mesmo estilo em TODAS as telas start. Contador/
   subtítulo opcional: <span class="count">…</span>. NÃO redefina por tela nem ponha ícone. */
.sec-title{ margin:28px 0 14px; font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--c-text); letter-spacing:-.01em; line-height:var(--lh-tight); }
.sec-title:first-child{ margin-top:0; }
.sec-title .count{ margin-left:8px; font-size:var(--fs-sm); font-weight:var(--fw-normal); color:var(--c-text-soft); letter-spacing:0; }

/* STATUS DE ATUALIZAÇÃO (dashboards) — "atualizado há X" + ícone, TUDO clicável (refaz a
   consulta). O texto vai num <span> DENTRO; o ícone vem DEPOIS. Gira no hover (affordance)
   e durante o carregamento (.is-loading). NÃO é um botão "atualizar" separado.
   Uso: <a class="refresh-status" onclick="…"><span id="cacheInfo"></span><i class="fa fa-refresh"></i></a> */
/* BADGE "atualizado há X" (pill, desktop + mobile). A COR escala com a IDADE do cache
   (6h): cinza quando fresco → âmbar no meio → vermelho perto do limite (defasado).
   As classes .is-aging / .is-stale são aplicadas por refreshAge() (start-actions.js). */
.refresh-status{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; text-decoration:none;
  background:var(--c-surface-2); color:var(--c-text-muted); padding:5px 11px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); white-space:nowrap; transition:background var(--transition), color var(--transition); }
.refresh-status:hover{ color:var(--c-text); }
.refresh-status.is-aging{ background:var(--c-warning-bg); color:var(--c-warning); }   /* meio do período (~3–5h) */
.refresh-status.is-stale{ background:var(--c-danger-bg);  color:var(--c-danger); }    /* perto das 6h: muito defasado */
.refresh-status i{ font-size:12px; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.refresh-status:hover i{ transform:rotate(-180deg); }
.refresh-status.is-loading{ pointer-events:none; }
.refresh-status.is-loading i{ animation:ds-spin .7s linear infinite; }

/* Card de atalho (telas "start"): ícone semântico (.ico-badge) + título + descrição.
   A cor do ícone segue a intenção: Novo=ico-new(verde), abrir/listar/navegar=ico-view(neutro),
   configurar=ico-accent(roxo). "Em breve" usa .is-soon ou .soon.
   COMPONENTE ÚNICO — use .start-card (canônico) ou .shortcut-card (alias). NÃO redefina
   o card localmente nas telas; só o .start-grid (largura das colunas) fica local por hub. */
.start-card,
.shortcut-card{
  position:relative;
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg);
  padding:var(--sp-5); cursor:pointer; text-decoration:none; color:inherit;
  transition:border-color var(--transition), box-shadow var(--transition), transform .05s ease;
}
.start-card:hover,
.shortcut-card:hover{ border-color:color-mix(in srgb,var(--corAtiva) 38%,var(--c-border)); box-shadow:var(--sh-sm); }
.start-card:active,
.shortcut-card:active{ transform:translateY(1px); }
.start-card h3,
.shortcut-card h3{ margin:6px 0 0; font-size:var(--fs-lg); }
.start-card p,
.shortcut-card p{ margin:0; color:var(--c-text-muted); font-size:var(--fs-sm); }
.start-card .meta,
.shortcut-card .meta{ margin-top:auto; padding-top:var(--sp-2); color:var(--c-text-soft); font-size:var(--fs-xs); }
.start-card.is-soon, .start-card.soon,
.shortcut-card.is-soon, .shortcut-card.soon{ opacity:.55; cursor:default; }
.start-card.is-soon:hover, .start-card.soon:hover,
.shortcut-card.is-soon:hover, .shortcut-card.soon:hover{ border-color:var(--c-border); box-shadow:none; transform:none; }

/* KPI (dashboards): ícone semântico + label + valor. Use .ico-badge p/ o ícone.
   Hover de realce opcional: defina --kc no card (ex.: .meu-kpi{--kc:#27ae60}) p/ a cor da borda;
   sem --kc, cai na cor da marca. Aceita rótulo/valor como .kpi-label/.kpi-value OU .lbl/.val. */
.kpi-card{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  transition:border-color var(--transition);
}
.kpi-card:hover{ border-color:color-mix(in srgb, var(--kc, var(--corAtiva)) 45%, var(--c-border)); }
.kpi-card .kpi-info{ min-width:0; }
.kpi-card .kpi-label{ color:var(--c-text-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; font-weight:var(--fw-semibold); }
.kpi-card .kpi-value{ font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--c-text); line-height:1.15; font-variant-numeric:tabular-nums; }
.kpi-card .kpi-sub{ color:var(--c-text-soft); font-size:var(--fs-xs); margin-top:2px; }

/* ==========================================================================
   7. BADGES / TAGS
   ========================================================================== */
.badge,.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); line-height:1;
  padding:4px 9px; border-radius:var(--r-pill);
  background:var(--c-surface-2); color:var(--c-text-muted); border:1px solid var(--c-border);
}
.badge-accent{ background:var(--c-accent-soft); color:var(--corAtiva); border-color:transparent; }
.badge-success{ background:var(--c-success-bg); color:var(--c-success); border-color:transparent; }
.badge-info{ background:var(--c-info-bg); color:var(--c-info); border-color:transparent; }
.badge-warning{ background:var(--c-warning-bg); color:var(--c-warning); border-color:transparent; }
.badge-danger{ background:var(--c-danger-bg); color:var(--c-danger); border-color:transparent; }
.badge-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
/* Selo "Plus" — recurso pago (ex.: FIPE histórico/curva). Cor da marca, discreto. */
.plus-badge{ display:inline-flex; align-items:center; line-height:1; font-size:10px; font-weight:var(--fw-bold); letter-spacing:.06em; color:#fff; background:var(--corAtiva); padding:3px 7px; border-radius:var(--r-pill); vertical-align:middle; }

/* ==========================================================================
   8. ALERTS
   ========================================================================== */
.alert{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid transparent; border-left-width:3px;
  border-radius:var(--r-sm);
  font-size:var(--fs-md); margin-bottom:var(--sp-4);
}
.alert-title{ font-weight:var(--fw-semibold); margin:0 0 2px; }
.alert .alert-close{ margin-left:auto; cursor:pointer; opacity:.6; background:none; border:0; font-size:16px; line-height:1; color:inherit; }
.alert-success{ background:var(--c-success-bg); border-color:var(--c-success); color:#155d33; }
.alert-info{    background:var(--c-info-bg);    border-color:var(--c-info);    color:#1d4ed8; }
.alert-warning{ background:var(--c-warning-bg); border-color:var(--c-warning); color:#92600f; }
.alert-danger{  background:var(--c-danger-bg);  border-color:var(--c-danger);  color:#a11d24; }

/* ==========================================================================
   9. BREADCRUMBS
   ========================================================================== */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--c-text-muted); margin:0 0 var(--sp-4); padding:0; list-style:none; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb li+li::before{ content:"/"; color:var(--c-text-soft); }
.breadcrumb a{ color:var(--c-text-muted); }
.breadcrumb a:hover{ color:var(--c-accent); }
.breadcrumb .active{ color:var(--c-text); font-weight:var(--fw-medium); }

/* ==========================================================================
   10. TABELAS (+ harmonização com DataTables Bootstrap)
   ========================================================================== */
.table,table.ds-table{ width:100%; border-collapse:collapse; font-size:var(--fs-md); background:var(--c-surface); }
.table th,.table td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.table thead th{
  font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:#fff;
  text-transform:uppercase; letter-spacing:.03em;
  background:var(--c-text-muted); border-bottom:0;
  white-space:nowrap;
}
.table tbody tr{ transition:background var(--transition); }
.table tbody tr:hover{ background:color-mix(in srgb, var(--corAtiva) 5%, var(--c-surface)); }
.table.table-striped tbody tr:nth-child(odd){ background:color-mix(in srgb, var(--c-text) 6%, var(--c-surface)); }
.table.table-striped tbody tr:nth-child(odd):hover{ background:color-mix(in srgb, var(--corAtiva) 7%, var(--c-surface)); }
.table.table-bordered,.table.table-bordered th,.table.table-bordered td{ border:1px solid var(--c-border); }
.table-wrap{ overflow-x:auto; border:1px solid var(--c-border); border-radius:var(--r-lg); }
.table-wrap .table th:first-child,.table-wrap .table td:first-child{ padding-left:var(--sp-5); }

/* DataTables (Bootstrap) — alinhar ao tema do painel */
.dataTables_wrapper{ font-size:var(--fs-md); color:var(--c-text); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--c-border-strong); border-radius:var(--r-sm);
  padding:6px 10px; font-family:inherit; color:var(--cor_form); background:var(--c-surface);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{ outline:none; border-color:var(--corAtiva); box-shadow:var(--sh-focus); }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ color:var(--c-text-muted); padding:var(--sp-3) 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--r-sm) !important; border:1px solid var(--c-border) !important;
  padding:5px 11px !important; margin:0 2px; color:var(--c-text-muted) !important; background:var(--c-surface) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--corAtiva) !important; border-color:var(--corAtiva) !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--c-accent-soft) !important; border-color:var(--c-accent-soft) !important; color:var(--corAtiva) !important;
}
table.dataTable thead th{ border-bottom:1px solid var(--c-border-strong) !important; }
table.dataTable.no-footer{ border-bottom:1px solid var(--c-border) !important; }

/* ==========================================================================
   10.1 LISTAGEM (padrão dos módulos): cabeçalho + busca + tabela .tbl + pager.
   Centraliza o que estava repetido em cada list.php. A tela só define colunas
   e dados; o visual vem daqui. Marcação: .list-wrap > .list-head (+.list-search)
   + table.tbl.cards-mobile + .pager.
   ========================================================================== */
/* container: SEM padding lateral (barra/tabela ocupam full-width); respiro no fim */
.list-wrap{ padding:0 0 calc(48px + env(safe-area-inset-bottom,0px)); }
/* FAIXA DE AVISO no topo da listagem: de canto a canto, SEM borda nem raio (texto com respiro de 24px).
   Variantes: padrão = âmbar (aviso); .is-info (azul); .is-danger (vermelho). */
.list-wrap .list-note{ display:flex; align-items:center; gap:9px; padding:12px 24px; margin:0; font-size:var(--fs-sm);
  background:#fff7e6; color:#8a6d3b; }
.list-wrap .list-note.is-info{   background:var(--c-info-bg);   color:var(--c-info); }
.list-wrap .list-note.is-danger{ background:var(--c-danger-bg); color:var(--c-danger); }
/* cabeçalho = BARRA integrada no topo: full-width, linha embaixo, FIXA ao rolar, tudo numa fileira */
.list-head{ display:flex; align-items:center; gap:10px; padding:11px 24px; margin:0; flex-wrap:wrap;
  background:var(--c-bg); border-bottom:1px solid var(--c-border); position:sticky; top:0; z-index:5; }
.list-head h1{ margin:0; font-size:var(--fs-xl); line-height:1.2; }
.list-head .count{ color:var(--c-text-muted); font-size:var(--fs-xs); }
.list-head .spacer{ flex:1; }
.list-head .btn{ height:38px; }
/* busca GRANDE: ocupa a barra (sem caixa nem botão) e empurra as ações p/ a direita */
.list-search{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.list-q{ flex:1; width:100%; min-width:0; height:38px; border:0; background:transparent; outline:none; font-size:var(--fs-xl); color:var(--c-text); padding:0 2px; font-family:inherit; }
.list-q::placeholder{ color:var(--c-placeholder); }
.list-q-clear{ color:var(--c-text-soft); text-decoration:none; flex:0 0 auto; }
.list-q-clear:hover{ color:var(--c-danger); }
/* SELECT de barra/toolbar (filtro inline): pill compacto que casa com a barra.
   Use no lugar de .form-control (que é underline full-width, p/ formulário) quando o
   <select> vive numa .list-head / barra de filtros. */
.bar-select{ flex:0 0 auto; width:auto; height:38px; border:1px solid var(--c-border); border-radius:var(--r-pill);
  background:var(--c-surface); color:var(--c-text-muted); font-family:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semibold);
  padding:0 32px 0 14px; cursor:pointer; appearance:none; -webkit-appearance:none; transition:border-color .14s, color .14s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.bar-select:hover{ border-color:var(--c-border-strong); color:var(--c-text); }
.bar-select:focus{ outline:none; border-color:var(--corAtiva); }

/* LISTA minimalista (Nubank): SEM caixa/sombra/cantos; tudo branco; cabeçalho claro;
   registros separados só por uma DIVISÓRIA FINA; hover sutil. */
/* separate (não collapse): o sticky do thead é confiável e bordas/shadow renderizam */
table.tbl{ width:100%; border-collapse:separate; border-spacing:0; background:transparent; }
/* linha de títulos clara e FIXA (gruda logo abaixo da barra de ~60px) */
table.tbl th{ background:var(--c-bg); color:var(--c-text-muted); text-align:left; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.5px; padding:10px 14px; border-bottom:1px solid var(--c-border-strong); white-space:nowrap; position:sticky; top:60px; z-index:4; }
table.tbl td{ padding:14px; border-bottom:1px solid var(--c-border); font-size:var(--fs-md); }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tbody tr{ transition:background .12s; background:transparent; }
table.tbl tbody tr:hover{ background:color-mix(in srgb, var(--c-text) 4%, transparent); }
/* encaixe full-width: 24px de respiro só nas pontas (alinha com a barra) */
table.tbl th:first-child,table.tbl td:first-child{ padding-left:24px; }
table.tbl th:last-child,table.tbl td:last-child{ padding-right:24px; }

/* ===== TABELA DE IMPRESSÃO / RELATÓRIO (.ptbl) =====
   Componente DISTINTO da lista "Nubank" (.tbl, sem caixa): a tabela de relatório é feita
   p/ ler no papel/PDF — tem CAIXA, cabeçalho claro maiúsculo e ZEBRA. Use class="ptbl" nos
   relatórios (executar/construtor). NÃO redefina o .tbl pra isso. `.small` limita a largura.
   O bloco @media print repete o cabeçalho por página, zebra suave e evita quebrar linhas. */
table.ptbl{ width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
table.ptbl th{ background:var(--c-surface-2); color:var(--c-text); text-align:left;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.5px;
  padding:11px 13px; border-bottom:2px solid var(--c-border-strong); white-space:nowrap;
  -webkit-print-color-adjust:exact; print-color-adjust:exact; }
table.ptbl td{ padding:10px 13px; border-bottom:1px solid var(--c-border); font-size:var(--fs-md); vertical-align:middle; }
table.ptbl tr:last-child td{ border-bottom:0; }
table.ptbl tbody tr:nth-child(even){ background:#f1f4f9; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
table.ptbl td.num, table.ptbl th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.ptbl.small{ max-width:760px; }
@media print {
  table.ptbl{ border:1px solid #ccc; }
  table.ptbl thead{ display:table-header-group; }   /* repete cabeçalho em CADA página impressa */
  table.ptbl th{ background:#eef1f6 !important; color:#000 !important; border-bottom:2px solid #b3bac6 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.ptbl td{ border-bottom:1px solid #dde2ea !important; }
  table.ptbl tbody tr:nth-child(even){ background:#f2f5f9 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  table.ptbl tr{ break-inside:avoid; page-break-inside:avoid; }
}

/* coluna ID compacta e discreta (penúltima, antes de Ações) */
.col-id{ color:var(--c-text-soft); font-variant-numeric:tabular-nums; width:1%; white-space:nowrap; }

.cell-nome{ display:flex; align-items:center; gap:10px; }
.cell-nome .avatar{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; }

.row-actions{ white-space:nowrap; text-align:right; }
.row-actions a{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:var(--r-pill); color:var(--c-text-muted); cursor:pointer; text-decoration:none; }
.row-actions a:hover{ background:var(--c-bg); color:var(--corAtiva); }
/* editar/excluir = NEUTROS (lei "cor por ênfase"): o hover cai no genérico acima
   (fundo claro + roxo), sem âmbar/vermelho. Vermelho de excluir só no confirmar. */

/* ===== ESTADO VAZIO RICO (empty-state) — ilustração "groovy" + mensagem amigável =====
   Para contextos de TELA: sem permissão, módulo ainda vazio (1ª vez), onboarding.
   Markup pelo helper PHP emptyState() (core/emptystate.php). REGRA DE OURO: a CAMISA
   do personagem é SEMPRE a cor do cliente ([id="Accent"] -> var(--corAtiva)).
   NÃO confundir com o .empty minimalista da listagem (busca/filtro sem resultado, abaixo). */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px; }
.empty-state.is-full{ min-height:100vh; min-height:100dvh; }     /* ocupa a área toda (ex.: sem permissão) */
.empty-state-art{ width:min(340px,64vw); margin-bottom:14px; }
.empty-state-art svg{ width:100%; height:auto; display:block; }
.empty-state-art svg [id="Accent"]{ fill:var(--corAtiva); }      /* camisa na cor do cliente — regra de ouro */
.empty-state-title{ margin:6px 0; font-size:var(--fs-2xl); font-weight:var(--fw-bold);
  color:var(--c-text); letter-spacing:-.01em; }
.empty-state-msg{ margin:0; max-width:440px; color:var(--c-text-muted); font-size:var(--fs-md); line-height:1.55; }
.empty-state-foot{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.empty-state-note{ margin-top:16px; font-size:var(--fs-sm); color:var(--c-text-soft); }
@media (max-width:680px){ .empty-state{ padding:36px 18px; } .empty-state-art{ width:min(260px,72vw); } }

/* ESTADO VAZIO (null): minimalista — sem caixa cinza, alinhado à esquerda,
   ícone num disco suave pequeno + texto. Funciona com o markup <i class="fa ... fa-2x"></i><br><br>Texto. */
.list-wrap .empty{ padding:30px 24px; text-align:left; color:var(--c-text-soft); background:transparent; border-radius:0; font-size:var(--fs-md); line-height:1.6; }
.list-wrap .empty br{ display:none; }                       /* tira as quebras p/ ícone+texto na mesma linha */
.list-wrap .empty i{ font-size:15px; width:38px; height:38px; flex:0 0 38px; vertical-align:middle; margin-right:12px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--c-surface); border-radius:50%; color:var(--c-text-muted); }
.list-wrap .empty .muted{ display:block; margin-top:6px; margin-left:50px; font-size:var(--fs-sm); }   /* sub-linha alinhada ao texto */
.list-wrap .empty .btn{ margin-left:12px; vertical-align:middle; }

.pager{ display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.pager a,.pager span{ min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border-radius:100%; text-decoration:none; color:var(--c-text); background:var(--c-surface); border:1px solid var(--c-border); font-size:var(--fs-sm); }
.pager a:hover{ border-color:var(--corAtiva); color:var(--corAtiva); }
.pager .cur{ background:var(--corAtiva); color:#fff; border-color:var(--corAtiva); }
.pager .muted{ color:var(--c-text-soft); background:transparent; border:0; }

/* rodapé: lixeira/contagem (esq.) · paginação (dir.) — alinhado às pontas (24px) */
.list-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:0 24px; flex-wrap:wrap; }
.list-foot .foot-left{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.list-foot .foot-right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-left:auto; }
.list-foot .count{ color:var(--c-text-muted); font-size:var(--fs-sm); }
.list-foot .pager{ margin:0; }
.lix-link{ display:inline-flex; align-items:center; gap:6px; color:var(--c-text-muted); font-size:var(--fs-sm); text-decoration:none; }
.lix-link:hover{ color:var(--corAtiva); }

/* dropdown do botão "Novo" (multi-tipo) */
.novo-wrap{ position:relative; }
.novo-menu{ position:absolute; right:0; top:calc(100% + 4px); background:var(--c-surface); border:1px solid var(--c-border); border-radius:8px; box-shadow:var(--sh-lg); min-width:210px; z-index:60; display:none; overflow:hidden; }
.novo-menu.open{ display:block; }
.novo-menu a{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; color:var(--c-text); font-size:var(--fs-sm); }
.novo-menu a:hover{ background:var(--c-bg); color:var(--corAtiva); }

/* SELEÇÃO EM LOTE: a lixeira do registro vira o checkbox; marcar-todos + contador na barra.
   Ative com a classe .sel-mode no .list-wrap. */
.row-actions .row-sel{ display:none; width:18px; height:18px; cursor:pointer; accent-color:var(--corAtiva); vertical-align:middle; margin:0 6px; }
.sel-mode .row-actions .del{ display:none; }
.sel-mode .row-actions .row-sel{ display:inline-block; }
/* lixeira: checkbox sempre visível, SEM esconder as ações por linha (restaurar/eliminar) */
.trash-mode .row-actions .row-sel{ display:inline-block; }
.lote-all{ display:none; }                                  /* marcar-todos (na barra) */
.sel-mode .lote-all{ display:inline-flex; align-items:center; justify-content:center; }
.lote-all input{ margin:0; width:18px; height:18px; accent-color:var(--corAtiva); cursor:pointer; }
.sel-mode .lote-hide{ display:none; }                       /* filtro/novo somem no modo lote */
tr.row-on{ background:color-mix(in srgb, var(--corAtiva) 9%, var(--c-surface)) !important; }
.btn-icon.btn-delete .badge{ background:#fff; color:var(--c-danger); border:0; }   /* contador do "excluir vários" */

/* no celular o avatar do nome vai p/ a direita (combina com table.cards-mobile) */
@media (max-width:680px){
  .list-wrap .cell-nome{ width:100%; }
  .list-wrap .cell-nome .avatar{ order:2; margin-left:auto; }
  .cell-nome .avatar{ width:44px; height:44px; }   /* avatar um pouco maior no celular (toque/legibilidade) */
  /* botões só-ícone = alvo de toque 44px (.list-head .btn-icon vence o .list-head .btn{height:38px}) */
  .btn-icon{ width:44px; height:44px; }
  .list-head .btn-icon{ width:44px; height:44px; }
  .list-head{ gap:8px; padding:11px 18px; }
  .list-q{ font-size:var(--fs-md); }
  /* no card mobile a tabela não tem o respiro lateral de 24px (o card já tem o seu) */
  table.tbl th:first-child,table.tbl td:first-child{ padding-left:0; }
  table.tbl th:last-child,table.tbl td:last-child{ padding-right:0; }
  /* respiro maior no fim da página no celular (depois da paginação) */
  .list-wrap{ padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
}

/* ==========================================================================
   11. LAYOUT DO PAINEL: sidebar + topbar + conteúdo
   - Cores do menu vêm de --fundoMenu/--corTxtMenu/--corMarcadoresSubmenu/--corSubmenuA.
   ========================================================================== */
.app{ display:flex; min-height:100vh; min-height:100dvh; }   /* dvh: respeita as barras do navegador no mobile (não corta o fim) */

/* ---- Sidebar ---- */
.app-sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--c-brand-dark); color:var(--corTxtMenu);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto;
  transition:width var(--transition), flex-basis var(--transition);
  scrollbar-width:thin; scrollbar-color:transparent transparent;   /* Firefox: some até o hover */
}
/* luz da marca que ACOMPANHA o item ativo do menu — anima só transform (GPU), bem leve.
   --glow-y (px, centro do item ativo) é setado por JS no index.php; transição faz o deslize suave. */
.app-sidebar::before{
  content:""; position:absolute; left:0; right:0; top:0; height:230px; pointer-events:none; z-index:0;
  transform:translateY(calc(var(--glow-y, 92px) - 50px));
  background:radial-gradient(110% 62% at 16% 50%, color-mix(in srgb, var(--corAtiva) 48%, transparent) 0%, transparent 70%);
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .app-sidebar::before{ transition:none; } }
/* conteúdo acima da luz */
.app-sidebar > .sidebar-brand,
.app-sidebar > .sidebar-nav{ position:relative; z-index:1; }
.app-sidebar:hover{ scrollbar-color:rgba(255,255,255,.30) transparent; }
.app-sidebar::-webkit-scrollbar{ width:6px; }
.app-sidebar::-webkit-scrollbar-track{ background:transparent; }            /* sem a faixa branca */
.app-sidebar::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.app-sidebar:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); background-clip:padding-box; }
.app-sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.36); background-clip:padding-box; }

.sidebar-brand{
  display:flex; align-items:center; gap:var(--sp-3);
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  padding:0 var(--sp-5);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sidebar-brand .brand-logo{
  width:30px; height:30px; flex:0 0 30px; border-radius:var(--r-sm);
  background:var(--logo-marca) center/contain no-repeat, rgba(255,255,255,.15);
}
.sidebar-brand .brand-name{ font-weight:var(--fw-semibold); font-size:var(--fs-lg); color:var(--corTxtMenu); white-space:nowrap; }

.sidebar-nav{ padding:var(--sp-3) var(--sp-2); flex:1 1 auto; }
.sidebar-section{ padding:var(--sp-4) var(--sp-3) var(--sp-1); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--corTxtMenu) 55%, transparent); }

.nav-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:9px var(--sp-3); margin:1px 0;
  font-size:var(--fontSizeMenu); color:var(--corTxtMenu);
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background var(--transition), color var(--transition);
}
/* ícone do menu = NEUTRO (cor do texto do menu, sem tinta de marca); item ativo fica pleno */
.nav-item .nav-ico{ width:18px; flex:0 0 18px; text-align:center; color:var(--corTxtMenu); opacity:.72; display:flex; justify-content:center; }
.nav-item .nav-label{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item .nav-caret{ transition:transform var(--transition); opacity:.7; }
.nav-item:hover{ background:rgb(255 255 255 / 5%); border-radius:999px; }
/* o destaque do item ativo agora é a LUZ que o acompanha (.app-sidebar::before) */
.nav-item.active .nav-ico{ color:var(--corTxtMenu); opacity:1; }
.nav-item.open .nav-caret{ transform:rotate(90deg); }

/* Submenu */
.nav-submenu{ list-style:none; margin:0; padding:2px 0 2px 0; max-height:0; overflow:hidden; transition:max-height var(--transition); }
.nav-item.open + .nav-submenu{ max-height:600px; }
.nav-submenu a{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:7px var(--sp-3) 7px 38px;
  font-size:var(--fontSizeSubmenu);
  color:color-mix(in srgb, var(--corTxtMenu) 80%, transparent);
  border-radius:var(--r-sm);
}
.nav-submenu a::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--corMarcadoresSubmenu); flex:0 0 5px; }
.nav-submenu a:hover{ background:rgba(255,255,255,.08); color:var(--corTxtMenu); }
.nav-submenu a.active{ color:var(--corSubmenuA); font-weight:var(--fw-medium); }

/* Colapsado (somente desktop — no mobile o controle é o bloco @media abaixo) */
@media (min-width:861px){
  .app.sidebar-collapsed .app-sidebar{ width:var(--sidebar-w-collapsed); flex-basis:var(--sidebar-w-collapsed); }
  .app.sidebar-collapsed .brand-name,
  .app.sidebar-collapsed .nav-label,
  .app.sidebar-collapsed .nav-caret,
  .app.sidebar-collapsed .sidebar-section,
  .app.sidebar-collapsed .nav-submenu,
  .app.sidebar-collapsed .nav-soon{ display:none; }
  .app.sidebar-collapsed .nav-item{ justify-content:center; }
  .app.sidebar-collapsed .sidebar-brand{ padding:0; justify-content:center; }
}

/* ---- Área principal (topbar + conteúdo) ---- */
.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

.app-topbar{
  height:var(--topbar-h); flex:0 0 var(--topbar-h);
  display:flex; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-5);
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  box-shadow:var(--sh-xs);
  position:sticky; top:0; z-index:20;
}
.topbar-toggle{
  display:none;   /* desktop: sidebar fixa, sem hambúrguer. Volta no mobile (@media 860). */
  align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:-6px;   /* alvo de toque ≥44px (padrão mobile do DS) */
  border-radius:var(--r-md); border:1px solid transparent;
  background:transparent; color:var(--c-text-muted); cursor:pointer;
  font-size:1.7rem;   /* glifo bem maior — fácil de acertar no dedo */
}
.topbar-toggle i{ line-height:1; }
.topbar-toggle:hover{ background:var(--c-surface-2); }
/* título da página: agora é o título PRINCIPAL (grande) — o cabeçalho interno das telas de módulo morre */
.topbar-title{ font-size:var(--fs-3xl); font-weight:var(--fw-bold); letter-spacing:-.02em; color:var(--c-text); line-height:1.1; margin-left:5px; }
.topbar-spacer{ flex:1 1 auto; }
.topbar-actions{ display:flex; align-items:center; gap:var(--sp-2); }
.topbar-icon-btn{ position:relative; width:38px; height:38px; border-radius:50%; border:0; background:transparent; color:var(--c-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.topbar-icon-btn:hover{ background:var(--c-surface-2); }
.topbar-icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--corAtiva); border:2px solid var(--c-surface); }

.topbar-user{ display:flex; align-items:center; gap:var(--sp-2); padding:4px 18px 4px 0px; border-radius:var(--r-pill); cursor:pointer; }
.topbar-user:hover{ background:var(--c-surface-2); }
.topbar-user .avatar{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; }
.topbar-user .avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.topbar-user .u-name{ font-size:var(--fs-md); font-weight:var(--fw-medium); }
.topbar-user .u-role{ font-size:var(--fs-xs); color:var(--c-text-muted); }

.app-content{ flex:1 1 auto; padding:var(--sp-6); min-width:0; }
.content-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.content-head .page-title{ margin:0; }
.content-head .page-subtitle{ color:var(--c-text-muted); font-size:var(--fs-md); margin:4px 0 0; }
/* MINIMALISMO: o título da página vive na topbar (grande). Nas telas de MÓDULO
   (qualquer .start-wrap) o cabeçalho interno some: title/subtitle escondidos; se
   o content-head tiver AÇÕES (botões/links), elas permanecem. O HOME usa
   .app-content (não .start-wrap), então mantém o seu content-head intacto. */
.start-wrap > .content-head .page-title,
.start-wrap > .content-head .page-subtitle{ display:none; }
.start-wrap > .content-head:not(:has(.btn)):not(:has(a)){ display:none; margin:0; }

/* Grid utilitário p/ dashboards */
.grid{ display:grid; gap:var(--sp-4); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* ==========================================================================
   12. LOGIN
   - Harmoniza com login/index.php. Usa --fundoMenu/--cor_text_login do tenant.
   ========================================================================== */
.login-screen{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5);
  background:
    radial-gradient(1200px 600px at 0% 0%, color-mix(in srgb, var(--fundoMenu) 22%, transparent), transparent 60%),
    radial-gradient(1000px 500px at 100% 100%, color-mix(in srgb, var(--corAtiva) 16%, transparent), transparent 55%),
    var(--c-bg);
}
.login-card{
  width:100%; max-width:380px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  padding:var(--sp-8) var(--sp-7);
}
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-6); }
.login-brand .login-logo{
  width:160px; height:54px;
  background:var(--logo-login) center/contain no-repeat;
}
.login-brand .login-logo.is-empty{ background:none; }
.login-card h2{ text-align:center; margin:0 0 4px; }
.login-card .login-sub{ text-align:center; color:var(--c-text-muted); font-size:var(--fs-md); margin-bottom:var(--sp-6); }
.login-card .btn-block{ margin-top:var(--sp-5); }
/* botão de entrar usa o accent da marca */
.login-card .btn-login{ --_c:#fff; --_bg:var(--corAtiva); --_bd:var(--corAtiva); }
.login-foot{ text-align:center; margin-top:var(--sp-5); font-size:var(--fs-xs); color:var(--c-text-soft); }

/* ==========================================================================
   13. RESPONSIVO (desktop-first)
   ========================================================================== */
@media (max-width:1100px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  :root{ --topbar-h:54px; }
  .topbar-toggle{ display:inline-flex; }   /* hambúrguer abre o menu (off-canvas) no mobile */
  .topbar-title{ font-size:var(--fs-xl); }  /* título grande, porém cabendo com avatar */
  /* sidebar off-canvas: escondida; o hambúrguer abre o menu completo (248px) */
  .app-sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:60;
    width:var(--sidebar-w); flex-basis:var(--sidebar-w);
    transform:translateX(-100%); box-shadow:var(--sh-lg);
    transition:transform var(--transition);
  }
  .app.sidebar-open .app-sidebar{ transform:translateX(0); }
  .app-backdrop{ display:none; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:50; }
  .app.sidebar-open .app-backdrop{ display:block; }
  .app-content{ padding:var(--sp-4); }
  /* cards de atalho: 2 por linha no celular. GRÁFICOS ficam 1/linha via grid local;
     KPIs também ficam 1/linha (valores grandes não cabem em 2 colunas estreitas) — por isso
     .kpi-grid fica FORA deste override e segue o auto-fit local da tela. */
  /* !important: as telas "start" definem .start-grid local (auto-fill) que sobreporia */
  .grid-2,.grid-3,.grid-4,.start-grid{ grid-template-columns:1fr 1fr !important; }
  .form-row > .form-group{ flex-basis:100%; }
  /* tabelas não espremem: rolam lateralmente (baseline antes do modo cards) */
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* alvos de toque confortáveis */
  .btn{ min-height:42px; } .btn-sm{ min-height:38px; }
  /* topbar: só foto + setinha (sem o nome) */
  .topbar-user .u-name, .topbar-user .u-role{ display:none; }
  .topbar-user{ padding:4px; gap:6px; }
  /* cabeçalho de página/form mais compacto no celular */
  .content-head .page-title{ font-size:var(--fs-2xl); }
  .content-head .page-subtitle{ font-size:var(--fs-sm); }
}

/* ---- Tabela em CARDS no celular ----------------------------------------
   Cada linha vira um cartão com "RÓTULO | valor" (2 colunas). Requer a classe
   .cards-mobile na <table> e data-label="<Coluna>" em cada <td>. Use nas LISTAGENS. */
@media (max-width:680px){
  /* a TABELA fica transparente: o vão entre os cards mostra o fundo da página
     (não branco), destacando cada cartão. */
  table.cards-mobile{ background:transparent; box-shadow:none; border-radius:0; overflow:visible; }
  table.cards-mobile thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* no celular o gradiente da linha não vale: cada card é uma superfície branca limpa */
  table.cards-mobile tbody tr{ display:block; border:1px solid var(--c-border); padding:var(--sp-3) var(--sp-4); }
  /* rótulo do tamanho do texto (piso 56px p/ alinhar os curtos) colado ao valor —
     sem vão no meio; rótulos longos (NOME FANTASIA) expandem sem quebrar. */
  table.cards-mobile tbody td{ display:grid; grid-template-columns:minmax(56px,auto) minmax(0,1fr); gap:12px; align-items:center; border:0 !important; padding:7px 0; text-align:left; white-space:nowrap; overflow:hidden; }
  table.cards-mobile tbody td::before{ content:attr(data-label); font-weight:var(--fw-semibold); color:var(--c-text-muted); text-transform:uppercase; font-size:var(--fs-xs); letter-spacing:.03em; line-height:1.5; white-space:nowrap; }
  /* valor longo NÃO quebra linha no card: trunca com reticências */
  /* NENHUM filho estica na célula-grid do card: chips (badge/tag e qualquer *-badge custom,
     ex.: .fipe-badge) ficam COMPACTOS à esquerda; valor/texto longo segue truncando
     (justify-self:start = tamanho do conteúdo; max-width:100% + ellipsis = trunca se exceder). */
  table.cards-mobile tbody td > *{ min-width:0; max-width:100%; justify-self:start; overflow:hidden; text-overflow:ellipsis; }
  table.cards-mobile .cell-nome{ min-width:0; }
  table.cards-mobile .cell-nome span{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
  /* coluna ID: no card volta à largura normal (o width:1% é só p/ a tabela no desktop) */
  table.cards-mobile tbody td.col-id{ width:auto; }
  table.cards-mobile tbody td:empty{ display:none; }
  /* ações: label + ícones na MESMA linha (flex evita o 2º ícone cair p/ baixo no grid).
     No celular os alvos ficam MAIORES e com o fundo da própria cor (editar=âmbar,
     excluir=vermelho) + mais espaço entre eles — p/ o dedo não errar e clicar em excluir. */
  /* celular: a barra de ações fica OCULTA; aparece só na linha TOCADA (.is-row-active, via list-rows.js) */
  table.cards-mobile tbody td.row-actions{ display:none; align-items:center; gap:14px; }
  table.cards-mobile tbody tr.is-row-active td.row-actions{ display:flex; }
  /* em seleção/lixeira a barra fica sempre visível (o checkbox .row-sel vive aqui dentro) */
  .sel-mode table.cards-mobile tbody td.row-actions,
  .trash-mode table.cards-mobile tbody td.row-actions{ display:flex; }
  table.cards-mobile tbody td.row-actions::before{ flex:0 0 56px; }
  table.cards-mobile tbody td.row-actions a{ width:44px; height:44px; border-radius:var(--r-pill); font-size:16px; }
  /* ações no card mobile = NEUTRAS (fundo branco + ícone cinza), sem âmbar/vermelho */
  table.cards-mobile tbody td.row-actions a.edit,
  table.cards-mobile tbody td.row-actions a.del{ background:var(--c-bg); color:var(--c-text-muted); }
}
/* ---- Respiro no FIM do conteúdo (mobile) ----------------------------------
   No celular a barra do navegador cobre o rodapé; sem isto o último item fica
   "cortado" ao rolar até o fim. Damos respiro + a safe-area do iOS (home
   indicator) aos containers de PÁGINA que rolam. Telas novas: usar um destes
   wraps para herdar o comportamento. Combina com height:100dvh da casca. */
@media (max-width:860px){
  .list-wrap, .form-wrap, .start-wrap, .rel-wrap, .rep-wrap,
  .cb-wrap, .fu-wrap, .msg-wrap, .perm-wrap, .flt-wrap{
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width:520px){
  .login-card{ padding:var(--sp-6) var(--sp-5); }
  .content-head{ flex-direction:column; align-items:stretch; }
  .content-head .btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   TRILHO HORIZONTAL no MOBILE (estilo Nubank) — OPT-IN via .rail-m
   - Use SÓ em telas-dashboard onde há conteúdo (gráficos) competindo por espaço
     vertical embaixo; NÃO use em telas que são só cards (launchers/config), onde
     esconder atalho atrás de scroll só atrapalha — ali grade que quebra linha é melhor.
   - Vira flex com overflow lateral; filho com largura fixa < 100% => o próximo
     "espia" na borda (a affordance do swipe). Barra de rolagem escondida.
   - !important: as telas "start" definem .start-grid/.kpi-grid local (carrega depois
     do DS) que sobreporia o display.
   - Sangra -28px (= padding lateral da .start-wrap) p/ ir até a borda da tela.
   ========================================================================== */
@media (max-width:680px){
  .rail-m{
    --rail-bleed:28px;   /* = padding lateral do wrapper; telas com outro padding sobrescrevem (ex.: fu-wrap=26px) */
    display:flex !important; gap:12px;
    overflow-x:auto; overflow-y:hidden;
    margin-left:calc(-1 * var(--rail-bleed)); margin-right:calc(-1 * var(--rail-bleed));
    padding:2px var(--rail-bleed) 14px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .rail-m::-webkit-scrollbar{ display:none; }
  .rail-m > *{ flex:0 0 76% !important; }
}

/* ==========================================================================
   QUICK-ACTIONS (mobile) — card de START vira botão CIRCULAR (estilo Nubank)
   No celular o hub de atalhos vira grade de ícones REDONDOS (maiores) + título
   embaixo (pode quebrar) + BADGE com o número (do .meta, injetado por
   start-actions.js). A descrição (<p>) é descartada. Desktop/tablet (>680px)
   mantêm o card retangular. Fica DEPOIS do @media 860 p/ vencer o grid 2-col.
   ========================================================================== */
.sc-badge{ display:none; }   /* badge numérico aparece só no modo quick-action (mobile) */
@media (max-width:680px){
  /* GRADE (não carrossel): anula o trilho horizontal .rail-m que as telas de start usam.
     3 COLUNAS (não 4): os rótulos do ERP são palavras longas ("Colaboradores"/"Concorrentes")
     e em 4 col (~95px) encostavam um no outro. 3 col dá ~120px e respiro real. */
  .start-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:20px 8px;
    overflow:visible; margin:0; padding:0; }
  .start-card, .shortcut-card{
    background:transparent !important; border:0 !important; border-radius:0; box-shadow:none !important;
    padding:6px 4px; gap:8px; align-items:center; text-align:center;
  }
  .start-card:hover, .shortcut-card:hover{ border-color:transparent; box-shadow:none; transform:none; }
  /* círculo CINZA demarcado: o .ico-badge é branco (p/ saltar do card cinza); aqui o fundo é
     branco, então o branco sumiria. Cinza = igual aos quick-actions da Nubank. Prioridade = lavanda. */
  .start-card .ico-badge, .shortcut-card .ico-badge{ width:60px; height:60px; font-size:24px; position:relative; background:var(--c-surface-2); }
  .start-card .ico-priority, .start-card .ico-accent, .shortcut-card .ico-priority, .shortcut-card .ico-accent{ background:var(--c-accent-soft); }
  /* rótulo: reserva 2 linhas (min-height) p/ os ícones ficarem alinhados entre fileiras
     mesmo quando um nome quebra ("Pessoa Jurídica") e o vizinho não ("Sócios"). */
  .start-card h3, .shortcut-card h3{ font-size:var(--fs-sm); font-weight:var(--fw-medium); margin:0;
    line-height:1.18; min-height:2.36em; display:flex; align-items:flex-start; justify-content:center;
    overflow-wrap:break-word; hyphens:none; }
  .start-card p, .shortcut-card p{ display:none; }          /* descrição descartável no celular */
  .start-card .meta, .shortcut-card .meta{ display:none; }  /* o texto do .meta vira o badge numérico */
  .sc-badge{ display:flex; align-items:center; justify-content:center; position:absolute; top:-3px; right:-6px;
    min-width:20px; height:20px; padding:0 6px; border-radius:var(--r-pill); background:var(--corAtiva); color:#fff;
    font-size:11px; font-weight:var(--fw-bold); line-height:1; border:2px solid var(--c-bg); }
  .start-card.is-soon, .shortcut-card.is-soon, .start-card.soon, .shortcut-card.soon{ opacity:.5; }
}

/* ==========================================================================
   AJUSTES MOBILE (≤680) — barra de topo de start/dashboard
   - Breadcrumb redundante no celular (o título já vive na topbar da casca): SOME.
   (O .refresh-status já é badge no desktop e no mobile — ver bloco do componente.)
   ========================================================================== */
@media (max-width:680px){
  .breadcrumb{ display:none; }
}

/* ENTRADA suave (CSS puro, à prova de falha — sem depender de JS): fade + sobe.
   Stagger com .anim-d1/.anim-d2/.anim-d3. O bloco reduced-motion abaixo zera a duração. */
@keyframes ds-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.anim-rise{ animation:ds-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.anim-d1{ animation-delay:.07s; } .anim-d2{ animation-delay:.14s; } .anim-d3{ animation-delay:.21s; }

/* Acessibilidade: respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation-duration:.001ms !important; }
}

/* ===== Card de clima (home + coluna do Feed) — preenchido por /assets/js/clima.js ===== */
.clima-list{ display:flex; flex-direction:column; }
.clima-loading{ color:var(--c-text-muted); font-size:var(--fs-sm); padding:4px 0; }
.clima-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--c-border); }
.clima-row:last-child{ border-bottom:0; }
.clima-ic{ width:28px; height:28px; flex:none; color:var(--c-text-muted); }
.clima-ic svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.clima-info{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.clima-cidade{ font-weight:var(--fw-semibold); color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clima-cond{ color:var(--c-text-muted); font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clima-temp{ font-weight:var(--fw-bold); font-size:var(--fs-lg); color:var(--c-text); font-variant-numeric:tabular-nums; flex:none; }
.clima-mm{ color:var(--c-text-muted); font-size:var(--fs-sm); font-variant-numeric:tabular-nums; flex:none; text-align:right; white-space:nowrap; }

/* ===== Emoji picker (chat, comentários do feed) — lib assets/js/emoji.js ===== */
.emoji-btn{ flex:none; border:0; background:transparent; cursor:pointer; color:var(--c-text-muted);
  font-size:17px; line-height:0; padding:7px; border-radius:50%; }
.emoji-btn:hover{ background:var(--c-surface-2); color:var(--c-text); }
.emoji-pop{ position:fixed; z-index:var(--z-modal,1000); width:280px; background:var(--c-bg);
  border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--sh-lg); overflow:hidden; }
.emoji-pop[hidden]{ display:none; }
.emoji-tabs{ display:flex; border-bottom:1px solid var(--c-border); }
.emoji-tab{ flex:1; border:0; background:transparent; cursor:pointer; padding:8px 0; color:var(--c-text-muted); font-size:16px; }
.emoji-tab:hover{ background:var(--c-surface); }
.emoji-tab.on{ color:var(--corAtiva); box-shadow:inset 0 -2px 0 var(--corAtiva); }
.emoji-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:2px; padding:8px; max-height:200px; overflow-y:auto; }
.emoji-i{ border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:4px 0; border-radius:var(--r-sm); }
.emoji-i:hover{ background:var(--c-surface-2); }

/* Chat: fontes maiores + emoji solitário grande/sem-bolha. Aqui (asset versionado por filemtime,
   sempre fresco) além do <style> embutido na casca, p/ vencer cache de opcache do index.php.
   .chat-dock dá especificidade > regra-base embutida; !important vence o fundo roxo do .me. */
.chat-dock .chat-bubble{ font-size:15px; }
.chat-dock .chat-input{ font-size:15px; }
.chat-dock .chat-empty{ font-size:14px; }
.chat-dock .chat-msg.solo .chat-bubble{ background:transparent !important; border:0 !important;
  padding:0 !important; font-size:46px !important; line-height:1.15 !important; }
.chat-dock .chat-msg.solo .chat-meta{ color:var(--c-text-muted); }