/* ============================================================================
   emanuelconectacrm — Design System · Camada 2 (utilitários + componentes)
   v2.0.0 — complementa styles.css. Mantém Fibonacci + identidade Riwer.
   ----------------------------------------------------------------------------
   Índice:
   A. Utilitários de espaçamento (Fibonacci, todas as direções)
   B. Utilitários de display/posição/largura/altura
   C. Utilitários de cor/fundo/borda/raio/sombra
   D. Banners & alerts                 K. Stepper
   E. Tabs                             L. Timeline
   F. Dropdown / menu                  M. Tooltip rich / popover
   G. Breadcrumb                       N. Command palette (Ctrl+K)
   H. Paginação                        O. Onboarding checklist
   I. Accordion                        P. Calendário / date
   J. Kbd / atalhos                    Q. Misc (rating, swatch, meter, etc.)
   ========================================================================== */

/* ============================================================================
   A. ESPAÇAMENTO — Fibonacci em todas as direções
   ========================================================================== */
.m-0{margin:0}.m-3{margin:var(--fib-3)}.m-5{margin:var(--fib-5)}.m-8{margin:var(--fib-8)}
.m-13{margin:var(--fib-13)}.m-21{margin:var(--fib-21)}.m-34{margin:var(--fib-34)}
.mx-auto{margin-left:auto;margin-right:auto}
.mx-5{margin-left:var(--fib-5);margin-right:var(--fib-5)}
.mx-8{margin-left:var(--fib-8);margin-right:var(--fib-8)}
.mx-13{margin-left:var(--fib-13);margin-right:var(--fib-13)}
.my-8{margin-top:var(--fib-8);margin-bottom:var(--fib-8)}
.my-13{margin-top:var(--fib-13);margin-bottom:var(--fib-13)}
.my-21{margin-top:var(--fib-21);margin-bottom:var(--fib-21)}
.ml-5{margin-left:var(--fib-5)}.ml-8{margin-left:var(--fib-8)}.ml-13{margin-left:var(--fib-13)}
.mr-5{margin-right:var(--fib-5)}.mr-8{margin-right:var(--fib-8)}.mr-13{margin-right:var(--fib-13)}
.mt-0{margin-top:0}.mt-3{margin-top:var(--fib-3)}.mt-55{margin-top:var(--fib-55)}
.mb-0{margin-bottom:0}.mb-3{margin-bottom:var(--fib-3)}.mb-55{margin-bottom:var(--fib-55)}
.p-0{padding:0}.p-3{padding:var(--fib-3)}.p-5{padding:var(--fib-5)}.p-8{padding:var(--fib-8)}
.p-55{padding:var(--fib-55)}
.px-8{padding-left:var(--fib-8);padding-right:var(--fib-8)}
.px-13{padding-left:var(--fib-13);padding-right:var(--fib-13)}
.px-21{padding-left:var(--fib-21);padding-right:var(--fib-21)}
.py-5{padding-top:var(--fib-5);padding-bottom:var(--fib-5)}
.py-8{padding-top:var(--fib-8);padding-bottom:var(--fib-8)}
.py-13{padding-top:var(--fib-13);padding-bottom:var(--fib-13)}
.py-21{padding-top:var(--fib-21);padding-bottom:var(--fib-21)}
.pt-8{padding-top:var(--fib-8)}.pt-13{padding-top:var(--fib-13)}.pt-21{padding-top:var(--fib-21)}
.pb-8{padding-bottom:var(--fib-8)}.pb-13{padding-bottom:var(--fib-13)}.pb-21{padding-bottom:var(--fib-21)}
.gap-1{gap:var(--fib-1)}.gap-2{gap:var(--fib-2)}.gap-55{gap:var(--fib-55)}

/* ============================================================================
   B. DISPLAY / POSIÇÃO / DIMENSÕES
   ========================================================================== */
