/* ============================================================================
   emanuelconectacrm — Camada de REFINAMENTO DE UX (enhancements.css) v2.6.0
   Carregada por último. Refina o que já existe: micro-interações, feedback de
   toque/drag, formulários, kanban, chat, modais, navegação mobile, acessibilidade
   e responsivo. Mantém Fibonacci + tema claro. Nenhuma marcação nova obrigatória.
   ----------------------------------------------------------------------------
   01. Base & scroll                 11. Avatares
   02. Botões (micro-interações)     12. Navegação + bottom bar mobile
   03. Cards & kanban                13. Topbar & busca
   04. Formulários & inputs          14. Dashboard
   05. Selects & switches            15. Loading & skeleton
   06. Chips, badges, tags           16. Empty states
   07. Modais & drawer (bottom-sheet)17. Tooltips & popovers
   08. Chat / conversa               18. Toasts
   09. Tabelas                       19. Acessibilidade
   10. Lead popup & IA box           20. Responsivo (1024/768/480/360)
                                     21. Print
   ========================================================================== */

/* ============================================================================
   01. BASE & SCROLL
   ========================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{text-rendering:optimizeLegibility}
/* sombras de rolagem (indicam que há mais conteúdo) */
.scroll-shadow{background:
  linear-gradient(var(--dark-2) 30%, rgba(0,0,0,0)) center top,
  linear-gradient(rgba(0,0,0,0), var(--dark-2) 70%) center bottom,
  radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.12), rgba(0,0,0,0)) center top,
  radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.12), rgba(0,0,0,0)) center bottom;
  background-repeat:no-repeat;background-size:100% 34px,100% 34px,100% 13px,100% 13px;
  background-attachment:local,local,scroll,scroll}
/* foco coerente em todo lugar */
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-xs)}
::placeholder{transition:color var(--t-base) var(--ease)}
:focus-within::placeholder{color:transparent}
.main{scroll-padding-top:var(--fib-21)}

/* ============================================================================
   02. BOTÕES — micro-interações
   ========================================================================== */
.btn{transition:transform var(--t-fast) var(--ease-bounce),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),filter var(--t-base) var(--ease)}
.btn:active{transform:translateY(1px) scale(.97)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--primary-softer)}
.btn i{transition:transform var(--t-base) var(--ease-bounce)}
.btn-primary:hover i.fa-arrow-right,.btn:hover i.fa-arrow-right{transform:translateX(3px)}
.btn:hover i.fa-plus{transform:rotate(90deg)}
.btn:hover i.fa-floppy-disk{transform:scale(1.12)}
.btn-icon:hover{transform:translateY(-1px)}
.btn-icon:active{transform:translateY(0) scale(.92)}
/* botão desabilitado mais claro */
.btn:disabled,.btn[disabled]{filter:grayscale(.3) opacity(.6);cursor:not-allowed;transform:none!important;box-shadow:none!important}
/* loading: spinner herda a cor do texto do botão */
.btn.is-loading{pointer-events:none}
/* "ghost" ganha leve fundo ao focar */
.btn-ghost:focus-visible{background:var(--primary-softer)}
/* grupo de botões cola visualmente */
.btn-group .btn{border-radius:var(--radius-sm)}
.btn-group .btn:first-child{border-radius:var(--radius-full) var(--radius-sm) var(--radius-sm) var(--radius-full)}
.btn-group .btn:last-child{border-radius:var(--radius-sm) var(--radius-full) var(--radius-full) var(--radius-sm)}

/* ============================================================================
   03. CARDS & KANBAN — feedback de toque e arraste
   ========================================================================== */
.card{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
  border-color var(--t-base) var(--ease),opacity var(--t-base) var(--ease);will-change:transform}
.card:hover{transform:translateY(-2px)}
.card:active{cursor:grabbing;transform:scale(.99)}
.card.dragging{opacity:.5;transform:rotate(1.5deg) scale(.98);box-shadow:var(--shadow-lg);cursor:grabbing}
/* "alça" sutil aparece no hover (indica que dá pra arrastar) */
.card::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--temp,var(--frio));border-radius:var(--radius-full);
  transition:height var(--t-base) var(--ease);opacity:.5}
