/* ════════════════════════════════════════════════════════════════════════
   VIDRO LÍQUIDO — skin do Argos (v4.60.0)
   Portada do design "SEMELC ERP — Vidro Líquido" (claude design/, arquivo único).
   REGRA: só reestiliza seletores EXISTENTES — nenhum id/classe/função muda.
   Carregada DEPOIS do <style> do crm.html: empate de especificidade = ela vence.
   Padrão de override: `body .sel, body.dark-mode .sel` para vencer as ~260
   regras `body.dark-mode ...` hardcoded do CSS antigo.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS (claro) ─────────────────────────────────────────────────── */
:root{
  --bg:#F3F4F7;
  --surface:#FFFFFF; --surface-2:#FAFBFC; --surface-hover:#F1F3F5;
  --border:#E5E7EB; --border-strong:#D6DAE0;
  --text:#14161B; --text-2:#39404A; --text-3:#586069;

  --brand:#B11F2C; --brand-strong:#8E1722; --brand-soft:#FBE8EA;
  --brand-ring:rgba(177,31,44,.32); --brand-on:#FFFFFF;
  --brand-grad:linear-gradient(135deg,#D7273A 0%,#B11F2C 55%,#8E1622 100%);
  --brand-glow:0 8px 26px -8px rgba(177,31,44,.45);

  --rail-bg:#16181D; --rail-grad:linear-gradient(180deg,#1A1D23 0%,#131519 100%);
  --rail-text:#D5DAE1; --rail-muted:#9AA3AF; --rail-hover:#22262E;
  --rail-active-bg:rgba(224,72,86,.16); --rail-active-text:#FFFFFF;
  --rail-border:#262A32; --rail-accent:#E8505F;

  --ok-bg:#E4F4E9;    --ok-text:#15703D;    --ok-dot:#1E9E55;
  --warn-bg:#FBEED2;  --warn-text:#875400;  --warn-dot:#C98A12;
  --danger-bg:#FBE2E4;--danger-text:#A61824;--danger-dot:#D23241;
  --info-bg:#E2EDFB;  --info-text:#13549E;  --info-dot:#2C7BE5;
  --purple-bg:#EBEAFD;--purple-text:#4A41C4;--purple-dot:#6E63E8;

  --prata:#9AA4B2; --prata-clara:#E6EAF0; --prata-escura:#6E7886;
  --fio-metal:linear-gradient(90deg,transparent,rgba(154,164,178,.85),transparent);

  --vidro:rgba(255,255,255,.44); --vidro-2:rgba(255,255,255,.34);
  --vidro-borda:rgba(255,255,255,.85); --vidro-ativo:rgba(255,255,255,.82);
  --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.25);
  --desfoque:saturate(180%) blur(22px);
  --reflexo:linear-gradient(105deg,transparent,rgba(110,120,134,.18),transparent);

  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 1px 1px rgba(16,24,40,.03);
  --shadow-md:0 2px 4px rgba(16,24,40,.05),0 14px 32px -10px rgba(16,24,40,.16);
  --shadow-lg:0 24px 60px -16px rgba(16,24,40,.28);

  --r:14px; --r-sm:10px; --r-xs:8px; --r-pill:999px;
  --easing:cubic-bezier(.32,.8,.24,1);
}

/* ─── TOKENS (escuro) — engata no body.dark-mode existente ───────────── */
body.dark-mode{
  --bg:#0C0D10;
  --surface:#16181D; --surface-2:#1B1E24; --surface-hover:#22262D;
  --border:#262A31; --border-strong:#333945;
  --text:#F1F3F6; --text-2:#C2C8D2; --text-3:#98A0AC;

  --brand:#E8505F; --brand-strong:#F06A77; --brand-soft:rgba(232,80,95,.15);
  --brand-ring:rgba(232,80,95,.34);
  --brand-grad:linear-gradient(135deg,#17181C 0%,#9B2530 45%,#C7313D 100%);
  --brand-glow:0 6px 22px -7px rgba(232,80,95,.45);

  --rail-bg:#0A0B0D; --rail-grad:linear-gradient(180deg,#101216 0%,#0A0B0D 100%);
  --rail-hover:#1B1E24; --rail-border:#1C1F25;

  --ok-bg:rgba(30,158,85,.16);     --ok-text:#62D08C;   --ok-dot:#39B86B;
  --warn-bg:rgba(201,138,18,.18);  --warn-text:#E8B85F; --warn-dot:#D79B2C;
  --danger-bg:rgba(210,50,65,.18); --danger-text:#F2868F;--danger-dot:#E8505F;
  --info-bg:rgba(44,123,229,.18);  --info-text:#74AEF2; --info-dot:#4A90E8;
  --purple-bg:rgba(110,99,232,.20);--purple-text:#A9A2F5;--purple-dot:#8478F0;

  --vidro:rgba(20,24,32,.44); --vidro-2:rgba(255,255,255,.07);
  --vidro-borda:rgba(255,255,255,.12); --vidro-ativo:rgba(255,255,255,.14);
  --vidro-brilho:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05),inset 1px 0 0 rgba(255,255,255,.08);
  --reflexo:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px -4px rgba(0,0,0,.5);
  --shadow-lg:0 18px 44px -12px rgba(0,0,0,.66);
}

/* ─── BASE ───────────────────────────────────────────────────────────── */
body, body.dark-mode{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(177,31,44,.05), transparent 60%),
    radial-gradient(900px 480px at -10% 100%, rgba(154,164,178,.10), transparent 55%),
    var(--bg);
  color:var(--text-2);
}
body .content, body.dark-mode .content{background:transparent}
body ::-webkit-scrollbar{width:10px;height:10px}
body ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid transparent;background-clip:content-box}
body ::-webkit-scrollbar-thumb:hover{background:var(--prata);background-clip:content-box}
body ::-webkit-scrollbar-track{background:transparent}