.block{display:block}.inline{display:inline}.inline-block{display:inline-block}
.d-none{display:none}.d-flex{display:flex}.d-grid{display:grid}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
.w-auto{width:auto}.w-half{width:50%}.w-fit{width:fit-content}
.max-w-sm{max-width:340px}.max-w-md{max-width:521px}.max-w-lg{max-width:800px}
.h-auto{height:auto}.min-w-0{min-width:0}
.flex-row{flex-direction:row}.flex-col-reverse{flex-direction:column-reverse}
.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-center{align-self:center}
.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}
.flex-shrink-0{flex-shrink:0}.order-1{order:1}.order-2{order:2}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:16/9}
.pointer{cursor:pointer}.cursor-default{cursor:default}.cursor-grab{cursor:grab}

/* ============================================================================
   C. COR / FUNDO / BORDA / RAIO / SOMBRA
   ========================================================================== */
.bg-dark-1{background:var(--dark-1)}.bg-dark-2{background:var(--dark-2)}.bg-dark-3{background:var(--dark-3)}
.bg-dark-4{background:var(--dark-4)}.bg-surface{background:var(--surface)}
.bg-primary{background:var(--primary);color:var(--text-on-lime)}
.bg-primary-soft{background:var(--primary-soft)}.bg-secondary-soft{background:var(--secondary-soft)}
.bg-grad-primary{background:var(--grad-primary)}.bg-grad-card{background:var(--grad-card)}
.bg-transparent{background:transparent}
.border{border:1px solid var(--border-mid)}.border-soft{border:1px solid var(--border-soft)}
.border-0{border:0}.border-t{border-top:1px solid var(--border-soft)}.border-b{border-bottom:1px solid var(--border-soft)}
.border-primary{border-color:var(--primary-ink)}.border-danger{border-color:var(--danger)}
.rounded-xs{border-radius:var(--radius-xs)}.rounded-sm{border-radius:var(--radius-sm)}
.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}
.rounded-full{border-radius:var(--radius-full)}.rounded-0{border-radius:0}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-glow{box-shadow:var(--shadow-glow)}
.opacity-50{opacity:.5}.opacity-70{opacity:.7}

/* ============================================================================
   D. BANNERS & ALERTS
   ========================================================================== */
.alert{display:flex;align-items:flex-start;gap:var(--fib-13);padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius-md);border:1px solid var(--border-mid);background:var(--dark-3);
  font-size:var(--fs-sm);margin-bottom:var(--fib-13)}
.alert .alert-icon{font-size:var(--fs-md);flex:none;margin-top:1px}
.alert .alert-body{flex:1}
.alert .alert-title{font-weight:600;margin-bottom:2px}
.alert .alert-x{color:var(--text-muted);cursor:pointer;font-size:var(--fs-sm)}
.alert .alert-x:hover{color:var(--text-white)}
.alert-info{border-color:rgba(var(--info-rgb),.3);background:rgba(var(--info-rgb),.07)} .alert-info .alert-icon{color:var(--info)}
.alert-success{border-color:rgba(var(--success-rgb),.3);background:rgba(var(--success-rgb),.07)} .alert-success .alert-icon{color:var(--success)}
.alert-warning{border-color:rgba(var(--warning-rgb),.3);background:rgba(var(--warning-rgb),.07)} .alert-warning .alert-icon{color:var(--warning)}
.alert-danger{border-color:rgba(var(--danger-rgb),.3);background:rgba(var(--danger-rgb),.07)} .alert-danger .alert-icon{color:var(--danger)}
.alert-primary{border-color:rgba(var(--primary-rgb),.3);background:var(--primary-softer)} .alert-primary .alert-icon{color:var(--primary-ink)}

.banner{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13) var(--fib-21);
  border-radius:var(--radius-md);background:var(--grad-card);border:1px solid var(--border-soft);
  margin-bottom:var(--fib-21);position:relative;overflow:hidden}
.banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-lime-teal)}
.banner .banner-content{flex:1}
.banner .banner-actions{display:flex;gap:var(--fib-8)}

/* ============================================================================
   E. TABS
   ========================================================================== */
