/* ============================================================
   MadSSolutions · Gestor Base · CSS principal compartilhado v2
   ============================================================
   Este é o stylesheet PRINCIPAL dos 4 gestores.
   Cada gestor tem app.css mínimo que apenas seta --setor-color.
   Tudo de identidade visual está aqui.
   ============================================================ */

/* ────────────────────  RESET  ──────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
img { max-width:100%; display:block; }

/* ────────────────────  AVATARS · FOCO NO ROSTO  ──────────────────── */
/* Cada avatar tem o rosto numa posição diferente — calibrado individualmente */
img[src$="van_design.png"]   { object-position: 50% 14%; }
img[src$="elo_quista.png"]   { object-position: 50% 12%; }
img[src$="guga.png"]         { object-position: 50% 14%; }
img[src$="dra_juri.png"]     { object-position: 50% 14%; }
img[src$="sentinela.png"]    { object-position: 50% 32%; }   /* cachorro-robô · face mais baixa */
img[src$="repor.png"]        { object-position: 50% 28%; }   /* robô fofo · face na cabeça redonda */

/* Em containers grandes (>180px) e com classe .avatar-full,
   mostrar corpo inteiro centralizado — não cropar rosto */
.avatar-full img,
img.avatar-full       { object-position: 50% 50% !important; object-fit: contain !important; }

