/* DashForge - tema visual "Plataforma Unik" (tokens e componentes extraidos
   literalmente do design system AS IS da Unik - ver design (1).html). */

:root{
  --primary:#0066b3; --primary-50:#e8f2fb; --primary-100:#d4e6f7; --primary-700:#00508f;
  --pink:#d83d96; --pink-50:#fdeaf5;
  --violet:#8b5cf6; --violet-50:#f3eefe;
  --teal:#0096a0; --teal-50:#e6f6f7;
  --navy:#1a2740; --navy-light:#243250;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-150:#ebeff5; --gray-200:#e2e8f0;
  --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569;
  --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a;
  --success:#10b981; --success-50:#ecfdf5;
  --warning:#f59e0b; --warning-50:#fffbeb;
  --danger:#ef4444; --danger-50:#fef2f2;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 6px -1px rgba(15,23,42,.07),0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg:0 10px 25px -5px rgba(15,23,42,.10),0 4px 10px -5px rgba(15,23,42,.05);
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --sidebar-w:240px; --sidebar-w-collapsed:64px; --sidebar-transition:280ms cubic-bezier(0.4,0,0.2,1);
  --header-h:60px;

  /* Superficies/texto - trocam no dark mode abaixo. O design Unik real NAO
     define paleta dark (ver design (1).html secao 6) - esta e uma extensao
     nossa, mantendo os tokens de marca (primary/pink/violet/teal) intactos
     e so invertendo a escala neutra (fundo/texto/borda). */
  --surface:#fff; --surface-alt:var(--gray-50); --text:var(--gray-800); --text-strong:var(--gray-900);
  --text-muted:var(--gray-500); --border:var(--gray-200);
}

:root[data-theme="dark"],
/* Tema LOCAL de um dashboard especifico (toggle na Central de Filtros) -
   mesmos tokens do dark mode global, mas aplicados so dentro do container
   que envolve filtros+menu de paginas+graficos daquele dashboard, sem
   depender nem afetar o tema geral do app (header, sidebar principal). */
[data-theme-dashboard="dark"]{
  --gray-50:#161b26; --gray-100:#1c2330; --gray-150:#222a39; --gray-200:#2a3344;
  --gray-300:#3a4559; --gray-400:#5b6780; --gray-500:#8893a8; --gray-600:#aab3c5;
  --gray-700:#c6cddb; --gray-800:#e2e6ee; --gray-900:#f5f7fa;
  --primary-50:#152a3d; --primary-100:#1c3a56;
  --success-50:#0f2a22; --warning-50:#332511; --danger-50:#3a1515;
  --violet-50:#241c3d; --teal-50:#0f2a2c; --pink-50:#3a1830;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.35),0 2px 4px -2px rgba(0,0,0,.25);
  --shadow-lg:0 10px 25px -5px rgba(0,0,0,.45),0 4px 10px -5px rgba(0,0,0,.3);
  --surface:#10141c; --surface-alt:#161b26; --text:var(--gray-700); --text-strong:var(--gray-900);
  --text-muted:var(--gray-500); --border:var(--gray-200);
}
[data-theme-dashboard="dark"]{ background:var(--gray-50); }

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:14px; line-height:1.5; color:var(--gray-800); background:var(--gray-50);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ===== App shell ===== */
.app{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:var(--header-h) 1fr; grid-template-areas:"sidebar header" "sidebar main"; height:100vh; overflow:hidden; transition:grid-template-columns var(--sidebar-transition); }
.app.sidebar-collapsed{ grid-template-columns:var(--sidebar-w-collapsed) 1fr; }

