/* leads — S3 Clientes aprovados + I.A + Tráfego Pago */
/* Spec 2026-09-15, seções 3, 4 e 5 */

/* Foguinho do telefone quente (UX do dono, 13/11): botão de 22 px, o mesmo tamanho dos mini copiar/WhatsApp, sempre POR ÚLTIMO
   na linha do telefone. A caixa só brilha (sem escala: não empurra os vizinhos); a chama de dentro tremula. A vaga (.hot-phone-slot)
   ocupa o mesmo lugar nas linhas sem fogo. O balão "Telefone quente" abre no hover (só com mouse), no foco do teclado e no
   toque/clique (.is-open, ligado em ui/foguinho.js). Com prefers-reduced-motion, tudo parado. */
.hot-phone-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  /* style.css dá min-height 44px a todo button (alvo de toque): aqui a caixa é 22 px e o alvo cresce no ::before (pointer: coarse). */
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 4px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  border-radius: 7px;
  background: rgba(255, 69, 0, 0.12);
  border: 1px solid rgba(255, 69, 0, 0.35);
  animation: flamePulse 2.4s infinite ease-in-out;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hot-phone-slot {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0 0 0 4px;
  vertical-align: middle;
}
.hot-phone-badge__chama {
  display: inline-block;
  transform-origin: 50% 85%;
  animation: flameFlicker 1.6s infinite ease-in-out;
  will-change: transform;
}
/* style.css tem .lead-card button{width:100%;margin-top:10px} e a versão do tema escuro (mais fortes que .hot-phone-badge): na
   lateral da I.A o fogo virava uma barra. Aqui ele volta ao desenho de 22 px. */
.lead-card .hot-phone-badge { width: 22px; min-height: 0; margin: 0 0 0 4px; }
.crm-theme-dark .lead-card .hot-phone-badge { width: 22px; min-height: 0; margin: 0 0 0 4px; font-size: 12px; color: inherit; background: rgba(255, 69, 0, 0.12); border: 1px solid rgba(255, 69, 0, 0.35); }
.crm-theme-dark .lead-card .hot-phone-badge:hover { background: rgba(255, 69, 0, 0.2); color: inherit; }
/* style.css dá button:hover{filter:brightness(.94)}: filter (como transform e will-change) no fogo prende o balão fixed na caixa
   do fogo e o joga para longe. Aqui o hover só reforça o fundo. */
