/* ============================================================================
   emanuelconectacrm — Design System (identidade Riwer Labs · dark + verde-lima)
   Escala Fibonacci para spacing/radius/gaps · Poppins · WCAG-aware
   v2.0.0 — UX, usabilidade, layout e micro-interações
   ----------------------------------------------------------------------------
   Índice:
   01. Tokens & variáveis            08. Avatares & status
   02. Reset & base                  09. Cards & painéis
   03. Tipografia & utilitários      10. Tabelas
   04. Layout (fl/grid/spacing)      11. Kanban (funil)
   05. Botões                        12. Modais / drawers / dialog
   06. Formulários & controles       13. Toasts & notificações
   07. Badges / chips / tags         14. Tooltips
                                     15. Skeleton & loaders
                                     16. Empty states
                                     17. Sidebar & navegação
                                     18. Topbar & busca
                                     19. Dashboard
                                     20. Scrollbars
                                     21. Animações (keyframes)
                                     22. Acessibilidade
                                     23. Responsivo (768/480/360)
                                     24. Print
   ========================================================================== */

/* ====== Fonte ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ============================================================================
   01. TOKENS & VARIÁVEIS
   ========================================================================== */
:root{
  /* — Cores de marca Riwer — */
  --primary:#D0FF59;            --primary-rgb:208,255,89;
  --primary-ink:#D0FF59;        /* lima p/ TEXTO/ícone (no tema escuro = lima; no claro vira lima escura) */
  --primary-dark:#B8E64C;       --primary-soft:rgba(208,255,89,.12);
  --primary-softer:rgba(208,255,89,.06);
  --secondary:#2D54FF;          --secondary-rgb:45,84,255;
  --secondary-soft:rgba(45,84,255,.14);
  --accent:#ff69b4;             --accent-rgb:255,105,180;
  --accent-purple:#46049D;
  --teal:#00D4AA;               --teal-rgb:0,212,170;

  /* — Escala dark — */
  --black:#000;        --dark-1:#0D0D0D;   --dark-2:#121212;
  --dark-3:#1A1A1A;    --dark-4:#242424;   --dark-5:#2E2E2E;
  --surface:#141614;   --surface-2:#17191b;

  /* — Texto — */
  --white:#fff;        --text-white:#fff;  --text-soft:#F5F5F5;
  --text-muted:#A0A0A0;--text-dim:#6f6f6f;
  --text-on-lime:#0a0a0a;

  /* — Bordas — */
  --border-dark:#2a2a2a; --border-mid:#333; --border-soft:rgba(255,255,255,.07);
  --border-strong:#3d3d3d;

  /* — Semânticas — */
  --success:#34d399; --success-rgb:52,211,153;
  --warning:#ff9f43; --warning-rgb:255,159,67;
  --danger:#ff4757;  --danger-rgb:255,71,87;
  --info:#5b9bf5;    --info-rgb:91,155,245;

  /* — Temperatura de lead — */
  --frio:#5b9bf5; --morno:#ff9f43; --quente:#ff4757;

  /* — Tipografia — */
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fs-xs:11px; --fs-sm:13px; --fs-base:14px; --fs-md:16px;
  --fs-lg:21px; --fs-xl:34px; --fs-2xl:55px;
  --lh-tight:1.2; --lh-base:1.5; --lh-loose:1.7;

  /* — Spacing Fibonacci — */
  --fib-1:1px; --fib-2:2px; --fib-3:3px; --fib-5:5px; --fib-8:8px;
  --fib-13:13px; --fib-21:21px; --fib-34:34px; --fib-55:55px;
  --fib-89:89px; --fib-144:144px;

  /* — Raios — */
  --radius-xs:5px; --radius-sm:8px; --radius-md:13px;
  --radius-lg:21px; --radius-xl:34px; --radius-full:9999px;

  /* — Sombras — */
  --shadow-xs:0 1px 3px rgba(0,0,0,.3);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 4px 21px rgba(0,0,0,.45);
  --shadow-lg:0 8px 34px rgba(0,0,0,.55);
  --shadow-xl:0 21px 55px rgba(0,0,0,.6);
  --shadow-glow:0 0 34px rgba(var(--primary-rgb),.28);
  --shadow-glow-strong:0 0 55px rgba(var(--primary-rgb),.45);
  --shadow-glow-blue:0 0 34px rgba(var(--secondary-rgb),.3);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.04);

  /* — Easing & timing — */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-out:cubic-bezier(0.45,0,0.55,1);
  --t-fast:.16s; --t-base:.3s; --t-slow:.5s;

  /* — Gradientes — */
  --grad-primary:linear-gradient(135deg,var(--primary),var(--secondary));
  --grad-hero:linear-gradient(135deg,#D0FF59 0%,#00D4AA 50%,#2D54FF 100%);
  --grad-lime-teal:linear-gradient(90deg,var(--primary),var(--teal));
  --grad-multi:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
  --grad-card:linear-gradient(180deg,var(--surface-2),var(--surface));
  --grad-dark:linear-gradient(135deg,var(--dark-1) 0%,var(--dark-3) 100%);
  --grad-shimmer:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);

  /* — Layout — */
  --sidebar-w:233px; --sidebar-collapsed-w:68px; --topbar-h:89px;
  --z-base:1; --z-sticky:10; --z-drawer:40; --z-modal:50; --z-toast:100; --z-tooltip:120;
}