/* números tabulares onde há valores */
body .kpi-val, body .tnum{font-variant-numeric:tabular-nums}

/* ─── SIDEBAR (rail escura nos 2 temas) ──────────────────────────────── */
body .sidebar, body.dark-mode .sidebar{
  background:var(--rail-grad);
  border-right:1px solid var(--rail-border);
}
body .sb-logo, body.dark-mode .sb-logo{border-bottom:1px solid var(--rail-border);position:relative}
body .sb-logo::after{content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:1px;background:var(--fio-metal);opacity:.6}
body .nav-item, body.dark-mode .nav-item{
  border-radius:var(--r-pill);margin:1px 8px;color:var(--rail-text);
  transition:background .16s var(--easing),color .16s var(--easing);
}
body .nav-item:hover, body.dark-mode .nav-item:hover{background:var(--rail-hover);color:#fff}
body .nav-item.active, body.dark-mode .nav-item.active{
  background:var(--rail-active-bg);color:var(--rail-active-text);
  border-left:none;box-shadow:inset 0 0 0 1px rgba(232,80,95,.25);
}
body .sb-sec-hdr, body.dark-mode .sb-sec-hdr{color:var(--rail-muted)}
body .sb-bottom, body.dark-mode .sb-bottom{border-top:1px solid var(--rail-border)}

/* ─── TOPBAR + ABAS DE HUB (vidro) ───────────────────────────────────── */
body .topbar, body.dark-mode .topbar{
  background:linear-gradient(160deg,var(--vidro-2),transparent 46%),var(--vidro);
  -webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
  border-bottom:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-brilho);
}
body .tb-title, body.dark-mode .tb-title{color:var(--text);font-weight:700;letter-spacing:.2px}
body #hub-tabs, body.dark-mode #hub-tabs{
  background:linear-gradient(160deg,var(--vidro-2),transparent 60%),var(--vidro);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
body .hub-tab, body.dark-mode .hub-tab{
  color:var(--text-3);font-weight:600;border-bottom:2px solid transparent;
  transition:color .15s var(--easing),border-color .15s var(--easing);
}
body .hub-tab:hover, body.dark-mode .hub-tab:hover{color:var(--text)}
body .hub-tab.active, body.dark-mode .hub-tab.active{color:var(--brand);border-bottom-color:var(--brand)}
body .hub-dd-menu, body.dark-mode .hub-dd-menu{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-md);
}

/* ─── CARDS / KPIs ───────────────────────────────────────────────────── */
body .card, body.dark-mode .card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);
}
body .kpi-card, body.dark-mode .kpi-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .18s var(--easing),box-shadow .18s var(--easing),border-color .18s;
}
body .kpi-card::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:var(--fio-metal);opacity:.55;
}
body .kpi-card:hover, body.dark-mode .kpi-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);
}
body .kpi-val, body.dark-mode .kpi-val{color:var(--text);font-weight:800;letter-spacing:-.4px}
body .kpi-label, body.dark-mode .kpi-label{color:var(--text-3);font-weight:600;letter-spacing:.6px}

/* ─── BOTÕES ─────────────────────────────────────────────────────────── */
body .btn-primary, body.dark-mode .btn-primary{
  background:var(--brand-grad);color:var(--brand-on);border:none;border-radius:var(--r-sm);
  font-weight:700;box-shadow:var(--brand-glow);
  transition:transform .14s var(--easing),box-shadow .18s var(--easing),filter .15s;
}
body .btn-primary:hover, body.dark-mode .btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
body .btn-primary:active, body.dark-mode .btn-primary:active{transform:scale(.98)}
body .btn-ghost, body .btn-outline, body.dark-mode .btn-ghost, body.dark-mode .btn-outline{
  background:var(--surface);color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-sm);
  font-weight:600;transition:all .15s var(--easing);
}
body .btn-ghost:hover, body .btn-outline:hover, body.dark-mode .btn-ghost:hover, body.dark-mode .btn-outline:hover{
  background:var(--surface-hover);border-color:var(--border-strong);transform:translateY(-1px);
}
body .btn-ghost:active, body .btn-outline:active{transform:scale(.98)}
body .tb-btn, body.dark-mode .tb-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);border-radius:var(--r-pill);
  transition:all .15s var(--easing);
}
body .tb-btn:hover, body.dark-mode .tb-btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}

/* ─── INPUTS / FILTROS ───────────────────────────────────────────────── */
body .form-input, body .form-select, body .form-textarea,
body.dark-mode .form-input, body.dark-mode .form-select, body.dark-mode .form-textarea{
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s;
}
body .form-input:focus, body .form-select:focus, body .form-textarea:focus,
body.dark-mode .form-input:focus, body.dark-mode .form-select:focus, body.dark-mode .form-textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);
}
body .filter-input, body .filter-select, body.dark-mode .filter-input, body.dark-mode .filter-select{
  background:var(--surface);color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-pill);
  transition:border-color .15s,box-shadow .15s;
}
body .filter-input:focus, body .filter-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
body .form-label, body.dark-mode .form-label{color:var(--text-3);font-weight:600}

/* busca global */
body .gs-input, body.dark-mode .gs-input{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);color:var(--text);
}
body .gs-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
body .gs-dropdown, body.dark-mode .gs-dropdown{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);
}

