/* ============================================================ CRM Advanced — tema e telas do produto ------------------------------------------------------------ Só age quando o tem a classe `ds-advanced` (posta pelo console a partir de /marca e /modulos quando a instalação é CRM_EDICAO=advanced). Sem a classe, nada aqui se aplica e a casa continua com o visual dela — mesma regra de todas as camadas ds-. Identidade: clara, compacta, sem cartões redondos nem marca d'água; barra lateral escura (ardósia) com acento verde-água, tipografia do sistema, tabelas densas e legíveis, cores de status com significado fixo: verde = pago / feito / fechada âmbar = a receber / pendente / hoje vermelho = vencido / atrasado / perdida cinza = cancelado / futuro ============================================================ */ /* ── tokens (claro) ──────────────────────────────────────── */ body.ds-theme.ds-advanced { --ds-brand-00: #F8FAFC; --ds-brand-25: #F1F7F6; --ds-brand-50: #E6F4F1; --ds-brand-200: #C7E8E1; --ds-brand-300: #9FD6CB; --ds-brand-400: #4FB3A3; --ds-brand-600: #0F766E; --ds-brand-700: #0B5F59; --ds-brand-800: #0A4F4A; --ds-brand-900: #0F3D3A; --ds-brand-950: #0B2A28; --ds-acao: #0F766E; --ds-acao-hover: #0B5F59; --ds-foco: #0D9488; --ds-mp-navy: #0F172A; --ds-mp-vivo: #14B8A6; --ds-mp-escuro: #0F766E; --ds-grad-marca: linear-gradient(118deg, #0F766E 0%, #139A8B 100%); --ds-grad-marca-hover: linear-gradient(118deg, #0B5F59 0%, #0F766E 100%); --ds-texto: #1E293B; --ds-titulo: #0F172A; --ds-texto-sec: #475569; --ds-texto-meta: #64748B; --ds-texto-forte: #0F172A; --ds-n-50: #F8FAFC; --ds-n-100: #F1F5F9; --ds-n-200: #E2E8F0; --ds-n-300: #CBD5E1; --ds-n-400: #94A3B8; --ds-n-500: #64748B; --ds-n-600: #475569; --ds-n-700: #334155; --ds-n-800: #1E293B; --ds-painel-frio: #F5F7FA; --ds-kpi-fundo: #FFFFFF; --ds-trilho: transparent; --ds-menu-hover: rgba(255,255,255,.08); --ds-submenu-ativo: rgba(20,184,166,.22); --ds-fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif; --ds-espaco-letras: 0; --ds-peso-corpo: 400; --ds-tam-h1: 22px; --ds-altura-h1: 28px; --ds-peso-h1: 600; --ds-tam-h2: 18px; --ds-tam-secao: 16px; --ds-peso-secao: 600; --ds-tam-corpo: 14px; --ds-tam-sec: 13px; --ds-tam-meta: 12px; --ds-tam-kpi: 24px; --ds-peso-kpi: 700; --ds-raio-secao: 12px; --ds-raio-modal: 14px; --ds-raio-botao: 8px; --ds-raio-kpi: 10px; --ds-raio-avatar: 10px; --ds-raio-input: 8px; --ds-raio-chip: 8px; --ds-conteudo-pad: 24px; --ds-bloco-gap: 14px; /* cores de status (só aqui) */ --adv-ok: #15803D; --adv-ok-fundo: #DCFCE7; --adv-aviso: #B45309; --adv-aviso-fundo: #FEF3C7; --adv-erro: #B91C1C; --adv-erro-fundo: #FEE2E2; --adv-neutro: #475569; --adv-neutro-fundo: #F1F5F9; --adv-lateral: #0F172A; --adv-lateral-texto: #CBD5E1; --adv-lateral-forte: #F8FAFC; /* variáveis legadas do console (usadas em estilos inline) */ --fundo: #EEF2F6; --painel: #FFFFFF; --card: #FFFFFF; --borda: #E2E8F0; --texto: #0F172A; --sub: #64748B; --ok: #15803D; --alerta: #B45309; --erro: #B91C1C; --dourado: #0F766E; --dourado-claro: #0F766E; background: #EEF2F6; color: #1E293B; font-family: var(--ds-fonte); letter-spacing: 0; } /* ── tokens (escuro) ────────────────────────────────────── Este arquivo é carregado DEPOIS do ds-dark.css e com a mesma especificidade, então ele precisa redefinir os tokens do escuro por conta própria: sem isto, título e texto ficavam com a cor do tema claro sobre o fundo escuro (ilegíveis). */ .ds-dark body.ds-theme.ds-advanced { --ds-brand-00: #0B1220; --ds-brand-25: #131C2B; --ds-brand-50: #12211F; --ds-brand-200: rgba(20,184,166,.24); --ds-brand-300: rgba(45,212,191,.30); --ds-brand-400: #5EEAD4; --ds-brand-600: #14B8A6; --ds-brand-700: #2DD4BF; --ds-brand-800: #99F6E4; --ds-brand-900: #CCFBF1; --ds-brand-950: #E6FFFB; --ds-acao: #14B8A6; --ds-acao-hover: #2DD4BF; --ds-foco: #5EEAD4; --ds-mp-navy: #E2E8F0; --ds-mp-vivo: #2DD4BF; --ds-mp-escuro: #14B8A6; --ds-grad-marca: linear-gradient(118deg, #0F766E 0%, #14B8A6 100%); --ds-grad-marca-hover: linear-gradient(118deg, #14B8A6 0%, #2DD4BF 100%); /* texto: claro sobre escuro */ --ds-texto: #E2E8F0; --ds-titulo: #F1F5F9; --ds-texto-forte: #F8FAFC; --ds-texto-sec: #CBD5E1; --ds-texto-meta: #94A3B8; /* neutros invertidos: 50 é o mais escuro */ --ds-n-50: #0F172A; --ds-n-100: #1E293B; --ds-n-200: #253347; --ds-n-300: #334155; --ds-n-400: #475569; --ds-n-500: #64748B; --ds-n-600: #94A3B8; --ds-n-700: #CBD5E1; --ds-n-800: #E2E8F0; --ds-branco: #111827; --ds-painel-frio: #0F172A; --ds-kpi-fundo: #111827; --ds-trilho: transparent; --ds-menu-hover: rgba(255,255,255,.08); --ds-submenu-ativo: rgba(20,184,166,.26); --adv-ok: #4ADE80; --adv-ok-fundo: rgba(34,197,94,.18); --adv-aviso: #FBBF24; --adv-aviso-fundo: rgba(245,158,11,.18); --adv-erro: #F87171; --adv-erro-fundo: rgba(239,68,68,.18); --adv-neutro: #CBD5E1; --adv-neutro-fundo: rgba(148,163,184,.16); --adv-lateral: #020617; --adv-lateral-texto: #94A3B8; --adv-lateral-forte: #F1F5F9; --fundo: #0B1220; --painel: #0F172A; --card: #111827; --borda: #253347; --texto: #E2E8F0; --sub: #94A3B8; --ok: #4ADE80; --alerta: #FBBF24; --erro: #F87171; --dourado: #14B8A6; --dourado-claro: #2DD4BF; background: #0B1220; color: #E2E8F0; } /* títulos e textos do console legado que trazem cor fixa no HTML */ .ds-dark .ds-advanced h1, .ds-dark .ds-advanced h2, .ds-dark .ds-advanced h3, .ds-dark .ds-advanced h4, .ds-dark .ds-advanced .card h2 { color: var(--ds-titulo); } .ds-dark .ds-advanced main .topo h1 { color: var(--ds-titulo); } .ds-dark .ds-advanced td, .ds-dark .ds-advanced .ds-lista td { color: var(--ds-texto-sec); } .ds-dark .ds-advanced th, .ds-dark .ds-advanced .ds-lista th { background: var(--ds-n-100); color: var(--ds-texto-sec); } .ds-dark .ds-advanced td b, .ds-dark .ds-advanced .ds-lista td b { color: var(--ds-texto-forte); } /* `:not()` para o número não perder a cor de estado (verde/vermelho) no escuro */ .ds-dark .ds-advanced .adv-kpi:not(.positivo):not(.alerta) b, .ds-dark .ds-advanced .kpi b { color: var(--ds-texto-forte); } .ds-dark .ds-advanced input[type=file] { color: var(--ds-texto-sec); } /* ── o que some no produto ───────────────────────────────── */ .ds-advanced #claudia-widget, .ds-advanced #atalho-mm, .ds-advanced .topbar .atalho-topo:not(#atalho-novo), .ds-advanced #dica-estrategia, .ds-advanced .oculto-no-produto { display: none !important; } /* vidro fosco da casa dá lugar a superfícies chapadas */ .ds-advanced main { max-width: 1240px; padding: 22px 26px; } .ds-advanced main .topo { align-items: center; margin-bottom: 16px; } .ds-advanced main .topo h1 { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ds-titulo); } .ds-advanced main .topo p { font-size: 13px; color: var(--ds-texto-meta); max-width: 720px; } .ds-advanced .busca-global { border-radius: 8px; } .ds-advanced #atalho-novo { background: var(--ds-grad-marca); color: #fff; border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 600; cursor: pointer; } /* ── barra lateral escura ────────────────────────────────── */ .ds-advanced #app aside.ds-shell { background: var(--adv-lateral); border-right: 0; width: 224px; } .ds-advanced aside.ds-shell .logo .logo-legenda b { color: var(--adv-lateral-forte); font-size: 13px; letter-spacing: .02em; max-width: 12ch; } .ds-advanced aside.ds-shell .logo small { color: var(--ds-brand-400); letter-spacing: .18em; } .ds-advanced aside.ds-shell .logo .logo-marca { background: #fff; border-radius: 8px; padding: 2px; } .ds-advanced .ds-shell-toggle { background: transparent; border-color: rgba(255,255,255,.14); color: var(--adv-lateral-texto); } .ds-advanced .ds-shell-toggle:hover { background: rgba(255,255,255,.08); color: #fff; } .ds-advanced aside.ds-shell nav#menu { background: transparent; gap: 2px; } .ds-advanced aside.ds-shell nav#menu button[id^="nav-"] { color: var(--adv-lateral-texto); font-weight: 500; min-height: 34px; padding: 7px 9px; border-radius: 8px; } .ds-advanced aside.ds-shell nav#menu button[id^="nav-"]:hover { background: rgba(255,255,255,.08); color: #fff; } .ds-advanced aside.ds-shell nav#menu button[id^="nav-"].ativo { background: var(--ds-grad-marca); color: #fff; } .ds-advanced aside.ds-shell nav#menu .nav-icone { color: inherit; } .ds-advanced .ds-nav-cab { color: var(--adv-lateral-texto); min-height: 34px; padding: 7px 9px; border-radius: 8px; } .ds-advanced .ds-nav-cab:hover { background: rgba(255,255,255,.08); color: #fff; } .ds-advanced .ds-nav-cab .ds-nav-cab-ic, .ds-advanced .ds-nav-cab .ds-nav-chevron { color: inherit; } .ds-advanced .ds-nav-grupo.ds-aberto { border: 0; background: rgba(255,255,255,.05); border-radius: 8px; } .ds-advanced .ds-nav-grupo.ds-aberto > .ds-nav-cab { background: transparent; color: #fff; border-radius: 8px 8px 0 0; } .ds-advanced .ds-nav-grupo.ds-aberto > .ds-nav-lista { padding: 2px 4px 6px; } .ds-advanced .ds-nav-lista button[id^="nav-"] { color: var(--adv-lateral-texto); padding-left: 30px; font-size: 13px; } .ds-advanced aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo { background: var(--ds-submenu-ativo); color: #fff; } .ds-advanced aside.ds-shell nav#menu .ds-nav-lista button[id^="nav-"].ativo .nav-icone { color: var(--ds-brand-400); } .ds-advanced aside.ds-shell.ds-colapsada .ds-nav-lista { background: var(--adv-lateral); border-color: rgba(255,255,255,.12); } .ds-advanced .ds-flyout-titulo { color: var(--ds-brand-400); } .ds-advanced aside.ds-shell .rodape { border-top-color: rgba(255,255,255,.12); color: var(--adv-lateral-texto); } .ds-advanced aside.ds-shell .rodape b { color: var(--adv-lateral-forte); } .ds-advanced aside.ds-shell .rodape #quem-papel { color: var(--adv-lateral-texto); } .ds-advanced aside.ds-shell .rodape .leve, .ds-advanced .ds-cor-btn, .ds-advanced .ds-tema-btn { background: transparent; border-color: rgba(255,255,255,.16); color: var(--adv-lateral-texto); } .ds-advanced aside.ds-shell .rodape .leve:hover, .ds-advanced .ds-cor-btn:hover { background: rgba(255,255,255,.08); color: #fff; } .ds-advanced .ds-mono-texto { display: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ds-grad-marca); color: #fff; font-weight: 700; font-size: 12px; align-items: center; justify-content: center; margin: 0 auto; } .ds-advanced aside.ds-shell.ds-colapsada .ds-mono-texto { display: flex; } /* BUG (achado em uso, 10/set/2026): com a barra recolhida apareciam DOIS monogramas "MA" sobrepostos. O CSS do shell esconde a imagem da logo e a legenda, mas nunca precisou esconder o MONOGRAMA — na casa existe arquivo de logo e o monograma nunca é desenhado. No produto sem logo enviada ele é a marca, e ficava sobrando ao lado do monograma que o próprio shell injeta. `!important` é necessário e não é preguiça: `vestirMarca()` liga o monograma escrevendo `quadrado.style.display = "inline-flex"` DIRETO no elemento, e estilo inline vence qualquer seletor. Mexer no JS não resolveria sozinho — a barra pode ser recolhida depois de a marca já ter sido vestida. */ .ds-theme aside.ds-shell.ds-colapsada .logo .logo-monograma { display: none !important; } /* Recolhida, a barra vira uma coluna de ícones sem uma palavra escrita. Quem está aprendendo o sistema não adivinha o que cada um é, e o botão de voltar ficava do tamanho de um ícone qualquer. Agora ele é o primeiro elemento da barra, com contorno, e os ícones ganham rótulo ao passar o mouse. */ .ds-advanced aside.ds-shell.ds-colapsada .ds-shell-toggle { width: 30px; height: 30px; border-color: var(--ds-brand-400); color: var(--ds-brand-400); margin: 0 auto 4px; } .ds-advanced aside.ds-shell.ds-colapsada .ds-shell-toggle:hover { background: var(--ds-grad-marca); color: #fff; border-color: transparent; } .ds-advanced aside.ds-shell.ds-colapsada .logo { flex-direction: column; gap: 8px; padding: 0; } /* Monograma da agência (sem logo enviada). O `#tela-login .logo-login span` do CSS legado é mais específico que `.logo-monograma` e pintava as iniciais de cinza, em 11px, dentro do quadrado verde — ilegível. */ .ds-advanced .logo-monograma, .ds-advanced #tela-login .logo-login span.logo-monograma, #tela-login .logo-login span.logo-monograma { background: var(--ds-grad-marca); color: #fff; font-size: 30px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .ds-advanced aside .logo span.logo-monograma { font-size: 16px; } /* ── login ───────────────────────────────────────────────── */ .ds-advanced #tela-login { background: #EEF2F6; } .ds-advanced #tela-login .card { border-radius: 12px; border: 1px solid var(--ds-n-200); box-shadow: 0 10px 30px rgba(15,23,42,.08); } .ds-advanced #tela-login .logo-login .logo-nome-marca { color: var(--ds-titulo); } .ds-advanced #tela-login .logo-login #marca-legenda-login { color: var(--ds-brand-600); letter-spacing: .16em; } .ds-advanced #tela-login .acao { background: var(--ds-grad-marca); border-radius: 8px; } /* ── superfícies e componentes, compactos ─────────────────── */ .ds-advanced .card, .ds-advanced .ds-lista .card { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; box-shadow: none; backdrop-filter: none; } .ds-advanced .card h2, .ds-advanced .ds-lista .card h2 { font-size: 16px; font-weight: 600; color: var(--ds-titulo); margin: 0 0 6px; } .ds-advanced .card .dica, .ds-advanced .ds-lista .card .dica { font-size: 13px; color: var(--ds-texto-meta); } .ds-advanced .kpi::after, .ds-advanced .ds-lista .kpi::after, .ds-advanced .ds-kpi::after { display: none; } .ds-advanced .kpis .kpi, .ds-advanced .ds-lista .kpi { background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; } .ds-advanced .kpi b, .ds-advanced .ds-lista .kpi b { font-size: 22px; } .ds-advanced label, .ds-advanced .ds-lista label { font-size: 12.5px; color: var(--ds-texto-sec); margin: 8px 0 4px; font-weight: 500; } .ds-advanced input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), .ds-advanced select, .ds-advanced textarea, .ds-advanced .ds-lista input:not(.campo-busca):not([type=checkbox]):not([type=radio]):not([type=file]), .ds-advanced .ds-lista select, .ds-advanced .ds-lista .campo-busca { height: 40px; border-radius: 8px; border: 1px solid var(--ds-n-300); background: var(--card); color: var(--texto); font-size: 14px; padding: 0 12px; font-weight: 400; box-shadow: none; } .ds-advanced textarea { height: auto; min-height: 72px; padding: 8px 12px; } .ds-advanced input[type=checkbox], .ds-advanced input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ds-brand-600); } .ds-advanced input[type=range] { width: 140px; height: auto; padding: 0; border: 0; background: none; accent-color: var(--ds-brand-600); } .ds-advanced input[type=file] { width: 100%; height: auto; padding: 8px; border: 1px dashed var(--ds-n-300); border-radius: 8px; background: var(--painel); font-size: 13px; } .ds-advanced input:focus, .ds-advanced select:focus, .ds-advanced textarea:focus { outline: none; border-color: var(--ds-foco); box-shadow: 0 0 0 3px rgba(13,148,136,.18); } .ds-advanced .acao, .ds-advanced .ds-lista .acao, .ds-advanced button.acao { background: var(--ds-grad-marca); color: #fff; border: 0; border-radius: 8px; min-height: 40px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; } .ds-advanced .acao:hover { background: var(--ds-grad-marca-hover); } .ds-advanced .leve, .ds-advanced .ds-lista .leve, .ds-advanced button.leve { background: var(--card); border: 1px solid var(--ds-n-300); border-radius: 7px; color: var(--ds-texto-sec); font-size: 12.5px; padding: 5px 10px; cursor: pointer; } .ds-advanced .leve:hover { border-color: var(--ds-brand-400); color: var(--ds-brand-700); background: var(--ds-brand-50); } .ds-advanced .leve.perigo { color: var(--adv-erro); } .ds-advanced .leve.perigo:hover { background: var(--adv-erro-fundo); border-color: var(--adv-erro); } .ds-advanced table, .ds-advanced .ds-lista table { font-size: 13px; } .ds-advanced th, .ds-advanced .ds-lista th { background: var(--ds-n-100); color: var(--ds-texto-sec); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 10px; border-bottom: 1px solid var(--borda); } .ds-advanced td, .ds-advanced .ds-lista td { padding: 9px 10px; border-bottom: 1px solid var(--borda); color: var(--texto); vertical-align: middle; } .ds-advanced .ds-lista th:first-child, .ds-advanced .ds-lista th:last-child { border-radius: 0; } .ds-advanced .selo, .ds-advanced .ds-lista .selo { border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; } .ds-advanced .vazio, .ds-advanced .ds-lista .vazio { padding: 28px; color: var(--ds-texto-meta); font-size: 13.5px; text-align: center; } .ds-advanced .grade { gap: 0 14px; } .ds-advanced .modal-box { border-radius: 12px; } .ds-advanced .campo-grupo, .ds-advanced .passo { border-radius: 12px; } .ds-advanced .reg-tipo, .ds-advanced .source-option { border-radius: 10px; } .ds-advanced #em-cobranca-box { display: block; } #em-cobranca-box { display: none; margin: 8px 0 12px; padding: 12px 14px; border: 1px dashed var(--borda); border-radius: 10px; background: var(--painel); } #em-cobranca-box .adv-check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto); margin: 0 0 4px; } #em-cobranca-box .adv-check input { width: 16px; height: 16px; margin: 0; } #em-cobranca-box .grade { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } /* ── blocos do produto ───────────────────────────────────── */ .adv-passos { display: grid; gap: 8px; margin-top: 8px; } .adv-passo { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--card); } .adv-passo .num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--adv-neutro-fundo); color: var(--adv-neutro); font-weight: 700; font-size: 12px; flex: none; } .adv-passo.feito .num { background: var(--adv-ok-fundo); color: var(--adv-ok); } .adv-passo.feito b { text-decoration: line-through; color: var(--ds-texto-meta); } .adv-passo .corpo { flex: 1; min-width: 0; } .adv-passo .corpo b { display: block; font-size: 14px; color: var(--texto); } .adv-passo .corpo small { display: block; color: var(--ds-texto-meta); font-size: 12.5px; margin-top: 2px; } .adv-progresso { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ds-texto-meta); } .adv-progresso .barra { flex: 1; height: 6px; border-radius: 3px; background: var(--ds-n-200); overflow: hidden; } .adv-progresso .barra i { display: block; height: 100%; background: var(--ds-grad-marca); } .adv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; } .adv-kpi { text-align: left; background: var(--card); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; color: var(--texto); } .adv-kpi:hover { border-color: var(--ds-brand-400); } .adv-kpi .rot { font-size: 12.5px; color: var(--ds-texto-sec); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .adv-kpi b { font-size: 24px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; } .adv-kpi .sub { font-size: 12.5px; color: var(--ds-texto-meta); } .adv-kpi .criterio { font-size: 12px; color: var(--ds-texto-meta); line-height: 1.4; border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 4px; } .adv-kpi.alerta { border-color: var(--adv-erro); } .adv-kpi.alerta b { color: var(--adv-erro); } .adv-kpi.positivo b { color: var(--adv-ok); } .adv-lista { display: grid; gap: 6px; } .adv-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 9px; background: var(--card); } .adv-item.atrasado { border-left: 4px solid var(--adv-erro); } .adv-item.hoje { border-left: 4px solid var(--adv-aviso); } .adv-item.proximo { border-left: 4px solid var(--ds-n-300); } .adv-item.feito { opacity: .6; } .adv-item .tipo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-texto-meta); min-width: 78px; flex: none; } .adv-item .quando { font-size: 12.5px; color: var(--ds-texto-sec); min-width: 92px; flex: none; font-variant-numeric: tabular-nums; } .adv-item .corpo { flex: 1; min-width: 0; } .adv-item .corpo b { font-size: 13.5px; color: var(--texto); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adv-item .corpo small { color: var(--ds-texto-meta); font-size: 12px; } .adv-item .acoes { display: flex; gap: 6px; flex: none; } .adv-item .valor { font-weight: 600; font-variant-numeric: tabular-nums; } .adv-secao-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ds-texto-sec); margin: 14px 0 8px; } .adv-secao-titulo .cont { background: var(--adv-neutro-fundo); color: var(--adv-neutro); border-radius: 999px; padding: 1px 8px; font-size: 12px; } .adv-secao-titulo.atrasado .cont { background: var(--adv-erro-fundo); color: var(--adv-erro); } .adv-secao-titulo.hoje .cont { background: var(--adv-aviso-fundo); color: var(--adv-aviso); } .adv-pill { display: inline-block; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; } .adv-pill.ok { background: var(--adv-ok-fundo); color: var(--adv-ok); } .adv-pill.aviso { background: var(--adv-aviso-fundo); color: var(--adv-aviso); } .adv-pill.erro { background: var(--adv-erro-fundo); color: var(--adv-erro); } .adv-pill.neutro { background: var(--adv-neutro-fundo); color: var(--adv-neutro); } .adv-pill.info { background: var(--ds-brand-50); color: var(--ds-brand-800); } .adv-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 14px; flex-wrap: wrap; } .adv-aba { border: 0; background: none; padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ds-texto-meta); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; } .adv-aba:hover { color: var(--texto); } .adv-aba.ativa { color: var(--ds-brand-700); border-bottom-color: var(--ds-brand-600); } .adv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .adv-chip { border: 1px solid var(--ds-n-300); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ds-texto-sec); cursor: pointer; font-family: inherit; } .adv-chip.ativa { background: var(--ds-brand-600); border-color: var(--ds-brand-600); color: #fff; } .adv-chip .cont { opacity: .75; margin-left: 4px; } .adv-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; align-items: end; } .adv-form .larga { grid-column: 1 / -1; } .adv-form-acoes { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .adv-duplo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; } .adv-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 6px 0 12px; } .adv-resumo div { border: 1px solid var(--borda); border-radius: 9px; padding: 10px 12px; background: var(--painel); } .adv-resumo span { display: block; font-size: 12px; color: var(--ds-texto-meta); } .adv-resumo b { font-size: 18px; font-variant-numeric: tabular-nums; } .adv-criterio { font-size: 12.5px; color: var(--ds-texto-meta); line-height: 1.5; margin: 4px 0 0; } .adv-linha-total td { font-weight: 700; background: var(--painel); } /* logo: prévia e enquadramento */ .adv-logo { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: start; } .adv-logo-previa { width: 160px; height: 160px; border: 1px solid var(--borda); border-radius: 12px; background: repeating-conic-gradient(var(--ds-n-100) 0 25%, var(--card) 0 50%) 0 0 / 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .adv-logo-previa img, .adv-logo-previa canvas { max-width: 100%; max-height: 100%; display: block; } .adv-logo-previa .mono { width: 96px; height: 96px; border-radius: 16px; background: var(--ds-grad-marca); color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .adv-logo-ajustes { display: none; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: 13px; } .adv-logo-ajustes.ativo { display: flex; } .adv-logo-ajustes input[type=range] { width: 140px; } .adv-logo small { display: block; color: var(--ds-texto-meta); font-size: 12px; margin-top: 6px; } /* alerta em faixa (restauração, licença) */ .adv-aviso { padding: 10px 12px; border-radius: 9px; font-size: 13px; margin: 8px 0; } .adv-aviso.perigo { background: var(--adv-erro-fundo); color: var(--adv-erro); border: 1px solid var(--adv-erro); } .adv-aviso.atencao { background: var(--adv-aviso-fundo); color: var(--adv-aviso); } .adv-aviso.ok { background: var(--adv-ok-fundo); color: var(--adv-ok); } /* ── celular ─────────────────────────────────────────────── */ @media (max-width: 768px) { .ds-advanced main { padding: 14px; } .adv-duplo { grid-template-columns: 1fr; } .adv-logo { grid-template-columns: 1fr; } .adv-item { flex-wrap: wrap; } .adv-item .quando { min-width: 0; } .adv-item .acoes { width: 100%; justify-content: flex-end; } .adv-kpis { grid-template-columns: 1fr 1fr; } .ds-advanced .adv-form { grid-template-columns: 1fr; } } @media (max-width: 480px) { .adv-kpis { grid-template-columns: 1fr; } } @media print { .ds-advanced aside, .ds-advanced .topbar { display: none; } } /* ── Assinatura do CRM ───────────────────────────────────────── A tela dizia o estado e pedia uma chave, sem explicar o que a assinatura faz. Quem compra na Hotmart nunca viu "licença" numa ferramenta antes, e um campo pedindo chave sem contexto assusta mais do que informa: as quatro perguntas ficam escritas na tela. */ .adv-assinatura-estado { border: 1px solid var(--ds-borda, #e2e8f0); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; margin: 10px 0 14px; display: flex; flex-direction: column; gap: 6px; } .adv-assinatura-estado > b { font-size: 1.02rem; } .adv-assinatura-estado .msg { font-size: .84rem; opacity: .8; } .adv-assinatura-estado.ok { border-left-color: #16a34a; } .adv-assinatura-estado.aviso { border-left-color: #d97706; } .adv-assinatura-estado.ruim { border-left-color: #dc2626; } .adv-assinatura-estado.ruim > b { color: #b91c1c; } .adv-assinatura-estado.aviso > b { color: #b45309; } .adv-assinatura-estado dl { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 4px 0 0; } .adv-assinatura-estado dl div { display: flex; flex-direction: column; } .adv-assinatura-estado dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; font-weight: 700; } .adv-assinatura-estado dd { margin: 0; font-size: .9rem; font-weight: 600; } .adv-assinatura-explica { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 4px 0 16px; } .adv-assinatura-explica > div { display: flex; flex-direction: column; gap: 3px; } .adv-assinatura-explica b { font-size: .88rem; } .adv-assinatura-explica span { font-size: .84rem; opacity: .82; line-height: 1.45; } /* ── Tipo de cliente: escolher clicando, nunca digitando ─────── Três botões e um "não classificado" que também é botão — porque deixar em branco precisa ser uma escolha visível, não o efeito de não ter mexido em nada. */ .adv-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; } .adv-tipos button { border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 999px; background: transparent; padding: 6px 13px; font-size: .84rem; cursor: pointer; color: inherit; } .adv-tipos button:hover { border-color: var(--ds-brand-400, #38bdf8); } .adv-tipos button.ativo { border-color: var(--ds-brand-500, #0ea5e9); color: var(--ds-brand-500, #0ea5e9); background: color-mix(in srgb, var(--ds-brand-500, #0ea5e9) 12%, transparent); font-weight: 600; } .adv-tipos-filtro button b { font-weight: 700; opacity: .65; margin-left: 3px; } .adv-selo-tipo { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .adv-selo-tipo.direto { color: #0369a1; } .adv-selo-tipo.parceiro { color: #7c3aed; } .adv-selo-tipo.balcao { color: #b45309; } /* `sem-tipo`, não `vazio`: `.vazio` é o estado-vazio do design system e traz padding de 28px — o selo virava um oval de 78px de altura. */ .adv-selo-tipo.sem-tipo { color: var(--ds-texto-fraco, #94a3b8); border-style: dashed; font-weight: 500; } /* ── O que se repete ────────────────────────────────────────── O interruptor fica DENTRO do formulário que a pessoa já está preenchendo: ela acabou de escrever "Internet" e R$ 99,90, e a pergunta natural naquele instante é "isso se repete?". Uma tela separada de "recorrências" obrigaria a digitar tudo de novo. */ .adv-repetir { border: 1px dashed var(--ds-borda, #e2e8f0); border-radius: 12px; padding: 10px 14px; margin: 4px 0 12px; } .adv-repetir.ligado { border-style: solid; border-color: var(--ds-brand-400, #38bdf8); background: color-mix(in srgb, var(--ds-brand-500, #0ea5e9) 5%, transparent); } .adv-repetir-chave { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; } .adv-repetir-chave input { width: 18px; height: 18px; margin-top: 2px; flex: none; } .adv-repetir-chave span { display: flex; flex-direction: column; } .adv-repetir-chave small { opacity: .7; font-size: .78rem; } .adv-repetir-campos { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; } .adv-repetir-campos > label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .65; font-weight: 700; margin-top: 8px; } .adv-repetir-resumo { margin: 10px 0 0; font-weight: 600; opacity: .9; } .adv-vezes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .adv-vezes button { border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 999px; background: transparent; padding: 6px 14px; cursor: pointer; color: inherit; font-size: .84rem; font-variant-numeric: tabular-nums; } .adv-vezes button.ativo { border-color: var(--ds-brand-500, #0ea5e9); color: var(--ds-brand-500, #0ea5e9); background: color-mix(in srgb, var(--ds-brand-500, #0ea5e9) 12%, transparent); font-weight: 700; } .adv-vezes input { width: 84px; } .adv-rec-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--ds-borda, #e2e8f0); border-radius: 10px; margin-bottom: 6px; } .adv-rec-linha .corpo b { display: block; } .adv-rec-linha .corpo small { display: block; opacity: .72; font-size: .78rem; } .adv-rec-linha .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .adv-rec-linha .acoes { display: flex; gap: 5px; flex-wrap: wrap; } .adv-rec-linha.encerrada { opacity: .6; border-style: dashed; } @media (max-width: 640px) { .adv-rec-linha { grid-template-columns: 1fr auto; } .adv-rec-linha .acoes { grid-column: 1 / -1; } }