/* ═══════════════════════════════════════════════════════════════
   NOVA DESIGN SYSTEM — by Stratika
   Version 2.0 · Enterprise SaaS · AI-First
   ═══════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ──
   idennova: pesos autorizados 300/400/500/600 únicamente.
   Prohibido 700 (bold) e itálicas en UI. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
button,select,input,textarea{font-family:inherit}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none}

/* ══════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════ */
:root {
  /* ── Brand Palette ── */
  --navy:       #0A1628;
  --navy-80:    rgba(10,22,40,.8);
  --navy-60:    rgba(10,22,40,.6);
  --navy-10:    rgba(10,22,40,.06);
  --cyan:       #00C2B8;
  --cyan-dark:  #00A89F;
  --cyan-light: #E6FAFA;
  --cyan-glow:  rgba(0,194,184,.25);
  --cyan-hover: #33CEC6;
  --violet:     #5B3EFF;
  --violet-dark:#4A30E0;
  --violet-hover:#7A63FF;
  --violet-light:#EEEAFF;
  --violet-glow:rgba(91,62,255,.20);
  --fuchsia:    #E8287A;
  --fuchsia-dark:#C91F67;
  --fuchsia-hover:#ED4A90;
  --fuchsia-light:#FDEEF4;
  /* ── Navy ramp (idennova) ── */
  --navy-950:   #132240;
  --navy-900:   #1E3560;
  --navy-800:   #2A4880;

  /* ── Neutral Scale ── */
  --white:      #FFFFFF;
  --light:      #F4F6FB;
  --light-2:    #EEF1F8;
  --slate-50:   #F4F6FB;
  --slate-100:  #DDE3EE;
  --slate-200:  #C8D1E0;
  --slate-300:  #B8C4D6;
  --slate-400:  #8A9AB5;
  --slate-500:  #6E82A0;
  --slate-600:  #5A6E8A;
  --slate-700:  #3D5066;
  --slate-800:  #1E2D42;

  /* ── Semantic Colors ── */
  --success:    #00C2B8;
  --success-bg: #E6FAFA;
  --warning:    #F5A623;
  --warning-bg: #FFF3CD;
  --error:      #E5473A;
  --error-bg:   #FFECEC;
  --info:       #5A6E8A;
  --info-bg:    #F0F4FF;
  --ai-color:   #5B3EFF;
  --ai-bg:      #EEEAFF;

  /* ── Data Series ── */
  --s1:#00C2B8; --s2:#5B3EFF; --s3:#F5A623;
  --s4:#E5473A; --s5:#2A9D8F; --s6:#8A9AB5; --s7:#E8287A;

  /* ── Shadows (idennova: teñidas de navy, valores exactos) ── */
  --shadow-xs:  0 1px 2px rgba(10,22,40,.06);
  --shadow-sm:  0 1px 3px rgba(10,22,40,.08), 0 1px 2px rgba(10,22,40,.06);
  --shadow-md:  0 4px 12px rgba(10,22,40,.10), 0 2px 6px rgba(10,22,40,.07);
  --shadow-lg:  0 12px 32px rgba(10,22,40,.14), 0 4px 12px rgba(10,22,40,.08);
  --shadow-xl:  0 24px 64px rgba(10,22,40,.18), 0 8px 24px rgba(10,22,40,.10);
  --glow-cyan:  0 0 24px rgba(0,194,184,.25);
  --glow-violet:0 0 24px rgba(91,62,255,.20);
  --glow-white: 0 0 32px rgba(255,255,255,.12);

  /* ── Border Radius (idennova: chips 4 · inputs/botones 8 · cards 12 · modales 16) ── */
  --r-xs:  4px;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-full:9999px;

  /* ── Spacing ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
  --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* ── Typography ── */
  --font: 'DM Sans', system-ui, -apple-system, sans-serif;
  --text-xs:   11px; --lh-xs:  1.45;
  --text-sm:   13px; --lh-sm:  1.5;
  --text-base: 15px; --lh-base:1.6;
  --text-md:   17px; --lh-md:  1.55;
  --text-lg:   20px; --lh-lg:  1.4;
  --text-xl:   24px; --lh-xl:  1.35;
  --text-2xl:  30px;
  --text-3xl:  36px;

  /* ── Layout ── */
  --sidebar-w:     248px;
  --sidebar-mini:   60px;
  --topbar-h:       56px;
  --content-max:  1440px;
  --content-pad:    32px;

  /* ── Transitions ── */
  --tr-fast:   .12s ease;
  --tr-base:   .20s ease;
  --tr-slow:   .35s ease;
  --tr-spring: .30s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════
   BASE
   ══════════════════════════════════════ */
body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--navy);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
}

