/* ============================================================================
   onda-7b.css , refator visual modal lead + dashboard
   ============================================================================
   Carregado APOS components.css. Sobrescreve componentes existentes sob
   [data-theme="light"] sem tocar dark (uelicon/MCK legado).

   Resolve queixas Gustavo 2026-05-26:
     - A1: header/footer modal NAO scrollam com body
     - A2: botao WhatsApp inline em vez de "plugin 2010" verde
     - B1: trend pill (sem setas ASCII)
     - B3: hierarquia invertida (numero grande Fraunces, label CAPS pequeno)
     - B4: botao Atualizar dashboard
     - B5: eyebrow MES CORRENTE / ESTADO ATUAL
     - B6: skeleton loading nos widgets

   Tokens herdados de tokens.css. Esta camada SO compoe.
   ============================================================================ */

/* ==========================================================================
   1) MODAL LEAD , geometria sticky real (header/footer/body)
   ==========================================================================
   Hoje o modal-overlay tem `overflow-y: auto; align-items: flex-start;` o
   que faz o modal-container crescer livremente e o `position:sticky` do
   header/footer ficar "sticky no overflow do overlay", nao na altura do modal.
   Fix: damos `max-height: 90vh` no container + `flex` real + body com
   `overflow-y: auto`. Header e footer ficam `flex: 0 0 auto`.
   ========================================================================== */

:root[data-theme="light"] body.has-lead-modal-open { overflow: hidden; }

/* Overlay específico do modal de lead: centraliza vertical (sem :has, mais compatível) */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] {
  align-items: center;
  padding: var(--gap-6) var(--gap-4);
  overflow: hidden;          /* impede overlay de scrollar; scroll é no body interno */
}

:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container {
  max-height: 90vh;
  max-width: 880px;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* força body interno a scrollar */
}

/* Header: flex item fixo, 88px minimo, NAO scrolla com body */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container > div > .modal-header {
  position: static;          /* sticky nao funciona dentro de container fechado */
  flex: 0 0 auto;
  min-height: 88px;
  padding: var(--gap-5) var(--gap-6) var(--gap-4);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  /* Tira radius-top quando header tem state scrolled — mantem visual smooth */
}

/* Estado scrolled: aparece sombra + borda */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container.is-scrolled > div > .modal-header {
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 3px rgba(15, 42, 50, 0.08),
              0 1px 2px rgba(15, 42, 50, 0.05);
}

/* Bloco "Status do lead" — substitui as 3 zonas que viviam no header
   (pipeline-badge no header + etapa-bar + temp-bar). Renderizado como
   primeira coisa dentro do .modal-body global. */
/* v18.3: lead-status simetrico — cada grupo em coluna (label em cima, controle
   embaixo). 3 grupos com peso visual equivalente, alinhados pelo topo. Pills
   da temperatura no mesmo height do select (32px). Hint dourado discreto
   quando temperatura nao foi escolhida — indica obrigatoriedade sem gritar. */
/* FIX v20m bug-simetria-status: lead-status com 3 colunas EQUIVALENTES.
   Antes era `display:flex + flex-wrap + gap` sem largura definida em cada
   grupo, fazendo Pipeline/Etapa/Temperatura ficarem com larguras diferentes
   (pill curto vs select 180px vs 3 pills+hint) — quebrava a simetria visual
   que Gustavo pediu "20 vezes". Agora: grid 3 colunas iguais (1fr 1fr 1fr),
   cada grupo ocupa 1/3 do container, controles internos preenchem 100%
   da coluna. No mobile (<720px) colapsa pra 1 coluna stacked. */
:root[data-theme="light"] .lead-status {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  gap: var(--gap-6);
  padding: var(--gap-3) 0 var(--gap-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--gap-4);
}
@media (max-width: 720px) {
  :root[data-theme="light"] .lead-status {
    grid-template-columns: 1fr;
    gap: var(--gap-4);
  }
}
:root[data-theme="light"] .lead-status__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 56px;
  min-width: 0; /* permite grid item encolher sem overflow do select */
}
:root[data-theme="light"] .lead-status__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  line-height: 1;
}