/* ────────────────────  PALETA  ──────────────────── */
:root, [data-theme="dark"] {
  --bg:#0A0A0A;          /* preto neutro · sem azul */
  --bg2:#0F0F11;
  --card:#16161A;
  --card-hover:#1C1C20;
  --pl:#1F1F23;
  --bd:#2A2A2E;
  --bd-soft:rgba(255,255,255,.06);
  --fg:#F5F5F0;
  --fg-soft:#D1D5DB;
  --mu:#9095B5;
  --mu2:#6B7280;

  --brand-yellow:#FFC300;
  --brand-cyan:#22D3EE;
  --brand-purple:#A855F7;
  --brand-magenta:#EC4899;
  --brand-orange:#FF8E3C;
  --brand-green:#10B981;
  --brand-red:#EF4444;
  --brand-amber:#F59E0B;

  /* Cor do setor — sobrescrita por cada gestor no app.css */
  --setor-color: var(--brand-purple);
  --setor-color-2: var(--brand-cyan);

  --grad-tech: linear-gradient(90deg,#22D3EE 0%,#A855F7 50%,#FFC300 100%);
  --grad-warm: linear-gradient(135deg,#FF8E3C,#EC4899);
  --grad-cool: linear-gradient(135deg,#22D3EE,#A855F7);
  --grad-gold: linear-gradient(135deg,#FFC300,#FF8E3C);
  --grad-setor: linear-gradient(135deg,var(--setor-color),var(--setor-color-2));

  --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.20);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(168,85,247,.18);
  --shadow-glow: 0 0 0 1px rgba(168,85,247,.20), 0 8px 32px rgba(168,85,247,.25);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ──── ESCALA TIPOGRÁFICA · sistema único (item 1) ──── */
  /* 3 pesos só: 400 corpo · 600 destaque · 800 títulos */
  --fs-xs:   12px;   /* labels / pills / micro */
  --fs-sm:   13px;   /* tabela / FAQ secundário */
  --fs-base: 15px;   /* corpo padrão */
  --fs-md:   16px;   /* h3 painel */
  --fs-lg:   20px;   /* h2 página */
  --fs-xl:   28px;   /* h1 dashboard / KPI principal */
  --fs-2xl:  36px;   /* hero página gestor */
  --fs-3xl:  48px;   /* hero landing setorial */
  --fw-body: 400;
  --fw-mid:  600;
  --fw-bold: 800;
  --line-tight:  1.2;
  --line-normal: 1.55;
  --line-relax:  1.7;

  /* ──── SISTEMA DE ESPAÇAMENTO 8pt · single source (item 2) ──── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;

  /* ──── Aliases curtas usadas nos modules.js dos 4 gestores ──── */
  /* Os modules.js antigos referenciam --pr/--pu/--gd/etc. Mapeamos
     pras cores oficiais da marca pra compat retro e cores corretas. */
  --pr: var(--brand-magenta);   /* primário · setor color (rosa/magenta) */
  --pr-soft: #F472B6;
  --pu: var(--brand-purple);
  --gd: var(--brand-yellow);    /* gold */
  --am: var(--brand-amber);     /* amber */
  --rd: var(--brand-red);
  --gr: var(--brand-green);
  --tl: var(--brand-cyan);      /* teal/cyan */
  --or: var(--brand-orange);
  --ye: var(--brand-yellow);
  --ma: var(--brand-magenta);
  --cy: var(--brand-cyan);
}
:root { color-scheme: dark light; }

[data-theme="light"] {
  --bg:#FAFAFC;
  --bg2:#FFFFFF;
  --card:#FFFFFF;
  --card-hover:#F8FAFC;
  --pl:#F1F5F9;
  --bd:#E2E8F0;
  --bd-soft:rgba(168,85,247,.08);
  --fg:#0F172A;
  --fg-soft:#1F2937;
  --mu:#5B6478;
  --mu2:#94A3B8;

  --brand-yellow:#D97706;
  --brand-cyan:#0E7490;
  --brand-purple:#7E22CE;
  --brand-magenta:#BE185D;
  --brand-orange:#EA580C;
  --brand-green:#047857;
  --brand-red:#B91C1C;
  --brand-amber:#B45309;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10), 0 0 0 1px rgba(168,85,247,.10);
  --shadow-glow: 0 0 0 1px rgba(168,85,247,.10), 0 8px 32px rgba(168,85,247,.10);

  /* Aliases curtas (light mode) */
  --pr: var(--brand-magenta);
  --pr-soft: #DB2777;
  --pu: var(--brand-purple);
  --gd: var(--brand-yellow);
  --am: var(--brand-amber);
  --rd: var(--brand-red);
  --gr: var(--brand-green);
  --tl: var(--brand-cyan);
  --or: var(--brand-orange);
  --ye: var(--brand-yellow);
  --ma: var(--brand-magenta);
  --cy: var(--brand-cyan);
}

/* ────────────────────  BODY  ──────────────────── */
body {
  font: 14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color: var(--fg);
  background: var(--bg);
  /* Glows sutis nas 3 cores da logo (amarelo + magenta + ciano) — sem azul puro */
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(255,195,0,.06), transparent 60%),
    radial-gradient(ellipse 50% 35% at 95% 25%, rgba(236,72,153,.05), transparent 60%),
    radial-gradient(ellipse 50% 35% at 5% 75%, rgba(168,85,247,.05), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(255,195,0,.04), transparent 60%),
    radial-gradient(ellipse 50% 35% at 95% 25%, rgba(236,72,153,.03), transparent 60%);
}

/* ────────────────────  LAYOUT GERAL  ──────────────────── */
.layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}
main {
  min-width: 0; /* permite shrink em flexbox */
}
#content {
  padding: 32px 40px;
  max-width: 1320px;
}