/* ══════════════════════════════════════
   APP LAYOUT
   ══════════════════════════════════════ */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--white);
  border-right: 1px solid var(--slate-100);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: width var(--tr-slow);
  z-index: 100;
}

/* ── Sidebar: completamente oculto cuando tiene clase .collapsed ── */
.sidebar.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  border: none;
}

/* ── Nav-item: evitar que label o badge queden recortados ── */
.sb-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-badge { flex-shrink: 0; }
.nav-item  { overflow: hidden; }

/* ── Logo area ── */
.sb-logo {
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--slate-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nova-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.sb-name {
  font-size: 20px;
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
}
.sb-sub {
  font-size: 7px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: .22em;
  margin-top: 3px;
}
.sb-collapse-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-400);
  transition: all var(--tr-fast);
  flex-shrink: 0;
}
.sb-collapse-btn:hover { background: var(--light); color: var(--navy); border-color: var(--slate-200); }
.sb-collapse-btn i { font-size: 16px; }

/* ── Navigation ── */
nav.sb-nav {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
nav.sb-nav::-webkit-scrollbar              { width: 4px; }
nav.sb-nav::-webkit-scrollbar-track       { background: transparent; }
nav.sb-nav::-webkit-scrollbar-thumb       { background: var(--slate-200); border-radius: 4px; }
nav.sb-nav::-webkit-scrollbar-thumb:hover { background: var(--slate-300); }
nav.sb-nav { scrollbar-width: thin; scrollbar-color: var(--slate-200) transparent; }

.sb-section-label {
  padding: 12px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: .10em;
  line-height: 1;
}

/* Nav group header (collapsible) */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate-600);
  border-radius: var(--r-md);
  margin: 1px 0;
  transition: all var(--tr-fast);
  user-select: none;
}
.nav-group-header:hover { background: var(--light); color: var(--navy); }
.nav-group-header.open  { color: var(--navy); }
.nav-group-header .ng-icon {
  font-size: 18px;
  width: 20px;
  flex-shrink: 0;
  color: var(--slate-400);
  transition: color var(--tr-fast);
}
.nav-group-header:hover .ng-icon,
.nav-group-header.open  .ng-icon { color: var(--navy); }
.nav-group-arrow {
  margin-left: auto;
  font-size: 14px;
  color: var(--slate-300);
  transition: transform var(--tr-base), color var(--tr-fast);
  flex-shrink: 0;
}
.nav-group-header.open .nav-group-arrow {
  transform: rotate(180deg);
  color: var(--slate-400);
}

/* Sub-items */
.nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}
.nav-sub.open { max-height: 600px; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 34px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--slate-500);
  border-radius: var(--r-md);
  margin: 1px 0;
  transition: all var(--tr-fast);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.nav-sub-item:hover { background: var(--light); color: var(--navy); }
.nav-sub-item.active {
  background: var(--cyan-light);
  color: var(--navy);
  font-weight: 500;
}
.nav-sub-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 16px;
  border-radius: 0 2px 2px 0;
  background: var(--cyan);
}
.nav-sub-item i {
  font-size: 15px;
  width: 18px;
  flex-shrink: 0;
  opacity: .55;
  transition: opacity var(--tr-fast);
}
.nav-sub-item:hover i,
.nav-sub-item.active i { opacity: 1; }