/* ============================================================================
   02. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--dark-1);
  color:var(--text-white);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:var(--primary-ink);text-decoration:none;transition:color var(--t-base) var(--ease)}
a:hover{color:var(--primary-dark)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs)}
::selection{background:var(--primary-soft);color:var(--primary-ink)}
[hidden],.hidden{display:none!important}
[disabled],.is-disabled{opacity:.5;pointer-events:none}
.no-select{user-select:none}

/* ============================================================================
   03. TIPOGRAFIA & UTILITÁRIOS
   ========================================================================== */
h1,h2,h3,h4{font-weight:700;line-height:var(--lh-tight);letter-spacing:-.02em}
h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.04em}
h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em}
h3{font-size:var(--fs-lg);font-weight:700}
h4{font-size:var(--fs-md);font-weight:600}
small,.text-sm{font-size:var(--fs-sm)}
.text-xs{font-size:var(--fs-xs)}
.text-muted{color:var(--text-muted)}
.text-dim{color:var(--text-dim)}
.text-primary{color:var(--primary-ink)}
.text-secondary{color:var(--secondary)}
.text-success{color:var(--success)}
.text-warning{color:var(--warning)}
.text-danger{color:var(--danger)}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.uppercase{text-transform:uppercase;letter-spacing:.08em}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eyebrow{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.gradient-text{background:var(--grad-lime-teal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mono{font-variant-numeric:tabular-nums}

/* ============================================================================
   04. LAYOUT — flex / grid / spacing (Fibonacci)
   ========================================================================== */
.flex{display:flex}.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}
.flex-1{flex:1}.flex-none{flex:none}.flex-grow{flex-grow:1}
.gap-3{gap:var(--fib-3)}.gap-5{gap:var(--fib-5)}.gap-8{gap:var(--fib-8)}
.gap-13{gap:var(--fib-13)}.gap-21{gap:var(--fib-21)}.gap-34{gap:var(--fib-34)}
.grid{display:grid}
.mt-5{margin-top:var(--fib-5)}.mt-8{margin-top:var(--fib-8)}.mt-13{margin-top:var(--fib-13)}
.mt-21{margin-top:var(--fib-21)}.mt-34{margin-top:var(--fib-34)}
.mb-5{margin-bottom:var(--fib-5)}.mb-8{margin-bottom:var(--fib-8)}.mb-13{margin-bottom:var(--fib-13)}
.mb-21{margin-bottom:var(--fib-21)}.mb-34{margin-bottom:var(--fib-34)}
.p-13{padding:var(--fib-13)}.p-21{padding:var(--fib-21)}.p-34{padding:var(--fib-34)}
.w-full{width:100%}.h-full{height:100%}
.divider{height:1px;background:var(--border-soft);margin:var(--fib-21) 0;border:0}
.divider-v{width:1px;align-self:stretch;background:var(--border-soft)}
.spacer{flex:1}

/* ============================================================================
   05. BOTÕES — sistema completo
   ========================================================================== */
.btn{
  --btn-bg:var(--dark-4);--btn-fg:var(--text-white);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--fib-8);
  padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius-full);
  font-family:var(--font);font-size:var(--fs-base);font-weight:600;line-height:1;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid transparent;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
             background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
  white-space:nowrap;position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn i{font-size:.95em}
/* brilho ao passar (shimmer) */
.btn::after{content:'';position:absolute;inset:0;background:var(--grad-shimmer);
  transform:translateX(-120%);transition:transform var(--t-slow) var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}

.btn-primary{--btn-bg:var(--primary);--btn-fg:var(--text-on-lime)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.btn-secondary{--btn-bg:var(--secondary);--btn-fg:#fff}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-blue)}
.btn-ghost{--btn-bg:transparent;--btn-fg:var(--text-white);border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{border-color:var(--primary-ink);color:var(--primary-ink);background:var(--primary-softer)}
.btn-outline{--btn-bg:transparent;border-color:var(--border-mid);--btn-fg:var(--text-soft)}
.btn-outline:hover{border-color:var(--text-white);color:var(--text-white)}
.btn-danger{--btn-bg:rgba(var(--danger-rgb),.14);--btn-fg:var(--danger);border-color:rgba(var(--danger-rgb),.3)}
.btn-danger:hover{background:var(--danger);--btn-fg:#fff}
.btn-success{--btn-bg:rgba(var(--success-rgb),.14);--btn-fg:var(--success);border-color:rgba(var(--success-rgb),.3)}
.btn-success:hover{background:var(--success);--btn-fg:#04210f}
.btn-subtle{--btn-bg:var(--dark-3);--btn-fg:var(--text-soft)}
.btn-subtle:hover{background:var(--dark-4)}

.btn-sm{padding:var(--fib-5) var(--fib-13);font-size:var(--fs-sm);gap:var(--fib-5)}
.btn-lg{padding:var(--fib-21) var(--fib-34);font-size:var(--fs-md)}
.btn-block{width:100%}
.btn-icon{padding:var(--fib-8);width:38px;height:38px;border-radius:var(--radius-sm)}
.btn-icon.btn-sm{width:30px;height:30px;padding:var(--fib-5)}
.btn-pill{border-radius:var(--radius-full)}
.btn-group{display:inline-flex;gap:var(--fib-5)}

/* estado de carregamento */
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::before{
  content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:var(--btn-fg);animation:spin .6s linear infinite;
}
.btn-primary.is-loading::before{color:var(--text-on-lime)}

/* FAB */
.fab{position:fixed;right:var(--fib-21);bottom:var(--fib-21);width:55px;height:55px;
  border-radius:var(--radius-full);background:var(--primary);color:var(--text-on-lime);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);
  box-shadow:var(--shadow-glow);z-index:var(--z-drawer);transition:all var(--t-base) var(--ease-bounce)}
.fab:hover{transform:scale(1.08) rotate(90deg)}

/* ============================================================================
   06. FORMULÁRIOS & CONTROLES
   ========================================================================== */
.field{margin-bottom:var(--fib-13);position:relative}
label{display:block;font-size:var(--fs-sm);color:var(--text-soft);margin-bottom:var(--fib-5);font-weight:500}
label .req{color:var(--danger);margin-left:2px}
.hint{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--fib-5)}

input,select,textarea{
  width:100%;font-family:var(--font);font-size:var(--fs-base);color:var(--text-white);
  background:var(--dark-3);border:1px solid var(--border-mid);
  padding:var(--fib-13);border-radius:var(--radius-sm);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary-ink);
  box-shadow:0 0 0 3px var(--primary-softer);
  background-color:var(--dark-2);
}
textarea{resize:vertical;min-height:68px;line-height:var(--lh-base)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--fib-13) center;padding-right:var(--fib-34)}

/* validação */
input.is-invalid,textarea.is-invalid,select.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.1)}
input.is-valid{border-color:var(--success)}
.field-error{color:var(--danger);font-size:var(--fs-xs);margin-top:var(--fib-5);display:flex;align-items:center;gap:var(--fib-3)}