/* ────────────────────  SIDEBAR  ──────────────────── */
aside {
  background: linear-gradient(180deg,#0F0F11 0%, #0A0A0A 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 18px 12px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}
aside::-webkit-scrollbar { width: 6px; }
aside::-webkit-scrollbar-track { background: transparent; }
aside::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 3px;
}
aside::-webkit-scrollbar-thumb:hover { background: rgba(255,195,0,.4); }
[data-theme="light"] aside { scrollbar-color: rgba(0,0,0,.18) transparent; }
[data-theme="light"] aside::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); }
/* scrollbar discreta global (conteúdo principal também) */
main, .content, body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,195,0,.35); }
[data-theme="light"] aside {
  background: linear-gradient(180deg,#FFFFFF, #F8FAFC);
  border-right: 1px solid var(--bd);
}

/* Brand block · usa as 3 cores da logo (amarelo + magenta + roxo) sutilmente */
.sb-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,195,0,.06), rgba(236,72,153,.04), rgba(168,85,247,.04));
  border: 1px solid rgba(255,195,0,.16);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* evita achatamento da logo qd há muitos itens */
  min-height: 64px;
}
.sb-brand::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--grad-tech);
  opacity: .55;
}
.sb-brand img,
.sb-brand svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
/* Cubo logo: fundo branco arredondado pra destacar as cores da marca */
.sb-brand img[src*="logo4-symbol"] {
  background: #FFFFFF;
  padding: 4px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  width: 44px;
  height: 44px;
  object-fit: contain;
}
[data-theme="light"] .sb-brand img[src*="logo4-symbol"] {
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(15,23,42,.10);
}
.brand-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.15;
  color: var(--fg);
}
.brand-sub {
  font-size: 11px;
  color: var(--mu);
  margin-top: 3px;
  font-weight: 500;
}

/* Menu */
.sb-menu {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-menu .grp {
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--mu);
  letter-spacing: 1.4px;
  margin: 14px 8px 4px;
  font-weight: 700;
  opacity: .75;
}

/* ──── Accordion · grupo colapsável ──── */
.sb-menu .grp.sb-grp-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  margin: 10px 4px 2px;
  transition: background .15s, color .15s, opacity .15s;
  user-select: none;
}
.sb-menu .grp.sb-grp-toggle:hover {
  background: rgba(255,195,0,.06);
  color: var(--fg);
  opacity: 1;
}
.sb-menu .grp.sb-grp-toggle:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}
.sb-menu .sb-grp-chev {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  opacity: .55;
  transition: transform .2s ease, opacity .15s;
  flex-shrink: 0;
}
.sb-menu .sb-grp-chev svg { width: 12px; height: 12px; }
.sb-menu .grp.sb-grp-toggle:hover .sb-grp-chev { opacity: 1; }
.sb-menu .grp.sb-grp-toggle.collapsed .sb-grp-chev {
  transform: rotate(-90deg);
}
.sb-menu .sb-grp-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 0;
  animation: sb-grp-fade .18s ease;
}
@keyframes sb-grp-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Quick actions · expandir/recolher tudo */
.sb-grp-actions {
  display: flex;
  gap: 6px;
  margin: 14px 4px 4px;
  padding: 0 4px;
}
.sb-grp-actions button {
  flex: 1;
  background: rgba(255,195,0,.06);
  border: 1px solid rgba(255,195,0,.16);
  color: var(--mu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.sb-grp-actions button:hover {
  background: rgba(255,195,0,.12);
  color: var(--fg);
  border-color: rgba(255,195,0,.32);
}
.sb-menu a.nav, .sb-menu .nav {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  color: var(--mu);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
  position: relative;
  line-height: 1.25;
}
.sb-menu a.nav:hover {
  background: linear-gradient(90deg, rgba(255,195,0,.06), rgba(236,72,153,.03));
  color: var(--fg);
  transform: translateX(2px);
}
.sb-menu a.nav:hover .ico { color: var(--brand-yellow); }
.sb-menu a.nav.active {
  background: linear-gradient(90deg, rgba(255,195,0,.12), rgba(236,72,153,.06));
  color: var(--fg);
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--brand-yellow);
}
.sb-menu a.nav.active .ico { color: var(--brand-yellow); }
.sb-menu .ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mu);
  font-size: 15px;
  transition: color .15s;
}
.sb-menu .ico svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sb-menu .bd-new {
  display: inline-block;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--grad-warm);
  color: #fff;
  margin-left: auto;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* Footer da sidebar */
.sb-foot {
  margin-top: auto;
  padding: 12px 10px;
  font-size: 11px;
  color: var(--mu);
  background: linear-gradient(135deg, rgba(168,85,247,.05), rgba(0,0,0,.15));
  border: 1px solid rgba(168,85,247,.12);
  border-radius: 10px;
}
.sb-foot #user-name {
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  font-size: 12px;
}
.sb-foot .plan {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--grad-tech);
  color: #0F0F18;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .3px;
}