/* Direct nav items (non-grouped) */
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--slate-600);
  border-radius: var(--r-md);
  margin: 1px 0;
  transition: all var(--tr-fast);
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.nav-item:hover { background: var(--light); color: var(--navy); }
.nav-item.active {
  background: var(--cyan-light);
  color: var(--navy);
  font-weight: 500;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 20px;
  border-radius: 0 2px 2px 0;
  background: var(--cyan);
}
.nav-item i {
  font-size: 18px;
  width: 20px;
  flex-shrink: 0;
  opacity: .65;
  transition: opacity var(--tr-fast);
}
.nav-item:hover i,
.nav-item.active i { opacity: 1; }

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
}
.nb-err  { background: var(--error-bg);   color: #B83028; }
.nb-warn { background: var(--warning-bg); color: #B8780F; }
.nb-info { background: var(--success-bg); color: var(--cyan-dark); }
.nb-ai   { background: var(--ai-bg);      color: var(--violet-dark); }
.nb-ok   { background: var(--success-bg); color: var(--cyan-dark); }

/* ── Sidebar footer ── */
.sb-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--slate-100);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* User row */
.sb-user-row { display: flex; align-items: center; gap: 10px; }
.sb-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--cyan-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan-dark);
  flex-shrink: 0;
  letter-spacing: .04em;
}
.sb-user-name  { font-size: 13px; font-weight: 500; color: var(--navy); line-height: 1.3; }
.sb-user-email { font-size: 11px; color: var(--slate-400); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Access card */
.sb-access-card {
  background: var(--light);
  border: 1px solid var(--slate-100);
  border-radius: var(--r-md);
  padding: 9px 12px;
}
.sb-access-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .10em; color: var(--slate-400); margin-bottom: 4px; }
.sb-access-role  { font-size: 13px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.sb-access-scope { font-size: 11px; color: var(--slate-500); margin-top: 2px; }

/* Period selector */
.sb-period-wrap { position: relative; }
.sb-period-sel {
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 28px 7px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.sb-period-sel:focus { outline: none; border-color: var(--cyan); }
.sb-period-sel option { background: var(--white); color: var(--navy); }
.sb-period-arrow {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--slate-400);
  pointer-events: none;
}

/* Actions row */
.sb-actions-row { display: flex; align-items: center; gap: 8px; }
.sb-action-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-600); font-size: 16px;
  transition: all var(--tr-fast);
  flex-shrink: 0;
}
.sb-action-btn:hover { background: var(--light); color: var(--navy); border-color: var(--slate-200); }
.sb-logout-btn {
  flex: 1; height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: var(--white);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  color: var(--slate-600);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  transition: all var(--tr-fast);
}
.sb-logout-btn:hover { background: var(--error-bg); color: var(--error); border-color: var(--error-bg); }
.sb-logout-btn i { font-size: 15px; }

/* ── Sidebar toggle btn en topbar ── */
.sb-toggle-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
  transition: all var(--tr-fast);
  flex-shrink: 0;
}
.sb-toggle-btn:hover { background: var(--light); color: var(--navy); border-color: var(--slate-200); }
.sb-toggle-btn i { font-size: 17px; }

/* Pulse indicator (kept for legacy use) */
.ai-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  animation: pulse 2.5s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.85); }
}

/* ── MAIN AREA ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--light);
  min-width: 0;
}

/* ── TOPBAR ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 var(--content-pad);
  background: var(--white);
  border-bottom: 1px solid var(--slate-100);
  flex-shrink: 0;
  gap: var(--sp-3);
  box-shadow: var(--shadow-xs);
  position: relative;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

.topbar-title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: .09em;
  flex-shrink: 0;
}
.mp-curriculo  { background: var(--cyan-light);   color: var(--cyan-dark); }
.mp-registro   { background: var(--light-2);       color: var(--slate-600); }
.mp-ia         { background: var(--violet-light);  color: var(--violet-dark); }
.mp-admin      { background: var(--light-2);       color: var(--slate-600); }
.mp-analitica  { background: var(--fuchsia-light); color: var(--fuchsia); }

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--slate-400);
}
.breadcrumb a { color: var(--cyan); }
.breadcrumb-sep { opacity: .5; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.period-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--slate-100);
  background: var(--light);
  color: var(--slate-600);
  font-variant-numeric: tabular-nums;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--light);
  border: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--tr-fast);
  color: var(--slate-600);
}
.icon-btn:hover {
  background: var(--white);
  border-color: var(--slate-200);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.icon-btn i { font-size: 17px; }

.notif-dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--error);
  border-radius: 50%;
  border: 2px solid var(--white);
}

/* Search bar */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--light);
  border: 1px solid var(--slate-100);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  color: var(--slate-400);
  cursor: pointer;
  transition: all var(--tr-fast);
  min-width: 200px;
}
.topbar-search:hover {
  background: var(--white);
  border-color: var(--cyan);
  color: var(--slate-600);
}
.topbar-search i { font-size: 15px; }
.topbar-search kbd {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--slate-100);
  color: var(--slate-500);
  font-family: var(--font);
}

/* ── CONTENT AREA ── */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-6) var(--content-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.content::-webkit-scrollbar              { width: 6px; }
.content::-webkit-scrollbar-track       { background: var(--light-2); border-radius: 4px; }
.content::-webkit-scrollbar-thumb       { background: var(--slate-200); border-radius: 4px; }
.content::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
/* Firefox */
.content { scrollbar-width: thin; scrollbar-color: var(--slate-200) var(--light-2); }
nav.sb-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.04); }