/* v20m fix-simetria: Temperatura virou <select> no mesmo padrao da Etapa
   (.lead-status__select), entao as 3 colunas (Pipeline/Etapa/Temperatura) ficam
   identicas em tamanho e alinhadas por construcao no grid 1fr 1fr 1fr.
   Removidos os antigos .lead-status__pills / .temp-pill-no-lead-status /
   .lead-status__hint / .lead-status__group--vazio (eram so deste bloco).
   O sinal de cor da temperatura (frio/morno/quente) e preservado via
   border-left colorido + leve tint de fundo, sem alterar altura/largura
   do select — mantem a simetria intacta. */

/* Borda-acento esquerda colore o select conforme a temperatura escolhida.
   3px nao muda a largura util percebida (o select segue 100% da coluna). */
:root[data-theme="light"] .lead-status__select--temp {
  border-left-width: 3px;
}
:root[data-theme="light"] .lead-status__select--temp-frio {
  border-left-color: var(--temp-frio-border);   /* #2563EB >=3:1 (era #4F8AC9) */
  background-color: var(--temp-frio-bg);
}
:root[data-theme="light"] .lead-status__select--temp-morno {
  border-left-color: var(--temp-morno-border);  /* #B45309 (era #E0A85B) */
  background-color: var(--temp-morno-bg);
}
:root[data-theme="light"] .lead-status__select--temp-quente {
  border-left-color: var(--temp-quente-border); /* #DC2626 (era #D75A4A) */
  background-color: var(--temp-quente-bg);
}

/* Vazio: leve realce dourado (ring sutil) sinaliza "preencher" SEM desalinhar —
   herda o mesmo box do select, so adiciona shadow inset. O option "Selecione"
   ja substitui o antigo hint textual "Selecione uma". */