/* ─── TABELAS ────────────────────────────────────────────────────────── */
body table th, body.dark-mode table th{
  background:var(--surface-2);color:var(--text-3);font-weight:700;letter-spacing:.5px;
  border-bottom:1px solid var(--border);
}
body table td, body.dark-mode table td{border-bottom:1px solid var(--border);color:var(--text-2)}
body tbody tr, body.dark-mode tbody tr{transition:background .12s}
body tbody tr:hover, body.dark-mode tbody tr:hover{background:var(--surface-hover)}

/* ─── BADGES / TAGS ──────────────────────────────────────────────────── */
body .sb, body.dark-mode .sb{border-radius:var(--r-pill);font-weight:700;letter-spacing:.2px}
body .k-tag, body.dark-mode .k-tag{border-radius:var(--r-pill)}
body .cl-badge, body.dark-mode .cl-badge{border-radius:var(--r-pill);font-weight:700}

/* ─── KANBAN ─────────────────────────────────────────────────────────── */
body .k-card, body.dark-mode .k-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
  transition:transform .15s var(--easing),box-shadow .18s var(--easing);
}
body .k-card:hover, body.dark-mode .k-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
body .kb-ghost, body.dark-mode .kb-ghost{opacity:.4;border:2px dashed var(--brand)!important;border-radius:var(--r-sm)}
body .k-card.sortable-chosen{box-shadow:var(--shadow-lg)}
body .kb-col, body.dark-mode .kb-col{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
body .k-col-body:empty{border:1px dashed var(--border)}

/* ─── MODAIS (vidro de verdade) ──────────────────────────────────────── */
body .modal-overlay, body.dark-mode .modal-overlay{
  background:rgba(10,12,16,.5);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
body .modal, body.dark-mode .modal{
  background:linear-gradient(160deg,var(--vidro-2),transparent 46%),var(--surface);
  border:1px solid var(--vidro-borda);border-radius:var(--r);
  box-shadow:var(--vidro-brilho),var(--shadow-lg);
}
body .modal-title, body.dark-mode .modal-title{color:var(--text);font-weight:700}

/* ─── TOAST / NOTIFICAÇÕES / FAB ─────────────────────────────────────── */
body .toast, body.dark-mode .toast{
  background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 50%),rgba(18,20,26,.86);
  -webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);
}
body #ia-fab, body.dark-mode #ia-fab{
  background:var(--brand-grad);box-shadow:var(--brand-glow),var(--shadow-md);
}
body #ia-painel, body.dark-mode #ia-painel{
  border-radius:var(--r);border:1px solid var(--rail-border);box-shadow:var(--shadow-lg);
}

/* ─── PÁGINA / TÍTULOS ───────────────────────────────────────────────── */
body .pg-title, body.dark-mode .pg-title{color:var(--text);font-weight:800;letter-spacing:-.3px}
body .pg-sub, body.dark-mode .pg-sub{color:var(--text-3)}
body .card-title, body.dark-mode .card-title{color:var(--text);font-weight:700}

/* ─── SKELETON (disponível p/ as telas trocarem o "Carregando...") ───── */
@keyframes vidro-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
body .skel{
  background:linear-gradient(90deg,var(--surface-hover) 25%,var(--border) 37%,var(--surface-hover) 63%);
  background-size:400% 100%;animation:vidro-shimmer 1.3s ease infinite;border-radius:6px;color:transparent!important;
}

/* ─── MOVIMENTO REDUZIDO ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body .kpi-card, body .k-card, body .btn-primary, body .btn-ghost, body .btn-outline{transition:none}
  body .kpi-card:hover, body .k-card:hover, body .btn-primary:hover, body .btn-ghost:hover{transform:none}
  body .skel{animation:none}
}

/* ════════════════════════════════════════════════════════════════════════
   LOGIN (login.html linka esta mesma folha)
   ════════════════════════════════════════════════════════════════════════ */
body .login-wrap{font-family:'Inter','Segoe UI',system-ui,sans-serif}
body .login-card{
  background:linear-gradient(160deg,var(--vidro-2),transparent 46%),var(--vidro);
  -webkit-backdrop-filter:var(--desfoque);backdrop-filter:var(--desfoque);
  border:1px solid var(--vidro-borda);border-radius:18px;
  box-shadow:var(--vidro-brilho),var(--shadow-lg);
}
body .btn-login{
  background:var(--brand-grad);border:none;border-radius:var(--r-pill);font-weight:700;
  box-shadow:var(--brand-glow);transition:transform .14s var(--easing),filter .15s;
}
body .btn-login:hover{transform:translateY(-1px);filter:brightness(1.06)}
body .btn-login:active{transform:scale(.98)}

/* ════════════════════════════════════════════════════════════════════════
   VIDRO LÍQUIDO — FASE 3 (v4.64.0)
   Aplicação COMPLETA do pacote "Semelc ERP — Vidro Líquido v3":
   sidebar flutuante de vidro, topbar em cápsula, pílulas em todas as abas/
   chips/botões, Space Grotesk nos números, vidro nos modais/kanban/toasts,
   camada de performance (mata as animações infinitas da skin HUD antiga)
   e otimização mobile/tablet. Camada ADITIVA: para reverter, apague deste
   comentário até o fim do arquivo.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── FONTES (variáveis, subset latin — pt-BR completo) ───────────────── */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/inter-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ─── PERFORMANCE: desliga o custo herdado da skin HUD ────────────────── */