/* input com ícone */
.input-icon{position:relative}
.input-icon > i{position:absolute;left:var(--fib-13);top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;font-size:var(--fs-sm)}
.input-icon input{padding-left:var(--fib-34)}

/* busca */
.search-box{position:relative;max-width:340px;width:100%}
.search-box i{position:absolute;left:var(--fib-13);top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:var(--fs-sm)}
.search-box input{padding-left:34px;border-radius:var(--radius-full);background:var(--dark-3)}
.search-box .clear-search{position:absolute;right:var(--fib-8);top:50%;transform:translateY(-50%);
  width:21px;height:21px;border-radius:50%;display:none;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:var(--fs-xs)}
.search-box .clear-search:hover{background:var(--dark-4);color:var(--text-white)}
.search-box.has-value .clear-search{display:flex}

/* switch / toggle */
.switch{position:relative;display:inline-flex;align-items:center;gap:var(--fib-13);cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:24px;border-radius:var(--radius-full);background:var(--dark-5);
  transition:background var(--t-base) var(--ease);flex:none;position:relative;border:1px solid var(--border-mid)}
.switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--text-muted);transition:transform var(--t-base) var(--ease-bounce),background var(--t-base)}
.switch input:checked + .track{background:var(--primary-soft);border-color:var(--primary-ink)}
.switch input:checked + .track .thumb{transform:translateX(18px);background:var(--primary)}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--primary-softer)}

/* checkbox custom */
.checkbox{display:inline-flex;align-items:center;gap:var(--fib-8);cursor:pointer;user-select:none;font-size:var(--fs-sm)}
.checkbox input{position:absolute;opacity:0}
.checkbox .box{width:20px;height:20px;border-radius:var(--radius-xs);border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;transition:all var(--t-base) var(--ease);flex:none}
.checkbox .box i{font-size:11px;color:var(--text-on-lime);opacity:0;transform:scale(.5);transition:all var(--t-fast)}
.checkbox input:checked + .box{background:var(--primary);border-color:var(--primary-ink)}
.checkbox input:checked + .box i{opacity:1;transform:scale(1)}

/* segmented control */
.segmented{display:inline-flex;background:var(--dark-3);border:1px solid var(--border-mid);border-radius:var(--radius-full);padding:var(--fib-3);gap:var(--fib-2)}
.segmented button{padding:var(--fib-5) var(--fib-13);border-radius:var(--radius-full);font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);transition:all var(--t-base) var(--ease)}
.segmented button.active{background:var(--primary);color:var(--text-on-lime)}
.segmented button:not(.active):hover{color:var(--text-white)}

/* ============================================================================
   07. BADGES / CHIPS / TAGS / PILLS
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:var(--fib-3);padding:2px var(--fib-8);
  border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:600;line-height:1.6;
  background:var(--dark-4);color:var(--text-soft)}
.badge-primary{background:var(--primary-soft);color:var(--primary-ink)}
.badge-secondary{background:var(--secondary-soft);color:var(--info)}
.badge-success{background:rgba(var(--success-rgb),.14);color:var(--success)}
.badge-warning{background:rgba(var(--warning-rgb),.14);color:var(--warning)}
.badge-danger{background:rgba(var(--danger-rgb),.14);color:var(--danger)}
.badge-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-outline{background:transparent;border:1px solid currentColor}

.tag{display:inline-flex;align-items:center;gap:var(--fib-3);padding:2px var(--fib-8);
  border-radius:var(--radius-full);font-size:var(--fs-xs);background:var(--dark-4);color:var(--text-soft);
  border:1px solid var(--border-soft)}
.chip{display:inline-flex;align-items:center;gap:var(--fib-5);padding:var(--fib-5) var(--fib-13);
  border-radius:var(--radius-full);font-size:var(--fs-sm);background:var(--dark-3);border:1px solid var(--border-mid)}
.chip .chip-x{cursor:pointer;color:var(--text-muted);font-size:var(--fs-xs)}
.chip .chip-x:hover{color:var(--danger)}
.chip.selected{background:var(--primary-soft);border-color:var(--primary-ink);color:var(--primary-ink)}

/* ============================================================================
   08. AVATARES & INDICADORES DE STATUS
   ========================================================================== */
.avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;font-size:var(--fs-sm);color:#fff;flex:none;background:var(--dark-4);
  text-transform:uppercase;border:1px solid var(--border-soft)}
.avatar-sm{width:28px;height:28px;font-size:var(--fs-xs)}
.avatar-lg{width:55px;height:55px;font-size:var(--fs-lg)}
.avatar-c0{background:linear-gradient(135deg,#2D54FF,#46049D)}
.avatar-c1{background:linear-gradient(135deg,#ff69b4,#46049D)}
.avatar-c2{background:linear-gradient(135deg,#00D4AA,#2D54FF)}
.avatar-c3{background:linear-gradient(135deg,#ff9f43,#ff4757)}
.avatar-c4{background:linear-gradient(135deg,#D0FF59,#00D4AA);color:var(--text-on-lime)}
.avatar-c5{background:linear-gradient(135deg,#5b9bf5,#00D4AA)}
.avatar-group{display:flex}
.avatar-group .avatar{margin-left:-10px;border:2px solid var(--dark-2)}
.avatar-group .avatar:first-child{margin-left:0}

.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.status-dot.online{background:var(--success);box-shadow:0 0 0 3px rgba(var(--success-rgb),.2)}
.status-dot.offline{background:var(--text-dim)}
.status-dot.busy{background:var(--warning)}
.status-dot.pulse{animation:pulseDot 1.6s ease-in-out infinite}

/* ============================================================================
   09. CARDS & PAINÉIS
   ========================================================================== */
.panel{background:var(--dark-2);border:1px solid var(--border-dark);border-radius:var(--radius-md);
  padding:var(--fib-21);margin-bottom:var(--fib-21);box-shadow:var(--shadow-inset)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fib-21);gap:var(--fib-13)}
.panel-head h3{display:flex;align-items:center;gap:var(--fib-8)}
.panel-head h3 i{color:var(--primary-ink)}
.panel-glow{position:relative;overflow:hidden}
.panel-glow::before{content:'';position:absolute;top:-50%;right:-20%;width:233px;height:233px;
  background:radial-gradient(circle,var(--primary-softer),transparent 70%);pointer-events:none}

.card-surface{background:var(--grad-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:var(--fib-21);transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.card-surface:hover{transform:translateY(-3px);border-color:rgba(var(--primary-rgb),.3)}

.info-row{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13) 0;border-bottom:1px solid var(--border-soft)}
.info-row:last-child{border-bottom:0}
.info-row .info-label{color:var(--text-muted);font-size:var(--fs-sm);min-width:89px}
.info-row .info-value{color:var(--text-white);font-weight:500}

/* ============================================================================
   10. TABELAS
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:var(--dark-2);z-index:1}
th,td{text-align:left;padding:var(--fib-13);font-size:var(--fs-sm);border-bottom:1px solid var(--border-soft)}
th{color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-xs);white-space:nowrap}
tbody tr{transition:background var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--dark-3)}
tbody tr.clickable{cursor:pointer}
td .cell-strong{font-weight:600;color:var(--text-white)}
.table-zebra tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.table-compact th,.table-compact td{padding:var(--fib-8) var(--fib-13)}

/* ============================================================================
   11. KANBAN (funil)
   ========================================================================== */
.kanban{display:flex;gap:var(--fib-13);overflow-x:auto;padding-bottom:var(--fib-13);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;min-height:calc(100vh - 200px)}
.column{background:var(--dark-2);border:1px solid var(--border-dark);border-radius:var(--radius-md);
  min-width:266px;width:266px;display:flex;flex-direction:column;
  max-height:calc(100vh - 170px);scroll-snap-align:start;transition:box-shadow var(--t-base) var(--ease)}
.column-head{padding:var(--fib-13);font-weight:600;font-size:var(--fs-sm);
  display:flex;justify-content:space-between;align-items:center;gap:var(--fib-8);
  border-bottom:2px solid var(--col-color,var(--border-mid));
  position:sticky;top:0;background:var(--dark-2);border-radius:var(--radius-md) var(--radius-md) 0 0;z-index:2}
.column-head .col-title{display:flex;align-items:center;gap:var(--fib-8)}
.column-head .col-dot{width:9px;height:9px;border-radius:50%;background:var(--col-color)}
.column-head .count{background:var(--dark-4);border-radius:var(--radius-full);
  padding:1px var(--fib-8);color:var(--text-muted);font-size:var(--fs-xs);min-width:21px;text-align:center}
.column-head .col-sum{font-size:var(--fs-xs);color:var(--text-dim);font-weight:500}
.column-body{padding:var(--fib-8);overflow-y:auto;flex:1;min-height:89px;
  display:flex;flex-direction:column;gap:var(--fib-8);scrollbar-width:thin}
.column.drop-target{box-shadow:inset 0 0 0 2px var(--primary),0 0 21px rgba(var(--primary-rgb),.15)}
.column.drop-target .column-body{background:var(--primary-softer)}

.card{background:var(--dark-3);border:1px solid var(--border-dark);
  border-left:3px solid var(--temp,var(--frio));border-radius:var(--radius-sm);
  padding:var(--fib-13);cursor:grab;position:relative;
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
  animation:cardIn var(--t-base) var(--ease) backwards}
.card:hover{transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.4);box-shadow:var(--shadow-md)}
.card:active{cursor:grabbing}
.card.dragging{opacity:.45;transform:rotate(2deg) scale(.97)}
.card .card-top{display:flex;align-items:center;gap:var(--fib-8);margin-bottom:var(--fib-5)}
.card .name{font-weight:600;font-size:var(--fs-base);display:flex;align-items:center;gap:var(--fib-5);flex:1;min-width:0}
.card .name span.txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .ai{color:var(--primary-ink);font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:2px;
  background:var(--primary-soft);padding:1px 5px;border-radius:var(--radius-full)}
.card .meta{color:var(--text-muted);font-size:var(--fs-xs);margin-top:var(--fib-3);display:flex;align-items:center;gap:var(--fib-5)}
.card .meta i{font-size:10px}
.card .val{color:var(--primary-ink);font-weight:700;font-size:var(--fs-sm);margin-top:var(--fib-5);font-variant-numeric:tabular-nums}
.card .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--fib-8)}
.card .temp-pill{font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  padding:1px var(--fib-5);border-radius:var(--radius-full)}
.card .temp-frio{background:rgba(91,155,245,.16);color:var(--frio)}
.card .temp-morno{background:rgba(255,159,67,.16);color:var(--morno)}
.card .temp-quente{background:rgba(255,71,87,.16);color:var(--quente)}
.card .next-due{font-size:var(--fs-xs);color:var(--text-dim);display:flex;align-items:center;gap:var(--fib-3)}
.card .next-due.overdue{color:var(--danger)}

/* placeholder ao arrastar */
.drop-placeholder{height:55px;border:1.5px dashed rgba(var(--primary-rgb),.4);border-radius:var(--radius-sm);
  background:var(--primary-softer);margin-bottom:var(--fib-8)}

/* ============================================================================
   12. MODAIS / DRAWERS / DIALOG
   ========================================================================== */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);
  padding:var(--fib-21);animation:fadeIn var(--t-base) var(--ease)}
.modal{background:var(--dark-2);border:1px solid var(--border-mid);border-radius:var(--radius-lg);
  padding:var(--fib-34);width:min(94vw,521px);max-height:90vh;overflow:auto;
  box-shadow:var(--shadow-xl);animation:modalIn var(--t-base) var(--ease-bounce)}
.modal-lg{width:min(94vw,800px)}
.modal-sm{width:min(94vw,377px)}
.modal h3{margin-bottom:var(--fib-21);display:flex;align-items:center;gap:var(--fib-8)}
.modal .modal-close{position:absolute;top:var(--fib-21);right:var(--fib-21);
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:all var(--t-base) var(--ease)}
.modal .modal-close:hover{background:var(--dark-4);color:var(--text-white);transform:rotate(90deg)}
.modal-actions{display:flex;gap:var(--fib-13);justify-content:flex-end;margin-top:var(--fib-21);flex-wrap:wrap}
.modal-header{position:relative;margin:calc(var(--fib-34) * -1) calc(var(--fib-34) * -1) var(--fib-21);
  padding:var(--fib-21) var(--fib-34);border-bottom:1px solid var(--border-soft);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0}

/* drawer lateral */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);
  z-index:var(--z-modal);animation:fadeIn var(--t-base) var(--ease)}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(92vw,432px);background:var(--dark-2);
  border-left:1px solid var(--border-mid);box-shadow:var(--shadow-xl);z-index:var(--z-modal);
  display:flex;flex-direction:column;animation:drawerIn var(--t-base) var(--ease)}
.drawer-head{padding:var(--fib-21) var(--fib-21) var(--fib-13);border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13)}
.drawer-body{padding:var(--fib-21);overflow-y:auto;flex:1}
.drawer-foot{padding:var(--fib-13) var(--fib-21);border-top:1px solid var(--border-soft);display:flex;gap:var(--fib-8);justify-content:flex-end}

/* QR */
.qr-box{text-align:center;padding:var(--fib-21);animation:fadeIn var(--t-base) var(--ease)}
.qr-box img{width:233px;height:233px;background:#fff;border-radius:var(--radius-md);
  padding:var(--fib-8);box-shadow:var(--shadow-glow)}
.qr-box .qr-hint{margin-top:var(--fib-13);color:var(--text-muted);font-size:var(--fs-sm);max-width:266px;margin-left:auto;margin-right:auto}
.qr-steps{text-align:left;max-width:266px;margin:var(--fib-13) auto 0;display:flex;flex-direction:column;gap:var(--fib-8)}
.qr-steps li{display:flex;gap:var(--fib-8);align-items:flex-start;font-size:var(--fs-sm);color:var(--text-soft)}
.qr-steps li .n{width:21px;height:21px;border-radius:50%;background:var(--primary-soft);color:var(--primary-ink);
  font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}

/* ============================================================================
   13. TOASTS & NOTIFICAÇÕES
   ========================================================================== */
#toast-root{position:fixed;bottom:var(--fib-21);right:var(--fib-21);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--fib-8);max-width:340px}
.toast{display:flex;align-items:center;gap:var(--fib-13);background:var(--dark-3);
  border:1px solid var(--border-mid);border-left:3px solid var(--primary);color:var(--text-white);
  padding:var(--fib-13) var(--fib-21);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
  animation:toastIn var(--t-base) var(--ease-bounce);font-size:var(--fs-sm)}
.toast.leaving{animation:toastOut var(--t-base) var(--ease) forwards}
.toast .toast-icon{font-size:var(--fs-md);flex:none}
.toast .toast-msg{flex:1}
.toast .toast-x{color:var(--text-muted);cursor:pointer;font-size:var(--fs-xs)}
.toast .toast-x:hover{color:var(--text-white)}
.toast-success{border-left-color:var(--success)} .toast-success .toast-icon{color:var(--success)}
.toast-error{border-left-color:var(--danger)} .toast-error .toast-icon{color:var(--danger)}
.toast-info{border-left-color:var(--info)} .toast-info .toast-icon{color:var(--info)}
.toast-warning{border-left-color:var(--warning)} .toast-warning .toast-icon{color:var(--warning)}

/* sino de notificações */
.notif-btn{position:relative;width:38px;height:38px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:var(--dark-3);
  transition:all var(--t-base) var(--ease)}
.notif-btn:hover{color:var(--text-white);background:var(--dark-4)}
.notif-btn .notif-count{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;
  padding:0 4px;border-radius:var(--radius-full);background:var(--danger);color:#fff;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--dark-1)}

/* ============================================================================
   14. TOOLTIPS
   ========================================================================== */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--dark-5);color:var(--text-white);
  padding:var(--fib-5) var(--fib-8);border-radius:var(--radius-xs);font-size:var(--fs-xs);
  white-space:nowrap;opacity:0;pointer-events:none;transition:all var(--t-base) var(--ease);
  z-index:var(--z-tooltip);box-shadow:var(--shadow-md);border:1px solid var(--border-mid)}
[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
[data-tip-bottom]::after{bottom:auto;top:calc(100% + 8px)}

/* ============================================================================
   15. SKELETON & LOADERS
   ========================================================================== */
.skeleton{background:linear-gradient(90deg,var(--dark-3) 25%,var(--dark-4) 37%,var(--dark-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-xs)}
.sk-line{height:13px;margin-bottom:var(--fib-8);border-radius:var(--radius-full)}
.sk-line.w-40{width:40%}.sk-line.w-60{width:60%}.sk-line.w-80{width:80%}
.sk-card{height:89px;border-radius:var(--radius-sm);margin-bottom:var(--fib-8)}
.sk-circle{width:38px;height:38px;border-radius:50%}
.sk-stat{height:89px;border-radius:var(--radius-md)}

.spinner{width:34px;height:34px;border:3px solid var(--dark-4);border-top-color:var(--primary-ink);
  border-radius:50%;animation:spin .7s linear infinite}
.spinner-sm{width:18px;height:18px;border-width:2px}
.loading-overlay{position:absolute;inset:0;background:rgba(13,13,13,.6);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:5;border-radius:inherit}
.loading-inline{display:flex;align-items:center;gap:var(--fib-13);color:var(--text-muted);padding:var(--fib-21);justify-content:center}

.progress{height:6px;background:var(--dark-4);border-radius:var(--radius-full);overflow:hidden}
.progress .bar{height:100%;background:var(--grad-lime-teal);border-radius:var(--radius-full);transition:width var(--t-slow) var(--ease)}

/* ============================================================================
   16. EMPTY STATES
   ========================================================================== */
.empty{text-align:center;padding:var(--fib-55) var(--fib-21);color:var(--text-muted);animation:fadeIn var(--t-base) var(--ease)}
.empty .empty-icon{width:89px;height:89px;margin:0 auto var(--fib-21);border-radius:50%;
  background:var(--dark-3);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xl);color:var(--text-dim);border:1px solid var(--border-soft)}
.empty h4{color:var(--text-soft);margin-bottom:var(--fib-5)}
.empty p{font-size:var(--fs-sm);max-width:340px;margin:0 auto var(--fib-21)}

/* ============================================================================
   17. SIDEBAR & NAVEGAÇÃO
   ========================================================================== */
.sidebar{width:var(--sidebar-w);background:var(--dark-2);border-right:1px solid var(--border-dark);
  padding:var(--fib-21) var(--fib-13);display:flex;flex-direction:column;gap:var(--fib-3);
  position:sticky;top:0;height:100vh;flex:none;transition:width var(--t-base) var(--ease);z-index:var(--z-sticky)}
.sidebar .brand{display:flex;align-items:center;gap:var(--fib-8);padding:var(--fib-5) var(--fib-8) var(--fib-21);margin-bottom:var(--fib-8)}
.sidebar .brand img{height:28px}
.sidebar .brand .wordmark{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--text-white)}
.sidebar .brand .wordmark b{color:var(--primary-ink);font-weight:800}
.login-logo{font-size:28px;font-weight:800;letter-spacing:-.03em;margin-bottom:var(--fib-5)}
.sidebar .nav-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-dim);padding:var(--fib-13) var(--fib-13) var(--fib-5);font-weight:600}
.nav-item{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13);border-radius:var(--radius-sm);
  color:var(--text-muted);font-weight:500;font-size:var(--fs-base);position:relative;
  transition:all var(--t-base) var(--ease);cursor:pointer}
