/* ════════════════════════════════════════════════════════════════
   TRANSPARÊNCIA v8.0 — Design System Premium
   "Governance Platform" · 7 Perfis · 7 Temas · PWA
   Designer: AI Design System · 2026
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════════════════════════════ */
:root {
  /* ── Tema padrão: Azul Cobalto — cor exacta do logotipo Transparência */
  --primary:       #15569e;
  --primary-dk:    #0f4279;
  --primary-lt:    #e8f1fa;
  --primary-rgb:   21, 86, 158;
  --primary-mid:   #2b73bd;
  --primary-soft:  #5b8dc9;    /* tom claro luminoso para acentos */
  --primary-glow:  rgba(21,86,158,.22);

  /* ── Cor de acento complementar (warm) — destaca CTAs e KPIs.
        Coral âmbar quente: contrasta com o cobalto sem competir. */
  --accent:        #f97316;    /* coral âmbar */
  --accent-dk:     #c2410c;
  --accent-lt:     #fff4ec;
  --accent-rgb:    249,115,22;

  /* ── Cores de superfície — hierarquia mais refinada com tom cobalto */
  --bg:             #eef3f9;   /* ligeiro tom azul-pálido */
  --bg-2:           #e3ebf4;
  --bg-3:           #d7e2ee;
  --surface:        #ffffff;
  --surface-alt:    #f5f8fc;
  --surface-hover:  #eaf1f9;
  --surface-raised: #ffffff;
  --surface-elev:   #fafcfe;   /* superfície ligeiramente acima de surface */
  --surface-cobalt: #f3f7fc;   /* superfície com leve tom cobalto */

  /* ── Bordas — toque cobalto subtil para coerência cromática */
  --border-subtle:  rgba(21,86,158,.06);
  --border:         rgba(21,86,158,.11);
  --border-strong:  rgba(21,86,158,.20);

  /* ── Texto */
  --text:        #0c1a27;
  --text-2:      #2f4a60;
  --text-muted:  #6b8aa3;
  --text-xmuted: #a4b8c8;

  /* ── Semânticas — ramos modernos com mais luminosidade */
  --green:    #15a34a; --green-dk:  #047857; --green-lt: #ecfdf5; --green-rgb:21,163,74;
  --red:      #e11d48; --red-dk:    #b91c1c; --red-lt:   #fef2f2; --red-rgb:225,29,72;
  --amber:    #d97706; --amber-dk:  #b45309; --amber-lt: #fff8eb; --amber-rgb:217,119,6;
  --orange:   #ea580c; --orange-dk: #c2410c; --orange-lt:#fff5ec; --orange-rgb:234,88,12;
  --purple:   #7c3aed; --purple-dk: #6d28d9; --purple-lt:#f5f3ff; --purple-rgb:124,58,237;
  --teal:     #0d9488; --teal-dk:   #0f766e; --teal-lt:  #ecfdf5; --teal-rgb:13,148,136;
  --indigo:   #4f46e5; --indigo-dk: #4338ca; --indigo-lt:#eef2ff; --indigo-rgb:79,70,229;
  --cyan:     #0891b2; --cyan-dk:   #0e7490; --cyan-lt:  #ecfeff; --cyan-rgb:8,145,178;
  --rose:     #f43f5e; --rose-dk:   #be123c; --rose-lt:  #fff1f3; --rose-rgb:244,63,94;
  --gray:     #64748b; --gray-dk:   #475569; --gray-lt:  #f1f5f9;

  /* ── Gradientes reutilizáveis — base de toda a sensação dinâmica */
  --grad-brand:     linear-gradient(135deg, #15569e 0%, #2b73bd 100%);
  --grad-brand-dk:  linear-gradient(135deg, #0f4279 0%, #15569e 100%);
  --grad-warm:      linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  --grad-cool:      linear-gradient(135deg, #2b73bd 0%, #0891b2 100%);
  --grad-emerald:   linear-gradient(135deg, #059669 0%, #10b981 100%);
  --grad-rose:      linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
  --grad-violet:    linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
  --grad-sunrise:   linear-gradient(135deg, #f97316 0%, #f43f5e 100%);
  --grad-ocean:     linear-gradient(135deg, #0c2c52 0%, #15569e 50%, #2b73bd 100%);
  --grad-sky:       linear-gradient(160deg, #eef3f9 0%, #d7e2ee 100%);   /* fundo subtil */
  --grad-card-cool: linear-gradient(135deg, rgba(43,115,189,.06) 0%, rgba(21,86,158,.02) 100%);

  /* ── Sombras (multi-camada, com tom cobalto subtil — mais coesão visual) */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(12,44,82,.06);
  --sh-2: 0 1px 2px rgba(12,44,82,.05), 0 2px 6px rgba(12,44,82,.06);
  --sh-3: 0 2px 4px rgba(12,44,82,.05), 0 6px 16px rgba(12,44,82,.08);
  --sh-4: 0 4px 8px rgba(12,44,82,.06), 0 14px 36px rgba(12,44,82,.10);
  --sh-5: 0 8px 18px rgba(12,44,82,.08), 0 26px 60px rgba(12,44,82,.14);
  --sh-brand: 0 2px 10px rgba(var(--primary-rgb),.32), 0 8px 24px rgba(var(--primary-rgb),.20);
  --sh-accent: 0 2px 10px rgba(var(--accent-rgb),.32), 0 8px 24px rgba(var(--accent-rgb),.20);
  --sh-glow:   0 0 0 4px rgba(var(--primary-rgb),.10);

  /* compat aliases */
  --shadow-xs:    var(--sh-1);
  --shadow-sm:    var(--sh-2);
  --shadow-md:    var(--sh-3);
  --shadow-lg:    var(--sh-4);
  --shadow-xl:    var(--sh-5);
  --shadow-brand: var(--sh-brand);

  /* ── Raios */
  --r-xs:3px; --r-sm:7px; --r-md:10px;
  --r-lg:14px; --r-xl:18px; --r-2xl:24px; --r-pill:999px;
  --r: var(--r-md);

  /* ── Duração & Curvas */
  --t-micro: 60ms;
  --t-fast:  120ms;
  --t-base:  200ms;
  --t-slow:  320ms;
  --t-xslow: 480ms;
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-in:      cubic-bezier(.4,0,1,1);
  --ease-out:     cubic-bezier(0,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --ease-snappy:  cubic-bezier(.2,0,0,1);
  /* compat */
  --dur-micro:var(--t-micro); --dur-fast:var(--t-fast);
  --dur-normal:var(--t-base); --dur-slow:var(--t-slow);
  --ease-decel:var(--ease-out); --ease-express:var(--ease-snappy);

  /* ── Layout */
  --sidebar-w: 272px;
  --topbar-h:  62px;
  --bn-h:      58px;

  /* ── Sidebar — azul cobalto escuro (família do logotipo) */
  --sb-bg:    #0c2c52;   /* azul cobalto profundo — corpo */
  --sb-bg2:   #07192f;   /* muito escuro — header/footer */
  --sb-bg3:   #103a6b;   /* ligeiramente mais claro — base */
  --sb-brd:   rgba(21,86,158,.28);   /* borda cobalto */
  --sb-tx:    #d2e6fa;   /* texto claro azulado */
  --sb-mt:    #6a93bd;   /* muted — azul médio */
  --sb-hover: rgba(21,86,158,.16);   /* hover cobalto subtil */
  --sb-active:rgba(21,86,158,.38);   /* active mais vivo */
  --sb-actx:  #8ac2f5;               /* texto activo: azul claro */
  --sb-pill:  rgba(21,86,158,.4);    /* pill activo opaco */
  --sb-glow:  rgba(21,86,158,.1);    /* glow lateral sutil */

  /* ── Topbar — cor exacta do logotipo */
  --tb-bg:  #15569e;   /* = --primary = cor do logo */
  --tb-tx:  #ffffff;

  /* ── View / Widget / Table / Drawer headers — família cobalto */
  --wh-bg:  #0c2c52;   /* = --sb-bg (mesmo azul cobalto profundo) */
  --wh-bg2: #15569e;   /* = --primary (gradient end mais claro)   */
  --wh-tx:  #d2e6fa;   /* = --sb-tx (consistência total)          */
}

/* ══════════════════════════════════════════════════════════════
   TEMAS DE CORES
   (Royal é o padrão definido em :root — sem classe)
══════════════════════════════════════════════════════════════ */
body.theme-ciano {
  --primary:#0891b2; --primary-dk:#0c6d8a; --primary-lt:#e0f7fa;
  --primary-rgb:8,145,178; --primary-mid:#06b6d4;
  --primary-glow:rgba(8,145,178,.22);
  --tb-bg:#0c6d8a; --sh-brand:0 2px 8px rgba(8,145,178,.28),0 6px 20px rgba(8,145,178,.18);
  --sb-active:rgba(8,145,178,.18); --sb-actx:#67e8f9; --sb-pill:rgba(8,145,178,.22);
  --wh-bg:#0a3a4a; --wh-bg2:#0c6d8a; --wh-tx:#cffafe;
}
body.theme-indigo {
  --primary:#4f46e5; --primary-dk:#4338ca; --primary-lt:#eef2ff;
  --primary-rgb:79,70,229; --primary-mid:#6366f1;
  --primary-glow:rgba(79,70,229,.22);
  --tb-bg:#4338ca; --sh-brand:0 2px 8px rgba(79,70,229,.28),0 6px 20px rgba(79,70,229,.18);
  --sb-active:rgba(79,70,229,.16); --sb-actx:#a5b4fc; --sb-pill:rgba(79,70,229,.2);
  --wh-bg:#1e1b4b; --wh-bg2:#2d2875; --wh-tx:#e0e7ff;
}
body.theme-esmeralda {
  --primary:#059669; --primary-dk:#047857; --primary-lt:#ecfdf5;
  --primary-rgb:5,150,105; --primary-mid:#10b981;
  --primary-glow:rgba(5,150,105,.22);
  --tb-bg:#047857; --sh-brand:0 2px 8px rgba(5,150,105,.28),0 6px 20px rgba(5,150,105,.18);
  --sb-active:rgba(5,150,105,.16); --sb-actx:#6ee7b7; --sb-pill:rgba(5,150,105,.2);
  --wh-bg:#064e3b; --wh-bg2:#0a6b51; --wh-tx:#a7f3d0;
}
body.theme-ambar {
  --primary:#d97706; --primary-dk:#b45309; --primary-lt:#fffbeb;
  --primary-rgb:217,119,6; --primary-mid:#f59e0b;
  --primary-glow:rgba(217,119,6,.22);
  --tb-bg:#b45309; --sh-brand:0 2px 8px rgba(217,119,6,.28),0 6px 20px rgba(217,119,6,.18);
  --sb-active:rgba(217,119,6,.16); --sb-actx:#fde68a; --sb-pill:rgba(217,119,6,.2);
  --wh-bg:#451a03; --wh-bg2:#6a2a05; --wh-tx:#fde68a;
}
body.theme-rubi {
  --primary:#e11d48; --primary-dk:#be123c; --primary-lt:#fff1f2;
  --primary-rgb:225,29,72; --primary-mid:#f43f5e;
  --primary-glow:rgba(225,29,72,.22);
  --tb-bg:#be123c; --sh-brand:0 2px 8px rgba(225,29,72,.28),0 6px 20px rgba(225,29,72,.18);
  --sb-active:rgba(225,29,72,.16); --sb-actx:#fda4af; --sb-pill:rgba(225,29,72,.2);
  --wh-bg:#4c0519; --wh-bg2:#7a0a28; --wh-tx:#fecdd3;
}
body.theme-violeta {
  --primary:#7c3aed; --primary-dk:#6d28d9; --primary-lt:#f5f3ff;
  --primary-rgb:124,58,237; --primary-mid:#8b5cf6;
  --primary-glow:rgba(124,58,237,.22);
  --tb-bg:#6d28d9; --sh-brand:0 2px 8px rgba(124,58,237,.28),0 6px 20px rgba(124,58,237,.18);
  --sb-active:rgba(124,58,237,.16); --sb-actx:#c4b5fd; --sb-pill:rgba(124,58,237,.2);
  --wh-bg:#2e1065; --wh-bg2:#4a1d96; --wh-tx:#ede9fe;
}
body.theme-ardosia {
  --primary:#0f766e; --primary-dk:#115e59; --primary-lt:#f0fdfa;
  --primary-rgb:15,118,110; --primary-mid:#14b8a6;
  --primary-glow:rgba(15,118,110,.22);
  --tb-bg:#115e59; --sh-brand:0 2px 8px rgba(15,118,110,.28),0 6px 20px rgba(15,118,110,.18);
  --sb-active:rgba(15,118,110,.16); --sb-actx:#5eead4; --sb-pill:rgba(15,118,110,.2);
  --wh-bg:#042f2e; --wh-bg2:#084845; --wh-tx:#99f6e4;
}
body.sidebar-light {
  --sb-bg:#f0f6ff; --sb-bg2:#e4eef9; --sb-bg3:#f7faff;
  --sb-tx:#0f2540; --sb-mt:#4e7a9e;
  --sb-brd:rgba(21,86,158,.12); --sb-hover:rgba(21,86,158,.07);
  --sb-active:rgba(21,86,158,.1); --sb-actx:var(--primary-dk);
  --sb-pill:rgba(21,86,158,.12);
  --sb-glow:rgba(21,86,158,.04);
}
body.sidebar-color {
  --sb-bg:var(--primary-dk); --sb-bg2:var(--primary-dk); --sb-bg3:var(--primary);
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(255,255,255,.55);
  --sb-brd:rgba(255,255,255,.14); --sb-hover:rgba(255,255,255,.1);
  --sb-active:rgba(255,255,255,.18); --sb-actx:#fff; --sb-pill:rgba(255,255,255,.22);
  --sb-glow:rgba(255,255,255,.04);
}

/* ══════════════════════════════════════════════════════════════
   2. KEYFRAMES
══════════════════════════════════════════════════════════════ */
@keyframes orb      { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(18px,-18px)scale(1.04)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes ring     {
  0%,100%{box-shadow:0 0 0 3px var(--primary-glow)}
  50%    {box-shadow:0 0 0 7px var(--primary-glow)}
}
@keyframes viewIn   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes itemIn   { from{opacity:0;transform:translateY(7px)}  to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.94)translateY(8px)} to{opacity:1;transform:none} }
@keyframes slideUp  { from{transform:translateY(100%)} to{transform:none} }
@keyframes slideRight{ from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} }
@keyframes toastIn  { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }
@keyframes popIn    { 0%{transform:scale(0);opacity:0} 65%{transform:scale(1.15)} 100%{transform:scale(1);opacity:1} }
@keyframes pip      { 0%{transform:translateX(-50%)scale(0)} 70%{transform:translateX(-50%)scale(1.4)} 100%{transform:translateX(-50%)scale(1)} }
@keyframes shimmer  { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ══════════════════════════════════════════════════════════════
   3. BASE RESET
══════════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; line-height:1.5;
}
.hidden { display:none !important; }
button {
  cursor:pointer; font-family:inherit; border:none; background:none;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
}
input,select,textarea { font-family:inherit; -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
@supports (-webkit-touch-callout:none) {
  input,select,textarea { font-size:max(16px,1em); }
}

/* ══════════════════════════════════════════════════════════════
   4. VIEW TRANSITIONS (stagger grid)
══════════════════════════════════════════════════════════════ */
.view-in { animation:viewIn var(--t-slow) var(--ease-out) both; }
.view-in .stat-card:nth-child(1){animation:itemIn var(--t-slow) var(--ease-out) 30ms both}
.view-in .stat-card:nth-child(2){animation:itemIn var(--t-slow) var(--ease-out) 70ms both}
.view-in .stat-card:nth-child(3){animation:itemIn var(--t-slow) var(--ease-out) 110ms both}
.view-in .stat-card:nth-child(4){animation:itemIn var(--t-slow) var(--ease-out) 150ms both}
.view-in .stat-card:nth-child(5){animation:itemIn var(--t-slow) var(--ease-out) 190ms both}
.view-in .stat-card:nth-child(6){animation:itemIn var(--t-slow) var(--ease-out) 230ms both}
.view-in .hier-card:nth-child(1){animation:itemIn var(--t-slow) var(--ease-out) 25ms both}
.view-in .hier-card:nth-child(2){animation:itemIn var(--t-slow) var(--ease-out) 60ms both}
.view-in .hier-card:nth-child(3){animation:itemIn var(--t-slow) var(--ease-out) 95ms both}
.view-in .hier-card:nth-child(4){animation:itemIn var(--t-slow) var(--ease-out) 130ms both}
.view-in .hier-card:nth-child(5){animation:itemIn var(--t-slow) var(--ease-out) 165ms both}
.view-in .hier-card:nth-child(6){animation:itemIn var(--t-slow) var(--ease-out) 200ms both}
.view-in .hier-card:nth-child(7){animation:itemIn var(--t-slow) var(--ease-out) 235ms both}
.view-in .hier-card:nth-child(8){animation:itemIn var(--t-slow) var(--ease-out) 270ms both}
.view-in .hier-card:nth-child(9){animation:itemIn var(--t-slow) var(--ease-out) 305ms both}
.view-in .hier-card:nth-child(10){animation:itemIn var(--t-slow) var(--ease-out) 340ms both}
.view-in .hier-card:nth-child(11){animation:itemIn var(--t-slow) var(--ease-out) 375ms both}
.view-in .hier-card:nth-child(12){animation:itemIn var(--t-slow) var(--ease-out) 410ms both}
.view-in tbody tr:nth-child(1){animation:itemIn var(--t-base) var(--ease-out) 15ms both}
.view-in tbody tr:nth-child(2){animation:itemIn var(--t-base) var(--ease-out) 35ms both}
.view-in tbody tr:nth-child(3){animation:itemIn var(--t-base) var(--ease-out) 55ms both}
.view-in tbody tr:nth-child(4){animation:itemIn var(--t-base) var(--ease-out) 75ms both}
.view-in tbody tr:nth-child(5){animation:itemIn var(--t-base) var(--ease-out) 95ms both}
.view-in tbody tr:nth-child(6){animation:itemIn var(--t-base) var(--ease-out) 115ms both}
.view-in tbody tr:nth-child(7){animation:itemIn var(--t-base) var(--ease-out) 135ms both}
.view-in tbody tr:nth-child(8){animation:itemIn var(--t-base) var(--ease-out) 155ms both}
.view-in tbody tr:nth-child(9){animation:itemIn var(--t-base) var(--ease-out) 175ms both}
.view-in tbody tr:nth-child(10){animation:itemIn var(--t-base) var(--ease-out) 195ms both}
.view-in .widget:nth-child(1){animation:itemIn var(--t-slow) var(--ease-out) 40ms both}
.view-in .widget:nth-child(2){animation:itemIn var(--t-slow) var(--ease-out) 85ms both}
.view-in .widget:nth-child(3){animation:itemIn var(--t-slow) var(--ease-out) 130ms both}
.view-in .widget:nth-child(4){animation:itemIn var(--t-slow) var(--ease-out) 175ms both}
.view-in .info-row:nth-child(1){animation:fadeIn var(--t-base) var(--ease-out) 25ms both}
.view-in .info-row:nth-child(2){animation:fadeIn var(--t-base) var(--ease-out) 50ms both}
.view-in .info-row:nth-child(3){animation:fadeIn var(--t-base) var(--ease-out) 75ms both}
.view-in .info-row:nth-child(4){animation:fadeIn var(--t-base) var(--ease-out) 100ms both}
.view-in .info-row:nth-child(5){animation:fadeIn var(--t-base) var(--ease-out) 125ms both}
.view-in .info-row:nth-child(6){animation:fadeIn var(--t-base) var(--ease-out) 150ms both}
.view-in .filter-chip:nth-child(1){animation:itemIn var(--t-base) var(--ease-out) 15ms both}
.view-in .filter-chip:nth-child(2){animation:itemIn var(--t-base) var(--ease-out) 38ms both}
.view-in .filter-chip:nth-child(3){animation:itemIn var(--t-base) var(--ease-out) 61ms both}
.view-in .filter-chip:nth-child(4){animation:itemIn var(--t-base) var(--ease-out) 84ms both}
.view-in .filter-chip:nth-child(5){animation:itemIn var(--t-base) var(--ease-out) 107ms both}

/* ══════════════════════════════════════════════════════════════
   5. SKELETON
══════════════════════════════════════════════════════════════ */
.skeleton {
  display:block; border-radius:var(--r-md);
  background:linear-gradient(90deg,var(--surface-alt) 25%,var(--bg-2) 50%,var(--surface-alt) 75%);
  background-size:600px 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   6. LOGIN SCREEN — Premium Landing
══════════════════════════════════════════════════════════════ */
.login-screen {
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, #050d1e 0%, #0a1d3d 35%, #0f4279 65%, #15569e 100%);
  position:relative; overflow-x:hidden; overflow-y:auto; padding:24px 0;
}
/* Animated mesh */
.login-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(21,86,158,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(21,86,158,.1) 0%, transparent 60%),
    repeating-linear-gradient(0deg,transparent,transparent 64px,rgba(255,255,255,.02) 64px,rgba(255,255,255,.02) 65px),
    repeating-linear-gradient(90deg,transparent,transparent 64px,rgba(255,255,255,.02) 64px,rgba(255,255,255,.02) 65px);
}
.login-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:orb 12s ease-in-out infinite;
}
.login-orb-1 {
  width:600px; height:600px; top:-180px; left:-180px;
  background:radial-gradient(circle, rgba(21,86,158,.14) 0%, transparent 65%);
  animation-delay:0s;
}
.login-orb-2 {
  width:480px; height:480px; bottom:-120px; right:-120px;
  background:radial-gradient(circle, rgba(21,86,158,.12) 0%, transparent 65%);
  animation-delay:-6s;
}
.login-wrap {
  position:relative; z-index:10; width:100%; max-width:440px; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  animation:fadeIn .6s var(--ease-out) both;
}
.login-brand { text-align:center; display:flex; flex-direction:column; align-items:center; }
/* Logo flutuante — sem fundo. Herda a cor cobalto do .login-screen
   por baixo. O logo é apresentado na variante clara (branca) para
   contrastar com o fundo escuro. */
.login-logo {
  display:inline-flex; align-items:center; justify-content:center;
  width:112px; height:112px; border-radius:50%;
  margin-bottom:18px; position:relative;
  background: transparent;
  animation:loginLogoIn .55s var(--ease-spring) both;
}
.login-logo::before {
  /* halo cobalto difuso para destacar o logo sem criar uma "moldura" */
  content:''; position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle, rgba(21,86,158,.38) 0%,
                                     rgba(21,86,158,.12) 45%,
                                     rgba(21,86,158,0) 75%);
  filter: blur(12px); z-index:-1;
  animation:loginHalo 4s ease-in-out infinite;
}
.login-logo img {
  width:96px; height:96px; object-fit:contain;
  filter: drop-shadow(0 4px 10px rgba(5,13,30,.55));
}
@keyframes loginHalo { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.14);opacity:1} }
/* Logo personalizado (carregado pelo admin): mantém o mesmo
   tratamento — só halo, sem fundo branco. */
.login-logo.login-logo-flat img { width:104px; height:104px; }
@keyframes loginLogoIn { from{opacity:0;transform:scale(.6) translateY(10px)} to{opacity:1;transform:none} }
@keyframes loginRing   { 0%,100%{transform:scale(1);opacity:.4} 50%{transform:scale(1.06);opacity:.8} }
.login-title {
  font-size:2.2rem; font-weight:800; color:#fff;
  letter-spacing:-.05em; line-height:1;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}
.login-subtitle {
  color:rgba(255,255,255,.6); font-size:.86rem; margin-top:7px;
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.login-card {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:var(--r-2xl);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 4px 24px rgba(0,0,0,.18), 0 24px 64px rgba(0,0,0,.22);
  padding:32px 28px; width:100%;
}
.login-card-header       { margin-bottom:24px; }
.login-card-header h2    { font-size:1.12rem;font-weight:700;color:var(--text);letter-spacing:-.02em; }
.login-card-header p     { font-size:.85rem;color:var(--text-muted);margin-top:4px; }
.login-form              { display:flex;flex-direction:column;gap:14px; }
.field-group             { display:flex;flex-direction:column;gap:5px; }
.field-label             { font-size:.79rem;font-weight:600;color:var(--text-2);letter-spacing:.01em; }
.field-wrap              { position:relative; }
.field-icon {
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--text-xmuted);pointer-events:none;
  transition:color var(--t-base);
}
.field-wrap:focus-within .field-icon { color:var(--primary); }
.field-input {
  width:100%; padding:11px 12px 11px 38px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:.9rem; color:var(--text); background:var(--surface-alt);
  transition:border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
             background var(--t-base);
  outline:none; min-height:44px;
}
.field-input:focus {
  border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.btn-login {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  color:#fff; border-radius:var(--r-md); font-size:.9rem; font-weight:700;
  letter-spacing:-.01em;
  box-shadow:var(--sh-brand);
  transition:filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  min-height:46px;
}
.btn-login:hover  { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 4px 14px rgba(var(--primary-rgb),.45),0 10px 28px rgba(var(--primary-rgb),.2); }
.btn-login:active { transform:scale(.97) translateY(0); transition-duration:var(--t-micro); filter:brightness(.96); }
.login-error {
  background:var(--red-lt); border:1px solid #fca5a5; border-radius:var(--r-md);
  padding:10px 13px; font-size:.85rem; color:var(--red);
}
.login-demos       { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.login-demos-title {
  font-size:.68rem; font-weight:700; color:var(--text-xmuted); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.1em;
}
.login-demos-grid  { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.demo-btn {
  padding:8px 10px; background:var(--surface-alt); border:1.5px solid var(--border);
  border-radius:var(--r-md); font-size:.78rem; font-weight:500; color:var(--text-2);
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-micro);
  text-align:left; min-height:40px; line-height:1.35;
}
.demo-btn:hover  { background:var(--primary-lt); border-color:rgba(var(--primary-rgb),.35); color:var(--primary-dk); }
.demo-btn:active { transform:scale(.96); transition-duration:var(--t-micro); }
.login-footer { font-size:.7rem; color:rgba(255,255,255,.25); text-align:center; letter-spacing:.03em; }

/* Banner da centralidade resolvida (passo 2 do login) */
.login-cen-info {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-md);
  background:var(--primary-lt); border:1px solid rgba(var(--primary-rgb),.25);
  animation:itemIn .25s var(--ease-out) both;
}
.login-cen-info .lci-emoji { font-size:1.4rem; flex-shrink:0; }
.login-cen-info .lci-name  { font-weight:700; font-size:.86rem; color:var(--primary-dk); }
.login-cen-info .lci-sub   { font-size:.72rem; color:var(--text-muted); }

/* Link de texto no login (voltar, criar conta) */
.login-link {
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--primary); font-size:.8rem; font-weight:600; font-family:inherit;
}
.login-link:hover { text-decoration:underline; }

/* Bloco de pré-cadastro */
.login-register {
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
  text-align:center; font-size:.8rem; color:var(--text-muted);
  display:flex; flex-direction:column; gap:5px; align-items:center;
}

/* Fundo personalizado por centralidade (via --login-bg) */
.login-screen.has-custom-bg {
  background:var(--login-bg) center/cover no-repeat fixed;
}
.login-screen.has-custom-bg::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(5,13,30,.88) 0%, rgba(10,29,61,.8) 50%, rgba(21,86,158,.7) 100%);
  pointer-events:none;
}

/* ══════════════════════════════════════════════════════════════
   7. APP SHELL
══════════════════════════════════════════════════════════════ */
#app { display:flex; height:100svh; overflow:hidden; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; height:100svh;
  /* Gradiente 3-stop: quase-preto → ocean blue → ligeiramente mais claro */
  background:linear-gradient(180deg,
    var(--sb-bg2)  0%,
    var(--sb-bg)  40%,
    var(--sb-bg3) 100%);
  display:flex; flex-direction:column; overflow:hidden;
  transition:width .3s var(--ease-snappy), transform .36s var(--ease-snappy);
  z-index:200; will-change:transform;
  /* Borda direita tintada com ciano + sombra lateral */
  box-shadow:1px 0 0 var(--sb-brd),
             6px 0 32px rgba(0,0,0,.22),
             inset -1px 0 0 rgba(21,86,158,.06);
  /* Linha de acento superior em ciano */
  border-top:3px solid var(--primary);
}
/* Glow difuso no lado direito da sidebar */
.sidebar::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(21,86,158,.2) 30%,
    rgba(21,86,158,.35) 55%,
    rgba(21,86,158,.2) 75%,
    transparent 100%);
  pointer-events:none;
}
.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 14px;      /* -2px top por causa do border-top:3px */
  border-bottom:1px solid var(--sb-brd);
  background:var(--sb-bg2);
  flex-shrink:0;
}
.sidebar-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.sidebar-logo {
  width:40px; height:40px; border-radius:11px;
  /* Caixa subtil no tom do próprio fundo — o logo branco integra-se */
  background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.sidebar-logo img { width:34px; height:34px; }
.sidebar-brand-name {
  font-size:.93rem; font-weight:700; color:var(--sb-tx);
  letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sidebar-brand-sub { font-size:.67rem; color:var(--sb-mt); margin-top:1px; }
.sidebar-close {
  display:none; padding:7px; border-radius:var(--r-sm);
  color:var(--sb-mt); flex-shrink:0;
  min-width:36px; min-height:36px; align-items:center; justify-content:center;
  transition:background var(--t-fast), color var(--t-fast);
}
.sidebar-close:hover { background:var(--sb-hover); color:var(--sb-tx); }

/* User profile area */
.sidebar-user {
  padding:22px 16px 18px; border-bottom:1px solid var(--sb-brd);
  text-align:center; flex-shrink:0;
  /* Fundo ligeiramente mais escuro para separar o perfil do nav */
  background:rgba(0,0,0,.12);
}
.sidebar-user-inner { display:flex; flex-direction:column; align-items:center; gap:9px; }
.avatar-xl { animation:ring 4s ease-in-out infinite; }
.sidebar-avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.sidebar-user-name {
  font-size:.87rem; font-weight:700; color:var(--sb-tx);
  letter-spacing:-.01em; line-height:1.25;
}
.sidebar-user-role {
  font-size:.71rem; color:var(--sb-mt);
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.role-badge {
  display:inline-flex; align-items:center; gap:3px;
  background:rgba(21,86,158,.12); border:1px solid rgba(21,86,158,.2);
  border-radius:var(--r-pill); padding:2px 8px;
  font-size:.68rem; color:var(--sb-tx); font-weight:500;
}

/* Nav */
.sidebar-nav {
  flex:1; overflow-y:auto; padding:8px 0 4px; overscroll-behavior:contain;
  /* Barra de rolagem fina e discreta, no tom da sidebar */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar-nav::-webkit-scrollbar       { width:7px; }
.sidebar-nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.16); border-radius:4px;
  border:2px solid transparent; background-clip:padding-box;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.3); background-clip:padding-box; }
.nav-section { padding:14px 16px 4px; }
.nav-section:first-child { padding-top:8px; }
.nav-section-label {
  font-size:.62rem; font-weight:800;
  /* Muted com leve toque de ciano */
  color:rgba(21,86,158,.55);
  text-transform:uppercase; letter-spacing:.1em;
  display:flex; align-items:center; gap:6px;
}
.nav-section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, rgba(21,86,158,.2), transparent);
}
a.nav-item { text-decoration:none; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; margin:1px 8px;
  border-radius:var(--r-md); color:var(--sb-mt);
  font-size:.83rem; font-weight:500;
  cursor:pointer; touch-action:manipulation;
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             transform var(--t-micro),
             box-shadow var(--t-fast);
  user-select:none; min-height:40px; position:relative;
}
.nav-item svg {
  width:17px; height:17px; flex-shrink:0;
  transition:color var(--t-fast), transform var(--t-base) var(--ease-spring);
}
.nav-item:hover {
  background:var(--sb-hover);
  color:var(--sb-tx);
}
.nav-item:hover svg { transform:scale(1.08); color:var(--sb-actx); }
.nav-item:active { transform:scale(.97); transition-duration:var(--t-micro); }