.tabs{display:flex;gap:var(--fib-3);border-bottom:1px solid var(--border-soft);margin-bottom:var(--fib-21);overflow-x:auto}
.tab{padding:var(--fib-13) var(--fib-21);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all var(--t-base) var(--ease);margin-bottom:-1px}
.tab:hover{color:var(--text-white)}
.tab.active{color:var(--primary-ink);border-bottom-color:var(--primary-ink)}
.tab .tab-count{margin-left:var(--fib-5);background:var(--dark-4);border-radius:var(--radius-full);padding:0 6px;font-size:var(--fs-xs)}
.tab-panel{animation:fadeIn var(--t-base) var(--ease)}
.tab-panel.hidden{display:none}

/* pill tabs */
.tabs-pill{display:inline-flex;gap:var(--fib-3);background:var(--dark-3);padding:var(--fib-3);border-radius:var(--radius-full);border:1px solid var(--border-mid)}
.tabs-pill .tab{padding:var(--fib-5) var(--fib-13);border:0;border-radius:var(--radius-full);margin:0}
.tabs-pill .tab.active{background:var(--primary);color:var(--text-on-lime)}

/* ============================================================================
   F. DROPDOWN / MENU
   ========================================================================== */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:178px;background:var(--dark-2);
  border:1px solid var(--border-mid);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:var(--fib-5);z-index:var(--z-tooltip);animation:menuIn var(--t-base) var(--ease);transform-origin:top right}
.dropdown-menu.left{right:auto;left:0;transform-origin:top left}
.dropdown-item{display:flex;align-items:center;gap:var(--fib-8);padding:var(--fib-8) var(--fib-13);
  border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text-soft);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.dropdown-item i{width:18px;text-align:center;color:var(--text-muted)}
.dropdown-item:hover{background:var(--dark-3);color:var(--text-white)}
.dropdown-item:hover i{color:var(--primary-ink)}
.dropdown-item.danger:hover{background:rgba(var(--danger-rgb),.1);color:var(--danger)}
.dropdown-item.danger:hover i{color:var(--danger)}
.dropdown-sep{height:1px;background:var(--border-soft);margin:var(--fib-5) 0}
.dropdown-label{padding:var(--fib-5) var(--fib-13);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
@keyframes menuIn{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ============================================================================
   G. BREADCRUMB
   ========================================================================== */
.breadcrumb{display:flex;align-items:center;gap:var(--fib-8);font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--fib-13)}
.breadcrumb a{color:var(--text-muted)}.breadcrumb a:hover{color:var(--primary-ink)}
.breadcrumb .sep{color:var(--text-dim);font-size:var(--fs-xs)}
.breadcrumb .current{color:var(--text-white);font-weight:500}

/* ============================================================================
   H. PAGINAÇÃO
   ========================================================================== */
.pagination{display:flex;align-items:center;gap:var(--fib-5);justify-content:center;margin-top:var(--fib-21)}
.pagination .page{min-width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);color:var(--text-muted);background:var(--dark-3);border:1px solid var(--border-mid);cursor:pointer;transition:all var(--t-base) var(--ease)}
.pagination .page:hover{border-color:var(--primary-ink);color:var(--primary-ink)}
.pagination .page.active{background:var(--primary);color:var(--text-on-lime);border-color:var(--primary-ink)}
.pagination .page.disabled{opacity:.4;pointer-events:none}

/* ============================================================================
   I. ACCORDION
   ========================================================================== */
.accordion{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;margin-bottom:var(--fib-13)}
.accordion-item + .accordion-item{border-top:1px solid var(--border-soft)}
.accordion-head{display:flex;align-items:center;justify-content:space-between;gap:var(--fib-13);
  padding:var(--fib-13) var(--fib-21);cursor:pointer;font-weight:500;transition:background var(--t-fast) var(--ease)}
.accordion-head:hover{background:var(--dark-3)}
.accordion-head .chevron{transition:transform var(--t-base) var(--ease);color:var(--text-muted)}
.accordion-item.open .accordion-head .chevron{transform:rotate(180deg)}
.accordion-body{max-height:0;overflow:hidden;transition:max-height var(--t-base) var(--ease);padding:0 var(--fib-21)}
.accordion-item.open .accordion-body{max-height:610px;padding:var(--fib-13) var(--fib-21) var(--fib-21)}

/* ============================================================================
   J. KBD / atalhos
   ========================================================================== */