/* Page header inside content */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.page-header-left {}
.page-heading {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.page-subheading {
  font-size: var(--text-sm);
  color: var(--slate-400);
  margin-top: 4px;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   GRID SYSTEM
   ══════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); }
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-4); }
.grid-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-5); }
.grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-5); }

/* ══════════════════════════════════════
   CARDS
   ══════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card-sm { padding: var(--sp-4) var(--sp-5); }
.card-lg { padding: var(--sp-7) var(--sp-8); }

.card-dark {
  background: var(--navy);
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.card-gradient {
  border: none;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
}
.card-title {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.card-action {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--cyan);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--tr-fast);
}
.card-action:hover { opacity: .75; }

/* ── KPI CARDS ── */
.kpi-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--slate-200);
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: currentColor;
  opacity: .03;
  transform: translate(20px,-20px);
}

.kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.kpi-value {
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.kpi-sub {
  margin-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.kpi-trend {
  font-size: 11px;
  font-weight: 500;
}
.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--error); }
.kpi-trend.flat { color: var(--slate-400); }

/* ── MODULE CARDS ── */
.mod-card {
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  cursor: pointer;
  transition: all var(--tr-base);
  position: relative;
  overflow: hidden;
  border: none;
}
.mod-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  pointer-events: none;
}
.mod-card::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -20px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.mod-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.mod-card-navy { background: var(--navy); }
.mod-card-cyan { background: linear-gradient(135deg, var(--cyan-dark), var(--cyan)); }
.mod-card-violet { background: linear-gradient(135deg, #4A30E0, var(--violet)); }
.mod-card-fuchsia { background: linear-gradient(135deg, #C91F67, var(--fuchsia)); }

/* ══════════════════════════════════════
   BADGES & CHIPS
   ══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-full);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: .75;
}

.badge-success  { background: var(--success-bg); color: var(--cyan-dark); }
.badge-warning  { background: var(--warning-bg); color: #B8780F; }
.badge-error    { background: var(--error-bg);   color: #B83028; }
.badge-ai       { background: var(--ai-bg);      color: var(--violet-dark); }
.badge-info     { background: var(--info-bg);    color: var(--slate-600); }
.badge-fuchsia  { background: var(--fuchsia-light); color: #C91F67; }
.badge-navy     { background: var(--navy-10);    color: var(--navy); }

/* Tag without dot */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-ai { background: var(--ai-bg); color: var(--violet-dark); }
.tag-cyan { background: var(--cyan-light); color: var(--cyan-dark); }

/* ══════════════════════════════════════
   ALERTS / BANNERS
   ══════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all var(--tr-fast);
}
.alert:hover { filter: brightness(.97); transform: translateX(1px); }

.alert-critical { background: var(--error-bg);   border-color: var(--error); }
.alert-warning  { background: var(--warning-bg); border-color: var(--warning); }
.alert-success  { background: var(--success-bg); border-color: var(--success); }
.alert-info     { background: var(--info-bg);    border-color: var(--violet); }
.alert-ai       { background: var(--ai-bg);      border-color: var(--violet); }
.alert-teal     { background: var(--success-bg); border-color: var(--cyan); }

.alert-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.alert-critical .alert-icon { background: rgba(229,71,58,.15);  color: var(--error); }
.alert-warning  .alert-icon { background: rgba(245,166,35,.20); color: #B8780F; }
.alert-success  .alert-icon { background: rgba(0,194,184,.15);  color: var(--cyan-dark); }
.alert-info     .alert-icon { background: rgba(91,62,255,.12);  color: var(--violet); }
.alert-ai       .alert-icon { background: rgba(91,62,255,.12);  color: var(--violet); }
.alert-teal     .alert-icon { background: rgba(0,194,184,.15);  color: var(--cyan-dark); }

.alert-body { flex: 1; min-width: 0; }
.alert-title {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-critical .alert-title { color: #7F1D1D; }
.alert-warning  .alert-title { color: #78350F; }
.alert-success  .alert-title,
.alert-teal     .alert-title { color: #064E3B; }
.alert-info     .alert-title,
.alert-ai       .alert-title { color: #2D1B8F; }

.alert-desc {
  font-size: 12px;
  color: var(--slate-600);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.alert-meta {
  font-size: 10px;
  color: var(--slate-400);
  margin-top: 4px;
}

/* ══════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════ */
.progress-wrap { width: 100%; }
.progress-bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--slate-100);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width .6s ease;
}
.progress-sm .progress-bar { height: 4px; }
.progress-lg .progress-bar { height: 10px; }

/* ══════════════════════════════════════
   TABLES
   ══════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table th {
  text-align: left;
  padding: 11px 14px;
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-400);
  border-bottom: 1px solid var(--slate-100);
  text-transform: uppercase;
  letter-spacing: .09em;
  background: var(--light);
  white-space: nowrap;
}
.data-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.data-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
  color: var(--navy);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr {
  transition: background var(--tr-fast);
  cursor: pointer;
}
.data-table tbody tr:hover td { background: var(--light); }
.data-table tbody tr.selected td { background: rgba(0,194,184,.05); }
.data-table tbody tr.selected td:first-child { border-left: 2px solid var(--cyan); }
.col-num { font-variant-numeric: tabular-nums; text-align: right; }
.col-right { text-align: right; }

/* ══════════════════════════════════════
   FORMS
   ══════════════════════════════════════ */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.4;
}
.field-input,
.field-select,
.field-textarea {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  background: var(--white);
  color: var(--navy);
  font-size: var(--text-base);
  font-family: var(--font);
  width: 100%;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--slate-400); }
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,194,184,.15);
}
.field-textarea { resize: vertical; height: 80px; }

