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

.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: var(--de-laranja-escuro) !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: var(--de-laranja-principal) !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 var(--de-laranja-principal-a25) !important;
  transition: background .18s ease, transform .18s ease !important;
}

.aline-detail-card header button:hover,
.aline-detail-card [data-action="open-lead"]:hover {
  background: var(--de-laranja-hover) !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: 1101px) {
  #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 var(--de-laranja-principal) !important;
  color: var(--de-laranja-principal) !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  .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, abas de filtro e exportar CSV */
.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: var(--de-laranja-principal) !important;
  box-shadow: 0 0 0 3px var(--de-laranja-principal-a12) !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 var(--de-laranja-principal) !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 var(--de-laranja-principal) !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: 1100px) {
  .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: var(--de-laranja-principal); 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 var(--de-laranja-principal) !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 var(--de-laranja-principal), Texto #7A3206 */
.lead-badge--awaiting_reservation {
  background: #FDE3CE !important;
  color: #7A3206 !important;
}
.lead-badge--awaiting_reservation::before {
  background: var(--de-laranja-principal) !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: var(--de-laranja-principal) !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 var(--de-laranja-principal-a25) !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: var(--de-laranja-hover) !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, var(--de-laranja-principal-a00) 0%, var(--de-laranja-principal-a28) 45%, rgba(255,255,255,.75) 62%, var(--de-laranja-principal-a00) 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: var(--de-laranja-principal);
}




.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: var(--de-laranja-principal) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--de-laranja-principal) !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. Abaixo de 1100px o cabeçalho some e cada cliente vira um cartão
   empilhado com rótulos.
   ========================================================================== */
@media (min-width: 1101px) {
  .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: 1101px) 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; }
}

/* Abaixo de 1100px: cartão empilhado, com rótulo em cada informação. */
@media (max-width: 1100px) {
  .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"]):has(.lc-export[hidden]) { 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(186px, 1.5fr) minmax(124px, 1fr) minmax(148px, 1.1fr) minmax(108px, .9fr) minmax(112px, .9fr) minmax(94px, .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(208px, 1.5fr) minmax(124px, .9fr) minmax(140px, 1fr) minmax(96px, .8fr) minmax(108px, .8fr) minmax(90px, .6fr) minmax(58px, .5fr) minmax(110px, .8fr) 292px; }
.lc-shell.lc-aba-finalized { --lc-grade: minmax(186px, 1.6fr) minmax(124px, 1fr) minmax(148px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 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 inteiro em uma linha na largura do design; nomes muito longos ganham um ponto a menos */
.lc-nome { font-weight: 700 !important; font-size: 14px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; 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; min-width: 140px; }
.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; }
.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; }
.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 var(--de-laranja-principal-a60); } 70% { scale: 1; box-shadow: 0 0 0 14px var(--de-laranja-principal-a00); } 100% { scale: .95; } }
@keyframes rsv1fill { to { height: 100%; } }
@keyframes rsv1done { to { min-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; 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); }
.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: 1101px) and (max-width: 1366px) {
  .lc-page { padding-left: 24px; padding-right: 24px; }
  .lc-shell { --lc-grade: minmax(156px, 1.5fr) minmax(124px, 1fr) minmax(134px, 1.1fr) minmax(102px, .9fr) minmax(110px, .9fr) minmax(86px, .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(176px, 1.5fr) minmax(124px, .9fr) minmax(142px, 1fr) minmax(96px, .8fr) minmax(112px, .8fr) minmax(88px, .6fr) minmax(58px, .5fr) minmax(106px, .8fr) 244px; }
  .lc-shell.lc-aba-finalized { --lc-grade: minmax(166px, 1.6fr) minmax(124px, 1fr) minmax(134px, 1.1fr) minmax(112px, 1fr) minmax(114px, 1fr) minmax(132px, 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 { min-width: 150px; border-color: var(--de-status-contrato-ponto); background: var(--de-status-contrato-fundo); } }
  .lc-wa { padding: 0 10px !important; }
}

/* Abaixo de 1100px: a tabela vira cartões empilhados com rótulos; o quadro rola de lado */
@media (max-width: 1100px) {
  .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);
}
/* 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-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; }
.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-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); }
/* 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; }
}