/* ────────────────────  TOPBAR  ──────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(15,15,28,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(168,85,247,.14);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--bd);
}
.topbar h2, #page-title {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  letter-spacing: -.2px;
  color: var(--fg);
}
.topbar .conn {
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: rgba(168,85,247,.08);
  color: var(--mu);
  border: 1px solid rgba(168,85,247,.18);
  font-weight: 600;
  white-space: nowrap;
}
.topbar .conn.on {
  background: rgba(16,185,129,.12);
  color: var(--brand-green);
  border-color: rgba(16,185,129,.30);
}
.topbar .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(168,85,247,.18);
  background: rgba(168,85,247,.05);
  color: var(--fg);
  cursor: pointer;
  font-size: 15px;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .icon-btn:hover {
  background: rgba(168,85,247,.16);
  border-color: rgba(168,85,247,.40);
  transform: translateY(-1px);
}
.sb-toggle {
  display: none;
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.20);
  color: var(--fg);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 40;
  backdrop-filter: blur(2px);
}
.sb-backdrop.open { display: block; }

/* ────────────────────  PAGE HEADER  ──────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 18px;
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.5px;
  background: var(--grad-tech);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
}
[data-theme="light"] .page-header h1 {
  background: linear-gradient(90deg,#0E7490, #7E22CE, #D97706);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-header .sub {
  font-size: 13.5px;
  color: var(--mu);
  margin-top: 6px;
  font-weight: 500;
}
.page-header .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ────────────────────  KPIs  ──────────────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.kpi {
  background: linear-gradient(180deg, var(--card), rgba(20,20,40,.40));
  border: 1px solid rgba(168,85,247,.12);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
[data-theme="light"] .kpi {
  background: #fff;
  border: 1px solid var(--bd);
}
.kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.32);
  box-shadow: var(--shadow-lg);
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-tech);
  opacity: .85;
}
.kpi-l {
  font-size: var(--fs-xs);
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: var(--sp-2);
  font-weight: var(--fw-bold);
}
.kpi-v {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: -.5px;
  line-height: var(--line-tight);
}

/* HIERARQUIA · KPI principal vs secundários (item 6) ────────────── */
.kpis.has-hero {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 900px) {
  .kpis.has-hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kpis.has-hero { grid-template-columns: 1fr; }
}
.kpi.kpi-hero {
  background: linear-gradient(135deg, rgba(255,195,0,.06), rgba(168,85,247,.04));
  border: 1px solid rgba(255,195,0,.30);
  padding: var(--sp-5) var(--sp-5);
}
.kpi.kpi-hero::before {
  height: 4px;
  background: var(--grad-gold);
  opacity: 1;
}
.kpi.kpi-hero .kpi-v {
  font-size: var(--fs-2xl);
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Borda colorida por status semântico ────────────────────────── */
.kpi.kpi-good   { border-left: 3px solid var(--brand-green); }
.kpi.kpi-warn   { border-left: 3px solid var(--brand-amber); }
.kpi.kpi-bad    { border-left: 3px solid var(--brand-red); }
.kpi.kpi-info   { border-left: 3px solid var(--brand-cyan); }
.kpi.kpi-good::before { background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan)); }
.kpi.kpi-warn::before { background: linear-gradient(90deg, var(--brand-amber), var(--brand-orange)); }
.kpi.kpi-bad::before  { background: linear-gradient(90deg, var(--brand-red), var(--brand-magenta)); }
.kpi-t {
  font-size: 11.5px;
  color: var(--mu);
  margin-top: 6px;
  font-weight: 600;
}
.kpi-t.up   { color: var(--brand-green); }
.kpi-t.down { color: var(--brand-red); }
.kpi-t.warn { color: var(--brand-amber); }