kbd,.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 var(--fib-5);
  background:var(--dark-4);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--radius-xs);
  font-family:var(--font);font-size:var(--fs-xs);font-weight:600;color:var(--text-soft);line-height:1}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:var(--fib-8) 0;font-size:var(--fs-sm)}
.shortcut-row .keys{display:flex;gap:var(--fib-3)}

/* ============================================================================
   K. STEPPER
   ========================================================================== */
.stepper{display:flex;align-items:center;gap:var(--fib-8);margin-bottom:var(--fib-21)}
.stepper .step{display:flex;align-items:center;gap:var(--fib-8);flex:1}
.stepper .step-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--dark-4);color:var(--text-muted);font-weight:700;font-size:var(--fs-sm);flex:none;border:2px solid transparent;transition:all var(--t-base) var(--ease)}
.stepper .step-line{flex:1;height:2px;background:var(--border-mid)}
.stepper .step.done .step-dot{background:var(--primary);color:var(--text-on-lime)}
.stepper .step.active .step-dot{border-color:var(--primary-ink);color:var(--primary-ink);background:var(--primary-soft)}
.stepper .step.done .step-line{background:var(--primary)}
.stepper .step-label{font-size:var(--fs-sm);color:var(--text-muted)}
.stepper .step.active .step-label,.stepper .step.done .step-label{color:var(--text-white)}

/* ============================================================================
   L. TIMELINE
   ========================================================================== */
.timeline{position:relative;padding-left:var(--fib-21)}
.timeline::before{content:'';position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--border-mid)}
.timeline-item{position:relative;padding-bottom:var(--fib-21)}
.timeline-item::before{content:'';position:absolute;left:calc(var(--fib-21) * -1 + 1px);top:3px;width:11px;height:11px;
  border-radius:50%;background:var(--dark-2);border:2px solid var(--primary)}
.timeline-item.ai::before{border-color:var(--secondary)}
.timeline-item .tl-time{font-size:var(--fs-xs);color:var(--text-dim)}
.timeline-item .tl-body{font-size:var(--fs-sm);margin-top:2px}

/* ============================================================================
   M. POPOVER
   ========================================================================== */
.popover{position:absolute;background:var(--dark-2);border:1px solid var(--border-mid);border-radius:var(--radius-md);
  padding:var(--fib-13);box-shadow:var(--shadow-lg);z-index:var(--z-tooltip);width:233px;animation:menuIn var(--t-base) var(--ease)}
.popover-arrow{position:absolute;width:10px;height:10px;background:var(--dark-2);border-left:1px solid var(--border-mid);
  border-top:1px solid var(--border-mid);transform:rotate(45deg)}

/* ============================================================================
   N. COMMAND PALETTE (Ctrl+K)
   ========================================================================== */
.cmdk-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding-top:13vh;animation:fadeIn var(--t-fast) var(--ease)}
.cmdk{width:min(94vw,521px);background:var(--dark-2);border:1px solid var(--border-mid);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);overflow:hidden;animation:modalIn var(--t-base) var(--ease-bounce)}
.cmdk-input-wrap{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-21);border-bottom:1px solid var(--border-soft)}
.cmdk-input-wrap i{color:var(--text-muted)}
.cmdk-input-wrap input{border:0;background:transparent;padding:0;font-size:var(--fs-md)}
.cmdk-input-wrap input:focus{box-shadow:none}
.cmdk-list{max-height:340px;overflow-y:auto;padding:var(--fib-8)}
.cmdk-group-label{padding:var(--fib-8) var(--fib-13) var(--fib-5);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}
.cmdk-item{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm)}
.cmdk-item i{width:21px;text-align:center;color:var(--text-muted)}
.cmdk-item .cmdk-hint{margin-left:auto;color:var(--text-dim);font-size:var(--fs-xs)}
.cmdk-item.active,.cmdk-item:hover{background:var(--primary-soft);color:var(--primary-ink)}
.cmdk-item.active i,.cmdk-item:hover i{color:var(--primary-ink)}
.cmdk-foot{padding:var(--fib-8) var(--fib-21);border-top:1px solid var(--border-soft);display:flex;gap:var(--fib-13);
  font-size:var(--fs-xs);color:var(--text-dim);align-items:center}