.card:hover::before{height:55%}
.card{position:relative}
/* coluna: realce de soltura mais vivo + pulso */
.column.drop-target{box-shadow:inset 0 0 0 2px var(--primary),0 8px 26px rgba(var(--primary-rgb),.18)}
.column.drop-target .column-body{background:var(--primary-softer);animation:dropPulse 1.2s ease-in-out infinite}
@keyframes dropPulse{0%,100%{background:var(--primary-softer)}50%{background:rgba(var(--primary-rgb),.12)}}
/* coluna vazia com dica visual */
.column-body:empty::after,.column-body > .text-dim:only-child{display:block}
.column-body{scroll-behavior:smooth}
/* contador da coluna pulsa quando muda (classe adicionada via JS opcional) */
.column-head .count{transition:transform var(--t-base) var(--ease-bounce),background var(--t-base)}
.column.drop-target .column-head .count{transform:scale(1.15);background:var(--primary);color:var(--text-on-lime)}
/* cabeçalho de coluna “gruda” com sombra ao rolar */
.column-body{position:relative}
/* entrada escalonada dos cards */
.column-body .card{animation:cardEnter var(--t-base) var(--ease) backwards}
@keyframes cardEnter{from{opacity:0;transform:translateY(13px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
/* pill de temperatura com leve brilho */
.temp-pill{transition:transform var(--t-fast) var(--ease)}
.card:hover .temp-pill{transform:scale(1.04)}
/* badge da IA pulsa de leve */
.card .ai{transition:transform var(--t-base) var(--ease-bounce)}
.card:hover .ai{transform:scale(1.08)}
/* resumo da IA: revela na íntegra no hover do card (clamp solta) */
.card-ai{transition:color var(--t-base) var(--ease)}
.card:hover .card-ai{color:var(--text-soft)}

/* ============================================================================
   04. FORMULÁRIOS & INPUTS — UX
   ========================================================================== */
input,select,textarea{transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background-color var(--t-base) var(--ease)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--primary-softer)}
/* rótulo acompanha o foco */
.field{position:relative}
.field:focus-within > label{color:var(--primary-ink)}
.field > label{transition:color var(--t-base) var(--ease)}
/* validação com micro-animação */
input.is-invalid,textarea.is-invalid,select.is-invalid{animation:shake .3s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.field-error{animation:slideDownSm var(--t-base) var(--ease)}
@keyframes slideDownSm{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
/* ícone do input-icon ganha cor ao focar */
.input-icon:focus-within > i{color:var(--primary-ink)}
.input-icon > i{transition:color var(--t-base) var(--ease)}
/* textarea redimensiona suave e mostra “grip” */
textarea{transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),height var(--t-base) var(--ease)}
/* dica abaixo do campo */
.hint{transition:color var(--t-base) var(--ease)}
.field:focus-within .hint{color:var(--text-soft)}
/* contador de caracteres (quando presente) */
.char-count{font-size:var(--fs-xs);color:var(--text-dim);text-align:right;margin-top:var(--fib-3)}
.char-count.near{color:var(--warning)}
.char-count.over{color:var(--danger)}

/* ============================================================================
   05. SELECTS & SWITCHES
   ========================================================================== */
select{cursor:pointer;transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background-color var(--t-base) var(--ease)}
select:hover{background-color:var(--dark-2)}
/* switch com animação mais gostosa */
.switch .thumb{transition:transform var(--t-base) var(--ease-bounce),background var(--t-base) var(--ease),box-shadow var(--t-base)}
.switch input:checked + .track .thumb{box-shadow:0 0 8px rgba(var(--primary-rgb),.5)}
.switch:hover .track{border-color:var(--primary)}
.switch:active .thumb{width:22px}
/* checkbox com “tique” animado */
.checkbox .box i{transition:transform var(--t-base) var(--ease-bounce),opacity var(--t-fast)}
.checkbox:hover .box{border-color:var(--primary)}
/* segmented com indicador deslizante mais suave */
.segmented button{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast)}
.segmented button:active{transform:scale(.96)}

/* ============================================================================
   06. CHIPS, BADGES, TAGS
   ========================================================================== */
.chip{transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.chip{cursor:pointer;user-select:none}
.chip:hover{border-color:var(--primary);transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.97)}
.chip.selected{box-shadow:0 0 0 1px var(--primary) inset}
.chip.selected::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:9px;margin-right:var(--fib-3)}
.badge{transition:transform var(--t-fast) var(--ease)}
.tag{transition:background var(--t-base) var(--ease)}
.filter-pill{transition:all var(--t-base) var(--ease)}
.filter-pill:active{transform:scale(.96)}

/* ============================================================================
   07. MODAIS & DRAWER — entrada, backdrop, bottom-sheet no mobile
   ========================================================================== */
.modal-bg{animation:fadeIn var(--t-base) var(--ease);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal{animation:modalPop var(--t-base) var(--ease-bounce)}
@keyframes modalPop{from{opacity:0;transform:translateY(21px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-base) var(--ease-bounce)}
.modal-close:hover{transform:rotate(90deg) scale(1.05)}
.modal-actions .btn{min-width:89px}
/* drawer desliza + backdrop */
.drawer{animation:drawerSlide var(--t-base) var(--ease)}
@keyframes drawerSlide{from{transform:translateX(34px);opacity:.6}to{transform:translateX(0);opacity:1}}
/* tabs dentro do modal: indicador animado */
.modal .tab,.tab{transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.tab::after{content:'';position:absolute}
.tab.active{position:relative}

/* ============================================================================
   08. CHAT / CONVERSA — polish
   ========================================================================== */
.chat-thread{scroll-behavior:smooth;position:relative}
.chat-msg{animation:msgIn var(--t-base) var(--ease) backwards}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg:nth-child(1){animation-delay:.02s}
.chat-msg:nth-child(2){animation-delay:.06s}
.chat-msg:nth-child(3){animation-delay:.1s}
.chat-msg:nth-child(4){animation-delay:.14s}
.chat-msg:nth-child(5){animation-delay:.18s}
/* rabicho do balão (estilo WhatsApp) */
.chat-bubble{position:relative;box-shadow:var(--shadow-xs);transition:box-shadow var(--t-base) var(--ease)}
.chat-msg:hover .chat-bubble{box-shadow:var(--shadow-sm)}
.chat-msg.them .chat-bubble::after{content:'';position:absolute;left:-5px;bottom:0;width:0;height:0;
  border:6px solid transparent;border-right-color:var(--dark-4);border-bottom:0;border-left:0}
.chat-msg.me .chat-bubble::after{content:'';position:absolute;right:-5px;bottom:0;width:0;height:0;
  border:6px solid transparent;border-left-color:var(--primary-soft);border-bottom:0;border-right:0}
/* horário aparece com mais clareza no hover */
.chat-time{opacity:.7;transition:opacity var(--t-base) var(--ease)}
.chat-msg:hover .chat-time{opacity:1}
/* separador de data (quando inserido via JS: <div class="chat-date">Hoje</div>) */
.chat-date{align-self:center;font-size:var(--fs-xs);color:var(--text-muted);background:var(--dark-4);
  padding:2px var(--fib-13);border-radius:var(--radius-full);margin:var(--fib-5) 0}
/* indicador de digitando (opcional) */
.chat-typing{display:inline-flex;gap:3px;padding:var(--fib-8) var(--fib-13);background:var(--dark-4);border-radius:var(--radius-md);align-self:flex-start}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:typing 1.2s infinite ease-in-out}
.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* ============================================================================
   09. TABELAS
   ========================================================================== */
table{border-collapse:separate;border-spacing:0}
tbody tr{transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
tbody tr.clickable:hover,tbody tr[data-id]:hover,tbody tr[data-pid]:hover{box-shadow:inset 3px 0 0 var(--primary)}
thead th{position:sticky;top:0;z-index:2;backdrop-filter:blur(4px)}
td .cell-strong{transition:color var(--t-base) var(--ease)}
tr:hover td .cell-strong{color:var(--primary-ink)}
/* primeira coluna com leve respiro */
th:first-child,td:first-child{padding-left:var(--fib-21)}
th:last-child,td:last-child{padding-right:var(--fib-21)}

/* ============================================================================
   10. LEAD POPUP & CAIXA DA IA
   ========================================================================== */
.lead-grid{align-items:start}
.ai-box{animation:slideDownSm var(--t-base) var(--ease);position:relative;overflow:hidden}
.ai-box::before{content:'';position:absolute;top:-21px;right:-21px;width:68px;height:68px;
  background:radial-gradient(circle,rgba(var(--primary-rgb),.18),transparent 70%);pointer-events:none}
.ai-box-head i{animation:sparkle 2.5s ease-in-out infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.15) rotate(8deg);opacity:1}}
.ai-next{padding-top:var(--fib-8);border-top:1px dashed rgba(var(--primary-rgb),.25)}
.lead-info .chip{margin-bottom:var(--fib-3)}
.chat-thread{border-radius:var(--radius-md)}

/* ============================================================================
   11. AVATARES
   ========================================================================== */
.avatar{transition:transform var(--t-base) var(--ease-bounce),box-shadow var(--t-base) var(--ease)}
.card:hover .avatar,tr:hover .avatar{transform:scale(1.06)}
.avatar-lg{box-shadow:var(--shadow-sm)}
.u-info .avatar{transition:transform var(--t-base) var(--ease)}
.user-box:hover .avatar{transform:scale(1.05)}

/* ============================================================================
   12. NAVEGAÇÃO + BOTTOM BAR MOBILE
   ========================================================================== */
.nav-item{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),padding-left var(--t-base) var(--ease)}
.nav-item:hover{padding-left:var(--fib-21)}
.nav-item.active{padding-left:var(--fib-13)}
.nav-item.active::before{transition:height var(--t-base) var(--ease-bounce)}
.nav-item i{transition:transform var(--t-base) var(--ease-bounce),color var(--t-base) var(--ease)}
.nav-item:hover i{transform:scale(1.15)}
.nav-item .nav-badge{animation:badgePop var(--t-base) var(--ease-bounce)}
@keyframes badgePop{from{transform:scale(0)}to{transform:scale(1)}}
.logout-link{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)}
/* barra de navegação inferior (mobile) — montada a partir da mesma sidebar via CSS */
.bottom-nav{display:none}
@media (max-width:768px){
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;z-index:var(--z-sticky);
    background:var(--dark-2);border-top:1px solid var(--border-mid);box-shadow:0 -2px 13px rgba(20,26,34,.08);
    padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    color:var(--text-muted);font-size:10px;text-decoration:none;transition:color var(--t-base) var(--ease)}
  .bottom-nav a i{font-size:18px}
  .bottom-nav a.active{color:var(--primary-ink)}
  .main{padding-bottom:76px}
}

/* ============================================================================
   13. TOPBAR & BUSCA
   ========================================================================== */
.topbar h2{transition:font-size var(--t-base) var(--ease)}
.search-box input{transition:box-shadow var(--t-base) var(--ease),background-color var(--t-base) var(--ease),width var(--t-base) var(--ease)}
.search-box:focus-within i{color:var(--primary-ink)}
.search-box i{transition:color var(--t-base) var(--ease)}
.search-box .clear-search{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast)}
.search-box .clear-search:active{transform:translateY(-50%) scale(.85)}
.wa-badge{transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.wa-badge.connected .dot{box-shadow:0 0 8px rgba(var(--success-rgb),.6)}
.notif-btn{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-fast)}
.notif-btn:active{transform:scale(.92)}
.notif-btn .notif-count{animation:badgePop var(--t-base) var(--ease-bounce)}

/* ============================================================================
   14. DASHBOARD
   ========================================================================== */