/* Active state — pill com glow ciano */
.nav-item.active {
  background:var(--sb-pill);
  color:var(--sb-actx);
  font-weight:600;
  /* Sombra interna sutil para efeito de profundidade */
  box-shadow:inset 0 1px 0 rgba(21,86,158,.2), inset 0 -1px 0 rgba(0,0,0,.1);
}
.nav-item.active::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:65%; border-radius:0 3px 3px 0;
  /* Barra de acento ciano com glow */
  background:var(--sb-actx);
  box-shadow:0 0 8px var(--sb-actx), 0 0 16px rgba(21,86,158,.4);
  opacity:1;
}
.nav-item.active svg { color:var(--sb-actx); }
.nav-badge {
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  background:var(--red); color:#fff; border-radius:var(--r-pill);
  font-size:.64rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(220,38,38,.4);
}
/* Footer */
.sidebar-footer {
  padding:10px 8px 12px;
  border-top:1px solid var(--sb-brd);
  flex-shrink:0;
  background:rgba(0,0,0,.1);
}
.sidebar-logout {
  display:flex; align-items:center; gap:9px;
  width:100%; padding:9px 14px; border-radius:var(--r-md);
  color:var(--sb-mt); font-size:.82rem; font-weight:500;
  transition:background var(--t-fast), color var(--t-fast);
  min-height:40px;
}
.sidebar-logout:hover {
  background:rgba(239,68,68,.12);
  color:#fda4af;
}
/* Ícone de logout muda de cor no hover */
.sidebar-logout:hover svg { color:#f87171; }

/* Overlay */
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(5,12,22,.5);
  z-index:190; opacity:0; transition:opacity .28s var(--ease-out);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.sidebar-overlay.open { opacity:1; }

/* ── MAIN WRAP ───────────────────────────────────────────── */
.main-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  display:flex; align-items:center; gap:10px; padding:0 18px;
  background:var(--tb-bg);
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.14);
  z-index:100; position:relative;
}
/* Subtle inner gradient */
.topbar::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.06) 0%, transparent 100%);
}
.topbar-menu {
  display:none; padding:7px; border-radius:var(--r-md);
  color:rgba(255,255,255,.82); flex-shrink:0;
  min-width:40px; min-height:40px; align-items:center; justify-content:center;
  transition:background var(--t-fast); position:relative; z-index:1;
}
.topbar-menu:hover  { background:rgba(0,0,0,.12); }
.topbar-menu:active { transform:scale(.92); transition-duration:var(--t-micro); }
.topbar-search {
  flex:1; position:relative; max-width:420px; z-index:1;
}
.topbar-search svg {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:rgba(255,255,255,.55); pointer-events:none;
}
.topbar-search-input {
  width:100%; padding:8px 12px 8px 32px;
  background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill); font-size:.84rem; color:#fff; outline:none;
  transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  height:36px;
}
.topbar-search-input::placeholder { color:rgba(255,255,255,.45); }
.topbar-search-input:focus {
  background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.36);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.topbar-search-hint {
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:.63rem; color:rgba(255,255,255,.32); pointer-events:none;
  background:rgba(255,255,255,.08); border-radius:4px;
  padding:2px 5px; letter-spacing:.04em;
}
.topbar-breadcrumb {
  display:flex; align-items:center; gap:6px; position:relative; z-index:1;
  font-size:.8rem; font-weight:500; color:rgba(255,255,255,.6);
  overflow:hidden; flex-shrink:1; min-width:0;
}
.topbar-breadcrumb .bc-sep     { color:rgba(255,255,255,.26); }
.topbar-breadcrumb .bc-item    { cursor:pointer; white-space:nowrap; }
.topbar-breadcrumb .bc-item:hover { color:#fff; }
.topbar-breadcrumb .bc-current {
  color:#fff; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-title {
  display:none; flex:1; min-width:0; position:relative; z-index:1;
  font-size:.94rem; font-weight:700; color:#fff; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.topbar-right { display:flex; align-items:center; gap:4px; flex-shrink:0; position:relative; z-index:1; }
.topbar-icon-btn {
  position:relative; padding:7px; border-radius:var(--r-md);
  color:rgba(255,255,255,.85);
  transition:background var(--t-fast), color var(--t-fast);
  min-width:38px; min-height:38px; display:flex; align-items:center; justify-content:center;
}
.topbar-icon-btn:hover  { background:rgba(0,0,0,.12); color:#fff; }
.topbar-icon-btn:active { transform:scale(.9); transition-duration:var(--t-micro); }
.notif-badge {
  position:absolute; top:3px; right:3px;
  min-width:16px; height:16px; padding:0 4px;
  background:#f43f5e; color:#fff; border-radius:var(--r-pill);
  border:2px solid var(--tb-bg);
  font-size:.59rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
  animation:popIn .3s var(--ease-spring) both;
}
.topbar-avatar {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:.73rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.28);
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  overflow:hidden; flex-shrink:0;
}
.topbar-avatar:hover  { background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55); transform:scale(1.06); }
.topbar-avatar:active { transform:scale(.92); transition-duration:var(--t-micro); }
.topbar-avatar img    { width:100%; height:100%; object-fit:cover; }

/* ── CONTENT AREA ────────────────────────────────────────── */
.main-content {
  flex:1; overflow-y:auto; padding:22px 22px 28px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--bg);
}
.main-content::-webkit-scrollbar       { width:6px; }
.main-content::-webkit-scrollbar-track { background:transparent; }
.main-content::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }

/* ══════════════════════════════════════════════════════════════
   8. BOTTOM NAV (mobile)
══════════════════════════════════════════════════════════════ */
.bottom-nav {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:150;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  box-shadow:0 -4px 28px rgba(15,23,42,.09);
  height:calc(var(--bn-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-inner { display:flex; align-items:stretch; height:var(--bn-h); }
.bn-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:5px 4px 7px; cursor:pointer; position:relative;
  color:var(--text-muted); transition:color var(--t-fast);
  border:none; background:none; font-family:inherit; min-width:0;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; overflow:hidden;
}
.bn-item::before {
  content:''; position:absolute; inset:4px;
  border-radius:var(--r-lg); background:transparent;
  transition:background var(--t-fast);
}
.bn-item:active::before { background:rgba(var(--primary-rgb),.08); }
.bn-item.active { color:var(--primary); }
.bn-icon {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md);
  transition:transform var(--ease-spring) var(--t-base), background var(--t-fast);
}
.bn-icon svg { width:22px; height:22px; color:inherit; }
.bn-item.active .bn-icon {
  transform:translateY(-2px) scale(1.05);
  background:rgba(var(--primary-rgb),.1);
}
.bn-label { font-size:.6rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; line-height:1; }
.bn-item.active .bn-label { font-weight:700; }
.bn-item::after {
  content:''; position:absolute; bottom:4px; left:50%;
  width:5px; height:5px; border-radius:50%; background:var(--primary);
  transform:translateX(-50%) scale(0); transition:transform var(--ease-spring) var(--t-fast);
}
.bn-item.active::after { transform:translateX(-50%) scale(1); animation:pip .38s var(--ease-spring) both; }
.bn-badge {
  position:absolute; top:4px; right:calc(50% - 22px);
  min-width:16px; height:16px; padding:0 4px;
  background:var(--red); color:#fff; border-radius:var(--r-pill);
  font-size:.59rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--surface);
  animation:popIn .3s var(--ease-spring) both;
}