/* ===== Sidebar ===== */
.sidebar{ grid-area:sidebar; background:linear-gradient(180deg,var(--navy) 0%,var(--navy-light) 100%); color:#cbd5e1; display:flex; flex-direction:column; position:relative; height:100%; overflow:hidden; transition:width var(--sidebar-transition); width:var(--sidebar-w); }
.app.sidebar-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
.sidebar::before{ content:""; position:absolute; bottom:-80px; left:-50px; width:220px; height:220px; background:radial-gradient(circle,rgba(0,102,179,.22),transparent 70%); pointer-events:none; }
.brand{ padding:16px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.07); position:relative; z-index:1; flex-shrink:0; }
.brand-logo{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--primary) 0%,var(--pink) 100%); display:grid; place-items:center; color:#fff; font-weight:800; font-size:11.5px; letter-spacing:-.3px; box-shadow:0 4px 12px rgba(216,61,150,.35); flex-shrink:0; overflow:hidden; }
.brand-logo img{width:100%;height:100%;object-fit:contain}
.brand-text{overflow:hidden}
.brand-name{ color:#fff; font-weight:700; font-size:13.5px; letter-spacing:-.2px; line-height:1.2; white-space:nowrap; }
.brand-tag{ display:block; font-size:10px; font-weight:500; color:rgba(255,255,255,.45); white-space:nowrap; }
.sidebar-toggle-row{ padding:8px 10px 2px; display:flex; justify-content:flex-end; position:relative; z-index:1; }
.app.sidebar-collapsed .sidebar-toggle-row{ justify-content:center; }
.sidebar-toggle-btn{ width:28px; height:28px; border-radius:7px; border:none; background:rgba(255,255,255,.07); color:rgba(255,255,255,.55); display:grid; place-items:center; transition:background .13s,color .13s; }
.sidebar-toggle-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.nav-section{ padding:12px 10px 2px; flex-shrink:0; position:relative; z-index:1; }
.nav-label{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.35); padding:0 10px 7px; white-space:nowrap; overflow:hidden; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:rgba(255,255,255,.65); font-weight:500; font-size:13px; margin-bottom:1px; transition:background .13s,color .13s; text-decoration:none; border:none; background:transparent; width:100%; text-align:left; position:relative; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:linear-gradient(90deg,rgba(0,102,179,.38),rgba(0,102,179,.10)); color:#fff; box-shadow:inset 3px 0 0 var(--pink); }
.nav-item svg{ flex-shrink:0; opacity:.75; }
.nav-item.active svg{ opacity:1; }
.app.sidebar-collapsed .nav-item>span, .app.sidebar-collapsed .brand-text, .app.sidebar-collapsed .nav-label{display:none}
.app.sidebar-collapsed .nav-item{justify-content:center; padding:10px}
.app.sidebar-collapsed .brand{justify-content:center; padding:14px}
.sidebar-footer{ margin-top:auto; padding:12px 16px; border-top:1px solid rgba(255,255,255,.06); position:relative; z-index:1; color:rgba(255,255,255,.4); font-size:11px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.app.sidebar-collapsed .sidebar-footer{align-items:center}
.app.sidebar-collapsed .sidebar-footer .sf-email{display:none}
.sidebar-footer .sf-email{font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sidebar-footer button{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:none; color:rgba(255,255,255,.7); font-size:12px; font-weight:500; padding:7px 10px; border-radius:7px; transition:background .13s,color .13s; width:100%; }
.sidebar-footer button:hover{background:rgba(255,255,255,.12); color:#fff}
.app.sidebar-collapsed .sidebar-footer button span.lbl{display:none}
.app.sidebar-collapsed .sidebar-footer button{justify-content:center}

/* ===== Header ===== */
.header{ grid-area:header; background:var(--surface); border-bottom:1px solid var(--gray-200); display:flex; align-items:center; padding:0 24px; gap:12px; }
.header .hdr-logo{height:26px;object-fit:contain}
.header-actions{ display:flex; align-items:center; gap:3px; margin-left:auto; }
.icon-btn{ width:36px; height:36px; border-radius:9px; border:none; background:transparent; display:grid; place-items:center; color:var(--gray-500); transition:background .13s,color .13s; }
.icon-btn:hover{ background:var(--gray-100); color:var(--gray-900); }

/* ===== Main ===== */
.main{ grid-area:main; padding:24px 28px 40px; overflow-y:auto; height:100%; }
.hero{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.hero h1{ font-size:21px; font-weight:700; color:var(--gray-900); letter-spacing:-.4px; margin:0 0 3px; }
.hero p{ color:var(--gray-500); font-size:13px; margin:0; }
.hero-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ===== Botoes ===== */
.btn-primary{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; background:var(--primary); color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:600; transition:background .13s,box-shadow .13s; white-space:nowrap; }
.btn-primary:hover{ background:var(--primary-700); box-shadow:0 4px 12px rgba(0,102,179,.3); }
.btn-primary:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn-outline{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; background:var(--surface); color:var(--gray-700); border:1px solid var(--gray-200); border-radius:9px; font-size:13px; font-weight:500; transition:all .13s; }
.btn-outline:hover{ border-color:var(--gray-300); background:var(--gray-50); }
.btn-ghost{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; background:transparent; color:var(--gray-600); border:none; border-radius:8px; font-size:13px; font-weight:500; transition:all .13s; }
.btn-ghost:hover{ background:var(--gray-100); color:var(--gray-900); }
.btn-danger{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; background:var(--danger); color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:600; }
.btn-danger:disabled{ opacity:.5; cursor:not-allowed; }

/* ===== Badges / status ===== */
.badge{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-primary{background:var(--primary-50);color:var(--primary)}
.badge-success{background:var(--success-50);color:var(--success)}
.badge-warning{background:var(--warning-50);color:var(--warning)}
.badge-neutral{background:var(--gray-100);color:var(--gray-600)}
.badge-violet{background:var(--violet-50);color:var(--violet)}
.badge-pink{background:var(--pink-50);color:var(--pink)}

/* ===== Filtros (chip) - ver design Unik secao 13 ===== */
.filter-chip{ padding:5px 12px; border:1px solid var(--gray-200); border-radius:20px; font-size:12px; font-weight:500; color:var(--gray-600); background:var(--surface); transition:all .13s; }
.filter-chip:hover{ border-color:var(--gray-300); background:var(--surface-alt); }
.filter-chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== Cards ===== */
.card{ background:var(--surface); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); }
.card:hover{box-shadow:var(--shadow-md)}
.cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px}

/* ===== Forms ===== */
.form-input,.form-select{ padding:8px 11px; border:1px solid var(--gray-200); border-radius:8px; font-size:13px; color:var(--gray-800); background:var(--surface); width:100%; outline:none; transition:border-color .12s,box-shadow .12s; }
.form-input:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.form-label{ font-size:11.5px; font-weight:600; color:var(--gray-600); display:block; margin-bottom:5px; }

/* ===== Empty state ===== */
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; background:var(--surface); border:1px solid var(--gray-200); border-radius:var(--radius-lg); }
.empty-state-icon{width:44px; height:44px; border-radius:12px; background:var(--gray-100); display:grid; place-items:center; color:var(--gray-400); margin-bottom:14px}
.empty-state-title{font-size:13.5px; font-weight:600; color:var(--gray-700); margin-bottom:4px}
.empty-state-desc{font-size:12px; color:var(--gray-400)}
.spinner{width:28px; height:28px; border:3px solid var(--primary-100); border-top-color:var(--primary); border-radius:50%; animation:unikspin .8s linear infinite; margin:0 auto 14px}
@keyframes unikspin{to{transform:rotate(360deg)}}

/* ===== Chat (novo / editar) - layout empilhado: chat em cima (altura fixa,
   scroll interno), graficos embaixo em largura total ===== */
.layout-novo-topo{ width:100%; }
.chat-panel{ display:flex; flex-direction:column; padding:0; min-height:220px; }
.chat-msgs{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.msg{ padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.55; max-width:92%; white-space:pre-wrap; }
.msg.assistant{ background:var(--gray-100); color:var(--gray-800); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user{ background:var(--primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg.erro{background:var(--danger-50); color:#9f1d1d}
.chat-anexo-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--primary-50); color:var(--primary); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; align-self:flex-start; }
.chat-anexo-chip button{background:none;border:none;color:inherit;font-weight:700;padding:0 2px}
.chat-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--gray-150); align-items:center; }
.chat-input input[type=text]{ flex:1; border:1px solid var(--gray-200); border-radius:9px; padding:9px 12px; font-size:13px; outline:none; }
.chat-input input[type=text]:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50)}
.chat-attach-btn{ width:36px; height:36px; border-radius:9px; border:1px solid var(--gray-200); background:var(--surface); color:var(--gray-500); display:grid; place-items:center; flex-shrink:0; }
.chat-attach-btn:hover{background:var(--gray-50); color:var(--primary)}

/* ===== Graficos ===== */
/* grid-auto-flow:dense preenche buracos movendo os proximos itens pra tras
   quando cabem no espaco vazio (ex: grande=3 seguido de medio=2 nao caberiam
   juntos numa linha de 4 - sem dense, o medio pula de linha e sobra 1
   coluna vazia do lado do grande; com dense, um pequeno/medio seguinte que
   caiba entra nesse buraco em vez de deixar vazio). */
.graficos-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:row dense; gap:14px; }
.g-pequeno{grid-column:span 1} .g-medio{grid-column:span 2} .g-grande{grid-column:span 3} .g-inteiro{grid-column:span 4}
@media(max-width:1100px){ .graficos-grid{grid-template-columns:repeat(2,1fr)} .g-grande,.g-inteiro{grid-column:span 2} }
@media(max-width:680px){ .graficos-grid{grid-template-columns:1fr} .g-pequeno,.g-medio,.g-grande,.g-inteiro{grid-column:span 1} }
.g-card{ background:var(--surface); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; min-height:220px; position:relative; overflow:hidden; }
.g-card.g-kpi{min-height:auto; justify-content:flex-start; padding:18px 20px}
.g-card h4{font-size:12.5px; font-weight:700; color:var(--gray-700); margin:0 0 10px}

/* KPI de alto nivel: faixa colorida no topo + icone com fundo suave + delta
   em pill colorida - cada KPI usa um tema (--kpi-cor/--kpi-fundo, ciclados
   em charts.js::_KPI_TEMAS) pra nao ficar tudo branco/identico. */
.g-kpi::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--kpi-cor, var(--primary)); }
.g-kpi-top{ display:flex; justify-content:flex-end; margin-bottom:2px; }
.g-kpi-icon{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--kpi-fundo, var(--primary-50)); color:var(--kpi-cor, var(--primary)); position:absolute; top:16px; left:18px; }
.g-kpi-icon svg{width:16px;height:16px}
.g-kpi .stat-label{font-size:11px; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.4px; margin-top:30px}
.g-kpi .stat-number{font-size:27px; font-weight:800; color:var(--gray-900); letter-spacing:-.8px; margin-top:5px; font-variant-numeric:tabular-nums}
.g-kpi-delta{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; margin-top:8px; }
.g-kpi-delta.up{color:var(--success)}
.g-kpi-delta.down{color:var(--danger)}
.g-kpi-foot{font-size:11px; color:var(--gray-400); margin-top:8px}