:root[data-theme="light"] .lead-status__select--temp-vazio {
  border-color: rgba(23, 60, 70, 0.45);
  box-shadow: inset 0 0 0 1px rgba(23, 60, 70, 0.12);
}
:root[data-theme="light"] .lead-status__pill {
  /* Pipeline ou Etapa em chip */
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  /* 40px = mesma altura que o onda-8 impoe globalmente aos <select>. O pill e
     <button>, nao pega aquele min-height global; por isso fixamos 40px aqui pra
     casar com Etapa/Temperatura (era 32px e ficava 8px mais baixo). */
  height: 40px;
  min-height: 40px;
  /* FIX v20m bug-simetria: pill da Pipeline ocupa 100% da coluna do grid,
     casando largura com o select da Etapa e o bloco de pills da Temperatura. */
  width: 100%;
  justify-content: flex-start;
  /* mesma seta + padding do .lead-status__select pra Pipeline ficar visualmente
     identica a Etapa/Temperatura (pedido do Gustavo: 3 colunas iguais). */
  padding: 0 32px 0 var(--gap-3);
  background: var(--color-cream-soft)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='m1 1 5 5 5-5' stroke='%23173C46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right var(--gap-3) center;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
/* Hover unico: Pipeline (pill) + Etapa/Temperatura (select) reagem igual.
   background-color (nao shorthand) preserva a seta SVG da camada background-image. */
:root[data-theme="light"] .lead-status__pill:hover,
:root[data-theme="light"] .lead-status__select:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-05);
}
:root[data-theme="light"] .lead-status__select {
  appearance: none;
  -webkit-appearance: none;
  /* 40px explicito + min-height: vence o min-height:40px global do onda-8
     (especificidade .lead-status__select 0,3,0 > select 0,2,1) e deixa a altura
     do header controlada localmente, sem depender do efeito colateral global. */
  height: 40px;
  min-height: 40px;
  /* FIX v20m bug-simetria: largura 100% da coluna do grid pra Etapa ocupar
     todo o espaco da coluna. Antes era min-width:180px que travava em larguras
     pequenas e gerava desalinhamento. */
  width: 100%;
  min-width: 0;
  padding: 0 32px 0 var(--gap-3);
  background: var(--color-cream-soft)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='m1 1 5 5 5-5' stroke='%23173C46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right var(--gap-3) center;
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
/* Foco fino e clean, IDENTICO nos 3 controles (Pipeline pill + Etapa/Temperatura
   select). Antes so o select tinha ring (3px, grosso) e o pill usava o outline
   default do browser -> foco "diferente" entre as colunas. Agora: ring unico de
   2px translucido. */
:root[data-theme="light"] .lead-status__select:focus-visible,
:root[data-theme="light"] .lead-status__pill:focus-visible {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(23, 60, 70, 0.35);
}

/* ==========================================================================
   v21m — DROPDOWN CUSTOM de Etapa e Temperatura (popover Alpine).
   Substitui o <select> nativo (lista azul "cara de Excel" do Windows, nao
   estilizavel). O estado FECHADO (.lead-status__trigger) reusa 100% o visual
   de .lead-status__pill / .lead-status__select (40px, seta SVG, foco 2px) — NAO
   muda nada do aprovado. So o painel ABERTO ganha CSS proprio escopado aqui.

   CLIPPING: .lead-status mora dentro de .modal-container > div com overflow:hidden.
   O painel e position:absolute ancorado no .lead-status__group (relative). Pra NAO
   ser cortado: abre pra baixo, max-height 280px com scroll interno, z-index 1001.
   Cabe folgado nos 90vh do modal e overlaya tabs/body. */

/* O trigger ja herda .lead-status__pill (40px, seta, borda, hover, foco) — gancho
   semantico. POReM: o .lead-status__pill declara `background` (shorthand, com a seta
   SVG) e `border` (shorthand) e vem DEPOIS dos modificadores --temp-* no arquivo. Com
   especificidade igual (0,3,0), o pill ganharia por ordem de fonte e MATARIA o tint de
   fundo + a borda-esquerda colorida da Temperatura. Por isso re-aplicamos AQUI (apos o
   pill) o sinal de cor SO no trigger de Temperatura, preservando a seta SVG (usamos
   background-color, nao o shorthand). Mantem o estado fechado identico ao select antigo. */
:root[data-theme="light"] .lead-status__trigger.lead-status__select--temp {
  border-left-width: 3px;
}
:root[data-theme="light"] .lead-status__trigger.lead-status__select--temp-frio {
  border-left-color: var(--temp-frio-border);   /* #2563EB >=3:1 (era #4F8AC9) */
  background-color: var(--temp-frio-bg);
}
:root[data-theme="light"] .lead-status__trigger.lead-status__select--temp-morno {
  border-left-color: var(--temp-morno-border);  /* #B45309 (era #E0A85B) */
  background-color: var(--temp-morno-bg);
}
:root[data-theme="light"] .lead-status__trigger.lead-status__select--temp-quente {
  border-left-color: var(--temp-quente-border); /* #DC2626 (era #D75A4A) */
  background-color: var(--temp-quente-bg);
}
:root[data-theme="light"] .lead-status__trigger.lead-status__select--temp-vazio {
  border-color: rgba(23, 60, 70, 0.45);
  box-shadow: inset 0 0 0 1px rgba(23, 60, 70, 0.12);
}

/* Ancora do popover: cada grupo posiciona seu proprio dropdown. */
:root[data-theme="light"] .lead-status__group {
  position: relative;
}

/* Painel aberto: card no tema, abre pra baixo, scroll interno se passar de 280px. */
:root[data-theme="light"] .lead-status__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--color-bg-pure);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  /* leve deslize de entrada — combina com o x-transition.opacity do Alpine. */
  animation: leadStatusDropdownIn var(--duration-fast) var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-warm-strong) transparent;
}
:root[data-theme="light"] .lead-status__dropdown::-webkit-scrollbar { width: 8px; }
:root[data-theme="light"] .lead-status__dropdown::-webkit-scrollbar-thumb {
  background: var(--color-border-warm-strong); border-radius: 4px;
}
@keyframes leadStatusDropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Item da lista: full-width, alinhado a esquerda, hover/ativo dourado discreto. */
:root[data-theme="light"] .lead-status__option {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .lead-status__option:hover {
  background: var(--color-accent-05);
}
:root[data-theme="light"] .lead-status__option:focus-visible {
  outline: none;
  background: var(--color-accent-05);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
:root[data-theme="light"] .lead-status__option.is-active {
  background: var(--color-accent-05);
  font-weight: 600;
}
/* Check do item selecionado, empurrado pra direita. */
:root[data-theme="light"] .lead-status__option-check {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--color-accent-deep);
}

/* Dot de cor da temperatura (frio/morno/quente). "Selecione" nao tem dot. */
:root[data-theme="light"] .lead-status__option-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
:root[data-theme="light"] .lead-status__option-dot--frio   { background: #4F8AC9; }
:root[data-theme="light"] .lead-status__option-dot--morno  { background: #E0A85B; }
:root[data-theme="light"] .lead-status__option-dot--quente { background: #D75A4A; }

/* Body: scrollable. Sentinela 1px no topo serve pro IntersectionObserver. */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 280px;
  padding: var(--gap-4) var(--gap-6) var(--gap-6);
  position: static;          /* nao sticky */
  gap: 0;                    /* sobrescreve gap-6 herdado; cada bloco define margin proprio */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-warm-strong) transparent;
}
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-body::-webkit-scrollbar { width: 8px; }
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-body::-webkit-scrollbar-thumb {
  background: var(--color-border-warm-strong); border-radius: 4px;
}
:root[data-theme="light"] .modal-body__sentinel { height: 1px; flex: 0 0 1px; }

/* Footer: flex item fixo, 64px minimo, sombra invertida em scrolled */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container > div > .modal-footer {
  position: static;
  flex: 0 0 auto;
  min-height: 64px;
  padding: var(--gap-3) var(--gap-6);
  border-top: 1px solid transparent;
  box-shadow: none;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container.is-scrolled > div > .modal-footer {
  border-top-color: var(--border-subtle);
  box-shadow: 0 -1px 3px rgba(15, 42, 50, 0.08),
              0 -1px 2px rgba(15, 42, 50, 0.05);
}

/* v18.2: .modal-tabs e flex item fixo entre .lead-status e .modal-body.
   NAO scrolla mais com o conteudo. */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-tabs {
  flex: 0 0 auto;
  padding: 0 var(--gap-6);
  border-bottom: 1px solid var(--neutral-50);
}

/* Tab-content (substituiu o antigo .modal-body por tab — herda layout) */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

/* Header reorganizado: nome + meta-line. */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-header__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-accent-deep);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0;
}
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-header__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

/* Botao close no header continua no canto direito */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container .modal-header__actions {
  align-items: flex-start;
}

/* Responsivo: mobile full-screen com 100vh */
@media (max-width: 640px) {
  :root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ==========================================================================
   2) BOTAO WHATSAPP INLINE
   ========================================================================== */

/* Container relativo pra input WA + ícone-ação inline */
:root[data-theme="light"] .field--wa {
  position: relative;
}
:root[data-theme="light"] .field--wa .input {
  padding-right: 44px;
}
:root[data-theme="light"] .wa-inline {
  position: absolute;
  right: 6px;
  bottom: 6px;               /* alinha com input height de 40px */
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .wa-inline svg { width: 16px; height: 16px; }
:root[data-theme="light"] .wa-inline:hover {
  background: rgba(31, 77, 90, 0.08);
  color: var(--color-primary);
}
:root[data-theme="light"] .wa-inline:active {
  background: rgba(31, 77, 90, 0.14);
}
:root[data-theme="light"] .wa-inline:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
:root[data-theme="light"] .wa-inline.is-disabled {
  /* OVERHAUL: estilo SOLIDO (sem opacity em texto) */
  background: #F1F5F9;
  color: #94A3B8;
  border-color: var(--border-subtle);
  cursor: not-allowed;
  pointer-events: auto;       /* mantém pointer-events pra tooltip via title */
}

/* Botao WA standalone (variante grafite, fora do input) */
:root[data-theme="light"] .btn-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  height: 36px;
  padding: 0 14px;
  background: #1F2937;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(15, 42, 50, 0.10);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
:root[data-theme="light"] .btn-wa:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 42, 50, 0.16);
}
:root[data-theme="light"] .btn-wa:active {
  background: #0F1419;
  transform: translateY(0);
}
:root[data-theme="light"] .btn-wa:focus-visible {
  outline: none;
  box-shadow: 0 1px 2px rgba(15, 42, 50, 0.10),
              0 0 0 3px rgba(196, 154, 108, 0.40);
}
:root[data-theme="light"] .btn-wa[aria-disabled="true"],
:root[data-theme="light"] .btn-wa.is-disabled {
  /* OVERHAUL: estilo SOLIDO (sem opacity em texto) */
  background: #F1F5F9;
  color: #94A3B8;
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
:root[data-theme="light"] .btn-wa svg { width: 16px; height: 16px; }

/* ==========================================================================
   3) DASHBOARD , BOTAO ATUALIZAR
   ========================================================================== */
:root[data-theme="light"] .btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--gap-3);
  background: var(--bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .btn-refresh:hover {
  border-color: var(--color-border-warm-strong);
  background: var(--color-cream-soft);
}
:root[data-theme="light"] .btn-refresh:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 60, 70, 0.35);
}
:root[data-theme="light"] .btn-refresh[disabled] { opacity: 0.6; cursor: not-allowed; }
:root[data-theme="light"] .btn-refresh svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-out);
}
:root[data-theme="light"] .btn-refresh.is-loading svg {
  animation: onda7b-spin 800ms cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
@keyframes onda7b-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .btn-refresh.is-loading svg { animation: none; }
}