.nav-item i{width:21px;text-align:center;font-size:var(--fs-md);transition:transform var(--t-base) var(--ease)}
.nav-item .nav-text{flex:1}
.nav-item .nav-badge{background:var(--danger);color:#fff;font-size:9px;font-weight:700;
  min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}
.nav-item:hover{background:var(--dark-3);color:var(--text-white)}
.nav-item:hover i{transform:scale(1.1)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-ink)}
.nav-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:21px;background:var(--primary);border-radius:var(--radius-full)}
.sidebar .user-box{border-top:1px solid var(--border-soft);padding:var(--fib-13) var(--fib-8) 0;margin-top:var(--fib-8)}
.sidebar .user-box .u-info{display:flex;align-items:center;gap:var(--fib-8);margin-bottom:var(--fib-8)}
.sidebar .user-box b{color:var(--text-white);font-size:var(--fs-sm);display:block;line-height:1.3}
.sidebar .user-box span{color:var(--text-muted);font-size:var(--fs-xs)}
.sidebar .logout-link{display:flex;align-items:center;gap:var(--fib-8);color:var(--text-muted);
  font-size:var(--fs-sm);padding:var(--fib-8);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--t-base) var(--ease)}
.sidebar .logout-link:hover{background:rgba(var(--danger-rgb),.1);color:var(--danger)}