.cmdk-empty{padding:var(--fib-34);text-align:center;color:var(--text-muted);font-size:var(--fs-sm)}

/* ============================================================================
   O. ONBOARDING CHECKLIST
   ========================================================================== */
.checklist{display:flex;flex-direction:column;gap:var(--fib-8)}
.checklist-item{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13);border-radius:var(--radius-sm);
  background:var(--dark-3);border:1px solid var(--border-soft);transition:all var(--t-base) var(--ease);cursor:pointer}
.checklist-item:hover{border-color:var(--border-strong)}
.checklist-item .ck-box{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-strong);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--text-on-lime);transition:all var(--t-base) var(--ease)}
.checklist-item.done .ck-box{background:var(--primary);border-color:var(--primary-ink)}
.checklist-item.done .ck-title{color:var(--text-dim);text-decoration:line-through}
.checklist-item .ck-title{font-weight:500;font-size:var(--fs-sm)}
.checklist-item .ck-desc{font-size:var(--fs-xs);color:var(--text-muted)}
.checklist-item .ck-go{margin-left:auto;color:var(--text-dim)}
.onboard-progress{display:flex;align-items:center;gap:var(--fib-13);margin-bottom:var(--fib-13)}
.onboard-progress .progress{flex:1}

/* ============================================================================
   P. CALENDÁRIO / DATE
   ========================================================================== */
.calendar{background:var(--dark-3);border:1px solid var(--border-mid);border-radius:var(--radius-md);padding:var(--fib-13);width:266px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--fib-8)}
.cal-head .cal-nav{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.cal-head .cal-nav:hover{background:var(--dark-4);color:var(--text-white)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-grid .dow{font-size:var(--fs-xs);color:var(--text-dim);text-align:center;padding:var(--fib-5) 0}
.cal-grid .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);
  border-radius:var(--radius-sm);cursor:pointer;transition:all var(--t-fast) var(--ease)}
.cal-grid .day:hover{background:var(--dark-4)}
.cal-grid .day.today{border:1px solid var(--primary);color:var(--primary-ink)}
.cal-grid .day.selected{background:var(--primary);color:var(--text-on-lime)}
.cal-grid .day.muted{color:var(--text-dim);opacity:.5}
.cal-grid .day.has-event{position:relative}
.cal-grid .day.has-event::after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--secondary)}

/* ============================================================================
   Q. MISC — rating, swatch, meter, divider-text, list-group, kanban-mini
   ========================================================================== */
.rating{display:inline-flex;gap:2px;color:var(--warning)}
.rating .star{cursor:pointer;font-size:var(--fs-md)}
.rating .star.empty{color:var(--dark-5)}

.swatch{width:21px;height:21px;border-radius:var(--radius-xs);border:1px solid var(--border-soft);display:inline-block}

.meter{height:8px;background:var(--dark-4);border-radius:var(--radius-full);overflow:hidden}
.meter .meter-fill{height:100%;border-radius:var(--radius-full);transition:width var(--t-slow) var(--ease)}
.meter.lime .meter-fill{background:var(--grad-lime-teal)}
.meter.blue .meter-fill{background:var(--secondary)}
.meter.warn .meter-fill{background:var(--warning)}

.divider-text{display:flex;align-items:center;gap:var(--fib-13);color:var(--text-dim);font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.08em;margin:var(--fib-21) 0}
.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--border-soft)}

.list-group{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden}
.list-group-item{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13) var(--fib-21);
  transition:background var(--t-fast) var(--ease)}
.list-group-item + .list-group-item{border-top:1px solid var(--border-soft)}
.list-group-item:hover{background:var(--dark-3)}

/* badge "novo" pulsante */
.pulse-badge{position:relative}
.pulse-badge::after{content:'';position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;
  background:var(--primary);box-shadow:0 0 0 0 rgba(var(--primary-rgb),.6);animation:pulseDot 1.6s ease-in-out infinite}

/* card de KPI compacto */
.kpi-mini{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13);background:var(--dark-3);
  border-radius:var(--radius-sm);border:1px solid var(--border-soft)}