/* ==========================================================================
   4) STAT CARD , hierarquia invertida + eyebrow + chevron
   ========================================================================== */
:root[data-theme="light"] .stat-card--onda7b {
  background: var(--bg-surface);
  border: 1px solid var(--color-border-warm);
  border-radius: 14px;
  padding: var(--gap-5);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  min-height: 132px;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .stat-card--onda7b.is-stock {
  border-top: 2px solid var(--color-accent);
}
:root[data-theme="light"] .stat-card--onda7b.is-clickable { cursor: pointer; }
:root[data-theme="light"] .stat-card--onda7b.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-warm-strong);
}

/* Label compostion: label primario + eyebrow extra */
:root[data-theme="light"] .stat-card--onda7b .stat-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root[data-theme="light"] .stat-card--onda7b .stat-label__primary {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.2;
}
:root[data-theme="light"] .stat-card--onda7b .stat-label__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  line-height: 1.2;
}

/* Numero grande Fraunces 40px peso 500 */
:root[data-theme="light"] .stat-card--onda7b .stat-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin: 0;
}
:root[data-theme="light"] .stat-card--onda7b .stat-value.is-empty {
  color: var(--text-tertiary);
}
:root[data-theme="light"] .stat-card--onda7b .stat-value-money {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Delta row (trend pill + opcional subtítulo) */
:root[data-theme="light"] .stat-card--onda7b .stat-delta-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
:root[data-theme="light"] .stat-card--onda7b .stat-subtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Chevron canto inf direito (drill-down futuro; estrutura pronta) */
:root[data-theme="light"] .stat-card--onda7b .stat-chevron {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  opacity: 0.30;
  transition: opacity var(--duration-fast) var(--ease-out);
}
:root[data-theme="light"] .stat-card--onda7b.is-clickable:hover .stat-chevron { opacity: 1; }

/* ==========================================================================
   5) TREND PILL (substitui setas ASCII)
   ========================================================================== */
:root[data-theme="light"] .trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
:root[data-theme="light"] .trend-pill svg { width: 12px; height: 12px; }
:root[data-theme="light"] .trend-pill.is-up {
  background: #DCEDE3;
  color: #0F7D5C;
}
:root[data-theme="light"] .trend-pill.is-down {
  background: #F8DCDF;
  color: #8A1A2C;
}
:root[data-theme="light"] .trend-pill.is-neutral {
  background: #ECE3D2;
  color: #4A5C68;
}
:root[data-theme="light"] .trend-pill.is-null {
  background: transparent;
  color: var(--text-tertiary);
  font-weight: 400;
  padding: 2px 4px;
}

/* ==========================================================================
   6) SKELETON LOADING (cards + charts)
   ========================================================================== */
:root[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    var(--color-cream-deeper) 0%,
    var(--color-cream-soft) 50%,
    var(--color-cream-deeper) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: onda7b-shimmer 1200ms linear infinite;
  display: inline-block;
}
:root[data-theme="light"] .skeleton--block { display: block; }
@keyframes onda7b-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] .skeleton { animation: none; }
}

