/* =====================================================================
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);
--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);
--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);
--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; }
.brand-mark {
width: 42px;
height: 42px;
border: 1px solid var(--hairline-gold);
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 24px;
color: var(--gold);
letter-spacing: 0;
}
.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; }
.topbar-brand .brand-mark { width: 34px; height: 34px; font-size: 19px; }
.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; }
.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; }
}
/* =====================================================================
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;
}
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.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; }
/* Board: colunas em scroll horizontal DENTRO do container (não estoura a página) */
.kanban {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(268px, 1fr);
gap: 18px;
overflow-x: auto;
padding-bottom: 12px;
margin: 0 -6px;
padding-left: 6px;
padding-right: 6px;
scroll-snap-type: x proximity;
}
.kanban-col {
scroll-snap-align: start;
background: var(--onyx-1);
border: 1px solid var(--hairline);
border-top: 2px solid var(--hairline-gold);
border-radius: var(--radius);
padding: 16px 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 220px;
}
.kanban-col-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 0 4px 4px;
}
.kanban-col-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--gold);
font-weight: 500;
}
.kanban-col-count {
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
color: var(--sand-dim);
min-width: 20px;
text-align: right;
}
.kanban-cards { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kanban-empty {
font-size: 12px;
color: var(--sand-faint);
letter-spacing: 0.04em;
padding: 14px 6px;
text-align: center;
border: 1px dashed var(--hairline);
border-radius: var(--radius);
}
/* Card do lead */
.lead-card {
background: var(--onyx-2);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 14px 14px 12px;
display: flex;
flex-direction: column;
gap: 9px;
cursor: pointer;
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lead-card:hover {
border-color: var(--hairline-gold);
transform: translateY(-2px);
box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.8);
}
.lead-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lead-card-name { font-family: var(--serif); font-size: 17px; font-weight: 600; margin: 0; letter-spacing: 0.01em; line-height: 1.2; }
.lead-card-origin {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--sand-faint); white-space: nowrap; flex: none; padding-top: 3px;
}
.lead-card-meta { display: flex; flex-direction: column; gap: 4px; }
.lead-card-line { font-size: 12px; color: var(--sand-dim); line-height: 1.4; }
.lead-card-line.contato { color: var(--sand-dim); }
/* Card de tarefa: a DESCRIÇÃO (mensagem do cliente) é o texto principal — lê como
mensagem, não como título de peça. Sans, peso normal, quebra em até 4 linhas. */
.task-card .lead-card-name.task-desc {
font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.4;
letter-spacing: 0; word-break: break-word; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* ORIGEM (de onde veio a mensagem) = etiqueta menor e discreta, uma vez só. */
.task-card .lead-card-line.task-origem {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--sand-faint);
}
.lead-card-value { color: var(--gold); font-weight: 500; }
/* Linha de ação do card: botão Abrir à esquerda, valor à direita.
Existe porque o clique no corpo do card disputa com o arrasto entre
colunas, e era fácil abrir o lead sem querer no meio de um arrasto.
O botão separa as duas intenções. Sem valor, ele fica sozinho. */
.lead-card-actions {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lead-card-actions .lead-card-value { font-size: 12px; line-height: 1.4; }
.lead-card-open {
background: var(--gold-faint);
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.14em;
padding: 5px 12px;
line-height: 1;
cursor: pointer;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lead-card-open:hover { border-color: var(--gold); background: var(--gold-wash); }
.lead-card-open:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.lead-card-nota {
font-size: 12px; color: var(--sand-faint); line-height: 1.45; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lead-card-foot {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--hairline);
}
.lead-card-date { font-size: 10px; color: var(--sand-faint); letter-spacing: 0.04em; }
.lead-move { display: inline-flex; gap: 4px; }
.lead-move-btn {
width: 26px; height: 26px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gold-faint);
border: 1px solid var(--hairline-gold);
border-radius: 2px;
color: var(--gold);
font-size: 13px; line-height: 1;
cursor: pointer;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.lead-move-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-wash); }
.lead-move-btn:disabled { opacity: 0.28; cursor: default; }
/* Modal de ficha do lead */
.lead-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; }
.lead-modal[hidden] { display: none; }
.lead-modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.lead-modal-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
background: var(--onyx-1);
border: 1px solid var(--hairline-gold);
border-radius: var(--radius);
box-shadow: var(--card-shadow);
padding: 28px 28px 24px;
}
.lead-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
/* Título + "voltar para o pipeline" empilhados; o X continua na ponta direita */
.lead-modal-headings { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lead-modal-back {
align-self: flex-start;
background: none; border: none; padding: 0;
color: var(--sand-dim); font-family: var(--sans); font-size: 11px;
letter-spacing: 0.08em; cursor: pointer;
transition: color 0.3s var(--ease);
}
.lead-modal-back:hover { color: var(--gold); }
/* Texto só pra leitor de tela (a marca de entrega é ícone; o estado vai escrito) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- RESUMO da oportunidade (painel esquerdo, leitura) ---- */
.lead-resumo {
border: 1px solid var(--hairline-gold);
border-radius: var(--radius);
background: var(--gold-faint);
padding: 14px 16px;
margin-bottom: 20px;
}
.lead-resumo-head { margin-bottom: 10px; }
.lead-resumo-title {
font-family: var(--serif); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.18em; color: var(--sand-dim);
}
.lead-resumo-grid { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.lead-resumo-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lead-resumo-row dt {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--sand-dim); flex: none;
}
.lead-resumo-row dd { margin: 0; font-size: 13px; color: var(--sand); text-align: right; min-width: 0; }
.lead-resumo-id {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 11px; color: var(--sand-dim); word-break: break-all;
}
/* Badge de status. Fundo transparente nos dois primeiros de propósito: ouro
sobre lavagem de ouro fica em 3,3:1 e some. O fechado é o único cheio. */
.lead-status-badge {
display: inline-block; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.14em;
padding: 3px 9px; border-radius: 2px; border: 1px solid transparent;
}
.lead-status-badge.is-novo { color: var(--sand-dim); border-color: var(--hairline); }
.lead-status-badge.is-andamento { color: var(--gold); border-color: var(--hairline-gold); }
.lead-status-badge.is-fechado { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
/* ---- COMPROMISSO (reunião marcada) dentro do Resumo ----
Bloco separado por um filete do resto do resumo: o resumo é leitura, este
aqui tem ação. Usa os mesmos tokens de cor dos 3 temas, nada hardcoded. */
.lead-appt {
margin-top: 14px; padding-top: 12px;
border-top: 1px solid var(--hairline-gold);
}
.lead-appt-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.lead-appt-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--sand-dim);
}
/* Estado da sincronização. O "pendente" NÃO é vermelho e NÃO é um check:
ainda não foi pro Google é situação normal enquanto a conta não conecta. */
.lead-appt-sync {
font-size: 10px; letter-spacing: 0.06em;
padding: 2px 7px; border-radius: 2px; border: 1px solid var(--hairline);
color: var(--sand-dim); white-space: nowrap;
}
.lead-appt-sync.is-sync { color: var(--gold); border-color: var(--hairline-gold); }
.lead-appt-when {
margin: 0 0 10px; font-size: 13px; color: var(--sand-dim);
font-weight: var(--ui-weight);
}
.lead-appt-when.has-appt { color: var(--sand); font-size: 15px; }
.lead-appt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-appt-btn {
background: none; border: 1px solid var(--hairline-gold); border-radius: 2px;
color: var(--gold); font-family: var(--sans); font-size: 11px;
font-weight: var(--ui-weight); letter-spacing: 0.08em; text-transform: uppercase;
padding: 7px 13px; cursor: pointer; transition: all 0.3s var(--ease);
}
.lead-appt-btn:hover { background: var(--gold-faint); }
.lead-appt-btn.is-quiet { color: var(--sand-dim); border-color: var(--hairline); }
.lead-appt-btn.is-quiet:hover { color: var(--sand); border-color: var(--hairline-gold); background: none; }
/* Campo de data + salvar na mesma linha: marcar é 2 cliques, não um fluxo. */
.lead-appt-edit {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.lead-appt-input {
flex: 1 1 190px; min-width: 0;
background: var(--gold-faint); border: 1px solid var(--hairline-gold);
border-radius: 2px; color: var(--sand);
font-family: var(--sans); font-size: 13px; font-weight: var(--ui-weight);
padding: 8px 10px;
}
.lead-appt-input:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); }
/* O calendário do é 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); }
.lead-modal-title { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.lead-modal-close {
background: none; border: none; padding: 0; width: 34px; height: 34px;
color: var(--sand-dim); font-size: 26px; line-height: 1; cursor: pointer;
transition: color 0.3s var(--ease);
}
.lead-modal-close:hover { color: var(--gold); }
.lead-form { display: flex; flex-direction: column; gap: 16px; }
.lead-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-field { display: flex; flex-direction: column; gap: 7px; }
.lead-field span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sand-dim); }
.lead-field input,
.lead-field select,
.lead-field textarea {
background: var(--gold-faint);
border: 1px solid var(--hairline-gold);
border-radius: 2px;
color: var(--sand);
font-family: var(--sans);
font-size: 14px;
padding: 10px 12px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lead-field textarea { resize: vertical; line-height: 1.5; }
.lead-field input[type="number"] { -moz-appearance: textfield; }
.lead-field input::-webkit-outer-spin-button,
.lead-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); }
.lead-field select { cursor: pointer; }
.lead-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.lead-form-spacer { flex: 1; }
.lead-btn-gold {
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: 11px 22px; cursor: pointer;
transition: filter 0.3s var(--ease);
}
.lead-btn-gold:hover { filter: brightness(1.08); }
.lead-btn-quiet {
background: none; border: 1px solid var(--hairline); border-radius: 2px;
color: var(--sand-dim); font-family: var(--sans); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em; padding: 11px 18px; cursor: pointer;
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lead-btn-quiet:hover { color: var(--sand); border-color: var(--hairline-gold); }
.lead-btn-danger {
background: none; border: none; padding: 0;
color: var(--bad); font-family: var(--sans); font-size: 12px;
letter-spacing: 0.06em; cursor: pointer; transition: opacity 0.3s var(--ease);
}
.lead-btn-danger:hover { opacity: 0.75; }
/* -------------------------------------------------------------------
INBOX WhatsApp — thread dentro da ficha do lead.
Reusa os tokens ônix/ouro; bolha OUT (nós) em ouro, IN (lead) em superfície.
------------------------------------------------------------------- */
.lead-inbox {
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--hairline-gold);
display: flex;
flex-direction: column;
gap: 12px;
}
.lead-inbox-head { display: flex; align-items: baseline; justify-content: space-between; }
.lead-inbox-title {
font-family: var(--serif); font-size: 15px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--sand-dim);
}
.lead-inbox-channel {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
color: var(--gold); border: 1px solid var(--hairline-gold);
border-radius: 2px; padding: 3px 8px;
}
/* ---- TIMELINE do lead ---------------------------------------------------
Uma linha do tempo só, trilho à esquerda, evento por evento em ordem
cronológica. Três tipos, distinguidos por rótulo em caixa alta e pelo
ponto do trilho: mensagem recebida (ponto vazado), mensagem enviada
(ponto cheio de ouro, trilho ouro) e mudança de etapa (marca quadrada).
Tudo em token existente — nenhuma cor nova entra por aqui.
------------------------------------------------------------------------- */
.lead-timeline {
display: flex;
flex-direction: column;
overflow-y: auto;
max-height: 320px;
background: var(--gold-faint);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 6px 14px 6px 12px;
}
.lead-timeline:empty { display: none; }
.lead-tl-item {
position: relative;
padding: 11px 2px 11px 20px;
border-left: 1px solid var(--hairline-gold);
}
.lead-tl-item.is-out { border-left-color: var(--gold-soft); }
/* Ponto do trilho. O de etapa é quadrado, pra ler diferente sem cor nova. */
.lead-tl-dot {
position: absolute; left: -4px; top: 15px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--onyx-1);
border: 1px solid var(--gold-soft);
}
.lead-tl-item.is-out .lead-tl-dot { background: var(--gold); border-color: var(--gold); }
.lead-tl-item.is-etapa .lead-tl-dot {
border-radius: 1px;
border-color: var(--sand-dim);
background: var(--onyx-1);
}
.lead-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-tl-kind {
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--sand-dim);
}
.lead-tl-item.is-out .lead-tl-kind { color: var(--gold); }
.lead-tl-when { margin-left: auto; font-size: 11px; color: var(--sand-dim); letter-spacing: 0.02em; }
.lead-tl-body {
margin-top: 5px;
font-size: 14px; line-height: 1.45; color: var(--sand);
word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap;
}
.lead-tl-meta { margin-top: 4px; font-size: 11px; color: var(--sand-dim); }
/* Mensagem gravada sem texto (áudio, imagem, figurinha) */
.lead-tl-vazio { color: var(--sand-dim); font-style: italic; }
/* Mudança de etapa: "Novo lead → Em conversa" */
.lead-tl-item.is-etapa .lead-tl-body { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.lead-tl-stage {
display: inline-block;
border: 1px solid var(--hairline-gold); border-radius: 2px;
padding: 2px 8px; font-size: 12px; letter-spacing: 0.03em; color: var(--sand);
}
.lead-tl-stage.is-to { font-weight: 600; border-color: var(--gold-soft); }
.lead-tl-arrow { margin: 0 6px; color: var(--gold); font-size: 13px; }
/* ---- Marca de entrega (o "V") ------------------------------------------
Só em mensagem enviada. A cor sai da paleta: ouro é a cor de LIDO, o
vermelho de erro é o --bad do tema, o resto fica no cinza do texto fraco. */
.lead-tl-ack { display: inline-flex; align-items: center; color: var(--sand-dim); }
.lead-tl-ack-i { display: block; width: 18px; height: 12px; }
.lead-tl-ack.is-pending { color: var(--sand-faint); }
.lead-tl-ack.is-sent,
.lead-tl-ack.is-delivered { color: var(--sand-dim); }
.lead-tl-ack.is-read { color: var(--gold); }
.lead-tl-ack.is-failed { color: var(--bad); }
.lead-tl-ack.is-unknown { color: var(--sand-faint); }
.lead-inbox-empty {
padding: 18px 12px;
text-align: center;
font-size: 13px; color: var(--sand-dim);
background: var(--gold-faint);
border: 1px dashed var(--hairline-gold);
border-radius: 3px;
}
.lead-inbox-compose { display: flex; gap: 8px; }
.lead-inbox-compose input {
flex: 1;
background: var(--gold-faint);
border: 1px solid var(--hairline-gold);
border-radius: 2px;
color: var(--sand);
font-family: var(--sans); font-size: 14px;
padding: 10px 12px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.lead-inbox-compose input:focus { outline: none; border-color: var(--gold); background: var(--gold-wash); }
.lead-inbox-send {
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.12em; padding: 10px 18px; cursor: pointer;
transition: filter 0.3s var(--ease);
}
.lead-inbox-send:hover { filter: brightness(1.08); }
.lead-inbox-send:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 560px) {
.lead-timeline { max-height: 240px; }
}
/* -------------------------------------------------------------------
FICHA + CONVERSA LADO A LADO (só no modal do lead, só quando existe
conversa). O app.js liga a classe .has-inbox no #leadModal quando o
inbox aparece, e desliga ao criar lead novo. Sem a classe o corpo é
uma coluna só e a ficha ocupa a largura inteira, sem buraco do lado.
Escopo em #leadModal de propósito: .lead-modal-card e .lead-form são
reusados por tarefas, estúdio, clientes e financeiro.
------------------------------------------------------------------- */
.lead-modal-body { display: grid; grid-template-columns: minmax(0, 1fr); }
#leadModal.has-inbox .lead-modal-card {
max-width: 940px;
/* altura fixa: é o que garante as duas colunas do mesmo tamanho e joga
o scroll pra dentro delas, em vez de crescer o card inteiro */
height: min(88vh, 720px);
max-height: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
#leadModal.has-inbox .lead-modal-head { flex: none; }
#leadModal.has-inbox .lead-modal-body {
flex: 1;
min-height: 0;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 26px;
align-items: stretch;
}
/* Resumo + ficha rolam por dentro quando a timeline for mais alta */
#leadModal.has-inbox .lead-col-main { min-height: 0; overflow-y: auto; padding-right: 6px; }
/* A divisória some do topo e vai pra esquerda, entre as duas colunas */
#leadModal.has-inbox .lead-inbox {
margin-top: 0;
padding-top: 0;
border-top: none;
padding-left: 26px;
border-left: 1px solid var(--hairline-gold);
min-height: 0;
}
#leadModal.has-inbox .lead-timeline { flex: 1; min-height: 0; max-height: none; }
/* :not([hidden]) e obrigatorio: definir `display` aqui vence o hidden do HTML,
e o aviso "inbox disponivel quando conectar" aparecia junto com a conversa.
Defeito introduzido em 31/07 junto com o layout de duas colunas. */
#leadModal.has-inbox .lead-inbox-empty:not([hidden]) { flex: 1; display: flex; align-items: center; justify-content: center; }
/* Celular: não cabe lado a lado. Empilha e a CONVERSA vem primeiro,
que é o que ele mais olha; a ficha desce pra baixo com a divisória. */
@media (max-width: 620px) {
#leadModal.has-inbox .lead-modal-card {
height: auto;
max-height: 90vh;
display: block;
overflow-y: auto;
}
#leadModal.has-inbox .lead-modal-body {
display: flex;
flex-direction: column;
gap: 0;
}
#leadModal.has-inbox .lead-inbox {
order: 1;
padding-left: 0;
border-left: none;
}
#leadModal.has-inbox .lead-col-main {
order: 2;
overflow: visible;
padding-right: 0;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--hairline-gold);
}
#leadModal.has-inbox .lead-timeline { flex: none; max-height: 240px; }
#leadModal.has-inbox .lead-inbox-empty:not([hidden]) { display: block; }
}
/* Kanban no mobile: mantém scroll horizontal com colunas de largura fixa
(não empilha — o gesto lateral é natural e não estoura a página). */
@media (max-width: 620px) {
.kanban { grid-auto-columns: 80vw; gap: 14px; }
.lead-field-row { grid-template-columns: 1fr; gap: 16px; }
.lead-modal { padding: 16px; }
.lead-modal-card { padding: 24px 20px 20px; }
}
/* =====================================================================
FINANCEIRO — Fase 1 (manual). Mesma identidade Arkad, só tokens.
KPIs (cards) + tabela de contratos + modal (reusa .lead-modal/.lead-form).
===================================================================== */
/* ---- KPIs no topo ---- */
.fin-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.fin-kpi {
position: relative;
background: var(--onyx-2);
border: 1px solid var(--hairline);
border-left: 2px solid var(--hairline-gold);
border-radius: var(--radius);
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
gap: 7px;
}
/* KPI de destaque (MRR) recebe leve realce dourado */
.fin-kpi.is-primary {
border-left-color: var(--gold);
background: linear-gradient(180deg, var(--gold-faint), transparent), var(--onyx-2);
}
.fin-kpi-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--sand-dim);
display: flex;
align-items: center;
gap: 7px;
}
.fin-kpi-value {
font-family: var(--serif);
font-size: 30px;
font-weight: 600;
color: var(--sand);
line-height: 1.05;
}
.fin-kpi.is-primary .fin-kpi-value { color: var(--gold); }
.fin-kpi-note { font-size: 11px; color: var(--sand-faint); line-height: 1.4; }
/* tooltip/nota da fórmula (LTV, churn) — dica no hover/focus do "?" */
.fin-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
flex: none;
border: 1px solid var(--hairline-gold);
border-radius: 50%;
color: var(--gold);
font-size: 9px;
font-weight: 600;
cursor: help;
line-height: 1;
letter-spacing: 0;
}
.fin-info:hover, .fin-info:focus-visible { outline: none; border-color: var(--gold); background: var(--gold-faint); }
/* ---- Aviso "preencha os valores" ---- */
.fin-notice {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
margin-bottom: 26px;
border: 1px dashed var(--hairline-gold);
border-radius: var(--radius);
background: var(--gold-faint);
}
.fin-notice[hidden] { display: none; }
.fin-notice-icon { width: 8px; height: 34px; border-radius: 2px; flex: none; background: var(--gold); }
.fin-notice-text { margin: 0; font-size: 13.5px; color: var(--sand-dim); line-height: 1.5; }
/* ---- Cabeçalho do painel com botão de adicionar ---- */
.fin-panel-head-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.fin-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: 11px 18px;
cursor: pointer;
flex: none;
transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.fin-add-btn span { font-size: 16px; line-height: 1; }
.fin-add-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* ---- Tabela de contratos (reusa .grid-table; ajustes de alinhamento) ---- */
.fin-table { min-width: 720px; }
.fin-table th, .fin-table td { text-align: left; }
.fin-table th.col-in, .fin-table td.fin-cell-valor { text-align: right; }
.fin-table td.fin-cell-valor { color: var(--gold); font-weight: 500; }
.fin-table th.fin-col-actions, .fin-table td.fin-cell-actions { text-align: right; white-space: nowrap; }
.fin-table td.col-label { font-weight: 400; }
.fin-cell-muted { color: var(--sand-faint); }
/* pílula de tipo e de status */
.fin-pill {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--hairline);
color: var(--sand-dim);
white-space: nowrap;
}
.fin-pill.tipo-recorrente { color: var(--gold); border-color: var(--hairline-gold); background: var(--gold-faint); }
.fin-pill.tipo-avulso { color: var(--sand-dim); border-color: var(--gold-soft); }
.fin-pill.status-ativo { color: var(--ok); border-color: var(--ok); }
.fin-pill.status-pausado { color: var(--warn); border-color: var(--warn); }
.fin-pill.status-encerrado { color: var(--bad); border-color: var(--bad); }
/* Tag discreta de origem: cliente puxado do Pipeline (CRM). */
.fin-pill.via-crm {
margin-left: 8px;
font-size: 9px;
padding: 2px 7px;
color: var(--sand-faint);
border-color: var(--hairline);
background: none;
vertical-align: middle;
}
/* Linha inteira vinda do CRM: leve realce de fundo pra diferenciar da manual. */
.fin-table tr.fin-row-crm { background: var(--gold-faint); }
/* ações da linha (editar/excluir) */
.fin-row-btn {
background: var(--gold-faint);
border: 1px solid var(--hairline-gold);
border-radius: 2px;
color: var(--gold);
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.08em;
padding: 6px 11px;
cursor: pointer;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.fin-row-btn:hover { border-color: var(--gold); background: var(--gold-wash); }
.fin-row-btn.is-danger { color: var(--bad); border-color: var(--hairline); background: none; margin-left: 6px; }
.fin-row-btn.is-danger:hover { border-color: var(--bad); background: none; }
.fin-empty {
margin-top: 18px;
font-size: 13px;
color: var(--sand-faint);
letter-spacing: 0.03em;
padding: 22px 6px;
text-align: center;
border: 1px dashed var(--hairline);
border-radius: var(--radius);
}
.fin-empty[hidden] { display: none; }
.fin-empty strong { color: var(--gold); font-weight: 500; }
/* rótulo "(opcional)" nos campos do modal */
.fin-optional { font-style: normal; text-transform: none; letter-spacing: 0.04em; color: var(--sand-faint); }
/* --- Financeiro responsivo: KPIs empilham; tabela já rola no .table-scroll --- */
@media (max-width: 620px) {
.fin-kpis { grid-template-columns: 1fr; gap: 12px; }
.fin-kpi-value { font-size: 26px; }
.fin-panel-head-row { flex-direction: column; }
.fin-add-btn { width: 100%; justify-content: center; }
}
/* =====================================================================
TAREFAS — Quadro (Kanban). Reusa .kanban / .lead-card / .lead-modal do
Pipeline; aqui só o que é específico de tarefa (badge IA, prioridade,
drag-over, responsável, nota de origem).
===================================================================== */
.task-card { cursor: grab; }
.task-card.is-dragging { opacity: 0.5; }
.kanban-col.kanban-col-over { outline: 1px dashed var(--gold); outline-offset: 2px; }
/* Drag-and-drop no Kanban do CRM (leads) — mesmo feedback visual das tarefas.
O .kanban-col-over acima já é genérico (vale pra qualquer coluna). */
.lead-card[draggable="true"] { cursor: grab; }
.lead-card.is-dragging { opacity: 0.5; }
.task-badge-ia {
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
color: var(--on-gold); background: var(--gold);
border-radius: 4px; padding: 2px 6px; line-height: 1; align-self: flex-start;
}
.task-assignee { color: var(--gold); font-weight: 500; }
.task-prio {
font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
border-radius: 999px; padding: 2px 9px; line-height: 1.4;
border: 1px solid transparent;
}
/* Chips de prioridade só com token: o vermelho claro sumia no tema claro e o
branco com alfa desafinava no neutro. */
.task-prio-alta { color: var(--bad); border-color: var(--bad); background: transparent; }
.task-prio-media { color: var(--sand-dim); border-color: var(--hairline-gold); background: var(--gold-faint); }
.task-prio-baixa { color: var(--sand-faint); border-color: var(--hairline); background: transparent; }
.task-origin-note {
font-size: 12px; color: var(--sand-dim); line-height: 1.5;
background: rgba(176, 141, 76, 0.08); border: 1px solid rgba(176, 141, 76, 0.2);
border-radius: 8px; padding: 10px 12px; margin: 0;
}
/* ===== ESTÚDIO DE CRIATIVOS ===== */
.estudio-panel {
background: var(--onyx-1); border: 1px solid var(--hairline);
border-radius: var(--radius); padding: 22px 22px 18px; margin-bottom: 26px;
}
.estudio-form { gap: 16px; }
.estudio-form .lead-field input[type="file"] {
padding: 8px 10px; font-size: 13px; color: var(--sand-dim);
}
.estudio-gallery { display: flex; flex-direction: column; gap: 30px; }
.estudio-group-head {
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--gold); margin: 0 0 12px; font-weight: 600;
}
.estudio-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px;
}
.estudio-card {
background: var(--onyx-2); border: 1px solid var(--hairline);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
}
.estudio-thumb {
aspect-ratio: 4 / 5; background: var(--onyx-0);
display: grid; place-items: center; overflow: hidden;
}
.estudio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.estudio-thumb.is-input { opacity: 0.9; }
.estudio-thumb.is-broken::after {
content: "sem preview"; color: var(--sand-faint); font-size: 11px;
}
.estudio-meta { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.estudio-status {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
font-weight: 600; align-self: flex-start;
padding: 3px 8px; border-radius: 999px; border: 1px solid var(--hairline);
color: var(--sand-dim);
}
.estudio-status-queued { color: var(--gold); border-color: var(--hairline-gold); }
.estudio-status-processing { color: var(--gold); border-color: var(--hairline-gold); }
/* verde e vermelho vêm do tema: no claro os antigos #4a7 e #c66 não davam 4,5:1 */
.estudio-status-done { color: var(--ok); border-color: var(--ok); }
.estudio-status-error { color: var(--bad); border-color: var(--bad); }
.estudio-brief {
font-size: 12px; color: var(--sand-dim); line-height: 1.4; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.estudio-err { font-size: 11px; color: var(--bad); margin: 0; line-height: 1.4; }
.estudio-cost { font-size: 11px; color: var(--sand-faint); }
.estudio-actions {
padding: 8px 14px 14px; display: flex; gap: 8px; align-items: center;
margin-top: auto;
}
.estudio-gen-btn, .estudio-dl-btn { font-size: 12px; padding: 7px 14px; }
.estudio-dl-btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
.estudio-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* ---- RELATÓRIOS — cards de relatório (reusa .estudio-* de status/actions) --- */
.relatorio-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* --panel e --ink nunca existiram: o card caía sempre no fallback branco e
ficava um retângulo claro no meio do tema escuro. Agora usa os tokens. */
.relatorio-card {
background: var(--onyx-2); border: 1px solid var(--hairline);
border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
padding: 14px 16px;
}
.relatorio-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.relatorio-title {
font-size: 13px; font-weight: 500; margin: 0; line-height: 1.35;
word-break: break-word; color: var(--sand);
}
.relatorio-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 10px 0 4px;
}
.relatorio-tag {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: var(--gold); border: 1px solid var(--hairline-gold);
border-radius: 999px; padding: 2px 9px;
}
.relatorio-period { font-size: 11px; color: var(--sand-faint); }
.relatorio-card .estudio-actions { padding: 10px 0 0; }
@media (max-width: 640px) {
.relatorio-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
FICHA DO CLIENTE — onboarding (checklist 7 dias, estudo, pastas).
Tokens Arkad: --gold, --sand, --hairline-gold, --gold-faint, --radius.
=================================================================== */
.ficha-block { margin-bottom: 20px; }
.ficha-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
/* Checklist — checkbox custom */
.ck-progress {
font-size: 13px; color: var(--gold); font-weight: 500;
border: 1px solid var(--hairline-gold); border-radius: 999px;
padding: 2px 12px; background: var(--gold-faint); white-space: nowrap;
}
.ck-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ck-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 8px; border-radius: var(--radius); cursor: pointer;
border-bottom: 1px solid var(--hairline); transition: background 0.15s ease;
}
.ck-item:last-child { border-bottom: none; }
.ck-item:hover { background: var(--gold-faint); }
.ck-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-box {
flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
border: 1.5px solid var(--gold-soft); background: transparent;
display: inline-flex; align-items: center; justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease;
}
.ck-box::after {
content: "✓"; font-size: 13px; color: var(--onyx-0);
opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease;
}
.ck-item.is-done .ck-box { background: var(--gold); border-color: var(--gold); }
.ck-item.is-done .ck-box::after { opacity: 1; transform: scale(1); }
.ck-day {
flex: 0 0 auto; font-size: 11px; letter-spacing: 0.06em; color: var(--gold);
border: 1px solid var(--hairline-gold); border-radius: 4px; padding: 2px 7px;
}
.ck-title { font-size: 14px; color: var(--sand); line-height: 1.4; }
.ck-item.is-done .ck-title { color: var(--sand-dim); text-decoration: line-through; }
/* Estudo do cliente — respostas do formulário */
.estudo-empty { margin-top: 4px; }
.estudo-empty .estudo-copy-link { margin-top: 14px; }
.estudo-answers {
display: grid; gap: 16px; margin-top: 6px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.estudo-field {
border-left: 2px solid var(--hairline-gold); padding-left: 12px;
}
.estudo-key {
display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--gold); margin-bottom: 3px;
}
.estudo-val { margin: 0; font-size: 14px; color: var(--sand); line-height: 1.55; white-space: pre-wrap; }
/* Pastas OneDrive — status */
.folders-status { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.folders-status .panel-sub { margin: 0; }
.folders-retry { margin-top: 4px; }
/* Toast mínimo */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
z-index: 3000; max-width: min(90vw, 460px);
background: var(--onyx-2); color: var(--sand);
border: 1px solid var(--hairline-gold); border-radius: var(--radius);
padding: 12px 20px; font-size: 14px; line-height: 1.4;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
opacity: 0; pointer-events: none; transition: opacity 0.24s ease, transform 0.24s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
/* =====================================================================
GUARDAS DE [hidden] — 31/07
Regra de CSS que define `display` VENCE o atributo hidden do HTML, porque
hidden funciona pelo display:none da folha do navegador, que e da camada do
agente. Sem estas guardas, elemento que a aplicacao esconde por hidden
continua aparecendo. Foi assim que o aviso "inbox disponivel quando o
WhatsApp estiver conectado" apareceu junto com a conversa carregada.
O projeto ja guardava .auth-gate, .lead-modal e .fin-notice; estes faltavam.
===================================================================== */
.app[hidden],
.lead-inbox[hidden],
.ws-open-btn[hidden],
.pipe-line-picker[hidden],
.nav-scrim[hidden] { display: none; }
/* Mesma armadilha nas ABAS do Pipeline: `.kanban{display:grid}` e
`.pipe-conv{display:grid}` venceriam o atributo hidden e as duas visões
apareceriam empilhadas na mesma tela. Sem estas duas linhas a aba não troca
nada. `.conv-thread-card` e `.conv-empty` não precisam de guarda: nenhum CSS
define display neles, então o hidden do HTML vale. */
.kanban[hidden],
.pipe-conv[hidden] { display: none; }
/* Guarda para o que o JS esconde por PAPEL (data-owner-only): nav do Financeiro,
card da home e a view. Sem isto, `.nav-item{display:flex}` e
`.dash-card{display:flex}` vencem o atributo hidden e o membro CONTINUA VENDO
o Financeiro, mesmo com a navegacao bloqueada. Precisa de !important porque
`.view.is-active` empata em especificidade com `[data-owner-only][hidden]`.
A varredura de 31/07 nao pegou estes: ela cobriu so quem nasce hidden no HTML,
e estes sao escondidos em tempo de execucao. */
[data-owner-only][hidden] { display: none !important; }
/* A LISTA que o navegador abre num