/* ══════════════════════════════════════════════════════════════
   9. STAT CARDS
══════════════════════════════════════════════════════════════ */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(188px, 1fr));
  gap:14px; margin-bottom:20px;
}
.stat-card {
  background:var(--surface); border-radius:var(--r-lg);
  padding:18px 18px 16px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--sh-2);
  border:1px solid var(--border);
  border-top:3px solid transparent;
  transition:box-shadow var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             border-top-color var(--t-base);
  position:relative; overflow:hidden;
}
.stat-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary-mid) 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.stat-card:hover { box-shadow:var(--sh-4); transform:translateY(-3px); }
.stat-card:hover::after { transform:scaleX(1); }
.stat-card:active { transform:scale(.98) translateY(0); transition-duration:var(--t-fast); }
.stat-card.accent-primary { border-top-color:var(--primary); }
.stat-card.accent-primary::after { transform:scaleX(1); }
.stat-card.accent-green   { border-top-color:var(--green); }
.stat-card.accent-green::after { background:var(--green); transform:scaleX(1); }
.stat-card.accent-red     { border-top-color:var(--red); }
.stat-card.accent-red::after { background:var(--red); transform:scaleX(1); }
.stat-card.accent-amber   { border-top-color:var(--amber); }
.stat-card.accent-amber::after { background:var(--amber); transform:scaleX(1); }
.stat-icon {
  width:46px; height:46px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-icon svg { width:22px; height:22px; }
.stat-value {
  font-size:1.6rem; font-weight:800;
  letter-spacing:-.04em; line-height:1;
}
.stat-label { font-size:.76rem; color:var(--text-muted); margin-top:3px; }

/* ══════════════════════════════════════════════════════════════
   10. VIEW HEADER
══════════════════════════════════════════════════════════════ */
.view-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:10px;
  /* Gradiente que ecoa o sidebar */
  background:linear-gradient(135deg, var(--wh-bg) 0%, var(--wh-bg2) 100%);
  padding:16px 20px; border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  position:relative; overflow:hidden;
  /* Borda de acento esquerda — espelha o sidebar active indicator */
  border-left:3px solid rgba(21,86,158,.5);
}
.view-header::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, rgba(21,86,158,.3), rgba(255,255,255,.06), transparent);
}
/* Glow tênue no topo-esquerdo */
.view-header::after {
  content:''; position:absolute; top:-20px; left:-10px;
  width:180px; height:100px;
  background:radial-gradient(ellipse at top left, rgba(21,86,158,.12), transparent 70%);
  pointer-events:none;
}
.view-title    { font-size:1.06rem; font-weight:700; color:var(--wh-tx); letter-spacing:-.02em; }
.view-subtitle { font-size:.77rem; color:rgba(255,255,255,.42); margin-top:2px; }
.view-actions  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.view-header .btn-primary   { background:rgba(255,255,255,.95); color:var(--wh-bg); box-shadow:none; border:none; }
.view-header .btn-primary:hover { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.view-header .btn-secondary {
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.88);
}
.view-header .btn-secondary:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); }

/* ══════════════════════════════════════════════════════════════
   11. BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:8px 16px;
  border-radius:var(--r-md); font-size:.84rem; font-weight:600;
  letter-spacing:-.01em;
  transition:background var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease),
             transform var(--t-micro),
             filter var(--t-fast);
  cursor:pointer; white-space:nowrap; min-height:38px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden; border:none;
}
/* Ripple inner shine */
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.09) 0%, transparent 60%);
  pointer-events:none; border-radius:inherit;
}
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn:active { transform:scale(.96); transition-duration:var(--t-micro); filter:brightness(.94); }
/* Primary */
.btn-primary {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  color:#fff; box-shadow:var(--sh-brand);
}
.btn-primary:hover  { filter:brightness(1.07); box-shadow:0 4px 14px rgba(var(--primary-rgb),.42), 0 8px 24px rgba(var(--primary-rgb),.16); transform:translateY(-1px); }
/* Secondary */
.btn-secondary {
  background:var(--surface); color:var(--text-2);
  border:1.5px solid var(--border);
  box-shadow:var(--sh-1);
}
.btn-secondary::after { display:none; }
.btn-secondary:hover { background:var(--surface-alt); border-color:var(--border-strong); color:var(--text); box-shadow:var(--sh-2); }
/* Danger */
.btn-danger { background:#fff5f5; color:#b91c1c; border:1.5px solid #fecaca; }
.btn-danger::after { display:none; }
.btn-danger:hover { background:#fee2e2; border-color:#fca5a5; box-shadow:0 2px 8px rgba(220,38,38,.15); }
/* Ghost */
.btn-ghost { color:var(--text-muted); padding:7px 10px; border:none; background:none; }
.btn-ghost::after { display:none; }
.btn-ghost:hover { background:var(--surface-alt); color:var(--text-2); }
/* Icon only */
.btn-icon {
  padding:8px; border-radius:var(--r-md); color:var(--text-muted);
  min-width:34px; min-height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-micro);
}
.btn-icon::after { display:none; }
.btn-icon:hover  { background:var(--surface-alt); color:var(--text-2); }
.btn-icon:active { transform:scale(.86); transition-duration:var(--t-micro); }
/* Small variant */
.btn-sm { padding:5px 12px; font-size:.78rem; min-height:32px; gap:5px; }
.btn-sm svg { width:13px; height:13px; }

/* ══════════════════════════════════════════════════════════════
   12. TABLE
══════════════════════════════════════════════════════════════ */
.table-wrap {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  overflow:hidden; position:relative;
}
/* Horizontal scroll fade */
.table-wrap::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:28px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.7));
  pointer-events:none; z-index:1; opacity:0; transition:opacity var(--t-fast);
}
.table-wrap.has-scroll::after { opacity:1; }
.table-toolbar {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
  background:var(--surface);
}
.search-box { position:relative; flex:1; min-width:180px; }
.search-box svg {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--text-muted); pointer-events:none;
}
.search-input {
  width:100%; padding:8px 10px 8px 30px;
  border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:.84rem; outline:none; background:var(--surface-alt); color:var(--text);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
  min-height:36px;
}
.search-input:focus { border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--primary-glow); }
.filter-select {
  padding:7px 28px 7px 10px; border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:.84rem; outline:none; cursor:pointer;
  background:var(--surface-alt); color:var(--text);
  transition:border-color var(--t-fast); appearance:none; min-height:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:15px;
}
.filter-select:focus { border-color:var(--primary); }
table { width:100%; border-collapse:collapse; }
thead tr {
  background:linear-gradient(to bottom, var(--wh-bg), var(--wh-bg2));
}
th {
  padding:10px 14px; text-align:left;
  font-size:.68rem; font-weight:700; color:rgba(255,255,255,.75);
  text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.06);
}
td {
  padding:11px 14px; font-size:.84rem; color:var(--text-2);
  border-bottom:1px solid var(--border-subtle); vertical-align:middle;
}
tbody tr { transition:background var(--t-fast); }
tbody tr:hover { background:var(--surface-alt); }
tbody tr:nth-child(even) { background:rgba(15,23,42,.018); }
tbody tr:nth-child(even):hover { background:var(--surface-alt); }
tbody tr:last-child td { border-bottom:none; }
td .td-main { font-weight:600; color:var(--text); }
td .td-code {
  font-family:'SF Mono', 'Fira Code', monospace; font-size:.78rem;
  color:var(--text-muted); background:var(--surface-alt);
  padding:2px 6px; border-radius:var(--r-sm);
  border:1px solid var(--border);
}
td .td-sub  { font-size:.76rem; color:var(--text-muted); margin-top:1px; }
.table-empty { text-align:center; padding:56px 20px; }
.table-empty svg   { width:40px; height:40px; color:var(--text-xmuted); margin:0 auto 12px; }
.table-empty p     { color:var(--text-muted); font-size:.9rem; }
.table-empty small { color:var(--text-xmuted); font-size:.8rem; margin-top:4px; display:block; }
.table-footer {
  padding:10px 14px; border-top:1px solid var(--border-subtle);
  display:flex; align-items:center; justify-content:space-between;
  font-size:.79rem; color:var(--text-muted); flex-wrap:wrap; gap:8px;
}