.kpi-mini .kpi-ico{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-ink);flex:none}
.kpi-mini .kpi-v{font-weight:700;font-size:var(--fs-md)}
.kpi-mini .kpi-l{font-size:var(--fs-xs);color:var(--text-muted)}

/* densidade compacta (toggle) */
body.density-compact .card{padding:var(--fib-8)}
body.density-compact th,body.density-compact td{padding:var(--fib-8)}
body.density-compact .panel{padding:var(--fib-13)}
body.density-compact .column{min-width:233px;width:233px}

/* tooltip de ajuda inline */
.help-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--dark-4);color:var(--text-muted);font-size:10px;cursor:help;margin-left:var(--fib-5)}
.help-dot:hover{background:var(--primary-soft);color:var(--primary-ink)}

/* skeleton variantes extra */
.sk-avatar-row{display:flex;align-items:center;gap:var(--fib-13);margin-bottom:var(--fib-13)}

/* estado vazio compacto inline */
.empty-inline{text-align:center;padding:var(--fib-34) var(--fib-21);color:var(--text-muted);font-size:var(--fs-sm)}
.empty-inline i{font-size:var(--fs-xl);color:var(--text-dim);display:block;margin-bottom:var(--fib-13)}

/* responsivo extra */
@media (max-width:768px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .cmdk-bg{padding-top:8vh}
  .dropdown-menu{position:fixed;left:var(--fib-13);right:var(--fib-13);top:auto;bottom:var(--fib-13);min-width:0}
}

/* ============================================================================
   R. FORM LAYOUTS — grupos, grid, inline, addon, range
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-13)}
.form-grid .span-2{grid-column:1 / -1}
.form-row{display:flex;gap:var(--fib-13);align-items:flex-end}
.form-row > .field{flex:1;margin-bottom:0}
.input-group{display:flex;align-items:stretch}
.input-group input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .addon{display:flex;align-items:center;padding:0 var(--fib-13);background:var(--dark-4);
  border:1px solid var(--border-mid);border-left:0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-muted);font-size:var(--fs-sm)}
.input-group.prefix .addon{border-left:1px solid var(--border-mid);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group.prefix input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* range slider estilizado */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--radius-full);
  background:var(--dark-4);padding:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--primary);box-shadow:var(--shadow-glow);transition:transform var(--t-fast) var(--ease)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--primary)}

/* file drop */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--fib-34);
  text-align:center;color:var(--text-muted);transition:all var(--t-base) var(--ease);cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--primary-ink);background:var(--primary-softer);color:var(--primary-ink)}
.dropzone i{font-size:var(--fs-xl);display:block;margin-bottom:var(--fib-8)}

/* ============================================================================
   S. DATA-VIZ — sparkline, donut, bar-mini, heat
   ========================================================================== */
.sparkline{display:flex;align-items:flex-end;gap:2px;height:34px}
.sparkline .spark-bar{flex:1;background:var(--grad-lime-teal);border-radius:2px 2px 0 0;min-height:3px;
  transition:height var(--t-slow) var(--ease);opacity:.85}
.sparkline .spark-bar:hover{opacity:1}

.donut{position:relative;width:144px;height:144px;border-radius:50%;
  background:conic-gradient(var(--primary) var(--p,0%),var(--dark-4) 0)}
.donut::before{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--dark-2)}
.donut .donut-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .donut-val b{font-size:var(--fs-xl);font-weight:800}
.donut .donut-val span{font-size:var(--fs-xs);color:var(--text-muted)}

.bar-mini{display:flex;flex-direction:column;gap:var(--fib-8)}
.bar-mini .bm-row{display:flex;align-items:center;gap:var(--fib-8)}
.bar-mini .bm-label{width:89px;font-size:var(--fs-xs);color:var(--text-muted);text-align:right}
.bar-mini .bm-track{flex:1;height:13px;background:var(--dark-4);border-radius:var(--radius-full);overflow:hidden}
.bar-mini .bm-fill{height:100%;background:var(--secondary);border-radius:var(--radius-full)}