.hot-phone-badge:hover { filter: none; background: rgba(255, 69, 0, 0.2); }
.hot-phone-badge:focus-visible {
  outline: 2px solid var(--de-laranja-principal, #FF7617);
  outline-offset: 2px;
}
.hot-phone-tip {
  /* fixed: a linha e a tabela da lista cortam o que passa (overflow hidden); ui/foguinho.js põe left/top e a seta (--seta-x). */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(4px);
  padding: 5px 9px;
  border-radius: 7px;
  background: #1C1C1E;
  color: #FFFFFF;
  font: 600 11px/1.2 var(--de-font-body, 'Inter', sans-serif);
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.hot-phone-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--seta-x, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: #1C1C1E;
}
.hot-phone-tip[data-lado="baixo"]::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #1C1C1E; }
.hot-phone-tip[data-lado="baixo"] { transform: translateY(-4px); }
.hot-phone-badge.is-open .hot-phone-tip,
.hot-phone-badge:focus-visible .hot-phone-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
/* Regras de span das telas (.lc-card-linhas span no quadro, .ia-leads .lead-card__contact span na lateral) não valem aqui. */
.hot-phone-badge .hot-phone-tip { color: #FFFFFF; }
.ia-leads .lead-card__contact .lead-tel--quente { display: inline; }
/* Lateral da I.A: o cartão (.card-glow) é isolation:isolate e a I.A ao lado (#ia-host) é fixed com z-index 2; enquanto o balão
   aparece, o cartão sobe por cima dela. A linha número → Copiar → fogo precisa caber nos 167 px de dentro do cartão. */
.lead-card:has(.hot-phone-badge:is(:hover, :focus-visible, .is-open)),
.lead-card:has(.lead-tel--quente:hover) { z-index: 3; }
.ia-leads .lead-card .lead-card__phone--linha { gap: 4px; } /* ia.css carrega depois: um nível a mais */
.ia-leads .lead-card .lead-card__phone--linha > .hot-phone-badge { margin: 0; }
.ia-leads .lead-card .lead-card__copy-mini { padding-left: 5px !important; padding-right: 5px !important; } /* .ia-leads .btn usa !important */
/* Detalhe: .aline-detail-card header button deixa todo botão do cabeçalho laranja, 100% e 52 px, com !important, e sobe 1 px no
   hover (transform prende o balão fixed). O fogo volta ao desenho dele; o brilho fica parado aqui (o box-shadow !important
   de lá venceria a animação de qualquer jeito). */
.aline-detail-card header button.hot-phone-badge { width: 22px !important; height: 22px !important; min-height: 0 !important; margin: 0 0 0 4px !important; padding: 0 !important; border-radius: 7px !important; background: rgba(255, 69, 0, 0.12) !important; border: 1px solid rgba(255, 69, 0, 0.35) !important; color: inherit !important; font-size: 12px !important; font-weight: 400 !important; gap: 0 !important; box-shadow: 0 0 4px rgba(255, 69, 0, 0.45) !important; vertical-align: middle; }
.aline-detail-card header button.hot-phone-badge:hover { transform: none !important; filter: none !important; background: rgba(255, 69, 0, 0.2) !important; }
/* Número quente: o mesmo token de cor do selo "ELEGÍVEL NA SEMPRE FÁCIL" (.banco-consulta--laranja); só a cor, sem fundo nem peso. */
.lead-tel--quente { color: var(--de-laranja-principal, #FF7617); }
@media (hover: hover) {
  .hot-phone-badge:hover .hot-phone-tip,
  .lead-tel--quente:hover ~ .hot-phone-badge .hot-phone-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .16s ease, visibility 0s; }
}

@keyframes flamePulse {
  0%, 100% { box-shadow: 0 0 2px rgba(255, 69, 0, 0.35); }
  50% { box-shadow: 0 0 9px rgba(255, 69, 0, 0.75); }
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  20% { transform: scale(1.08, 0.96) rotate(-3deg); filter: brightness(1.08); }
  45% { transform: scale(0.96, 1.07) rotate(2deg); filter: brightness(1.15); }
  70% { transform: scale(1.05, 0.98) rotate(-1.5deg); filter: brightness(1.05); }
}
/* Toque: alvo de 44 px de altura sem mudar o desenho; cresce só para cima, para baixo e para a direita (o fogo é o último da
   linha), nunca por cima do WhatsApp que fica à esquerda. */
@media (pointer: coarse) {
  .hot-phone-badge::before { content: ''; position: absolute; inset: -11px -11px -11px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-phone-badge, .hot-phone-badge__chama { animation: none; }
  .hot-phone-tip { transition: none; }
}

.ia-shell{display:flex;flex-direction:row;height:calc(100vh - var(--de-topbar-height, 64px));gap:0;background:var(--de-canvas, #f5f5f7);}
.ia-sidebar{width:12%;min-width:216px;background:var(--de-surface, #ffffff);border-right:1px solid var(--de-border, #e5e5ea);display:flex;flex-direction:column;overflow:hidden;}
.ia-sidebar header{padding:20px 16px 12px;border-bottom:1px solid var(--de-border, #e5e5ea);}
.ia-sidebar header h2{font:700 18px/1.2 var(--de-font-title, 'Plus Jakarta Sans', sans-serif);margin:0 0 4px;color:var(--de-ink, #1c1c1e);}
.ia-sidebar header p{font:400 13px/1.4 var(--de-font-body, 'Inter', sans-serif);color:var(--de-muted, #8e8e93);margin:0;}
.ia-leads-list{flex:1;overflow-y:auto;padding:8px;}
.ia-leads-list .aline-list-item{display:flex!important;flex-direction:column!important;gap:4px!important;padding:10px!important;border-radius:12px!important;border:1px solid #DEDBD5!important;background:#FFFFFF!important;margin-bottom:8px!important;box-sizing:border-box!important;min-width:0!important;box-shadow:none!important;}
.ia-leads-list .aline-list-item .col-nome,
.ia-leads-list .aline-list-item .col-cpf,
.ia-leads-list .aline-list-item .col-tel,
.ia-leads-list .aline-list-item .col-banco,
.ia-leads-list .aline-list-item .col-valor,
.ia-leads-list .aline-list-item .col-status,
.ia-leads-list .aline-list-item .col-acao{flex:none!important;height:auto!important;min-height:0!important;width:100%!important;box-sizing:border-box!important;}
.ia-leads-list .aline-list-item .col-nome{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;}
.ia-leads-list .aline-list-item .lead-name{font-size:13px!important;font-weight:700!important;margin:0 0 2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.ia-leads-list .aline-list-item .lead-timer{font-size:11px!important;}
.ia-leads-list .aline-list-item .col-cpf,
.ia-leads-list .aline-list-item .col-tel,
.ia-leads-list .aline-list-item .col-banco,
.ia-leads-list .aline-list-item .col-valor{font-size:11px!important;color:#5D6068!important;white-space:normal!important;word-break:break-word!important;margin:1px 0!important;}
.ia-leads-list .aline-list-item .col-status{margin-top:4px!important;}
.ia-leads-list .aline-list-item .col-acao{margin-top:6px!important;}
.ia-leads-list .aline-list-item .btn-reserve{width:100%!important;justify-content:center!important;font-size:12px!important;padding:6px 10px!important;}
.ia-main{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;}
.ia-frame-container{flex:1;display:flex;flex-direction:column;position:relative;}
.ia-frame-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px;color:var(--de-muted, #8e8e93);}
.ia-frame-placeholder h2{font:700 22px/1.2 var(--de-font-title);color:var(--de-ink);margin:0 0 8px;}
.ia-frame-placeholder p{font:400 14px/1.5 var(--de-font-body);margin:0;}
.ia-iframe{flex:1;width:100%;border:none;min-height:400px;}
.ia-frame-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:40px;gap:16px;}
.ia-frame-error h2{font:700 20px/1.2 var(--de-font-title);color:var(--de-ink);margin:0;}
.ia-frame-error p{font:400 14px/1.5 var(--de-font-body);color:var(--de-muted);margin:0;max-width:400px;}
.ia-lead-detail{padding:16px;border-top:1px solid var(--de-border);overflow-y:auto;}

.trafego-shell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 16px;min-height:calc(100vh - var(--de-topbar-height, 64px));background:var(--de-canvas, #f5f5f7);}
.trafego-card{max-width:520px;width:100%;text-align:center;padding:40px 32px;}
.trafego-card h2{font:700 24px/1.2 var(--de-font-title);color:var(--de-ink);margin:12px 0 8px;}
.trafego-card p{margin:0 0 24px;}

/* ==========================================================================
   CLIENTES APROVADOS — VISUAL MAQUETE (S3)
   - Layout Lista e Quadro (Kanban)
   - Paleta oficial do ENTREGA-FRONT.md
   - Contador 24h discreto (vermelho nas últimas 2h)
   - Animação do botão Reservar (brilho 0,6s + varredura no card)
   - Expirado esmaecido
   - 1440 e 390 sem rolagem lateral
   ========================================================================== */

.aline-opportunities-reference {
  font-family: var(--de-font-body, 'Inter', -apple-system, sans-serif);
  color: #181818;
  background: var(--de-canvas, #F7F5F1) !important;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: clip;
}

.aline-opportunities-shell {
  display: flex;
  flex-direction: column;
  background: var(--de-canvas, #F7F5F1) !important;
  width: 100%;
  box-sizing: border-box;
}

/* 1. Hero do topo claro (sem faixa escura) */
.aline-opportunities-hero {
  max-width: var(--de-max, 1860px);
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 2.8vw, 32px) clamp(18px, 3vw, 32px) 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  background: var(--de-canvas, #F7F5F1) !important;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* Rótulo de seção e etiqueta de demonstração (estilizados a partir do markup) */
.aline-opportunities-hero span[style*="CLIENTES APROVADOS"],
.aline-opportunities-hero > div > span:first-child {
  font-family: var(--de-font-title, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  color: #A6410A !important;
  margin-bottom: 8px !important;
  display: block !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

.aline-opportunities-hero h1 {
  font-family: var(--de-font-title, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #181818 !important;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.aline-opportunities-hero h1 span {
  font-size: 13px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: #5D6068 !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.aline-opportunities-hero p {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  color: #5D6068 !important;
}

/* Alternador Lista / Quadro estilo cápsula da maquete */
.aline-view-toggle {
  display: inline-flex;
  background: #FFFFFF;
  border: 1px solid #DEDBD5;
  border-radius: 14px;
  padding: 5px;
  gap: 4px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(24,24,24,.04);
  order: 3;
}

.aline-view-toggle label,
.aline-view-toggle .aline-btn--view {
  border: 0 !important;
  background: transparent !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  color: #5D6068 !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
  user-select: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}

.aline-view-toggle span,
.aline-view-toggle .liquid-button-label {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: inherit !important;
  font: inherit !important;
}

.aline-view-toggle .liquid-button-rim,
.aline-view-toggle .liquid-button-glass {
  display: none !important;
}

.aline-view-toggle label:hover,
.aline-view-toggle .aline-btn--view:hover {
  color: #181818 !important;
}

.aline-view-toggle .aline-btn--view.active,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-view-toggle label[for="view-mode-list"],
#view-mode-board:checked ~ .aline-opportunities-shell .aline-view-toggle label[for="view-mode-board"] {
  background: #F2EFE9 !important;
  color: #181818 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(24,24,24,.06) !important;
}

/* 2. Área Principal com Grid Desktop (Lista/Quadro à esquerda, Cliente Selecionado à direita) */
.aline-opportunities-reference .aline-layout {
  max-width: var(--de-max, 1860px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px clamp(18px, 3vw, 32px) 36px !important;
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 28px !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

.aline-layout__list {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Painel CLIENTE SELECIONADO visível na direita conforme maquete */
.aline-layout__detail,
#aline-detail-root {
  display: block !important;
  min-width: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(24,24,24,.03) !important;
  position: sticky !important;
  top: 80px !important;
}

.aline-layout__detail .aline-empty {
  color: #9A9A93 !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 36px 12px !important;
}

.aline-detail-card header h3 {
  font-family: var(--de-font-title, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #181818 !important;
  margin: 0 0 12px !important;
}

.aline-detail-card header div p {
  margin: 6px 0 !important;
  font-size: 14px !important;
  color: #5D6068 !important;
}

.aline-detail-card header div strong {
  color: #181818 !important;
}

.aline-detail-card header button,
.aline-detail-card button[style*="Ver detalhes"],
.aline-detail-card [data-action="open-lead"] {
  width: 100% !important;
  height: 52px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #FF7617 !important;
  color: #FFFFFF !important;
  font-family: var(--de-font-title, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 12px rgba(255,118,23,.25) !important;
  transition: background .18s ease, transform .18s ease !important;
}

.aline-detail-card header button:hover,
.aline-detail-card [data-action="open-lead"]:hover {
  background: #E2560B !important;
  transform: translateY(-1px) !important;
}

.aline-detail-card input[type="range"],
.aline-detail-card [data-action="reserve-slide"],
.aline-detail-card [data-action="whatsapp"] {
  display: none !important;
}

/* Painel direito: os 3 desfechos são secundários (fundo branco, borda #DEDBD5, texto grafite #181818) */
.aline-detail-card [data-action="outcome"],
.aline-detail-card .btn-outcome,
.aline-detail-card .btn-outcome-secondary,
.aline-detail-card [data-action="reserve-click"],
.aline-detail-card [data-action="outcome"].liquid-button,
.aline-detail-card [data-action="outcome"].liquid-button-primary {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #DEDBD5 !important;
  background: #FFFFFF !important;
  color: #181818 !important;
  border-radius: 12px !important;
  font-family: var(--de-font-body, 'Inter', -apple-system, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
}

.aline-detail-card [data-action="outcome"]:hover,
.aline-detail-card .btn-outcome:hover,
.aline-detail-card .btn-outcome-secondary:hover,
.aline-detail-card [data-action="reserve-click"]:hover {
  background: #F7F5F0 !important;
  border-color: #C8C5BD !important;
  transform: translateY(-1px) !important;
}

.aline-detail-card [data-action="outcome"]::before,
.aline-detail-card .btn-outcome::before,
.aline-detail-card .btn-outcome-secondary::before {
  display: none !important;
}

.aline-detail-card [data-action="outcome"] .liquid-button-glass,
.aline-detail-card [data-action="outcome"] .liquid-button-rim,
.aline-detail-card .btn-outcome .liquid-button-glass,
.aline-detail-card .btn-outcome .liquid-button-rim {
  display: none !important;
}

.aline-detail-card [data-action="outcome"] .liquid-button-label,
.aline-detail-card .btn-outcome .liquid-button-label {
  color: #181818 !important;
  font-size: inherit !important;
  font-weight: 600 !important;
}

.aline-detail-card [data-action="outcome"][data-val="closed"],
.aline-detail-card .btn-outcome[data-val="closed"],
.aline-detail-card [data-action="outcome"][data-val="no_interest"],
.aline-detail-card .btn-outcome[data-val="no_interest"],
.aline-detail-card [data-action="outcome"][data-val="no_contact"],
.aline-detail-card .btn-outcome[data-val="no_contact"] {
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  color: #181818 !important;
}

@media (min-width: 1201px) {
  #aline-detail-root:has(.empty-detail),
  .aline-layout__detail:has(.empty-detail) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
  }
}

.empty-detail,
.aline-detail-card.empty-detail {
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.empty-detail-text,
.empty-detail .empty-detail-text,
.aline-detail-card.empty-detail .empty-detail-text {
  margin: 0 !important;
  font-size: 15px !important;
  color: #5D6068 !important;
  font-weight: 600 !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
}

/* Reserva no painel se houver: secundário */
.aline-detail-card [data-action="reserve-click"],
.aline-detail-card [data-action="reserve-click"].liquid-button,
.aline-detail-card [data-action="reserve-click"].liquid-button-primary {
  background: #FFFFFF !important;
  border: 1px solid #FF7617 !important;
  color: #FF7617 !important;
  box-shadow: none !important;
}

@media (max-width: 1200px) {
  .aline-opportunities-reference .aline-layout {
    grid-template-columns: 1fr !important;
  }
  .aline-layout__detail,
  #aline-detail-root,
  .aline-layout__detail:has(.empty-detail),
  #aline-detail-root:has(.empty-detail) {
    display: none !important;
  }
}

/* Barra de controles: busca e abas de filtro */
.aline-list-controls {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.aline-search-box {
  flex: 1 1 300px !important;
  min-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 14px !important;
  height: 52px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.aline-search-box:focus-within {
  border-color: #FF7617 !important;
  box-shadow: 0 0 0 3px rgba(255,118,23,.12) !important;
}

.aline-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: none !important;
  font-size: 15px !important;
  background: transparent !important;
  color: #181818 !important;
}




/* Abas de filtro: estilo maquete (linha com border-bottom, sem pílulas laranja sólidas) */
.aline-filters {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  border-bottom: 1px solid #DEDBD5 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 8px 0 20px 0 !important;
  background: transparent !important;
  order: 2 !important;
}

.aline-filters .aline-btn--filter,
.aline-filters .aline-btn--filter.liquid-button,
.aline-filters .aline-btn--filter.liquid-button-primary,
.aline-filters button {
  flex: none !important;
  white-space: nowrap !important;
  padding: 14px 16px !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: var(--de-font-body, 'Inter', -apple-system, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #5D6068 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin-bottom: -1px !important;
  letter-spacing: normal !important;
}

.aline-filters .aline-btn--filter .liquid-button-glass,
.aline-filters .aline-btn--filter .liquid-button-rim {
  display: none !important;
}

.aline-filters .aline-btn--filter .liquid-button-label {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.aline-filters .aline-btn--filter:hover {
  color: #181818 !important;
  background: transparent !important;
  transform: none !important;
}

/* Aba inicial (Todos) ativa por padrão */
.aline-filters .aline-btn--filter:first-child {
  color: #181818 !important;
  border-bottom: 3px solid #FF7617 !important;
}

/* Qualquer aba clicada/ativa ganha sublinhado e texto grafite */
.aline-filters .aline-btn--filter.active,
.aline-filters .aline-btn--filter:focus,
.aline-filters .aline-btn--filter:focus-visible {
  color: #181818 !important;
  border-bottom: 3px solid #FF7617 !important;
}

/* Se outra aba que não a primeira estiver com foco ou ativa, desativa a primeira */
.aline-filters:has(.aline-btn--filter:focus:not(:first-child)) .aline-btn--filter:first-child,
.aline-filters:has(.aline-btn--filter.active:not(:first-child)) .aline-btn--filter:first-child {
  color: #5D6068 !important;
  border-bottom: 3px solid transparent !important;
}

.aline-filters .aline-count,
.aline-filters .aline-btn--filter .aline-count,
.aline-filters .liquid-button-label .aline-count {
  display: inline-block !important;
  color: #9A9A93 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-left: 4px !important;
  background: transparent !important;
}

.aline-export-box {
  margin-left: auto !important;
  order: 1 !important;
}

.aline-btn--export,
.aline-btn--export.liquid-button,
.aline-btn--export.liquid-button-primary {
  height: 48px !important;
  padding: 0 20px !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #181818 !important;
  font-family: var(--de-font-body, 'Inter', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.aline-btn--export .liquid-button-glass,
.aline-btn--export .liquid-button-rim {
  display: none !important;
}

.aline-btn--export .liquid-button-label {
  color: #181818 !important;
  font-family: inherit !important;
  font-weight: 600 !important;
}

.aline-btn--export:hover {
  border-color: #181818 !important;
  background: #FDFCFA !important;
  transform: none !important;
}

/* ==========================================================================
   3. MODO LISTA (Suporta .view-mode-list e #view-mode-list:checked)
   ========================================================================== */

.view-mode-list .kanban-wrapper,
#view-mode-list:checked ~ .aline-opportunities-shell .kanban-wrapper {
  display: block !important;
}

.view-mode-list .kanban-header,
#view-mode-list:checked ~ .aline-opportunities-shell .kanban-header {
  display: none !important;
}

.view-mode-list .aline-list-head,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px 16px;
  padding: 14px 24px;
  background: #FBFAF8;
  border: 1px solid #DEDBD5;
  border-bottom: 1px solid #E7E3DC;
  border-radius: 16px 16px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #5D6068;
  box-sizing: border-box;
}

.view-mode-list .aline-list-scroll,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-list-scroll {
  display: flex !important;
  flex-direction: column !important;
  background: #FFFFFF;
  border: 1px solid #DEDBD5;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.view-mode-list .aline-list-item,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #F0EDE7;
  background: #FFFFFF;
  transition: background .2s ease;
  box-sizing: border-box;
}

.view-mode-list .aline-list-item:last-child,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item:last-child {
  border-bottom: 0;
}

.view-mode-list .aline-list-item:hover,
#view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item:hover {
  background: #FCFBF9;
}

/* Na Lista: ocultar o select redundante dentro de col-status para manter só o badge limpo */
.view-mode-list .col-status .status-select {
  display: none !important;
}

/* Colunas dimensionadas conforme maquete */
.col-nome  { flex: 2 1 200px; min-width: 0; display: flex; align-items: center; gap: 14px; }
.col-cpf   { flex: 1 1 130px; min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: #3C3C3A; }
.col-tel   { flex: 1 1 130px; min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: #3C3C3A; }
.col-valor { flex: 1.2 1 125px; min-width: 0; font-size: 15px; font-weight: 700; color: #181818; font-variant-numeric: tabular-nums; }
.col-margem{ flex: 1 1 105px; min-width: 0; font-size: 13px; color: #5D6068; }
.col-parcelas{ flex: 0.8 1 75px; min-width: 0; font-size: 13px; color: #5D6068; }
.col-status{ flex: 1 1 150px; min-width: 0; }
.col-acao  { flex: 1.4 1 210px; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.lead-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
  margin-bottom: 2px;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .view-mode-list .aline-list-head,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head {
    display: none !important;
  }
  .view-mode-list .aline-list-scroll,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-scroll {
    border-top: 1px solid #DEDBD5 !important;
    border-radius: 16px !important;
  }
  .col-acao {
    flex: 1 1 100% !important;
    margin-top: 8px !important;
  }
}

/* ==========================================================================
   4. MODO QUADRO (Suporta .view-mode-board e #view-mode-board:checked)
   ========================================================================== */

.view-mode-board .aline-layout,
.aline-opportunities-shell.view-mode-board .aline-layout,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-layout {
  grid-template-columns: 1fr !important;
}

.view-mode-board .aline-layout__detail,
.view-mode-board #aline-detail-root,
.aline-opportunities-shell.view-mode-board .aline-layout__detail,
.aline-opportunities-shell.view-mode-board #aline-detail-root,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-layout__detail,
#view-mode-board:checked ~ .aline-opportunities-shell #aline-detail-root {
  display: none !important;
}

.view-mode-board .aline-list-head,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-list-head {
  display: none !important;
}

.view-mode-board .kanban-wrapper,
#view-mode-board:checked ~ .aline-opportunities-shell .kanban-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.view-mode-board .kanban-wrapper > .kanban-header {
  display: none !important;
}

/* Container do Quadro */
.view-mode-board #aline-list-root,
.view-mode-board .aline-list-scroll,
#view-mode-board:checked ~ .aline-opportunities-shell #aline-list-root,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-list-scroll {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Cada coluna e um <div> proprio */
.view-mode-board .kanban-col,
#view-mode-board:checked ~ .aline-opportunities-shell .kanban-col {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Header de cada coluna */
.view-mode-board .kanban-col .kanban-header,
.view-mode-board .kanban-header,
#view-mode-board:checked ~ .aline-opportunities-shell .kanban-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #181818 !important;
  padding: 12px 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.view-mode-board .kanban-header .aline-count {
  background: #F2EFE9 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  color: #3C3C3A !important;
  font-weight: 700 !important;
}

.view-mode-board .kanban-col[data-stage="awaiting_reservation"] .kanban-header::before,
.view-mode-board .kanban-header[data-stage="awaiting_reservation"]::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #FF7617; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.view-mode-board .kanban-col[data-stage="in_service"] .kanban-header::before,
.view-mode-board .kanban-header[data-stage="in_service"]::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #2B6CD9; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.view-mode-board .kanban-col[data-stage="closed"] .kanban-header::before,
.view-mode-board .kanban-header[data-stage="closed"]::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #1F7A43; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.view-mode-board .kanban-col[data-stage="no_interest"] .kanban-header::before,
.view-mode-board .kanban-header[data-stage="no_interest"]::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #7B7A74; display: inline-block; margin-right: 8px; flex-shrink: 0; }
.view-mode-board .kanban-col[data-stage="no_contact"] .kanban-header::before,
.view-mode-board .kanban-header[data-stage="no_contact"]::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: #B4342F; display: inline-block; margin-right: 8px; flex-shrink: 0; }

/* Cards em display:flex; flex-direction:column; gap:12px; */
.view-mode-board .kanban-cards,
#view-mode-board:checked ~ .aline-opportunities-shell .kanban-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Cada card com min-width:0 */
.view-mode-board .aline-list-item,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-list-item {
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 12px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(24,24,24,.03) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  height: fit-content !important;
  grid-column: auto !important;
}

.view-mode-board .aline-list-item[data-stage="returned_to_operations"],
#view-mode-board:checked ~ .aline-opportunities-shell .aline-list-item[data-stage="returned_to_operations"] {
  display: none !important;
}

.view-mode-board .aline-pagination,
#view-mode-board:checked ~ .aline-opportunities-shell .aline-pagination {
  display: none !important;
}

.view-mode-board .col-nome,
#view-mode-board:checked ~ .aline-opportunities-shell .col-nome {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
}

.view-mode-board .lead-avatar {
  display: none !important;
}

.view-mode-board .lead-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #181818 !important;
  line-height: 1.25 !important;
  margin: 0 0 2px 0 !important;
}

.view-mode-board .col-cpf::before {
  content: 'CPF: ';
  font-weight: 600;
  color: #9A9A93;
}

.view-mode-board .col-tel::before {
  content: 'Tel: ';
  font-weight: 600;
  color: #9A9A93;
}

.view-mode-board .col-cpf,
.view-mode-board .col-tel,
#view-mode-board:checked ~ .aline-opportunities-shell .col-cpf,
#view-mode-board:checked ~ .aline-opportunities-shell .col-tel {
  font-size: 13px !important;
  color: #5D6068 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.view-mode-board .col-banco::before {
  content: 'Banco: ';
  font-weight: 600;
  color: #9A9A93;
}

.view-mode-board .col-banco,
#view-mode-board:checked ~ .aline-opportunities-shell .col-banco {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #181818 !important;
  margin-top: 4px !important;
  width: 100% !important;
}

.view-mode-board .col-valor::before {
  content: 'Aprovado: ';
  font-weight: 600;
  color: #9A9A93;
  font-size: 13px;
}

.view-mode-board .col-valor,
#view-mode-board:checked ~ .aline-opportunities-shell .col-valor {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #181818 !important;
  margin-bottom: 4px !important;
  width: 100% !important;
}

.view-mode-board .col-status,
#view-mode-board:checked ~ .aline-opportunities-shell .col-status {
  width: 100% !important;
}

.view-mode-board .col-status .lead-badge {
  display: none !important;
}

.view-mode-board .col-status .status-select,
#view-mode-board:checked ~ .aline-opportunities-shell .col-status .status-select {
  margin-top: 4px !important;
  height: 32px !important;
  width: 100% !important;
}

.view-mode-board .col-nome,
.view-mode-board .col-cpf,
.view-mode-board .col-tel,
.view-mode-board .col-banco,
.view-mode-board .col-valor,
.view-mode-board .col-status,
.view-mode-board .col-acao,
#view-mode-board:checked ~ .aline-opportunities-shell .col-nome,
#view-mode-board:checked ~ .aline-opportunities-shell .col-cpf,
#view-mode-board:checked ~ .aline-opportunities-shell .col-tel,
#view-mode-board:checked ~ .aline-opportunities-shell .col-banco,
#view-mode-board:checked ~ .aline-opportunities-shell .col-valor,
#view-mode-board:checked ~ .aline-opportunities-shell .col-status,
#view-mode-board:checked ~ .aline-opportunities-shell .col-acao {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.view-mode-board .col-acao,
#view-mode-board:checked ~ .aline-opportunities-shell .col-acao {
  width: 100% !important;
  margin-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.view-mode-board .actions-in-service,
#view-mode-board:checked ~ .aline-opportunities-shell .actions-in-service {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.view-mode-board .btn-outcome,
#view-mode-board:checked ~ .aline-opportunities-shell .btn-outcome {
  width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
  padding: 6px 10px !important;
}

/* ==========================================================================
   5. BORDAS, BADGES E CORES DE STATUS (ENTREGA-FRONT.md)
   ========================================================================== */

/* Bordas esquerdas dos cartões */
.aline-list-item[data-stage="awaiting_reservation"] { border-left: 3px solid #FF7617 !important; }
.aline-list-item[data-stage="in_service"]          { border-left: 3px solid #2B6CD9 !important; }
.aline-list-item[data-stage="closed"]              { border-left: 3px solid #1F7A43 !important; }
.aline-list-item[data-stage="no_interest"]          { border-left: 3px solid #7B7A74 !important; }
.aline-list-item[data-stage="no_contact"]           { border-left: 3px solid #B4342F !important; }
.aline-list-item[data-stage="returned_to_operations"] {
  border-left: 3px solid #B4342F !important;
  opacity: 0.52 !important;
  filter: grayscale(0.2);
}

/* Avatar com iniciais */
.lead-avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #F2EFE9;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #181818;
}

.lead-name {
  font-size: 15px;
  font-weight: 700;
  color: #181818;
  line-height: 1.25;
  margin: 0;
}

/* Contador 24h discreto (cinza padrão, vermelho nas últimas 2h) */
.lead-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #F2EFE9;
  color: #5D6068;
  transition: background .2s ease, color .2s ease;
}

.lead-timer svg {
  width: 11px;
  height: 11px;
}

.lead-timer.urgente,
.lead-timer[data-urgente="true"] {
  background: #FBE5E5 !important;
  color: #8E2A26 !important;
}

/* Badges de Status oficiais (ENTREGA-FRONT.md) */
.lead-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  animation: entraLinha .3s ease;
}

.lead-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

/* Novo: Fundo #FDE3CE, Ponto #FF7617, Texto #7A3206 */
.lead-badge--awaiting_reservation {
  background: #FDE3CE !important;
  color: #7A3206 !important;
}
.lead-badge--awaiting_reservation::before {
  background: #FF7617 !important;
}

/* Em atendimento: Fundo #E3EDFD, Ponto #2B6CD9, Texto #1E4E9C */
.lead-badge--in_service {
  background: #E3EDFD !important;
  color: #1E4E9C !important;
}
.lead-badge--in_service::before {
  background: #2B6CD9 !important;
}

/* Contrato feito: Fundo #DFF1E4, Ponto #1F7A43, Texto #175E34 */
.lead-badge--closed {
  background: #DFF1E4 !important;
  color: #175E34 !important;
}
.lead-badge--closed::before {
  background: #1F7A43 !important;
}

/* Sem interesse: Fundo #F0EDE7, Ponto #7B7A74, Texto #4F4E49 */
.lead-badge--no_interest {
  background: #F0EDE7 !important;
  color: #4F4E49 !important;
}
.lead-badge--no_interest::before {
  background: #7B7A74 !important;
}

/* Número frio: Fundo #FBE5E5, Ponto #B4342F, Texto #8E2A26 */
.lead-badge--no_contact {
  background: #FBE5E5 !important;
  color: #8E2A26 !important;
}
.lead-badge--no_contact::before {
  background: #B4342F !important;
}

/* Expirado: Fundo #EDEAE4, Ponto #B4342F, Texto #6A6963 */
.lead-badge--returned_to_operations {
  background: #EDEAE4 !important;
  color: #6A6963 !important;
}
.lead-badge--returned_to_operations::before {
  background: #B4342F !important;
}

/* ==========================================================================
   6. AÇÕES E ANIMAÇÕES
   ========================================================================== */

/* Botão Reservar cliente com efeito brilho */
.btn-reserve,
.btn-reserve.liquid-button,
.btn-reserve.liquid-button-primary {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #FF7617 !important;
  color: #FFFFFF !important;
  font-family: var(--de-font-title, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 12px rgba(255,118,23,.25) !important;
  transition: transform .18s ease, background .18s ease !important;
}

.btn-reserve .liquid-button-glass,
.btn-reserve .liquid-button-rim {
  display: none !important;
}

.btn-reserve .liquid-button-label {
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.btn-reserve:hover {
  background: #E2560B !important;
  transform: translateY(-2px) !important;
}

.btn-reserve:active {
  transform: scale(.97) !important;
}

.btn-reserve .brilho {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* Animação disparada no clique */
.aline-list-item.varredura-anim .btn-reserve .brilho {
  animation: brilhoDesliza 0.6s ease forwards;
}

.aline-list-item.varredura-anim::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255,118,23,0) 0%, rgba(255,118,23,.28) 45%, rgba(255,255,255,.75) 62%, rgba(255,118,23,0) 100%);
  animation: varreduraDesbloqueio .62s ease-out forwards;
}

@keyframes brilhoDesliza {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  12% { opacity: .85; }
  58% { opacity: .85; }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}

@keyframes varreduraDesbloqueio {
  0% { transform: translateX(-60%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}

@keyframes someBotao {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(.96); }
}

@keyframes entraLinha {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Botões de Desfecho Rápido */
.btn-outcome,
.btn-outcome.liquid-button,
.btn-outcome.liquid-button-primary {
  flex: 1 1 auto !important;
  border: 1px solid #DEDBD5 !important;
  background: #FFFFFF !important;
  color: #181818 !important;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  transition: transform .15s ease, border-color .15s ease, background .15s ease !important;
}

.btn-outcome .liquid-button-glass,
.btn-outcome .liquid-button-rim {
  display: none !important;
}

.btn-outcome .liquid-button-label {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.btn-outcome:hover {
  transform: translateY(-1px) !important;
}

.btn-outcome[data-val="closed"] {
  background: #DFF1E4 !important;
  border-color: #1F7A43 !important;
  color: #175E34 !important;
}

.btn-outcome[data-val="no_interest"] {
  background: #F0EDE7 !important;
  border-color: #7B7A74 !important;
  color: #4F4E49 !important;
}

.btn-outcome[data-val="no_contact"] {
  background: #FBE5E5 !important;
  border-color: #B4342F !important;
  color: #8E2A26 !important;
}

.btn-icon {
  background: transparent;
  border: 1px solid #DEDBD5;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #5D6068;
  transition: background .15s ease, color .15s ease;
}

.btn-icon:hover {
  background: #F2EFE9;
  color: #181818;
}

/* Seletor de status com transições diretas */
.status-select {
  width: 100%;
  height: 32px;
  border: 1px solid #DEDBD5;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #181818;
  cursor: pointer;
  outline: none;
  margin-top: 6px;
  transition: border-color .15s ease;
}

.status-select:focus {
  border-color: #FF7617;
}




.aline-pagination .aline-btn--filter[data-action="load-more"],
.aline-pagination button[data-action="load-more"] {
  height: 42px !important;
  padding: 0 24px !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #5D6068 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  border-bottom: 1px solid #DEDBD5 !important;
}

/* Paginação numerada estilo maquete */
.aline-pagination .btn-page,
.aline-pagination .pagination-numbers button,
.aline-pagination .pagination-numbers button.liquid-button,
.aline-pagination .pagination-numbers button.liquid-button-primary {
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #181818 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.aline-pagination .btn-page.active,
.aline-pagination .pagination-numbers button.active,
.aline-pagination .pagination-numbers button.active.liquid-button,
.aline-pagination .pagination-numbers button.active.liquid-button-primary {
  background: #FF7617 !important;
  color: #FFFFFF !important;
  border: 1px solid #FF7617 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.aline-pagination .btn-page:disabled,
.aline-pagination .btn-page[disabled],
.aline-pagination .pagination-numbers button:disabled,
.aline-pagination .pagination-numbers button[disabled] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #FFFFFF !important;
  color: #9A9A93 !important;
  border: 1px solid #E5E2DC !important;
}

.aline-pagination .pagination-numbers button .liquid-button-glass,
.aline-pagination .pagination-numbers button .liquid-button-rim {
  display: none !important;
}

.aline-pagination .pagination-numbers button .liquid-button-label {
  color: inherit !important;
}

/* Suporte a preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .btn-reserve,
  .btn-reserve .brilho,
  .aline-list-item.varredura-anim .btn-reserve .brilho,
  .aline-list-item.varredura-anim::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   7. RESPONSIVIDADE (ZERO ROLAGEM LATERAL EM 1440 E 390)
   ========================================================================== */

.aline-opportunities-reference,
.aline-opportunities-shell,
.aline-layout,
.aline-layout__list,
.kanban-wrapper,
.aline-list-scroll {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .aline-opportunities-hero {
    padding: 16px 16px 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .aline-opportunities-hero::after {
    align-self: flex-start !important;
    margin-left: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .aline-view-toggle,
  .aline-opportunities-hero .aline-view-toggle {
    align-self: stretch !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .aline-view-toggle label,
  .aline-view-toggle button,
  .aline-view-toggle .aline-btn--view {
    flex: 1 1 0% !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .aline-view-toggle span,
  .aline-view-toggle .liquid-button-label {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    font: inherit !important;
  }

  .aline-opportunities-reference .aline-layout {
    padding: 12px 16px 92px !important; /* 92px de reserva para a bottom bar */
    grid-template-columns: 1fr !important;
  }

  .aline-layout__detail,
  #aline-detail-root,
  .aline-layout__detail:has(.empty-detail),
  #aline-detail-root:has(.empty-detail) {
    display: none !important;
  }

  .aline-list-controls {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .aline-search-box {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
  }

  .aline-filters {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: #DEDBD5 #F7F5F1 !important;
  }

  .aline-filters::-webkit-scrollbar {
    height: 5px !important;
    display: block !important;
    -webkit-appearance: none !important;
  }

  .aline-filters::-webkit-scrollbar-track {
    background: #F7F5F1 !important;
    border-radius: 999px !important;
  }

  .aline-filters::-webkit-scrollbar-thumb {
    background: #DEDBD5 !important;
    border-radius: 999px !important;
  }

  .aline-filters::-webkit-scrollbar-thumb:hover {
    background: #B4B0A8 !important;
  }

  .aline-btn--filter {
    padding: 10px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .aline-export-box {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .aline-btn--export {
    width: 100% !important;
    height: 42px !important;
  }

  .view-mode-list .aline-list-item,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item {
    padding: 14px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .col-nome, .col-cpf, .col-tel, .col-banco, .col-valor, .col-margem, .col-parcelas, .col-status, .col-acao {
    width: 100% !important;
    flex: none !important;
  }

  .col-acao {
    margin-top: 4px !important;
  }

  /* Quadro no celular: colunas horizontais com peek de 82% */
  .view-mode-board #aline-list-root,
  .view-mode-board .aline-list-scroll,
  #view-mode-board:checked ~ .aline-opportunities-shell #aline-list-root,
  #view-mode-board:checked ~ .aline-opportunities-shell .aline-list-scroll {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 82% !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin !important;
    scrollbar-color: #DEDBD5 #F7F5F1 !important;
  }

  .view-mode-board .kanban-col,
  #view-mode-board:checked ~ .aline-opportunities-shell .kanban-col {
    scroll-snap-align: start;
    min-width: 0 !important;
    width: 100% !important;
  }

  .view-mode-board #aline-list-root::-webkit-scrollbar {
    height: 5px !important;
    display: block !important;
    -webkit-appearance: none !important;
  }

  .view-mode-board #aline-list-root::-webkit-scrollbar-track {
    background: #F7F5F1 !important;
    border-radius: 999px !important;
  }

  .view-mode-board #aline-list-root::-webkit-scrollbar-thumb {
    background: #DEDBD5 !important;
    border-radius: 999px !important;
  }
}

/* ==========================================================================
   ROLETA — NOVOS ESTILOS (SPEC 8 & 8.7 CELULAR)
   ========================================================================== */

.aline-notice-banner {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.aline-notice-banner--info {
  background: #EBF3FE;
  color: #1A56DB;
  border: 1px solid #C3D9FE;
}

.aline-notice-banner--success {
  background: #E8F5E9;
  color: #1C4A27;
  border: 1px solid #A5D6A7;
}

.aline-notice-banner--warning {
  background: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}

.aline-notice-banner--error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

.aline-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.aline-tab {
  cursor: pointer;
  user-select: none;
}

.aline-subfilters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.aline-subfilter {
  background: #FFFFFF !important;
  border: 1px solid #DEDBD5 !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5D6068 !important;
  cursor: pointer !important;
}

.aline-subfilter.active {
  background: #181818 !important;
  color: #FFFFFF !important;
  border-color: #181818 !important;
}

.aline-subfilter .aline-count {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 4px;
}

.actions-in-service {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-outcome {
  border: 1px solid #DEDBD5;
  background: #FFFFFF;
  color: #181818;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}

.btn-outcome:hover {
  background: #F7F5F1;
  border-color: #C7C4BE;
}

.btn-outcome--closed {
  color: #1C4A27;
  background: #E8F5E9;
  border-color: #C8E6C9;
}

.btn-outcome--closed:hover {
  background: #C8E6C9;
}

.btn-outcome--no-interest {
  color: #5D6068;
}

.btn-outcome--no-contact {
  color: #7A3206;
  background: #FFF7ED;
  border-color: #FFEDD5;
}

.btn-outcome--no-contact:hover {
  background: #FFEDD5;
}

.btn-return {
  border: 1px solid #DEDBD5;
  background: #FAFAFA;
  color: #7A3206;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s ease;
}

.btn-return:hover {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}

.btn-copy-phone, .btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DEDBD5;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #FFFFFF;
  color: #5D6068;
  text-decoration: none;
}

.btn-copy-phone:hover {
  background: #F7F5F1;
  color: #181818;
}

.btn-wa {
  background: #E8F5E9;
  color: #1C4A27;
  border-color: #C8E6C9;
}

.btn-wa:hover {
  background: #C8E6C9;
}

.lead-received {
  font-size: 11px;
  color: #8E8E93;
}

.lead-reservation-timer {
  font-size: 12px;
  font-weight: 700;
  color: #1C4A27;
  background: #E8F5E9;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}

.lead-badge--awaiting_reservation {
  background: #EBF3FE;
  color: #1A56DB;
}

.lead-badge--in_service {
  background: #E8F5E9;
  color: #1C4A27;
}

.lead-badge--closed {
  background: #D1FAE5;
  color: #065F46;
}

.lead-badge--no_interest {
  background: #F3F4F6;
  color: #4B5563;
}

.lead-badge--no_contact {
  background: #FEF3C7;
  color: #92400E;
}

.lead-badge--expired {
  background: #FEE2E2;
  color: #991B1B;
}

.aline-export-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aline-new-leads-bar {
  animation: slideDown .25s ease-out;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .actions-in-service {
    flex-direction: column;
    width: 100%;
  }

  .actions-in-service .btn-outcome,
  .actions-in-service .btn-return {
    width: 100%;
    text-align: center;
    padding: 8px 12px;
  }

  .col-tel .tel-actions {
    margin-top: 4px;
    display: flex;
    gap: 8px;
  }

  .col-tel .tel-actions .btn-copy-phone,
  .col-tel .tel-actions .btn-wa {
    flex: 1;
    text-align: center;
    padding: 6px 10px;
  }

  .col-valor,
  .col-margem,
  .col-parcelas {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px 0 !important;
    box-sizing: border-box !important;
  }

  .col-valor .lead-label,
  .col-margem .lead-label,
  .col-parcelas .lead-label {
    margin-bottom: 0 !important;
    font-size: 12px !important;
    color: #5D6068 !important;
    font-weight: 500 !important;
  }

  .col-valor .lead-valor {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #181818 !important;
  }

  .col-margem .lead-margin,
  .col-parcelas .lead-installments {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #181818 !important;
  }
}

/* ==========================================================================
   LISTA DA ROLETA — grade única para cabeçalho e linhas (etapa 9, 16/09/2026)
   Antes o cabeçalho e as linhas eram flex com quebra: em 1440px o cabeçalho
   partia em duas linhas e as células empilhavam Margem/Parcelas/prazo/botão.
   Agora as duas usam a MESMA grade (--leads-grade), então cada célula cai sob o
   seu título. Até 1200px o cabeçalho some e cada cliente vira um cartão
   empilhado com rótulos.
   ========================================================================== */
@media (min-width: 1201px) {
  .aline-opportunities-shell {
    /* Larguras mínimas medidas no conteúdo: nome inteiro em uma linha até ~22 caracteres (13px)
       com avatar de 34px; CPF e telefone em 12px tabular; Copiar + WhatsApp inteiros; banco
       "SEMPRE FACIL" inteiro; "Parcelas" inteiro no cabeçalho; etiqueta de prazo em até 2 linhas. */
    --leads-grade: minmax(192px, 1.6fr) 100px 132px minmax(96px, .9fr) minmax(92px, .9fr) 80px 62px 96px 132px;
  }
  /* Painel "Selecione um cliente" recolhido (180px) enquanto nenhum cliente está selecionado; só
     abre em 300px quando um cliente é escolhido. Com as folgas de 20/24px, a lista fica com
     1056px em 1440 e 1032px em 1280, e as nove colunas cabem sem cortar nada. */
  .aline-opportunities-reference .aline-layout {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .aline-opportunities-reference .aline-layout:has(#aline-detail-root .empty-detail),
  .aline-opportunities-reference .aline-layout:has(.aline-layout__detail .empty-detail) {
    grid-template-columns: minmax(0, 1fr) 180px !important;
  }
  .aline-layout:has(.empty-detail) #aline-detail-root,
  .aline-layout:has(.empty-detail) .aline-layout__detail { padding: 16px !important; }
  .aline-layout:has(.empty-detail) .empty-detail-text { font-size: 13px !important; }
  .view-mode-list .aline-list-head,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head,
  .view-mode-list .aline-list-item,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item {
    display: grid !important;
    grid-template-columns: var(--leads-grade) !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 12px 12px !important;
    min-width: 0;
  }
  /* Cabeçalho numa linha só (11px, sem espaçamento extra) e com o mesmo border-left de 3px das
     linhas (lá ele é a cor da etapa; aqui, transparente), senão a grade do cabeçalho começa 3px
     antes da grade das linhas. */
  .view-mode-list .aline-list-head,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head {
    font-size: 11px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2;
    border-left: 3px solid transparent !important;
  }
  .view-mode-list .aline-list-head > span,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head > span { white-space: nowrap !important; overflow: visible !important; font-size: 11px !important; font-weight: 700 !important; color: #5D6068 !important; letter-spacing: 0 !important; }
  .view-mode-list .aline-list-head > span,
  .view-mode-list .aline-list-item > .col-nome,
  .view-mode-list .aline-list-item > .col-cpf,
  .view-mode-list .aline-list-item > .col-tel,
  .view-mode-list .aline-list-item > .col-banco,
  .view-mode-list .aline-list-item > .col-valor,
  .view-mode-list .aline-list-item > .col-margem,
  .view-mode-list .aline-list-item > .col-parcelas,
  .view-mode-list .aline-list-item > .col-status,
  .view-mode-list .aline-list-item > .col-acao,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head > span,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item > [class^="col-"] {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
    overflow: hidden;
  }
  /* os rótulos dentro das células são do cartão de celular; na grade o cabeçalho já diz o que é */
  .view-mode-list .aline-list-item .lead-label,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item .lead-label {
    display: none !important;
  }
  .view-mode-list .aline-list-item .col-nome,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item .col-nome { display: flex !important; align-items: center !important; gap: 10px !important; }
  .view-mode-list .aline-list-item .col-nome > div { min-width: 0; }
  .view-mode-list .aline-list-item .col-nome .lead-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view-mode-list .aline-list-item .col-nome .lead-location,
  .view-mode-list .aline-list-item .col-nome .lead-received { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .view-mode-list .aline-list-item .lead-avatar { width: 34px; height: 34px; font-size: 12px; }
  .view-mode-list .aline-list-item .col-cpf,
  .view-mode-list .aline-list-item .col-tel { font-size: 12px; }
  .view-mode-list .aline-list-item .col-tel .lead-tel { display: block; white-space: nowrap; }
  .view-mode-list .aline-list-item .col-tel .tel-actions { display: flex !important; gap: 4px; margin-top: 3px !important; }
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-copy-phone,
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-wa {
    height: auto !important; min-height: 22px !important; padding: 2px 6px !important; font-size: 11px !important; line-height: 1.2 !important; border-radius: 6px !important; flex: 0 0 auto !important;
  }
  .view-mode-list .aline-list-item .col-banco { font-size: 12px; color: #3C3C3A; white-space: nowrap; text-overflow: ellipsis; }
  .view-mode-list .aline-list-item .col-valor .lead-valor { font-size: 14px; font-weight: 700; color: #181818; white-space: nowrap; }
  .view-mode-list .aline-list-item .col-margem .lead-margin,
  .view-mode-list .aline-list-item .col-parcelas .lead-installments { font-size: 13px; white-space: nowrap; }
  .view-mode-list .aline-list-item .col-status .lead-timer { display: inline-block; white-space: normal; line-height: 1.25; font-size: 11px; padding: 2px 7px; margin-top: 2px; }
  .view-mode-list .aline-list-item .col-acao,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item .col-acao { display: block !important; }
  .view-mode-list .aline-list-item .btn-reserve { height: 38px !important; font-size: 13px !important; gap: 6px !important; padding: 0 8px !important; }
  .view-mode-list .aline-list-item .btn-reserve svg { width: 15px; height: 15px; flex: none; }
  .view-mode-list .aline-list-item .actions-in-service { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px !important; }
  .view-mode-list .aline-list-item .actions-in-service .btn-outcome,
  .view-mode-list .aline-list-item .actions-in-service .btn-return { font-size: 11px; padding: 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .view-mode-list .aline-list-item .actions-in-service .btn-return { grid-column: 1 / -1; }
}

/* Entre 1101px e 1300px a lista fica mais estreita que a grade: Copiar e WhatsApp viram ícones
   (com título), o botão Reservar perde o ícone, o painel vazio encolhe para 160px e as colunas
   ficam nos mínimos; se ainda assim não couber, rola de lado. */
@media (min-width: 1201px) and (max-width: 1300px) {
  .aline-opportunities-shell { --leads-grade: minmax(176px, 1.6fr) 96px 100px minmax(92px, .9fr) minmax(88px, .9fr) 76px 62px 92px 116px; }
  .aline-opportunities-reference .aline-layout:has(#aline-detail-root .empty-detail),
  .aline-opportunities-reference .aline-layout:has(.aline-layout__detail .empty-detail) { grid-template-columns: minmax(0, 1fr) 160px !important; }
  .view-mode-list .aline-list-item .btn-reserve svg { display: none !important; }
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-copy-phone,
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-wa {
    width: 26px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; font-size: 0 !important; color: transparent !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: 14px 14px !important;
  }
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-copy-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") !important; }
  .view-mode-list .aline-list-item .col-tel .tel-actions .btn-wa { background-color: #E8F5E9 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C4A27' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.2-5.4A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E") !important; }
  .view-mode-list .aline-layout__list,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-layout__list { overflow-x: auto !important; }
  .view-mode-list .aline-list-head,
  .view-mode-list .aline-list-item,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-head,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item { min-width: 940px; }
}

/* Até 1200px (tablet deitado incluso; dono 13/11): cartão empilhado, com rótulo em cada informação. */
@media (max-width: 1200px) {
  .view-mode-list .aline-list-scroll,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-scroll {
    background: transparent !important;
    border: 0 !important;
    gap: 12px;
    overflow: visible !important;
  }
  .view-mode-list .aline-list-item,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #DEDBD5 !important;
    border-radius: 14px !important;
  }
  .view-mode-list .aline-list-item > [class^="col-"],
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item > [class^="col-"] { width: 100% !important; flex: none !important; min-width: 0 !important; }
  .view-mode-list .aline-list-item .col-nome { display: flex !important; align-items: center !important; gap: 12px !important; padding-bottom: 8px; border-bottom: 1px solid #F0EDE7; }
  .view-mode-list .aline-list-item .col-cpf,
  .view-mode-list .aline-list-item .col-tel,
  .view-mode-list .aline-list-item .col-banco,
  .view-mode-list .aline-list-item .col-status {
    display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px; font-size: 13px !important; color: #181818 !important;
  }
  .view-mode-list .aline-list-item .col-tel { flex-wrap: wrap !important; }
  .view-mode-list .aline-list-item .col-cpf::before { content: 'CPF'; }
  .view-mode-list .aline-list-item .col-tel::before { content: 'Telefone'; }
  .view-mode-list .aline-list-item .col-banco::before { content: 'Banco'; }
  .view-mode-list .aline-list-item .col-status::before { content: 'Prazos'; }
  .view-mode-list .aline-list-item .col-cpf::before,
  .view-mode-list .aline-list-item .col-tel::before,
  .view-mode-list .aline-list-item .col-banco::before,
  .view-mode-list .aline-list-item .col-status::before { font-size: 12px; font-weight: 500; color: #5D6068; flex: none; }
  .view-mode-list .aline-list-item .col-tel .lead-tel { margin-left: auto; }
  .view-mode-list .aline-list-item .col-tel .tel-actions { width: 100%; justify-content: flex-end; margin-top: 4px !important; }
  .view-mode-list .aline-list-item .col-status > * { margin-left: auto; }
  .view-mode-list .aline-list-item .col-status .lead-timer { margin-top: 0; }
  .view-mode-list .aline-list-item .col-acao,
  #view-mode-list:checked ~ .aline-opportunities-shell .aline-list-item .col-acao { margin-top: 4px !important; }
}


/* ==========================================================================
   CLIENTES APROVADOS v2 (docs/design/clientes-aprovados-v2/clientes-aprovados-v2.html)
   Tabela densa em largura total (mínimo 1280px), cabeçalho com busca à direita e alternador
   Lista/Quadro, abas, sem painel lateral; quadro kanban em 5 colunas por etapa. Hex do
   protótipo trocado por var(--de-*). Os ganchos do controlador (aline-*, data-*) ficam na
   marcação; o visual mora nas classes lc-*. !important onde as regras antigas usavam.
   ========================================================================== */
/* "Ocupa toda a tela (sem container centralizado)": o #main da plataforma é estreito e centralizado,
   então esta tela desfaz o limite dele, como o design pede. */
#main:has(.lc-shell) { max-width: none !important; width: 100% !important; padding: 0 !important; }
/* o shell antigo sangrava com margem negativa para colar no fundo; a v2 ocupa a área inteira do #main */
.lc-shell { display: block !important; width: 100% !important; margin: 0 !important; max-width: none !important; background: var(--de-marfim) !important; color: var(--de-grafite); font-family: var(--de-fonte-texto); min-height: 0; }
.lc-page { padding: 32px 32px 48px; box-sizing: border-box; min-width: 1280px; width: 100%; }
.lc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.lc-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--de-status-novo-texto); margin-bottom: 6px; }
.lc-title h1 { margin: 0 0 6px !important; font-family: var(--de-fonte-titulo) !important; font-weight: 800 !important; font-size: 36px !important; letter-spacing: -.025em !important; color: var(--de-grafite) !important; line-height: 1.15 !important; }
.lc-title p { margin: 0 !important; font-size: 16px !important; color: var(--de-texto-secundario) !important; }
/* Sem subtítulo (pedido do dono, 23/09): o título fecha o bloco sem sobra embaixo. */
.lc-title h1:last-child { margin-bottom: 0 !important; }
.lc-tools { display: flex; gap: 14px; align-items: center; flex: none; }
.lc-search { display: flex; align-items: center; gap: 10px; height: 48px; width: 320px; border: 1px solid var(--de-borda); border-radius: 14px; padding: 0 16px; background: var(--de-branco); box-sizing: border-box; }
.lc-search > span { color: var(--de-texto-terciario); font-size: 16px; }
.lc-search .aline-search-input { flex: 1 !important; min-width: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; font: inherit !important; font-size: 14px !important; padding: 0 !important; height: auto !important; color: var(--de-grafite) !important; }
.lc-view { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--de-borda); border-radius: 14px; background: var(--de-branco); }
.lc-view .lc-view-btn { padding: 10px 18px !important; border-radius: 10px !important; border: 0 !important; background: transparent !important; font-weight: 600 !important; font-size: 14px !important; color: var(--de-grafite) !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; cursor: pointer; }
.lc-view .lc-view-btn.active { background: var(--de-marfim) !important; font-weight: 700 !important; }
.lc-notices:empty { display: none; }
.lc-notices { margin-bottom: 12px; }
.lc-tabs { display: flex !important; gap: 6px !important; border-bottom: 1px solid var(--de-borda) !important; margin-bottom: 20px !important; padding: 0 !important; background: transparent !important; }
.lc-tabs .lc-tab { padding: 12px 16px !important; white-space: nowrap !important; font-weight: 700 !important; font-size: 14px !important; color: var(--de-texto-secundario) !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; margin: 0 0 -1px !important; cursor: pointer; }
.lc-tabs .lc-tab.active { color: var(--de-grafite) !important; border-bottom-color: var(--de-laranja-principal) !important; }
.lc-tabs .lc-tab .aline-count { color: var(--de-texto-terciario) !important; margin-left: 6px !important; background: transparent !important; padding: 0 !important; font-weight: 700 !important; font-size: 14px !important; }
.lc-subrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lc-subrow:has(.lc-subfilters[style*="display: none"]) { display: none; }
.lc-subfilters { gap: 6px !important; flex-wrap: wrap !important; margin: 0 0 14px !important; }
.lc-subfilters .lc-chip { padding: 8px 12px !important; border-radius: 999px !important; border: 1px solid var(--de-borda) !important; background: var(--de-branco) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--de-texto-secundario) !important; min-height: 0 !important; height: auto !important; box-shadow: none !important; cursor: pointer; }
.lc-subfilters .lc-chip.active { background: var(--de-laranja-claro) !important; border-color: var(--de-laranja-claro3) !important; color: var(--de-laranja-escuro) !important; }
.lc-subfilters .lc-chip .aline-count { margin-left: 4px !important; color: var(--de-texto-terciario) !important; background: transparent !important; padding: 0 !important; }
.lc-export { align-items: center; gap: 8px; margin: 0 0 14px !important; }
.lc-export .lc-export-btn { height: 36px !important; padding: 0 14px !important; border-radius: 10px !important; border: 1px solid var(--de-borda) !important; background: var(--de-branco) !important; color: var(--de-grafite) !important; font-weight: 600 !important; font-size: 13px !important; min-height: 0 !important; box-shadow: none !important; cursor: pointer; }
.lc-export .aline-export-notice { font-size: 12px; color: var(--de-texto-secundario); }
.lc-new-bar { margin: 0 0 12px; }
.lc-new-bar .aline-new-leads-btn { width: 100%; padding: 10px; background: var(--de-laranja-claro); border: 1px solid var(--de-laranja-principal); color: var(--de-laranja-escuro); font-weight: 700; border-radius: 10px; cursor: pointer; }

/* --- MODO LISTA --- */
/* A grade do design é proporcional; os mínimos vêm do conteúdo real (nome de ~22 caracteres com
   avatar, CPF e telefone com o botão copiar, "SEMPRE FACIL", os títulos do cabeçalho e a etiqueta),
   para que nada seja cortado em 1280. */
.lc-shell { --lc-grade: minmax(206px, 1.5fr) minmax(112px, 1fr) minmax(176px, 1.1fr) minmax(108px, .9fr) minmax(100px, .9fr) minmax(86px, .7fr) minmax(64px, .7fr) minmax(104px, 1fr) 280px; }
/* Meus clientes: a coluna Ação leva cinco botões em grade, então é mais larga. Finalizados troca
   Margem/Parcelas/Roleta/Ação por Desfecho e Data do desfecho, e tem sete colunas. */
/* Meus clientes: a coluna Ação é mais larga (cinco botões), então o nome ganha o mínimo de ~26
   caracteres e o espaço sai de Margem e Parcelas. */
.lc-shell.lc-aba-in_service { --lc-grade: minmax(224px, 1.5fr) minmax(106px, .9fr) minmax(176px, 1fr) minmax(96px, .8fr) minmax(98px, .8fr) minmax(84px, .6fr) minmax(58px, .5fr) minmax(110px, .8fr) 292px; }
.lc-shell.lc-aba-finalized { --lc-grade: minmax(202px, 1.6fr) minmax(112px, 1fr) minmax(176px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(124px, 1fr) minmax(160px, 1.1fr); }
.lc-table { background: var(--de-branco); border: 1px solid var(--de-borda); border-radius: 16px; overflow: hidden; }
.lc-shell.view-mode-list .lc-head, .lc-shell.view-mode-list .lc-row { display: grid !important; grid-template-columns: var(--lc-grade) !important; gap: 14px !important; align-items: center !important; padding: 14px 16px !important; box-sizing: border-box; min-width: 0; }
.lc-shell.view-mode-list .lc-head { background: var(--de-marfim-apoio) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--de-texto-secundario) !important; border: 0 !important; border-radius: 0 !important; letter-spacing: 0 !important; white-space: nowrap; }
.lc-head > div { overflow: visible; }
.lc-head > div, .lc-row > div { min-width: 0; }
.lc-head .lc-c-acao { text-align: left; }
.lc-shell.view-mode-list .lc-row { border: 0 !important; border-top: 1px solid var(--de-divisoria) !important; border-radius: 0 !important; background: var(--de-branco) !important; min-height: 64px; margin: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transition: background .15s ease; }
.lc-shell.view-mode-list .lc-row:hover { background: var(--de-marfim-apoio) !important; }
.lc-shell.view-mode-list .lc-row.selected { background: var(--de-laranja-claro) !important; }
.lc-c-nome { display: flex; gap: 12px; align-items: center; min-width: 0; }
.lc-avatar { width: 38px !important; height: 38px !important; border-radius: 50% !important; background: var(--de-marfim) !important; color: var(--de-grafite) !important; font-weight: 700 !important; font-size: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: none !important; margin: 0 !important; }
.lc-avatar--branco { background: var(--de-branco) !important; }
.lc-nome-texto { min-width: 0; }
/* nome completo: quebra em até 2 linhas (a planilha do Leilão SF traz nomes de 4+ palavras); o title leva o nome todo */
.lc-nome { font-weight: 700 !important; font-size: 14px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal !important; overflow: hidden; overflow-wrap: anywhere; color: var(--de-grafite) !important; margin: 0 !important; line-height: 1.25 !important; }
.lc-c-banco, .lc-c-margem { overflow: hidden; }
.lc-c-banco .lead-banco { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-desde { font-size: 11px !important; color: var(--de-texto-terciario) !important; display: block; white-space: nowrap; }
.lc-c-cpf { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-c-tel { display: flex; gap: 6px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-c-tel .lc-copy { width: 24px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--de-borda) !important; border-radius: 7px !important; background: var(--de-branco) !important; color: var(--de-texto-secundario) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none; cursor: pointer; box-shadow: none !important; font-size: 0 !important; }
.lc-c-tel .lc-copy:hover { color: var(--de-grafite) !important; border-color: var(--de-grafite) !important; }
/* Mais de um telefone: uma linha por número, cada uma com copiar e WhatsApp */
.lc-tel-lista { display: grid; gap: 4px; }
.lc-tel-linha { display: flex; align-items: center; gap: 4px; }
.lc-tel-lista .lead-tel { font-size: 13px; }
.lc-tel-lista .lc-copy { width: 22px !important; height: 22px !important; }
/* Um telefone (dono, 13/11): número → copiar → WhatsApp → fogo com as mesmas medidas da linha de vários, para caber nos 176 px. */
.lc-c-tel:has(> .lead-tel) { gap: 4px; }
.lc-c-tel > .lead-tel { font-size: 13px; }
.lc-c-tel > .lc-copy { width: 22px !important; height: 22px !important; }
.lc-wa-mini { width: 22px; height: 22px; border: 1px solid var(--de-status-contrato-ponto) !important; border-radius: 7px; background: var(--de-status-contrato-fundo) !important; color: var(--de-status-contrato-texto) !important; display: inline-flex !important; align-items: center; justify-content: center; flex: none; box-sizing: border-box; text-decoration: none !important; padding: 0 !important; margin: 0 !important; }
.lc-card-linhas > .lc-tel-linha { align-items: center; }
.lc-card-linhas > .lc-tel-linha > b { margin-left: auto; }
/* Quadro com 3 telefones (print p03, 13/11): a linha com o foguinho media 246 px em 210 px úteis e alargava o cartão. Rótulo curto
   ("Tel. N", o nome inteiro no title), menos espaço entre os itens, foguinho sem margem; se ainda faltar, só o rótulo encolhe. */
.lc-card-linhas > .lc-tel-linha { gap: 6px; min-width: 0; }
.lc-card-linhas > .lc-tel-linha > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lc-card-linhas > .lc-tel-linha > .hot-phone-badge { margin-left: 0; flex: none; }
/* Foguinho na linha de telefone (13/11): o espaço é o gap da linha; a coluna Telefone cabe número + copiar + WhatsApp + fogo. */
.lc-tel-linha > .hot-phone-badge, .lc-tel-linha > .hot-phone-slot, .lc-c-tel > .hot-phone-badge { margin-left: 0; }
.lc-tel-acoes { display: inline-flex; gap: 4px; flex: none; }
.lc-tel-acoes .lc-copy { width: 24px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--de-borda) !important; border-radius: 7px !important; background: var(--de-branco) !important; color: var(--de-texto-secundario) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none; cursor: pointer; box-shadow: none !important; font-size: 0 !important; }
.lc-mais-tel summary { font-size: 12px; color: var(--de-texto-secundario); }
.lc-c-banco { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-c-valor { font-weight: 700; font-size: 15px; white-space: nowrap; }
.lc-c-margem, .lc-c-parcelas { font-size: 14px; white-space: nowrap; }
/* Facta: "Prazo na simulação" (PRAZO_FACTA) não cabe numa linha da coluna Parcelas; quebra entre as palavras. */
.lc-row:has(.banco-tag--facta) .lc-c-parcelas { white-space: normal; overflow-wrap: normal; line-height: 1.25; }
.lc-c-roleta { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-tag { display: inline-block !important; padding: 4px 10px !important; border-radius: 999px !important; background: var(--de-status-novo-fundo) !important; color: var(--de-status-novo-texto) !important; font-size: 11px !important; font-weight: 700 !important; white-space: nowrap !important; margin: 0 !important; line-height: 1.3 !important; }
.lc-tag--prazo { background: var(--de-status-contrato-fundo) !important; color: var(--de-status-contrato-texto) !important; }
/* Desfechos: Pago verde, Sem interesse cinza, Sem contato âmbar */
.lc-tag.lead-badge--closed { background: var(--de-status-contrato-fundo) !important; color: var(--de-status-contrato-texto) !important; }
.lc-tag.lead-badge--no_interest { background: var(--de-status-seminteresse-fundo) !important; color: var(--de-status-seminteresse-texto) !important; }
.lc-tag.lead-badge--no_contact { background: var(--de-status-novo-fundo) !important; color: var(--de-status-novo-texto) !important; }
.lc-tag.lead-badge::before { display: none !important; }
.lc-c-acao { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.lc-wa { display: inline-flex !important; align-items: center !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; background: var(--de-status-contrato-fundo) !important; color: var(--de-status-contrato-texto) !important; font-weight: 700 !important; font-size: 12px !important; text-decoration: none !important; white-space: nowrap !important; border: 0 !important; box-sizing: border-box; flex: none; margin: 0 !important; }
.lc-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--de-borda) !important; background: var(--de-branco) !important; color: var(--de-grafite) !important; font-weight: 600 !important; font-size: 12px !important; text-decoration: none !important; white-space: nowrap !important; min-height: 0 !important; box-shadow: none !important; cursor: pointer; box-sizing: border-box; margin: 0 !important; }
.lc-btn--ok { background: var(--de-status-contrato-fundo) !important; color: var(--de-status-contrato-texto) !important; border-color: var(--de-status-contrato-fundo) !important; }
/* Meus clientes: WhatsApp e Pago em cima, Sem interesse e Sem contato embaixo, todos com 36px e o
   mesmo raio; "Devolver para a roleta" discreto, ocupando a largura toda. */
.lc-acoes-mine { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100%; min-width: 0; }
.lc-acoes-mine > .lc-wa, .lc-acoes-mine > .lc-btn { width: 100% !important; height: 36px !important; min-height: 36px !important; justify-content: center !important; font-size: 12px !important; border-radius: 10px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-acoes-mine .lc-btn--ghost { grid-column: 1 / -1; background: transparent !important; border-color: var(--de-borda) !important; color: var(--de-texto-secundario) !important; font-weight: 600 !important; }
.lc-acoes-mine .lc-btn--ghost:hover { color: var(--de-grafite) !important; border-color: var(--de-grafite) !important; }
.lc-shell.lc-aba-in_service .lc-c-acao { display: block; }
/* Finalizados */
.lc-c-desfecho .lead-badge { margin: 0 !important; }
.lc-c-data { font-size: 13px; color: var(--de-texto-secundario); white-space: nowrap; }
.lc-empty { padding: 40px 20px; text-align: center; }
.lc-empty-titulo { margin: 0 0 6px; font-family: var(--de-fonte-titulo); font-weight: 700; font-size: 17px; color: var(--de-grafite); }
.lc-empty-texto { margin: 0; font-size: 14px; color: var(--de-texto-secundario); }
.lc-vazio { padding: 22px 20px !important; margin: 0 !important; color: var(--de-texto-secundario) !important; font-size: 14px !important; }
.lc-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.lc-pagination .pagination-text { font-size: 13px; color: var(--de-texto-secundario); }
.lc-pagination .pagination-numbers { display: flex; gap: 8px; align-items: center; }

/* Botão RESERVAR do design (.rsv1): clique → círculo gira/preenche 2 s → "✓ Reservado" verde */
.rsv1 { flex: none !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 172px !important; height: 46px !important; min-height: 0 !important; padding: 3px !important; border: 2px solid var(--de-laranja-principal) !important; border-radius: 50px !important; background: var(--de-branco) !important; cursor: pointer; transition: all .4s ease !important; box-sizing: border-box !important; font-weight: 700 !important; font-size: 14px !important; color: var(--de-grafite) !important; user-select: none; box-shadow: none !important; margin: 0 !important; overflow: visible !important; font-family: inherit !important; }
.rsv1 .c { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--de-laranja-principal); display: flex; align-items: center; justify-content: center; color: var(--de-branco); font-size: 15px; overflow: hidden; transition: all .4s ease; flex: none; }
.rsv1 .c svg { position: relative; z-index: 1; }
.rsv1 .c::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--de-laranja-escuro); }
.rsv1 .t { position: absolute; right: 16px; transition: all .4s ease; white-space: nowrap; pointer-events: none; }
.rsv1 .t.ok { opacity: 0; visibility: hidden; color: var(--de-status-contrato-ponto); }
.rsv1.is-on { width: 46px !important; animation: rsv1done .4s ease 2.2s forwards; }
.rsv1.is-on .c { rotate: 180deg; animation: rsv1pulse 1s forwards, rsv1hide .2s ease 2.2s forwards; }
.rsv1.is-on .c::before { animation: rsv1fill 2s ease-in-out forwards; }
.rsv1.is-on .t { opacity: 0; visibility: hidden; }
.rsv1.is-on .t.ok { animation: rsv1show .4s ease 2.2s forwards; }
.rsv1:disabled:not(.is-on) { opacity: .6; cursor: default; }
/* Visão do administrador: ação que é do afiliado fica apagada de verdade e sem mão de clique,
   para ninguém tentar clicar e achar que a tela quebrou. */
[data-somente-leitura] { opacity: .45 !important; cursor: not-allowed !important; filter: grayscale(1); pointer-events: none; }
@keyframes rsv1pulse { 0% { scale: .95; box-shadow: 0 0 0 0 rgba(255,118,23,.6); } 70% { scale: 1; box-shadow: 0 0 0 14px rgba(255,118,23,0); } 100% { scale: .95; } }
@keyframes rsv1fill { to { height: 100%; } }
@keyframes rsv1done { to { width: 172px; border-color: var(--de-status-contrato-ponto); background: var(--de-status-contrato-fundo); } }
@keyframes rsv1hide { to { opacity: 0; visibility: hidden; } }
@keyframes rsv1show { to { opacity: 1; visibility: visible; right: 22px; } }

/* --- MODO QUADRO --- */
.lc-shell.view-mode-board .lc-head { display: none !important; }
.lc-shell.view-mode-board .lc-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.lc-shell.view-mode-board #aline-list-root { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
.lc-shell.view-mode-board #aline-list-root > .lc-vazio, .lc-shell.view-mode-board #aline-list-root > .muted, .lc-shell.view-mode-board #aline-list-root > .aline-error-state { grid-column: 1 / -1; }
.lc-col { background: var(--de-branco); border: 1px solid var(--de-borda); border-top: 3px solid var(--lc-cor-etapa, var(--de-laranja-principal)); border-radius: 14px; padding: 14px; min-height: 180px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.lc-col-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding: 0 2px 6px; }
.lc-col-head .lc-col-count { color: var(--de-texto-terciario) !important; background: transparent !important; padding: 0 !important; font-weight: 700 !important; }
.lc-col-cards { display: grid; gap: 10px; min-width: 0; }
.lc-col-vazio { font-size: 12px; color: var(--de-texto-terciario); padding: 8px 2px; margin: 0; }
.lc-col-vazio[hidden] { display: none; }
/* O quadro antigo escondia o avatar (.view-mode-board .lead-avatar{display:none}); o cartão do
   design tem o círculo com as iniciais antes do nome. */
.lc-shell.view-mode-board .lc-card .lc-avatar { display: flex !important; }
.lc-shell.view-mode-board .lc-card { display: grid !important; gap: 8px !important; min-width: 0 !important; background: var(--de-marfim) !important; border: 1px solid var(--de-divisoria) !important; border-radius: 12px !important; padding: 12px 10px !important; margin: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; overflow: visible !important; grid-template-columns: none !important; }
.lc-card-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lc-card-sub { font-size: 11px; color: var(--de-texto-terciario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-card-linhas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; padding: 8px 0; border-top: 1px solid var(--de-divisoria); border-bottom: 1px solid var(--de-divisoria); }
.lc-card-linhas > div, .lc-card-kv { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 12px; }
.lc-card-linhas span, .lc-card-kv span { color: var(--de-texto-secundario); }
/* O CPF do quadro mora num span (linha do botão de copiar): não herda o cinza do rótulo da regra acima. */
.lc-card-linhas .lc-copy-linha { color: inherit; }
.lc-card-linhas b { font-size: 12px; }
.lc-card-kv--valor { font-size: 13px; }
.lc-card-kv--valor b { font-size: 13px; }
.lc-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.lc-status { display: grid; gap: 4px; }
.lc-status > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--de-texto-secundario); }
.lc-status .lead-status { height: 40px !important; border: 1px solid var(--de-borda) !important; border-radius: 10px !important; padding: 0 10px !important; font: inherit !important; font-size: 13px !important; font-weight: 600 !important; background: var(--de-branco) !important; color: var(--de-grafite) !important; width: 100% !important; box-sizing: border-box; min-height: 0 !important; }
.lc-status .lead-status:disabled { color: var(--de-texto-terciario) !important; cursor: not-allowed; }
.lc-card-botoes { display: flex; gap: 6px; }
.lc-shell.view-mode-board .lc-card .rsv1 { width: 100% !important; }
.lc-shell.view-mode-board .lc-card .rsv1.is-on { width: 46px !important; }
.lc-shell.view-mode-board .lc-card .lc-acoes-mine { grid-template-columns: 1fr 1fr !important; }

/* Entre 1280 e 1366px a tabela aperta (folgas, mínimos e o botão Reservar) para caber sem cortar
   nada: o design é mínimo 1280px, e em 1280 a linha inteira precisa entrar na tela. */
@media (min-width: 1201px) and (max-width: 1366px) {
  .lc-page { padding-left: 24px; padding-right: 24px; }
  .lc-shell { --lc-grade: minmax(172px, 1.5fr) minmax(100px, 1fr) minmax(176px, 1.1fr) minmax(102px, .9fr) minmax(98px, .9fr) minmax(82px, .7fr) minmax(60px, .7fr) minmax(104px, 1fr) 262px; }
  /* Em Meus clientes os botões da coluna Ação são de largura fluida, então ela pode encolher para
     250px e devolver espaço ao nome, ao banco e ao valor. */
  .lc-shell.lc-aba-in_service { --lc-grade: minmax(192px, 1.5fr) minmax(98px, .9fr) minmax(176px, 1fr) minmax(96px, .8fr) minmax(100px, .8fr) minmax(84px, .6fr) minmax(58px, .5fr) minmax(106px, .8fr) 244px; }
  .lc-shell.lc-aba-finalized { --lc-grade: minmax(182px, 1.6fr) minmax(100px, 1fr) minmax(176px, 1.1fr) minmax(112px, 1fr) minmax(114px, 1fr) minmax(116px, 1fr) minmax(150px, 1.1fr); }
  .lc-shell.view-mode-list .lc-head, .lc-shell.view-mode-list .lc-row { gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .rsv1 { width: 150px !important; }
  @keyframes rsv1done { to { width: 150px; border-color: var(--de-status-contrato-ponto); background: var(--de-status-contrato-fundo); } }
  .lc-wa { padding: 0 10px !important; }
}

/* Até 1200px (iPad deitado incluso; print do dono 13/11): a tabela vira cartões empilhados com rótulos; o quadro rola de lado */
@media (max-width: 1200px) {
  .lc-page { min-width: 0; padding: 20px 16px 40px; }
  .lc-top { flex-direction: column; align-items: stretch; }
  .lc-tools { flex-wrap: wrap; }
  .lc-search { width: 100%; }
  .lc-shell.view-mode-list .lc-head { display: none !important; }
  .lc-table { background: transparent; border: 0; overflow: visible; }
  .lc-shell.view-mode-list .lc-row { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; padding: 14px 16px !important; background: var(--de-branco) !important; border: 1px solid var(--de-borda) !important; border-radius: 14px !important; margin: 0 0 12px !important; }
  .lc-shell.view-mode-list .lc-row > div:not(.lc-c-nome):not(.lc-c-acao):not(.lc-c-roleta) { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
  .lc-shell.view-mode-list .lc-c-cpf::before { content: 'CPF'; color: var(--de-texto-secundario); font-weight: 500; }
  .lc-shell.view-mode-list .lc-c-tel::before { content: 'Telefone'; color: var(--de-texto-secundario); font-weight: 500; margin-right: auto; }
  .lc-shell.view-mode-list .lc-c-banco::before { content: 'Banco'; color: var(--de-texto-secundario); font-weight: 500; }
  .lc-shell.view-mode-list .lc-c-valor::before { content: 'Valor aprovado'; color: var(--de-texto-secundario); font-weight: 500; }
  /* HIG-5: "Seguro incluído" desce para a linha de baixo, alinhado com o valor (visto em 390 px). */
  .lc-shell.view-mode-list .lc-c-valor { flex-wrap: wrap; row-gap: 2px; }
  .lc-shell.view-mode-list .lc-c-valor .banco-seguro { flex-basis: 100%; margin-top: 0; text-align: right; }
  .lc-shell.view-mode-list .lc-c-margem::before { content: 'Margem livre'; color: var(--de-texto-secundario); font-weight: 500; }
  .lc-shell.view-mode-list .lc-c-parcelas::before { content: 'Parcelas'; color: var(--de-texto-secundario); font-weight: 500; }
  /* Cartão da Soma (D3): não há valor aprovado nem parcela. Na roleta e em atendimento some a linha do
     valor ("—"); nos finalizados ela leva margem e prazo; a coluna de parcelas mostra o prazo máximo.
     O "> div.lc-c-valor" empata a especificidade com a regra genérica do celular acima
     (".lc-row > div:not(...)", display: flex) e, vindo depois, vence; sem o "div" ela perde. */
  .lc-shell.view-mode-list:not(.lc-aba-finalized) .lc-row:has(.banco-tag--soma_uy3, .banco-tag--soma_celcoin) > div.lc-c-valor { display: none; }
  .lc-shell.view-mode-list.lc-aba-finalized .lc-row:has(.banco-tag--soma_uy3, .banco-tag--soma_celcoin) .lc-c-valor::before { content: 'Margem e prazo'; }
  .lc-shell.view-mode-list .lc-row:has(.banco-tag--soma_uy3, .banco-tag--soma_celcoin) .lc-c-parcelas::before { content: 'Prazo máximo'; }
  /* Cartão do Presença (spec Presença OF, D16): só a margem. Somem as linhas de valor e de parcelas
     ("—"); nos finalizados a linha do valor leva a margem. Mesmo "> div." e ":not(...)" da Soma, pelo
     mesmo motivo: seis classes para empatar com a genérica (Finalizados nem tem coluna de parcelas). */
  .lc-shell.view-mode-list:not(.lc-aba-finalized) .lc-row:has(.banco-tag--presenca) > div.lc-c-valor,
  .lc-shell.view-mode-list:not(.lc-aba-finalized) .lc-row:has(.banco-tag--presenca) > div.lc-c-parcelas { display: none; }
  .lc-shell.view-mode-list.lc-aba-finalized .lc-row:has(.banco-tag--presenca) .lc-c-valor::before { content: 'Margem'; }
  /* Recomendação (EMENDA-R3, R3-D): sem prazo, a linha de parcelas some; o selo aparece embaixo do nome.
     Termina em "> div.lc-c-parcelas" para empatar com a regra genérica (0,6,1) e vencer por vir depois. */
  .lc-shell.view-mode-list:not(.lc-aba-finalized) .lc-row:has(.banco-selo-recomendado) > div.lc-c-parcelas { display: none; }
  .lc-shell.view-mode-list.lc-aba-finalized .lc-row:has(.banco-selo-recomendado) .lc-c-valor::before { content: 'Margem'; }
  .lc-c-acao { justify-content: stretch; }
  .lc-c-acao .lc-wa { flex: 1; justify-content: center; }
  .lc-c-acao .rsv1 { width: 172px !important; }
  .lc-shell.view-mode-board #aline-list-root { display: flex !important; overflow-x: auto; }
  .lc-col { flex: 0 0 82%; }
}

/* Higienização multibanco (spec §8, D9, D10, D18): cor de cada origem da roleta, faixa de filtro
   em Clientes aprovados, etiqueta do banco e linha "CONSULTA ONLINE" no cartão de banco.
   As cores ficam em :root porque a lateral da I.A (css/ia.css) usa as mesmas. */
:root {
  --banco-cor-csv: #0C1B5C; --banco-cor-novosaque: #FF6800; --banco-cor-v8: #7F3FFF;
  --banco-fundo-csv: rgba(12, 27, 92, .1); --banco-fundo-novosaque: rgba(255, 104, 0, .1); --banco-fundo-v8: rgba(127, 63, 255, .1);
  /* Soma UY3 e Soma Celcoin: cores placeholder até o dono mandar as reais (spec Soma D21). */
  --banco-cor-soma_uy3: #1F7A5C; --banco-cor-soma_celcoin: #0A6CFF;
  --banco-fundo-soma_uy3: rgba(31, 122, 92, .1); --banco-fundo-soma_celcoin: rgba(10, 108, 255, .1);
  /* Presença Bank: laranja da marca (spec Presença OF, D16). */
  --banco-cor-presenca: #FF5A00; --banco-fundo-presenca: rgba(255, 90, 0, .1);
  /* Leilão SF (lote da planilha do Sempre Fácil): azul-petróleo, para não se confundir com o Sempre Fácil. */
  --banco-cor-sf_planilha: #0E7C86; --banco-fundo-sf_planilha: rgba(14, 124, 134, .1);
  /* +Bancos em lote (pacote 61): verde-escuro, sem logo próprio (o lote mistura bancos). */
  --banco-cor-mais_bancos: #2E5E4E; --banco-fundo-mais_bancos: rgba(46, 94, 78, .1);
  /* Facta (frente 2, 12/11): azul do nome no logo do dono. */
  --banco-cor-facta: #2A6793; --banco-fundo-facta: rgba(42, 103, 147, .1);
}
/* Logo redondo do banco; as iniciais só aparecem quando a imagem não carrega. */
.banco-logo { display: inline-grid; place-items: center; flex: none; }
.banco-logo__img { display: block; border-radius: 50%; object-fit: cover; }
.banco-logo__iniciais { display: inline-grid; place-items: center; width: 100%; height: 100%; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--banco-cor); color: #fff; font-size: 10px; font-weight: 700; }
.banco-logo__iniciais[hidden], .banco-logo__img[hidden] { display: none; }
.banco-logo--csv { --banco-cor: var(--banco-cor-csv); }
.banco-logo--novosaque { --banco-cor: var(--banco-cor-novosaque); }
.banco-logo--v8 { --banco-cor: var(--banco-cor-v8); }
.banco-logo--soma_uy3 { --banco-cor: var(--banco-cor-soma_uy3); }
.banco-logo--soma_celcoin { --banco-cor: var(--banco-cor-soma_celcoin); }
.banco-logo--presenca { --banco-cor: var(--banco-cor-presenca); }
.banco-logo--sf_planilha { --banco-cor: var(--banco-cor-sf_planilha); }
.banco-logo--mais_bancos { --banco-cor: var(--banco-cor-mais_bancos); }
.banco-logo--facta { --banco-cor: var(--banco-cor-facta); }
/* Ícone da Facta com fundo transparente: inteiro dentro do círculo, sobre branco (no chip azul-claro sumiria o azul). */
.banco-logo--facta .banco-logo__img { object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--banco-fundo-facta); }
.banco-filtro-faixa { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.banco-filtro { --banco-cor: var(--de-grafite, #2B2D33); --banco-fundo: transparent; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border: 1px solid var(--de-borda, #E4E0D8); border-radius: 999px; background: var(--de-branco, #fff); color: var(--de-grafite, #2B2D33); font: inherit; font-size: 13px; cursor: pointer; opacity: .55; transition: opacity .15s, border-color .15s; }
.banco-filtro.is-on { opacity: 1; border-color: var(--banco-cor); background: var(--banco-fundo); color: var(--banco-cor); }
.banco-filtro:focus-visible { outline: 2px solid var(--banco-cor); outline-offset: 2px; }
.banco-filtro__icone { display: inline-grid; place-items: center; width: 30px; height: 30px; }
.banco-filtro__icone .banco-logo, .banco-filtro__icone .banco-logo__img { width: 30px; height: 30px; }
.banco-filtro__n { min-width: 22px; padding: 1px 7px; border: 1px solid var(--banco-cor); border-radius: 999px; background: var(--banco-fundo); color: var(--banco-cor); font-size: 12px; font-weight: 700; text-align: center; }
.banco-filtro__n:empty { display: none; }
/* Faixa (dono, 12/11): Sempre Fácil com a coroa de 1º lugar e o total somado no fim. A coroa é desenho
   de CSS (sem imagem e sem texto); o brilho passa uma vez a cada 6 s e some com movimento reduzido. */
.banco-filtro--top1 { position: relative; border-color: var(--banco-coroa, #D9A521); box-shadow: 0 0 0 1px rgba(217, 165, 33, .35); }
.banco-filtro__coroa { position: absolute; top: -9px; left: 11px; width: 18px; height: 12px; pointer-events: none; clip-path: polygon(0 100%, 0 22%, 26% 58%, 50% 0, 74% 58%, 100% 22%, 100% 100%); background: linear-gradient(110deg, #B8860B 0%, #E8B923 38%, #FFF3B0 50%, #E8B923 62%, #B8860B 100%); background-size: 260% 100%; background-position: 100% 0; animation: banco-coroa-brilho 6s ease-in-out infinite; }
@keyframes banco-coroa-brilho { 0%, 78% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.banco-filtro-total { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: auto; padding: 4px 12px; border: 1px dashed var(--de-borda, #E4E0D8); border-radius: 999px; color: var(--de-grafite, #2B2D33); font-size: 13px; font-weight: 600; }
.banco-filtro-total__n { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: var(--de-grafite, #2B2D33); color: var(--de-branco, #fff); font-size: 12px; font-weight: 700; text-align: center; }
.banco-filtro-total.is-vazio { display: none; }
@media (max-width: 640px) {
  .banco-filtro-total { min-height: 36px; margin-left: 0; padding: 2px 10px; font-size: 12px; }
  .banco-filtro__coroa { top: -8px; left: 8px; width: 16px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .banco-filtro__coroa { animation: none; background-position: 50% 0; }
}
.banco-filtro--csv { --banco-cor: var(--banco-cor-csv); --banco-fundo: var(--banco-fundo-csv); }
.banco-filtro--novosaque { --banco-cor: var(--banco-cor-novosaque); --banco-fundo: var(--banco-fundo-novosaque); }
.banco-filtro--v8 { --banco-cor: var(--banco-cor-v8); --banco-fundo: var(--banco-fundo-v8); }
.banco-filtro--soma_uy3 { --banco-cor: var(--banco-cor-soma_uy3); --banco-fundo: var(--banco-fundo-soma_uy3); }
.banco-filtro--soma_celcoin { --banco-cor: var(--banco-cor-soma_celcoin); --banco-fundo: var(--banco-fundo-soma_celcoin); }
.banco-filtro--presenca { --banco-cor: var(--banco-cor-presenca); --banco-fundo: var(--banco-fundo-presenca); }
.banco-filtro--sf_planilha { --banco-cor: var(--banco-cor-sf_planilha); --banco-fundo: var(--banco-fundo-sf_planilha); }
.banco-filtro--mais_bancos { --banco-cor: var(--banco-cor-mais_bancos); --banco-fundo: var(--banco-fundo-mais_bancos); }
.banco-filtro--facta { --banco-cor: var(--banco-cor-facta); --banco-fundo: var(--banco-fundo-facta); }
.banco-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 1px solid var(--banco-cor); border-radius: 999px; background: var(--banco-fundo); color: var(--banco-cor); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.banco-tag .banco-logo, .banco-tag .banco-logo__img { width: 20px; height: 20px; }
.banco-tag--csv { --banco-cor: var(--banco-cor-csv); --banco-fundo: var(--banco-fundo-csv); }
.banco-tag--novosaque { --banco-cor: var(--banco-cor-novosaque); --banco-fundo: var(--banco-fundo-novosaque); }
.banco-tag--v8 { --banco-cor: var(--banco-cor-v8); --banco-fundo: var(--banco-fundo-v8); }
.banco-tag--soma_uy3 { --banco-cor: var(--banco-cor-soma_uy3); --banco-fundo: var(--banco-fundo-soma_uy3); }
.banco-tag--soma_celcoin { --banco-cor: var(--banco-cor-soma_celcoin); --banco-fundo: var(--banco-fundo-soma_celcoin); }
.banco-tag--presenca { --banco-cor: var(--banco-cor-presenca); --banco-fundo: var(--banco-fundo-presenca); }
.banco-tag--sf_planilha { --banco-cor: var(--banco-cor-sf_planilha); --banco-fundo: var(--banco-fundo-sf_planilha); }
.banco-tag--mais_bancos { --banco-cor: var(--banco-cor-mais_bancos); --banco-fundo: var(--banco-fundo-mais_bancos); }
.banco-tag--facta { --banco-cor: var(--banco-cor-facta); --banco-fundo: var(--banco-fundo-facta); }
/* Coluna Banco da lista (108 px em 1440): "Presença Bank" e "Soma Celcoin" passam disso e a célula
   cortava a borda da etiqueta. A etiqueta cabe na célula e o nome encurta; o logo guarda o nome no alt. */
.lc-row .lc-c-banco .banco-tag { max-width: 100%; box-sizing: border-box; }
.lc-row .lc-c-banco .banco-tag__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.banco-consulta { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--de-grafite, #2B2D33); }
.banco-seguro { margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--de-texto-secundario, #5D6068); white-space: normal; overflow-wrap: anywhere; }
.banco-seguro__valor { white-space: nowrap; }
/* Cartão da Soma (spec Soma §8.2): "Prazo máximo aprovado: Nx" no padrão da linha de seguro. */
.banco-prazo { margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--de-texto-secundario, #5D6068); }
/* Selo do cartão da recomendação da Soma (EMENDA-R3): no lugar do prazo máximo, com o texto do leilão. */
.banco-selo-recomendado { display: inline-block; padding: 1px 8px; border: 1px solid var(--banco-cor-soma_uy3, #1F7A5C); border-radius: 999px; background: var(--banco-fundo-soma_uy3, rgba(31, 122, 92, .1)); color: var(--banco-cor-soma_uy3, #1F7A5C); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.lc-card-selo { margin-top: 4px; }
/* Na lista o selo fica embaixo do nome, numa linha só (R3-D: na coluna de parcelas, de 64 px, ele ficava
   espremido em 3 linhas). Ocupa a largura toda da célula do nome (a mais larga da grade, contando o
   avatar): a 1280 px só a área do texto (130 px) não cabia o selo (152 px). Nenhuma coluna muda de largura. */
.lc-c-nome:has(> .lc-selo) { flex-wrap: wrap; row-gap: 4px; }
.lc-c-nome:has(> .lc-selo) > .lc-nome-texto { flex: 1 1 0; } /* o texto fica ao lado do avatar; só o selo desce */
.lc-c-nome > .lc-selo { flex-basis: 100%; }
/* Na aba Finalizados a célula de valor do cartão Soma leva "Margem R$ X · até Nx", mais longo que um valor. */
.lc-row:has(.banco-tag--soma_uy3, .banco-tag--soma_celcoin) .lc-c-valor { white-space: normal; }
.banco-consulta--laranja { color: var(--de-laranja-principal, #FF7617); }
.banco-filtro--todos { font-weight: 600; padding: 4px 14px; }
.banco-filtro__so { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; background: var(--de-cinza-claro, #EFECE6); color: var(--de-grafite, #2B2D33); opacity: .7; cursor: pointer; transition: opacity .15s, background .15s, color .15s; }
.banco-filtro__so:hover { opacity: 1; background: var(--banco-cor, var(--de-laranja-principal)); color: #fff; }
.banco-filtro.is-solo .banco-filtro__so { background: var(--banco-cor); color: #fff; opacity: 1; }
/* Celular (R3-D, visto pelo maestro a 390 px): a regra antiga escondia o nome dos chips (desde o bloco 4,
   23/09, antes da Soma) — o "Todos os bancos", que só tem nome, ficava vazio, e ninguém sabia o que estava
   filtrando. Agora o nome aparece em todos; o chip fica compacto para caberem dois por linha sem rolagem. */
@media (max-width: 640px) {
  .banco-filtro-faixa { gap: 6px; }
  .banco-filtro { gap: 5px; min-height: 36px; padding: 2px 8px 2px 3px; font-size: 12px; }
  .banco-filtro--todos { padding: 2px 12px; }
  .banco-filtro__nome { white-space: nowrap; }
  .banco-filtro__icone, .banco-filtro__icone .banco-logo, .banco-filtro__icone .banco-logo__img { width: 24px; height: 24px; }
  .banco-filtro__n { min-width: 18px; padding: 0 5px; font-size: 11px; }
  .banco-filtro__so { margin-left: 0; padding: 1px 5px; font-size: 10px; }
}

/* ---- Copiar CPF e nome (frente 4): botão discreto, igual ao do telefone ----
   Computador: quase apagado, sobe no hover da linha/cartão e no foco por teclado. Sem hover (celular): sempre visível. */
.lc-copy-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lc-card-linhas > div > .lc-copy-linha { justify-content: flex-end; }
.lc-copy--texto { width: 22px !important; height: 22px !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--de-borda) !important; border-radius: 7px !important; background: var(--de-branco) !important; color: var(--de-texto-secundario) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: none; cursor: pointer; box-shadow: none !important; font-size: 0 !important; opacity: .35; transition: opacity .15s ease; }
.lc-copy--texto svg { width: 12px; height: 12px; }
.lc-row:hover .lc-copy--texto, .lc-card:hover .lc-copy--texto, .lc-copy--texto:hover { opacity: 1; }
.lc-copy--texto:focus-visible { opacity: 1; outline: 2px solid var(--de-grafite); outline-offset: 1px; }
.lc-copy--texto:hover { color: var(--de-grafite) !important; border-color: var(--de-grafite) !important; }
@media (hover: none) { .lc-copy--texto { opacity: 1; width: 28px !important; height: 28px !important; } }

/* ---- Afiliado bloqueado no leilão (SPEC admin-afiliados §5.3) ----
   O servidor manda texto de mentira; o borrado vermelho só cobre esse texto. Sem ações nos cartões. */
.is-bloqueado .lead-name, .is-bloqueado .lc-nome, .is-bloqueado .lead-avatar, .is-bloqueado .lead-tel, .is-bloqueado .lead-cpf,
.is-bloqueado .lc-avatar { filter: blur(6px) !important; color: #d11 !important; -webkit-user-select: none !important; user-select: none !important; pointer-events: none; background: rgba(221,17,17,.14) !important; border-radius: 6px; }
.is-bloqueado { cursor: default !important; }
.badge-bloqueado{ display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #d11; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; }
.faixa-bloqueio{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #d11; color: #fff; font-weight: 700; font-size: 14px; }
.faixa-bloqueio__botao { appearance: none; border: 0; border-radius: 10px; padding: 9px 14px; background: #fff; color: #d11; font-weight: 700; font-size: 13px; cursor: pointer; min-height: 40px; }
@media (max-width: 640px) { .faixa-bloqueio { flex-direction: column; align-items: stretch; text-align: center; } .faixa-bloqueio__botao { width: 100%; } }

/* Botões do aviso de bloqueio: texto branco sobre laranja escuro (#A6410A, contraste ~6:1), sem brilho "liquid".
   O .button da casa (telas.css) pinta laranja claro com !important; aqui vence por especificidade. */
.popup-aviso .aviso-bloqueio__botao, a.aviso-bloqueio__botao, button.aviso-bloqueio__botao { background: var(--de-laranja-escuro, #A6410A) !important; background-image: none !important; color: #fff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; text-decoration: none; }
.popup-aviso .aviso-bloqueio__botao:hover, .popup-aviso .aviso-bloqueio__botao:focus-visible { background: #8a3508 !important; color: #fff !important; }
.aviso-bloqueio__botao, .aviso-bloqueio__botao * { color: #fff !important; }
/* Mesma regra com mais especificidade: .liquid-button-primary (style.css) e .liquid-button-primary .liquid-button-label
   (style.css, 0,2,0) pintam texto escuro com !important e venceriam a regra de 0,1,0 acima se o botão recebesse essas classes. */
#dialog .aviso-bloqueio__botao, #dialog .aviso-bloqueio__botao *,
.popup-aviso a.aviso-bloqueio__botao.liquid-button-primary, .popup-aviso a.aviso-bloqueio__botao.liquid-button-primary * { color: #fff !important; }
#dialog .aviso-bloqueio__botao:hover, #dialog .aviso-bloqueio__botao:focus, #dialog .aviso-bloqueio__botao:focus-visible,
#dialog .aviso-bloqueio__botao:hover *, #dialog .aviso-bloqueio__botao:focus *, #dialog .aviso-bloqueio__botao:focus-visible *,
.popup-aviso a.aviso-bloqueio__botao.liquid-button-primary:hover, .popup-aviso a.aviso-bloqueio__botao.liquid-button-primary:focus,
.popup-aviso a.aviso-bloqueio__botao.liquid-button-primary:focus-visible { color: #fff !important; }
.aviso-bloqueio__botao::before, .aviso-bloqueio__botao::after { display: none !important; content: none !important; }

/* ---- Bloco Sempre Fácil (oferta-sf.js; tarefa 2 do dono, 13/11) ----
   Cabeçalho numa linha (selo "ELEGÍVEL ÀS HH:MM" + "Margem real R$ X") e uma tabela compacta com os 4 prazos: 60x primeiro e
   destacado, depois 48, 36, 24; números à direita, fonte tabular, um copiar por linha. Só seletores do bloco SF: os cartões dos
   outros bancos ficam como na produção. Os seletores com .lc-card, .ia-leads .lead-card e .aline-detail-card existem porque essas
   telas pintam span/button de outro jeito (cinza do quadro, botão de 100% da lateral, botão !important do detalhe). */
.oferta-sf { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; text-align: left; color: var(--de-grafite, #1A1A1A); font-variant-numeric: tabular-nums; white-space: normal; }
.oferta-sf p { margin: 0; }
.oferta-sf .oferta-sf__cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 1.3; color: inherit; }
.oferta-sf .oferta-sf__selo { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--de-laranja-claro, #FFF1E6); color: var(--de-laranja-escuro, #B8500A); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.oferta-sf .oferta-sf__margem-grupo { white-space: nowrap; }
.oferta-sf .oferta-sf__rotulo { color: var(--de-texto-secundario, #5D6068); font-weight: 500; }
.oferta-sf .oferta-sf__margem { font-size: 15px; font-weight: 700; color: var(--de-grafite, #1A1A1A); white-space: nowrap; }
.oferta-sf .oferta-sf__real { font-size: 12px; font-weight: 700; color: var(--de-status-contrato-texto, #1C4A27); }
/* Margem velha (lead de 12 h ou mais; #22 opção 1): uma linha só, discreta, para o vendedor. */
.oferta-sf .oferta-sf__aviso { font-size: 11px; line-height: 1.3; font-weight: 500; color: var(--de-laranja-escuro, #B8500A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta-sf .oferta-sf__tabela { width: 100%; border-collapse: separate; border-spacing: 0; border: 0 !important; border-radius: 0 !important; overflow: visible; background: none !important; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--de-grafite, #1A1A1A); }
/* telas.css pinta toda th/td da plataforma (padding 14-20 px, fundo, borda, letra 13-15 px) com !important: aqui o bloco desfaz. */
.oferta-sf .oferta-sf__tabela th, .oferta-sf .oferta-sf__tabela td { padding: 4px !important; text-align: right; white-space: nowrap; border: 0 !important; background: none !important; color: var(--de-grafite, #1A1A1A) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; vertical-align: middle !important; }
.oferta-sf .oferta-sf__tabela thead th { padding-top: 0 !important; padding-bottom: 3px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--de-texto-terciario, #8A8A84) !important; }
.oferta-sf .oferta-sf__tabela th:first-child { text-align: left; padding-left: 8px !important; }
.oferta-sf .oferta-sf__tabela tbody tr + tr > * { border-top: 1px solid var(--de-borda, #E5E1D8) !important; }
.oferta-sf .oferta-sf__tabela .oferta-sf__prazo { font-weight: 700 !important; }
.oferta-sf .oferta-sf__tabela .oferta-sf__acao, .oferta-sf .oferta-sf__tabela thead th:last-child { width: 1%; padding: 2px 0 2px 4px !important; }
.oferta-sf .oferta-sf__tabela .oferta-sf__linha--destaque > * { background: var(--de-laranja-claro2, #FDE3CE) !important; font-weight: 700 !important; }
.oferta-sf .oferta-sf__linha--destaque > :first-child { border-radius: 10px 0 0 10px; }
.oferta-sf .oferta-sf__linha--destaque > :last-child { border-radius: 0 10px 10px 0; }
.oferta-sf .oferta-sf__tabela .oferta-sf__linha--destaque .oferta-sf__libera { font-size: 15px !important; font-weight: 800 !important; }
.oferta-sf--real .oferta-sf__tabela .oferta-sf__linha--destaque > * { background: var(--de-status-contrato-fundo, #E8F5E9) !important; }
/* Bloco estreito (quadro do computador, ~212 px; lateral da I.A., ~167 px): cada prazo em duas linhas, a parcela embaixo do valor
   ("parcela R$ Y"), o copiar à direita. Mesmos dados, mesma ordem; só a arrumação muda pela largura do próprio bloco. */
.oferta-sf { container-type: inline-size; }
@container (max-width: 239px) {
  .oferta-sf .oferta-sf__tabela, .oferta-sf .oferta-sf__tabela tbody { display: block; width: 100%; }
  .oferta-sf .oferta-sf__tabela thead { display: none; }
  .oferta-sf .oferta-sf__tabela tbody tr { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "prazo libera acao" "prazo parcela parcela"; align-items: center; column-gap: 8px; row-gap: 0; padding: 4px 0 6px 8px; border-radius: 10px; }
  .oferta-sf .oferta-sf__tabela tbody tr + tr { border-top: 1px solid var(--de-borda, #E5E1D8); border-radius: 0; }
  .oferta-sf .oferta-sf__tabela tbody tr > *, .oferta-sf .oferta-sf__tabela tbody tr + tr > * { padding: 0 !important; border: 0 !important; background: none !important; text-align: left; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__prazo { grid-area: prazo; align-self: center; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__libera { grid-area: libera; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__parcela { grid-area: parcela; font-size: 12px !important; color: var(--de-texto-secundario, #5D6068) !important; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__parcela::before { content: "parcela "; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__acao { grid-area: acao; width: auto; }
  .oferta-sf .oferta-sf__tabela .oferta-sf__linha--destaque { background: var(--de-laranja-claro2, #FDE3CE); }
  .oferta-sf--real .oferta-sf__tabela .oferta-sf__linha--destaque { background: var(--de-status-contrato-fundo, #E8F5E9); }
}
.oferta-sf .oferta-sf__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oferta-sf .oferta-sf__copiar,
.lc-card .oferta-sf .oferta-sf__copiar,
.ia-leads .lead-card .oferta-sf .oferta-sf__copiar,
.crm-theme-dark .ia-leads .lead-card .oferta-sf .oferta-sf__copiar,
.aline-detail-card header .oferta-sf button.oferta-sf__copiar { flex: none !important; width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--de-borda, #E5E1D8) !important; border-radius: 8px !important; background: var(--de-branco, #FFF) !important; color: var(--de-grafite, #1A1A1A) !important; box-shadow: none !important; transform: none !important; filter: none !important; cursor: pointer; vertical-align: middle; }
.oferta-sf .oferta-sf__copiar svg { width: 16px; height: 16px; }
.oferta-sf .oferta-sf__copiar.is-copiado { border-color: var(--de-status-contrato-ponto, #2E7D32) !important; color: var(--de-status-contrato-texto, #1C4A27) !important; }
/* Lista no computador (tabela densa, coluna Valor de ~100 px): só o 60x compacto; o bloco inteiro fica no cartão do celular/tablet. */
.oferta-sf-compacto { display: inline-flex; flex-direction: column; line-height: 1.2; }
.oferta-sf-compacto small { font-size: 11px; font-weight: 600; color: var(--de-texto-secundario, #5D6068); }
@media (min-width: 1201px) { .lc-row .oferta-sf { display: none; } }
.lc-card-oferta { margin: 4px 0; }
/* Nota única da página (tarefa 2): uma linha discreta logo abaixo do título; nada no cartão. */
.lc-nota-sf { margin: -4px 0 12px; max-width: 72ch; font-size: 12px; line-height: 1.4; color: var(--de-texto-terciario, #8A8A84); }

/* ==== CELULAR E TABLET (tarefa 1 do dono, 13/11) ==== INÍCIO
   90 % usa celular. Tudo nesta seção mora dentro de @media screen and (max-width: 1200px): o computador (1201 px ou mais) não muda
   (tests/clientes-aprovados-celular-css.test.mjs). Regras: todo alvo de toque com 44 px; nome na própria linha, quebrando, com o
   copiar fixo à direita; telefone com o número numa linha e copiar, WhatsApp e fogo lado a lado com folga; abas e faixa de bancos
   quebram limpo; nada sobreposto, nada cortado, sem rolagem horizontal. A Líder VIP (TOP LÍDERES, data-area="lider-vip")
   usa as mesmas classes lc-* e fica de fora destas regras. O "screen and" mantém a regra antiga do celular como a
   última sem esse prefixo (higienizacao-front, HIG-5). */
@media screen and (max-width: 1200px) {
  /* Bloco SF na lista do celular: o bloco inteiro no lugar do 60x compacto e das colunas Margem e Parcelas (ele já traz os dois). */
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-row .oferta-sf-compacto { display: none; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-row > div.lc-c-valor:has(.oferta-sf) { display: block; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-row > div.lc-c-valor:has(.oferta-sf)::before { content: none; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-row:has(.oferta-sf) > div.lc-c-margem,
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-row:has(.oferta-sf) > div.lc-c-parcelas { display: none; }
  .oferta-sf .oferta-sf__copiar,
  .lc-card .oferta-sf .oferta-sf__copiar,
  .ia-leads .lead-card .oferta-sf .oferta-sf__copiar,
  .crm-theme-dark .ia-leads .lead-card .oferta-sf .oferta-sf__copiar,
  .aline-detail-card header .oferta-sf button.oferta-sf__copiar { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 10px !important; }

  /* Lista em cartões: grade que cabe 1 cartão no celular e 2 ou 3 no tablet (o cartão não estica até 1.200 px). */
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-rows { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-rows > .lc-vazio { grid-column: 1 / -1; }

  /* Cabeçalho da página: abas em 3 colunas iguais (o texto quebra em vez de sair da tela), Lista/Quadro com 44 px. */
  .lc-shell:not([data-area="lider-vip"]) .lc-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .lc-shell:not([data-area="lider-vip"]) .lc-tabs .lc-tab { min-width: 0; height: auto !important; min-height: 44px !important; padding: 6px 4px !important; white-space: normal !important; text-align: center; line-height: 1.2; font-size: 13px; }
  .lc-shell:not([data-area="lider-vip"]) .lc-view .lc-view-btn { height: 44px !important; min-height: 44px !important; }

  /* Nome: linha própria, quebra no espaço; o copiar fica fixo à direita e nunca é empurrado. */
  .lc-shell:not([data-area="lider-vip"]) .lc-nome-texto .lc-copy-linha { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; column-gap: 8px; width: 100%; }
  .lc-shell:not([data-area="lider-vip"]) .lc-nome-texto .lc-copy-linha > .lc-nome { min-width: 0; white-space: normal !important; overflow-wrap: anywhere; }
  .lc-shell:not([data-area="lider-vip"]) .lc-c-nome > .lc-nome-texto, .lc-shell:not([data-area="lider-vip"]) .lc-card-who > .lc-nome-texto { flex: 1 1 0; min-width: 0; }

  /* Copiar (nome, CPF, telefone), WhatsApp pequeno e fogo: caixas de 44 px, ícone de 18 px, 8 px entre eles. */
  .lc-shell:not([data-area="lider-vip"]) .lc-copy, .lc-shell:not([data-area="lider-vip"]) .lc-copy--texto, .lc-shell:not([data-area="lider-vip"]) .lc-wa-mini, .lc-shell:not([data-area="lider-vip"]) .hot-phone-badge, .lc-shell:not([data-area="lider-vip"]) .hot-phone-slot { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: none !important; border-radius: 10px !important; opacity: 1 !important; margin: 0 !important; }
  .lc-shell:not([data-area="lider-vip"]) .lc-copy svg, .lc-shell:not([data-area="lider-vip"]) .lc-wa-mini svg { width: 18px; height: 18px; }
  .lc-shell:not([data-area="lider-vip"]) .hot-phone-badge__chama { font-size: 18px; }
  .lc-shell:not([data-area="lider-vip"]) .hot-phone-badge::before { inset: 0 !important; }
  .lc-shell:not([data-area="lider-vip"]) .lc-copy-linha { gap: 8px; }

  /* Telefone na lista (um número): rótulo em cima; número, copiar, WhatsApp e fogo numa linha que quebra se faltar espaço. */
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-c-tel { flex-wrap: wrap; align-items: center; justify-content: flex-start !important; column-gap: 8px; row-gap: 6px; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-c-tel > .lead-tel { margin-right: auto; }
  .lc-shell:not([data-area="lider-vip"]).view-mode-list .lc-c-tel::before { flex-basis: 100%; }
  /* Vários telefones (lista e quadro): uma linha por número; o número ocupa o que sobra, os botões com folga. */
  .lc-shell:not([data-area="lider-vip"]) .lc-tel-lista { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .lc-shell:not([data-area="lider-vip"]) .lc-tel-linha { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; min-height: 44px; }
  .lc-shell:not([data-area="lider-vip"]) .lc-tel-linha > .lead-tel, .lc-shell:not([data-area="lider-vip"]) .lc-tel-linha > b.lead-tel { flex: 1 1 auto; min-width: 0; }
  .lc-shell:not([data-area="lider-vip"]) .lc-tel-acoes { display: inline-flex; gap: 8px; }

  /* Quadro: cada linha (Telefone, CPF) com 44 px; botões de baixo, status e Reservar com 44 px. */
  .lc-shell:not([data-area="lider-vip"]) .lc-card .lc-card-linhas > div { min-height: 44px; display: flex; align-items: center; gap: 8px; }
  .lc-shell:not([data-area="lider-vip"]) .lc-card .lc-card-linhas > div > b.lead-tel { margin-left: auto; }
  .lc-shell:not([data-area="lider-vip"]) .lc-c-acao .lc-wa, .lc-shell:not([data-area="lider-vip"]) .lc-card-botoes .lc-btn, .lc-shell:not([data-area="lider-vip"]) .lc-card-botoes .lc-wa, .lc-shell:not([data-area="lider-vip"]) .lc-acoes-mine > .lc-wa, .lc-shell:not([data-area="lider-vip"]) .lc-acoes-mine > .lc-btn { min-height: 44px !important; height: 44px !important; }
  .lc-shell:not([data-area="lider-vip"]) .lc-card-botoes { gap: 8px; }
  .lc-shell:not([data-area="lider-vip"]) .lc-card-botoes > * { flex: 1 1 0; }
  .lc-shell:not([data-area="lider-vip"]) .lc-status select, .lc-shell:not([data-area="lider-vip"]) .lc-card .lead-status { height: 44px !important; min-height: 44px !important; }

  /* Lateral da I.A. (cartões da fila e painel do cliente): botões de 44 px, nome quebra, fogo com caixa de 44 px. */
  .ia-leads .lead-card .btn { height: 44px !important; min-height: 44px !important; max-height: none !important; }
  .ia-leads .lead-card .lead-card__name { white-space: normal !important; overflow-wrap: anywhere; }
  .ia-leads .lead-card .hot-phone-badge { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: none !important; }
  .ia-leads .lead-card .lead-card__phone { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* Painel do cliente (detalhe): copiar, WhatsApp e fogo com 44 px. */
  .ia-lead-detail .hot-phone-badge, .aline-detail-card .hot-phone-badge, .aline-detail-card header button.hot-phone-badge { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: none !important; vertical-align: middle; }
  .ia-lead-detail .btn-copy-phone, .ia-lead-detail .btn-wa, .aline-detail-card .btn-copy-phone, .aline-detail-card .btn-wa { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px !important; padding: 0 12px !important; font-size: 13px !important; vertical-align: middle; }
  /* #15 13/11 (prints a1f1e7a): nada fixo sobre nome ou ação. A barra de topo (Menu) fica opaca nesta página, sem o degradê que
     deixava o nome do cartão aparecer apagado atrás dela; e a rolagem reserva a faixa da barra de topo (76 px no celular, 101 no
     tablet) e a de baixo (barra de navegação 58 px + Suporte até 120 px do fundo no celular; Suporte até 60 px no tablet), para o
     cartão trazido à tela parar fora delas. O fim da lista ganha folga para o último Reservar sair de baixo do Suporte. */
  html:has(.lc-shell:not([data-area="lider-vip"])) { scroll-padding-top: 109px; scroll-padding-bottom: 76px; }
  body:has(.lc-shell:not([data-area="lider-vip"])) .de-shell-header,
  body:has(.lc-shell:not([data-area="lider-vip"])) .de-shell-header.aline-top-navigation { background: #F7F5F1 !important; }
  .lc-shell:not([data-area="lider-vip"]) { padding-bottom: 76px; }
  @media (max-width: 767px) {
    html:has(.lc-shell:not([data-area="lider-vip"])) { scroll-padding-top: 84px; scroll-padding-bottom: 136px; }
  }
}
/* ==== CELULAR E TABLET ==== FIM */