.stat{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.stat:hover{transform:translateY(-3px)}
.stat .v{transition:color var(--t-base) var(--ease)}
.stat .stat-icon{transition:transform var(--t-base) var(--ease-bounce)}
.stat:hover .stat-icon{transform:scale(1.1) rotate(-4deg)}
.fr-bar,.bm-fill{transition:width var(--t-slow) var(--ease)}
.fr-bar{position:relative;overflow:hidden}
.fr-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:translateX(-100%);animation:barShine 2.5s ease-in-out infinite}
@keyframes barShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.rank-item{transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.rank-item:hover{transform:translateX(3px)}
.donut{transition:filter var(--t-base) var(--ease)}
.panel:hover .donut{filter:drop-shadow(0 4px 13px rgba(var(--primary-rgb),.25))}
.kpi-mini{transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.kpi-mini:hover{transform:translateY(-2px);border-color:rgba(var(--primary-rgb),.3)}

/* ============================================================================
   15. LOADING & SKELETON
   ========================================================================== */
.skeleton{position:relative;overflow:hidden}
.spinner{animation:spin .7s linear infinite}
.spinner-sm{border-width:2px}
.loading-inline{animation:fadeIn var(--t-base) var(--ease)}
.loading-overlay{animation:fadeIn var(--t-fast) var(--ease)}
/* progresso indeterminado (barra) */
.progress.indeterminate .bar{width:40%;animation:indet 1.3s var(--ease-in-out) infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}
/* botão vira “carregando” sem pular layout */
.btn.is-loading{position:relative;color:transparent!important}

/* ============================================================================
   16. EMPTY STATES — ilustração CSS
   ========================================================================== */
.empty{animation:fadeIn var(--t-base) var(--ease)}
.empty .empty-icon{transition:transform var(--t-base) var(--ease-bounce);animation:floatY 3s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.empty:hover .empty-icon{transform:scale(1.05)}
.empty-inline i{animation:floatY 3s ease-in-out infinite}

/* ============================================================================
   17. TOOLTIPS & POPOVERS
   ========================================================================== */
[data-tip]::after{transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease);
  box-shadow:var(--shadow-md);font-weight:500;letter-spacing:.01em}
[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--dark-5);opacity:0;transition:opacity var(--t-base) var(--ease);
  pointer-events:none;z-index:var(--z-tooltip)}
[data-tip]:hover::before{opacity:1}
.dropdown-menu{animation:menuIn var(--t-base) var(--ease)}
.dropdown-item{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.dropdown-item:hover{padding-left:var(--fib-21)}

/* ============================================================================
   18. TOASTS
   ========================================================================== */
#toast-root{gap:var(--fib-8)}
.toast{animation:toastSlide var(--t-base) var(--ease-bounce);box-shadow:var(--shadow-lg)}
@keyframes toastSlide{from{opacity:0;transform:translateX(34px) scale(.92)}to{opacity:1;transform:translateX(0) scale(1)}}
.toast.leaving{animation:toastOut var(--t-base) var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(34px) scale(.92);margin-bottom:calc(var(--fib-8) * -1 - 21px)}}
.toast .toast-icon{animation:badgePop var(--t-base) var(--ease-bounce)}
.toast .toast-x{transition:color var(--t-base) var(--ease),transform var(--t-fast)}
.toast .toast-x:hover{transform:scale(1.2)}
/* barra de auto-fechamento */
.toast::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:currentColor;opacity:.25;transform-origin:left;animation:toastBar 3.6s linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ============================================================================
   19. ACESSIBILIDADE
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .card-ai{transition:none}
}
@media (prefers-contrast:more){
  :root{--text-muted:#3a4250;--border-mid:#9aa2ae;--border-soft:rgba(20,26,34,.25)}
  .btn-ghost{border-color:var(--border-strong)}
  .chip,.tag,.badge{border-width:1.5px}
}
/* alvos de toque mínimos no mobile */
@media (pointer:coarse){
  .btn-sm{min-height:38px}
  .nav-item{min-height:44px}
  .chip{min-height:34px;display:inline-flex;align-items:center}
  .done-fu,.filter-pill{min-height:34px}
  input,select,textarea{font-size:16px} /* evita zoom no iOS */
}
.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}
[aria-busy="true"]{cursor:progress}

/* ============================================================================
   20. RESPONSIVO
   ========================================================================== */