/* aurora gigante com blur animado */
body::before, body.dark-mode::before{display:none}
/* scanner vertical da sidebar + linha vermelha do topo */
body .sidebar::after, body.dark-mode .sidebar::after{display:none}
body .sidebar::before, body.dark-mode .sidebar::before{display:none}
/* varredura de luz do logo */
body .sb-logo::before, body.dark-mode .sb-logo::before{display:none}
/* varredura da borda do topbar */
body .topbar::after, body.dark-mode .topbar::after{display:none}
/* FAB: flutuação + pulso infinitos */
body #ia-fab, body.dark-mode #ia-fab{animation:none}
body #ia-fab::after, body.dark-mode #ia-fab::after{animation:none;box-shadow:none}
/* acento do menu ativo: energia fluindo */
body .nav-item.active::before, body.dark-mode .nav-item.active::before{
  animation:none!important;
  background:linear-gradient(180deg,#F0626F,#B11F2C)!important;
  box-shadow:0 0 10px rgba(232,80,95,.45);
}

/* ─── SIDEBAR: painel flutuante de vidro escuro ───────────────────────── */
body .sidebar, body.dark-mode .sidebar{
  position:relative;
  margin:12px 14px 12px 12px;
  height:calc(100vh - 24px);
  border-radius:26px;
  border-right:none;
  background:
    linear-gradient(165deg, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(120% 80% at 88% -12%, rgba(177,31,44,.20), transparent 58%),
    radial-gradient(110% 70% at -8% 112%, rgba(177,31,44,.12), transparent 55%),
    rgba(13,15,20,.92)!important;
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.30),
    inset 2px 0 1px -1px rgba(255,255,255,.12),
    inset -2px 0 1px -1px rgba(255,255,255,.05),
    inset 0 -3px 3px -2px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.06),
    0 12px 24px -12px rgba(8,10,14,.50),
    0 30px 60px -24px rgba(8,10,14,.60);
  overflow:hidden;
}
body.dark-mode .sidebar{
  background:
    linear-gradient(165deg, rgba(255,255,255,.09), transparent 38%),
    radial-gradient(120% 80% at 88% -12%, rgba(177,31,44,.22), transparent 58%),
    radial-gradient(110% 70% at -8% 112%, rgba(177,31,44,.12), transparent 55%),
    rgba(16,19,26,.92)!important;
}
/* aro 3D: fio de luz percorrendo a borda (via máscara) */
body .sidebar::after, body.dark-mode .sidebar::after{
  content:'';display:block;position:absolute;inset:0;width:auto;height:auto;
  z-index:5;pointer-events:none;animation:none;box-shadow:none;
  border-radius:inherit;padding:1.5px;
  background:linear-gradient(155deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,.05) 42%,
    rgba(232,80,95,.18) 62%, rgba(255,255,255,.03) 78%, rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  body .sidebar::after, body.dark-mode .sidebar::after{display:none}
}
/* cabeçalho do logo: vidro limpo, sem grade HUD */
body .sb-logo, body.dark-mode .sb-logo{
  background:linear-gradient(160deg, rgba(255,255,255,.07), transparent 52%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
body .sb-logo::after, body.dark-mode .sb-logo::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 50%,transparent);box-shadow:none;
}
/* rótulos de seção: sublinhado prata suave */
body .sb-sec::after, body.dark-mode .sb-sec::after{
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent);box-shadow:none;opacity:.85;
}
/* itens: pílulas de vidro */
body .nav-item, body.dark-mode .nav-item{border-radius:999px;margin:1px 10px;padding:9px 13px}
body .nav-item:hover, body.dark-mode .nav-item:hover{background:rgba(255,255,255,.07)}
body .nav-item.active, body.dark-mode .nav-item.active{
  background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%), rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px -10px rgba(0,0,0,.6),
    0 0 22px -8px rgba(232,80,95,.40);
}
body .nav-item.active::before, body.dark-mode .nav-item.active::before{
  left:-6px;top:50%;bottom:auto;transform:translateY(-50%);height:18px;width:4px;border-radius:999px;
}
body .nav-item:active{transform:scale(.98)}
body .sidebar.collapsed .nav-item, body.dark-mode .sidebar.collapsed .nav-item{margin:1px 7px;padding:10px 0}
/* rodapé: vidro (sai o degradê vermelho da base — o painel já tem o brilho) */
body .sb-bottom, body.dark-mode .sb-bottom{
  border-top:1px solid rgba(255,255,255,.07);
  background:linear-gradient(0deg, rgba(255,255,255,.05), transparent 70%);
}
body .sb-bottom::before, body.dark-mode .sb-bottom::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20) 50%,transparent);box-shadow:none;
}
body .sb-avatar, body.dark-mode .sb-avatar{
  background:var(--brand-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(177,31,44,.5);
}
body .sb-toggle, body.dark-mode .sb-toggle{border-radius:999px}
body .sb-toggle:hover, body.dark-mode .sb-toggle:hover{background:rgba(255,255,255,.10)}
/* sidebar RECOLHIDA (só desktop/tablet — no celular a gaveta abre cheia):
   logo pequena dentro de um globo de vidro; texto some (antes a logo era
   cortada pelo overflow e ficava mal dimensionada) */
@media(min-width:769px){
  body .sidebar.collapsed .sb-logo, body.dark-mode .sidebar.collapsed .sb-logo{
    padding:12px 0 10px;
  }
  body .sidebar.collapsed .sb-logo img, body.dark-mode .sidebar.collapsed .sb-logo img{
    width:38px;height:38px;max-width:38px;max-height:38px;
    object-fit:contain;padding:5px;border-radius:999px;
    background:linear-gradient(160deg, rgba(255,255,255,.16), transparent 55%), rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -4px rgba(0,0,0,.5), 0 0 16px -6px rgba(232,80,95,.35);
  }
  @keyframes vidroOrbIn{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
  body .sidebar.collapsed .sb-logo img{animation:vidroOrbIn .3s var(--easing)}

  /* ── recolher/expandir FLUIDO ──
     A regra antiga só animava o width; o min-width mudava na hora e o layout
     "pulava". Animando os dois, a barra desliza. */
  body .sidebar, body.dark-mode .sidebar{
    transition:width .3s var(--easing), min-width .3s var(--easing);
  }
  /* rótulos: derretem (opacidade+largura) em vez de sumirem num frame */
  body .nav-lbl{transition:opacity .18s var(--easing)}
  body .sidebar.collapsed .nav-lbl, body.dark-mode .sidebar.collapsed .nav-lbl{
    display:block;opacity:0;flex:0 0 0px;width:0;overflow:hidden;margin:0;padding:0;
  }
  /* ícone perfeitamente centrado (o rótulo de largura 0 + gap deslocava ~5px) */
  body .sidebar.collapsed .nav-item, body.dark-mode .sidebar.collapsed .nav-item{gap:0}
  /* títulos de seção: encolhem suave */
  body .sb-sec{transition:opacity .18s var(--easing), max-height .25s var(--easing), padding .25s var(--easing)}
  body .sidebar.collapsed .sb-sec, body.dark-mode .sidebar.collapsed .sb-sec{
    display:block;opacity:0;max-height:0;padding:0 0 0 0;overflow:hidden;
  }
  body .sidebar.collapsed .sb-sec::after{display:none}
  /* texto do logo: desvanece */
  body .sb-logo-text{transition:opacity .18s var(--easing), max-height .25s var(--easing)}
  body .sidebar.collapsed .sb-logo-text, body.dark-mode .sidebar.collapsed .sb-logo-text{
    display:flex;opacity:0;max-height:0;overflow:hidden;
  }
  /* badges (incl. WhatsApp, que o JS liga com style inline display:flex):
     na barra recolhida NUNCA aparecem — viravam um balão gigante sobre o ícone */
  body .sidebar.collapsed .nav-bdg, body.dark-mode .sidebar.collapsed .nav-bdg{
    display:none!important;
  }
}
@media (prefers-reduced-motion:reduce){
  body .sidebar, body .nav-lbl, body .sb-sec, body .sb-logo-text{transition:none}
  body .sidebar.collapsed .sb-logo img{animation:none}
}

/* ─── TOPBAR: cápsula de vidro flutuante ──────────────────────────────── */
body .topbar, body.dark-mode .topbar{
  margin:12px 14px 0 0;
  height:auto;min-height:60px;
  flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px;
  border-radius:24px;
  border:1px solid var(--vidro-borda);border-bottom:1px solid var(--vidro-borda);
  background:linear-gradient(160deg, var(--vidro-2), transparent 42%), var(--vidro);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:var(--vidro-brilho), var(--shadow-sm);
}
/* WhatsApp ocupa a altura útil (desconta a margem nova do topbar) */
body #page-whatsapp.active, body.dark-mode #page-whatsapp.active{height:calc(100vh - 72px)}
/* busca global: pílula de vidro */
body .gs-input, body.dark-mode .gs-input{
  border:1px solid var(--vidro-borda);
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark-mode .gs-input{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body .gs-input:hover{border-color:var(--prata)}
body .gs-kbd, body.dark-mode .gs-kbd{border-radius:999px;background:color-mix(in srgb, var(--surface) 60%, transparent)}
/* indicadores do topo (quentes/atrasados/propostas/fechados): vidro colorido */
body .tb-bdg, body.dark-mode .tb-bdg{
  border:1px solid color-mix(in srgb, currentColor 24%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
body.dark-mode .tb-bdg{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
/* botões redondos do topo: vidro */
body .theme-toggle, body.dark-mode .theme-toggle{
  border-radius:999px;border:1px solid var(--vidro-borda);
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark-mode .theme-toggle{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body .theme-toggle:hover, body.dark-mode .theme-toggle:hover{border-color:var(--prata);background:var(--surface-hover)}

/* ─── ABAS DE HUB + SUB-ABAS: dock de pílulas ─────────────────────────── */
/* Opção 1 (escolhida 30/06): abas SUBLINHADAS — texto só, ativa com traço da marca, sem pílula. */
/* (30/06) Abas vivem DENTRO da topbar: zona central que cresce e rola na horizontal
   quando há muitas abas (ex.: Vendas). Sem borda/padding próprios — a topbar já tem. */
body #hub-tabs, body.dark-mode #hub-tabs{
  flex:1 1 0;min-width:0;align-self:stretch;     /* basis 0: pega só o espaço que sobra (nunca empurra os botões) */
  display:flex;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  background:transparent;border:none;padding:0;margin:0 10px;
  scrollbar-width:none;-ms-overflow-style:none;
}
body #hub-tabs::-webkit-scrollbar, body.dark-mode #hub-tabs::-webkit-scrollbar{height:0;width:0}
body .topbar .tb-right, body.dark-mode .topbar .tb-right{flex-shrink:0}   /* botões nunca comprimem */
/* Vendas (busca + 8 abas + contadores) não cabe em 1 linha → abas descem p/ uma 2ª linha (largura cheia). */
body .topbar.topbar-tabs-2lin, body.dark-mode .topbar.topbar-tabs-2lin{flex-wrap:wrap;height:auto !important;min-height:60px;align-content:center}
body .topbar.topbar-tabs-2lin #hub-tabs, body.dark-mode .topbar.topbar-tabs-2lin #hub-tabs{order:3;flex:1 1 100%;margin:0;height:46px;align-self:auto;border-top:1px solid var(--vidro-borda)}
body #hub-tabs .hub-dd-wrap, body.dark-mode #hub-tabs .hub-dd-wrap{display:inline-flex;align-items:stretch;flex-shrink:0}
body .hub-tab, body.dark-mode .hub-tab{
  display:inline-flex;align-items:center;height:100%;white-space:nowrap;flex-shrink:0;
  border:none;border-bottom:2px solid transparent;border-radius:0;
  padding:0 13px;margin:0;background:none;box-shadow:none;
  color:var(--text-3);font-weight:600;
  transition:border-color .15s,color .15s;
}
body.dark-mode .hub-tab{box-shadow:none}
body .hub-tab:hover, body.dark-mode .hub-tab:hover{border-color:transparent;color:var(--text);background:none}
body .hub-tab:active{transform:none}
body .hub-tab.active, body.dark-mode .hub-tab.active{
  color:var(--brand);border-bottom-color:var(--brand);
  background:none;box-shadow:none;font-weight:700;
}
body .hub-tab.active::after, body.dark-mode .hub-tab.active::after{display:none}
body .hub-dd-menu, body.dark-mode .hub-dd-menu{
  border-radius:16px;border:1px solid var(--vidro-borda);
  background:linear-gradient(160deg,var(--vidro-2),transparent 40%),var(--surface);
  box-shadow:var(--vidro-brilho),var(--shadow-lg);padding:6px;
}
body .hub-dd-item, body.dark-mode .hub-dd-item{border-radius:999px;color:var(--text-2)}
body .hub-dd-item:hover, body.dark-mode .hub-dd-item:hover{background:var(--brand-soft);color:var(--brand)}
/* sub-abas (detalhe do cliente, admin, config): mesmas pílulas */
body .cd-tab, body .cfgmain-tab, body.dark-mode .cd-tab, body.dark-mode .cfgmain-tab{
  border:1px solid transparent;border-bottom:1px solid transparent;
  border-radius:999px;margin-bottom:4px;
  transition:transform .12s var(--easing),border-color .15s,background .15s,color .15s;
}
body .cd-tab:hover, body .cfgmain-tab:hover, body.dark-mode .cd-tab:hover, body.dark-mode .cfgmain-tab:hover{
  color:var(--text);background:var(--surface-hover);
}
body .cd-tab.active, body .cfgmain-tab.cfgmain-tab-on,
body.dark-mode .cd-tab.active, body.dark-mode .cfgmain-tab.cfgmain-tab-on{
  color:var(--brand)!important;border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  background:color-mix(in srgb, var(--brand-soft) 94%, var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -6px var(--brand-ring);
}
body .cd-tab.active::after, body .cfgmain-tab.cfgmain-tab-on::after,
body.dark-mode .cd-tab.active::after, body.dark-mode .cfgmain-tab.cfgmain-tab-on::after{display:none}
body .cfg-tab, body.dark-mode .cfg-tab{border-radius:999px}
body .cfg-tab.cfg-tab-on, body.dark-mode .cfg-tab.cfg-tab-on{
  background:var(--brand-grad);color:#fff;box-shadow:var(--brand-glow),inset 0 1px 0 rgba(255,255,255,.22);
}

/* ─── CHIPS DE FILTRO: cápsulas de vidro ──────────────────────────────── */
body .rel-filtro-btn, body .cob-chip, body .wa-filtro-btn,
body.dark-mode .rel-filtro-btn, body.dark-mode .cob-chip, body.dark-mode .wa-filtro-btn{
  border:1px solid var(--vidro-borda);border-radius:999px;
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
  color:var(--text-2);
  transition:transform .12s var(--easing),border-color .15s,background .15s,color .15s;
}
body.dark-mode .rel-filtro-btn, body.dark-mode .cob-chip, body.dark-mode .wa-filtro-btn{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
body .rel-filtro-btn:hover, body .cob-chip:hover, body .wa-filtro-btn:hover,
body.dark-mode .rel-filtro-btn:hover, body.dark-mode .cob-chip:hover, body.dark-mode .wa-filtro-btn:hover{
  border-color:var(--prata);color:var(--text);background:var(--surface-hover);transform:none;
}
body .rel-filtro-btn:active, body .cob-chip:active, body .wa-filtro-btn:active{transform:scale(.95)}
body .rel-filtro-btn.ativo, body .wa-filtro-btn.active, body .cob-chip.ativo,
body.dark-mode .rel-filtro-btn.ativo, body.dark-mode .wa-filtro-btn.active, body.dark-mode .cob-chip.ativo{
  color:var(--brand);border-color:color-mix(in srgb, var(--brand) 45%, transparent);
  background:color-mix(in srgb, var(--brand-soft) 94%, var(--surface));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -6px var(--brand-ring);
  font-weight:700;
}
body .cob-chip.ativo-warn, body.dark-mode .cob-chip.ativo-warn{
  color:var(--warn-text);border-color:color-mix(in srgb, var(--warn-dot) 45%, transparent);
  background:color-mix(in srgb, var(--warn-bg) 94%, var(--surface));
}
body .cob-chip.ativo-azul, body.dark-mode .cob-chip.ativo-azul{
  color:var(--info-text);border-color:color-mix(in srgb, var(--info-dot) 45%, transparent);
  background:color-mix(in srgb, var(--info-bg) 94%, var(--surface));
}
body .cob-chip.ativo-cinza, body.dark-mode .cob-chip.ativo-cinza{
  color:var(--text-2);border-color:var(--border-strong);background:var(--surface-hover);
}
body .parque-det-btn, body.dark-mode .parque-det-btn{border-radius:999px}
body .parque-det-btn.aberto, body.dark-mode .parque-det-btn.aberto{
  background:var(--brand-grad);border-color:transparent;box-shadow:var(--brand-glow);
}

/* ─── BOTÕES: líquidos, sem grade HUD ─────────────────────────────────── */
body .btn-primary, body .tb-btn, body.dark-mode .btn-primary, body.dark-mode .tb-btn{
  border-radius:999px;
  background:var(--brand-grad);background-size:100% 100%;
  box-shadow:var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
body .btn-primary::before, body .tb-btn::before,
body.dark-mode .btn-primary::before, body.dark-mode .tb-btn::before{display:none}
body .btn-primary:hover, body .tb-btn:hover, body.dark-mode .btn-primary:hover, body.dark-mode .tb-btn:hover{
  animation:none;background:var(--brand-grad);background-size:100% 100%;
  filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.28);
}
body .btn-primary:active, body .tb-btn:active{transform:scale(.98)}
body .btn-ghost, body.dark-mode .btn-ghost{
  border-radius:999px;border:1px solid var(--vidro-borda);
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30);
  color:var(--text-2);
}
body.dark-mode .btn-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
body .btn-ghost::after, body .btn-outline::after,
body.dark-mode .btn-ghost::after, body.dark-mode .btn-outline::after{display:none}
body .btn-ghost:hover, body.dark-mode .btn-ghost:hover{
  color:var(--text)!important;border-color:var(--prata)!important;
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
}
body .btn-ghost:active{transform:scale(.97)}
body .btn-outline, body.dark-mode .btn-outline{
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  color:var(--brand);
}
body.dark-mode .btn-outline{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
body .btn-outline:hover, body.dark-mode .btn-outline:hover{
  color:var(--brand)!important;border-color:var(--brand)!important;
  background:color-mix(in srgb, var(--brand-soft) 90%, var(--surface));
}
body .btn-outline:active{transform:scale(.97)}
body .btn-action, body.dark-mode .btn-action{border-radius:999px}
body .btn-hamburger, body.dark-mode .btn-hamburger{border-radius:999px}

/* ─── KPIs: Space Grotesk + fio metálico ──────────────────────────────── */
body .kpi-val, body.dark-mode .kpi-val,
body .cob-kpi-val, body.dark-mode .cob-kpi-val,
body:not(.dark-mode) .cob-kpi-val{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;letter-spacing:-.5px;
}
body .kpi-card::before, body.dark-mode .kpi-card::before,
body .kpi-card.red::before, body .kpi-card.green::before, body .kpi-card.blue::before, body .kpi-card.orange::before,
body.dark-mode .kpi-card.red::before, body.dark-mode .kpi-card.green::before,
body.dark-mode .kpi-card.blue::before, body.dark-mode .kpi-card.orange::before{
  height:1px;left:8%;right:8%;background:var(--fio-metal);box-shadow:none;opacity:1;
}
body .kpi-card:hover::before, body.dark-mode .kpi-card:hover::before,
body .kpi-card.red:hover::before, body .kpi-card.green:hover::before,
body .kpi-card.blue:hover::before, body .kpi-card.orange:hover::before{
  animation:none;background:var(--fio-metal);background-size:100% 100%;opacity:1;
}
body .kpi-card:hover, body.dark-mode .kpi-card:hover{border-color:var(--border-strong)}
/* restaura o ÍCONE colorido do KPI (a fase 1 o havia achatado num fio de 1px):
   posição/raio aqui; cor+desenho continuam vindo das regras .kpi-card.red/green/
   blue/orange::after da skin base (especificidade maior nessas propriedades) */
body .kpi-card::after, body.dark-mode .kpi-card::after{
  content:'';position:absolute;top:14px;left:auto;right:14px;bottom:auto;
  width:34px;height:34px;border-radius:12px;opacity:1;
  background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
body.dark-mode .kpi-card::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body .cob-kpi, body.dark-mode .cob-kpi, body:not(.dark-mode) .cob-kpi{border-radius:var(--r)}
body:not(.dark-mode) .cob-kpi::before, body.dark-mode .cob-kpi::before{
  height:1px;left:8%;right:8%;background:var(--fio-metal);box-shadow:none;opacity:1;
}
body.dark-mode .cob-kpi{background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}

/* ─── CARDS: fio metálico no lugar do feixe vermelho ──────────────────── */
body .card::before, body #ia-painel::before, body .gs-dropdown::before,
body .modal::before, body #painel-notif::before,
body.dark-mode .card::before, body.dark-mode #ia-painel::before,
body.dark-mode .gs-dropdown::before, body.dark-mode .modal::before, body.dark-mode #painel-notif::before{
  height:1px;left:8%;right:8%;background:var(--fio-metal);box-shadow:none;opacity:1;
}
body .card-head, body.dark-mode .card-head{box-shadow:none}
body #page-whatsapp .wa-toolbar::before, body.dark-mode #page-whatsapp .wa-toolbar::before{
  height:1px;left:8%;right:8%;background:var(--fio-metal);box-shadow:none;opacity:1;
}

/* ─── TABELAS: zebra sutil ────────────────────────────────────────────── */
body tbody tr:nth-child(even):not(:hover) td,
body.dark-mode tbody tr:nth-child(even):not(:hover) td{
  background:color-mix(in srgb, var(--surface-2) 55%, transparent);
}

/* ─── KANBAN / QUADROS: colunas de vidro ──────────────────────────────── */
body.dark-mode .kanban::-webkit-scrollbar-thumb{background:#333945}
body .k-col, body.dark-mode .k-col{
  background:color-mix(in srgb, var(--surface-2) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
body .k-card, body.dark-mode .k-card{border-radius:12px}

/* ─── MODAIS / PAINÉIS: vidro de verdade ──────────────────────────────── */
body .modal, body.dark-mode .modal{
  border-radius:24px;
  background:linear-gradient(160deg,var(--vidro-2),transparent 40%),var(--surface);
  border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-brilho),var(--shadow-lg);
}
body .modal-overlay, body.dark-mode .modal-overlay{
  background:rgba(8,10,14,.38);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
}
body #ia-painel, body.dark-mode #ia-painel{
  border-radius:24px;border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(165deg, rgba(255,255,255,.08), transparent 36%),
    radial-gradient(120% 70% at 88% -10%, rgba(215,39,58,.14), transparent 58%),
    rgba(16,18,24,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--shadow-lg);
}
body #ia-fab, body.dark-mode #ia-fab{
  background:var(--brand-grad)!important;background-size:100% 100%!important;
  box-shadow:var(--brand-glow), inset 0 1px 0 rgba(255,255,255,.22);
}
body #ia-fab:hover, body.dark-mode #ia-fab:hover{
  box-shadow:0 14px 36px -8px rgba(177,31,44,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
body .ia-msg-user, body.dark-mode .ia-msg-user{background:var(--brand-grad);border-bottom-right-radius:5px;border-radius:14px 14px 5px 14px}
body .ia-msg-bot, body.dark-mode .ia-msg-bot{border-radius:14px 14px 14px 5px}

/* ─── TOASTS: cápsula de vidro escuro ─────────────────────────────────── */
body .toast, body.dark-mode .toast{
  border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 50%),rgba(13,16,22,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-lg);
}
body .toast.success, body.dark-mode .toast.success{border-left:1px solid rgba(255,255,255,.14);box-shadow:inset 3px 0 0 var(--ok-dot),inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-lg)}
body .toast.error, body.dark-mode .toast.error{border-left:1px solid rgba(255,255,255,.14);box-shadow:inset 3px 0 0 var(--danger-dot),inset 0 1px 0 rgba(255,255,255,.14),var(--shadow-lg)}

/* ─── INPUTS DE FILTRO: pílulas de vidro pré-misturado ────────────────── */
body .filter-input, body .filter-select, body.dark-mode .filter-input, body.dark-mode .filter-select{
  border:1px solid var(--vidro-borda);
  background:linear-gradient(160deg, var(--vidro-2), transparent 55%),
             color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
body.dark-mode .filter-input, body.dark-mode .filter-select{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
body .filter-input:hover, body .filter-select:hover{border-color:var(--prata)}
body .wa-busca-input, body.dark-mode .wa-busca-input{border-radius:999px}

/* ─── CARTÕES AVULSOS (sugestões, currículos, equipamento) ────────────── */
body .sug-card, body .cur-card, body .equip-card, body .ia-kc-card, body .acordo-preview,
body.dark-mode .sug-card, body.dark-mode .cur-card, body.dark-mode .equip-card,
body.dark-mode .ia-kc-card, body.dark-mode .acordo-preview{
  border-radius:var(--r);position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
body .sug-card:hover, body .cur-card:hover, body.dark-mode .sug-card:hover, body.dark-mode .cur-card:hover{
  border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);
  transition:transform .15s var(--easing),box-shadow .15s var(--easing),border-color .15s;
}
body .cur-avatar, body.dark-mode .cur-avatar{
  background:var(--brand-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}

/* ─── MOBILE (≤768px) ─────────────────────────────────────────────────── */
@media(max-width:768px){
  /* gaveta: encostada à esquerda, cantos só à direita, altura total */
  body .sidebar, body.dark-mode .sidebar{
    margin:0;border-radius:0 26px 26px 0;
    height:100vh;height:100dvh;
  }
  /* topbar: cápsula com folga menor, altura LIVRE (a regra antiga fixava com
     !important e o botão "Novo" vazava por baixo da cápsula) */
  body .topbar, body.dark-mode .topbar{
    margin:10px 12px 0;border-radius:20px;
    height:auto!important;
    min-height:calc(60px + env(safe-area-inset-top))!important;
  }
  body #page-whatsapp.active, body.dark-mode #page-whatsapp.active{height:auto;min-height:calc(100dvh - 130px)}
  /* abas e chips com mais respiro de toque */
  body #hub-tabs, body.dark-mode #hub-tabs{padding:8px 12px 2px}
  body .hub-tab, body.dark-mode .hub-tab{margin:0 6px 8px 0}
  /* overlay da gaveta com desfoque */
  body .sb-overlay.open{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  /* modal colado embaixo: cantos de folha (sheet) e alça visual */
  body .modal, body.dark-mode .modal{border-radius:28px 28px 0 0;border-bottom:none}
  /* toast central em cápsula */
  body .toast, body.dark-mode .toast{border-radius:18px}
}

/* ─── TABLET (769–1100px) ─────────────────────────────────────────────── */
@media(min-width:769px) and (max-width:1100px){
  body .sidebar, body.dark-mode .sidebar{margin:10px 12px 10px 10px;height:calc(100vh - 20px);border-radius:22px}
  body .topbar, body.dark-mode .topbar{margin:10px 12px 0 0;border-radius:20px}
  body #page-whatsapp.active, body.dark-mode #page-whatsapp.active{height:calc(100vh - 70px)}
  body #hub-tabs, body.dark-mode #hub-tabs{padding:8px 16px 2px}
}

/* ─── MOVIMENTO REDUZIDO (fase 3) ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body .hub-tab, body .cd-tab, body .cfgmain-tab, body .rel-filtro-btn, body .cob-chip,
  body .wa-filtro-btn, body .btn-primary, body .tb-btn, body .btn-ghost, body .btn-outline,
  body .nav-item, body .sug-card, body .cur-card{transition:none}
  body .btn-primary:hover, body .tb-btn:hover, body .sug-card:hover, body .cur-card:hover{transform:none}
}