:root {
  /* ── MX2GESTAO Design System ── */
  --navy-950: #020A2E;
  --navy-900: #06113F;
  --navy-800: #0A1B5A;
  --blue-700: #0B45C6;
  --blue-600: #1764F5;
  --blue-500: #2D7DFF;
  --sky-400:  #5BA9FF;
  --ice-50:   #F7FAFF;

  /* semantic aliases */
  --brand-light: #5BA9FF;
  --brand-mid:   #1764F5;
  --brand-dark:  #06113F;

  --bg-app:     #F7FAFF;
  --bg-sidebar: #06113F;
  --bg-topbar:  #FFFFFF;
  --bg-card:    #FFFFFF;

  --text-primary: #06113F;
  --text-muted:   #64748B;
  --text-sidebar: #C8D8F4;
  --text-active:  #FFFFFF;

  --accent:       #1764F5;
  --accent-hover: #0B45C6;

  --danger:  #EF4444;
  --success: #10B981;
  --warning: #F59E0B;

  --border:      #D7E1F0;
  --shadow-card: 0 1px 3px rgba(6,17,63,.07), 0 4px 16px rgba(6,17,63,.05);
  --sidebar-w:         240px;
  --sidebar-w-compact: 64px;
  --topbar-h:          60px;
}

*{ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-sizing: border-box; }
body{ margin: 0; background: var(--bg-app); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
/* Tailwind roda com preflight desligado (corePlugins.preflight:false, ver
   base.html) então <button> sem classe .btn-* herda a aparência nativa do
   navegador (borda, fundo cinza, padding próprio) — mais visível ainda em
   mobile, onde cada SO estiliza o botão padrão de um jeito diferente. Reset
   aqui; .btn-mx/.btn-ghost/.btn-secondary/.btn-danger (mais específicos,
   definidos abaixo) continuam sobrescrevendo normalmente. */
button{
  font-family: inherit; font-size: 100%; color: inherit; line-height: inherit;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
code, .mono{ font-family: 'JetBrains Mono', monospace; }
.app-shell{ display: flex; min-height: 100vh; }
.app-main{ flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); transition: margin-left .2s ease; }

/* ── Sidebar ── */
.sidebar{
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-800) 100%);
  color: var(--text-sidebar);
  position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 30;
  border-right: 1px solid rgba(91,169,255,.08);
  transition: width .2s ease;
  /* Scrollbar fina e discreta (Firefox) — visível só ao passar o mouse */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar:hover{ scrollbar-color: rgba(140,180,255,.28) transparent; }
/* Scrollbar Chrome/Edge/Safari */
.sidebar::-webkit-scrollbar{ width: 6px; }
.sidebar::-webkit-scrollbar-track{ background: transparent; }
.sidebar::-webkit-scrollbar-thumb{
  background: transparent; border-radius: 8px;
  transition: background .2s;
}
.sidebar:hover::-webkit-scrollbar-thumb{ background: rgba(140,180,255,.28); }
.sidebar::-webkit-scrollbar-thumb:hover{ background: rgba(140,180,255,.5); }
.sidebar-brand{
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  font-weight: 800; color: #fff;
  border-bottom: 1px solid rgba(91,169,255,.12);
}
.sidebar-brand .brand-symbol{ width: auto; height: 36px; flex-shrink: 0; object-fit: contain; }
.sidebar-brand .brand-name{ font-size: 15px; letter-spacing: .3px; }
.sidebar-brand .brand-name .two{ color: var(--sky-400); }

