/* ============================================================================ ONDA 22 — FICHA DE LEAD (formulário guiado de 1 tela) Redesenho da aba "Lead" do modal de lead. Carrega POR ÚLTIMO no . Reusa tokens AAA do tema claro (tokens.css). NÃO cria paleta paralela. Mudanças visuais (markup em index.html): - Bloco "Classifique" substitui o .lead-status apertado (3 selects). Funil (mantém controle), Etapa em chips (.class-chip), Temperatura em chips (.temp-chip). Lógica do store INALTERADA (mudarEtapa, setter direto). - Contato em coluna única (.contato-stack) com Enter->próximo (x-refs). - "Mais informações" colapsável (e-mail, lembrete, observações, cenário, UTM). A11y: selecionado petróleo/branco >=7:1; não-selecionado fundo claro + borda >=3:1 (--border-interactive #64748B) + texto escuro (--text-primary). ============================================================================ */ /* -------------------------------------------------------------------------- BLOCO "CLASSIFIQUE" — substitui .lead-status. Fica fora do scroll (irmão flex do header/tabs/body) igual o antigo .lead-status, então herda o padding lateral via .lead-status no markup. Aqui só o conteúdo interno. -------------------------------------------------------------------------- */ :root[data-theme="light"] .classifique { /* flex:0 0 auto — fica fixo entre header e tabs (NÃO scrolla), igual o antigo .lead-status (que ganhava isso via seletor em onda-8.css ~1612). Como renomeamos o bloco, replicamos a regra aqui. */ flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 14px 24px 16px; border-bottom: 1px solid var(--border-subtle, #E2E8F0); background: var(--bg-surface, #fff); } .classifique__heading { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary, #334155); margin: 0; } /* Linha: label fixa à esquerda + controle/chips à direita que quebram */ .classifique__row { display: flex; align-items: flex-start; gap: 10px; } .classifique__label { flex: 0 0 64px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #334155); padding-top: 7px; line-height: 1.2; } .classifique__controls { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Funil compacto: reusa o pill/select existentes, só limita a largura */ .classifique .lead-status__pill, .classifique .lead-status__select { height: 34px; min-width: 160px; max-width: 260px; } /* -------------------------------------------------------------------------- CHIPS DE ETAPA (.class-chip) — itera stagesDaPipelineAtual; clique chama mudarEtapa(slug) (mantém os modais de regra). flex-wrap numa linha. -------------------------------------------------------------------------- */ :root[data-theme="light"] .class-chip { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 13px; border-radius: var(--radius-pill, 9999px); border: 1px solid var(--border-interactive, #64748B); /* >=3:1 */ background: var(--bg-surface-elevated, #F8FAFC); color: var(--text-primary, #0F172A); /* texto escuro */ transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; white-space: nowrap; } :root[data-theme="light"] .class-chip:hover { border-color: var(--color-accent, #173C46); background: #fff; } :root[data-theme="light"] .class-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } /* selecionado: petróleo / branco — contraste >=7:1 (#173C46 sobre branco = ~10.6:1) */ :root[data-theme="light"] .class-chip.is-active { background: var(--color-accent, #173C46); border-color: var(--color-accent, #173C46); color: #fff; } /* -------------------------------------------------------------------------- ETAPA — seletor COMPACTO (dropdown). v22b: 10 chips de uma vez era "muita informação"; virou um gatilho que mostra só a etapa atual + popover no clique. Reusa .lead-status__dropdown/__option (já existem); aqui só o gatilho + a ancoragem (position:relative) do popover. -------------------------------------------------------------------------- */ :root[data-theme="light"] .etapa-select { position: relative; width: 100%; } :root[data-theme="light"] .etapa-select .lead-status__trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; background: var(--bg-surface, #fff); border: 1px solid var(--border-interactive, #64748B); border-radius: var(--radius-md, 8px); color: var(--text-primary, #0F172A); font: inherit; font-size: var(--fs-sm-plus, 14px); font-weight: 500; text-align: left; cursor: pointer; transition: border-color .12s ease; } :root[data-theme="light"] .etapa-select .lead-status__trigger:hover { border-color: var(--color-accent, #173C46); } :root[data-theme="light"] .etapa-select .lead-status__trigger:focus-visible { outline: 2px solid var(--color-accent, #173C46); outline-offset: 1px; } :root[data-theme="light"] .etapa-select .lead-status__trigger-chevron { flex-shrink: 0; color: var(--text-muted, #41505F); } /* -------------------------------------------------------------------------- CHIPS DE TEMPERATURA (.temp-chip) — dot colorido + label. Clique seta leadAtual.temperatura direto. Botão "limpar" discreto no fim. -------------------------------------------------------------------------- */ :root[data-theme="light"] .temp-chip { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-pill, 9999px); border: 1px solid var(--border-interactive, #64748B); background: var(--bg-surface-elevated, #F8FAFC); color: var(--text-primary, #0F172A); transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; } :root[data-theme="light"] .temp-chip:hover { border-color: var(--color-accent, #173C46); background: #fff; } :root[data-theme="light"] .temp-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } /* selecionado: petróleo / branco (dot vira branco pra manter contraste) */ :root[data-theme="light"] .temp-chip.is-active { background: var(--color-accent, #173C46); border-color: var(--color-accent, #173C46); color: #fff; } .temp-chip__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--temp-sem-border, #94A3B8); } .temp-chip__dot--frio { background: var(--temp-frio-border, #2563EB); } .temp-chip__dot--morno { background: var(--temp-morno-border, #B45309); } .temp-chip__dot--quente { background: var(--temp-quente-border, #DC2626); } /* no chip ativo (petróleo), o dot fica branco pra ficar visível */ :root[data-theme="light"] .temp-chip.is-active .temp-chip__dot { background: #fff; } /* limpar temperatura: link discreto */ :root[data-theme="light"] .temp-clear { appearance: none; cursor: pointer; background: none; border: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary, #334155); text-decoration: underline; text-underline-offset: 2px; padding: 8px 4px; } :root[data-theme="light"] .temp-clear:hover { color: var(--color-accent, #173C46); } :root[data-theme="light"] .temp-clear:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); border-radius: var(--radius-sm, 4px); } /* -------------------------------------------------------------------------- CHIPS DE PRIORIDADE (.prio-chip) — segmented control no drawer "Nova melhoria". Substitui os 3 radios feios. Mesmo padrão AAA do .class-chip: selecionado petróleo/branco (>=7:1), não-selecionado borda >=3:1. form.prioridade = 'baixa' | 'media' | 'alta'. -------------------------------------------------------------------------- */ .prio-chips { display: flex; flex-wrap: wrap; gap: 8px; } :root[data-theme="light"] .prio-chip { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 16px; border-radius: var(--radius-pill, 9999px); border: 1px solid var(--border-interactive, #64748B); /* >=3:1 */ background: var(--bg-surface-elevated, #F8FAFC); color: var(--text-primary, #0F172A); /* texto escuro */ transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; white-space: nowrap; } :root[data-theme="light"] .prio-chip:hover { border-color: var(--color-accent, #173C46); background: #fff; } :root[data-theme="light"] .prio-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } /* selecionado: petróleo / branco (#173C46 sobre branco ~10.6:1) */ :root[data-theme="light"] .prio-chip.is-active { background: var(--color-accent, #173C46); border-color: var(--color-accent, #173C46); color: #fff; } /* -------------------------------------------------------------------------- CONTATO — coluna única (1 campo por linha). Substitui o grid-3. -------------------------------------------------------------------------- */ .contato-stack { display: flex; flex-direction: column; gap: 14px; } .contato-stack .field { margin: 0; } /* o campo WhatsApp já usa .field--wa (input + botão inline); preservado */ /* -------------------------------------------------------------------------- DIVIDER entre "Classifique"/contato e os colapsáveis. (O bloco Classifique já tem border-bottom; este é interno ao body.) -------------------------------------------------------------------------- */ .ficha-divider { height: 1px; border: 0; background: var(--border-subtle, #E2E8F0); margin: 4px 0; }