/* Tema visual COMPLETO por dashboard (ver app.js::aplicarTemaDashboard) -
   quando um template visual foi anexado e usado, o dashboard INTEIRO adota
   essas cores (fundo da tela, gradiente de KPI); sem template, nada disso
   se aplica e o dashboard fica 100% no padrao Unik. */
#dashboard-escopo{ background:var(--escopo-bg-tema, transparent); border-radius:var(--radius-lg); }
#dashboard-escopo[data-tema-fundo-tela="1"]{ padding:18px; }
[data-tema-gradiente-kpi="1"] .g-card.g-kpi{ background:linear-gradient(135deg,var(--kpi-fundo,var(--primary-50)) 0%,var(--surface) 70%); }
[data-tema-fonte="1"]{ font-family:var(--font-dashboard), 'Inter', sans-serif; }
[data-tema-fonte="1"] .stat-number,[data-tema-fonte="1"] .mono{ font-family:var(--font-dashboard), 'Inter', sans-serif; }

.g-erro{color:var(--danger); font-size:12.5px}
.g-card canvas{flex:1; max-height:260px}
.g-card table{width:100%; border-collapse:collapse; font-size:12.5px}
.g-card th{text-align:left; padding:6px 8px; color:var(--gray-500); font-weight:700; font-size:10.5px; text-transform:uppercase; border-bottom:1px solid var(--gray-150)}
.g-card td{padding:6px 8px; border-bottom:1px solid var(--gray-100)}