.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:calc(var(--z-drawer) - 1);
  opacity:0;pointer-events:none;transition:opacity var(--t-base) var(--ease)}
.sidebar-overlay.show{opacity:1;pointer-events:auto}

/* ============================================================================
   18. TOPBAR & BUSCA
   ========================================================================== */
.main{flex:1;padding:var(--fib-34);overflow:auto;min-width:0;animation:fadeIn var(--t-base) var(--ease)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--fib-34);gap:var(--fib-21);flex-wrap:wrap}
.topbar .topbar-left{display:flex;align-items:center;gap:var(--fib-13);min-width:0}
.topbar h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.03em}
.topbar .topbar-right{display:flex;align-items:center;gap:var(--fib-13)}
.topbar-sub{color:var(--text-muted);font-size:var(--fs-sm);margin-top:2px}

.wa-badge{display:inline-flex;align-items:center;gap:var(--fib-8);font-size:var(--fs-sm);
  padding:var(--fib-8) var(--fib-13);border-radius:var(--radius-full);border:1px solid var(--border-mid);
  background:var(--dark-3);transition:all var(--t-base) var(--ease)}
.wa-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.wa-badge.connected{color:var(--success);border-color:rgba(var(--success-rgb),.4)}
.wa-badge.connected .dot{animation:pulseDot 1.6s ease-in-out infinite}
.wa-badge.disconnected{color:var(--text-muted)}
.wa-badge.qr{color:var(--warning);border-color:rgba(var(--warning-rgb),.4)}
.menu-toggle{display:none;background:var(--dark-3);width:38px;height:38px;border-radius:var(--radius-sm);
  align-items:center;justify-content:center;font-size:var(--fs-md);color:var(--text-white)}