/* ══════════════════════════════════════════════════════════════
   13. BADGES
══════════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:600; white-space:nowrap;
  letter-spacing:.01em;
}
.badge-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.badge-primary { background:rgba(var(--primary-rgb),.1); color:var(--primary-dk); }
.badge-primary .badge-dot { background:var(--primary); }
.badge-green   { background:#dcfce7; color:#166534; }
.badge-green .badge-dot   { background:var(--green); }
.badge-red     { background:#fee2e2; color:#991b1b; }
.badge-red .badge-dot     { background:var(--red); }
.badge-amber   { background:#fef3c7; color:#92400e; }
.badge-amber .badge-dot   { background:var(--amber); }
.badge-orange  { background:#ffedd5; color:#9a3412; }
.badge-orange .badge-dot  { background:var(--orange); }
.badge-purple  { background:#ede9fe; color:#5b21b6; }
.badge-purple .badge-dot  { background:var(--purple); }
.badge-gray    { background:var(--surface-alt); color:var(--text-2); border:1px solid var(--border); }
.badge-gray .badge-dot    { background:var(--gray); }
.badge-teal    { background:var(--teal-lt); color:var(--teal); }
.badge-teal .badge-dot    { background:var(--teal); }

/* ══════════════════════════════════════════════════════════════
   14. MODAL
══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(8,14,26,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  z-index:300; padding:16px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--surface); border-radius:var(--r-xl);
  width:100%; max-width:560px; max-height:90svh;
  display:flex; flex-direction:column;
  box-shadow:0 0 0 1px var(--border), var(--sh-5);
  animation:scaleIn .22s var(--ease-spring) both;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid var(--border);
  flex-shrink:0;
  /* Linha de acento superior ciano — liga visualmente ao resto da interface */
  border-top:3px solid var(--primary);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.modal-header h3 { font-size:1rem; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.modal-close {
  padding:6px; border-radius:var(--r-sm); color:var(--text-muted);
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-micro);
  min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.modal-close:hover  { background:var(--surface-alt); color:var(--text); }
.modal-close:active { transform:scale(.88); transition-duration:var(--t-micro); }
.modal-body   { flex:1; overflow-y:auto; padding:18px 20px; overscroll-behavior:contain; }
.modal-footer {
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; flex-shrink:0;
  background:var(--surface-alt); border-radius:0 0 var(--r-xl) var(--r-xl);
}

/* ══════════════════════════════════════════════════════════════
   15. DRAWER
══════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position:fixed; inset:0; background:rgba(8,14,26,.45);
  display:none; z-index:250;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.drawer-overlay.open { display:block; }
.drawer-panel {
  position:fixed; top:0; right:0; bottom:0; width:100%; max-width:460px;
  background:var(--surface);
  box-shadow:-1px 0 0 var(--border), var(--sh-5);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .36s var(--ease-snappy);
  z-index:260; will-change:transform;
}
.drawer-overlay.open .drawer-panel { transform:none; }
.drawer-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid rgba(21,86,158,.15); flex-shrink:0;
  background:linear-gradient(135deg, var(--wh-bg) 0%, var(--wh-bg2) 100%);
  border-top:3px solid var(--primary);   /* acento igual ao sidebar */
  position:relative; overflow:hidden;
}
.drawer-header::before {
  content:''; position:absolute; top:3px; left:0; right:0; height:1px;
  background:linear-gradient(to right, rgba(21,86,158,.3), transparent);
}
.drawer-header h3 { font-size:.96rem; font-weight:700; color:var(--wh-tx); letter-spacing:-.01em; }
/* Botão fechar no drawer com cor adaptada */
.drawer-header .modal-close { color:rgba(255,255,255,.55); }
.drawer-header .modal-close:hover { background:rgba(255,255,255,.1); color:var(--wh-tx); }
.drawer-body {
  flex:1; overflow-y:auto; padding:18px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* ══════════════════════════════════════════════════════════════
   16. FORMS
══════════════════════════════════════════════════════════════ */
.form-grid   { display:grid; gap:14px; }
.form-grid-2 { grid-template-columns:1fr 1fr; }
.form-group  { display:flex; flex-direction:column; gap:5px; }
.form-group.span-2 { grid-column:1/-1; }
.form-label  { font-size:.78rem; font-weight:600; color:var(--text-2); letter-spacing:.01em; }
.form-input, .form-select, .form-textarea {
  padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:.88rem; color:var(--text); background:var(--surface-alt); outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  min-height:42px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.form-textarea { resize:vertical; min-height:82px; line-height:1.55; }
.form-select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px; padding-right:32px;
}
.form-hint  { font-size:.74rem; color:var(--text-muted); line-height:1.4; }
.form-error { font-size:.74rem; color:var(--red); }

/* ══════════════════════════════════════════════════════════════
   17. HIERARCHY CARDS
══════════════════════════════════════════════════════════════ */
.hier-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(256px, 1fr)); gap:14px; }
.hier-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px; cursor:pointer;
  transition:border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             transform var(--t-base) var(--ease);
  position:relative; overflow:hidden; touch-action:manipulation;
}
.hier-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--primary) 0%, var(--primary-mid) 100%);
  opacity:0; transition:opacity var(--t-base);
}
.hier-card:hover {
  border-color:rgba(var(--primary-rgb),.3);
  box-shadow:0 4px 16px rgba(var(--primary-rgb),.1), var(--sh-3);
  transform:translateY(-3px);
}
.hier-card:hover::before { opacity:1; }
.hier-card:active { transform:scale(.97); box-shadow:var(--sh-2); transition-duration:var(--t-fast); }
.hier-card-icon   { width:42px; height:42px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:11px; }
.hier-card-title  { font-size:.9rem; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.hier-card-code   { font-size:.7rem; font-family:monospace; color:var(--text-muted); background:var(--surface-alt); padding:2px 6px; border-radius:var(--r-sm); display:inline-block; margin:3px 0; border:1px solid var(--border); }
.hier-card-meta   { font-size:.76rem; color:var(--text-muted); margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; }
.hier-card-meta span { display:flex; align-items:center; gap:3px; }
.hier-card-actions { position:absolute; top:10px; right:10px; display:flex; gap:4px; opacity:0; transition:opacity var(--t-fast); }
.hier-card:hover .hier-card-actions { opacity:1; }
.hier-card .inactive-overlay {
  position:absolute; inset:0; background:rgba(255,255,255,.75);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; color:var(--text-muted);
}
.hier-card.inactive       { opacity:.5; filter:grayscale(.3); }
.hier-card.inactive:hover { opacity:.75; filter:none; }

/* ══════════════════════════════════════════════════════════════
   18. INFO PANEL
══════════════════════════════════════════════════════════════ */
.info-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2);
}
.info-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border-subtle);
}
.info-row:last-child { border-bottom:none; }
.info-key { font-size:.77rem; font-weight:600; color:var(--text-muted); min-width:128px; padding-top:1px; }
.info-val { font-size:.84rem; color:var(--text); flex:1; }
.info-val.code { font-family:monospace; background:var(--surface-alt); padding:2px 8px; border-radius:var(--r-sm); font-size:.81rem; border:1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   19. WIDGETS
══════════════════════════════════════════════════════════════ */
.dashboard-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:16px; }
.widget {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-2); overflow:hidden;
}
.widget-header {
  display:flex; align-items:center; justify-content:space-between;
  margin:-16px -16px 14px; padding:10px 16px;
  background:linear-gradient(135deg, var(--wh-bg) 0%, var(--wh-bg2) 100%);
  border-bottom:1px solid rgba(21,86,158,.12);
  position:relative; overflow:hidden;
}
/* Glow subtil no widget header */
.widget-header::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, rgba(21,86,158,.6), rgba(21,86,158,.2));
  pointer-events:none;
}
.widget-title { font-size:.87rem; font-weight:700; color:var(--wh-tx); letter-spacing:-.01em; padding-left:8px; }
.widget-header .btn-secondary {
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.88);
}
.widget-header .btn-secondary:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); }
.widget-header .btn-primary { background:rgba(255,255,255,.95); color:var(--wh-bg); border:none; }
.widget-header .btn-primary:hover { background:#fff; }
.progress-bar-wrap  { margin:6px 0; }
.progress-bar-label { display:flex; justify-content:space-between; font-size:.76rem; margin-bottom:4px; }
.progress-bar-track { height:6px; background:var(--border); border-radius:var(--r-pill); overflow:hidden; }
.progress-bar-fill  { height:100%; border-radius:var(--r-pill); transition:width .7s var(--ease-out); }

/* ══════════════════════════════════════════════════════════════
   20. FILTER CHIPS
══════════════════════════════════════════════════════════════ */
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.filter-chip {
  padding:5px 14px; border-radius:var(--r-pill); font-size:.78rem; font-weight:500;
  border:1.5px solid var(--border); color:var(--text-2); cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-micro);
  min-height:32px; display:flex; align-items:center; touch-action:manipulation;
  background:var(--surface);
}
.filter-chip:hover  { border-color:rgba(var(--primary-rgb),.4); color:var(--primary-dk); }
.filter-chip:active { transform:scale(.95); transition-duration:var(--t-micro); }
.filter-chip.active { background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(var(--primary-rgb),.35); }

/* ══════════════════════════════════════════════════════════════
   21. TOASTS
══════════════════════════════════════════════════════════════ */
#toast-container {
  position:fixed; bottom:20px; right:20px; z-index:600;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 0 0 1px var(--border), var(--sh-4);
  font-size:.84rem; font-weight:500; color:var(--text);
  max-width:340px; pointer-events:auto;
  animation:toastIn .28s var(--ease-spring) both;
  transition:transform .28s var(--ease-out), opacity .28s;
}
.toast svg { width:18px; height:18px; flex-shrink:0; }
.toast.out { transform:translateX(110%); opacity:0; }