.form-grid { display: grid; gap: var(--sp-3); }
.form-grid-2 { grid-template-columns: 1fr 1fr; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: all var(--tr-base);
  white-space: nowrap;
  letter-spacing: -.005em;
}
.btn i { font-size: 15px; }

.btn-primary {
  background: var(--cyan);
  color: #fff;
}
.btn-primary:hover {
  background: var(--cyan-dark);
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--slate-100);
}
.btn-secondary:hover {
  background: var(--light);
  border-color: var(--slate-200);
}

.btn-ghost {
  background: transparent;
  color: var(--cyan);
  border: none;
  padding: 10px 14px;
}
.btn-ghost:hover { background: var(--cyan-light); }

.btn-ai {
  background: var(--violet);
  color: #fff;
}
.btn-ai:hover {
  background: var(--violet-dark);
  box-shadow: var(--glow-violet);
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--error);
  color: #fff;
}
.btn-danger:hover { background: #C93028; }

.btn-sm { padding: 6px 13px; font-size: 12px; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 28px; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn-icon { padding: 9px; width: 36px; height: 36px; border-radius: var(--r-md); }
.btn-full { width: 100%; }

/* ══════════════════════════════════════
   LIST ITEMS
   ══════════════════════════════════════ */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: var(--light);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--tr-fast);
  border: 1px solid transparent;
}
.list-item:hover {
  background: var(--white);
  border-color: var(--slate-100);
  transform: translateX(2px);
  box-shadow: var(--shadow-sm);
}

.list-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.list-body { flex: 1; min-width: 0; }
.list-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-meta {
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 2px;
}

/* ══════════════════════════════════════
   STEP FLOW
   ══════════════════════════════════════ */
.step-flow {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
  gap: 0;
  scrollbar-width: none;
}
.step-flow::-webkit-scrollbar { display: none; }

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  cursor: pointer;
  transition: transform var(--tr-fast);
  flex-shrink: 0;
}
.step-item:hover { transform: translateY(-2px); }

.step-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--white);
  transition: all var(--tr-base);
  box-shadow: var(--shadow-sm);
  color: var(--slate-400);
}
.step-circle.done {
  background: var(--cyan-light);
  border-color: var(--cyan);
  color: var(--cyan-dark);
}
.step-circle.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: var(--glow-cyan);
}
.step-circle.pending {
  background: var(--white);
  border-color: var(--slate-100);
  color: var(--slate-400);
}

.step-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--slate-400);
  margin-top: 7px;
  text-align: center;
  max-width: 72px;
  line-height: 1.35;
}
.step-connector {
  flex: 1;
  height: 2px;
  background: var(--slate-100);
  margin-top: -19px;
  min-width: 12px;
}
.step-connector.done { background: var(--cyan); }

/* ══════════════════════════════════════
   DIVIDERS
   ══════════════════════════════════════ */
.divider {
  height: 1px;
  background: var(--slate-100);
  margin: var(--sp-3) 0;
}

/* ══════════════════════════════════════
   STAT ROW
   ══════════════════════════════════════ */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: var(--text-sm);
  gap: var(--sp-3);
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--slate-600); }
.stat-value { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--slate-400);
}
.empty-state i { font-size: 40px; opacity: .3; margin-bottom: var(--sp-3); }
.empty-title { font-size: var(--text-base); font-weight: 500; margin-bottom: var(--sp-2); }
.empty-desc  { font-size: var(--text-sm); line-height: 1.6; }