/* barra de filtros */
.toolbar{display:flex;align-items:center;gap:var(--fib-13);margin-bottom:var(--fib-21);flex-wrap:wrap}
.toolbar .toolbar-grow{flex:1;min-width:144px}
.filter-pills{display:flex;gap:var(--fib-5);flex-wrap:wrap}
.filter-pill{padding:var(--fib-5) var(--fib-13);border-radius:var(--radius-full);font-size:var(--fs-sm);
  background:var(--dark-3);border:1px solid var(--border-mid);color:var(--text-muted);cursor:pointer;transition:all var(--t-base) var(--ease)}
.filter-pill:hover{color:var(--text-white);border-color:var(--border-strong)}
.filter-pill.active{background:var(--primary-soft);border-color:var(--primary-ink);color:var(--primary-ink)}

/* ============================================================================
   19. DASHBOARD
   ========================================================================== */
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--fib-13);margin-bottom:var(--fib-21)}
.stat{background:var(--grad-card);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:var(--fib-21);position:relative;overflow:hidden;transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.stat:hover{transform:translateY(-3px);border-color:rgba(var(--primary-rgb),.25)}
.stat::after{content:'';position:absolute;top:-34px;right:-34px;width:89px;height:89px;
  background:radial-gradient(circle,var(--accent-color,var(--primary-softer)),transparent 70%);pointer-events:none}
.stat .stat-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);margin-bottom:var(--fib-13);background:var(--primary-soft);color:var(--primary-ink)}
.stat .v{font-size:var(--fs-xl);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat .l{color:var(--text-muted);font-size:var(--fs-sm);margin-top:var(--fib-5)}
.stat .trend{font-size:var(--fs-xs);margin-top:var(--fib-8);display:inline-flex;align-items:center;gap:var(--fib-3)}
.stat .trend.up{color:var(--success)} .stat .trend.down{color:var(--danger)}
.stat.accent-blue{--accent-color:var(--secondary-soft)} .stat.accent-blue .stat-icon{background:var(--secondary-soft);color:var(--info)}
.stat.accent-pink .stat-icon{background:rgba(var(--accent-rgb),.14);color:var(--accent)}
.stat.accent-green .stat-icon{background:rgba(var(--success-rgb),.14);color:var(--success)}
.stat.accent-orange .stat-icon{background:rgba(var(--warning-rgb),.14);color:var(--warning)}

/* mini-bar chart (funil) */
.funnel-bars{display:flex;flex-direction:column;gap:var(--fib-13)}
.funnel-row{display:grid;grid-template-columns:89px 1fr 34px;align-items:center;gap:var(--fib-13)}
.funnel-row .fr-label{font-size:var(--fs-sm);color:var(--text-soft)}
.funnel-row .fr-track{height:21px;background:var(--dark-3);border-radius:var(--radius-full);overflow:hidden}
.funnel-row .fr-bar{height:100%;border-radius:var(--radius-full);transition:width var(--t-slow) var(--ease);min-width:3px}
.funnel-row .fr-val{font-size:var(--fs-sm);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

.rank-list{display:flex;flex-direction:column;gap:var(--fib-8)}
.rank-item{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-8);border-radius:var(--radius-sm);transition:background var(--t-fast) var(--ease)}
.rank-item:hover{background:var(--dark-3)}
.rank-item .rank-n{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--dark-4);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);flex:none}
.rank-item:nth-child(1) .rank-n{background:var(--primary-soft);color:var(--primary-ink)}
.rank-item .rank-name{flex:1;font-size:var(--fs-sm)}
.rank-item .rank-count{font-weight:700;color:var(--primary-ink);font-variant-numeric:tabular-nums}