/* ===== Login ===== */
.login-frame{ position:relative; height:100vh; display:flex; background:#fff; overflow:hidden; }
.login-left{ flex:0 0 46%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:36px 56px; }
.login-brand-row{display:flex; align-items:center; gap:10px; margin-bottom:34px}
.login-brand-logo{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--primary) 0%,var(--pink) 100%); display:grid; place-items:center; overflow:hidden; color:#fff; font-weight:800; font-size:12.5px; letter-spacing:-.3px}
.login-brand-logo img{width:100%;height:100%;object-fit:contain}
.login-content{width:100%; max-width:340px}
.login-title{font-size:25px; font-weight:800; color:var(--gray-900); letter-spacing:-.5px; margin-bottom:6px}
.login-subtitle-small{font-size:13px; color:var(--gray-500); margin-bottom:26px; line-height:1.6}
.login-ms-btn{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 18px; background:var(--primary); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; box-shadow:0 4px 14px rgba(0,102,179,.3); margin-bottom:18px; text-align:left; }
.login-ms-btn:hover{background:var(--primary-700)}
.login-help-text{font-size:12px; color:var(--gray-500); line-height:1.6}
.login-right{ flex:1; background:linear-gradient(135deg,var(--navy) 0%,#1e2f5e 40%,#2d1442 72%,#3d1460 100%); display:flex; align-items:center; padding:48px; position:relative; overflow:hidden; }
.login-right::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px); background-size:28px 28px}
.login-right::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 90% -2%,rgba(216,61,150,.24) 0%,transparent 65%)}
.login-right-inner{position:relative; z-index:1; max-width:340px}
.login-right-eyebrow{width:26px; height:2px; background:rgba(216,61,150,.75); border-radius:2px; margin-bottom:18px}
.login-right-title{font-size:27px; font-weight:600; color:rgba(255,255,255,.9); letter-spacing:-.3px; margin-bottom:16px; line-height:1.3}
.login-right-desc{font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.75}
@media(max-width:820px){ .login-right{display:none} .login-left{flex:1; padding:40px 24px} }

