/* ============================================================================ ONDA 23 — FICHA DE LEAD COMO CENTRAL DE COMANDO (cockpit) Carrega POR ÚLTIMO no (?v=1) pra ganhar a cascade. Reusa tokens AAA do tema claro (tokens.css). NÃO cria paleta paralela. O drawer deixa de "parecer formulário" e passa a responder "o que faço com esse lead agora?". O topo (acima das abas) vira um PAINEL DE COMANDO: 1. Identidade (nome no header + marca + pills de status) 2. Oportunidade (valor em destaque, editável inline) 3. Contexto (linha que o sistema "responde": criado/contato/parado/prazo) 4. Próximo passo sugerido (proximoPassoSugerido -> texto + WhatsApp) 5. Ações (verbos grandes: WhatsApp / Avançar etapa / Lembrar) 6. Jornada compacta (progresso N de M + trilha vertical expansível) Abas com contagem: Resumo (=lead) | Serviços (N) | Timeline (N) | Detalhes. A11y AAA tema claro: texto >=7:1, alertas usam tokens *-text (#166534 / #92400E / #991B1B), foco petróleo 2-3px, alvos >=34px, teclado. ============================================================================ */ /* -------------------------------------------------------------------------- PAINEL DE COMANDO — container fixo (irmão flex do header/tabs/body), igual o antigo .classifique (NÃO scrolla). Fica entre header e tabs. -------------------------------------------------------------------------- */ :root[data-theme="light"] .cockpit { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 24px 18px; border-bottom: 1px solid var(--border-subtle, #E2E8F0); background: var(--bg-surface, #fff); } /* -------------------------------------------------------------------------- ONDA 25 — ZONAS do cockpit (respiro + divisor sutil entre blocos). Z1 Identidade & valor · Z2 Temperatura · Z3 Etapa · Z4 Próximo passo+ação. Cada zona é um agrupamento vertical; um leve separa. -------------------------------------------------------------------------- */ .cockpit-zone { display: flex; flex-direction: column; gap: 10px; } /* divisor leve entre zonas (1px, cor de borda sutil) */ :root[data-theme="light"] .cockpit-divider { border: 0; border-top: 1px solid var(--border-subtle, #E2E8F0); margin: 2px 0; height: 0; } /* rótulo de zona (uppercase discreto, mesma família do .cockpit-opp__label) */ .cockpit-zone__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #41505F); } /* Z1 — Identidade & valor: oportunidade à esquerda, origem/funil à direita */ .cockpit-zone--ident { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .cockpit-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Z2 — Temperatura: rótulo + chips em linha */ .cockpit-temp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Z3 — Etapa: head (titulo + contador), barra, nav (2 botões + ver trilha) */ .cockpit-etapa__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .cockpit-etapa__titulo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; } :root[data-theme="light"] .cockpit-etapa__nome { font-size: 15px; font-weight: 700; color: var(--color-accent, #173C46); } .cockpit-etapa__contador { font-size: 12px; font-weight: 600; color: var(--text-secondary, #334155); white-space: nowrap; } .cockpit-etapa__nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* botões de navegação de etapa: largura natural, não esticam como os de ação */ .cockpit-btn--nav { flex: 0 1 auto; min-width: 120px; } .cockpit-etapa__trilha { margin-left: auto; } /* Z4 — Próximo passo + ação WhatsApp grande */ .cockpit-zone--acao { gap: 10px; } .cockpit-btn--wa { width: 100%; } /* PILLS de origem / funil (etapa SAIU daqui na Onda 25 — vive na zona Etapa). Mantidas pra origem ("Veio de:") e funil. --------------------------------- */ :root[data-theme="light"] .cockpit-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: var(--radius-pill, 9999px); border: 1px solid var(--border-subtle, #E2E8F0); background: var(--bg-surface-elevated, #F8FAFC); color: var(--text-secondary, #334155); white-space: nowrap; } .cockpit-pill__label { font-weight: 500; color: var(--text-muted, #41505F); } /* funil: botão clicável (abre mover-pipeline) */ :root[data-theme="light"] .cockpit-pill--temp { appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; transition: border-color .12s ease, background-color .12s ease; } :root[data-theme="light"] .cockpit-pill--temp:hover { border-color: var(--color-accent, #173C46); } :root[data-theme="light"] .cockpit-pill--temp:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } .cockpit-pill__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--temp-sem-border, #94A3B8); } .cockpit-pill__dot--frio { background: var(--temp-frio-border, #2563EB); } .cockpit-pill__dot--morno { background: var(--temp-morno-border, #B45309); } .cockpit-pill__dot--quente { background: var(--temp-quente-border, #DC2626); } /* marca a registrar (subtítulo da identidade, abaixo do nome no header) */ .cockpit__marca { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #334155); } .cockpit__marca-icon { color: var(--color-accent, #173C46); flex: 0 0 auto; } /* 2. OPORTUNIDADE (valor em destaque, editável inline) ---------------------- */ :root[data-theme="light"] .cockpit-opp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cockpit-opp__label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #41505F); } :root[data-theme="light"] .cockpit-opp__value { appearance: none; cursor: pointer; background: none; border: none; font: inherit; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--color-accent, #173C46); padding: 2px 4px; border-radius: var(--radius-sm, 4px); border-bottom: 2px dashed transparent; } :root[data-theme="light"] .cockpit-opp__value:hover { border-bottom-color: var(--color-accent-40, rgba(23,60,70,.4)); } :root[data-theme="light"] .cockpit-opp__value:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } :root[data-theme="light"] .cockpit-opp__input { font-size: 22px; font-weight: 700; color: var(--color-accent, #173C46); height: 40px; max-width: 220px; } /* 3. CONTEXTO (linha que o sistema responde) -------------------------------- */ .cockpit-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary, #334155); } .cockpit-ctx__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .cockpit-ctx__icon { flex: 0 0 auto; color: var(--text-muted, #41505F); } .cockpit-ctx__sep { color: var(--border-interactive, #64748B); } /* cores de alerta AAA (texto): verde<3 / âmbar 3-6 / vermelho >=7 e vencido */ .cockpit-ctx__item--ok { color: var(--color-success-text, #166534); } .cockpit-ctx__item--warn { color: var(--color-warning, #92400E); font-weight: 600; } .cockpit-ctx__item--alert { color: var(--color-danger-text, #991B1B); font-weight: 700; } .cockpit-ctx__item--ok .cockpit-ctx__icon { color: var(--color-success-text, #166534); } .cockpit-ctx__item--warn .cockpit-ctx__icon { color: var(--color-warning, #92400E); } .cockpit-ctx__item--alert .cockpit-ctx__icon { color: var(--color-danger-text, #991B1B); } /* 4. PRÓXIMO PASSO SUGERIDO -------------------------------------------------- */ :root[data-theme="light"] .cockpit-next { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md, 8px); background: var(--color-accent-05, rgba(23,60,70,.05)); border: 1px solid var(--color-accent-20, rgba(23,60,70,.2)); } .cockpit-next__icon { flex: 0 0 auto; color: var(--color-accent, #173C46); } .cockpit-next__text { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary, #0F172A); } .cockpit-next__hint { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #41505F); margin-bottom: 1px; } /* 5. AÇÕES (verbos grandes lado a lado) ------------------------------------- */ .cockpit-actions { display: flex; flex-wrap: wrap; gap: 8px; } :root[data-theme="light"] .cockpit-btn { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-height: 44px; padding: 0 16px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border-interactive, #64748B); background: var(--bg-surface, #fff); color: var(--text-primary, #0F172A); transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; } :root[data-theme="light"] .cockpit-btn:hover { border-color: var(--color-accent, #173C46); background: var(--bg-surface-elevated, #F8FAFC); } :root[data-theme="light"] .cockpit-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } :root[data-theme="light"] .cockpit-btn:disabled, :root[data-theme="light"] .cockpit-btn.is-disabled { cursor: not-allowed; opacity: .5; background: var(--bg-surface-elevated, #F8FAFC); } /* primário: WhatsApp (petróleo cheio, branco) */ :root[data-theme="light"] .cockpit-btn--primary { background: var(--color-accent, #173C46); border-color: var(--color-accent, #173C46); color: #fff; } :root[data-theme="light"] .cockpit-btn--primary:hover { background: var(--color-accent-hover, #0F2A32); border-color: var(--color-accent-hover, #0F2A32); } .cockpit-btn__icon { flex: 0 0 auto; } /* 6. JORNADA COMPACTA (progresso + trilha vertical) ------------------------- */ .cockpit-journey { display: flex; flex-direction: column; gap: 8px; } .cockpit-journey__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cockpit-journey__label { font-size: 12px; font-weight: 600; color: var(--text-secondary, #334155); } :root[data-theme="light"] .cockpit-journey__toggle { appearance: none; cursor: pointer; background: none; border: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent, #173C46); text-decoration: underline; text-underline-offset: 2px; padding: 4px 2px; border-radius: var(--radius-sm, 4px); } :root[data-theme="light"] .cockpit-journey__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } .cockpit-progress { height: 8px; border-radius: var(--radius-pill, 9999px); background: var(--bg-surface-elevated, #F8FAFC); border: 1px solid var(--border-subtle, #E2E8F0); overflow: hidden; } .cockpit-progress__fill { height: 100%; background: var(--color-accent, #173C46); border-radius: var(--radius-pill, 9999px); transition: width .2s ease; } /* trilha vertical (expansível): passadas ✔ / atual ● / futuras ○ */ .cockpit-trail { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; } :root[data-theme="light"] .cockpit-trail__item { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-secondary, #334155); text-align: left; padding: 7px 8px; border-radius: var(--radius-sm, 4px); position: relative; } :root[data-theme="light"] .cockpit-trail__item:hover { background: var(--bg-surface-elevated, #F8FAFC); } :root[data-theme="light"] .cockpit-trail__item:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } .cockpit-trail__marker { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--border-interactive, #64748B); font-size: 11px; color: var(--text-muted, #41505F); } /* conector vertical entre marcadores */ .cockpit-trail__item:not(:last-child) .cockpit-trail__marker::after { content: ""; position: absolute; left: 17px; /* 8px padding + 9px (centro do marker 20px) */ top: 27px; /* abaixo do marker */ width: 2px; height: calc(100% - 14px); background: var(--border-subtle, #E2E8F0); } /* passada */ :root[data-theme="light"] .cockpit-trail__item--done .cockpit-trail__marker { background: var(--color-success-text, #166534); border-color: var(--color-success-text, #166534); color: #fff; } :root[data-theme="light"] .cockpit-trail__item--done { color: var(--text-secondary, #334155); } /* atual */ :root[data-theme="light"] .cockpit-trail__item--current { font-weight: 700; color: var(--color-accent, #173C46); } :root[data-theme="light"] .cockpit-trail__item--current .cockpit-trail__marker { background: var(--color-accent, #173C46); border-color: var(--color-accent, #173C46); color: #fff; } /* futura: marker vazio (já é o default) */ /* -------------------------------------------------------------------------- ABAS COM CONTAGEM — pílula numérica ao lado do título da aba. Reusa .modal-tabs__btn (onda-8); só estiliza o badge interno. -------------------------------------------------------------------------- */ .modal-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: var(--radius-pill, 9999px); font-size: 11px; font-weight: 700; line-height: 1; background: var(--bg-surface-elevated, #F8FAFC); border: 1px solid var(--border-subtle, #E2E8F0); color: var(--text-secondary, #334155); } .modal-tabs__btn--active .modal-tabs__count { background: var(--color-accent-10, rgba(23,60,70,.10)); border-color: var(--color-accent-40, rgba(23,60,70,.4)); color: var(--color-accent, #173C46); } /* -------------------------------------------------------------------------- RESUMO — observações PROMOVIDAS pro topo + contato resumido + lembrete. -------------------------------------------------------------------------- */ .resumo-obs { margin-bottom: 18px; } .resumo-obs .textarea { min-height: 110px; } .resumo-contato { display: flex; flex-direction: column; gap: 10px; } .resumo-contato__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border-subtle, #E2E8F0); background: var(--bg-surface-elevated, #F8FAFC); } .resumo-contato__icon { flex: 0 0 auto; color: var(--text-muted, #41505F); } .resumo-contato__val { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--text-primary, #0F172A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .resumo-contato__val--empty { color: var(--text-muted, #41505F); font-style: italic; } :root[data-theme="light"] .resumo-contato__edit { appearance: none; cursor: pointer; background: none; border: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent, #173C46); display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: var(--radius-sm, 4px); flex: 0 0 auto; } :root[data-theme="light"] .resumo-contato__edit:hover { background: var(--color-accent-05, rgba(23,60,70,.05)); } :root[data-theme="light"] .resumo-contato__edit:focus-visible { outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(23,60,70,.4)); } /* lembrete resumido (read-only summary com link pra editar em Detalhes) */ .resumo-lembrete { margin-top: 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary, #334155); } .resumo-lembrete__icon { color: var(--text-muted, #41505F); flex: 0 0 auto; } /* responsivo: em telas estreitas as ações empilham em 1 coluna; os botões de navegação de etapa dividem a largura (Voltar | Avançar) e o "ver trilha" quebra pra linha de baixo. */ @media (max-width: 520px) { .cockpit-btn--wa { width: 100%; } .cockpit-etapa__nav { gap: 8px; } .cockpit-btn--nav { flex: 1 1 0; min-width: 0; } .cockpit-etapa__trilha { flex: 1 1 100%; margin-left: 0; text-align: center; } }