/* ────────────────────  PANELS  ──────────────────── */
.panel {
  background: linear-gradient(180deg, var(--card), rgba(20,20,40,.40));
  border: 1px solid rgba(168,85,247,.12);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md);
}
[data-theme="light"] .panel {
  background: #fff;
  border: 1px solid var(--bd);
}
.panel h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel h4 {
  font-size: 12px;
  color: var(--mu);
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.panel p { font-size: 14px; line-height: 1.6; }
.panel.hot {
  border: 1px solid rgba(34,211,238,.35);
  background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(168,85,247,.03));
}
.panel.warm {
  border: 1px solid rgba(16,185,129,.32);
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(34,211,238,.03));
}
.panel.gold {
  border: 1px solid rgba(168,85,247,.36);
  background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(236,72,153,.04));
}

/* ────────────────────  TABELAS  ──────────────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
th {
  background: linear-gradient(180deg, var(--pl), rgba(31,31,53,.5));
  color: var(--mu);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bd);
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(42,42,64,.35);
  font-size: 13.5px;
  vertical-align: top;
  color: var(--fg-soft);
}
tr:hover td { background: rgba(168,85,247,.04); }
[data-theme="light"] tr:hover td { background: rgba(168,85,247,.04); }

/* ────────────────────  TAGS / SEMÁFOROS  ──────────────────── */
.tag, .sem {
  display: inline-block;
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgba(168,85,247,.16);
  color: #C084FC;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.tag.gr, .sem.gr { background: rgba(16,185,129,.18); color: #34D399; }
.tag.yl, .sem.yl { background: rgba(251,191,36,.18); color: #FCD34D; }
.tag.rd, .sem.rd { background: rgba(239,68,68,.20); color: #F87171; }
.tag.or, .sem.or { background: rgba(255,142,60,.20); color: #FFB87C; }
.tag.pu, .sem.pu { background: rgba(168,85,247,.20); color: #C084FC; }
[data-theme="light"] .tag,    [data-theme="light"] .sem    { color: #7E22CE; }
[data-theme="light"] .tag.gr, [data-theme="light"] .sem.gr { color: #047857; }
[data-theme="light"] .tag.yl, [data-theme="light"] .sem.yl { color: #92400E; }
[data-theme="light"] .tag.rd, [data-theme="light"] .sem.rd { color: #B91C1C; }
[data-theme="light"] .tag.or, [data-theme="light"] .sem.or { color: #C2410C; }

/* ────────────────────  BOTÕES  ──────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--grad-tech);
  color: #0F0F18;
  font-size: 13.5px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 4px 14px rgba(168,85,247,.30);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168,85,247,.40);
  filter: brightness(1.08);
}
.btn-primary { background: var(--grad-tech); color: #0F0F18; }
.btn-ghost {
  background: rgba(168,85,247,.06);
  border: 1px solid rgba(168,85,247,.25);
  color: var(--fg);
  box-shadow: none;
  font-weight: 600;
}
.btn-ghost:hover {
  background: rgba(168,85,247,.14);
  transform: none;
  box-shadow: 0 0 0 3px rgba(168,85,247,.10);
}
.btn-sm { padding: 7px 14px; font-size: 12px; }

/* ────────────────────  ALERTS  ──────────────────── */
.alert {
  padding: 14px 16px;
  border-radius: 10px;
  margin: 10px 0;
  background: linear-gradient(90deg, rgba(168,85,247,.08), rgba(34,211,238,.03));
  border: 1px solid rgba(168,85,247,.20);
  border-left: 3px solid var(--brand-purple);
}
.alert.gr { border-color: rgba(16,185,129,.20); border-left-color: var(--brand-green); background: linear-gradient(90deg, rgba(16,185,129,.08), transparent); }
.alert.yl { border-color: rgba(251,191,36,.22); border-left-color: var(--brand-amber); background: linear-gradient(90deg, rgba(251,191,36,.08), transparent); }
.alert.rd { border-color: rgba(239,68,68,.22); border-left-color: var(--brand-red); background: linear-gradient(90deg, rgba(239,68,68,.08), transparent); }
.alert.or { border-color: rgba(255,142,60,.22); border-left-color: var(--brand-orange); background: linear-gradient(90deg, rgba(255,142,60,.08), transparent); }
.alert .a-title { font-weight: 800; margin-bottom: 4px; font-size: 13.5px; color: var(--fg); }

/* ────────────────────  AGENT SUGGEST  ──────────────────── */
.agent-suggest {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(168,85,247,.10), rgba(34,211,238,.04));
  border: 1px solid rgba(168,85,247,.30);
  border-radius: var(--radius-md);
  margin: 16px 0;
  align-items: center;
  box-shadow: 0 4px 16px rgba(168,85,247,.10);
}
.agent-suggest .agent-emoji-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(168,85,247,.15);
  border: 2px solid rgba(168,85,247,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
}
.agent-suggest .agent-emoji-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ────────────────────  AGENT CARD FLOATING  ──────────────────── */
.agent-card-floating {
  background: linear-gradient(180deg, var(--card), rgba(20,20,40,.40));
  border: 1px solid rgba(168,85,247,.18);
  padding: 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  text-align: left;
  color: var(--fg);
  font-family: inherit;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
}
.agent-card-floating:hover {
  border-color: rgba(168,85,247,.50);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(168,85,247,.20);
}
.agent-card-floating h4 {
  font-size: 14.5px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--fg);
}
.agent-card-floating .ag-msg {
  font-size: 12.5px;
  color: var(--mu);
  margin-bottom: 12px;
  line-height: 1.55;
}
.agent-card-floating .ag-cta {
  font-size: 12px;
  color: var(--brand-purple);
  font-weight: 800;
  letter-spacing: .3px;
}

/* ────────────────────  CHAT FLUTUANTE  ──────────────────── */
#agent-chat {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 400px;
  max-height: 580px;
  height: 75vh;
  background: var(--card);
  border: 1px solid rgba(168,85,247,.22);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.20);
  display: flex;
  flex-direction: column;
  z-index: 100;
}
#agent-chat.hidden { display: none; }
.ac-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1F1F35, #2A1A40);
  color: #fff;
  border-radius: 18px 18px 0 0;
  border-bottom: 1px solid rgba(168,85,247,.20);
}
[data-theme="light"] .ac-head {
  background: linear-gradient(135deg, #F8FAFC, #EDE9FE);
  color: #0F172A;
}
#ac-emoji {
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
#ac-emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ac-name {
  font-weight: 800;
  flex: 1;
  font-size: 14.5px;
  letter-spacing: -.2px;
}
#ac-close {
  background: rgba(255,255,255,.12);
  border: none;
  color: inherit;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s;
}
#ac-close:hover { background: rgba(255,255,255,.22); }
.ac-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  font-size: 13.5px;
}
.ac-msg {
  padding: 11px 14px;
  border-radius: 12px;
  margin: 8px 0;
  max-width: 88%;
  line-height: 1.55;
  font-size: 13.5px;
}
.ac-msg.bot {
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.14);
}
.ac-msg.me {
  background: linear-gradient(90deg, rgba(168,85,247,.20), rgba(34,211,238,.10));
  margin-left: auto;
  text-align: right;
}
.ac-foot {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(168,85,247,.14);
}
#ac-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--pl);
  border: 1px solid rgba(168,85,247,.18);
  border-radius: 10px;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
}
#ac-input:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}
#ac-send {
  padding: 10px 18px;
  background: var(--grad-tech);
  color: #0F0F18;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(168,85,247,.30);
}
#ac-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(168,85,247,.40);
}