/* ══════════════════════════════════════════════════════════════
   22. AVATARS
══════════════════════════════════════════════════════════════ */
.avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff; flex-shrink:0;
}
.avatar-sm { width:26px; height:26px; font-size:.64rem; }
.avatar-lg { width:46px; height:46px; font-size:.9rem; }
.avatar-xl {
  width:72px; height:72px; font-size:1.5rem;
  border:3px solid rgba(var(--primary-rgb),.5);
  box-shadow:0 0 0 5px rgba(var(--primary-rgb),.12), 0 4px 14px rgba(var(--primary-rgb),.2);
}
.av-blue   { background:linear-gradient(135deg,#0e86a8,#0369a1); }
.av-green  { background:linear-gradient(135deg,#16a34a,#15803d); }
.av-purple { background:linear-gradient(135deg,#7c3aed,#6d28d9); }
.av-orange { background:linear-gradient(135deg,#ea580c,#c2410c); }
.av-red    { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.av-amber  { background:linear-gradient(135deg,#f59e0b,#b45309); }
.av-gray   { background:linear-gradient(135deg,#64748b,#475569); }

/* ══════════════════════════════════════════════════════════════
   23. MISC COMPONENTS
══════════════════════════════════════════════════════════════ */
.modelo-sequele { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
.modelo-kilamba { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.codigo-unico {
  font-family:'SF Mono','Fira Code',monospace; font-size:.78rem;
  background:var(--surface-alt); border:1px solid var(--border);
  padding:4px 8px; border-radius:var(--r-sm);
  color:var(--text-2); letter-spacing:.04em;
}
.status-aberta       { background:#fef2f2; color:#991b1b; }
.status-visto        { background:#fff7ed; color:#9a3412; }
.status-em_analise   { background:#fffbeb; color:#92400e; }
.status-tratamento   { background:#eff6ff; color:#1d4ed8; }
.status-solucionado  { background:#f0fdf4; color:#166534; }
.status-fechado      { background:var(--surface-alt); color:#475569; }
.status-em_resolucao { background:#fffbeb; color:#92400e; }
.status-resolvida    { background:#f0fdf4; color:#166534; }
.status-fechada      { background:var(--surface-alt); color:#475569; }
.sat-star { font-size:1.8rem; background:none; border:none; cursor:pointer; opacity:.25; transition:opacity .12s, transform .12s; padding:2px; }
.sat-star.on { opacity:1; transform:scale(1.2); }
.prio-urgente { background:#fef2f2; color:#991b1b; }
.prio-alta    { background:#fff7ed; color:#9a3412; }
.prio-media   { background:#fffbeb; color:#92400e; }
.prio-baixa   { background:#f0fdf4; color:#166534; }
.valor-entrada { color:var(--green); font-weight:600; }
.valor-saida   { color:var(--red); font-weight:600; }
.hier-path { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:.76rem; color:var(--text-muted); margin-bottom:14px; }
.hier-path-item    { cursor:pointer; color:var(--primary-dk); font-weight:500; }
.hier-path-item:hover { text-decoration:underline; }
.hier-path-sep     { color:var(--border-strong); }
.hier-path-current { color:var(--text); font-weight:600; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 20px; text-align:center; }
.empty-state-icon  { font-size:3rem; margin-bottom:14px; opacity:.6; }
.empty-state-title { font-size:1rem; font-weight:700; color:var(--text); margin-bottom:6px; letter-spacing:-.01em; }
.empty-state-text  { font-size:.85rem; color:var(--text-muted); max-width:300px; line-height:1.6; }
.spinner { width:20px; height:20px; border:2.5px solid var(--border-strong); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   24. TABS
══════════════════════════════════════════════════════════════ */
.tabs {
  display:flex; border-bottom:2px solid var(--border);
  margin-bottom:16px; gap:0;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar { display:none; }
.tab-btn {
  padding:9px 16px; font-size:.84rem; font-weight:500; color:var(--text-muted);
  border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer;
  transition:color var(--t-fast), border-color var(--t-fast);
  white-space:nowrap; flex-shrink:0; min-height:40px;
  display:flex; align-items:center; gap:6px;
  background:none; border-top:none; border-left:none; border-right:none;
}
.tab-btn:hover  { color:var(--text-2); }
.tab-btn.active { color:var(--primary); border-color:var(--primary); font-weight:700; }

/* Pill tabs (Configurações, Finanças…) */
.tab-bar {
  display:flex; gap:4px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  padding:5px; border-radius:var(--r-lg);
  box-shadow:var(--sh-1); margin-bottom:16px;
}
.tab-bar .tab-btn {
  border:none; margin:0; padding:8px 14px; border-radius:var(--r-md); font-size:.82rem;
}
.tab-bar .tab-btn.active {
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%);
  color:#fff; box-shadow:var(--sh-brand);
}
.tab-bar .tab-btn:not(.active):hover { background:var(--surface-alt); color:var(--text-2); }

/* ══════════════════════════════════════════════════════════════
   25. PAGINATION
══════════════════════════════════════════════════════════════ */
.pagination { display:flex; gap:4px; align-items:center; }
.page-btn {
  min-width:34px; height:34px; padding:0 8px; border-radius:var(--r-md);
  font-size:.8rem; font-weight:600; color:var(--text-2); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-micro);
}
.page-btn:hover  { background:var(--surface-alt); border-color:var(--border-strong); }
.page-btn:active { transform:scale(.92); transition-duration:var(--t-micro); }
.page-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(var(--primary-rgb),.35); }

/* ══════════════════════════════════════════════════════════════
   26. THEME PICKER
══════════════════════════════════════════════════════════════ */
.theme-picker { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; align-items:flex-start; }
.theme-swatch { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.theme-swatch-dot {
  width:46px; height:46px; border-radius:50%;
  border:3px solid transparent; outline:2px solid transparent;
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
  position:relative;
}
.theme-swatch:hover  .theme-swatch-dot { transform:scale(1.12); }
.theme-swatch.active .theme-swatch-dot {
  border-color:#fff; box-shadow:0 0 0 3px var(--primary), 0 4px 14px rgba(0,0,0,.2);
  transform:scale(1.1);
}
.theme-swatch-dot::after {
  content:'✓'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.88rem; font-weight:800;
  opacity:0; transition:opacity var(--t-fast);
}
.theme-swatch.active .theme-swatch-dot::after { opacity:1; }
.theme-swatch-label { font-size:.71rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.sidebar-style-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.sidebar-style-card {
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  border-radius:var(--r-md); padding:10px;
  border:2px solid var(--border); transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.sidebar-style-card:hover  { border-color:rgba(var(--primary-rgb),.5); }
.sidebar-style-card.active { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.sidebar-preview { width:100%; height:40px; border-radius:var(--r-sm); overflow:hidden; display:flex; border:1px solid var(--border); }
.sidebar-preview-sb  { width:30%; background:#0d1b2e; }
.sidebar-preview-sb.light { background:#f1f5f9; }
.sidebar-preview-sb.color { background:var(--primary); }
.sidebar-preview-cnt { flex:1; background:var(--surface-alt); }
.sidebar-style-label { font-size:.72rem; font-weight:600; color:var(--text-muted); }
.sidebar-style-card.active .sidebar-style-label { color:var(--primary-dk); }

/* ══════════════════════════════════════════════════════════════
   27. FOCUS & ACCESSIBILITY
══════════════════════════════════════════════════════════════ */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--r-sm); }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline:none; }

/* ══════════════════════════════════════════════════════════════
   28. SCROLLBARS
══════════════════════════════════════════════════════════════ */
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar       { width:5px; height:5px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
*::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  :root { --sidebar-w:288px; }
  .stats-grid { grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }
  .hier-grid  { grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); }
  .main-content { padding:26px 28px 32px; }
}
@media (max-width: 1200px) {
  :root { --sidebar-w:256px; }
  .dashboard-grid { grid-template-columns:1.4fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --sidebar-w:244px; }
  .stats-grid     { grid-template-columns:repeat(auto-fill, minmax(166px,1fr)); }
  .hier-grid      { grid-template-columns:repeat(auto-fill, minmax(216px,1fr)); }
  .dashboard-grid { grid-template-columns:1.5fr 1fr; gap:12px; }
}
@media (max-width: 768px) {
  .sidebar { position:fixed; top:0; left:0; height:100%; transform:translateX(-100%); box-shadow:none; }
  .sidebar.open { transform:none; box-shadow:4px 0 40px rgba(0,0,0,.36); }
  .sidebar-close { display:flex; }
  .sidebar-overlay.open { display:block; }
  .topbar-menu        { display:flex; }
  .topbar-search      { display:none; }
  .topbar-breadcrumb  { display:none; }
  .topbar-title       { display:block; }
  .main-content       { padding:14px 14px calc(var(--bn-h) + env(safe-area-inset-bottom) + 14px); }
  .stats-grid         { grid-template-columns:1fr 1fr; }
  .dashboard-grid     { grid-template-columns:1fr; }
  .form-grid-2        { grid-template-columns:1fr; }
  .hier-grid          { grid-template-columns:1fr 1fr; }
  .bottom-nav         { display:block; }
  .modal-overlay      { align-items:flex-end; padding:0; }
  .modal-box {
    max-width:100%; border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    max-height:94svh; animation:slideUp .32s var(--ease-snappy) both;
    padding-top:8px;
  }
  .modal-box::before {
    content:''; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--border-strong); margin:0 auto 2px; flex-shrink:0;
  }
  .modal-header { padding-top:10px; }
  .modal-footer { border-radius:0; }
  .drawer-panel {
    top:auto; left:0; right:0; bottom:0; max-width:100%; width:100%;
    height:90svh; border-radius:var(--r-2xl) var(--r-2xl) 0 0;
    transform:translateY(100%); transition:transform .36s var(--ease-snappy);
  }
  .drawer-overlay.open .drawer-panel { transform:none; }
  .drawer-panel::before {
    content:''; display:block; width:38px; height:4px; border-radius:2px;
    background:var(--border-strong); margin:10px auto 6px; flex-shrink:0;
  }
  .drawer-header { padding-top:6px; }
  #toast-container { bottom:calc(var(--bn-h) + env(safe-area-inset-bottom) + 12px); right:12px; left:12px; }
  .toast { max-width:none; }
  .table-wrap  { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table        { min-width:600px; }
  .view-header { flex-direction:column; align-items:flex-start; }
  .view-actions { width:100%; }
  .stat-value  { font-size:1.38rem; }
  .stat-card   { padding:14px 15px; gap:12px; }
}
@media (max-width: 480px) {
  .stats-grid       { grid-template-columns:1fr 1fr; }
  .hier-grid        { grid-template-columns:1fr; }
  .login-demos-grid { grid-template-columns:1fr; }
  .main-content     { padding:10px 10px calc(var(--bn-h) + env(safe-area-inset-bottom) + 10px); }
  .stat-value { font-size:1.22rem; }
  .view-title { font-size:.98rem; }
  .tabs       { gap:0; }
  .tab-btn    { padding:8px 11px; font-size:.8rem; }
  .btn        { min-height:36px; padding:7px 12px; }
  .btn-sm     { min-height:30px; padding:4px 10px; }
  table       { min-width:520px; }
}
@media (max-width: 360px) {
  .stats-grid { grid-template-columns:1fr; }
  .main-content { padding:8px 8px calc(var(--bn-h) + env(safe-area-inset-bottom) + 8px); }
  .stat-value { font-size:1.1rem; }
  .bn-label   { font-size:.56rem; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #080f1a;
    --bg-2:           #0c1623;
    --surface:        #0f1929;
    --surface-alt:    #162032;
    --surface-hover:  #1a2840;
    --surface-raised: #162032;
    --border-subtle:  rgba(255,255,255,.04);
    --border:         rgba(255,255,255,.08);
    --border-strong:  rgba(255,255,255,.14);
    --text:           #dce8f2;
    --text-2:         #8fb3c8;
    --text-muted:     #4d6b80;
    --text-xmuted:    #2e4a5e;
    --wh-bg:          #040e1e;   /* dark mode: muito escuro royal */
    --wh-bg2:         #0a1a3a;   /* dark mode gradient end */
    --wh-tx:          #b8d4ec;
    --primary-lt:     rgba(21,86,158,.15);
    --primary-glow:   rgba(var(--primary-rgb),.2);
    --green-lt:       rgba(22,163,74,.12);
    --red-lt:         rgba(220,38,38,.12);
    --amber-lt:       rgba(217,119,6,.12);
    --purple-lt:      rgba(124,58,237,.12);
    --teal-lt:        rgba(13,148,136,.12);
    --gray-lt:        rgba(100,116,139,.12);
    --orange-lt:      rgba(234,88,12,.12);
  }
  .modal-box,.drawer-panel { background:var(--surface); color:var(--text); }
  .modal-header h3  { color:var(--text); }
  .modal-footer     { background:var(--surface-alt); }
  .form-input,.form-select,.form-textarea { background:var(--surface-alt); color:var(--text); border-color:var(--border); }
  .field-input      { background:var(--surface-alt); color:var(--text); border-color:var(--border); }
  .field-input:focus { background:var(--surface); }
  .login-card       { background:rgba(15,25,41,.97); }
  .hier-card        { background:var(--surface); }
  .stat-card        { background:var(--surface); }
  .widget           { background:var(--surface); }
  .info-panel       { background:var(--surface); }
  .table-wrap       { background:var(--surface); }
  tbody tr          { background:none; }
  tbody tr:nth-child(even) { background:rgba(255,255,255,.02); }
  .toast            { background:var(--surface-alt); color:var(--text); }
  .tab-bar          { background:var(--surface); }
  .search-input     { background:var(--surface-alt); color:var(--text); }
  .filter-select    { background:var(--surface-alt); color:var(--text); }
  .modal-close:hover { background:var(--surface-alt); }
  .bottom-nav       { background:rgba(15,25,41,.96); }
  .btn-secondary    { background:var(--surface); border-color:var(--border); }
  .btn-secondary:hover { background:var(--surface-alt); }
  .filter-chip      { background:var(--surface); }
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR RECOLHÍVEL — ICON-ONLY MODE
   Activa com: body.sb-collapsed
══════════════════════════════════════════════════════════════ */

/* Botão de toggle (visível em desktop) */
.sidebar-toggle {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--r-sm);
  color:var(--sb-mt); flex-shrink:0;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.sidebar-toggle:hover { background:var(--sb-hover); color:var(--sb-tx); }
.sidebar-toggle .icon-expand { display:none; }
.sidebar-toggle .icon-collapse { display:block; }

/* Adicionar transição de largura ao sidebar */
.sidebar {
  transition:width .3s var(--ease-snappy), transform .36s var(--ease-snappy);
}

/* ── Estado recolhido ──────────────────────────────────────── */
body.sb-collapsed { --sidebar-w: 64px; }

/* Sidebar overflow:visible para os tooltips saírem */
body.sb-collapsed .sidebar { overflow:visible; }
/* Esconder glow lateral quando recolhido */
body.sb-collapsed .sidebar::after { display:none; }
body.sb-collapsed .sidebar-nav {
  overflow:visible !important; /* permite que os tooltips saiam à direita */
  scrollbar-width:none;
}

/* Cabeçalho: esconder texto da marca, mostrar só logo */
body.sb-collapsed .sidebar-header { padding:14px 0; justify-content:center; }
body.sb-collapsed .sidebar-brand  { flex-direction:column; align-items:center; gap:0; }
body.sb-collapsed .sidebar-brand-name,
body.sb-collapsed .sidebar-brand-sub  { display:none; }
body.sb-collapsed .sidebar-logo { width:38px; height:38px; margin:0; }

/* Toggle: inverte ícone */
body.sb-collapsed .sidebar-toggle .icon-collapse { display:none; }
body.sb-collapsed .sidebar-toggle .icon-expand   { display:block; }

/* Perfil: mostrar só avatar centrado */
body.sb-collapsed .sidebar-user { padding:14px 0 12px; }
body.sb-collapsed .sidebar-user-inner { gap:0; }
body.sb-collapsed .sidebar-user-name,
body.sb-collapsed .sidebar-user-role { display:none; }
body.sb-collapsed .avatar-xl {
  width:40px; height:40px; font-size:.9rem;
}

/* Secções: mostrar só divider */
body.sb-collapsed .nav-section { padding:6px 0; }
body.sb-collapsed .nav-section-label,
body.sb-collapsed .nav-section-label::after { display:none; }
body.sb-collapsed .nav-section { position:relative; }
body.sb-collapsed .nav-section::before {
  content:''; display:block; height:1px;
  background:var(--sb-brd); margin:0 14px;
}

/* Nav items: só ícone, centrado */
body.sb-collapsed .nav-item {
  justify-content:center;
  padding:10px 0;
  margin:1px 4px;
}
body.sb-collapsed .nav-item .nav-label { display:none; }
body.sb-collapsed .nav-item svg { width:20px; height:20px; }
body.sb-collapsed .nav-badge {
  position:absolute; top:5px; right:5px;
  min-width:14px; height:14px; font-size:.58rem;
}
/* Barra activa reposicionada para ficar à esquerda */
body.sb-collapsed .nav-item.active::before {
  height:100%; width:3px;
  top:0; transform:none; border-radius:0 2px 2px 0;
}

/* Footer logout: só ícone */
body.sb-collapsed .sidebar-footer { padding:10px 0; }
body.sb-collapsed .sidebar-logout {
  justify-content:center; padding:10px 0;
}
body.sb-collapsed .sidebar-logout span { display:none; }

/* ── Tooltips no modo recolhido ──────────────────────────── */
/* Usa attr(title) via ::after no nav-item */
body.sb-collapsed .nav-item {
  position:relative; overflow:visible;
}
body.sb-collapsed .nav-item::after {
  content:attr(title);
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) scale(.9);
  background:rgba(18,30,48,.97);
  color:rgba(255,255,255,.92);
  padding:6px 12px; border-radius:var(--r-md);
  font-size:.8rem; font-weight:500; white-space:nowrap;
  pointer-events:none; z-index:9999;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
  opacity:0; visibility:hidden;
  transition:opacity .12s, transform .12s, visibility .12s;
}
body.sb-collapsed .nav-item:hover::after {
  opacity:1; visibility:visible;
  transform:translateY(-50%) scale(1);
}
/* Seta do tooltip */
body.sb-collapsed .nav-item::before {
  /* sobrescreve o indicator bar para ser a seta do tooltip */
}
/* Manter o indicator bar via outline em vez de pseudo-element */
body.sb-collapsed .nav-item.active {
  outline:none;
  box-shadow:inset 3px 0 0 var(--sb-actx);
}
body.sb-collapsed .nav-item.active::before { display:none; }

/* Logout tooltip */
body.sb-collapsed .sidebar-logout {
  position:relative; overflow:visible;
}
body.sb-collapsed .sidebar-logout::after {
  content:'Terminar Sessão';
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) scale(.9);
  background:rgba(60,0,0,.95);
  color:#fca5a5;
  padding:6px 12px; border-radius:var(--r-md);
  font-size:.8rem; font-weight:500; white-space:nowrap;
  pointer-events:none; z-index:9999;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  border:1px solid rgba(220,38,38,.3);
  opacity:0; visibility:hidden;
  transition:opacity .12s, transform .12s, visibility .12s;
}
body.sb-collapsed .sidebar-logout:hover::after {
  opacity:1; visibility:visible;
  transform:translateY(-50%) scale(1);
}

/* ── Mobile: toggle não mostrado (usa overlay) ─────────── */
@media (max-width: 768px) {
  .sidebar-toggle { display:none; }
  body.sb-collapsed { --sidebar-w:272px; } /* reseta em mobile */
  body.sb-collapsed .sidebar { overflow:hidden; }
  body.sb-collapsed .sidebar-nav { overflow-y:auto !important; }
  body.sb-collapsed .sidebar-header { padding:16px 16px 12px; justify-content:space-between; }
  body.sb-collapsed .sidebar-brand  { flex-direction:row; gap:11px; }
  body.sb-collapsed .sidebar-brand-name,
  body.sb-collapsed .sidebar-brand-sub { display:block; }
  body.sb-collapsed .sidebar-user  { padding:20px 16px 16px; }
  body.sb-collapsed .sidebar-user-name,
  body.sb-collapsed .sidebar-user-role { display:block; }
  body.sb-collapsed .avatar-xl { width:72px; height:72px; font-size:1.5rem; }
  body.sb-collapsed .nav-section { padding:14px 16px 4px; }
  body.sb-collapsed .nav-section-label { display:flex; }
  body.sb-collapsed .nav-section::before { display:none; }
  body.sb-collapsed .nav-item { justify-content:flex-start; padding:9px 12px; margin:1px 8px; }
  body.sb-collapsed .nav-item .nav-label { display:inline; }
  body.sb-collapsed .nav-item svg { width:17px; height:17px; }
  body.sb-collapsed .nav-item::after { display:none; }
  body.sb-collapsed .sidebar-footer { padding:10px 8px 12px; }
  body.sb-collapsed .sidebar-logout { justify-content:flex-start; padding:10px 12px; }
  body.sb-collapsed .sidebar-logout span { display:inline; }
  body.sb-collapsed .sidebar-logout::after { display:none; }
}

/* ══════════════════════════════════════════════════════════════
   ANIMAÇÕES DIRIGIDAS — só em acções com significado
══════════════════════════════════════════════════════════════ */

/* ── Guardar com sucesso: flash verde no campo ─────────────── */
@keyframes fieldSuccess {
  0%   { border-color:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.2); }
  100% { border-color:var(--border); box-shadow:none; }
}
.field-saved {
  animation:fieldSuccess .8s var(--ease-out) forwards;
}

/* ── Shake: input inválido ─────────────────────────────────── */
@keyframes shake {
  0%,100%{ transform:translateX(0) }
  20%    { transform:translateX(-5px) }
  40%    { transform:translateX(5px) }
  60%    { transform:translateX(-4px) }
  80%    { transform:translateX(4px) }
}
.input-error {
  animation:shake .36s var(--ease) both;
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.15) !important;
}

/* ── Pulse badge: nova notificação ─────────────────────────── */
@keyframes badgePulse {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.35); }
  100% { transform:scale(1); }
}
.badge-new {
  animation:badgePulse .4s var(--ease-spring) both;
}

/* ── Bounce check: acção concluída ────────────────────────── */
@keyframes bounceCheck {
  0%  { transform:scale(0) rotate(-10deg); opacity:0; }
  60% { transform:scale(1.2) rotate(3deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.action-done {
  animation:bounceCheck .38s var(--ease-spring) both;
}

/* ── Spin delete: item eliminado ───────────────────────────── */
@keyframes collapseOut {
  0%  { opacity:1; transform:scaleY(1); max-height:200px; }
  100%{ opacity:0; transform:scaleY(0); max-height:0; padding:0; margin:0; }
}
.item-removing {
  animation:collapseOut .28s var(--ease-in) forwards;
  overflow:hidden;
}

/* ── Highlight: linha de tabela nova ───────────────────────── */
@keyframes rowHighlight {
  0%   { background:rgba(var(--primary-rgb),.12); }
  100% { background:transparent; }
}
.row-new {
  animation:rowHighlight 1.2s var(--ease-out) forwards;
}

/* ── Loading state no botão ────────────────────────────────── */
.btn-loading {
  pointer-events:none; opacity:.7;
}
.btn-loading::before {
  content:''; display:inline-block;
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:white;
  border-radius:50%;
  animation:spin .65s linear infinite;
  margin-right:6px; flex-shrink:0;
}

/* ── Slide-in para novos itens na lista ────────────────────── */
@keyframes slideInList {
  from { opacity:0; transform:translateX(-10px); }
  to   { opacity:1; transform:none; }
}
.list-item-new {
  animation:slideInList .25s var(--ease-out) both;
}

/* ── Modal shake (erro de validação) ───────────────────────── */
@keyframes modalShake {
  0%,100%{ transform:translateX(0) }
  25%    { transform:translateX(-8px) }
  75%    { transform:translateX(8px) }
}
.modal-shake {
  animation:modalShake .3s var(--ease) both;
}

/* ══════════════════════════════════════════════════════════════
   INDICADOR DE SINCRONIZAÇÃO EM TEMPO REAL
══════════════════════════════════════════════════════════════ */
@keyframes livePulse {
  0%,100%{ opacity:1;transform:scale(1); }
  50%     { opacity:.5;transform:scale(.8); }
}
@keyframes syncFlash {
  0%  { opacity:0;transform:scale(.8) translateX(4px); }
  30% { opacity:1;transform:scale(1) translateX(0); }
  80% { opacity:1; }
  100%{ opacity:0;transform:translateX(-4px); }
}
@keyframes syncSpin {
  to { transform:rotate(360deg); }
}

/* Indicador "Ao Vivo" — sempre visível no topbar */
.sync-indicator {
  display:flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:var(--r-pill);
  background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.14);
  cursor:default; user-select:none; flex-shrink:0;
}
.sync-dot {
  width:7px; height:7px; border-radius:50%;
  background:#4ade80;
  animation:livePulse 2.2s ease-in-out infinite;
  flex-shrink:0;
}
.sync-lbl {
  font-size:.65rem; font-weight:700; color:rgba(255,255,255,.7);
  letter-spacing:.06em; text-transform:uppercase;
}
/* Estado: a sincronizar */
.sync-indicator.syncing .sync-dot {
  background:#fbbf24;
  animation:livePulse .5s ease-in-out infinite;
}
.sync-indicator.syncing .sync-lbl::after { content:' …'; }

/* Barra de sincronização — aparece no topo da página ao actualizar */
#sync-bar {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  background:linear-gradient(90deg, transparent 0%, rgba(var(--primary-rgb),1) 50%, transparent 100%);
  background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease-out);
  pointer-events:none;
}
#sync-bar.active {
  transform:scaleX(1);
  animation:syncBarMove .8s var(--ease-out) forwards;
}
@keyframes syncBarMove {
  0%  { background-position:200% 0; transform:scaleX(0); }
  30% { transform:scaleX(1); }
  70% { background-position:-50% 0; transform:scaleX(1); }
  100%{ background-position:-200% 0; transform:scaleX(0) translateX(100%); }
}

/* Toast de sincronização — fundo verde discreto */
.toast-sync {
  background:rgba(22,163,74,.95) !important;
  color:white !important;
  border-color:rgba(22,163,74,.6) !important;
  font-size:.8rem !important;
}

/* ══════════════════════════════════════════════════════════════
   UTILITÁRIOS DE PADRONIZAÇÃO — componentes reutilizáveis
══════════════════════════════════════════════════════════════ */

/* ── Botão Sucesso (verde) ─────────────────────────────────── */
.btn-success {
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.3);
}
.btn-success::after { background:linear-gradient(to bottom,rgba(255,255,255,.09),transparent); }
.btn-success:hover { filter:brightness(1.07); box-shadow:0 4px 14px rgba(22,163,74,.42); transform:translateY(-1px); }

/* ── Badge "NOVO" / contador inline ───────────────────────── */
.badge-new {
  display:inline-flex; align-items:center;
  background:#16a34a; color:#fff;
  border-radius:var(--r-pill);
  font-size:.6rem; font-weight:800; letter-spacing:.03em;
  padding:1px 7px; vertical-align:middle; line-height:1.4;
  font-family:'Inter',sans-serif;
}
.badge-new.amber   { background:var(--amber); }
.badge-new.red     { background:var(--red); }
.badge-new.primary { background:var(--primary); }
.badge-new.blue    { background:#2563eb; }

/* ── Contador em títulos de widget / tab ───────────────────── */
.w-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  background:var(--red); color:#fff;
  border-radius:var(--r-pill);
  font-size:.66rem; font-weight:700;
  margin-left:7px; vertical-align:middle; line-height:1;
}
.w-count.amber   { background:var(--amber); }
.w-count.green   { background:var(--green); }
.w-count.primary { background:var(--primary); }
.w-count.gray    { background:var(--gray); }

/* ── Banner de estado ──────────────────────────────────────── */
.status-banner {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--r-lg);
  border:1.5px solid; margin-bottom:16px;
}
.status-banner .sb-icon  { font-size:1.8rem; flex-shrink:0; }
.status-banner .sb-title { font-weight:700; font-size:.9rem; }
.status-banner .sb-sub   { font-size:.79rem; color:var(--text-muted); margin-top:2px; }
.status-banner .sb-actions { flex-shrink:0; display:flex; gap:6px; flex-wrap:wrap; }
.status-banner.sb-success {
  background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.28);
}
.status-banner.sb-success .sb-title { color:#15803d; }
.status-banner.sb-warning {
  background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.28);
}
.status-banner.sb-warning .sb-title { color:#b45309; }
.status-banner.sb-danger {
  background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.28);
}
.status-banner.sb-danger .sb-title { color:#b91c1c; }
.status-banner.sb-info {
  background:rgba(var(--primary-rgb),.08); border-color:rgba(var(--primary-rgb),.28);
}
.status-banner.sb-info .sb-title { color:var(--primary-dk); }
.status-banner.sb-new {
  background:rgba(22,163,74,.1); border-color:rgba(22,163,74,.42);
  box-shadow:0 0 0 3px rgba(22,163,74,.07);
}
.status-banner.sb-new .sb-title { color:#14532d; }

/* ── KPI Grid ──────────────────────────────────────────────── */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px; margin-bottom:16px;
}
.kpi-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--sh-2);
}
.kpi-card .kpi-label {
  font-size:.67rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px;
}
.kpi-card .kpi-value {
  font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1;
}
.kpi-card .kpi-sub { font-size:.72rem; color:var(--text-muted); margin-top:3px; }
.kpi-card .kpi-note { font-size:.7rem; font-weight:600; margin-top:4px; }
.kpi-card.kpi-full   { grid-column:1/-1; }
.kpi-card.kpi-half   { grid-column:span 2; }
.kpi-primary { border-color:rgba(var(--primary-rgb),.3); }
.kpi-primary .kpi-value { color:var(--primary-dk); }
.kpi-red  { border-color:rgba(220,38,38,.25); }
.kpi-red  .kpi-value { color:var(--red); }
.kpi-green { border-color:rgba(22,163,74,.25); }
.kpi-green .kpi-value { color:var(--green); }
.kpi-amber { border-color:rgba(217,119,6,.25); }
.kpi-amber .kpi-value { color:var(--amber); }

/* ── Info chips (mini stat boxes dentro de cards) ──────────── */
.chips-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.info-chip {
  flex:1; min-width:90px; border-radius:var(--r-md); padding:9px 12px;
}
.info-chip .ic-label { font-size:.67rem; color:var(--text-muted); margin-bottom:2px; }
.info-chip .ic-value { font-weight:700; font-size:.88rem; }
.ic-neutral { background:var(--surface-alt); }
.ic-neutral .ic-value { color:var(--text-2); }
.ic-red   { background:rgba(220,38,38,.08); }
.ic-red   .ic-value { color:var(--red); }
.ic-green { background:rgba(22,163,74,.08); }
.ic-green .ic-value { color:var(--green); }
.ic-amber { background:rgba(217,119,6,.08); }
.ic-amber .ic-value { color:var(--amber); }
.ic-primary { background:rgba(var(--primary-rgb),.08); }
.ic-primary .ic-value { color:var(--primary-dk); }

/* ── Document card (recibo, fatura) ───────────────────────── */
.doc-card {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--border-subtle);
  transition:background var(--t-fast);
}
.doc-card:hover { background:var(--surface-hover); }
.doc-card.doc-new { background:rgba(22,163,74,.04); }
.doc-card-icon {
  width:42px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0; position:relative;
  background:var(--surface-alt); border:1px solid var(--border);
}
.doc-card.doc-new .doc-card-icon { background:#16a34a; border-color:rgba(22,163,74,.4); }
.doc-card-body { flex:1; min-width:0; }
.doc-card-num  {
  font-weight:700; font-size:.86rem; font-family:'SF Mono','Fira Code',monospace;
  color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.doc-card-meta   { font-size:.75rem; color:var(--text-muted); margin-top:1px; }
.doc-card-detail { font-size:.72rem; color:var(--text-muted); margin-top:1px; }
.doc-card-actions {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:5px; flex-shrink:0;
}
.doc-card-value { font-weight:800; color:#16a34a; font-size:.92rem; }

/* ── Secção inline (dentro de widgets) ────────────────────── */
.section-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; margin-bottom:12px;
}
.section-row-label {
  font-size:.84rem; color:var(--text-muted);
}
.section-row-label strong { color:var(--text-2); }

/* ── Pill de estado reutilizável (além dos .badge) ─────────── */
.pill {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 9px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600; white-space:nowrap;
  border:1px solid transparent;
}
.pill-green   { background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.pill-red     { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.pill-amber   { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.pill-primary { background:rgba(var(--primary-rgb),.1); color:var(--primary-dk); border-color:rgba(var(--primary-rgb),.2); }
.pill-gray    { background:var(--surface-alt); color:var(--text-2); border-color:var(--border); }

/* ── Dark mode overrides ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .kpi-card { background:var(--surface); }
  .info-chip.ic-neutral { background:var(--surface-alt); }
  .doc-card:hover { background:var(--surface-alt); }
  .status-banner.sb-new .sb-title { color:#86efac; }
}

/* ════════════════════════════════════════════════════════════════
   PWA — banner de atualização e botão de instalação
═══════════════════════════════════════════════════════════════ */
#pwa-update-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9999;
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
#pwa-update-banner.show { transform: translateY(0); }
.pwa-banner-inner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap;
}
.pwa-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 180px; }
.pwa-banner-title { font-weight: 700; font-size: .92rem; }
.pwa-banner-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.pwa-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pwa-banner-btn {
  border: 0; border-radius: 8px; padding: 8px 14px;
  font-weight: 600; font-size: .82rem; cursor: pointer; transition: filter .15s;
}
.pwa-banner-btn-primary { background: var(--primary); color: #fff; }
.pwa-banner-btn-primary:hover { filter: brightness(1.08); }
.pwa-banner-btn-ghost { background: transparent; color: var(--text-2); }
.pwa-banner-btn-ghost:hover { background: var(--surface-alt); }

.pwa-install-btn {
  position: fixed; right: 14px; bottom: 78px; z-index: 9998;
  background: var(--primary); color: #fff; border: 0;
  border-radius: 999px; padding: 12px 18px;
  font-weight: 700; font-size: .85rem; cursor: pointer;
  box-shadow: 0 8px 26px rgba(21,86,158,.36);
  transition: transform .2s, box-shadow .2s;
}
.pwa-install-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(21,86,158,.42); }
.pwa-install-btn:active { transform: translateY(0); }
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .pwa-install-btn { display: none !important; }
}

/* Changelog list (modal) */
.pwa-cl-item { margin-bottom: 14px; }
.pwa-cl-head { font-size: .9rem; margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.pwa-cl-date { font-size: .72rem; color: var(--text-muted); margin-left: auto; }
.pwa-cl-list { margin: 0; padding-left: 22px; font-size: .84rem; line-height: 1.6; color: var(--text-2); }
.pwa-cl-list li { margin-bottom: 4px; }

/* ════════════════════════════════════════════════════════════════
   Responsividade móvel — breakpoints 768 / 640 / 480
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Sidebar vira off-canvas (drawer) */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    z-index: 1000; width: 84vw; max-width: 320px;
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,.42); backdrop-filter: blur(2px);
  }
  .main-area { margin-left: 0 !important; padding-left: 0 !important; }
  .topbar-burger { display: inline-flex !important; }
  /* Top bar mais compacta */
  .topbar { padding: 10px 12px; }
  .topbar-search { display: none; }
  /* Conteúdo: padding lateral menor */
  #main-content { padding: 12px; }
  .view-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .view-header-actions { width: 100%; flex-wrap: wrap; }
  /* KPI grid em mobile: 2 colunas */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-value { font-size: 1.15rem; }
  /* Hierarquia: 1 coluna em mobile */
  .hier-grid { grid-template-columns: 1fr !important; gap: 10px; }
  /* Form grids viram 1 coluna */
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr !important; }
  /* Tabelas com scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }
  /* Modal/Drawer ocupam mais espaço */
  .modal-content, .drawer-content { width: 96vw; max-width: none; }
  .drawer-content { width: 100%; }
  /* Tabs com scroll horizontal */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex-shrink: 0; }
  /* Botões com mais área tátil */
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 34px; }
  /* Login wrap caber inteiro */
  .login-card { width: 92vw; padding: 22px 18px; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .pwa-install-btn { right: 12px; bottom: 70px; padding: 10px 14px; font-size: .78rem; }
  .pwa-banner-actions { width: 100%; justify-content: flex-end; }
  /* Tipografia menor */
  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.15rem; }
}

@media (max-width: 480px) {
  /* Em telas muito estreitas — 1 coluna sempre */
  .kpi-grid { grid-template-columns: 1fr !important; }
  /* Topbar avatar maior para toque */
  #topbar-avatar { width: 38px; height: 38px; }
  /* Sidebar quase full-screen */
  .sidebar { width: 92vw; }
}

/* Aumentar área-alvo táctil em qualquer ecrã com input grosseiro */
@media (pointer: coarse) {
  .nav-item { min-height: 44px; }
  .tab-btn { min-height: 40px; }
  .filter-chip { min-height: 32px; padding: 6px 12px; }
  input, select, textarea { min-height: 40px; font-size: 16px; /* evita zoom no iOS */ }
}

/* Safe area para notch/dynamic island */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  #pwa-update-banner { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pwa-install-btn { bottom: calc(78px + env(safe-area-inset-bottom)); }
}