.sidebar-nav{ padding: 12px 10px 30px; }
.nav-section-label{
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(200,216,244,.4); padding: 14px 12px 5px; font-weight: 700;
}
.nav-item{
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px;
  color: var(--text-sidebar); text-decoration: none; font-size: 13.5px; font-weight: 500;
  border-left: 3px solid transparent; margin-bottom: 2px;
  transition: background .12s, color .12s, border-color .12s;
}
.nav-item:hover{ background: rgba(45,125,255,.12); color: #fff; }
.nav-item.active{
  background: rgba(23,100,245,.22);
  border-left-color: var(--sky-400);
  color: #fff; font-weight: 600;
}
.nav-item-soon{ opacity: .45; cursor: default; }
.badge-soon{
  margin-left: auto; font-size: 10px; background: rgba(255,255,255,.10);
  padding: 2px 7px; border-radius: 20px;
}
.nav-icon{
  width: 17px; height: 17px; display: inline-block; opacity: .80; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  /* Fallback: ícone sem regra específica vira um quadrado de contorno discreto,
     nunca um bloco sólido de cor. Qualquer .nav-icon[data-icon="..."] sobrescreve. */
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3C/svg%3E");
}
.nav-item.active .nav-icon{ opacity: 1; }
.nav-icon[data-icon="grid"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");}
.nav-icon[data-icon="home"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");}
.nav-icon[data-icon="users"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");}
.nav-icon[data-icon="building"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01'/%3E%3C/svg%3E");}
.nav-icon[data-icon="box"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpath d='M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12'/%3E%3C/svg%3E");}
.nav-icon[data-icon="edit"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");}
.nav-icon[data-icon="file"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");}
.nav-icon[data-icon="credit-card"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");}
.nav-icon[data-icon="repeat"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 1l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 1l4 4-4 4'/%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14M7 23l-4-4 4-4'/%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");}
.nav-icon[data-icon="settings"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");}
.nav-icon[data-icon="user"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");}
.nav-icon[data-icon="truck"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");}
.nav-icon[data-icon="shopping-cart"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");}
.nav-icon[data-icon="map-pin"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");}
.nav-icon[data-icon="list"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");}
.nav-icon[data-icon="dollar-sign"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");}
.nav-icon[data-icon="trending-up"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");}
.nav-icon[data-icon="arrow-up-circle"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16 12 12 8 8 12'/%3E%3Cline x1='12' y1='16' x2='12' y2='8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='16 12 12 8 8 12'/%3E%3Cline x1='12' y1='16' x2='12' y2='8'/%3E%3C/svg%3E");}
.nav-icon[data-icon="package"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M16.5 9.4 7.55 4.24'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cline x1='12' y1='22' x2='12' y2='12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M16.5 9.4 7.55 4.24'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cline x1='12' y1='22' x2='12' y2='12'/%3E%3C/svg%3E");}
.nav-icon[data-icon="layers"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E");}
.nav-icon[data-icon="activity"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");}
.nav-icon[data-icon="shopping-bag"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");}
.nav-icon[data-icon="inbox"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");}
.nav-icon[data-icon="calendar"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");}
.nav-icon[data-icon="bar-chart-2"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");}
.nav-icon[data-icon="target"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");}
.nav-icon[data-icon="upload"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");}
.nav-icon[data-icon="check-circle"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");}

/* ── Sidebar: botão recolher ── */
.sidebar-collapse-btn{
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  color: rgba(200,216,244,.45); padding: 4px; border-radius: 6px;
  display: flex; align-items: center; flex-shrink: 0;
  transition: color .12s, background .12s;
}
.sidebar-collapse-btn:hover{ color: #fff; background: rgba(255,255,255,.1); }
.sidebar-collapse-btn svg{ transition: transform .2s ease; }

/* ── Sidebar: divisor e grupos ── */
.nav-divider{
  height: 1px; background: rgba(91,169,255,.1); margin: 8px 12px;
}
.nav-group{ }
.nav-group-header{
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 8px; background: none; border: 0;
  color: var(--text-sidebar); font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-align: left; margin-bottom: 2px;
  transition: background .12s, color .12s;
}
.nav-group-header:hover{ background: rgba(45,125,255,.12); color: #fff; }
.nav-group-label{ flex: 1; }
.nav-group-chevron{
  flex-shrink: 0; opacity: .55;
  transition: transform .2s ease;
}
.nav-group.is-open > .nav-group-header .nav-group-chevron{ transform: rotate(180deg); }
.nav-group-items{ display: none; padding-bottom: 4px; }
.nav-group.is-open > .nav-group-items{ display: block; }
.nav-item--sub{ padding-left: 30px; font-size: 13px; }
.nav-item-label{ flex: 1; }

/* ── Sidebar: clusters e subgrupos ── */
.nav-cluster-label{
  margin: 16px 12px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  color: rgba(200,216,244,.42);
}
.nav-subgroup-label{
  margin: 8px 12px 2px 30px; font-size: 10px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase;
  color: rgba(200,216,244,.35);
}
.nav-subgroup-divider{
  height: 1px; background: rgba(91,169,255,.08); margin: 6px 12px 6px 30px;
}

/* ── Sidebar: modo compacto (64 px ícones) ── */
.app-shell.sidebar--compact .sidebar{ width: var(--sidebar-w-compact); }
.app-shell.sidebar--compact .app-main{ margin-left: var(--sidebar-w-compact); }
.app-shell.sidebar--compact .sidebar-brand{
  padding: 12px 0; flex-direction: column; align-items: center; gap: 8px;
}
.app-shell.sidebar--compact .brand-name{ display: none; }
.app-shell.sidebar--compact .sidebar-collapse-btn{ margin-left: 0; }
.app-shell.sidebar--compact .sidebar-collapse-btn svg{ transform: rotate(180deg); }
.app-shell.sidebar--compact .nav-group-label,
.app-shell.sidebar--compact .nav-group-chevron,
.app-shell.sidebar--compact .nav-item-label,
.app-shell.sidebar--compact .badge-soon,
.app-shell.sidebar--compact .nav-cluster-label,
.app-shell.sidebar--compact .nav-subgroup-label,
.app-shell.sidebar--compact .nav-subgroup-divider,
.app-shell.sidebar--compact .nav-divider{ display: none; }
.app-shell.sidebar--compact .nav-group-items{ display: none !important; }
.app-shell.sidebar--compact .nav-group-header{
  justify-content: center; padding: 10px 0;
}
.app-shell.sidebar--compact .nav-item{
  justify-content: center; padding: 10px 0;
}
.app-shell.sidebar--compact .sidebar-nav{ padding: 8px 0 30px; }

/* ── Topbar ── */
.topbar{
  height: var(--topbar-h); background: var(--bg-topbar);
  display: flex; align-items: center; gap: 14px; padding: 0 24px;
  box-shadow: 0 1px 0 var(--border); position: sticky; top: 0; z-index: 20;
}
.topbar-toggle{
  display: none; border: 0; background: transparent; cursor: pointer;
  color: var(--navy-900); padding: 4px; border-radius: 6px;
  flex-shrink: 0;
}
.topbar-toggle:hover{ background: var(--ice-50); }

.topbar-search{
  flex: 1; max-width: 480px; display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px;
  background: var(--ice-50); cursor: pointer; font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.topbar-search:hover{
  border-color: var(--blue-600); background: var(--bg-card, #fff);
  box-shadow: 0 0 0 3px rgba(23,100,245,.08);
}
.topbar-search-icon{ flex-shrink: 0; color: var(--text-muted); }
.topbar-search__ph{ color: var(--text-muted); font-size: 13.5px; }
.topbar-search__kbd{
  margin-left: auto; font-size: 11px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
  font-family: inherit;
}

.topbar-actions{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.su-empresa-seletor select{
  border: 1.5px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  background: var(--ice-50); color: var(--navy-900); cursor: pointer;
  max-width: 220px; transition: border-color .15s, box-shadow .15s;
}
.su-empresa-seletor select:focus{
  outline: none; border-color: var(--blue-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(23,100,245,.10);
}
.topbar-icon{
  border: 0; background: transparent; cursor: pointer; padding: 8px;
  border-radius: 8px; color: var(--text-muted);
  display: flex; align-items: center; transition: background .12s, color .12s;
}
.topbar-icon:hover{ background: var(--ice-50); color: var(--navy-900); }
.topbar-avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--navy-900));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(23,100,245,.30);
}

/* ── Content ── */
.content-area{ padding: 24px; max-width: 1400px; }
.page-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 14px; flex-wrap: wrap; }
.page-title{ font-size: 22px; font-weight: 700; margin: 0; color: var(--navy-900); }
.page-subtitle{ color: var(--text-muted); font-size: 14px; margin: 2px 0 0; }

/* ── Cards ── */
.card-mx{
  background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-card);
  padding: 22px; border: 1px solid var(--border);
}
.card-mx h2, .card-mx .card-title-inner{
  font-size: 14px; font-weight: 600; color: var(--navy-900); margin: 0 0 16px;
}

/* KPI Cards — design moderno */
.kpi-grid{ display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card{
  background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-card);
  border: 1px solid var(--border); padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 16px;
}
.kpi-icon{
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(23,100,245,.10);
}
.kpi-icon svg{ width: 20px; height: 20px; color: var(--blue-600); }
.kpi-card.navy .kpi-icon{ background: rgba(6,17,63,.08); }
.kpi-card.navy .kpi-icon svg{ color: var(--navy-900); }
.kpi-card.green .kpi-icon{ background: rgba(16,185,129,.10); }
.kpi-card.green .kpi-icon svg{ color: var(--success); }
.kpi-card.amber .kpi-icon{ background: rgba(245,158,11,.10); }
.kpi-card.amber .kpi-icon svg{ color: var(--warning); }
.kpi-card.danger .kpi-icon{ background: rgba(239,68,68,.10); }
.kpi-card.danger .kpi-icon svg{ color: var(--danger); }
.kpi-body{ flex: 1; min-width: 0; }
.kpi-label{ color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi-value{ font-size: 26px; font-weight: 800; margin: 4px 0 3px; color: var(--navy-900); line-height: 1.1; }
.kpi-delta{ font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kpi-delta.up{ color: var(--success); }
.kpi-delta.down{ color: var(--danger); }

.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-2-1{ display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Dashboard de insights: blocos compactos por módulo ── */
/* Cada módulo é uma seção com cabeçalho enxuto + grid de KPIs/gráficos.
   A altura fixa do .chart-box impede os gráficos (sobretudo doughnuts) de
   esticarem na largura do card — com maintainAspectRatio:false no JS,
   o gráfico preenche exatamente a caixa, mantendo o dashboard compacto. */
.dash-section{ margin-bottom: 22px; }
.dash-section__head{
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.dash-section__title{ font-size: 13px; font-weight: 700; color: var(--navy-900); letter-spacing: -.01em; margin: 0; }
.dash-section__meta{ font-size: 12px; color: var(--text-muted); font-weight: 600; }
.dash-section .kpi-grid{ margin-bottom: 14px; }
/* KPIs mais compactos dentro das seções de insights */
.dash-section .kpi-card{ padding: 14px 16px; }
.dash-section .kpi-value{ font-size: 21px; margin: 2px 0; }
.card-mx .dash-card-title{ font-size: 13px; font-weight: 600; color: var(--navy-900); margin: 0 0 12px; }
.chart-box{ position: relative; height: 240px; }
.chart-box--sm{ height: 200px; }        /* doughnuts/gráficos de apoio */
.chart-box canvas{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
@media (max-width: 720px){
  .chart-box{ height: 220px; }
  .chart-box--sm{ height: 190px; }
}

/* ── Tables ── */
.table-mx{ width: 100%; border-collapse: collapse; }
.table-mx th{
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600;
}
.table-mx td{ padding: 12px 14px; font-size: 14px; border-bottom: 1px solid var(--border); }
.table-mx tr:last-child td{ border-bottom: 0; }
.table-mx tbody tr:hover td{ background: var(--ice-50); }
.badge-status{ font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; display: inline-block; }
.badge-status.ok{ background: #DCFCE7; color: #15803D; }
.badge-status.warn{ background: #FEF3C7; color: #B45309; }
.badge-status.err{ background: #FEE2E2; color: #B91C1C; }
.badge-status.neutral{ background: #E5E7EB; color: #4B5563; }

/* ── Linha de lista compacta (agenda, follow-ups, insights) — substitui o
   "border rounded p-2" repetido em todo lugar por um item consistente ── */
.list-row{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); font-size: 13.5px; transition: background .12s, border-color .12s;
}
.list-row:hover{ background: var(--ice-50); }
.list-row--stack{ align-items: flex-start; flex-direction: column; gap: 4px; }
.task-check{
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border);
  background: none; flex-shrink: 0; cursor: pointer; transition: border-color .15s, background .15s;
}
.task-check:hover{ border-color: var(--success); background: rgba(16,185,129,.10); }

/* ── Caixas de alerta (LGPD, avisos de bloqueio, etc.) ── */
.alert-box{ border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; }
.alert-box.err{ background: #FEE2E2; color: #B91C1C; border: 1px solid rgba(185,28,28,.15); }
.alert-box.warn{ background: #FEF3C7; color: #B45309; border: 1px solid rgba(180,83,9,.15); }
.alert-box.info{ background: rgba(23,100,245,.06); color: var(--navy-900); border: 1px solid rgba(23,100,245,.15); }
:root[data-theme="dark"] .alert-box.err{ background: rgba(239,68,68,.15); color: #f87171; }
:root[data-theme="dark"] .alert-box.warn{ background: rgba(245,158,11,.15); color: #fbbf24; }
:root[data-theme="dark"] .alert-box.info{ background: rgba(86,156,214,.12); color: var(--text-primary); }

/* ── Buttons ── */
.btn-mx{
  background: var(--blue-600); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, box-shadow .15s; font-family: inherit;
  box-shadow: 0 1px 4px rgba(23,100,245,.25);
}
.btn-mx:hover{ background: var(--blue-700); color: #fff; box-shadow: 0 3px 10px rgba(23,100,245,.35); }
.btn-ghost{ background: #fff; color: var(--navy-900); border: 1.5px solid var(--border); box-shadow: none; }
.btn-ghost:hover{ background: var(--ice-50); color: var(--navy-900); box-shadow: none; }
.btn-danger{ background: var(--danger); }
.btn-danger:hover{ background: #DC2626; }

.status-pill{ display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px; }
.status-dot{ width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-dot.on{ background: var(--success); }
.status-dot.off{ background: var(--danger); }
.status-dot.na{ background: #9CA3AF; }

/* ── Forms ── */
.field{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy-900); }
.field span{ font-size: 13px; }
.field input, .field select{
  border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-size: 14px; font-weight: 500; background: var(--ice-50); color: var(--navy-900);
  font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus{
  border-color: var(--blue-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(23,100,245,.12);
}
.form-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.field-wide{ grid-column: 1 / -1; }

/* ── Badges ── */
.badge{ font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.badge-ok{ background: #DCFCE7; color: #15803D; }
.badge-muted{ background: #E5E7EB; color: #6B7280; }
.badge-blue{ background: rgba(23,100,245,.10); color: var(--blue-600); }

/* ── CRM: botão de WhatsApp (ícone da marca em bolha de tinta suave —
   mesma linguagem do .kpi-icon, em vez de botão sólido saturado) ── */
.wa-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 50%; background: rgba(16,185,129,.10); color: var(--success);
  flex-shrink: 0; text-decoration: none; transition: background .15s;
}
.wa-btn:hover{ background: rgba(16,185,129,.18); }
.wa-btn.wa-btn--label{
  width: auto; height: auto !important; border-radius: 20px; padding: 5px 10px 5px 8px;
  font-size: 12px; font-weight: 600;
}
:root[data-theme="dark"] .wa-btn{ background: rgba(16,185,129,.16); }
:root[data-theme="dark"] .wa-btn:hover{ background: rgba(16,185,129,.26); }

/* ── CRM: conteúdo gerado por IA — selo + moldura sutil, para não se
   confundir com um alerta genérico ── */
.card-ai{
  border-radius: 12px; border: 1px solid rgba(23,100,245,.18);
  background: linear-gradient(180deg, rgba(23,100,245,.06), rgba(23,100,245,.02));
  padding: 12px 14px;
}
.card-ai__badge{
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--blue-600);
  text-transform: uppercase; letter-spacing: .04em;
}
.card-ai__badge svg{ width: 12px; height: 12px; }
.card-ai p{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--navy-900); white-space: pre-line; }
.ai-trigger-btn{
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-size: 12px; font-weight: 600; color: var(--blue-600);
  background: rgba(23,100,245,.08); border: 1px solid rgba(23,100,245,.18);
  border-radius: 20px; padding: 4px 10px; cursor: pointer; transition: background .15s;
}
.ai-trigger-btn:hover{ background: rgba(23,100,245,.14); }
.ai-trigger-btn svg{ width: 12px; height: 12px; flex-shrink: 0; }
:root[data-theme="dark"] .card-ai{
  border-color: rgba(86,156,214,.25);
  background: linear-gradient(180deg, rgba(86,156,214,.12), rgba(86,156,214,.03));
}
:root[data-theme="dark"] .ai-trigger-btn{ background: rgba(86,156,214,.12); border-color: rgba(86,156,214,.3); }
:root[data-theme="dark"] .ai-trigger-btn:hover{ background: rgba(86,156,214,.2); }

/* ── Dropzone de upload (import CSV etc.) ── */
.dropzone{
  position: relative; border: 1.5px dashed var(--border); border-radius: 12px;
  padding: 28px 20px; text-align: center; background: var(--ice-50);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-dragover{ border-color: var(--blue-600); background: #fff; }
.dropzone__icon{ width: 28px; height: 28px; color: var(--blue-600); opacity: .85; margin: 0 auto 8px; }
.dropzone__text{ margin: 0; font-size: 13.5px; color: var(--text-muted); }
.dropzone__link{ color: var(--blue-600); font-weight: 600; text-decoration: underline; }
.dropzone__filename{ margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--navy-900); min-height: 16px; }
.dropzone__input{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
:root[data-theme="dark"] .dropzone{ background: #1e1e1e; }
:root[data-theme="dark"] .dropzone:hover, :root[data-theme="dark"] .dropzone.is-dragover{ background: #252526; }

/* ── CRM: Kanban de oportunidades ── */
.kanban-board{ display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col{
  min-width: 250px; flex: 1; background: var(--ice-50); border: 1px solid var(--border);
  border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 260px);
}
.kanban-col__head{
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.kanban-col__title{ font-size: 12px; font-weight: 700; color: var(--navy-900); text-transform: uppercase; letter-spacing: .03em; }
.kanban-col__count{
  font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px;
}
.kanban-col__body{ padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

.kanban-card{
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 1px 2px rgba(6,17,63,.04);
  transition: box-shadow .15s, border-color .15s;
}
.kanban-card:hover{ box-shadow: var(--shadow-card); border-color: var(--blue-500); }
.kanban-card__name{ font-size: 13.5px; font-weight: 600; color: var(--navy-900); line-height: 1.3; text-decoration: none; }
.kanban-card__name:hover{ color: var(--blue-600); }
.kanban-card__meta{ font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.kanban-card__phone{ font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.kanban-card__phone--wa{ color: var(--success); font-weight: 600; }
.kanban-card__phone--warn{ color: var(--warning); }

:root[data-theme="dark"] .kanban-col{ background: #1a1a1a; }
:root[data-theme="dark"] .kanban-col__count{ background: var(--bg-card); }

/* ── Settings ── */
.settings-grid{ display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.settings-nav{ padding: 8px; position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-item{
  padding: 10px 12px; border-radius: 8px; color: var(--text-muted);
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, color .15s;
}
.settings-nav-item:hover{ background: var(--ice-50); color: var(--navy-900); }
.settings-nav-item.is-active{ background: rgba(23,100,245,.10); color: var(--blue-600); }
.settings-panels{ display: flex; flex-direction: column; gap: 20px; }
.settings-section{ scroll-margin-top: 84px; }
.settings-section-head{ margin-bottom: 18px; }
.settings-section-head h2{ font-size: 17px; font-weight: 700; margin: 0; color: var(--navy-900); }
.settings-section-head p{ margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.settings-actions{ margin-top: 18px; display: flex; justify-content: flex-end; }
.integration-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.integration-item{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--ice-50);
}
.integration-meta{ display: flex; flex-direction: column; }
.integration-meta strong{ font-size: 14px; color: var(--navy-900); }
.integration-meta span{ font-size: 12px; color: var(--text-muted); }

/* ── Misc ── */
.emit-wrap{ display: flex; flex-direction: column; gap: 16px; }
.emit-toolbar{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.emit-frame-shell{
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(6,17,63,.06); background: #fff;
}
.emit-frame{ width: 100%; height: calc(100vh - var(--topbar-h) - 170px); min-height: 560px; border: 0; display: block; }

/* ── Responsive ── */
@media(max-width:768px){
  .sidebar{
    transform: translateX(-100%);
    transition: transform .2s, width .2s ease;
    width: var(--sidebar-w) !important;
    overflow-y: auto !important;
  }
  .sidebar.open{ transform: translateX(0); }
  .app-main{ margin-left: 0 !important; }
  .topbar-toggle{ display: block; }
  .grid-2, .grid-2-1{ grid-template-columns: 1fr; }
  .emit-frame{ height: calc(100vh - var(--topbar-h) - 200px); min-height: 480px; }
  /* Em mobile o sidebar nunca fica compacto — mostra tudo */
  .app-shell.sidebar--compact .sidebar{ width: var(--sidebar-w) !important; }
  .app-shell.sidebar--compact .sidebar-brand{ flex-direction: row; padding: 16px 18px; gap: 10px; }
  .app-shell.sidebar--compact .brand-name{ display: inline; }
  .app-shell.sidebar--compact .sidebar-collapse-btn{ display: none; }
  .app-shell.sidebar--compact .nav-group-label,
  .app-shell.sidebar--compact .nav-group-chevron,
  .app-shell.sidebar--compact .nav-item-label{ display: inline; }
  .app-shell.sidebar--compact .nav-cluster-label,
  .app-shell.sidebar--compact .nav-subgroup-label{ display: block; }
  .app-shell.sidebar--compact .nav-group-header{ width: 100%; padding: 9px 12px; justify-content: flex-start; }
  .app-shell.sidebar--compact .nav-item{ width: 100%; padding: 9px 12px; justify-content: flex-start; }
  .app-shell.sidebar--compact .nav-group.is-open > .nav-group-items{ display: block; }
  .app-shell.sidebar--compact .nav-divider{ display: block; }
  .app-shell.sidebar--compact .badge-soon{ display: inline-block; }
  .app-shell.sidebar--compact .sidebar-nav{ padding: 12px 10px 30px; }
}
@media(max-width:900px){
  .settings-grid{ grid-template-columns: 1fr; }
  .settings-nav{ position: static; flex-direction: row; flex-wrap: wrap; }
}
@media(max-width:760px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ── Tema escuro (estilo VS Code Dark+) ── */
:root[data-theme="dark"]{
  --bg-app:     #1e1e1e;
  --bg-sidebar: #181818;
  --bg-topbar:  #252526;
  --bg-card:    #252526;

  --text-primary: #d4d4d4;
  --text-muted:   #9aa0a6;
  --text-sidebar: #c5c5c5;
  --text-active:  #ffffff;

  --accent:       #569cd6;
  --accent-hover: #007acc;

  --border:      #3c3c3c;
  --shadow-card: 0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.25);

  /* Cores de marca (navy/blue) redefinidas para legibilidade em fundo escuro —
     usadas em textos/ícones via var(--navy-900)/var(--blue-600) espalhados
     pelo CSS e em style="" inline nos templates (ex. dashboard). */
  --navy-950: #d4d4d4;
  --navy-900: #d4d4d4;
  --navy-800: #c5c5c5;
  --blue-700: #7ab6e8;
  --blue-600: #569cd6;
  --blue-500: #569cd6;
  --sky-400:  #7ab6e8;
}

:root[data-theme="dark"] .sidebar{
  background: linear-gradient(180deg, #181818 0%, #1f1f1f 60%, #222222 100%);
  border-right-color: rgba(86,156,214,.10);
}

:root[data-theme="dark"] .topbar-search{ background: #1e1e1e; }
:root[data-theme="dark"] .topbar-search:hover{
  background: #252526; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(86,156,214,.18);
}
:root[data-theme="dark"] .su-empresa-seletor select{
  background: #1e1e1e; color: var(--text-primary);
}
:root[data-theme="dark"] .topbar-toggle:hover,
:root[data-theme="dark"] .topbar-icon:hover{
  background: rgba(255,255,255,.08); color: var(--text-primary);
}
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select{
  background: #1e1e1e; color: var(--text-primary);
}
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus{
  background: #1e1e1e; box-shadow: 0 0 0 3px rgba(86,156,214,.18);
}
:root[data-theme="dark"] .table-mx tbody tr:hover td{ background: rgba(255,255,255,.03); }
:root[data-theme="dark"] .btn-ghost{
  background: var(--bg-card); color: var(--text-primary); border-color: var(--border);
}
:root[data-theme="dark"] .btn-ghost:hover{ background: #2d2d2d; }
:root[data-theme="dark"] .settings-nav-item:hover{ background: #2d2d2d; }
:root[data-theme="dark"] .integration-item{ background: #1e1e1e; }

:root[data-theme="dark"] .badge-status.ok,
:root[data-theme="dark"] .badge-ok{ background: rgba(16,185,129,.18); color: #4ade80; }
:root[data-theme="dark"] .badge-status.warn{ background: rgba(245,158,11,.18); color: #fbbf24; }
:root[data-theme="dark"] .badge-status.err{ background: rgba(239,68,68,.18); color: #f87171; }
:root[data-theme="dark"] .badge-status.neutral,
:root[data-theme="dark"] .badge-muted{ background: #3c3c3c; color: #c5c5c5; }
:root[data-theme="dark"] .badge-blue{ background: rgba(86,156,214,.18); color: #569cd6; }

/* ── Tema escuro: compatibilidade com telas em Tailwind cru ──
   Muitas telas (Propostas, Contratos, Fiscal, Compras, etc.) usam classes
   utilitárias Tailwind (bg-white, text-gray-*, border-gray-*) direto no HTML,
   em vez do design system (.card-mx, var(--bg-card)). Escopado em
   .content-area para não afetar sidebar/topbar, já tratadas acima. */
:root[data-theme="dark"] .content-area input,
:root[data-theme="dark"] .content-area select,
:root[data-theme="dark"] .content-area textarea{
  background-color: #1e1e1e !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  color-scheme: dark;
}
:root[data-theme="dark"] .content-area input::placeholder,
:root[data-theme="dark"] .content-area textarea::placeholder{ color: #7a7f85 !important; }
:root[data-theme="dark"] .content-area input:focus,
:root[data-theme="dark"] .content-area select:focus,
:root[data-theme="dark"] .content-area textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(86,156,214,.18);
}

:root[data-theme="dark"] .content-area .bg-white{ background-color: var(--bg-card) !important; }
:root[data-theme="dark"] .content-area .bg-gray-50{ background-color: #2a2a2a !important; }
:root[data-theme="dark"] .content-area .bg-gray-100{ background-color: #333333 !important; }
:root[data-theme="dark"] .content-area .bg-gray-200{ background-color: #3c3c3c !important; }

:root[data-theme="dark"] .content-area .text-gray-900{ color: #e8e8e8 !important; }
:root[data-theme="dark"] .content-area .text-gray-800{ color: #d4d4d4 !important; }
:root[data-theme="dark"] .content-area .text-gray-700{ color: #c5c5c5 !important; }
:root[data-theme="dark"] .content-area .text-gray-600{ color: #a8adb3 !important; }
:root[data-theme="dark"] .content-area .text-gray-500{ color: #9aa0a6 !important; }
:root[data-theme="dark"] .content-area .text-gray-400{ color: #7a7f85 !important; }
:root[data-theme="dark"] .content-area .text-gray-300{ color: #6b7076 !important; }

:root[data-theme="dark"] .content-area .border-gray-100,
:root[data-theme="dark"] .content-area .border-gray-200,
:root[data-theme="dark"] .content-area .border-gray-300,
:root[data-theme="dark"] .content-area .border-gray-400,
:root[data-theme="dark"] .content-area .divide-gray-50,
:root[data-theme="dark"] .content-area .divide-gray-100{ border-color: var(--border) !important; }
:root[data-theme="dark"] .content-area .divide-gray-100 > *,
:root[data-theme="dark"] .content-area .divide-gray-50 > *{ border-color: var(--border) !important; }

:root[data-theme="dark"] .content-area .hover\:bg-gray-50:hover,
:root[data-theme="dark"] .content-area .hover\:bg-gray-100:hover,
:root[data-theme="dark"] .content-area .hover\:bg-gray-200:hover,
:root[data-theme="dark"] .content-area .hover\:bg-gray-300:hover{ background-color: #2d2d2d !important; }

:root[data-theme="dark"] .content-area .bg-blue-50{ background-color: rgba(86,156,214,.10) !important; }
:root[data-theme="dark"] .content-area .bg-blue-100{ background-color: rgba(86,156,214,.18) !important; }
:root[data-theme="dark"] .content-area .text-blue-500,
:root[data-theme="dark"] .content-area .text-blue-600,
:root[data-theme="dark"] .content-area .text-blue-700,
:root[data-theme="dark"] .content-area .text-blue-800,
:root[data-theme="dark"] .content-area .text-blue-900{ color: #569cd6 !important; }

:root[data-theme="dark"] .content-area .bg-green-100{ background-color: rgba(16,185,129,.18) !important; }
:root[data-theme="dark"] .content-area .text-green-600,
:root[data-theme="dark"] .content-area .text-green-800{ color: #4ade80 !important; }
:root[data-theme="dark"] .content-area .bg-amber-100{ background-color: rgba(245,158,11,.18) !important; }
:root[data-theme="dark"] .content-area .text-amber-600,
:root[data-theme="dark"] .content-area .text-amber-800{ color: #fbbf24 !important; }
:root[data-theme="dark"] .content-area .bg-red-100{ background-color: rgba(239,68,68,.18) !important; }
:root[data-theme="dark"] .content-area .text-red-500,
:root[data-theme="dark"] .content-area .text-red-600,
:root[data-theme="dark"] .content-area .text-red-800{ color: #f87171 !important; }

:root[data-theme="dark"] .kpi-card.green .kpi-icon{ background: rgba(16,185,129,.15); }
:root[data-theme="dark"] .kpi-card.amber .kpi-icon{ background: rgba(245,158,11,.15); }
:root[data-theme="dark"] .kpi-icon{ background: rgba(86,156,214,.15); }

/* ── Institucional ─────────────────────────────────────────────── */
.btn-sm{ padding: 6px 11px; font-size: 13px; }
.empty-state{
  text-align: center; padding: 48px 20px; color: var(--text-muted);
  background: var(--bg-card); border: 1.5px dashed var(--border); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* Card no dashboard */
.inst-dashboard-card{
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  margin-bottom: 20px; padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(120deg, var(--navy-900), var(--blue-600));
  color: #fff; box-shadow: 0 4px 16px rgba(6,17,63,.22);
  transition: transform .15s, box-shadow .15s;
}
.inst-dashboard-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,17,63,.30); }
.inst-dashboard-card-body h3{ margin: 0 0 3px; font-size: 17px; font-weight: 700; }
.inst-dashboard-card-body p{ margin: 0; font-size: 13.5px; opacity: .88; }
.inst-dashboard-card-arrow{ margin-left: auto; font-size: 26px; font-weight: 700; }

/* Hero Sobre/História */
.inst-hero{
  border-radius: 16px; overflow: hidden; margin-bottom: 24px;
  min-height: 220px; background-size: cover; background-position: center;
  background-color: var(--navy-900); display: flex; align-items: flex-end;
}
.inst-hero-inner{ padding: 28px 30px; color: #fff; }
.inst-hero-inner h2{ margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.inst-hero-text{ font-size: 15px; line-height: 1.55; max-width: 640px; opacity: .95; }
.inst-hero-text p{ margin: 0 0 8px; }

/* Blocos e grids */
.inst-block{ margin-bottom: 28px; }
.inst-section-title{ font-size: 18px; font-weight: 700; color: var(--navy-900); margin: 0 0 14px; }
.inst-grid{ display: grid; gap: 16px; }
.inst-grid-3{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.inst-grid-logos{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.inst-card{
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.inst-card h3{ margin: 0; font-size: 16px; font-weight: 700; color: var(--navy-900); }
.inst-card-text{ font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.inst-card-text p{ margin: 0 0 6px; }
.inst-card-img{ width: 100%; max-height: 140px; object-fit: contain; border-radius: 8px; }
.inst-link{ color: var(--blue-600); font-weight: 600; font-size: 14px; text-decoration: none; margin-top: auto; }
.inst-link:hover{ text-decoration: underline; }

/* Clientes/Projetos (logos) */
.inst-logo-card{
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; text-decoration: none; color: var(--navy-900);
  transition: border-color .15s, box-shadow .15s;
}
.inst-logo-card:hover{ border-color: var(--blue-600); box-shadow: 0 4px 14px rgba(23,100,245,.12); }
.inst-logo{ max-width: 120px; max-height: 60px; object-fit: contain; }
.inst-logo-name{ font-weight: 700; font-size: 15px; }
.inst-logo-desc{ color: var(--text-muted); font-size: 13px; }

/* Redes sociais */
.inst-redes-list{ display: flex; flex-wrap: wrap; gap: 12px; }
.inst-rede{
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
  background: var(--ice-50); color: var(--navy-900); border: 1.5px solid var(--border);
  transition: background .15s, border-color .15s;
}
.inst-rede:hover{ background: #fff; border-color: var(--blue-600); }
.inst-rede-icon{ width: 22px; height: 22px; object-fit: contain; border-radius: 4px; }

/* Tela de gestão */
.inst-manage-grid{ display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
.inst-form{
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px;
}
.inst-form-msg{ min-height: 18px; }
.inst-manage-block{ margin-bottom: 22px; }
.inst-manage-block-title{ font-size: 14px; font-weight: 700; color: var(--text-muted); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .03em; }
.inst-manage-row{
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px; margin-bottom: 8px;
}
.inst-thumb{ width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.inst-thumb-empty{ background: var(--ice-50); border: 1.5px solid var(--border); }
.inst-manage-info{ display: flex; flex-direction: column; gap: 2px; }
.inst-manage-info strong{ color: var(--navy-900); font-size: 14.5px; }
.inst-manage-meta{ font-size: 12.5px; color: var(--text-muted); }
.inst-manage-actions{ margin-left: auto; display: flex; gap: 8px; }
.inst-manage-actions form{ margin: 0; }

@media (max-width: 860px){
  .inst-manage-grid{ grid-template-columns: 1fr; }
  .inst-form{ position: static; }
}

/* Dark theme */
:root[data-theme="dark"] .inst-section-title,
:root[data-theme="dark"] .inst-card h3,
:root[data-theme="dark"] .inst-logo-name,
:root[data-theme="dark"] .inst-manage-info strong{ color: var(--navy-900); }
:root[data-theme="dark"] .inst-rede{ background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .inst-rede:hover{ background: rgba(255,255,255,.08); }

/* ── Organograma (árvore hierárquica com conectores) ──
   Técnica canônica: cada nó filho desenha, via ::before e ::after, o
   tracinho vertical que sobe e a metade da barra horizontal dos irmãos. */
/* viewport + scale: a árvore encolhe (scale) para caber na largura da tela */
.org-viewport { width: 100%; overflow: hidden; }
.org-scale { transform-origin: top left; display: inline-block; }
.org-tree,
.org-tree ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; }
.org-node { display: flex; flex-direction: column; align-items: center; position: relative; padding: 24px 12px 0; }

/* --- conectores dos FILHOS (nós dentro de .org-children) --- */
/* tracinho vertical subindo de cada filho até a barra horizontal */
.org-children > .org-node::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: 24px; background: var(--org-line, #d1d5db);
}
/* barra horizontal: cada filho pinta metade; juntas formam a linha entre irmãos */
.org-children > .org-node::after {
  content: ""; position: absolute; top: 0; height: 2px; width: 50%;
  background: var(--org-line, #d1d5db);
}
.org-children > .org-node:first-child::after { left: 50%; }              /* pinta p/ a direita */
.org-children > .org-node:last-child::after  { left: 0; }               /* pinta p/ a esquerda */
.org-children > .org-node:not(:first-child):not(:last-child)::after { width: 100%; left: 0; } /* meio: barra cheia */
.org-children > .org-node:only-child::after  { display: none; }         /* filho único: sem barra */

/* --- linha vertical saindo do PAI para baixo, ligando ao bloco de filhos --- */
.org-children { position: relative; padding-top: 24px; }
.org-children::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 2px; height: 24px; background: var(--org-line, #d1d5db);
}

.org-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 12rem; padding: 12px 16px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none;
  transition: box-shadow .15s;
}
.org-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.org-avatar-img { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }
.org-avatar {
  width: 3rem; height: 3rem; border-radius: 9999px; display: flex;
  align-items: center; justify-content: center; font-weight: 600;
  background: #dbeafe; color: #1d4ed8;
}
.org-nome { font-size: .875rem; font-weight: 500; color: #111827; text-align: center; }
.org-cargo { font-size: .75rem; color: #6b7280; text-align: center; }

:root[data-theme="dark"] { --org-line: #374151; }
:root[data-theme="dark"] .org-card { background: var(--navy-800, #0A1B5A); border-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .org-nome { color: #e5e7eb; }
:root[data-theme="dark"] .org-cargo { color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONDA 1 — Polimento base (13/07): classes faltantes, tabular-nums,
   focus-visible global, hover-lift, barra de progresso HTMX.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Classes referenciadas em templates que não existiam (produtos, estoque, compras) */
.form-input{
  width: 100%; border: 1.5px solid var(--border); border-radius: 9px; padding: 10px 12px;
  font-size: 14px; font-weight: 500; background: var(--ice-50); color: var(--navy-900);
  font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s;
}
.form-input:focus{ border-color: var(--blue-600); background: #fff; box-shadow: 0 0 0 3px rgba(23,100,245,.12); }
.btn-secondary{
  background: #fff; color: var(--navy-900); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 9px 16px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover{ background: var(--ice-50); border-color: var(--blue-600); }
.btn-secondary.is-active{ background: rgba(23,100,245,.10); border-color: rgba(23,100,245,.35); color: var(--blue-600); }

/* Números tabulares — colunas de R$/quantidade alinham no ponto decimal */
.num{ font-variant-numeric: tabular-nums; }
.table-mx td, .table-mx th{ font-variant-numeric: tabular-nums; }
.kpi-value, .kpi-card .kpi-value{ font-variant-numeric: tabular-nums; }

/* Foco visível consistente para teclado (acessibilidade + ar de produto maduro) */
a:focus-visible, button:focus-visible, .btn-mx:focus-visible, .btn-ghost:focus-visible,
.btn-secondary:focus-visible, .btn-danger:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--blue-500); outline-offset: 2px; border-radius: 6px;
}

/* Hover-lift discreto nos cards clicáveis */
.kpi-card, a.card-mx, .card-mx.is-clickable{ transition: transform .15s ease, box-shadow .15s ease; }
.kpi-card:hover, a.card-mx:hover, .card-mx.is-clickable:hover{
  transform: translateY(-2px); box-shadow: 0 10px 28px -12px rgba(23,100,245,.35);
}

/* Barra de progresso no topo durante navegação/ações HTMX (efeito NProgress) */
#mx-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-600), var(--sky-500, #38B6FF));
  z-index: 9999; opacity: 0; transition: width .2s ease, opacity .3s ease;
  box-shadow: 0 0 8px rgba(23,100,245,.6);
}
#mx-progress.active{ opacity: 1; }

/* Fade-in suave do conteúdo trocado via HTMX */
#content.htmx-swapping{ opacity: 0; }
#content{ transition: opacity .12s ease; }

@media (prefers-reduced-motion: reduce){
  .kpi-card:hover, a.card-mx:hover, .card-mx.is-clickable:hover{ transform: none; }
  #content, #mx-progress{ transition: none; }
}

/* ═══ ONDA 2 — Componentes reutilizáveis (page-header actions, empty-state) ═══ */
.page-header__actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.empty-state__icon{ width: 40px; height: 40px; opacity: .5; color: var(--blue-600); }
.empty-state__title{ font-size: 15px; font-weight: 700; color: var(--navy-900); margin: 0; }
.empty-state__sub{ font-size: 13.5px; color: var(--text-muted); margin: 4px 0 0; max-width: 42ch; }
:root[data-theme="dark"] .empty-state__title{ color: #e8e8e8; }

/* Skeleton loading (shimmer) — para telas que carregam via JS */
.skeleton{
  background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,.08) 37%, var(--border) 63%);
  background-size: 400% 100%; border-radius: 8px; animation: mx-shimmer 1.3s ease infinite;
}
@keyframes mx-shimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce){ .skeleton{ animation: none; } }

/* ═══ ONDA 2 — Command-palette (Ctrl+K) ═══ */
.cmdk{ position: fixed; inset: 0; z-index: 9998; display: flex; align-items: flex-start; justify-content: center; }
.cmdk[hidden]{ display: none; }
.cmdk__backdrop{ position: absolute; inset: 0; background: rgba(4,9,31,.5); backdrop-filter: blur(3px); }
.cmdk__panel{ position: relative; margin-top: 12vh; width: min(560px, 92vw);
  background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(4,9,31,.6); overflow: hidden; }
.cmdk__inputwrap{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.cmdk__inputwrap input{ flex: 1; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--navy-900); font-family: inherit; }
.cmdk__esc{ font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text-muted); }
.cmdk__list{ list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(120,140,170,.3) transparent; }
.cmdk__list::-webkit-scrollbar{ width: 6px; }
.cmdk__list::-webkit-scrollbar-track{ background: transparent; }
.cmdk__list::-webkit-scrollbar-thumb{ background: rgba(120,140,170,.3); border-radius: 8px; }
.cmdk__list::-webkit-scrollbar-thumb:hover{ background: rgba(120,140,170,.55); }
.cmdk__item{ display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; cursor: pointer; color: var(--navy-900); }
.cmdk__item .nav-icon{ color: var(--blue-600); opacity: .8; }
.cmdk__item.is-active{ background: rgba(23,100,245,.10); }
.cmdk__label{ font-weight: 600; font-size: 14px; }
.cmdk__section{ margin-left: auto; font-size: 12px; color: var(--text-muted); }
.cmdk__group{
  padding: 10px 12px 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--text-muted);
  list-style: none;
}
.cmdk__loading{ padding: 10px 16px; font-size: 13px; color: var(--text-muted); }
.cmdk__label mark{
  background: rgba(23,100,245,.16); color: inherit;
  border-radius: 3px; padding: 0 1px;
}
.cmdk__empty{ padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
:root[data-theme="dark"] .cmdk__item{ color: #e8e8e8; }
:root[data-theme="dark"] .cmdk__inputwrap input{ color: #e8e8e8; }

/* ═══ ONDA 4 — Dashboard premium (boas-vindas com marca + onboarding) ═══ */
.dash-hero{
  position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 22px;
  padding: 28px 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--blue-700, #0B45C6) 60%, var(--blue-600) 100%);
  color: #fff; box-shadow: 0 14px 40px -18px rgba(6,17,63,.55);
}
.dash-hero__glow{
  position: absolute; inset: -60% -10% auto auto; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(91,169,255,.35), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.dash-hero__text{ position: relative; z-index: 1; flex: 1; min-width: 240px; }
.dash-hero__eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.dash-hero__title{ font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 4px 0 0; color: #fff; }
.dash-hero__sub{ font-size: 14.5px; color: rgba(255,255,255,.75); margin-top: 4px; }
.dash-hero__cta{ position: relative; z-index: 1; background: #fff; color: var(--navy-900); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.dash-hero__cta:hover{ background: #eef3ff; color: var(--navy-900); }

.onboard{ background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 22px; }
.onboard__title{ font-size: 17px; font-weight: 700; color: var(--navy-900); margin: 0; }
.onboard__sub{ font-size: 13.5px; color: var(--text-muted); margin: 3px 0 0; }
.onboard__steps{ display: grid; gap: 12px; margin-top: 18px; grid-template-columns: 1fr; }
@media (min-width: 800px){ .onboard__steps{ grid-template-columns: repeat(3,1fr); } }
.onboard__step{
  display: flex; align-items: flex-start; gap: 12px; text-decoration: none;
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--ice-50);
  transition: border-color .15s, transform .15s, box-shadow .15s; color: var(--navy-900);
}
.onboard__step:hover{ border-color: var(--blue-600); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(23,100,245,.4); }
.onboard__num{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-600); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.onboard__body{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.onboard__body strong{ font-size: 14px; font-weight: 700; }
.onboard__body span{ font-size: 12.5px; color: var(--text-muted); }
.onboard__arrow{ color: var(--blue-600); font-weight: 700; }
:root[data-theme="dark"] .onboard__step{ color: #e8e8e8; }
:root[data-theme="dark"] .onboard__title{ color: #e8e8e8; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONDA 5 (08/08) — Base responsiva do sistema inteiro.
   Antes só sidebar/topbar/form-grid/settings-grid tinham tratamento mobile;
   o resto das ~200 telas (tabelas, grids de N colunas) não tinha NENHUM.
   Regras aqui pegam pelo SELETOR (não por classe nova em cada template),
   então cobrem toda tela existente e qualquer tela nova sem esforço extra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tabelas: em vez de espremer colunas até ficar ilegível, rola na horizontal.
   :has() alcança o pai de QUALQUER <table> sem precisar de wrapper dedicado
   em cada template — mesmo as ~90 telas com <table> solto, sem classe .table-mx,
   ganham o comportamento. overflow-x (não `overflow`) preserva o overflow-y
   que várias telas já usam pra arredondar cantos (.overflow-hidden). */
@media (max-width: 900px){
  /* Bootstrap (carregado via CDN em base.html) define .overflow-hidden com
     !important — e :has() herda a especificidade do seu ARGUMENTO ("table",
     um seletor de elemento fraco), então nem !important bastava pra vencer.
     Ancorar em #content (id real do <main> em base.html, onde TODO conteúdo
     de página vive) dá especificidade de ID, que bate qualquer nº de classes
     mesmo entre !important. */
  #content :has(> table){ overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table{ min-width: 560px; }
}

/* Grids Tailwind de N colunas (grid-cols-2..9) sem variante responsiva —
   eram ~110 ocorrências fixas no código, cada uma espremendo N colunas na
   tela do celular. Documento roda por CIMA de dark/light e por cima da regra
   equivalente do Tailwind (mesma especificidade — a nossa vem depois no
   arquivo, então vence); onde a tela já tinha `md:grid-cols-N` correto isso é
   um no-op (a base "sem prefixo" já era 1 coluna). */
@media (max-width: 700px){
  [class*="grid-cols-"]{ grid-template-columns: 1fr !important; }
}

/* Topbar: com busca + seletor de empresa (superusuário) + 4 ícones, não cabe
   em ~360-390px de largura de celular sem cortar algo. Esconde o texto/atalho
   de teclado da busca (sem teclado físico o "Ctrl K" não faz sentido mesmo) e
   reduz respiro geral; o botão de busca continua tocável, só sem o rótulo. */
@media (max-width: 480px){
  .topbar{ padding: 0 10px; gap: 8px; }
  .topbar-search{ flex: 0 0 auto; max-width: none; }
  .topbar-search__ph, .topbar-search__kbd{ display: none; }
  .topbar-search{ padding: 9px; }
  .topbar-actions{ gap: 4px; }
  .su-empresa-seletor select{ max-width: 110px; font-size: 12px; padding: 6px 6px; }
  .content-area{ padding: 14px; }
  .page-header{ gap: 10px; }
  .page-title{ font-size: 19px; }
}

/* Rede de segurança: nenhum elemento (imagem sem max-width, tabela sem a
   regra acima ainda carregando, etc.) deve conseguir abrir rolagem horizontal
   na PÁGINA inteira — só dentro do próprio contêiner (tabela, cmdk, etc). */
html, body{ overflow-x: hidden; }
img, svg{ max-width: 100%; }

/* Padrão de card colapsável (accordion) sobre <details>/<summary> nativos —
   estreado em anamnese/index.html (08/08), pra reaproveitar no resto do
   sistema. display:flex no <summary> (pra alinhar título + hint à direita)
   mata o marcador nativo do navegador, então o chevron é manual aqui. */
summary{ list-style: none; }
summary::-webkit-details-marker{ display: none; }
.details-chevron{ transition: transform .15s ease; flex-shrink: 0; }
details[open] > summary .details-chevron{ transform: rotate(90deg); }

/* ── Grid de produtos (PDV / Mesa do restaurante) ── */
.category-tab {
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.category-tab.active {
  background: var(--navy-900);
  color: #fff;
  border-color: var(--navy-900);
}
.product-card {
  transition: transform .1s ease, box-shadow .1s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--sky-400) !important;
}
.cart-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--ice-50); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px;
}
.cart-card-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cart-card-sub { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.cart-card-price { font-size: 12px; font-weight: 700; color: var(--text-primary); font-family: monospace; }
.cart-card-badge {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-right: 6px;
}
.cart-card-badge--sent { background: #ECFDF5; color: var(--success); }
.cart-card-badge--new { background: #FFFBEB; color: var(--warning); }