@media (max-width:1024px){
  .lead-grid{grid-template-columns:1fr 1fr}
  .grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .kanban{gap:var(--fib-8)}
}
@media (max-width:768px){
  .lead-grid{grid-template-columns:1fr;gap:var(--fib-13)}
  .lead-conv .chat-thread{max-height:233px}
  .modal{padding:var(--fib-21);width:min(96vw,521px)}
  .modal-lg{width:96vw}
  /* modais viram “bottom-sheet” no celular */
  .modal-bg{align-items:flex-end}
  .modal{border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100vw;max-height:92vh;animation:sheetUp var(--t-base) var(--ease)}
  .modal::before{content:'';display:block;width:34px;height:4px;border-radius:var(--radius-full);
    background:var(--border-strong);margin:0 auto var(--fib-13)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .drawer{width:100vw;border-left:0}
  .form-grid{grid-template-columns:1fr}
  .column{min-width:84vw;width:84vw;scroll-snap-align:center}
  .kanban{scroll-snap-type:x mandatory;padding-bottom:var(--fib-8)}
  .topbar{gap:var(--fib-8)}
  .topbar-right .btn .kbd{display:none}
  .stat .v{font-size:var(--fs-lg)}
  .funnel-row{grid-template-columns:68px 1fr 26px}
}
@media (max-width:480px){
  .main{padding:var(--fib-8) var(--fib-8) 76px}
  .grid-stats{grid-template-columns:1fr 1fr;gap:var(--fib-8)}
  .modal{padding:var(--fib-13)}
  .modal-actions{flex-direction:column-reverse;gap:var(--fib-8)}
  .modal-actions .btn{width:100%}
  .panel{padding:var(--fib-13)}
  .toolbar{gap:var(--fib-8)}
  .chip{font-size:var(--fs-xs)}
  th:first-child,td:first-child{padding-left:var(--fib-13)}
  th:last-child,td:last-child{padding-right:var(--fib-13)}
  .ai-box{padding:var(--fib-13)}
}
@media (max-width:360px){
  .grid-stats{grid-template-columns:1fr}
  .column{min-width:90vw;width:90vw}
  .topbar h2{font-size:var(--fs-md)}
}

/* ============================================================================
   21. PRINT
   ========================================================================== */
@media print{
  .sidebar,.bottom-nav,.topbar-right,.menu-toggle,.fab,#toast-root,.modal-bg,.drawer-bg,
  .toolbar,.search-box,.filter-pills,.btn,.dropdown,.notif-btn{display:none!important}
  body{background:#fff;color:#000}
  .main{padding:0}
  .panel,.stat,.card,.column{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .kanban{flex-wrap:wrap;gap:8px}
  .column{width:48%;min-width:48%}
  a::after{content:''!important}
}

/* ============================================================================
   EXTRAS — utilitários de transição/estado reutilizáveis
   ========================================================================== */
.t-fade{transition:opacity var(--t-base) var(--ease)}
.t-all{transition:all var(--t-base) var(--ease)}
.lift{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.press:active{transform:scale(.97)}
.fade-enter{animation:fadeIn var(--t-base) var(--ease)}
.spin-hover:hover i{transform:rotate(180deg);transition:transform var(--t-slow) var(--ease)}
.glow-on-hover:hover{box-shadow:0 0 21px rgba(var(--primary-rgb),.3)}
.cursor-help{cursor:help}
.select-none{user-select:none}
.tabular{font-variant-numeric:tabular-nums}
.ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ellipsis-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.divider-soft{height:1px;background:var(--border-soft);margin:var(--fib-13) 0;border:0}

/* ============================================================================
   22. TEMA ESCURO opcional (body.theme-dark) — toggle no topbar
   Restaura a paleta escura para quem prefere. O claro continua padrão.
   ========================================================================== */
body.theme-dark{
  --black:#000; --dark-1:#0D0D0D; --dark-2:#121212; --dark-3:#1A1A1A; --dark-4:#242424; --dark-5:#2E2E2E;
  --surface:#141614; --surface-2:#17191b;
  --white:#fff; --text-white:#fff; --text-soft:#F5F5F5; --text-muted:#A0A0A0; --text-dim:#6f6f6f;
  --text-on-lime:#0a0a0a; --primary-ink:#D0FF59;
  --primary-soft:rgba(208,255,89,.12); --primary-softer:rgba(208,255,89,.06);
  --secondary-soft:rgba(45,84,255,.14);
  --border-dark:#2a2a2a; --border-mid:#333; --border-soft:rgba(255,255,255,.07); --border-strong:#3d3d3d;
  --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-inset:inset 0 1px 0 rgba(255,255,255,.04);
  --grad-card:linear-gradient(180deg,var(--surface-2),var(--surface));
  --grad-shimmer:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
body.theme-dark{background:var(--dark-1);color:var(--text-white)}
body.theme-dark input,body.theme-dark select,body.theme-dark textarea{background-color:var(--dark-3)}
body.theme-dark select,body.theme-dark select:focus{background:var(--dark-3) 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") no-repeat right var(--fib-13) center}
body.theme-dark .login-card,body.theme-dark .toast,body.theme-dark .wa-badge,body.theme-dark .cmdk,body.theme-dark .donut::before{background:var(--dark-2)}
body.theme-dark #login-view{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)}
body.theme-dark .chat-msg.them .chat-bubble::after{border-right-color:var(--dark-4)}
body.theme-dark .chat-msg.me .chat-bubble::after{border-left-color:var(--primary-soft)}
body.theme-dark .skeleton{background:linear-gradient(90deg,var(--dark-3) 25%,var(--dark-4) 37%,var(--dark-3) 63%);background-size:400% 100%}
.theme-toggle{transition:transform var(--t-base) var(--ease-bounce)}
.theme-toggle:active{transform:scale(.9) rotate(20deg)}
body.theme-dark .theme-toggle i::before{content:'\f185'} /* sol no escuro */

/* ============================================================================
   23. ESTADOS DE COMPONENTE (validação, disabled, success, warning)
   ========================================================================== */
.field.has-error label{color:var(--danger)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.1)}
.field.has-success input{border-color:var(--success)}
.field.has-success::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  position:absolute;right:var(--fib-13);bottom:13px;color:var(--success);font-size:var(--fs-sm)}
.input-valid{border-color:var(--success)!important}
.input-loading{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23D0FF59' stroke-width='3' stroke-dasharray='42' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
fieldset{border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:var(--fib-21);margin-bottom:var(--fib-13)}
fieldset legend{padding:0 var(--fib-8);font-size:var(--fs-sm);font-weight:600;color:var(--text-soft)}
.required-mark{color:var(--danger)}
.optional-mark{color:var(--text-dim);font-weight:400;font-size:var(--fs-xs)}

/* ============================================================================
   24. BIBLIOTECA DE ANIMAÇÕES (entrada/saída reutilizáveis)
   ========================================================================== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-13px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-13px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(13px)}to{opacity:1;transform:translateX(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--primary-rgb),.4)}50%{box-shadow:0 0 0 8px rgba(var(--primary-rgb),0)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}
.anim-fade-up{animation:fadeInUp var(--t-base) var(--ease)}
.anim-fade-down{animation:fadeInDown var(--t-base) var(--ease)}
.anim-fade-left{animation:fadeInLeft var(--t-base) var(--ease)}
.anim-fade-right{animation:fadeInRight var(--t-base) var(--ease)}
.anim-zoom{animation:zoomIn var(--t-base) var(--ease)}
.anim-pop{animation:popIn var(--t-base) var(--ease-bounce)}
.anim-bounce{animation:bounceIn var(--t-slow) var(--ease-bounce)}
.anim-pulse-glow{animation:pulseGlow 2s ease-in-out infinite}
.anim-wiggle:hover{animation:wiggle .4s var(--ease)}
.anim-heartbeat{animation:heartbeat 1.4s ease-in-out infinite}
.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}
.dur-fast{animation-duration:var(--t-fast)}.dur-slow{animation-duration:var(--t-slow)}

/* ============================================================================
   25. INDICADORES — status, presença, progresso (ring), selo
   ========================================================================== */
.status-pill{display:inline-flex;align-items:center;gap:var(--fib-5);font-size:var(--fs-xs);font-weight:600;
  padding:2px var(--fib-8);border-radius:var(--radius-full)}
.status-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.status-online{color:var(--success);background:rgba(var(--success-rgb),.12)}
.status-away{color:var(--warning);background:rgba(var(--warning-rgb),.12)}
.status-offline{color:var(--text-dim);background:var(--dark-4)}
.status-busy{color:var(--danger);background:rgba(var(--danger-rgb),.12)}
.ping{position:relative}
.ping::after{content:'';position:absolute;inset:0;border-radius:inherit;border:2px solid var(--primary);
  animation:pingAnim 1.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes pingAnim{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
/* anel de progresso (conic) */
.ring{--p:0;--size:55px;--w:5px;width:var(--size);height:var(--size);border-radius:50%;
  background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--dark-4) 0);
  display:flex;align-items:center;justify-content:center;position:relative}
.ring::before{content:'';position:absolute;inset:var(--w);border-radius:50%;background:var(--dark-2)}
.ring .ring-val{position:relative;font-size:var(--fs-sm);font-weight:700}
/* selo/etiqueta de canto */
.corner-badge{position:absolute;top:var(--fib-8);right:var(--fib-8);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:2px var(--fib-5);border-radius:var(--radius-xs);
  background:var(--primary);color:var(--text-on-lime)}
.corner-badge.hot{background:var(--danger);color:#fff}
.corner-badge.new{background:var(--secondary);color:#fff}

/* ============================================================================
   26. FEED DE NOTIFICAÇÕES / ATIVIDADE
   ========================================================================== */
.feed{display:flex;flex-direction:column;gap:var(--fib-3)}
.feed-item{display:flex;gap:var(--fib-13);padding:var(--fib-13);border-radius:var(--radius-sm);
  transition:background var(--t-fast) var(--ease)}
.feed-item:hover{background:var(--dark-3)}
.feed-item .feed-ico{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--primary-soft);color:var(--primary-ink);font-size:var(--fs-sm)}
.feed-item .feed-body{flex:1;min-width:0}
.feed-item .feed-title{font-size:var(--fs-sm);font-weight:500}
.feed-item .feed-time{font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px}
.feed-item.unread{background:var(--primary-softer)}
.feed-item.unread .feed-title{font-weight:600}
.feed-item.unread::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--primary);align-self:center;flex:none}

/* ============================================================================
   27. CALENDÁRIO / STEPPER / TIMELINE — polish
   ========================================================================== */
.cal-grid .day{transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.cal-grid .day:hover{transform:scale(1.08)}
.cal-grid .day.selected{animation:popIn var(--t-base) var(--ease-bounce)}
.stepper .step-dot{transition:all var(--t-base) var(--ease-bounce)}
.stepper .step.active .step-dot{animation:pulseGlow 2s ease-in-out infinite}
.stepper .step.done .step-line{transition:background var(--t-slow) var(--ease)}
.timeline-item{transition:transform var(--t-base) var(--ease)}
.timeline-item:hover{transform:translateX(3px)}
.timeline-item::before{transition:transform var(--t-base) var(--ease-bounce),border-color var(--t-base)}
.timeline-item:hover::before{transform:scale(1.2)}
.accordion-head{transition:background var(--t-fast) var(--ease)}
.accordion-head .chevron{transition:transform var(--t-base) var(--ease-bounce)}

/* ============================================================================
   28. COMMAND PALETTE & DROPDOWN — polish
   ========================================================================== */
.cmdk-bg{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmdk{animation:popIn var(--t-base) var(--ease-bounce)}
.cmdk-item{transition:background var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease)}
.cmdk-item.active{padding-left:var(--fib-21)}
.cmdk-item i{transition:transform var(--t-fast) var(--ease)}
.cmdk-item.active i{transform:scale(1.15)}
.cmdk-input-wrap input{font-size:var(--fs-md)}

/* ============================================================================
   29. PROCEDIMENTOS / FLUXO — polish dos passos
   ========================================================================== */
.flow-step{transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.flow-step:hover{border-color:rgba(var(--primary-rgb),.3);box-shadow:var(--shadow-sm)}
.fs-remove{transition:color var(--t-base) var(--ease),transform var(--t-fast)}
.fs-remove:hover{color:var(--danger)!important;transform:scale(1.1)}
.fs-remove:active{transform:scale(.9)}

/* ============================================================================
   30. UTILITÁRIOS FINAIS (espaçamento fino, texto, layout)
   ========================================================================== */
.gap-fib-13{gap:var(--fib-13)}
.stack > * + *{margin-top:var(--fib-13)}
.stack-sm > * + *{margin-top:var(--fib-8)}
.stack-lg > * + *{margin-top:var(--fib-21)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--fib-8);align-items:center}
.center-grid{display:grid;place-items:center}
.full-bleed{width:100vw;margin-left:calc(50% - 50vw)}
.muted-link{color:var(--text-muted)}.muted-link:hover{color:var(--primary-ink)}
.text-gradient{background:var(--grad-lime-teal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.shadow-hover{transition:box-shadow var(--t-base) var(--ease)}
.shadow-hover:hover{box-shadow:var(--shadow-lg)}
.rounded-top{border-radius:var(--radius-md) var(--radius-md) 0 0}
.rounded-bottom{border-radius:0 0 var(--radius-md) var(--radius-md)}
.border-dashed{border-style:dashed!important}
.opacity-60{opacity:.6}.opacity-80{opacity:.8}
.pointer-none{pointer-events:none}
.transition-none{transition:none!important}
.will-change-transform{will-change:transform}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* respiro vertical entre seções de uma view */
#content > * + *{margin-top:var(--fib-13)}
/* foco de teclado mais visível em itens clicáveis */
.card:focus-visible,.chip:focus-visible,tr[data-id]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* landscape baixo (celular deitado) */
@media (max-height:520px) and (orientation:landscape){
  .modal{max-height:96vh}
  .chat-thread{max-height:160px}
}
/* telas largas: limita largura de leitura de painéis de texto */
@media (min-width:1600px){
  .main{max-width:1500px;margin:0 auto}
}

/* ============================================================================
   31. DATA-VIZ EXTRA — barras horizontais, bullet, sparkline, trend
   ========================================================================== */
.hbar{display:flex;flex-direction:column;gap:var(--fib-8)}
.hbar-row{display:grid;grid-template-columns:120px 1fr 55px;align-items:center;gap:var(--fib-8)}
.hbar-label{font-size:var(--fs-xs);color:var(--text-muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{height:18px;background:var(--dark-3);border-radius:var(--radius-full);overflow:hidden;position:relative}
.hbar-fill{height:100%;border-radius:var(--radius-full);background:var(--grad-lime-teal);transition:width var(--t-slow) var(--ease);min-width:3px}
.hbar-val{font-size:var(--fs-xs);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.bullet{position:relative;height:21px;background:var(--dark-3);border-radius:var(--radius-sm);overflow:hidden}
.bullet .bullet-fill{height:100%;background:var(--primary);border-radius:var(--radius-sm)}
.bullet .bullet-target{position:absolute;top:0;bottom:0;width:2px;background:var(--danger)}
.trend{display:inline-flex;align-items:center;gap:var(--fib-3);font-size:var(--fs-xs);font-weight:600}
.trend.up{color:var(--success)}.trend.down{color:var(--danger)}.trend.flat{color:var(--text-muted)}
.trend.up::before{content:'\f062';font-family:'Font Awesome 6 Free';font-weight:900}
.trend.down::before{content:'\f063';font-family:'Font Awesome 6 Free';font-weight:900}
.mini-spark{display:inline-flex;align-items:flex-end;gap:2px;height:21px;vertical-align:middle}
.mini-spark i{width:3px;background:var(--primary);border-radius:2px;display:block;min-height:2px;opacity:.7}
.mini-spark i:last-child{opacity:1}
.legend-row{display:flex;flex-wrap:wrap;gap:var(--fib-13);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--fib-13)}
.legend-row .lg{display:inline-flex;align-items:center;gap:var(--fib-5)}
.legend-row .lg b{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ============================================================================
   32. LAYOUTS DE FORMULÁRIO — inline, horizontal, agrupado
   ========================================================================== */
.form-inline{display:flex;flex-wrap:wrap;gap:var(--fib-13);align-items:flex-end}
.form-inline .field{flex:1;min-width:144px;margin-bottom:0}
.form-horizontal .field{display:grid;grid-template-columns:144px 1fr;align-items:center;gap:var(--fib-13)}
.form-horizontal .field > label{margin-bottom:0;text-align:right}
.input-affix{display:flex;align-items:stretch;border:1px solid var(--border-mid);border-radius:var(--radius-sm);overflow:hidden;background:var(--dark-3)}
.input-affix .affix{display:flex;align-items:center;padding:0 var(--fib-13);background:var(--dark-4);color:var(--text-muted);font-size:var(--fs-sm)}
.input-affix input{border:0;border-radius:0;background:transparent}
.input-affix:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-softer)}
.field-row{display:flex;gap:var(--fib-13)}
.field-row > .field{flex:1}
@media (max-width:560px){
  .form-horizontal .field{grid-template-columns:1fr}
  .form-horizontal .field > label{text-align:left}
  .field-row{flex-direction:column;gap:0}
}

/* ============================================================================
   33. PREVIEW NO HOVER (cartão de pré-visualização)
   ========================================================================== */
.hover-preview{position:relative}
.hover-preview .preview-pop{position:absolute;z-index:var(--z-tooltip);left:0;top:calc(100% + 8px);
  width:266px;background:var(--dark-2);border:1px solid var(--border-mid);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:var(--fib-13);opacity:0;transform:translateY(-5px);pointer-events:none;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.hover-preview:hover .preview-pop{opacity:1;transform:translateY(0)}

/* ============================================================================
   34. DRAG HANDLES & SORTABLE
   ========================================================================== */
.drag-handle{cursor:grab;color:var(--text-dim);transition:color var(--t-base) var(--ease)}
.drag-handle:hover{color:var(--text-muted)}
.drag-handle:active{cursor:grabbing}
.sortable-ghost{opacity:.4;background:var(--primary-softer)}
.sortable-chosen{box-shadow:var(--shadow-md)}
.reorder-row{display:flex;align-items:center;gap:var(--fib-8);padding:var(--fib-8);border-radius:var(--radius-sm);
  background:var(--dark-3);border:1px solid var(--border-soft);transition:border-color var(--t-base) var(--ease)}
.reorder-row:hover{border-color:var(--border-strong)}

/* ============================================================================
   35. SKELETONS POR TELA (combinam com o layout real)
   ========================================================================== */
.sk-kanban{display:flex;gap:var(--fib-13)}
.sk-kanban .sk-col{min-width:233px;width:233px;background:var(--dark-2);border-radius:var(--radius-md);padding:var(--fib-8)}
.sk-kanban .sk-col .skeleton{height:68px;border-radius:var(--radius-sm);margin-bottom:var(--fib-8)}
.sk-table-row{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-13) 0;border-bottom:1px solid var(--border-soft)}
.sk-table-row .skeleton{height:13px;border-radius:var(--radius-full)}
.sk-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--fib-13)}
.sk-dash .skeleton{height:89px;border-radius:var(--radius-md)}
.sk-chat{display:flex;flex-direction:column;gap:var(--fib-8)}
.sk-chat .skeleton{height:34px;border-radius:var(--radius-md);width:60%}
.sk-chat .skeleton:nth-child(even){align-self:flex-end;width:70%}

/* ============================================================================
   36. COACH MARKS / DICAS GUIADAS
   ========================================================================== */
.coach{position:relative}
.coach::after{content:attr(data-coach);position:absolute;z-index:var(--z-tooltip);
  background:var(--primary);color:var(--text-on-lime);font-size:var(--fs-xs);font-weight:600;
  padding:var(--fib-8) var(--fib-13);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  white-space:nowrap;bottom:calc(100% + 13px);left:50%;transform:translateX(-50%);
  animation:coachBob 1.6s ease-in-out infinite}
@keyframes coachBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
.coach-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 0 rgba(var(--primary-rgb),.6);animation:pingAnim 1.6s ease-out infinite}
.hint-bubble{background:var(--primary-softer);border:1px solid rgba(var(--primary-rgb),.3);border-radius:var(--radius-md);
  padding:var(--fib-13) var(--fib-21);font-size:var(--fs-sm);display:flex;gap:var(--fib-13);align-items:flex-start}
.hint-bubble i{color:var(--primary-ink);margin-top:2px}

/* ============================================================================
   37. RATING, UPLOAD, TABS VARIANTES
   ========================================================================== */
.rating-input{display:inline-flex;gap:var(--fib-3);direction:rtl}
.rating-input input{display:none}
.rating-input label{cursor:pointer;color:var(--dark-5);font-size:var(--fs-md);transition:color var(--t-fast) var(--ease)}
.rating-input label:hover,.rating-input label:hover ~ label,.rating-input input:checked ~ label{color:var(--warning)}
.upload-zone{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--fib-34) var(--fib-21);
  text-align:center;color:var(--text-muted);cursor:pointer;transition:all var(--t-base) var(--ease)}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--primary);background:var(--primary-softer);color:var(--primary-ink)}
.upload-zone i{font-size:var(--fs-xl);display:block;margin-bottom:var(--fib-8);transition:transform var(--t-base) var(--ease-bounce)}
.upload-zone:hover i{transform:translateY(-3px)}
.tabs-vertical{display:flex;flex-direction:column;gap:var(--fib-3);border-bottom:0;border-right:1px solid var(--border-soft)}
.tabs-vertical .tab{border-bottom:0;border-right:2px solid transparent;margin:0 -1px 0 0}
.tabs-vertical .tab.active{border-right-color:var(--primary)}
.tabs-boxed{background:var(--dark-3);padding:var(--fib-3);border-radius:var(--radius-md);border:1px solid var(--border-mid);gap:var(--fib-2)}
.tabs-boxed .tab{border:0;border-radius:var(--radius-sm);margin:0;padding:var(--fib-8) var(--fib-13)}
.tabs-boxed .tab.active{background:var(--dark-2);color:var(--primary-ink);box-shadow:var(--shadow-xs)}

/* ============================================================================
   38. AVATAR GROUP, PAGINAÇÃO, BREADCRUMB — polish
   ========================================================================== */
.avatar-stack{display:flex}
.avatar-stack .avatar{margin-left:-11px;border:2px solid var(--dark-2);transition:transform var(--t-base) var(--ease),margin var(--t-base) var(--ease)}
.avatar-stack .avatar:first-child{margin-left:0}
.avatar-stack:hover .avatar{margin-left:var(--fib-3)}
.avatar-stack .avatar-more{background:var(--dark-4);color:var(--text-muted);font-size:var(--fs-xs)}
.pagination .page{transition:all var(--t-base) var(--ease)}
.pagination .page:active{transform:scale(.92)}
.breadcrumb a{transition:color var(--t-base) var(--ease)}
.breadcrumb .sep{opacity:.5}

/* ============================================================================
   39. RELATÓRIO IMPRESSO — cabeçalho/rodapé limpos
   ========================================================================== */
@media print{
  @page{margin:14mm}
  .report-header{display:flex!important;align-items:center;justify-content:space-between;
    border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:13px}
  .report-header h1{font-size:18px}
  .report-meta{font-size:10px;color:#555;text-align:right}
  .report-footer{display:block!important;margin-top:21px;border-top:1px solid #ccc;padding-top:8px;
    font-size:9px;color:#888;text-align:center}
  table{font-size:11px}
  th{background:#f3f3f3!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stat .v{color:#111!important}
  .ai-box{border:1px solid #ccc;background:#fafafa!important}
}
.report-footer{display:none}

/* ============================================================================
   40. POLIMENTO FINAL — transições globais suaves e consistência
   ========================================================================== */
a,button,.chip,.tag,.badge,.nav-item,.card,.stat,.btn,.filter-pill,.tab,
input,select,textarea,.toast,.modal-close,.dropdown-item,.kpi-mini,.rank-item{
  -webkit-tap-highlight-color:transparent}
.panel{transition:box-shadow var(--t-base) var(--ease)}
.panel:hover{box-shadow:var(--shadow-sm)}
.panel-head h3 i{transition:transform var(--t-base) var(--ease-bounce)}
.panel:hover .panel-head h3 i{transform:scale(1.1)}
/* seleção de texto consistente */
::selection{background:var(--primary-soft);color:var(--primary-ink)}
/* foco em links de texto */
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}
/* evita “flash” de conteúdo sem estilo de cor */
#app-view,#login-view{transition:opacity var(--t-base) var(--ease)}
/* respiro consistente no rodapé das listas longas */
.table-wrap{padding-bottom:var(--fib-3)}
/* divisórias suaves entre grupos de filtro */
.toolbar + .panel,.toolbar + .kanban{margin-top:0}
/* botão flutuante de ação (se usado) com entrada */
.fab{animation:bounceIn var(--t-slow) var(--ease-bounce)}
.fab:active{transform:scale(.9)}
/* menus e popovers nunca cortam na borda da tela (mobile) */
@media (max-width:480px){
  .dropdown-menu{position:fixed;left:var(--fib-13);right:var(--fib-13);top:auto;bottom:var(--fib-13);width:auto;min-width:0}
}
/* estado “arrastando” no body desativa seleção (evita selecionar texto ao arrastar card) */
body.is-dragging{user-select:none;cursor:grabbing}
body.is-dragging .card:not(.dragging){opacity:.85}

/* ============================================================================
   41. BARRA DE PROGRESSO DE TOPO (troca de view / carregamento)
   ========================================================================== */
.top-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad-lime-teal);z-index:200;
  width:0;box-shadow:0 0 8px rgba(var(--primary-rgb),.6);transition:width .3s var(--ease),opacity .3s var(--ease)}
.top-progress.active{width:80%}
.top-progress.done{width:100%;opacity:0}

/* ============================================================================
   42. KANBAN MOBILE — indicadores de coluna (pontinhos) + dica de swipe
   ========================================================================== */
.kanban-dots{display:none}
@media (max-width:768px){
  .kanban-dots{display:flex;justify-content:center;gap:var(--fib-5);margin-top:var(--fib-8)}
  .kanban-dots .kd{width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:all var(--t-base) var(--ease)}
  .kanban-dots .kd.active{background:var(--primary);width:21px;border-radius:var(--radius-full)}
  .kanban::-webkit-scrollbar{height:0}
}

/* ============================================================================
   43. CONTAINER QUERIES — painéis se adaptam ao próprio espaço
   ========================================================================== */
.cq{container-type:inline-size}
@container (max-width:340px){
  .cq .grid-stats{grid-template-columns:1fr}
  .cq .form-grid{grid-template-columns:1fr}
}
@container (min-width:680px){
  .cq .lead-grid{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   44. EMPTY STATES — variações ilustradas (CSS puro)
   ========================================================================== */
.empty-illust{width:120px;height:89px;margin:0 auto var(--fib-21);position:relative}
.empty-illust .e-card{position:absolute;background:var(--dark-3);border:1px solid var(--border-soft);border-radius:var(--radius-sm)}
.empty-illust .e1{width:68px;height:42px;left:8px;top:21px;transform:rotate(-6deg)}
.empty-illust .e2{width:68px;height:42px;right:8px;top:13px;transform:rotate(6deg)}
.empty-illust .e3{width:68px;height:42px;left:26px;top:5px;background:var(--primary-softer);border-color:rgba(var(--primary-rgb),.3)}
.empty-actions{display:flex;gap:var(--fib-8);justify-content:center;flex-wrap:wrap}

/* ============================================================================
   45. NÚMEROS / CONTADORES — ênfase e animação de "subida"
   ========================================================================== */
.count-up{font-variant-numeric:tabular-nums;display:inline-block}
.stat .v{font-variant-numeric:tabular-nums}
.metric-delta{font-size:var(--fs-xs);font-weight:600;margin-left:var(--fib-5);padding:1px var(--fib-5);border-radius:var(--radius-full)}
.metric-delta.pos{color:var(--success);background:rgba(var(--success-rgb),.12)}
.metric-delta.neg{color:var(--danger);background:rgba(var(--danger-rgb),.12)}
.big-number{font-size:var(--fs-2xl);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* ============================================================================
   46. PREFERÊNCIAS DO SISTEMA (dados reduzidos, transparência)
   ========================================================================== */
@media (prefers-reduced-data:reduce){
  .panel-glow::before,.ai-box::before,.stat::after,.fr-bar::after{display:none}
  *{box-shadow:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .modal-bg,.cmdk-bg,.drawer-bg{backdrop-filter:none;background:rgba(0,0,0,.75)}
}

/* ============================================================================
   47. UTILITÁRIOS DE ACESSIBILIDADE & FOCO
   ========================================================================== */
.skip-link{position:absolute;left:-999px;top:0;z-index:300;background:var(--primary);color:var(--text-on-lime);
  padding:var(--fib-8) var(--fib-21);border-radius:0 0 var(--radius-sm) 0;font-weight:600}
.skip-link:focus{left:0}
.focus-trap-active{overflow:hidden}
[role="button"]{cursor:pointer}
[aria-disabled="true"]{opacity:.5;pointer-events:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ============================================================================
   48. UTILITÁRIOS DE LAYOUT FINAIS
   ========================================================================== */
.grid-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-13)}
.grid-cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fib-13)}
.grid-cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fib-13)}
.aspect-1{aspect-ratio:1}.aspect-16-9{aspect-ratio:16/9}.aspect-4-3{aspect-ratio:4/3}
.sticky-top{position:sticky;top:0;z-index:var(--z-sticky)}
.sticky-bottom{position:sticky;bottom:0}
.z-modal{z-index:var(--z-modal)}.z-top{z-index:200}
.min-h-0{min-height:0}.min-w-0{min-width:0}
.overflow-clip{overflow:clip}
.gap-0{gap:0}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.inset-x{left:0;right:0}.inset-y{top:0;bottom:0}
.rounded-pill{border-radius:var(--radius-full)}
.shadow-none{box-shadow:none!important}
.bg-none{background:none!important}
.whitespace-pre{white-space:pre-wrap}
.break-word{word-break:break-word;overflow-wrap:anywhere}
@media (max-width:768px){
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
  .hide-mobile{display:none!important}
}
@media (min-width:769px){.hide-desktop{display:none!important}}
@media (max-width:480px){.hide-xs{display:none!important}}

/* ============================================================================
   49. POLISH ADICIONAL — popup do lead, drawer, follow-ups, config
   ========================================================================== */
.lead-conv label{display:flex;align-items:center;gap:var(--fib-5)}
.lead-info .field:last-of-type{margin-bottom:0}
.ai-summary{position:relative}
.drawer-foot{gap:var(--fib-8);flex-wrap:wrap}
.drawer-foot .btn{flex:1;min-width:89px}
.done-fu{transition:all var(--t-base) var(--ease)}
.done-fu:hover{background:var(--success);color:#04210f;border-color:var(--success)}
.done-fu:hover i{transform:scale(1.15)}
.tpl-enable + .track{transition:all var(--t-base) var(--ease)}
.card-surface{transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.card-surface:hover{border-color:rgba(var(--primary-rgb),.25)}
.callout{transition:background var(--t-base) var(--ease)}
.callout:hover{background:rgba(var(--primary-rgb),.1)}
.alert{transition:transform var(--t-base) var(--ease)}
.alert-primary .btn{margin-top:var(--fib-8)}

/* config: cartões de seção com leve elevação ao focar dentro */
.panel:focus-within{box-shadow:var(--shadow-md);border-color:rgba(var(--primary-rgb),.2)}
/* QR maior e com moldura clara */
.qr-box img{transition:transform var(--t-base) var(--ease)}
.qr-box:hover img{transform:scale(1.02)}
.qr-steps li{transition:color var(--t-base) var(--ease)}
.qr-steps li:hover{color:var(--text-white)}

/* ============================================================================
   50. ESTADOS VAZIOS POR CONTEXTO + MENSAGENS DE SISTEMA
   ========================================================================== */
.sys-msg{display:flex;align-items:center;gap:var(--fib-13);padding:var(--fib-21);border-radius:var(--radius-md);
  background:var(--dark-3);border:1px dashed var(--border-strong);color:var(--text-muted);font-size:var(--fs-sm)}
.sys-msg i{font-size:var(--fs-lg);color:var(--text-dim)}
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--warning);color:#3a2400;
  text-align:center;padding:var(--fib-5);font-size:var(--fs-sm);font-weight:600;transform:translateY(-100%);transition:transform var(--t-base) var(--ease)}
.offline-banner.show{transform:translateY(0)}
.saved-flash{animation:savedFlash 1s var(--ease)}
@keyframes savedFlash{0%{box-shadow:0 0 0 0 rgba(var(--success-rgb),.5)}100%{box-shadow:0 0 0 13px rgba(var(--success-rgb),0)}}

/* ============================================================================
   51. CONSISTÊNCIA FINAL — herança de cor, antialiasing, motion-safe
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .nav-item,.card,.stat,.btn,.chip{will-change:auto}
}
svg{fill:currentColor}
strong,b{font-weight:700}
em,i.italic{font-style:italic}
hr{border:0;height:1px;background:var(--border-soft);margin:var(--fib-21) 0}
mark{background:var(--primary-soft);color:var(--text-white);padding:0 var(--fib-3);border-radius:var(--radius-xs)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--dark-4);
  padding:1px var(--fib-5);border-radius:var(--radius-xs)}
kbd{font-family:var(--font)}
small{color:var(--text-muted)}
.text-pre{white-space:pre-wrap;word-break:break-word}
.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}
.smooth{transition:all var(--t-base) var(--ease)}
.snap-x{scroll-snap-type:x mandatory}.snap-start{scroll-snap-align:start}
.contain-paint{contain:paint}

/* ============================================================================
   52. TOGGLE DE TEMA (botão) + transição global de tema
   ========================================================================== */
html{transition:background-color var(--t-base) var(--ease)}
body{transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.theme-toggle{width:38px;height:38px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;
  background:var(--dark-3);color:var(--text-muted);transition:all var(--t-base) var(--ease)}
.theme-toggle:hover{color:var(--primary-ink);background:var(--dark-4)}

/* ============================================================================
   53. IMPRESSÃO — numeração e quebras
   ========================================================================== */
@media print{
  .page-break{page-break-before:always}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
  .panel{page-break-inside:avoid}
}

/* ============================================================================
   54. ÚLTIMOS AJUSTES DE CONSISTÊNCIA
   ========================================================================== */
.nav-item,.bottom-nav a{ -webkit-touch-callout:none }
.modal,.drawer{ overscroll-behavior:contain }
.chat-thread,.column-body,.cmdk-list,.dropdown-menu{ overscroll-behavior:contain }
.btn,.chip,.nav-item,.card,.filter-pill{ touch-action:manipulation }
input[type=number]::-webkit-inner-spin-button{opacity:.4}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
::-webkit-scrollbar-corner{background:transparent}
.text-truncate-1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.7}
.tracking-tight{letter-spacing:-.02em}.tracking-wide{letter-spacing:.05em}
.font-num{font-variant-numeric:tabular-nums}
.transition-colors{transition:color var(--t-base) var(--ease),background-color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.transition-transform{transition:transform var(--t-base) var(--ease)}
.scale-hover:hover{transform:scale(1.03)}
.opacity-hover{opacity:.7;transition:opacity var(--t-base) var(--ease)}
.opacity-hover:hover{opacity:1}

/* ============================================================================
   55. AVATAR COM FOTO (WhatsApp) — fallback p/ iniciais se a URL expirar
   ========================================================================== */
.avatar{position:relative;overflow:hidden}
.avatar.has-photo{background:var(--dark-4)}
.avatar.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;animation:fadeIn var(--t-base) var(--ease)}
.avatar .av-init{position:relative;z-index:0}
.avatar.has-photo .av-init{visibility:hidden}
.card:hover .avatar.has-photo img,tr:hover .avatar.has-photo img{transform:scale(1.05);transition:transform var(--t-base) var(--ease)}

/* filtro de data do dashboard */
.date-filter{display:flex;align-items:center;gap:var(--fib-8);flex-wrap:wrap;margin-bottom:var(--fib-21)}
.date-filter .seg-presets{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)}
.date-filter .seg-presets 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);white-space:nowrap}
.date-filter .seg-presets button.active{background:var(--primary);color:var(--text-on-lime)}
.date-filter .seg-presets button:not(.active):hover{color:var(--text-white)}
.date-filter .custom-range{display:flex;align-items:center;gap:var(--fib-5)}
.date-filter .custom-range input{width:150px}
.date-filter .range-label{font-size:var(--fs-sm);color:var(--text-muted)}
@media (max-width:560px){.date-filter .custom-range input{width:120px}.date-filter{gap:var(--fib-5)}}