/* Stat-card em loading: substitui valor + delta por skeleton mantendo altura */
:root[data-theme="light"] .stat-card--onda7b.is-loading .stat-value,
:root[data-theme="light"] .stat-card--onda7b.is-loading .stat-value-money {
  visibility: hidden;
  position: relative;
}
:root[data-theme="light"] .stat-card--onda7b.is-loading .stat-value::after,
:root[data-theme="light"] .stat-card--onda7b.is-loading .stat-value-money::after {
  content: '';
  visibility: visible;
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-cream-deeper) 0%,
    var(--color-cream-soft) 50%,
    var(--color-cream-deeper) 100%);
  background-size: 200% 100%;
  animation: onda7b-shimmer 1200ms linear infinite;
  border-radius: var(--radius-sm);
  max-width: 140px;
}
:root[data-theme="light"] .stat-card--onda7b.is-loading .stat-delta-row {
  visibility: hidden;
}

/* Chart skeleton: bloco com altura igual ao chart real */
:root[data-theme="light"] .chart-skeleton {
  height: 240px;
  width: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--color-cream-deeper) 0%,
    var(--color-cream-soft) 50%,
    var(--color-cream-deeper) 100%);
  background-size: 200% 100%;
  animation: onda7b-shimmer 1200ms linear infinite;
}
:root[data-theme="light"] .chart-skeleton--funnel { height: 360px; }

