/* ===================================================================== CENTRAL ARKAD — identidade luxo minimalista (private banking / joalheria) Fonte única: Inter (títulos + UI, igual ao print de referência) TRÊS TEMAS, todos por atributo data-theme no : data-theme="dark" Escuro · ônix + areia + ouro #B08D4C (padrão) data-theme="light" Claro · #FAF8F4 + card branco + ouro #87671F data-theme="neutral" Neutro · cinza #111318/#191C22 + ouro só no dinheiro Ordem dos blocos importa: o bloco escuro casa em ":root" também, então claro e neutro precisam vir DEPOIS dele para sobrescrever. ===================================================================== */ /* --------------------------------------------------------------------- TOKENS NÃO-TEMÁTICOS (iguais nos três temas) --------------------------------------------------------------------- */ :root { --serif: "Inter", system-ui, -apple-system, sans-serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --radius: 4px; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Foto de fundo da HOME (default: nenhuma → só o tratamento CSS). 👉 PARA PLUGAR UMA FOTO DE CARRO: troque a linha abaixo por --hero-bg-image: url("assets/car.jpg"); A foto entra ATRÁS do scrim escurecedor; os cards continuam legíveis. */ --hero-bg-image: none; /* 🔁 PROVA VISUAL 31/07 — peso da interface. PRA REVERTER: 500 -> 400. */ --ui-weight: 500; } /* ===================================================================== TEMA ESCURO (default) — ônix + areia + ouro ===================================================================== */ :root, [data-theme="dark"] { --gold: #b08d4c; --gold-soft: rgba(176, 141, 76, 0.55); /* 0.14 -> 0.11: com 0.14 o dourado sobre a própria lavagem dava 4,44:1 no badge "Em breve". A diferença de tom não se vê, o contraste sim. */ --gold-faint: rgba(176, 141, 76, 0.11); /* lavagem dourada de foco/hover em input e botão */ --gold-wash: rgba(176, 141, 76, 0.22); /* texto que fica POR CIMA de um fundo dourado sólido */ --on-gold: #0e0e10; --onyx-0: #0e0e10; /* fundo base */ --onyx-1: #14141a; /* superfícies */ --onyx-2: #1c1c22; /* cards */ --sand: #ede6d8; /* texto claro */ --sand-dim: rgba(237, 230, 216, 0.62); --sand-faint: rgba(237, 230, 216, 0.38); --hairline: rgba(237, 230, 216, 0.10); --hairline-gold: rgba(176, 141, 76, 0.28); /* estados de benchmark */ --ok: #b08d4c; --warn: #d9a441; --bad: #c96a5a; /* HOME — fundo aspiracional (dark): ônix profundo + glows dourados */ --hero-base: radial-gradient(120% 90% at 12% 0%, #17171d 0%, #0d0d10 55%, #090909 100%); --hero-glow-1: rgba(176, 141, 76, 0.16); --hero-glow-2: rgba(176, 141, 76, 0.10); --hero-glow-3: rgba(210, 180, 120, 0.06); --hero-vignette: rgba(0, 0, 0, 0.55); --hero-grain-opacity: 0.05; --hero-scrim: linear-gradient(180deg, rgba(9, 9, 11, 0.72) 0%, rgba(9, 9, 11, 0.82) 100%); /* Cards do portal sobre o fundo aspiracional (leve glass) */ --card-bg: rgba(28, 28, 34, 0.72); --card-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9); /* TAGS (V20) — paleta FECHADA de 8 cores. Cada uma é um par fundo/texto SÓLIDO (nada de rgba): etiqueta pousa em card, em modal e na faixa de filtro, três superfícies diferentes, e cor com alpha mudaria de contraste em cada uma. Sólido mede uma vez e vale em todo lugar. Todos os 8 pares passam 4,5:1 nos três temas — medido, não estimado, por scripts/prova-contraste-tags.mjs. O menor deste tema é 7,33:1 (roxo). */ --tag-cinza-bg: #2b2f36; --tag-cinza-fg: #ced3dc; --tag-ambar-bg: #3a2e12; --tag-ambar-fg: #f0c569; --tag-verde-bg: #1a3826; --tag-verde-fg: #86dba7; --tag-azul-bg: #152b42; --tag-azul-fg: #8fc4f5; --tag-roxo-bg: #332650; --tag-roxo-fg: #cbb2f7; --tag-rosa-bg: #482236; --tag-rosa-fg: #f7b0ca; --tag-vermelho-bg: #4a2424; --tag-vermelho-fg: #f8b0b0; --tag-turquesa-bg: #10302f; --tag-turquesa-fg: #7ed6d0; --toggle-icon: "🌙"; } /* ===================================================================== TEMA CLARO — papel de sessão longa. Fundo quase branco, card branco de verdade com borda visível, ouro escuro só no valor. É o único que imprime bem (nada de fundo chapado gastando tinta). Areia saturada saiu: #F5EFE4 virou #FAF8F4. ===================================================================== */ [data-theme="light"] { /* Ouro escurecido de #8A6A26 para #87671F: o pedido original passava no card (5,04:1) mas caía a 4,39:1 quando o ouro pousa sobre a lavagem dourada do estado ativo. Dois passos mais escuro resolve sem mudar a cor a olho nu. */ --gold: #87671f; --gold-soft: rgba(135, 103, 31, 0.72); --gold-faint: rgba(135, 103, 31, 0.06); --gold-wash: rgba(135, 103, 31, 0.06); --on-gold: #ffffff; --onyx-0: #faf8f4; /* fundo base */ --onyx-1: #fdfbf7; /* superfícies (sidebar, modais) */ --onyx-2: #ffffff; /* cards */ --sand: #1b1b1f; /* texto principal */ --sand-dim: #55535a; /* texto secundário */ --sand-faint: #6f6d75; /* texto terciário, rótulo pequeno */ --hairline: #e4ded2; /* borda de card e divisória */ --hairline-gold: rgba(135, 103, 31, 0.34); /* estados de benchmark — cor semântica, todos acima de 4,5:1 no branco */ --ok: #2f6b46; --warn: #8a5a10; --bad: #a53326; /* HOME — fundo aspiracional: papel quente, brilho dourado bem contido */ --hero-base: radial-gradient(120% 90% at 12% 0%, #ffffff 0%, #faf8f4 55%, #f2eee6 100%); --hero-glow-1: rgba(135, 103, 31, 0.10); --hero-glow-2: rgba(135, 103, 31, 0.07); --hero-glow-3: rgba(170, 140, 90, 0.06); --hero-vignette: rgba(90, 80, 55, 0.08); --hero-grain-opacity: 0.02; --hero-scrim: linear-gradient(180deg, rgba(253, 251, 247, 0.72) 0%, rgba(250, 248, 244, 0.86) 100%); /* Cards do portal: branco sólido, sombra bem leve (nada de card flutuando) */ --card-bg: #ffffff; --card-shadow: 0 1px 2px rgba(27, 27, 31, 0.04), 0 10px 28px -22px rgba(27, 27, 31, 0.16); /* TAGS no tema claro: o par INVERTE (fundo pálido, texto escuro). Reaproveitar as cores do escuro aqui seria o erro clássico — pastel claro sobre branco dá ~1,3:1 e a etiqueta some no sol. O menor par deste tema é 5,96:1 (âmbar), ainda com folga sobre o mínimo de 4,5:1. */ --tag-cinza-bg: #eceef1; --tag-cinza-fg: #464c56; --tag-ambar-bg: #f9e7bd; --tag-ambar-fg: #73500e; --tag-verde-bg: #d6efdf; --tag-verde-fg: #186236; --tag-azul-bg: #e3eefb; --tag-azul-fg: #17548f; --tag-roxo-bg: #efe6fb; --tag-roxo-fg: #5b3596; --tag-rosa-bg: #fce4ec; --tag-rosa-fg: #93194b; --tag-vermelho-bg: #fbe4e4; --tag-vermelho-fg: #97231f; --tag-turquesa-bg: #dff3f2; --tag-turquesa-fg: #14615d; --toggle-icon: "☀️"; } /* ===================================================================== TEMA NEUTRO — cinza de painel (linha Linear/Vercel). Sem areia, sem creme: só cinza-azulado, hairline visível e o ouro reservado para o dinheiro. As superfícies e os cards têm o MESMO tom de propósito; a separação vem da borda, não da elevação. ===================================================================== */ [data-theme="neutral"] { --gold: #c8a55e; --gold-soft: rgba(200, 165, 94, 0.60); --gold-faint: rgba(200, 165, 94, 0.12); --gold-wash: rgba(200, 165, 94, 0.18); --on-gold: #111318; --onyx-0: #111318; /* fundo base */ --onyx-1: #191c22; /* superfícies */ --onyx-2: #191c22; /* cards (mesmo tom; a borda é que separa) */ --sand: #e6e8ec; /* texto principal */ --sand-dim: rgba(230, 232, 236, 0.70); --sand-faint: rgba(230, 232, 236, 0.46); --hairline: #262b33; --hairline-gold: rgba(200, 165, 94, 0.26); /* estados de benchmark — semânticos, sem ouro (ouro é do dinheiro) */ --ok: #5ec08a; --warn: #e0b155; --bad: #e4776a; /* HOME — fundo aspiracional: gradiente cinza, glow quase nulo */ --hero-base: radial-gradient(120% 90% at 12% 0%, #1a1e26 0%, #141720 55%, #0e1014 100%); --hero-glow-1: rgba(200, 165, 94, 0.07); --hero-glow-2: rgba(140, 160, 200, 0.05); --hero-glow-3: rgba(200, 165, 94, 0.03); --hero-vignette: rgba(0, 0, 0, 0.45); --hero-grain-opacity: 0.03; --hero-scrim: linear-gradient(180deg, rgba(17, 19, 24, 0.72) 0%, rgba(17, 19, 24, 0.86) 100%); /* Cards do portal sobre o fundo aspiracional */ --card-bg: rgba(25, 28, 34, 0.84); --card-shadow: 0 20px 50px -32px rgba(0, 0, 0, 0.85); /* TAGS no neutro: os MESMOS pares do escuro. Não é preguiça — as superfícies dos dois temas são escuras e próximas (#1c1c22 e #191c22), e o par é sólido, então o contraste medido é idêntico nos dois. Inventar um terceiro conjunto só criaria mais números pra manter sem mudar nada na tela. */ --tag-cinza-bg: #2b2f36; --tag-cinza-fg: #ced3dc; --tag-ambar-bg: #3a2e12; --tag-ambar-fg: #f0c569; --tag-verde-bg: #1a3826; --tag-verde-fg: #86dba7; --tag-azul-bg: #152b42; --tag-azul-fg: #8fc4f5; --tag-roxo-bg: #332650; --tag-roxo-fg: #cbb2f7; --tag-rosa-bg: #482236; --tag-rosa-fg: #f7b0ca; --tag-vermelho-bg: #4a2424; --tag-vermelho-fg: #f8b0b0; --tag-turquesa-bg: #10302f; --tag-turquesa-fg: #7ed6d0; --toggle-icon: "🌗"; } /* No claro o valor em ouro precisa de peso pra não sumir no branco: os números grandes já são 600, estes eram 500. */ [data-theme="light"] .lead-card-value, [data-theme="light"] .fin-table td.fin-cell-valor, [data-theme="light"] .fin-empty strong { font-weight: 600; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--onyx-0); color: var(--sand); font-family: var(--sans); /* 400 em vez de 300: peso fino cansa em painel, onde a leitura e de numero e dura horas. 300 fica pra pagina de venda. Agora sai de --ui-weight (topo do arquivo), ponto unico de reversao. */ font-weight: var(--ui-weight); letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.5s var(--ease), color 0.5s var(--ease); } /* Controle de formulario nao herda peso do body (default do navegador). Especificidade zero de classe: quem ja declara o proprio peso continua mandando. Sai junto se --ui-weight voltar pra 400. */ button, input, select, textarea { font-weight: inherit; } /* ============ LAYOUT ============ */ .app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; } /* ---- SIDEBAR ---- */ .sidebar { background: var(--onyx-1); border-right: 1px solid var(--hairline); padding: 36px 26px; display: flex; flex-direction: column; gap: 42px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 14px; } /* ============================ MARCA — SEM CHAPA ============================ O símbolo é o "A" da Arkad SOLTO sobre a interface: sem disco, sem anel e sem retângulo de fundo. A versão anterior tinha `border: 1px solid` + `border-radius: 50%` desenhando um círculo em volta, e o SVG trazia um disco ônix embutido — os dois juntos eram a "chapa" que o dono recusou. TAMANHO — por que 38px, e não os 42px de antes. Os 42px eram do DISCO, não do símbolo: dentro daquele disco o "A" media 19,2px (medido, não estimado — o desenho ocupa 732 de um viewBox de 1600). Tirada a chapa, "42px" passaria a ser a altura do próprio "A", e trocar 19,2 por 42 é mais que dobrar. Manter o número não é manter a presença. O critério é o de lockup: a altura do símbolo acompanha o BLOCO DE TEXTO ao lado. Medido nesta página, o bloco "Central Arkad" + linha de apoio tem 39px de altura (cap-height do nome: 17px). Daí 38px — o "A" encosta na altura do bloco sem ultrapassá-lo, e o conjunto lê como uma peça só. Ele fica maior que antes (19,2 -> 38px) de propósito: sem o disco em volta, o símbolo perde massa e precisa crescer para não sumir ao lado do texto. O SVG já vem recortado no desenho (viewBox no bounding box real), então a altura pedida aqui é a altura que o "A" realmente ocupa na tela. */ .brand-mark { flex: none; display: flex; align-items: center; } /* A altura vai na IMAGEM, não no contêiner: como as duas versões de ouro moram no mesmo bloco e uma delas está sempre `display: none`, medir por `height: 100%` do pai dependeria de qual sobrou. Aqui a medida é direta e não depende disso. `width: auto` deixa a proporção do arquivo mandar. */ .brand-mark-img { height: 38px; width: auto; display: block; } /* Troca por tema. O "A" existe em dois ouros: o vivo (#A78742 -> #FFDB6B) foi desenhado para brilhar sobre ônix, e o escuro (#C79E56 -> #8A6D34) para ter peso sobre areia. Os temas `dark` (#0e0e10) e `neutral` (#111318) têm fundo escuro e ficam com o vivo; só `light` (#faf8f4) troca para o escuro — o ouro claro sobre fundo quase branco praticamente desaparece. */ .brand-mark-claro { display: none; } [data-theme="light"] .brand-mark-escuro { display: none; } [data-theme="light"] .brand-mark-claro { display: block; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: 0.02em; } .brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--sand-faint); margin-top: 2px; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: var(--sand-dim); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; border-radius: var(--radius); transition: color 0.3s var(--ease), background 0.3s var(--ease); } .nav-item:hover { color: var(--sand); } .nav-item.is-active { color: var(--gold); background: var(--gold-faint); } .nav-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; } /* Nav agrupada por departamento (espelha o mapa macro da home) */ .nav-group { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; } .nav-group-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--sand-faint); padding: 0 12px 4px; } /* itens "em breve": quietos, não clicáveis, mesmo rótulo, sem link quebrado */ .nav-item.is-soon { color: var(--sand-faint); cursor: default; } .nav-item.is-soon:hover { color: var(--sand-faint); } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; } .link-quiet { background: none; border: none; padding: 0; color: var(--sand-faint); font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-align: left; cursor: pointer; transition: color 0.3s var(--ease); } .link-quiet:hover { color: var(--bad); } .hairline { height: 1px; background: var(--hairline); } .foot-note { font-size: 10px; color: var(--sand-faint); letter-spacing: 0.06em; } /* ---- MAIN ---- */ .main { padding: 56px 60px 90px; max-width: 1180px; } .view { display: none; } .view.is-active { display: block; animation: fade 0.5s var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---- HEAD ---- */ .view-head { margin-bottom: 48px; } .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.34em; color: var(--gold); margin: 0 0 14px; } .display { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; margin: 0 0 16px; letter-spacing: 0.01em; } .lede { font-size: 15px; color: var(--sand-dim); margin: 0; max-width: 62ch; line-height: 1.6; } .lede strong { color: var(--sand); font-weight: 500; } .back-btn { background: none; border: none; padding: 0; margin-bottom: 24px; color: var(--sand-dim); font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; cursor: pointer; transition: color 0.3s var(--ease); } .back-btn:hover { color: var(--gold); } /* ============ HOME — MAPA MACRO (departamentos) ============ */ /* Cada departamento é um grupo com eyebrow + grade de cards. */ .dept-group { margin-bottom: 46px; } .dept-group:last-child { margin-bottom: 0; } .dept-eyebrow { display: flex; align-items: center; gap: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); margin: 0 0 20px; font-weight: 500; } /* hairline dourada sutil que se estende à direita do rótulo do grupo */ .dept-eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hairline-gold), transparent); } /* ============ HOME CARDS ============ */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .dash-card { text-align: left; background: var(--onyx-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 26px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 190px; font-family: var(--sans); color: var(--sand); cursor: pointer; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .dash-card.is-active:hover { border-color: var(--hairline-gold); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); } /* "Em breve": não clicáveis, leve opacidade — mas ainda ricos e legíveis. */ .dash-card.is-disabled { cursor: default; opacity: 0.78; } .dash-card.is-disabled .dash-title { color: var(--sand-dim); } .dash-card-top { display: flex; justify-content: space-between; align-items: flex-start; } .dash-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--sand-faint); } .dash-arrow { color: var(--gold); font-size: 18px; line-height: 1; } .dash-title { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 0; letter-spacing: 0.01em; } .dash-desc { font-size: 13px; color: var(--sand-dim); margin: 0; line-height: 1.55; flex: 1; } .dash-status { align-self: flex-start; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; padding: 4px 10px; border-radius: 2px; border: 1px solid var(--hairline); } .dash-status.ok { color: var(--gold); border-color: var(--hairline-gold); } /* "Em breve" em dourado (dono do incidente pediu dourado, não cinza morto). Era --gold-soft: dourado com alfa sobre a própria lavagem dourada dava 2,35:1 no escuro e 2,90:1 no claro, ilegível nos três temas. Com --gold cheio fica dourado do mesmo jeito e passa de 4,5:1. */ .dash-status.soon { color: var(--gold); border-color: var(--hairline-gold); background: var(--gold-faint); } /* ============ PANELS ============ */ .panel { background: var(--onyx-1); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 34px 34px 30px; margin-bottom: 30px; } .panel-head { margin-bottom: 26px; } .panel-title { font-family: var(--serif); font-size: 27px; font-weight: 600; margin: 0 0 6px; letter-spacing: 0.01em; } .panel-sub { font-size: 13px; color: var(--sand-dim); margin: 0; } .chip-input { color: var(--gold); border-bottom: 1px solid var(--hairline-gold); padding-bottom: 1px; } /* ---- TABELA SEMANAL ---- */ .table-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px; } .grid-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; } .grid-table th, .grid-table td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; } .grid-table thead th { font-weight: 400; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-faint); border-bottom: 1px solid var(--hairline-gold); } .grid-table th.col-label, .grid-table td.col-label { text-align: left; color: var(--sand); } .grid-table thead th.col-in { color: var(--gold); } .grid-table td.calc-cell { color: var(--sand-dim); } .grid-table input.cell-input { width: 100%; min-width: 78px; background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--sand); font-family: var(--sans); font-size: 13px; text-align: right; padding: 7px 9px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); -moz-appearance: textfield; } .grid-table input.cell-input::-webkit-outer-spin-button, .grid-table input.cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .grid-table input.cell-input:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); } .grid-table input.cell-input::placeholder { color: var(--sand-faint); } .grid-table tfoot .total-row td { border-top: 1px solid var(--hairline-gold); border-bottom: none; font-weight: 500; color: var(--sand); padding-top: 16px; } .grid-table tfoot .total-row td.col-label { color: var(--gold); } /* ---- HIGHLIGHT ---- */ .highlight-card { margin-top: 26px; border: 1px solid var(--hairline-gold); border-radius: var(--radius); padding: 24px 28px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, var(--gold-faint), transparent); } .highlight-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sand-dim); } .highlight-value { font-family: var(--serif); font-size: 42px; font-weight: 600; color: var(--gold); line-height: 1.1; } .highlight-note { font-size: 12px; color: var(--sand-faint); } /* ---- BENCHMARKS ---- */ .bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .bench-card { background: var(--onyx-2); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color 0.3s var(--ease); } .bench-card.state-ok { border-left-color: var(--ok); } .bench-card.state-warn { border-left-color: var(--warn); } .bench-card.state-bad { border-left-color: var(--bad); } .bench-card.state-idle { border-left-color: var(--hairline); } .bench-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-dim); } .bench-value { font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1; } .bench-card.state-ok .bench-value { color: var(--ok); } .bench-card.state-warn .bench-value { color: var(--warn); } .bench-card.state-bad .bench-value { color: var(--bad); } .bench-card.state-idle .bench-value { color: var(--sand-faint); } .bench-range { font-size: 11px; color: var(--sand-faint); } .bench-flag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; } .bench-card.state-ok .bench-flag { color: var(--ok); } .bench-card.state-warn .bench-flag { color: var(--warn); } .bench-card.state-bad .bench-flag { color: var(--bad); } .bench-card.state-idle .bench-flag { color: var(--sand-faint); } .bottleneck { margin-top: 22px; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--onyx-2); } .bottleneck.state-bad { border-color: rgba(201, 106, 90, 0.4); } .bottleneck.state-warn { border-color: rgba(217, 164, 65, 0.4); } .bottleneck.state-ok { border-color: var(--hairline-gold); } .bottleneck-icon { width: 8px; height: 40px; border-radius: 2px; flex: none; background: var(--hairline); } .bottleneck.state-bad .bottleneck-icon { background: var(--bad); } .bottleneck.state-warn .bottleneck-icon { background: var(--warn); } .bottleneck.state-ok .bottleneck-icon { background: var(--gold); } .bottleneck-body { display: flex; flex-direction: column; gap: 3px; } .bottleneck-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sand-faint); } .bottleneck-text { font-size: 15px; color: var(--sand); font-weight: 400; } /* ---- CALCULADORA ---- */ .calc-layout { display: grid; grid-template-columns: 300px 1fr; gap: 34px; } .calc-inputs { display: flex; flex-direction: column; gap: 14px; } .calc-field { display: flex; flex-direction: column; gap: 6px; } .calc-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sand-dim); } .calc-field input { background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--sand); font-family: var(--sans); font-size: 14px; padding: 9px 12px; -moz-appearance: textfield; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .calc-field input::-webkit-outer-spin-button, .calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-field input:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); } .calc-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; } .calc-result { background: var(--onyx-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px; } .calc-result.is-roi { border-color: var(--hairline-gold); background: linear-gradient(180deg, var(--gold-faint), transparent); } .calc-result-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-dim); } .calc-result-value { font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--sand); line-height: 1.1; } .calc-result.is-roi .calc-result-value { color: var(--gold); } .calc-result-calc { font-size: 11px; color: var(--sand-faint); line-height: 1.4; } /* ===================================================================== THEME TOGGLE (botão claro/escuro no topo) ===================================================================== */ .theme-toggle { position: fixed; top: 22px; right: 26px; z-index: 50; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 12px; background: var(--onyx-1); border: 1px solid var(--hairline-gold); border-radius: 999px; color: var(--sand-dim); font-family: var(--sans); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer; box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.7); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.4s var(--ease), transform 0.3s var(--ease); } .theme-toggle:hover { color: var(--gold); border-color: var(--gold-soft); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: none; border-color: var(--gold); color: var(--gold); } .theme-toggle .toggle-icon { font-size: 14px; line-height: 1; filter: saturate(0.85); } /* ícone controlado pelo tema via ::before content */ .theme-toggle .toggle-icon::before { content: var(--toggle-icon); } /* ===================================================================== HOME — FUNDO ASPIRACIONAL (só na home, atrás dos cards) Camadas (de baixo p/ cima): foto opcional → scrim → glows → grão → vinheta. ===================================================================== */ #view-home { position: relative; isolation: isolate; } /* camada de fundo cinematográfica */ #view-home .home-bg { position: absolute; inset: -56px -60px -90px; /* estende até as bordas do .main (padding) */ z-index: -1; border-radius: 8px; overflow: hidden; pointer-events: none; background: var(--hero-base); } /* FOTO (opcional) + scrim escurecedor por cima. Setando --hero-bg-image a foto entra AQUI, atrás do scrim → cards legíveis. */ #view-home .home-bg::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-scrim), var(--hero-bg-image, none); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } /* glows dourados radiais + vinheta */ #view-home .home-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(38% 46% at 78% 12%, var(--hero-glow-1) 0%, transparent 70%), radial-gradient(46% 52% at 8% 88%, var(--hero-glow-2) 0%, transparent 72%), radial-gradient(30% 34% at 50% 46%, var(--hero-glow-3) 0%, transparent 75%), radial-gradient(120% 120% at 50% 40%, transparent 55%, var(--hero-vignette) 100%); } /* grão/textura discreta (SVG inline, sem request externo) */ #view-home .home-grain { position: absolute; inset: -56px -60px -90px; z-index: -1; pointer-events: none; opacity: var(--hero-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* cards em leve elevação/glass sobre o fundo aspiracional */ #view-home .dash-card { background: var(--card-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--card-shadow); } /* ===================================================================== TOPBAR + DRAWER MOBILE No desktop a topbar e o scrim ficam ocultos (a sidebar clássica manda). No mobile (≤900px) a sidebar vira um drawer que desliza da esquerda e a topbar fixa no topo traz a marca + hambúrguer. Estilos base aqui; o comportamento por largura está nas @media abaixo. ===================================================================== */ .topbar { display: none; } .nav-scrim { display: none; } .topbar-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--hairline-gold); border-radius: var(--radius); color: var(--sand); cursor: pointer; flex: none; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .topbar-menu:hover { border-color: var(--gold-soft); } .topbar-menu:focus-visible { outline: none; border-color: var(--gold); } .topbar-menu-bars { position: relative; display: block; width: 18px; height: 12px; } .topbar-menu-bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--gold); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease); } .topbar-menu-bars span:nth-child(1) { top: 0; } .topbar-menu-bars span:nth-child(2) { top: 5px; } .topbar-menu-bars span:nth-child(3) { top: 10px; } /* estado aberto: vira um "X" */ .app.nav-open .topbar-menu-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); } .app.nav-open .topbar-menu-bars span:nth-child(2) { opacity: 0; } .app.nav-open .topbar-menu-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); } .topbar-brand { display: flex; align-items: center; gap: 10px; } /* Na topbar o bloco de texto é de UMA linha só (18px, cap-height 15px), então o critério do lockup não pode ser copiado da sidebar: igualar os 21px da linha deixaria o símbolo miúdo dentro da barra. Aqui vale a proporção usual de assinatura horizontal de uma linha, ~1,7x o cap-height -> 26px. */ .topbar-brand .brand-mark-img { height: 26px; } .topbar-brand .brand-name { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; } /* ============ RESPONSIVO ============ */ /* --- TABLET / MOBILE: sidebar vira drawer, topbar aparece --- */ @media (max-width: 900px) { /* Layout passa a coluna única; a sidebar sai do fluxo (vira drawer). */ .app { display: block; } .topbar { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 60; padding: 12px 16px; background: var(--onyx-1); border-bottom: 1px solid var(--hairline); } /* Sidebar como drawer deslizante da esquerda */ .sidebar { position: fixed; top: 0; left: 0; z-index: 80; width: min(300px, 84vw); height: 100vh; height: 100dvh; padding: 28px 24px; gap: 30px; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; border-right: 1px solid var(--hairline); box-shadow: 0 0 60px -10px rgba(0, 0, 0, 0.6); transform: translateX(-100%); transition: transform 0.32s var(--ease); } .app.nav-open .sidebar { transform: translateX(0); } /* nav volta ao formato vertical completo dentro do drawer */ .nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; } .nav-group { flex-direction: column; margin-top: 14px; align-items: stretch; } .nav-group-label { display: block; } /* itens "em breve" reaparecem no drawer (há espaço vertical) */ .nav-item.is-soon { display: flex; } .nav-item { padding: 13px 12px; } /* alvo de toque ≥44px */ .sidebar-foot { margin-top: auto; flex-direction: column; align-items: stretch; gap: 14px; } .sidebar-foot .hairline, .sidebar-foot .foot-note { display: block; } .link-quiet { padding: 6px 0; font-size: 13px; } /* Scrim escurecedor sob o drawer aberto */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease); } .app.nav-open .nav-scrim { opacity: 1; pointer-events: auto; } /* Conteúdo ocupa a largura toda; padding enxuto */ .main { padding: 28px 20px 64px; max-width: none; } .view-head { margin-bottom: 34px; } .calc-layout { grid-template-columns: 1fr; gap: 24px; } /* Toggle de tema não fica mais fixo no canto (colidia com a topbar): entra no fluxo do drawer, largo e confortável. */ .theme-toggle { position: static; width: 100%; justify-content: center; box-shadow: none; margin-top: 4px; padding: 13px 16px; order: 99; } /* fundo aspiracional acompanha o padding menor do .main no mobile */ #view-home .home-bg, #view-home .home-grain { inset: -28px -20px -64px; } } /* --- CELULAR: empilhar grids em 1 coluna, apertar espaçamentos --- */ @media (max-width: 620px) { .main { padding: 24px 16px 56px; } #view-home .home-bg, #view-home .home-grain { inset: -24px -16px -56px; } /* Cards de departamento/cliente empilham (minmax grande estourava 360px) */ .cards-grid { grid-template-columns: 1fr; gap: 16px; } .dash-card { min-height: 0; padding: 22px 20px 20px; } /* .client-card zera o próprio padding (ver bloco CARTEIRA); quem carrega o espaçamento é o miolo, então o ajuste responsivo tem que ir nele. */ .client-card { padding: 0; } .client-card-main { padding: 22px 20px 16px; } .client-card-actions { padding: 10px 20px; } .dash-title { font-size: 22px; } /* Benchmarks empilham */ .bench-grid { grid-template-columns: 1fr; gap: 12px; } .panel { padding: 22px 18px; margin-bottom: 22px; } .panel-title { font-size: 23px; } .calc-results { grid-template-columns: 1fr; } .highlight-card { padding: 20px; } .highlight-value { font-size: 34px; } .brand-sub { display: none; } .rite-legend { gap: 12px 18px; padding: 14px 16px; } .rite-owner { white-space: normal; } .bottleneck { padding: 18px; } } /* --- TELEFONE ESTREITO (~360–400px): margens mínimas, nada corta --- */ @media (max-width: 400px) { .main { padding: 22px 14px 52px; } #view-home .home-bg, #view-home .home-grain { inset: -22px -14px -52px; } .panel { padding: 20px 15px; } .rite-card { padding: 18px 16px 16px; } .dash-card { padding: 20px 16px 18px; } .client-card { padding: 0; } .client-card-main { padding: 20px 16px 14px; } .client-card-actions { padding: 10px 16px; } } /* ===================================================================== PORTÃO DE LOGIN (overlay) — mesma identidade luxo (ônix + ouro + areia) ===================================================================== */ .auth-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 32px; background: var(--hero-base); overflow-y: auto; } .auth-gate[hidden] { display: none; } /* glows dourados sutis atrás do card, coerentes com a home */ .auth-gate::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 46% at 78% 10%, var(--hero-glow-1) 0%, transparent 70%), radial-gradient(46% 52% at 10% 92%, var(--hero-glow-2) 0%, transparent 72%), radial-gradient(120% 120% at 50% 40%, transparent 55%, var(--hero-vignette) 100%); } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--card-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--hairline-gold); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 40px 36px 34px; display: flex; flex-direction: column; gap: 16px; } /* ===================== MARCA NO CARTÃO DE LOGIN ===================== Aqui entra a ASSINATURA HORIZONTAL ("A" + ARKAD + ASSESSORIA DE MARKETING), não o símbolo isolado: é a aplicação correta da marca quando ela se apresenta sozinha, e o cartão de login é a primeira coisa que o dono vê todo dia. Centralizada, no mesmo padrão já aprovado no crm-made-modas e no crm-pink-pig: coluna, `align-items: center`, e o título/lede do cartão acompanham. LARGURA — 232px. O cartão tem 400px com 36px de padding de cada lado, o que deixa 328px úteis; 232px são ~71% disso, a proporção que dá respiro lateral sem a assinatura boiar. Com a proporção do arquivo (3,922:1) isso resulta em 59px de altura. `height: auto` mantém a proporção travada no arquivo, então não há como esticar a marca por engano. SOZINHA NO TOPO — o par "Central Arkad / Acesso restrito" saiu daqui a pedido do dono: a assinatura já diz a marca, repetir o nome logo abaixo dela era redundante. Sobrou assinatura + título + lede. Como o bloco perdeu duas linhas de texto, o respiro que era do `gap` interno virou `margin-bottom`, para a marca não colar no "Cérebro da operação". */ .auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 12px; } .auth-card > .auth-title, .auth-card > .auth-lede { text-align: center; } .auth-signature-wrap { display: block; width: 100%; } .auth-signature { width: 100%; max-width: 232px; height: auto; margin: 0 auto; display: block; } /* As duas versões existem porque a linha "ASSESSORIA DE MARKETING" muda de cor: na assinatura ônix ela é clara (#B7B1AB, some em fundo claro) e na areia é escura (#6B6560, some em fundo escuro). Cada uma vai no tema cujo fundo ela foi desenhada para enfrentar — mesma regra do símbolo. */ .auth-signature-claro { display: none; } [data-theme="light"] .auth-signature-escuro { display: none; } [data-theme="light"] .auth-signature-claro { display: block; } @media (max-width: 520px) { .auth-signature { max-width: 208px; } } .auth-title { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; margin: 4px 0 0; letter-spacing: 0.01em; } .auth-lede { font-size: 14px; color: var(--sand-dim); margin: 0; line-height: 1.55; } .auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; } .auth-field { display: flex; flex-direction: column; gap: 7px; } .auth-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sand-dim); } .auth-field input { background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--sand); font-family: var(--sans); font-size: 15px; padding: 12px 14px; letter-spacing: 0.08em; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .auth-field input:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); } .auth-submit { margin-top: 4px; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); border-radius: 2px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; padding: 13px 18px; cursor: pointer; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); } .auth-submit:hover { filter: brightness(1.08); } .auth-submit:disabled { opacity: 0.6; cursor: default; } .auth-error { margin: 0; font-size: 12px; color: var(--bad); letter-spacing: 0.04em; } .auth-foot { margin: 6px 0 0; font-size: 10px; color: var(--sand-faint); letter-spacing: 0.08em; text-align: center; } /* ===================================================================== WORKSPACE DO CLIENTE — ações + embed do OneDrive ===================================================================== */ .ws-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .ws-open-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--gold); font-family: var(--sans); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; padding: 11px 18px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease); } .ws-open-btn:hover { border-color: var(--gold); background: var(--gold-wash); transform: translateY(-1px); } .ws-note { font-size: 12px; color: var(--sand-dim); letter-spacing: 0.04em; } .ws-embed { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--onyx-2); } .ws-iframe { display: block; width: 100%; height: 620px; border: 0; background: var(--onyx-2); } .ws-embed-fallback { padding: 22px 24px; border-top: 1px solid var(--hairline); } .ws-embed-fallback p { margin: 0; font-size: 14px; color: var(--sand-dim); line-height: 1.6; } .ws-embed-fallback strong { color: var(--sand); font-weight: 500; } .ws-disconnected { border: 1px dashed var(--hairline-gold); border-radius: var(--radius); padding: 22px 24px; background: var(--gold-faint); } .ws-disconnected p { margin: 0; font-size: 14px; color: var(--sand-dim); line-height: 1.6; } .ws-disconnected code, .ws-embed-fallback code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--gold); background: var(--gold-faint); padding: 1px 6px; border-radius: 2px; } @media (max-width: 560px) { .auth-card { padding: 30px 24px 26px; } .ws-iframe { height: 460px; } } /* ===================================================================== RITO DE ONBOARDING — timeline/stepper D0 → D7 → Pós (usa só os tokens da identidade Arkad; nada hardcoded) ===================================================================== */ .rite-legend { display: flex; flex-wrap: wrap; gap: 20px 26px; margin: 0 0 34px; padding: 16px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--onyx-1); } .rite-legend-item { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-dim); } .rite-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .rite-dot.dot-arkad { background: var(--gold); } .rite-dot.dot-client { background: transparent; border: 1px solid var(--gold-soft); } .rite-dot.dot-gate { background: var(--bad); } /* Trilha vertical: marcadores à esquerda, cards à direita */ .rite { list-style: none; margin: 0 0 40px; padding: 0; position: relative; } .rite-step { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding-bottom: 26px; } .rite-step:last-child { padding-bottom: 0; } /* linha dourada conectando os marcadores */ .rite-step::before { content: ""; position: absolute; left: 35px; top: 46px; bottom: -4px; width: 1px; background: linear-gradient(180deg, var(--hairline-gold), var(--hairline)); } .rite-step:last-child::before { display: none; } .rite-marker { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--onyx-2); border: 1px solid var(--hairline-gold); } .rite-marker.is-launch { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-faint), var(--onyx-2)); } .rite-marker.is-post { border-style: dashed; border-color: var(--hairline-gold); } .rite-day { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--gold); letter-spacing: 0.02em; line-height: 1; text-align: center; } .rite-day-sep { opacity: 0.5; margin: 0 1px; } .rite-card { background: var(--onyx-1); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline-gold); border-radius: var(--radius); padding: 22px 24px 20px; } .rite-card.is-gate { border-left-color: var(--bad); } .rite-card.is-post { border-left-style: dashed; } .rite-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .rite-title { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0; letter-spacing: 0.01em; } .rite-owner { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); border: 1px solid var(--hairline-gold); border-radius: 999px; padding: 4px 11px; white-space: nowrap; } .rite-when { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sand-faint); margin: 6px 0 14px; } .rite-body { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; } .rite-line { font-size: 13.5px; color: var(--sand-dim); margin: 0; line-height: 1.55; } .rite-line strong { color: var(--sand); font-weight: 500; } .rite-tag { display: inline-block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; padding: 2px 8px; border-radius: 2px; margin-right: 8px; vertical-align: middle; } .rite-line.arkad .rite-tag { color: var(--gold); background: var(--gold-faint); border: 1px solid var(--hairline-gold); } .rite-line.client .rite-tag { color: var(--sand-dim); border: 1px solid var(--gold-soft); } /* materiais reais do cliente */ .rite-materials { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--onyx-2); } .rite-materials-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sand-faint); margin-bottom: 10px; } .rite-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rite-file { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--gold); background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; padding: 5px 10px; cursor: pointer; letter-spacing: 0.01em; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease); } .rite-file:hover { border-color: var(--gold); background: var(--gold-wash); transform: translateY(-1px); } .rite-file:focus-visible { outline: none; border-color: var(--gold); } .rite-file[aria-disabled="true"] { cursor: default; opacity: 0.55; } .rite-file[aria-disabled="true"]:hover { transform: none; background: var(--gold-faint); border-color: var(--hairline-gold); } .rite-deliver, .rite-gate { font-size: 12.5px; color: var(--sand-dim); margin: 8px 0 0; line-height: 1.5; } .rite-deliver span, .rite-gate span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sand-faint); margin-right: 8px; } .rite-gate.ok span { color: var(--gold); } .rite-gate.critical { color: var(--sand); } .rite-gate.critical span { color: var(--bad); } @media (max-width: 700px) { .rite-step { grid-template-columns: 46px 1fr; gap: 14px; padding-bottom: 22px; } .rite-step::before { left: 22px; top: 38px; } .rite-marker { width: 46px; height: 46px; } .rite-day { font-size: 12px; } .rite-card-head { flex-direction: column; gap: 8px; } .rite-card { padding: 20px 18px 18px; } /* chips de material com alvo de toque confortável, quebram linha */ .rite-file { padding: 8px 12px; font-size: 12px; } .rite-file-list { gap: 8px; } } /* ===================================================================== PIPELINE / CRM — Kanban manual (mesma identidade Arkad, só tokens) ===================================================================== */ .pipe-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; } .pipe-add-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--on-gold); border: 1px solid var(--gold); border-radius: 2px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; padding: 12px 20px; cursor: pointer; transition: filter 0.3s var(--ease), transform 0.3s var(--ease); } .pipe-add-btn span { font-size: 16px; line-height: 1; } .pipe-add-btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .pipe-count-note { font-size: 12px; color: var(--sand-dim); letter-spacing: 0.04em; } /* Seletor de linha de CRM. Mesmos tokens do campo da ficha do lead (.lead-field select), pra não nascer um estilo novo só pra ele. */ .pipe-line-picker { display: inline-flex; align-items: center; gap: 10px; } .pipe-line-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-dim); } .pipe-line-select { background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--sand); font-family: var(--sans); font-size: 13px; padding: 9px 12px; cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .pipe-line-select:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); } .pipe-line-fixed { font-size: 13px; color: var(--sand); letter-spacing: 0.04em; border-bottom: 1px solid var(--hairline-gold); padding-bottom: 2px; } .pipe-line-warn { font-size: 12px; color: var(--sand-dim); letter-spacing: 0.04em; } /* --------------------------------------------------------------------- FILTRO POR DATA DE ENTRADA — faixa entre a barra e o Kanban. Desenhado pro celular primeiro: em 390px os três atalhos (Tudo, Esta semana, Este mês) cabem numa linha e o select de mês desce pra segunda, ocupando a largura toda. Alvos de 40px de altura, que é o mínimo que o polegar acerta. Os 12 meses são um é widget NATIVO: sem color-scheme ele desenha o ícone escuro e some no tema escuro. Escopo só neste input, não no documento inteiro — não é mudança de design system. */ .lead-appt-input { color-scheme: dark; } [data-theme="light"] .lead-appt-input { color-scheme: light; } .lead-appt-save { background: var(--gold); border: 1px solid var(--gold); border-radius: 2px; color: var(--on-gold); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 15px; cursor: pointer; transition: filter 0.3s var(--ease); } .lead-appt-save:hover { filter: brightness(1.08); } .lead-appt-save:disabled { opacity: 0.5; cursor: default; } .lead-appt-msg { margin: 9px 0 0; font-size: 12px; line-height: 1.45; color: var(--sand-dim); } .lead-appt-msg.is-warn { color: var(--warn); } .lead-appt-msg.is-ok { color: var(--gold); } /* --------------------------------------------------------------------- DESFECHO DA REUNIÃO (V22) — "compareceu?" em um clique. Pedido do dono: "É só colocar no card, uma opção de clicar se compareceu, com um click você já fica sabendo". 🔴 A DECISÃO VISUAL QUE MANDA AQUI: no dia em que isto entrou existiam NOVE reuniões passadas sem desfecho, e todas ganham a pergunta ao mesmo tempo. Medido antes de desenhar: elas caem em 4 colunas diferentes (Agendado 3, Cliente 3, Qualificado 2, DESqualificado 1), no máximo 3 por coluna. Por isso o bloco é MUDO, não alarme: sem cor de alerta, sem fundo chapado, sem ícone gritando. Só um filete dourado à esquerda (a mesma cor que o resto da tela já usa pra "requer você") e dois botões pequenos. Um banner vermelho em 3 cards seguidos empilharia mais peso visual que o quadro inteiro e o dono aprenderia a ignorar — que é o fim de todo campo que ninguém preenche. O bloco também não empurra o card pra baixo mais que uma linha de nota: ele ocupa duas linhas curtas e some pra sempre depois do clique. É cobrança que se apaga sozinha. --------------------------------------------------------------------- */ /* A PERGUNTA — só existe em reunião que já passou e ainda não tem desfecho. */ .lead-card-desfecho { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-left: 2px solid var(--hairline-gold); background: var(--gold-faint); border-radius: 0 2px 2px 0; } .lead-card-desfecho-q { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sand-dim); line-height: 1.3; } .lead-card-desfecho-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Os dois botões de peso igual: "Compareceu" e "Não veio" são respostas simétricas, e destacar uma enviesaria o dado que o relatório vai usar. */ .lead-desf-btn { background: transparent; border: 1px solid var(--hairline-gold); border-radius: 2px; color: var(--gold); font-family: var(--sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; line-height: 1; cursor: pointer; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease); } .lead-desf-btn:hover { background: var(--gold-wash); border-color: var(--gold); } .lead-desf-btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } .lead-desf-btn:disabled { opacity: 0.45; cursor: default; } /* "Remarcada" é a TERCEIRA opção e tem que parecer terceira: sem moldura, texto pequeno. Acontece, precisa existir, mas não disputa o olho com as duas respostas que o relatório de comparecimento realmente usa. */ .lead-desf-link { background: none; border: none; padding: 4px 2px; color: var(--sand-faint); font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s var(--ease); } .lead-desf-link:hover { color: var(--sand-dim); } .lead-desf-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } .lead-desf-link:disabled { opacity: 0.45; cursor: default; } /* A RESPOSTA — depois de marcado. Uma linha discreta, no peso de metadado, com o "corrigir" ao lado: errar o toque num card é normal e a saída tem que estar à mão, não escondida na ficha. */ .lead-card-desfecho-feito { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; line-height: 1.3; } .lead-desf-selo { display: inline-flex; align-items: center; gap: 5px; color: var(--sand-dim); } .lead-desf-selo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sand-faint); flex: none; } /* Realizada é o desfecho bom: ganha o dourado da casa. Não veio fica em âmbar (o mesmo --warn dos avisos) e remarcada fica neutra — remarcar não é falha de ninguém. Três estados, três pesos, nenhum vermelho: no-show é dado pra decidir, não bronca pro time. */ .lead-desf-selo.is-realizada { color: var(--gold); } .lead-desf-selo.is-realizada::before { background: var(--gold); } .lead-desf-selo.is-nao_compareceu { color: var(--warn); } .lead-desf-selo.is-nao_compareceu::before { background: var(--warn); } .lead-desf-selo.is-remarcada { color: var(--sand-dim); } .lead-desf-selo.is-remarcada::before { background: var(--sand-faint); } .lead-desf-corrigir { background: none; border: none; padding: 2px; color: var(--sand-faint); font-family: var(--sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s var(--ease); } .lead-desf-corrigir:hover { color: var(--sand-dim); } .lead-desf-corrigir:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } /* O MESMO componente na FICHA do lead, dentro do bloco Reunião. Mesmas classes de botão (herdadas acima) pra card e ficha nunca divergirem de aparência — é a exigência de "coerente nos dois". A diferença é só o respiro e a linha de autoria, que no card seria ruído e na ficha é auditoria. */ .lead-appt-desfecho { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); } .lead-appt-desfecho[hidden] { display: none; } .lead-appt-desfecho-q { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sand-dim); margin: 0 0 7px; } .lead-appt-desfecho-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lead-appt-desfecho-autor { font-size: 11px; color: var(--sand-faint); margin: 6px 0 0; line-height: 1.4; } /* --------------------------------------------------------------------- TAGS (V20) — a etiqueta colorida. UM componente só (.lead-tag) usado em QUATRO lugares: no card do funil, na ficha do lead, na faixa de filtro e no editor. Um componente e não quatro porque a etiqueta tem que parecer a MESMA coisa nos quatro; variação de forma entre eles faria o dono achar que são recursos diferentes. 🔴 CONTRASTE É REQUISITO, NÃO GOSTO. A cor não sai daqui livre: vem sempre de um par --tag--bg / --tag--fg, definido nos TRÊS temas lá em cima e MEDIDO por scripts/prova-contraste-tags.mjs. Os 8 pares passam 4,5:1 nos três temas, o pior deles em 5,96:1. Não existe caminho no produto pra criar uma etiqueta fora dessa lista: o e desenhada pelo sistema, e no Windows ela nasce BRANCA. Como o select define color clara (var(--sand)), as opcoes ficavam texto claro sobre branco: invisiveis, so aparecia a que estava sob o mouse. Precisa pintar a option explicitamente, nos tres temas. Reportado pelo Chefe em 31/07 com print do formato do Estudio. */ select option, select optgroup { background-color: var(--onyx-1); color: var(--sand); } /* ===================================================================== CONVERSAS DO SDR — aba ao lado do Quadro --------------------------------------------------------------------- Nada de paleta nova: tudo sai dos mesmos tokens do Kanban e da ficha do lead (--gold, --sand, --hairline, --card-bg). Os três temas herdam de graça porque não há uma cor fixa escrita aqui. ===================================================================== */ .pipe-tabs { display: flex; gap: 8px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); } .pipe-tab { background: transparent; color: var(--sand-dim); border: 1px solid var(--hairline); border-radius: 999px; font-family: var(--sans); font-size: 12px; font-weight: var(--ui-weight); letter-spacing: 0.06em; padding: 8px 18px; cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } .pipe-tab:hover { color: var(--sand); border-color: var(--hairline-gold); } .pipe-tab.is-active { background: var(--gold-faint); border-color: var(--gold-soft); color: var(--gold); font-weight: 600; } /* Duas colunas: lista à esquerda, conversa aberta à direita. */ .pipe-conv { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 26px; align-items: start; } .conv-col { min-width: 0; } .conv-col-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sand-faint); margin: 0 0 12px; } /* Aviso do topo: a contagem de conversas sem resposta. */ .conv-alert { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--hairline-gold); border-left: 2px solid var(--gold); border-radius: var(--radius); background: var(--gold-faint); color: var(--sand); font-size: 13px; line-height: 1.45; } .conv-alert.is-ok { border-left-color: var(--ok); color: var(--sand-dim); } .conv-list { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; } .conv-estado { font-size: 13px; color: var(--sand-dim); margin: 0; padding: 10px 2px; } .conv-item { display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; background: var(--card-bg); border: 1px solid var(--hairline); border-left: 2px solid transparent; border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-family: var(--sans); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); } .conv-item:hover { border-color: var(--hairline-gold); transform: translateX(1px); } .conv-item.is-aberta { border-color: var(--gold-soft); border-left-color: var(--gold); } .conv-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .conv-item-nome { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bolinha dourada = ninguém respondeu ainda. */ .conv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; } .conv-item-hora { font-size: 11px; color: var(--sand-faint); flex: 0 0 auto; } .conv-item-previa { font-size: 12.5px; color: var(--sand-dim); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-item-tag { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); } /* Conversa aberta */ .conv-empty { font-size: 13px; color: var(--sand-dim); margin: 0; } .conv-thread-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; } .conv-thread-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--hairline); } .conv-thread-nome { font-size: 15px; font-weight: 600; color: var(--sand); } .conv-thread-fone { font-size: 13px; color: var(--sand-dim); } .conv-thread-ficha { margin-left: auto; background: transparent; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 2px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; } .conv-thread-ficha:hover { background: var(--gold-faint); } .conv-thread { display: flex; flex-direction: column; gap: 10px; padding: 18px; max-height: 62vh; overflow-y: auto; } .conv-bolha { max-width: 78%; padding: 10px 13px; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--onyx-2); } .conv-bolha.is-in { align-self: flex-start; } .conv-bolha.is-out { align-self: flex-end; background: var(--gold-faint); border-color: var(--hairline-gold); } .conv-bolha-corpo { font-size: 14px; line-height: 1.5; color: var(--sand); word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; } .conv-bolha-pe { display: flex; align-items: center; gap: 7px; margin-top: 5px; } .conv-bolha-hora { font-size: 11px; color: var(--sand-faint); } /* ---- MÍDIA NA BOLHA ---------------------------------------------------- Serve a timeline da ficha E a conversa aberta: mesmo markup, mesmo CSS. Os estados 'baixando' e 'não recuperado' têm desenho PRÓPRIO de propósito, pra ninguém confundir com anexo entregue. */ .lead-md { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; white-space: normal; } .lead-md-tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim); border: 1px solid var(--hairline); border-radius: 2px; padding: 3px 8px; } .lead-md-nota { font-size: 12px; color: var(--sand-dim); font-style: italic; } .lead-md.is-falhou .lead-md-tag { border-color: var(--bad); color: var(--bad); } .lead-md.is-falhou .lead-md-nota { color: var(--bad); font-style: normal; } .lead-md-audio { width: 100%; max-width: 300px; height: 38px; } .lead-md-dur { font-size: 12px; color: var(--sand-dim); font-variant-numeric: tabular-nums; } .lead-md-img { display: block; margin-top: 6px; max-width: 240px; border-radius: var(--radius); overflow: hidden; } .lead-md-img img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius); } .lead-md-img.is-sticker { max-width: 128px; } .lead-md-img.is-sticker img { border-color: transparent; } .lead-md-video { width: 100%; max-width: 300px; border-radius: var(--radius); border: 1px solid var(--hairline); } .lead-md-doc { display: inline-flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 10px 13px; border: 1px solid var(--hairline-gold); border-radius: var(--radius); background: var(--gold-faint); text-decoration: none; max-width: 100%; } .lead-md-doc:hover { border-color: var(--gold-soft); } .lead-md-doc-nome { font-size: 13px; color: var(--sand); font-weight: 600; overflow-wrap: anywhere; } .lead-md-doc-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-dim); } /* ---- SPEED TO LEAD ------------------------------------------------------ Fica no topo do módulo Pipeline, entre o seletor de linha e o Kanban, e vale pras duas abas (Quadro e Conversas do SDR). O `grid-column` continua aqui porque não custa nada fora de grid e evita quebra se o bloco voltar pra dentro do .pipe-conv. Dois relógios de mesmo tamanho (nenhum é "o certo", eles respondem perguntas diferentes) e a fila em destaque ao lado. Só token, nenhuma cor literal: os três temas herdam sozinhos. */ .stl { grid-column: 1 / -1; margin: 0 0 22px; } .stl[hidden] { display: none; } .stl-title { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--sand); margin: 0 0 4px; letter-spacing: 0.01em; } /* O rótulo da LINHA em ouro: é o que separa "meu tempo" de "o tempo do SDR". Ler o número errado é pior que não ler número nenhum. */ .stl-title-linha { color: var(--gold); font-weight: 600; } .stl-sub { font-size: 13px; color: var(--sand-dim); margin: 0 0 16px; line-height: 1.45; } .stl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr); gap: 14px; align-items: stretch; } .stl-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 16px 18px 14px; min-width: 0; } .stl-card-rot { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-dim); margin: 0 0 3px; } .stl-card-nota { font-size: 11.5px; color: var(--sand-faint); margin: 0 0 10px; line-height: 1.35; } .stl-card-num { font-family: var(--serif); font-size: 40px; font-weight: 600; color: var(--gold); margin: 0 0 8px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } /* Sem resposta pra medir NÃO vira "0min": vira frase. Número grande zerado mente; frase pequena não. */ .stl-card-num.is-vazio { font-size: 15px; font-weight: var(--ui-weight); color: var(--sand-dim); font-family: var(--sans); line-height: 1.35; letter-spacing: 0; } .stl-card-base { font-size: 11.5px; color: var(--sand-dim); margin: 0; line-height: 1.35; } .stl-card-base .stl-magro { color: var(--warn); } .stl-fila { background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-left: 2px solid var(--gold); border-radius: var(--radius); padding: 16px 18px 14px; min-width: 0; } /* Fila zerada é boa notícia: o filete vira verde em vez de continuar pedindo socorro em ouro. */ .stl-fila.is-ok { border-left-color: var(--ok); } .stl-fila-num { font-family: var(--serif); font-size: 27px; font-weight: 600; color: var(--gold); margin: 0 0 7px; line-height: 1.1; font-variant-numeric: tabular-nums; } .stl-fila-txt { font-size: 12.5px; color: var(--sand); margin: 0; line-height: 1.5; } /* QUEBRA POR CRIATIVO. Mobile primeiro: uma linha por criativo, id à esquerda e os dois números à direita, sem tabela (tabela em 360px vira rolagem lateral). Só token de cor, nenhuma cor literal. */ .stl-ads { margin: 14px 0 0; } .stl-ads[hidden] { display: none; } .stl-ads-rot { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-dim); margin: 0 0 7px; } .stl-ads-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } /* O
  • virou contêiner: linha do criativo em cima, painel aberto embaixo. Quem faz o grid de colunas agora é .stl-ad-linha. */ .stl-ad { display: block; padding: 8px 11px 8px 10px; background: var(--card-bg); border: 1px solid var(--hairline); border-left: 2px solid var(--hairline); border-radius: var(--radius); min-width: 0; } .stl-ad-id { font-size: 12.5px; color: var(--sand); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; cursor: help; } .stl-ad-leads { font-size: 12.5px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } /* No celular a contagem de respondidos cai numa segunda linha alinhada à direita, em vez de espremer três colunas em 360px. */ .stl-ad-resp { grid-column: 2; font-size: 11.5px; color: var(--sand-dim); text-align: right; white-space: nowrap; } /* TROUXE LEAD E NINGUÉM RESPONDEU. Filete em --warn mais a palavra escrita: quem não distingue cor continua sendo avisado pelo texto. */ .stl-ad.is-mudo { border-left-color: var(--warn); } .stl-ad.is-mudo .stl-ad-resp { color: var(--warn); font-weight: 600; } /* Grupo sem cartão do WhatsApp: é "não sei de onde veio", não é criativo. Fica no fim e em tom apagado pra não competir com os anúncios reais. */ .stl-ad.is-anonimo .stl-ad-id { color: var(--sand-dim); font-style: italic; } .stl-ad.is-anonimo .stl-ad-leads { color: var(--sand-dim); } /* Da largura de tablet pra cima cabem as três colunas na mesma linha. */ @media (min-width: 561px) { .stl-ad-resp { grid-column: auto; min-width: 8.5em; } } /* LINHA DO CRIATIVO. Vira grid de 3 colunas no tablet pra cima; no celular o rótulo ocupa a linha inteira e os números descem. Só token de cor. */ .stl-ad-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; min-width: 0; } .stl-ad-rot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; min-width: 0; } /* O rótulo com link. Sublinhado discreto: link tem que parecer link, mas não pode gritar mais que o número de leads, que é o que o Chefe lê primeiro. */ .stl-ad-id.is-link { color: var(--gold); cursor: pointer; text-decoration: underline; text-decoration-color: var(--hairline-gold); text-underline-offset: 3px; } .stl-ad-id.is-link:hover, .stl-ad-id.is-link:focus-visible { text-decoration-color: var(--gold); } .stl-ad-ext { font-size: 10px; margin-left: 3px; vertical-align: super; } /* SEM LINK NÃO É ERRO. Nota apagada, mesma família dos outros rótulos secos, sem ícone de alerta e sem --warn: é ausência de dado, não é problema. */ .stl-ad-semlink { font-size: 10.5px; color: var(--sand-faint); font-style: italic; white-space: nowrap; cursor: help; } /* SEM LEAD HÁ X. Indício, nunca status: a Central não fala com a Meta e não sabe se o anúncio roda. A frase escrita já é o aviso; --warn só reforça. */ .stl-ad-frio { font-size: 10.5px; color: var(--sand-faint); white-space: nowrap; cursor: help; } .stl-ad-frio.is-frio { color: var(--warn); font-weight: 600; } .stl-ad.is-frio { border-left-color: var(--warn); } /* "N leads" é botão. Alvo de toque de 32px no celular, sem virar caixa. */ .stl-ad-leads { appearance: none; background: none; border: 0; padding: 4px 0 4px 6px; margin: 0; font: inherit; font-size: 12.5px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; cursor: pointer; min-height: 32px; } .stl-ad-leads:hover, .stl-ad-leads:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .stl-ad-seta { display: inline-block; width: 1em; text-align: center; opacity: 0.65; margin-left: 4px; } .stl-ad.is-aberto { border-left-color: var(--gold); } .stl-ad-det { margin: 9px 0 2px; padding-top: 9px; border-top: 1px solid var(--hairline); } .stl-ad-sub { font-size: 11px; color: var(--sand-faint); margin: 0 0 7px; line-height: 1.45; } .stl-ad-vazio { font-size: 11.5px; color: var(--sand-faint); margin: 7px 0 0; line-height: 1.45; } /* SÉRIE DIÁRIA. Barras em div, sem canvas. Rola de lado quando a campanha é longa, em vez de espremer 40 dias em 320px e virar borrão. */ .stl-serie { display: flex; align-items: flex-end; gap: 3px; height: 62px; overflow-x: auto; padding-bottom: 2px; } .stl-serie-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 22px; flex: 0 0 auto; cursor: help; } .stl-serie-bar { width: 100%; background: var(--hairline-gold); border-radius: 2px 2px 0 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 3px; } .stl-serie-resp { width: 100%; background: var(--gold); border-radius: 2px 2px 0 0; } .stl-serie-dia { font-size: 9px; color: var(--sand-faint); margin-top: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* LISTA DE LEADS DO CRIATIVO. Um cartão por pessoa, empilhado: no celular é assim que se lê nome, telefone e relógio sem rolar de lado. */ .stl-leads { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } .stl-lead { padding: 7px 9px; border: 1px solid var(--hairline); border-left: 2px solid var(--hairline); border-radius: var(--radius); background: var(--card-bg); min-width: 0; } .stl-lead.is-mudo { border-left-color: var(--warn); } .stl-lead-top { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; } .stl-lead-nome { font-size: 12.5px; color: var(--sand); font-weight: 600; overflow-wrap: anywhere; } .stl-lead-tel { font-size: 11.5px; color: var(--sand-dim); font-variant-numeric: tabular-nums; } .stl-lead-meta { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 2px 9px; } .stl-lead-quando, .stl-lead-etapa { font-size: 11px; color: var(--sand-faint); } .stl-lead-etapa { color: var(--sand-dim); } .stl-lead-resp { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 2px 9px; } .stl-lead-ok { font-size: 11px; color: var(--sand-dim); } .stl-lead-mudo { font-size: 11px; color: var(--warn); font-weight: 600; } .stl-lead-nota { font-size: 10.5px; color: var(--sand-faint); font-style: italic; } @media (min-width: 561px) { .stl-ad-linha { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 16px; } } .stl-nota { font-size: 12px; color: var(--sand-faint); margin: 14px 0 0; line-height: 1.5; } .stl-nota[hidden] { display: none; } /* Tablet: os dois relógios dividem a linha, a fila desce inteira embaixo. */ @media (max-width: 900px) { .stl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stl-fila { grid-column: 1 / -1; } } /* Celular: os três empilham, um por linha, e o número encolhe o suficiente pra não estourar a caixa em 320px. */ @media (max-width: 560px) { .stl-grid { grid-template-columns: 1fr; gap: 12px; } .stl-card, .stl-fila { padding: 14px 15px 12px; } .stl-card-num { font-size: 34px; } .stl-fila-num { font-size: 23px; } } /* Celular: uma coluna. A lista vem primeiro (é a pergunta "quem falou"), a conversa aberta desce logo abaixo. */ @media (max-width: 900px) { .pipe-conv { grid-template-columns: 1fr; gap: 20px; } .conv-list { max-height: none; } .conv-thread { max-height: 70vh; } .conv-bolha { max-width: 88%; } .pipe-tabs { overflow-x: auto; } .pipe-tab { white-space: nowrap; } } /* =================================================================== CONTATOS e OPORTUNIDADES — as duas visões em lista do Pipeline. Reusa .table-scroll + .grid-table (a mesma tabela do resto da casa), então aqui só vive o que é próprio das listas: a barra de filtro, a célula vazia, o botão de ir pro funil e o rodapé de corte. Mobile primeiro: a tabela rola sozinha dentro do .table-scroll e a barra de filtro quebra em coluna, sem estourar a largura da tela. =================================================================== */ .pipe-lista { display: block; } .lista-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; } .lista-busca { flex: 1 1 260px; min-width: 0; background: var(--gold-faint); border: 1px solid var(--hairline); border-radius: 8px; color: var(--sand); font-family: var(--sans); font-size: 13px; padding: 10px 12px; } .lista-busca::placeholder { color: var(--sand-faint); } .lista-busca:focus { outline: none; border-color: var(--hairline-gold); } .lista-sel { background: var(--gold-faint); border: 1px solid var(--hairline); border-radius: 8px; color: var(--sand); font-family: var(--sans); font-size: 13px; padding: 10px 12px; max-width: 100%; } .lista-sel:focus { outline: none; border-color: var(--hairline-gold); } .lista-total { margin-left: auto; color: var(--sand-faint); font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .lista-tab { min-width: 760px; } .lista-tab td { white-space: nowrap; } .lista-cel-nome { color: var(--sand); font-weight: 500; } .lista-cel-valor { font-variant-numeric: tabular-nums; } /* Traço de célula sem dado. Cursor de ajuda porque o motivo está no title. */ .lista-vazia { color: var(--sand-faint); cursor: help; } .lista-ir { background: transparent; border: 1px solid var(--hairline-gold); border-radius: 999px; color: var(--gold); cursor: pointer; font-family: var(--sans); font-size: 11px; letter-spacing: 0.06em; padding: 6px 14px; white-space: nowrap; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .lista-ir:hover { background: var(--gold-faint); } .lista-vazio { color: var(--sand-dim); font-family: var(--sans); font-size: 13px; padding: 22px 4px; } .lista-rodape { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 4px 4px; } .lista-corte { color: var(--sand-faint); font-family: var(--sans); font-size: 12px; } .lista-mais { background: transparent; border: 1px solid var(--hairline); border-radius: 999px; color: var(--sand-dim); cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; padding: 7px 18px; } .lista-mais:hover { color: var(--sand); border-color: var(--hairline-gold); } @media (max-width: 720px) { .lista-filtros { gap: 8px; } .lista-busca, .lista-sel { flex: 1 1 100%; } .lista-total { margin-left: 0; } } /* ===================================================================== QUADRO ATÉ O FIM DA JANELA — 06/08 --------------------------------------------------------------------- Reclamação com print: as colunas do Kanban saíam cortadas e sobrava espaço morto embaixo. A causa não era o board, era o que vinha ANTES dele: título gigante, lede de quatro linhas, barra de abas e barra de linha comiam cerca de um terço da altura, o quadro começava lá embaixo e a PÁGINA inteira rolava — então o corte acontecia no meio dos cards. O conserto tem duas partes: 1. o cabeçalho encolheu (.view-head-enxuta): a lede virou uma linha e o display baixou de clamp(34px..52px) pra clamp(26px..36px); 2. a view do Pipeline (.view-tela-cheia) virou uma COLUNA FLEX que ocupa a altura que sobra, e o `.kanban` dentro dela pega o resto. Quem rola agora é a pilha de cards de cada coluna, por dentro. 🔴 A rolagem HORIZONTAL das colunas continua intacta: nada aqui toca no `overflow-x: auto` nem no `grid-auto-flow: column` do `.kanban`. E nada aqui é largura fixa, então o piso de 360px do projeto segue valendo. 🔴 No CELULAR isto não muda nada de propósito. A altura vem de `.main` ser esticado pelo `.app { min-height: 100vh }` do desktop; abaixo de 901px o `.app` vira `display:block`, `.main` volta a ter altura de conteúdo e o quadro cresce como sempre cresceu, com a página rolando. Nenhum `100vh` escrito à mão, nenhuma conta com a altura da topbar, nenhum `dvh` pra dar errado com a barra do navegador do celular. ===================================================================== */ /* `.main` é o item de grid que o `.app` estica até 100vh no desktop. Virar coluna flex é o que permite a view ativa herdar essa altura sem nenhum número mágico. Só a view marcada cresce; as outras seguem com altura de conteúdo, exatamente como antes. Os `.lead-modal` são position:fixed, ficam fora do fluxo e não viram item flex. */ .main { display: flex; flex-direction: column; } .view-tela-cheia.is-active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* sem isto o flex item nunca encolhe abaixo do conteúdo */ } /* Cabeçalho enxuto. Vale pras três views novas (Pipeline, Contatos, Oportunidades): ele já sabe o que é cada tela, o espaço vale mais. */ .view-head-enxuta { margin-bottom: 20px; } .view-head-enxuta .display { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 10px; } .view-head-enxuta .lede { font-size: 14px; } .view-head-enxuta .back-btn { margin-bottom: 16px; } .view-tela-cheia .pipe-tabs { margin-bottom: 14px; padding-bottom: 12px; } .view-tela-cheia .pipe-toolbar { margin-bottom: 14px; } /* O quadro pega toda a altura que sobrou. `min-height: 0` de novo pelo mesmo motivo: item flex não encolhe sozinho. */ .view-tela-cheia .kanban { flex: 1 1 auto; min-height: 0; } /* A COLUNA não estica além da faixa e não rola sozinha: quem rola é a pilha de cards lá dentro, pra o cabeçalho da coluna (nome da etapa e contagem) ficar fixo enquanto o operador desce a lista. `max-height: 100%` é inerte no celular de propósito: percentual contra pai de altura indefinida não resolve, então lá a coluna cresce como sempre cresceu. */ .view-tela-cheia .kanban-col { max-height: 100%; } .view-tela-cheia .kanban-cards { overflow-y: auto; min-height: 0; } /* 🔴 O ÚNICO ponto que mudaria o CELULAR fica trancado no desktop. `.kanban-col { min-height: 220px }` é o piso que dá corpo a uma coluna vazia. Com faixa de altura fixa esse piso forçaria a linha do grid a 220px em janela baixa e o quadro voltaria a estourar — mas no celular não existe faixa fixa (o .app vira display:block e a página rola), e zerar o piso lá só encolheria coluna vazia sem motivo nenhum. Então zera só onde faz diferença. */ @media (min-width: 901px) { .view-tela-cheia .kanban-col { min-height: 0; } } /* As outras duas abas do módulo herdam a mesma faixa: sem isto, "Conversas do SDR" e "Speed to lead" apareceriam grudadas no topo de uma view alta, com um vão morto embaixo — o defeito que acabou de ser corrigido. */ .view-tela-cheia .pipe-conv, .view-tela-cheia .pipe-stl { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* ===================================================================== O RESPIRO DE RODAPÉ DO `.main` — 06/08 (2ª volta na MESMA queixa) --------------------------------------------------------------------- Queixa: "os cards não vão até o final da página". A volta anterior fez a view virar coluna flex e o `.kanban` esticar — e aquilo FUNCIONOU: o quadro passou a ocupar toda a ÁREA ÚTIL. O que ninguém tinha medido é que a área útil termina 90px antes do fim da janela, por causa do `padding: 56px 60px 90px` do `.main`. O quadro esticava até o fim do que existia pra ele, e sobrava exatamente o padding. Por isso ele usou a palavra "margem": era padding, e era o único espaço morto de verdade. A CADEIA INTEIRA, medida no CSS, no desktop (>=901px), Pipeline aberto: html, body sem altura, sem padding, sem margem → 0 .app min-height:100vh + grid: a linha auto estica → 100vh .main item de grid esticado (align-items:stretch) padding-top 56px → topo padding-bottom 90px ← 🔴 ESPAÇO MORTO, é este .view-tela-cheia.is-active flex:1 1 auto, sem margem → 0 .kanban flex:1 1 auto → pega o resto padding-bottom 12px ← calha da barra de rolagem lateral. É função, fica. .kanban-col max-height:100%; min-height zerado acima de 901px padding-bottom 18px ← respiro interno da coluna, chrome do card. Fica. .kanban-cards flex:1 → preenche a coluna, não sobra nada Conferido também o que NÃO estava comendo altura: `.view` não tem margin-bottom; `.view.is-active` só anima opacidade/translate; a `.topbar` é display:none acima de 900px (não ocupa linha nenhuma); o `.toast` é position:fixed, fora do fluxo. E o `#view-home .home-bg` tem `inset: -56px -60px -90px` casado com o padding do `.main` — a home NÃO é view de altura cheia, não recebe a classe nova, o padding dela não muda e o casamento continua de pé. O CONSERTO: `.main` recebe a classe `main-tela-cheia` quando a view ativa é uma `.view-tela-cheia`, e só nessa condição o respiro de rodapé zera. Nas outras views (home, financeiro, tarefas, clientes...) os 90px seguem iguais, porque lá a página rola e o respiro é o que impede o conteúdo de encostar na borda. 🔴 CLASSE E NÃO `:has()`: `.main:has(> .view-tela-cheia.is-active)` resolveria sem uma linha de JS, e o Chrome dele suporta. Classe ganhou por ser estado explícito: dá pra provar em harness sem motor de layout, dá pra inspecionar, e não depende de suporte a seletor. O JS lê a PRÓPRIA classe da view, não uma lista de nomes — tela nova de altura cheia entra sozinha, sem tocar em JS nem em CSS. 🔴 SÓ ACIMA DE 901px: a faixa de altura cheia só existe no desktop. Abaixo disso o `.app` vira display:block, `.main` volta a ter altura de conteúdo e a página rola; ali o respiro de rodapé é o que impede o quadro de encostar na borda inferior. Zerar lá seria estragar o celular pra consertar o desktop. 🔴 100vh / 100dvh: nenhuma altura nova foi escrita aqui, só um padding mudou. O `min-height:100vh` do `.app` é o de sempre e não governa o celular (lá o `.app` é display:block e a altura vem do conteúdo), então a barra de endereço do iPhone, que muda a altura visível, não alcança esta mudança. Onde `dvh` importava de verdade — a sidebar-drawer do celular, que com 100vh puro deixaria o rodapé "Sair" abaixo da dobra — o par `height:100vh; height:100dvh` já estava no arquivo desde antes, e continua sendo o padrão da casa: declara vh primeiro, dvh depois, quem não entende dvh fica com o vh. ===================================================================== */ /* ===================================================================== LARGURA: o quadro tem que acompanhar a janela. Queixa: "quando eu tiro o zoom pra 80% ele não acompanha". Diminuir o zoom aumenta a viewport em px CSS; o teto de 1180px não aumenta junto, então quanto menor o zoom, mais vazio sobra à direita. MEDIDO em Chromium headless, view Pipeline, não deduzido: viewport antes depois 1280x604 .main 1180, sobra -164 🔴 .main 1016, sobra 0 1600x755 .main 1180, sobra 156 .main 1336, sobra 0 1920x900 .main 1180, sobra 476 .main 1656, sobra 0 O -164 de 1280 é defeito que já existia: `.main` é item do grid do `.app` e item de grid nasce com `min-width:auto`, que vira "não encolho abaixo do meu min-content". O min-content do Pipeline passa dos 1016px disponíveis, a faixa `1fr` esticava até bater no teto de 1180 e o `.main` vazava 164px pra fora da janela. Como o `body` tem `overflow-x:hidden`, isso não virava barra de rolagem: virava cabeçalho da tela (o eyebrow e o `.view-head`) fora do alcance, sumindo sem avisar. `min-width:0` é o que conserta, e é ele que também destrava o crescimento acima. 🔴 O PAR É OBRIGATÓRIO. Só tirar o teto, sem `min-width:0`, não resolve: a faixa continua presa ao min-content e o `.main` transborda. E só `min-width:0`, sem tirar o teto, conserta o 1280 mas deixa os 156px e 476px de vazio em 1600 e 1920 (medido: candidato A da bateria). `max-width:100%` em vez de `none`: medi os dois e dão o MESMO número nas três larguras (sobra 0, zero transbordo). Fica o `100%` porque ele ainda prende o `.main` na largura da área do grid se um dia alguém devolver um `min-width` por cima; `none` não prende em nada. 🔴 `.app { min-width: 0 }` NÃO entrou: medi com e sem, resultado idêntico nas três larguras nos dois fronts. O `.app` é bloco filho do body, não é item de flex nem de grid, então o `min-width:auto` dele já vale 0. Linha que não muda medição não entra no arquivo. 🔴 SÓ NAS TELAS DE ALTURA CHEIA (Pipeline, Contatos, Oportunidades). As outras views são texto, e ali o teto de 1180px é conforto de leitura: linha de 1656px de texto corrido é pior, não melhor. Home, Financeiro, Tarefas e companhia seguem em 1180px, sem uma linha de mudança. 🔴 SÓ ACIMA DE 901px, dentro da mesma media query do respiro de rodapé. No celular o `.app` é display:block, o `.main` já ocupa a largura toda e não existe faixa de grid pra encolher: nada muda lá. ROLAGEM LATERAL DAS COLUNAS INTACTA: o `.kanban` mantém `overflow-x:auto` e continua rolando por dentro. O que muda é que sobra menos pra rolar, porque cabe mais coluna na tela (medido em 1600: scrollWidth-clientWidth caiu de 352px pra 196px; em 1920 chegou a 0, que é o quadro inteiro visível de uma vez). ===================================================================== */ @media (min-width: 901px) { /* Especificidade 0,2,0 contra 0,1,0 da regra base do `.main`: ganha por peso, não por ordem no arquivo, e sem !important. */ .main.main-tela-cheia { padding-bottom: 0; max-width: 100%; min-width: 0; } } /* --------------------------------------------------------------------- CONTATOS e OPORTUNIDADES entram na mesma faixa. O cabeçalho enxuto já valia pras três telas desde ontem, mas só o Pipeline carregava `view-tela-cheia`. Sem o que vem abaixo, marcar as duas listas como altura cheia só criaria o defeito antigo ao contrário: filtro e tabela grudados no topo de uma view alta e vão morto embaixo. Com isto, o comportamento fica igual ao do Kanban — barra de filtro fixa em cima, rodapé de corte ("Mostrando N de M" + "Ver mais") fixo embaixo, e quem rola é a tabela por dentro. 🔴 `overflow-y` entra SÓ aqui dentro, escopado em `.view-tela-cheia`. A regra global `.table-scroll { overflow-x: auto }` é usada por Financeiro e pelo resto da casa e não foi tocada. --------------------------------------------------------------------- */ .view-tela-cheia .pipe-lista { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .view-tela-cheia .pipe-lista .table-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* ===================================================================== RELATÓRIO DO FUNIL 🔴 O QUE ESTE CSS EXISTE PRA FAZER: dar PESO VISUAL DIFERENTE ao número absoluto e ao percentual, e dar um lugar fixo pro aviso de fragilidade. A regra do relatório é que percentual nunca aparece sozinho. Só que escrever os dois com a mesma tipografia vira ruído e o olho para de ler o segundo. Então: o percentual é grande (é a leitura rápida), o absoluto vem logo abaixo em corpo pequeno (é a prova), e o aviso de amostra pequena entra em âmbar na MESMA caixa — nunca num rodapé que ninguém lê. "Sem dado" tem estilo PRÓPRIO (.rf-sem-dado), propositalmente diferente de um número: em cinza, em itálico, sem o corpo grande. Tem que ser impossível confundir "não sei" com "zero" batendo o olho. ===================================================================== */ .rf-toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .rf-campo { display: flex; flex-direction: column; gap: 5px; } .rf-campo > span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--sand-faint); } .rf-campo select, .rf-campo input { background: var(--onyx-2); border: 1px solid var(--hairline); border-radius: 2px; color: var(--sand); font-family: var(--sans); font-size: 13px; padding: 7px 9px; color-scheme: dark; } .rf-campo select:focus, .rf-campo input:focus { outline: none; border-color: var(--gold); } .rf-atalhos { display: inline-flex; gap: 10px; align-items: center; padding-bottom: 8px; } .rf-status { font-size: 13px; color: var(--sand-dim); margin: 14px 0; } .rf-status.is-erro { color: var(--warn); } /* AVISOS DE LEITURA — a faixa que impede a tela de mentir por omissão. Fica no TOPO, antes de qualquer número: quem lê precisa saber da fragilidade ANTES de formar opinião, não depois. */ .rf-avisos { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 22px; } /* 🔴 `block`, NUNCA `flex`. Com display:flex cada nó do texto (o , o trecho solto, o ) virava um FLEX ITEM e o aviso era desenhado em colunas desalinhadas — o texto ficava ilegível justamente no lugar que existe pra explicar a fragilidade do dado. Visto na primeira foto. */ .rf-aviso { display: block; font-size: 12px; line-height: 1.5; color: var(--sand-dim); border-left: 2px solid var(--hairline-gold); padding: 9px 12px; background: var(--gold-faint); border-radius: 0 2px 2px 0; } .rf-aviso.is-forte { border-left-color: var(--warn); color: var(--sand); } .rf-aviso b { color: var(--sand); font-weight: 600; } .rf-bloco { margin: 0 0 30px; } .rf-bloco-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sand-faint); margin: 0 0 4px; } .rf-bloco-nota { font-size: 12px; color: var(--sand-faint); margin: 0 0 14px; line-height: 1.5; } /* Grade de números */ .rf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .rf-cel { background: var(--onyx-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; } .rf-cel-rot { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-faint); } .rf-cel-num { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--sand); } .rf-cel-num.is-gold { color: var(--gold); } /* A PROVA: o absoluto que gerou o percentual. Corpo pequeno, mas sempre presente — é a linha que a regra de honestidade torna obrigatória. */ .rf-cel-abs { font-size: 12px; color: var(--sand-dim); line-height: 1.4; } .rf-cel-var { font-size: 11px; color: var(--sand-faint); line-height: 1.4; } .rf-cel-var.is-sobe { color: var(--gold); } .rf-cel-var.is-desce { color: var(--warn); } /* "Sem dado" NÃO pode parecer um número. Ver comentário no topo do bloco. */ .rf-sem-dado { font-family: var(--sans); font-size: 15px; font-style: italic; color: var(--sand-faint); line-height: 1.3; } .rf-frag { display: block; font-size: 11px; color: var(--warn); line-height: 1.4; } /* Escada do funil — uma linha por passo, com a barra proporcional ao topo. */ .rf-escada { display: flex; flex-direction: column; gap: 2px; } .rf-degrau { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hairline); } .rf-degrau-nome { font-size: 13px; color: var(--sand); } /* 🔴 `display:block` nos DOIS. São , e span é inline por padrão: altura e largura percentual não valem em inline, então a barra saía com o trilho cheio e o preenchimento invisível — as cinco etapas apareciam do MESMO tamanho, que é o oposto do que uma escada de funil tem que mostrar. */ .rf-degrau-barra { display: block; height: 8px; background: var(--onyx-2); border-radius: 2px; overflow: hidden; } .rf-degrau-fill { display: block; height: 100%; background: var(--gold); opacity: 0.75; } .rf-degrau-num { font-size: 12px; color: var(--sand-dim); white-space: nowrap; text-align: right; } .rf-degrau-num b { color: var(--sand); font-weight: 600; } .rf-passo { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 7px 0 11px; font-size: 12px; color: var(--sand-faint); } .rf-passo-conta { color: var(--sand-dim); } .rf-passo-conta b { color: var(--sand); font-weight: 600; } .rf-passo-frag { color: var(--warn); } /* Tabelinha de repartição (origem, anúncio, linha) */ .rf-lista { display: flex; flex-direction: column; gap: 1px; } .rf-lista-item { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; } .rf-lista-nome { color: var(--sand-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rf-lista-n { color: var(--sand); font-weight: 600; } .rf-lista-pct { color: var(--sand-faint); font-size: 12px; min-width: 52px; text-align: right; } .rf-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; } @media (max-width: 760px) { .rf-degrau, .rf-passo { grid-template-columns: 110px 1fr; } .rf-degrau-num { grid-column: 1 / -1; text-align: left; } } /* ===================================================================== AGENDA / CONSULTORIAS — grade da semana (só leitura) Nenhuma cor nova: reunião do CRM usa o ouro da casa (--gold), bloco de indisponibilidade usa o cinza do hairline/sand-faint. A diferença entre "reunião" e "ocupado" não é só a cor — o bloco ocupado é HACHURADO, pra se ler como faixa bloqueada mesmo em preto e branco, mesmo de longe. ===================================================================== */ .ag-toolbar { flex-wrap: wrap; gap: 10px; align-items: center; } .ag-periodo { font-size: 13px; color: var(--sand); font-weight: 600; letter-spacing: 0.01em; margin-left: 6px; } .ag-legenda { display: inline-flex; gap: 14px; margin-left: auto; align-items: center; } .ag-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sand-dim); } .ag-amostra { width: 22px; height: 12px; border-radius: 2px; display: inline-block; } .ag-amostra.is-crm { background: var(--gold-faint); border: 1px solid var(--gold-soft); } .ag-amostra.is-ocupado { border: 1px solid var(--hairline); background-color: var(--onyx-1); background-image: repeating-linear-gradient( -45deg, transparent 0 3px, var(--hairline) 3px 5px ); } .ag-grade { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--onyx-2); overflow: auto; max-height: calc(100vh - 260px); box-shadow: var(--card-shadow); } /* 8 colunas: a régua das horas + os 7 dias. min-width segura a leitura no celular (a grade rola na horizontal em vez de espremer sete colunas). */ .ag-linha { display: grid; grid-template-columns: 62px repeat(7, minmax(96px, 1fr)); min-width: 740px; } .ag-gutter { border-right: 1px solid var(--hairline); font-size: 10px; color: var(--sand-faint); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; } /* --- cabeçalho dos dias (fica preso no topo ao rolar) --- */ .ag-cab { position: sticky; top: 0; z-index: 3; background: var(--onyx-1); border-bottom: 1px solid var(--hairline); } .ag-dia-cab { padding: 9px 6px; text-align: center; border-left: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 1px; align-items: center; } .ag-dia-nome { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sand-faint); } .ag-dia-num { font-size: 14px; font-weight: 600; color: var(--sand); } /* HOJE: coluna inteira levemente banhada + rótulo. É a referência de leitura da tela; sem isso a pessoa conta os dias no dedo e erra. */ .ag-dia-cab.is-hoje { background: var(--gold-faint); } .ag-dia-cab.is-hoje .ag-dia-num { color: var(--gold); } .ag-dia-hoje { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); font-weight: 700; } /* --- faixa de dia inteiro: uma tira no topo do dia, nunca esticada nas 24h --- */ .ag-allday { border-bottom: 1px solid var(--hairline); background: var(--onyx-1); } .ag-allday-col { border-left: 1px solid var(--hairline); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; min-height: 26px; } .ag-allday-col.is-hoje { background: var(--gold-faint); } .ag-chip { font-size: 11px; line-height: 1.25; padding: 3px 6px; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-chip.is-crm { background: var(--gold-faint); color: var(--gold); border: 1px solid var(--hairline-gold); font-weight: 600; } .ag-chip.is-ocupado { color: var(--sand-faint); border: 1px solid var(--hairline); background-color: var(--onyx-2); background-image: repeating-linear-gradient( -45deg, transparent 0 4px, var(--hairline) 4px 6px ); } /* --- corpo: horas no eixo vertical, blocos posicionados pelo horário real --- */ .ag-corpo { height: var(--ag-h); } .ag-horas { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; } .ag-hora { height: var(--ag-px-hora); font-size: 10px; color: var(--sand-faint); text-align: right; padding: 2px 7px 0 0; border-top: 1px solid var(--hairline); } .ag-hora:first-child { border-top: 0; } .ag-col { position: relative; border-left: 1px solid var(--hairline); /* linha de hora desenhada no fundo: uma régua, não 14 elementos */ background-image: repeating-linear-gradient( to bottom, var(--hairline) 0 1px, transparent 1px var(--ag-px-hora) ); } .ag-col.is-hoje { background-color: var(--gold-faint); } /* Bloco de compromisso. left/width vêm inline porque são o resultado do cálculo de sobreposição (dois no mesmo horário = dois lado a lado). */ .ag-bloco { position: absolute; border-radius: 2px; padding: 3px 5px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 11px; line-height: 1.2; cursor: default; } .ag-bloco.is-crm { background: var(--onyx-1); border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); color: var(--sand); } /* Indisponibilidade: hachurado e sem cor de marca. Tem que bater o olho e entender "aqui não dá", não "reunião cinza". */ .ag-bloco.is-ocupado { border: 1px solid var(--hairline); border-left: 3px solid var(--sand-faint); color: var(--sand-faint); background-color: var(--onyx-1); background-image: repeating-linear-gradient( -45deg, transparent 0 5px, var(--hairline) 5px 8px ); } /* Bloco baixo (menos de ~35 min): a linha de hora sai e sobra o rótulo. A hora não se perde — a posição do bloco na régua É a hora. */ .ag-bloco.is-curto { justify-content: center; padding: 1px 5px; } .ag-bloco.is-curto .ag-bloco-hora { display: none; } .ag-bloco-hora { font-size: 9.5px; letter-spacing: 0.03em; color: var(--sand-faint); white-space: nowrap; flex: none; } .ag-bloco.is-crm .ag-bloco-hora { color: var(--gold-soft); } /* Primeira linha: no CRM é o NOME DO LEAD, no ocupado é o rótulo. */ .ag-bloco-tit { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-bloco.is-crm .ag-bloco-tit { color: var(--gold); } /* "OCUPADO" em caixa alta é a etiqueta da faixa bloqueada. Espaçamento curto de propósito: com 0.07em o texto não cabia em bloco dividido ao meio por sobreposição e saía "OCUPA...". */ .ag-bloco.is-ocupado .ag-bloco-tit { font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; font-size: 9.5px; } /* Segunda linha do bloco do CRM: o título do evento, apagado. */ .ag-bloco-sub { font-size: 10px; color: var(--sand-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 760px) { .ag-legenda { margin-left: 0; } .ag-grade { max-height: calc(100vh - 260px); } } /* ===================================================================== AGENDA EM TELA CHEIA — "pode preencher a tela toda a agenda" MEDIDO em Chromium headless, view Agenda, logado como o dono, ANTES: viewport .main grade coluna do dia sobra à direita 1920x1080 1180 1060 142px 476px 🔴 vazio 1440x900 1176 1056 142px 0 390x844 390 362 97px 0 (rola na horizontal) Com 142px de coluna, "Luiz Mendes Magalhães" precisa de 132px de texto dentro de 123px de caixa e sai "Luiz Mendes Magalh...". A conta não é do nome: é do teto de 1180px do `.main`, que não acompanha a janela. O CONSERTO NÃO É CSS NOVO DE LARGURA. A Central já tem a faixa de altura cheia (Pipeline, Contatos, Oportunidades): a view marca `view-tela-cheia`, o `go()` do app.js põe `main-tela-cheia` no `.main` lendo a classe da PRÓPRIA view, e a regra que já existe em `@media (min-width: 901px)` tira o teto (`max-width:100%`), destrava o encolhimento (`min-width:0`) e zera o respiro de rodapé. A Agenda entrou nessa faixa marcando UMA classe no HTML. Nenhuma linha do container global mudou; as outras telas (Pipeline, Tarefas, Carteira, Relatórios, Contatos, Oportunidades, Estúdio) não veem diferença nenhuma porque nada aqui existe fora de `#view-agenda`. Só falta o que é da Agenda: dizer que quem come a altura que sobra é a GRADE, e não o cabeçalho nem a barra. ===================================================================== */ /* Cabeçalho, barra de navegação da semana e linha de status têm altura de conteúdo e não encolhem. Sem isto o flex espreme os três pra caber a grade e a barra "Semana anterior / Hoje / Próxima" perde altura. */ #view-agenda.is-active > .view-head, #view-agenda.is-active > .ag-toolbar, #view-agenda.is-active > .rf-status { flex: 0 0 auto; } /* A GRADE é o único item elástico da coluna — SÓ NO DESKTOP. 🔴 `flex-basis: 0` E NÃO `auto`. Medi as duas e a diferença é a queixa inteira. O `.app` é `min-height: 100vh`, não `height`: a altura dele é o MAIOR entre a janela e o conteúdo. Com basis `auto` a grade entra na conta do conteúdo com seus 763px de altura natural, o `.main` fica 1070px numa janela de 900, não sobra pressão pra encolher ninguém e quem rola volta a ser a PÁGINA — exatamente o defeito que este bloco existe pra matar, com o cabeçalho dos dias indo embora junto. Medido em 1440x900: grade 765px com topo em 307px, ou seja 172px pra fora da janela. Com basis `0` a grade não contribui altura nenhuma pro conteúdo, o `.main` passa a valer os 100vh do `.app`, e aí sim o `flex-grow` reparte o que sobrou depois do cabeçalho. `min-height: 0` é o par obrigatório: sem ele item flex não encolhe abaixo do próprio conteúdo e o basis 0 seria ignorado na prática. `max-height: max-content` é o freio do outro lado: `max-content` de um contêiner de rolagem é a altura do conteúdo dele, então a caixa nunca fica maior que o que tem dentro e não sobra faixa com borda e régua de hora SEM rótulo embaixo do último horário. 🔴 QUEM PREENCHE A ALTURA HOJE É A LINHA DE HORA, não esta regra. Este freio sozinho parava a grade em 14 horas × 50px (765px) e deixava 368px mortos num 2560x1440. Agora o app.js mede a sobra e calcula a altura de 1 hora (`--ag-px-hora`, piso 50px / teto 96px, ampliando a faixa de horas se sobrar mais que o teto) — o conteúdo passa a valer exatamente a altura livre e `max-content` vira só o cinto de segurança pro caso de a medida não rodar. Ver o bloco "ALTURA" em app.js (agPlanoAltura). 🔴 SÓ ACIMA DE 901px. Abaixo disso o `.app` vira display:block, o `.main` volta a ter altura de conteúdo e não existe altura de janela pra repartir: um basis 0 ali colapsaria a grade pra zero. No celular vale o que já valia — `max-height: calc(100vh - 260px)` e rolagem por dentro. */ @media (min-width: 901px) { #view-agenda.is-active .ag-grade { flex: 1 1 0; min-height: 0; max-height: max-content; } } /* Bloco escalonado (cluster acima de 4 faixas): sombra pra separar um do outro quando eles se sobrepõem, senão viram uma mancha só. */ .ag-bloco { box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.55); } /* =================================================================== TRÁFEGO (META ADS) — duas janelas lado a lado. Sem paleta nova: usa as MESMAS variáveis e os MESMOS blocos do Relatório do Funil (.rf-cel, .rf-grid, .rf-aviso, .rf-status). O que é próprio daqui é o par de janelas e a tabela de campanhas. 🔴 A LEITURA TEM QUE CABER NUMA OLHADA: gasto em ouro e corpo grande (é o número que ele procura), leads e custo por lead do lado, e a tabela logo abaixo dizendo QUAL campanha comeu o dinheiro. =================================================================== */ .tf-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* 🔴 O CARIMBO. Não é enfeite e não pode ser discreto a ponto de sumir: é ele que impede o dono de decidir achando que o número é do segundo. Fica na cor de texto normal (não em cinza fraco) e com o pontinho dourado à esquerda pra puxar o olho. */ .tf-carimbo { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sand); line-height: 1.4; background: var(--gold-faint); border: 1px solid var(--hairline-gold); border-radius: 999px; padding: 5px 12px; cursor: help; } .tf-carimbo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; } .tf-conta { font-size: 12px; color: var(--sand-faint); } /* Duas colunas no desktop, uma no celular. auto-fit com minmax garante que a segunda janela desça em vez de espremer a tabela até ilegível. */ .tf-janelas { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; margin-top: 4px; } .tf-janela { background: var(--onyx-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; } /* Janela sem leitura: moldura de aviso, pra não ser confundida com uma janela cheia de zeros. */ .tf-janela.is-erro { border-color: var(--warn); } .tf-janela-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .tf-janela-rotulo { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--sand); margin: 0; line-height: 1.2; } /* O período EXATO que a Meta mediu. Fica colado no rótulo de propósito: "Últimos 7 dias" da Meta fecha em ontem, e a data ao lado é o que impede o dono de somar o dia de hoje duas vezes. */ .tf-janela-periodo { font-size: 12px; color: var(--sand-dim); margin: 0; } /* Dentro da janela o KPI é menor que no Relatório do Funil: são três por janela e duas janelas na mesma dobra. */ /* 🔴 `flex: 0 0 auto` NÃO é decoração. As duas janelas são esticadas pela grade externa até a altura da mais alta; sem esta trava, a linha de KPIs absorvia a sobra e cada card ficava com 125px pra 61px de conteúdo — o número boiando no meio de uma caixa vazia. Medido: 34px mortos por card. */ .tf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 0 0 auto; align-content: start; } .tf-kpis .rf-cel { padding: 11px 12px; } .tf-kpis .rf-cel-num { font-size: 22px; } /* 🔴 Zerar a margem dos

    DENTRO do card. Medido na foto: o card tinha 125px pra 61px de conteúdo — os 64px sobrando eram a margem padrão do

    (1em de um texto de 22px é 22px em cima e 22px embaixo). O `.rf-cel` já espaça pelo `gap`, então a margem só empurrava o número pro meio de uma caixa vazia. Escopado a .tf-kpis de propósito: o Relatório do Funil usa os MESMOS .rf-cel e está no ar assim há semanas — mexer lá seria mudar tela que ninguém pediu. */ .tf-kpis .rf-cel > p { margin: 0; } .tf-tabela { width: 100%; border-collapse: collapse; font-size: 13px; } .tf-tabela th { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-faint); font-weight: 500; text-align: left; padding: 0 8px 7px 0; border-bottom: 1px solid var(--hairline); } .tf-tabela td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--hairline); color: var(--sand-dim); } .tf-tabela tbody tr:last-child td { border-bottom: none; } /* Nome longo de campanha ("Leads - Arkad - Móveis Planejados") não pode empurrar as colunas de número pra fora: corta com reticências e o nome inteiro fica no title. */ .tf-td-nome { color: var(--sand); max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-td-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tf-td-gasto { color: var(--sand); font-weight: 600; } .tf-tabela tfoot td { border-top: 1px solid var(--hairline-gold); border-bottom: none; padding-top: 10px; color: var(--sand); font-weight: 600; } .tf-tabela tfoot .tf-td-gasto { color: var(--gold); } /* Pé da janela: a hora da leitura DAQUELA janela. A barra de cima mostra a mais antiga das duas; aqui fica a de cada uma, porque elas podem ter sido lidas em momentos diferentes (uma veio do cache, a outra não). */ /* Nota do traço no custo por lead. Fica FORA do card de propósito (ver o comentário em app.js): dentro dele, esticava a caixa e desalinhava a janela "Hoje" da de 7 dias. */ .tf-nota { font-size: 11px; color: var(--sand-faint); margin: -6px 0 0; line-height: 1.5; } /* `margin-top: auto` empurra o carimbo pro rodapé da janela. Com isso a sobra de altura cai entre a tabela e o carimbo, e os DOIS carimbos (o de hoje e o de 7 dias) ficam na mesma linha — que é como se compara duas leituras. */ .tf-janela-pe { font-size: 11px; color: var(--sand-faint); margin: auto 0 0; line-height: 1.4; } @media (max-width: 560px) { .tf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tf-janela { padding: 14px 13px 12px; } }