/* ══════════════════════════════════════
   TOOLTIP
   ══════════════════════════════════════ */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
[data-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent;
  border-top-color: var(--navy);
  z-index: 9999;
  pointer-events: none;
}

/* ══════════════════════════════════════
   MODAL
   ══════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-base);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  transition: transform var(--tr-spring);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--slate-100);
}
.modal-title { font-size: var(--text-md); font-weight: 500; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--light);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--slate-600);
  transition: all var(--tr-fast);
}
.modal-close:hover { background: var(--error-bg); color: var(--error); }
.modal-body { padding: var(--sp-6); overflow-y: auto; max-height: calc(90vh - 140px); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--slate-100);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ══════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,22,40,.6);
  backdrop-filter: blur(6px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-base);
}
.cmd-overlay.open { opacity: 1; pointer-events: all; }
.cmd-palette {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 580px;
  overflow: hidden;
  transform: translateY(-12px) scale(.97);
  transition: transform var(--tr-spring);
}
.cmd-overlay.open .cmd-palette { transform: translateY(0) scale(1); }
.cmd-search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--slate-100);
}
.cmd-search i { font-size: 18px; color: var(--slate-400); }
.cmd-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--text-md);
  font-family: var(--font);
  color: var(--navy);
}
.cmd-input::placeholder { color: var(--slate-400); }
.cmd-results { max-height: 380px; overflow-y: auto; }
.cmd-section-title {
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-400);
  text-transform: uppercase;
  letter-spacing: .10em;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  cursor: pointer;
  transition: background var(--tr-fast);
  border-radius: var(--r-md);
  margin: 1px var(--sp-2);
}
.cmd-item:hover, .cmd-item.focused {
  background: var(--light);
}
.cmd-item-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
}
.cmd-item-label { font-size: var(--text-sm); font-weight: 400; }
.cmd-item-meta  { font-size: 11px; color: var(--slate-400); margin-left: auto; }
.cmd-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 11px;
  color: var(--slate-400);
}
.cmd-footer kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--light);
  border-radius: var(--r-xs);
  border: 1px solid var(--slate-100);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  color: var(--slate-600);
}

/* ══════════════════════════════════════
   NOTIFICATION TOAST
   ══════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 72px; right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--slate-100);
  min-width: 320px;
  max-width: 420px;
  pointer-events: all;
  animation: slideIn .25s var(--tr-spring) forwards;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast.hiding {
  animation: slideOut .2s ease forwards;
}
@keyframes slideOut {
  to { opacity: 0; transform: translateX(20px); }
}
.toast-icon { font-size: 18px; margin-top: 1px; }
.toast-success .toast-icon { color: var(--success); }
.toast-error   .toast-icon { color: var(--error); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-ai      .toast-icon { color: var(--violet); }
.toast-title { font-size: var(--text-sm); font-weight: 500; color: var(--navy); }
.toast-desc  { font-size: 12px; color: var(--slate-600); margin-top: 2px; }

/* ══════════════════════════════════════
   CHART PLACEHOLDER
   ══════════════════════════════════════ */
.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-label-y {
  font-size: 11px;
  color: var(--slate-400);
  position: absolute;
  left: 0; top: 0;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}

/* Inline mini bar chart */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
}
.mini-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  opacity: .85;
  transition: opacity var(--tr-fast);
}
.mini-bar:hover { opacity: 1; }

/* Donut chart via CSS */
.donut-chart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.donut-center {
  position: absolute;
  text-align: center;
}

/* ══════════════════════════════════════
   WORKFLOW CARD
   ══════════════════════════════════════ */
.workflow-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--light);
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  transition: all var(--tr-fast);
}
.workflow-card:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  border-color: var(--slate-200);
}
.wf-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wf-step-num.done { background: var(--cyan); }
.wf-step-num.active { background: var(--violet); box-shadow: var(--glow-violet); }
.wf-body { flex: 1; }
.wf-title { font-size: var(--text-sm); font-weight: 500; }
.wf-meta  { font-size: 11px; color: var(--slate-400); margin-top: 2px; }

/* ══════════════════════════════════════
   AI INSIGHT CARD
   ══════════════════════════════════════ */