/* ============================================================================
   20. SCROLLBARS
   ========================================================================== */
*{scrollbar-width:thin;scrollbar-color:var(--dark-5) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--dark-5);border-radius:var(--radius-full);border:2px solid var(--dark-1)}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}

/* ============================================================================
   21. ANIMAÇÕES (keyframes)
   ========================================================================== */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(21px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(34px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(34px) scale(.9)}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}50%{box-shadow:0 0 0 4px transparent;opacity:.6}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(21px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 21px rgba(var(--primary-rgb),.2)}50%{box-shadow:0 0 34px rgba(var(--primary-rgb),.4)}}
.animate-float{animation:float 3s ease-in-out infinite}
.animate-pulse{animation:pulse 2s ease-in-out infinite}
.animate-slideup{animation:slideUp var(--t-slow) var(--ease)}

/* ============================================================================
   22. ACESSIBILIDADE
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (prefers-contrast:more){
  :root{--border-dark:#555;--border-mid:#666;--text-muted:#c5c5c5}
}

/* ============================================================================
   23. LOGIN
   ========================================================================== */
#login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--fib-21);
  background:radial-gradient(circle at 72% 18%,rgba(var(--primary-rgb),.1),transparent 42%),
             radial-gradient(circle at 20% 82%,rgba(var(--secondary-rgb),.1),transparent 42%),
             var(--black);position:relative;overflow:hidden}
#login-view::before{content:'';position:absolute;width:377px;height:377px;border-radius:50%;
  background:radial-gradient(circle,var(--primary-softer),transparent 70%);
  top:-89px;left:-89px;filter:blur(34px);animation:float 8s ease-in-out infinite}
.login-card{background:var(--dark-2);border:1px solid var(--border-mid);border-radius:var(--radius-lg);
  padding:var(--fib-55) var(--fib-34);width:min(92vw,398px);box-shadow:var(--shadow-glow),var(--shadow-xl);
  position:relative;z-index:1;animation:slideUp var(--t-slow) var(--ease)}
.login-card img{height:32px;margin-bottom:var(--fib-34)}
.login-card h1{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--fib-3)}
.login-card p.sub{color:var(--text-muted);margin-bottom:var(--fib-34);font-size:var(--fs-sm)}
.login-card .field{margin-bottom:var(--fib-21)}
.login-card .btn{width:100%;margin-top:var(--fib-8)}
.err{color:var(--danger);font-size:var(--fs-sm);margin-top:var(--fib-13);min-height:18px;
  display:flex;align-items:center;gap:var(--fib-5)}
.err:not(:empty)::before{content:'\f071';font-family:'Font Awesome 6 Free';font-weight:900;font-size:var(--fs-xs)}

/* APP SHELL */
#app-view{display:flex;min-height:100vh}

/* ============================================================================
   24. RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .main{padding:var(--fib-21)}
  .grid-stats{grid-template-columns:repeat(auto-fit,minmax(144px,1fr))}
}
@media (max-width:768px){
  .sidebar{position:fixed;left:calc(var(--sidebar-w) * -1);top:0;z-index:var(--z-drawer);
    box-shadow:var(--shadow-xl);transition:left var(--t-base) var(--ease)}
  .sidebar.open{left:0}
  .menu-toggle{display:flex}
  .topbar h2{font-size:var(--fs-lg)}
  .topbar{margin-bottom:var(--fib-21)}
  .main{padding:var(--fib-13)}
  .column{min-width:80vw;width:80vw}
  .modal{padding:var(--fib-21)}
  .modal-header{margin:calc(var(--fib-21) * -1) calc(var(--fib-21) * -1) var(--fib-21);padding:var(--fib-13) var(--fib-21)}
  .search-box{max-width:none}
  .topbar-right .wa-badge .wa-label{display:none}
}
@media (max-width:480px){
  .main{padding:var(--fib-8)}
  .stat .v{font-size:var(--fs-lg)}
  .grid-stats{grid-template-columns:1fr 1fr;gap:var(--fib-8)}
  .login-card{padding:var(--fib-34) var(--fib-21)}
  .btn{padding:var(--fib-13) var(--fib-13)}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}
  .funnel-row{grid-template-columns:68px 1fr 26px}
}
@media (max-width:360px){
  .grid-stats{grid-template-columns:1fr}
  .topbar h2{font-size:var(--fs-md)}
  .column{min-width:88vw;width:88vw}
}

/* ============================================================================
   25. PRINT
   ========================================================================== */
@media print{
  .sidebar,.topbar-right,.menu-toggle,.fab,#toast-root,.btn{display:none!important}
  body{background:#fff;color:#000}
  .panel,.stat{border:1px solid #ccc;box-shadow:none;background:#fff;color:#000;break-inside:avoid}
}