/* ==========================================================================
   7) PADDING + ALINHAMENTO de stat-card cluster
   ========================================================================== */
:root[data-theme="light"] .stats-onda7b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap-4);
  margin-bottom: var(--gap-6);
}
@media (max-width: 760px) {
  :root[data-theme="light"] .stats-onda7b {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   8) HELPER , esconde stat-card legado quando overlay onda7b ativo
   ========================================================================== */
:root[data-theme="light"] .insights-row--legacy { display: none; }

/* ==========================================================================
   9) ONDA 7C , FIX CRITICO do wrapper Alpine <template x-if>
   ==========================================================================
   O Alpine renderiza um <div> wrapper entre .modal-container e
   .modal-header / .modal-body / .modal-footer. Esse wrapper precisa
   herdar o display:flex pra cadeia flex respeitar header sticky + body
   scrollable + footer sticky. Sem isso, ao rolar conteudo > altura
   disponivel, header e footer descem/sobem junto.
   ========================================================================== */
:root[data-theme="light"] .modal-overlay[aria-labelledby="lead-modal-title"] .modal-container > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;             /* CRITICO: permite child com overflow scrollar */
  overflow: hidden;          /* contem o body interno */
  width: 100%;
}

/* ==========================================================================
   10) ONDA 7C , MINI-CARDS de Valor (substitui inputs read-only)
   ==========================================================================
   2 cards lado a lado: Valor da oportunidade + Valor ganho.
   Usa Fraunces (--font-display) 22px peso 500 + label CAPS 11px.
   ========================================================================== */
:root[data-theme="light"] .value-mini-cards {
  display: flex;
  flex-direction: row;
  gap: var(--gap-3);
  margin-top: var(--gap-3);
  flex-wrap: wrap;
}
:root[data-theme="light"] .value-mini-card {
  flex: 1 1 200px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--color-cream-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
:root[data-theme="light"] .value-mini-card__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.2;
}
:root[data-theme="light"] .value-mini-card__amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="light"] .value-mini-card--win .value-mini-card__amount {
  color: #0F7D5C;            /* alinhado com .trend-pill.is-up; tom win-deep */
}
@media (max-width: 480px) {
  :root[data-theme="light"] .value-mini-card {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   11) ONDA 7C , LEAD-SVC-SUMMARY (1 linha) substitui tabela inline
   ==========================================================================
   Link clicavel que conta servicos + mostra total + leva pra tab Serviços.
   Hover: borda accent + sombra-1.
   ========================================================================== */
:root[data-theme="light"] .lead-svc-summary {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  padding: 14px 16px;
  background: var(--color-cream-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
:root[data-theme="light"] .lead-svc-summary:hover,
:root[data-theme="light"] .lead-svc-summary:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  outline: none;
}
:root[data-theme="light"] .lead-svc-summary__icon {
  flex: 0 0 auto;
  color: var(--color-accent-deep);
  font-size: 16px;
  line-height: 1;
}
:root[data-theme="light"] .lead-svc-summary__text {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--text-primary);
}
:root[data-theme="light"] .lead-svc-summary__text strong {
  color: var(--color-accent-deep);
  font-weight: 600;
}
:root[data-theme="light"] .lead-svc-summary__empty {
  color: var(--text-tertiary);
  font-style: italic;
}
:root[data-theme="light"] .lead-svc-summary__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent-deep);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
:root[data-theme="light"] .lead-svc-summary__cta svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   12) ONDA 7C , TEXTAREA polida (Observacoes do SDR)
   ==========================================================================
   Estende .textarea com padding generoso + focus ring dourado + transition.
   ========================================================================== */
:root[data-theme="light"] .textarea--onda-7b {
  min-height: 120px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-surface, #FFFFFF);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}
:root[data-theme="light"] .textarea--onda-7b::placeholder {
  color: var(--text-tertiary);
  font-style: italic;
}
:root[data-theme="light"] .textarea--onda-7b:focus,
:root[data-theme="light"] .textarea--onda-7b:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(23, 60, 70, 0.35);
}