.ai-insight {
  background: linear-gradient(135deg, var(--navy), #0E1E3A);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.ai-insight::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(91,62,255,.15);
}
.ai-insight::after {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(0,194,184,.10);
}
.ai-insight-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  position: relative;
  z-index: 1;
}
.ai-insight-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: rgba(91,62,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #9B8AFF;
}
.ai-insight-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
}
.ai-insight-body { position: relative; z-index: 1; }
.ai-insight-value {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.ai-insight-desc {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* ══════════════════════════════════════
   INTEGRATION ITEM
   ══════════════════════════════════════ */
.integration-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px var(--sp-4);
  background: var(--light);
  border-radius: var(--r-md);
  border: 1px solid var(--slate-100);
  transition: all var(--tr-fast);
  cursor: pointer;
}
.integration-item:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.integration-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.integration-name  { font-size: var(--text-sm); font-weight: 500; color: var(--navy); }
.integration-label { font-size: 11px; color: var(--slate-400); margin-top: 1px; }

/* ══════════════════════════════════════
   UTILS
   ══════════════════════════════════════ */
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.flex-1    { flex: 1; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1 { gap: 4px;  } .gap-2 { gap: 8px;  } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.mt-1 { margin-top: 4px;  } .mt-2 { margin-top: 8px;  }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-xs  { font-size: 11px; }
.text-sm  { font-size: 13px; }
.text-md  { font-size: 17px; }
.text-navy { color: var(--navy); }
.text-cyan { color: var(--cyan); }
.text-muted { color: var(--slate-400); }
.text-slate { color: var(--slate-600); }
.text-violet { color: var(--violet); }
.text-error  { color: var(--error); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-fuchsia { color: var(--fuchsia); }
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.tabular  { font-variant-numeric: tabular-nums; }
.w-full   { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.opacity-0 { opacity: 0; }

/* Animation utils */
.fade-in { animation: fadeIn .2s ease forwards; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-up { animation: slideUp .3s var(--tr-spring) forwards; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* Tablet: 768 - 1199 */
@media (max-width: 1199px) {
  :root { --content-pad: 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2-3, .grid-3-2 { grid-template-columns: 1fr; }
  .topbar-search { min-width: 160px; }
}

/* Mobile: < 768 */
@media (max-width: 767px) {
  :root {
    --content-pad: 16px;
    --sidebar-w: 100%;
    --topbar-h: 52px;
  }
  body { overflow: auto; }
  .app { flex-direction: column; overflow: auto; height: auto; min-height: 100vh; }

  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w) !important;
    min-width: var(--sidebar-w) !important;
    height: 100vh;
    z-index: 300;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--tr-slow);
    display: flex;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sb-footer { display: flex; }
  nav.sb-nav { display: flex; flex-direction: column; }

  .main { min-height: 0; }
  .topbar { padding: 0 16px; }
  .topbar-search, .topbar-search { display: none; }
  .content { padding: 16px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  .mobile-menu-btn { display: flex !important; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 12px; }

  .page-heading { font-size: var(--text-lg); }
  .kpi-value { font-size: 26px; }
}

/* Mobile menu button (hidden on desktop) */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--light);
  border: 1px solid var(--slate-100);
  cursor: pointer;
  font-size: 18px;
  color: var(--slate-600);
}

/* ══════════════════════════════════════════════════════════════
   NOVA IDENTIDAD — Aliases canónicos (--nova-*) + clases utility
   Permite usar tanto --navy como --nova-navy; ambos apuntan al mismo valor.
   Clases utility: .nova-card, .nova-h1…h3, .nova-label, .nova-badge-*, etc.
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── Aliases primarios ── */
  --nova-navy:          var(--navy);
  --nova-navy-950:      #132240;
  --nova-navy-900:      #1E3560;
  --nova-navy-800:      #2A4880;
  --nova-cyan:          var(--cyan);
  --nova-cyan-dark:     var(--cyan-dark);
  --nova-cyan-hover:    var(--cyan-hover);
  --nova-cyan-tint:     var(--cyan-light);
  --nova-violet:        var(--violet);
  --nova-violet-dark:   var(--violet-dark);
  --nova-violet-hover:  var(--violet-hover);
  --nova-violet-tint:   var(--violet-light);
  --nova-fuchsia:       var(--fuchsia);
  --nova-fuchsia-dark:  var(--fuchsia-dark);
  --nova-fuchsia-hover: var(--fuchsia-hover);
  --nova-fuchsia-tint:  var(--fuchsia-light);
  /* ── Aliases neutros ── */
  --nova-light:         var(--light);
  --nova-white:         var(--white);
  --nova-slate-600:     var(--slate-600);
  --nova-slate-400:     var(--slate-400);
  --nova-slate-300:     var(--slate-300);
  --nova-slate-200:     var(--slate-100);
  --nova-slate-100:     var(--light-2);
  /* ── Aliases funcionales ── */
  --nova-success:       var(--success);
  --nova-warning:       var(--warning);
  --nova-warning-tint:  var(--warning-bg);
  --nova-error:         var(--error);
  --nova-error-tint:    var(--error-bg);
  --nova-ai:            var(--violet);
  --nova-info:          var(--info);
  --nova-destacado:     var(--fuchsia);
  /* ── Aliases tipografía ── */
  --nova-font:          var(--font);
  --nova-weight-light:    300;
  --nova-weight-regular:  400;
  --nova-weight-medium:   500;
  --nova-weight-semibold: 600;
  --nova-text-display:  48px;
  --nova-text-h1:       32px;
  --nova-text-h2:       24px;
  --nova-text-h3:       18px;
  --nova-text-body:     15px;
  --nova-text-body-sm:  13px;
  --nova-text-label:    11px;
  --nova-text-caption:  10px;
  --nova-tracking-tight:   -0.025em;
  --nova-tracking-snug:    -0.015em;
  --nova-tracking-normal:   0em;
  --nova-tracking-wide:     0.08em;
  --nova-tracking-wider:    0.14em;
  --nova-tracking-widest:   0.20em;
  --nova-leading-display:  1.05;
  --nova-leading-heading:  1.2;
  --nova-leading-body:     1.6;
  --nova-leading-label:    1.4;
  /* ── Aliases espaciado ── */
  --nova-space-1:  var(--sp-1);  --nova-space-2:  var(--sp-2);
  --nova-space-3:  var(--sp-3);  --nova-space-4:  var(--sp-4);
  --nova-space-5:  var(--sp-5);  --nova-space-6:  var(--sp-6);
  --nova-space-8:  var(--sp-8);  --nova-space-10: var(--sp-10);
  --nova-space-12: var(--sp-12); --nova-space-16: var(--sp-16);
  /* ── Aliases radios ── */
  --nova-radius-sm:   var(--r-xs);
  --nova-radius-md:   var(--r-md);
  --nova-radius-lg:   var(--r-lg);
  --nova-radius-xl:   var(--r-xl);
  --nova-radius-full: var(--r-full);
  /* ── Aliases sombras ── */
  --nova-shadow-sm:          var(--shadow-sm);
  --nova-shadow-md:          var(--shadow-md);
  --nova-shadow-lg:          var(--shadow-lg);
  --nova-shadow-glow-cyan:   var(--glow-cyan);
  --nova-shadow-glow-violet: var(--glow-violet);
  /* ── Aliases transiciones ── */
  --nova-transition-fast:   var(--tr-fast);
  --nova-transition-base:   var(--tr-base);
  --nova-transition-slow:   var(--tr-slow);
  --nova-transition-spring: var(--tr-spring);
  /* ── Paleta de datos ── */
  --nova-data-1: var(--s1); --nova-data-2: var(--s2);
  --nova-data-3: var(--s3); --nova-data-4: var(--s4);
  --nova-data-5: var(--s5); --nova-data-6: var(--s6);
  --nova-data-7: var(--s7);
}

/* ── Escala tipográfica (clases utility idennova) ── */
.nova-display {
  font-family: var(--font);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--navy);
}
.nova-h1 {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--navy);
}
.nova-h2 {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--navy);
}
.nova-h3 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.2;
  color: var(--navy);
}
.nova-body {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-600);
}
.nova-body-sm {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--slate-400);
}
.nova-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--slate-400);
}
.nova-label-cyan   { color: var(--cyan-dark); }
.nova-label-violet { color: var(--violet); }

/* ── nova-card (idennova) ── */
.nova-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--slate-100);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}
.nova-card-dark {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

/* ── Botón primario (idennova) ── */
.nova-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
  background: var(--cyan);
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  transition: background var(--tr-base), box-shadow var(--tr-base);
}
.nova-btn-primary:hover {
  background: var(--cyan-dark);
  box-shadow: var(--glow-cyan);
}

/* ── Status badge (idennova) ── */
.nova-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
}
.nova-badge-success  { background: var(--success-bg);    color: var(--cyan-dark); }
.nova-badge-warning  { background: var(--warning-bg);    color: #B8780F; }
.nova-badge-error    { background: var(--error-bg);      color: #B83028; }
.nova-badge-ai       { background: var(--ai-bg);         color: var(--violet); }
.nova-badge-destacado{ background: var(--fuchsia-light); color: var(--fuchsia-dark); }
.nova-badge-info     { background: rgba(90,110,138,.10); color: var(--slate-600); }