.heat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.heat-cell{aspect-ratio:1;border-radius:3px;background:var(--dark-4)}
.heat-cell.l1{background:rgba(var(--primary-rgb),.2)}
.heat-cell.l2{background:rgba(var(--primary-rgb),.4)}
.heat-cell.l3{background:rgba(var(--primary-rgb),.7)}
.heat-cell.l4{background:var(--primary)}

/* legend */
.legend{display:flex;gap:var(--fib-13);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-muted)}
.legend-item{display:flex;align-items:center;gap:var(--fib-5)}
.legend-dot{width:10px;height:10px;border-radius:3px}

/* ============================================================================
   T. TOASTS POSICIONÁVEIS / progresso de toast
   ========================================================================== */
#toast-root.top-left{top:var(--fib-21);left:var(--fib-21);bottom:auto;right:auto}
#toast-root.top-center{top:var(--fib-21);left:50%;transform:translateX(-50%);bottom:auto;right:auto}
.toast.with-progress{flex-direction:column;align-items:stretch;gap:var(--fib-8)}
.toast .toast-progress{height:2px;background:var(--border-mid);border-radius:var(--radius-full);overflow:hidden}
.toast .toast-progress .tp-bar{height:100%;background:var(--primary);animation:toastProgress 3.6s linear forwards}
@keyframes toastProgress{from{width:100%}to{width:0}}

/* ============================================================================
   U. AVATARES extra & presença
   ========================================================================== */
.avatar-ring{box-shadow:0 0 0 2px var(--dark-2),0 0 0 4px var(--primary)}
.avatar-wrap{position:relative;display:inline-block}
.avatar-wrap .presence{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;border:2px solid var(--dark-2)}
.avatar-wrap .presence.on{background:var(--success)}
.avatar-wrap .presence.off{background:var(--text-dim)}

/* ============================================================================
   V. UTILITÁRIOS de ANIMAÇÃO
   ========================================================================== */
.fade-in{animation:fadeIn var(--t-base) var(--ease)}
.slide-up{animation:slideUp var(--t-slow) var(--ease)}
.scale-in{animation:modalIn var(--t-base) var(--ease-bounce)}
.delay-1{animation-delay:.06s}.delay-2{animation-delay:.12s}.delay-3{animation-delay:.18s}
.stagger > *{animation:slideUp var(--t-base) var(--ease) backwards}
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.12s}
.stagger > *:nth-child(4){animation-delay:.16s}
.stagger > *:nth-child(5){animation-delay:.2s}
.hover-lift{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.hover-glow:hover{box-shadow:var(--shadow-glow)}

/* ============================================================================
   W. SKELETONS específicos
   ========================================================================== */
.sk-kpi{height:68px;border-radius:var(--radius-sm)}
.sk-chart{height:178px;border-radius:var(--radius-md)}
.sk-btn{height:38px;width:120px;border-radius:var(--radius-full)}
.skeleton-text{display:flex;flex-direction:column;gap:var(--fib-5)}

/* ============================================================================
   X. CHIP-INPUT / multiselect
   ========================================================================== */
.chip-input{display:flex;flex-wrap:wrap;gap:var(--fib-5);padding:var(--fib-8);background:var(--dark-3);
  border:1px solid var(--border-mid);border-radius:var(--radius-sm);min-height:44px}
.chip-input:focus-within{border-color:var(--primary-ink);box-shadow:0 0 0 3px var(--primary-softer)}
.chip-input input{border:0;background:transparent;flex:1;min-width:89px;padding:var(--fib-3)}
.chip-input input:focus{box-shadow:none}

/* ============================================================================
   Y. ESTADOS / FEEDBACK
   ========================================================================== */
.state-success{color:var(--success)}.state-error{color:var(--danger)}
.dot-list{display:flex;flex-direction:column;gap:var(--fib-8)}
.dot-list li{display:flex;align-items:center;gap:var(--fib-8);font-size:var(--fs-sm)}
.dot-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex:none}
.callout{border-left:3px solid var(--primary);background:var(--primary-softer);padding:var(--fib-13) var(--fib-21);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm)}
.ribbon{position:absolute;top:13px;right:-34px;background:var(--primary);color:var(--text-on-lime);
  padding:3px 34px;transform:rotate(45deg);font-size:var(--fs-xs);font-weight:700}