/* ────────────────────  INPUTS  ──────────────────── */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="tel"],
select, textarea {
  width: 100%;
  background: var(--pl);
  border: 1px solid rgba(168,85,247,.18);
  color: var(--fg);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}
label {
  display: block;
  font-size: 11px;
  color: var(--mu);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 12px 0 6px;
  font-weight: 700;
}

/* ────────────────────  GRID  ──────────────────── */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; }
.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.muted     { color: var(--mu); font-size: 12px; }

/* ────────────────────  MISC  ──────────────────── */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
  background: var(--card);
  padding: 12px 16px;
  border: 1px solid var(--bd);
  border-left: 3px solid var(--brand-purple);
  border-radius: 10px;
  font-size: 13px;
  box-shadow: 0 12px 32px rgba(0,0,0,.40);
}

#btn-top {
  background: var(--grad-tech) !important;
  box-shadow: 0 8px 24px rgba(168,85,247,.40) !important;
  border-radius: 14px !important;
  border: none !important;
  color: #0F0F18 !important;
}
#btn-top:hover { transform: translateY(-2px); }

/* Modal genérico */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: var(--card);
  border: 1px solid rgba(168,85,247,.20);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 560px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  color: var(--fg);
}

/* ────────────────────  PRINT-FRIENDLY  ──────────────────── */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-image: none !important;
  }
  /* Esconde sidebar, topbar, chat, botões flutuantes */
  aside, .sb-backdrop, .topbar, #agent-chat, #btn-mads, #btn-top,
  .sb-toggle, .icon-btn, #mads-spotlight, #mads-welcome, #mads-notifs {
    display: none !important;
  }
  .layout {
    display: block !important;
  }
  main {
    width: 100% !important;
    max-width: 100% !important;
  }
  #content {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .panel, .kpi, table, .alert, .agent-suggest {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #fff !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  .panel.hot { background: #FEF2F2 !important; border-color: #FCA5A5 !important; }
  .panel.warm { background: #FEFCE8 !important; border-color: #FCD34D !important; }
  .panel.cool { background: #ECFEFF !important; border-color: #67E8F9 !important; }
  .panel.gold { background: #FAF5FF !important; border-color: #C084FC !important; }
  h1, h2, h3, h4, .kpi-v {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background: none !important;
  }
  .page-header h1 {
    background: none !important;
    color: #0F172A !important;
    -webkit-text-fill-color: #0F172A !important;
    border-bottom: 2px solid #6366F1 !important;
    padding-bottom: 8px !important;
  }
  .btn, button {
    display: none !important;
  }
  .actions { display: none !important; }
  /* Adiciona cabeçalho de impressão em cada página */
  @page {
    margin: 1.5cm;
    size: A4;
  }
  .page-header::before {
    content: "MadSSolutions · Relatório Operacional · " attr(data-date);
    display: block;
    font-size: 10px;
    color: #6B7280;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  table {
    font-size: 11px !important;
  }
  td, th {
    padding: 6px 8px !important;
    color: #000 !important;
  }
  tr:hover td { background: transparent !important; }
}

/* ────────────────────  MOBILE  ──────────────────── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 286px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.6);
  }
  aside.open { transform: translateX(0); }
  .sb-toggle { display: inline-flex; }
  #content { padding: 22px 16px; }
  .topbar { padding: 12px 14px; }
  .page-header h1 { font-size: 23px; }
  .kpi-v { font-size: 22px; }
  #agent-chat { width: calc(100% - 24px); right: 12px; bottom: 12px; }
  table { font-size: 12px; }
}

/* ──────────────────── ÍCONES 3D · catálogo /icones/ ──────────────────── */
.ico-3d-sm  { width:20px;  height:20px;  flex-shrink:0; vertical-align:middle; object-fit:contain; }
.ico-3d-md  { width:24px;  height:24px;  flex-shrink:0; vertical-align:middle; object-fit:contain; }
.ico-3d-lg  { width:48px;  height:48px;  flex-shrink:0; object-fit:contain; }
.ico-3d-xl  { width:96px;  height:96px;  flex-shrink:0; object-fit:contain; }
.ico-3d-2xl { width:160px; height:160px; flex-shrink:0; object-fit:contain; }
.ico-3d-glow { filter: drop-shadow(0 4px 12px rgba(255,195,0,.25)); }