/* ===== Util ===== */
.flexrow{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.gutter{padding:0 16px}
@media(max-width:900px){
  .app{grid-template-columns:1fr !important}
  .sidebar{position:fixed; left:0; top:0; z-index:40; transform:translateX(-100%); transition:transform var(--sidebar-transition); width:240px !important}
  .app.sidebar-open .sidebar{transform:translateX(0)}
  .btn-menu{display:grid !important; place-items:center}
  .hero-actions{width:100%}
  .hero-actions .btn-primary,.hero-actions .btn-outline{flex:1}
}

/* ===== Comando de voz (botao microfone no chat) ===== */
.btn-mic{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--gray-200); background:var(--surface); color:var(--gray-500); flex-shrink:0; transition:all .13s; }
.btn-mic:hover:not(:disabled){ background:var(--gray-50); color:var(--gray-900); border-color:var(--gray-300); }
.btn-mic.mic-ativo{ background:var(--danger); border-color:var(--danger); color:#fff; animation:mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)} 50%{box-shadow:0 0 0 7px rgba(239,68,68,0)} }

/* ===== Central de Filtros (dashboards - mesmo padrao visual rico do
   template_dashboard_exemplo_com_filtros.html) ===== */
.filters-panel{
  background:var(--filters-bg-tema, var(--surface));
  border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 22px 16px; margin-bottom:16px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
/* Fundo branco/claro e o padrao do app (segue o tema geral claro/escuro via
   --surface, como qualquer .card). Quando o tema do template define
   cor_fundo_filtros (ver app.js::aplicarTemaDashboard), SO este painel muda
   de cor - menu lateral/KPIs/graficos continuam sempre padrao Unik. */
[data-tema-filtros="1"] .filters-panel::before{display:none}
[data-tema-filtros="1"] .filters-panel-title b,
[data-tema-filtros="1"] .filters-panel-title span,
[data-tema-filtros="1"] .filters-slot-label,
[data-tema-filtros="1"] .filters-applied-label,
[data-tema-filtros="1"] .btn-filters-clear,
[data-tema-filtros="1"] .btn-theme-dashboard{ color:var(--filters-ink-tema, var(--gray-800)) !important; }
.filters-panel::before{content:"";position:absolute;top:-70px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--violet-50),transparent 70%);pointer-events:none}
.filters-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative;z-index:1;flex-wrap:wrap;gap:10px}
.filters-panel-title{display:flex;align-items:center;gap:10px}
.filters-panel-icon{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--violet));display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 14px rgba(0,102,179,.35)}
.filters-panel-icon svg{width:15px;height:15px;color:#fff}
.filters-panel-title b{display:block;font-size:13.5px;font-weight:700;color:var(--gray-900);letter-spacing:-.1px}
.filters-panel-title span{display:block;font-size:11px;color:var(--gray-500);margin-top:1px}
.filters-panel-actions{display:flex;align-items:center;gap:8px}
.btn-theme-dashboard{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;border:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-600);font-size:11.5px;font-weight:600;cursor:pointer;transition:background .13s,color .13s}
.btn-theme-dashboard:hover{background:var(--gray-100);color:var(--gray-900)}
.btn-theme-dashboard svg{width:13px;height:13px}

.filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;position:relative;z-index:1}
.filter-slot{display:flex;flex-direction:column;gap:6px}
.filter-slot-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--gray-500)}
.filter-field{
  position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--gray-50); border:1px solid var(--gray-200); border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--gray-800);cursor:pointer;transition:border-color .14s,background .14s;
}
.filter-field:hover{border-color:var(--violet);background:var(--violet-50)}
.filter-field .ftext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-field svg.chev{width:12px;height:12px;color:var(--gray-400);flex-shrink:0}
.filter-field.active{background:linear-gradient(135deg,var(--primary),var(--violet));border-color:transparent;color:#fff}
.filter-field.active svg.chev{color:#fff}

.filters-foot-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--gray-150);position:relative;z-index:1;flex-wrap:wrap;gap:10px}
.filters-applied{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters-applied-label{font-size:10.5px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.6px}
.filter-chip-x{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;background:var(--primary-50);color:var(--primary-700);border:1px solid var(--primary-100);border-radius:999px;font-size:12px;font-weight:600}
.filter-chip-x b{font-weight:700;color:var(--primary-700)}
.filter-chip-x button{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.08);border:none;color:var(--primary-700);cursor:pointer}
.filter-chip-x button:hover{background:var(--pink);color:#fff}
.btn-filters-clear{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--gray-500);padding:8px 12px;border-radius:9px;border:1px solid var(--gray-200);background:transparent;cursor:pointer}
.btn-filters-clear:hover{color:#fff;border-color:var(--pink);background:var(--pink)}
.btn-filters-clear svg{width:13px;height:13px}

/* ===== Menu lateral de paginas dentro de um dashboard (mesmo visual
   navy/gradiente da Central de Filtros e da sidebar principal) ===== */
.paginas-menu-nav{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-light) 100%);
  border:none; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.paginas-menu-nav::before{content:"";position:absolute;top:-60px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.2),transparent 70%);pointer-events:none}
.paginas-menu-nav .btn-pagina{position:relative;z-index:1;color:rgba(255,255,255,.62) !important}
.paginas-menu-nav .btn-pagina svg{opacity:.75}
.paginas-menu-nav .btn-pagina[data-ativo="1"]{background:linear-gradient(90deg,rgba(0,102,179,.38),rgba(0,102,179,.10)) !important;color:#fff !important;box-shadow:inset 3px 0 0 var(--pink)}
.paginas-menu-nav .btn-pagina[data-ativo="1"] svg{opacity:1}
.paginas-menu-nav .btn-pagina:hover{background:rgba(255,255,255,.06) !important;color:#fff !important}
.paginas-menu-nav #btn-paginas-toggle{color:rgba(255,255,255,.4) !important;position:relative;z-index:1}
.paginas-menu-nav #btn-paginas-toggle:hover{color:#fff !important}
.paginas-menu-nav .paginas-grupo-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.32);padding:10px 10px 6px;position:relative;z-index:1}
.paginas-menu-nav .paginas-grupo-label:first-child{padding-top:2px}

/* ===== Switch (toggle "Acesso total" - tela Acessos e Permissoes) ===== */
.slider-perm:before{ content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.chk-total-perm:checked + .slider-perm{ background:var(--primary); }
.chk-total-perm:checked + .slider-perm:before{ transform:translateX(16px); }