/* ───────── Central de Follow-ups (v2.6.0) ───────── */
.pill-count{display:inline-flex;align-items:center;justify-content:center;min-width:var(--fib-21);
  height:var(--fib-21);padding:0 var(--fib-5);margin-left:var(--fib-3);border-radius:var(--fib-13);
  background:var(--surface-2);font-size:var(--fs-xs);font-weight:700;line-height:1}
.filter-pill.active .pill-count{background:rgba(255,255,255,.25)}
.fu-grid .card-surface{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.fu-grid .card-surface:hover{transform:translateY(-2px);box-shadow:0 var(--fib-5) var(--fib-21) rgba(0,0,0,.10)}
.fu-msg{word-break:break-word}
.fu-preview{word-break:break-word;white-space:pre-wrap}
@media (max-width:480px){.fu-grid{grid-template-columns:1fr!important}}

/* ───────── Origem do lead / atribuição de canal (v2.10.0) ───────── */
.origin-badge{display:inline-flex;align-items:center;gap:var(--fib-3);
  font-size:11px;font-weight:600;line-height:1;padding:var(--fib-3) var(--fib-8);
  border-radius:var(--radius-full);color:var(--oc,#888);
  background:color-mix(in srgb,var(--oc,#888) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--oc,#888) 30%,transparent);white-space:nowrap}
.origin-badge i{font-size:10px}

.src-bars{display:flex;flex-direction:column;gap:var(--fib-13)}
.src-row{display:flex;align-items:center;gap:var(--fib-13)}
.src-label{flex:0 0 144px;display:flex;align-items:center;gap:var(--fib-5);
  font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-track{flex:1;height:var(--fib-13);border-radius:var(--radius-full);
  background:color-mix(in srgb,var(--text-muted) 18%,transparent);overflow:hidden}
.src-fill{height:100%;border-radius:var(--radius-full);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.src-val{flex:0 0 auto;min-width:var(--fib-55);text-align:right;font-weight:700;font-size:13px}
@media(max-width:480px){.src-label{flex-basis:89px}}

/* ───────── Guia de rastreio de origem (passo-a-passo + teste) v2.11.0 ───────── */
.step-row{display:flex;gap:var(--fib-13);align-items:flex-start;margin-bottom:var(--fib-13)}
.step-n{flex:0 0 auto;width:var(--fib-34);height:var(--fib-34);border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;font-weight:800;
  background:color-mix(in srgb,var(--primary) 16%,transparent);color:var(--primary)}
.step-row p{margin:var(--fib-3) 0 0}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--fib-21)}
@media(max-width:560px){.test-grid{grid-template-columns:1fr}}
.test-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:var(--fib-8)}
.chk{display:flex;align-items:center;gap:var(--fib-8);font-size:13px;padding:var(--fib-3) 0;line-height:1.4}
.chk.ok{color:var(--text-soft)} .chk.ok i{color:#22c55e}
.chk.no{color:var(--text-soft)} .chk.no i{color:var(--danger,#ea4335)}
.origin-result{padding:var(--fib-13);border-radius:var(--radius-md);background:color-mix(in srgb,var(--primary) 8%,transparent)}
#origin-msg{width:100%;min-height:var(--fib-55);border:1px solid color-mix(in srgb,var(--text-muted) 28%,transparent);
  border-radius:var(--radius-sm);padding:var(--fib-8) var(--fib-13);font:inherit;color:inherit;background:var(--surface-2,#17191b);resize:vertical}
#origin-msg:focus{outline:none;border-color:var(--primary)}

/* ═══════════════════════════════════════════════════════════════════
   Follow-up cards — refinamento de layout/design + botões (v2.15.0)
   Escala Fibonacci (--fib-*), tokens semânticos, hover e faixa de status.
   ═══════════════════════════════════════════════════════════════════ */
.fu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fib-288,288px),1fr));gap:var(--fib-13,13px);margin-top:var(--fib-13,13px)}
.fu-card{
  position:relative;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--text-muted) 16%,transparent);
  border-radius:var(--radius-lg,13px);padding:var(--fib-13,13px);
  display:flex;flex-direction:column;gap:var(--fib-8,8px);overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.fu-card:hover{transform:translateY(-2px);box-shadow:0 var(--fib-8,8px) var(--fib-21,21px) rgba(0,0,0,.12);
  border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.fu-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:3px;background:transparent}
.fu-card--overdue::before{background:var(--danger)}
.fu-card--overdue .fu-card__when{color:var(--danger);font-weight:600}
.fu-card--done::before{background:var(--success)}
.fu-card--cancel{opacity:.66}
.fu-card--cancel::before{background:var(--text-dim)}
.fu-card__head{display:flex;align-items:center;gap:var(--fib-8,8px)}
.fu-card__id{flex:1;min-width:0}
.fu-card__name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fu-chip{display:inline-flex;align-items:center;gap:var(--fib-5,5px);font-size:11px;color:var(--text-muted);margin-top:2px}
.fu-chip--wa{color:var(--success)}
.fu-kind{display:inline-flex;align-items:center;gap:var(--fib-5,5px);flex:none;font-size:11px;font-weight:600;
  color:var(--text-muted);background:var(--surface-2,rgba(127,127,127,.08));
  border:1px solid color-mix(in srgb,var(--text-muted) 16%,transparent);border-radius:var(--radius-full,99px);padding:3px var(--fib-8,8px)}
.fu-kind--posvenda{color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,transparent)}
.fu-kind--upsell{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,transparent)}
.fu-kind--recompra{color:var(--primary-ink,var(--primary))}
.fu-card__meta{display:flex;align-items:center;gap:var(--fib-8,8px);font-size:12px;color:var(--text-muted);flex-wrap:wrap}
.fu-card__msg{display:flex;gap:var(--fib-8,8px);font-size:13px;line-height:1.45;color:var(--text-muted);
  background:color-mix(in srgb,var(--primary) 5%,var(--surface-2,transparent));
  border:1px solid color-mix(in srgb,var(--primary) 12%,transparent);
  border-radius:var(--radius-md,8px);padding:var(--fib-8,8px) var(--fib-13,13px)}
.fu-card__msg i{color:var(--primary);font-size:11px;margin-top:3px;flex:none}
.fu-card__msg span{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fu-card__foot{display:flex;align-items:center;gap:var(--fib-8,8px);margin-top:auto;padding-top:var(--fib-5,5px)}
.fu-btn-primary{flex:1;justify-content:center}
.fu-card__icons{display:flex;gap:var(--fib-5,5px)}
.fu-ic{transition:color .15s ease,border-color .15s ease,background .15s ease}
.fu-ic:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 45%,transparent);
  background:color-mix(in srgb,var(--primary) 8%,transparent)}
.fu-ic--danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 8%,transparent)}