/* ============================================================================
   Z. TABELA responsiva (cards no mobile) + sticky col + print relatório
   ========================================================================== */
@media (max-width:560px){
  .table-stack thead{display:none}
  .table-stack tr{display:block;background:var(--dark-3);border:1px solid var(--border-soft);
    border-radius:var(--radius-sm);margin-bottom:var(--fib-8);padding:var(--fib-8)}
  .table-stack td{display:flex;justify-content:space-between;border:0;padding:var(--fib-5) var(--fib-8)}
  .table-stack td::before{content:attr(data-label);color:var(--text-muted);font-size:var(--fs-xs);font-weight:600}
}
.table-sticky-1 td:first-child,.table-sticky-1 th:first-child{position:sticky;left:0;background:var(--dark-2);z-index:1}

@media print{
  .toolbar,.filter-pills,.search-box,.dropdown,.notif-btn,.fab,.modal-bg,.drawer-bg,.cmdk-bg{display:none!important}
  .panel{break-inside:avoid;page-break-inside:avoid}
  .kanban{flex-wrap:wrap}
  .column{break-inside:avoid;width:48%;min-width:48%}
  a[href]::after{content:'';}
  .report-header{display:flex!important;align-items:center;justify-content:space-between;border-bottom:2px solid #000;padding-bottom:13px;margin-bottom:21px}
}
.report-header{display:none}

/* utilitário final: scroll suave em containers + foco acessível reforçado */
.scroll-area{overflow:auto;scrollbar-gutter:stable}
.focus-ring:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.clickable-row{cursor:pointer;transition:background var(--t-fast) var(--ease)}
.clickable-row:hover{background:var(--dark-3)}
.text-balance{text-wrap:balance}
.nowrap{white-space:nowrap}
.gap-89{gap:var(--fib-89)}
.vh-center{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* ── Popup do Lead (telefone + interesse + conversa) ── */
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-21)}
.lead-info label,.lead-conv > label{display:block;font-size:var(--fs-sm);color:var(--text-soft);margin-bottom:var(--fib-5);font-weight:500}
.chat-thread{background:var(--dark-3);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:var(--fib-13);max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--fib-8)}
.chat-msg{display:flex;flex-direction:column;max-width:82%}
.chat-msg.them{align-self:flex-start;align-items:flex-start}
.chat-msg.me{align-self:flex-end;align-items:flex-end}
.chat-bubble{padding:var(--fib-8) var(--fib-13);border-radius:var(--radius-md);font-size:var(--fs-sm);
  white-space:pre-wrap;word-break:break-word;line-height:1.4}
.chat-msg.them .chat-bubble{background:var(--dark-4);color:var(--text-white);border-bottom-left-radius:var(--fib-3)}
.chat-msg.me .chat-bubble{background:var(--primary-soft);color:var(--text-white);border-bottom-right-radius:var(--fib-3)}
.chat-time{font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px}
.chat-empty{color:var(--text-muted);font-size:var(--fs-sm);text-align:center;padding:var(--fib-21)}
@media(max-width:768px){.lead-grid{grid-template-columns:1fr}}

/* ── Resumo da IA (card + popup) ── */
.card-ai{font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--fib-5);line-height:1.35;
  border-left:2px solid var(--primary);padding-left:var(--fib-8);font-style:italic}
.card-ai i{color:var(--primary-ink);font-style:normal;margin-right:2px}
.ai-box{background:var(--primary-softer);border:1px solid rgba(var(--primary-rgb),.3);
  border-radius:var(--radius-md);padding:var(--fib-13) var(--fib-21);margin-bottom:var(--fib-21)}
.ai-box-head{display:flex;align-items:center;gap:var(--fib-5);font-weight:600;font-size:var(--fs-sm);
  color:var(--primary-ink);margin-bottom:var(--fib-5)}
.ai-summary{font-size:var(--fs-sm);color:var(--text-soft);line-height:1.45}
.ai-next{font-size:var(--fs-sm);margin-top:var(--fib-8);color:var(--text-white)}
.ai-next .ai-next-label{font-weight:600;color:var(--primary-ink)}