/* ============================================================
FONTES AUTO-HOSPEDADAS
A CSP do projeto (helmet, server.js:19-22) permite style-src e
font-src apenas 'self'. As seis páginas pediam a fonte em
fonts.googleapis.com e o navegador BLOQUEAVA — desde o pentest de
25/05 a interface inteira rodava na fonte do sistema, sem ninguém
perceber. Confirmado no Chromium desta VPS em 14/08/2026.
Servindo da própria VPS o bloqueio some, a rede corporativa da Vivo
deixa de ser um risco e a tipografia da marca (Figtree, substituta da
Vivo Type) finalmente aparece.
============================================================ */
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/figtree-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/figtree-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/figtree-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/figtree-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('fonts/figtree-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* styles.css pede 'Space Grotesk' e 'Inter Tight' em dezenas de regras.
Em vez de editar as 2.500 linhas — que esta task não pode tocar — os
dois nomes apontam para o arquivo da Figtree. Toda regra existente
passa a renderizar a tipografia da marca sem ser reescrita. */
@font-face { font-family: 'Space Grotesk'; src: url('fonts/figtree-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/figtree-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/figtree-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; src: url('fonts/figtree-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ============================================================
VIVO THEME — Cockpit do Farmer
Redefine os tokens que ja existem em frontend/styles.css com
a paleta Vivo. Carregue DEPOIS de styles.css:
Nao substitui styles.css e nao mexe em layout — so em cor,
sombra, gradiente e familia tipografica.
Roxo #660099 e a cor proprietaria oficial da Vivo. A rampa de
roxos, os acentos e as semanticas sao proposta de design para
este CRM — confirmar com o time de marca.
============================================================ */
:root {
/* ============================================================
TOKENS OFICIAIS DA VIVO — design system Mística (Telefônica),
skin `vivo`. Não são escolha de gosto: vieram do repositório
que governa o vivo.com.br. O GV escolheu esta direção em
15/08/2026, depois de comparar três no Claude Design.
A virada é grande: a tela era escura por decisão de 14/08 e
passa a ser CLARA, porque é assim que a marca se apresenta —
e porque sala clara com tela escura é onde o contraste se
perde na projeção da reunião de segunda.
============================================================ */
/* ---- paleta Vivo, valores oficiais ---- */
--vivo-roxo: #660099;
--vivo-roxo-escuro: #461E5F;
--vivo-roxo-profundo: #461E5F;
--vivo-roxo-tela: #FFFFFF;
--vivo-roxo-medio: #751AA3;
--vivo-lilas: #B280CC;
--vivo-lilas-claro: #E0CCEB;
--vivo-lilas-fundo: #EFE5F4;
--vivo-rosa: #EB3D7D;
--vivo-laranja: #FDAB3D;
/* O positivo da Vivo é o verde-limão. Ele preenche muito bem e lê
mal: barra e fundo usam --vivo-verde, texto usa --vivo-verde-esc. */
--vivo-verde: #00C875;
--vivo-verde-esc: #00C875;
--vivo-turquesa: #00C875;
--vivo-azul: #579BFC;
--vivo-amarelo: #FDAB3D;
--vivo-pepper: #D6304B;
--vivo-fonte: "Vivo Type", Figtree, -apple-system, system-ui, sans-serif;
/* ---- cinzas oficiais ---- */
--c1: #F6F6F6; --c2: #EEEEEE; --c3: #DDDDDD;
--c4: #8A8C90; --c5: #666666; --c6: #000000;
/* ---- raios oficiais: botão é pílula, container é generoso ---- */
--r-botao: 32px;
--r-cont: 24px;
--r-input: 16px;
--r-tag: 10px;
--r-barra: 999px;
/* Fundos — no claro a hierarquia inverte: o cartão é branco e o
fundo da página é que recua para o cinza. */
--bg: #FAFAFA;
--bg-panel: #FFFFFF;
--bg-elev: #FFFFFF;
--bg-card: #FFFFFF;
--surface: #F6F6F6;
/* Bordas: linha cinza, não luz sobre escuro */
--border: #EEEEEE;
--border-bright: #B280CC;
--border-focus: #660099;
--border-hi: #B280CC;
/* Texto */
--text: #000000;
--text-dim: #666666;
--text-faded: #666666;
--text-mute: #666666;
/* Marca. --blue é FUNDO de botão com texto branco em várias telas:
tem de ser o roxo cheio. */
--blue: #660099;
--blue-bright: #660099;
--blue-glow: rgba(102,0,153,0.14);
--indigo: #660099;
--purple: #660099;
--purple-bright: #660099;
--purple-glow: rgba(102,0,153,0.20);
--blue-lt: #EFE5F4;
/* Acentos */
--cyan: #006BD6;
--cyan-bright:#579BFC;
--teal: #007A52;
--emerald: #007A52;
--silver: #8A8C90;
/* Estado — no claro, texto precisa do tom escuro; preenchimento
usa o tom vivo. */
--hot: #B02138;
--hot-glow: rgba(214,48,75,0.14);
--warm: #9C6306;
--warm-glow: rgba(253,171,61,0.16);
--cool: #006BD6;
--cold: #8A8C90;
--success: #007A52;
--danger: #B02138;
--green: #007A52;
--green-lt: #EDF8E8;
--red: #B02138;
/* Aliases */
--muted: #666666;
--text-muted: #666666;
--bg-hover: #EFE5F4;
/* Gradientes */
--grad-primary: linear-gradient(135deg, #660099 0%, #8433AD 100%);
--grad-hot: linear-gradient(135deg, #D6304B 0%, #FDAB3D 100%);
--grad-green: linear-gradient(135deg, #00C875 0%, #C4E86B 100%);
--grad-warm: linear-gradient(135deg, #FDAB3D 0%, #FFB84C 100%);
--grad: linear-gradient(135deg, #660099 0%, #8433AD 100%);
/* Sombras: no claro elas são suaves e curtas, não poços pretos */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 16px rgba(0,0,0,0.08);
--shadow-lg: 0 12px 36px rgba(0,0,0,0.10);
--shadow: 0 4px 16px rgba(0,0,0,0.08);
--shadow-blue:0 6px 20px rgba(102,0,153,0.20);
/* A superfície que antes era "vidro" sobre escuro agora é cartão
branco com borda: o nome do token continua, o efeito muda. */
--vidro: #FFFFFF;
--vidro-borda: #EEEEEE;
}
/* O fundo da tela não é chapado: um halo roxo no alto puxa o olho para o
topo, onde ficam a marca e os números do mês. */
body {
background: var(--bg);
background-image:
radial-gradient(900px 480px at 88% -18%, rgba(102,0,153,0.055), transparent 66%),
radial-gradient(620px 400px at 4% 0%, rgba(153,204,51,0.06), transparent 70%);
background-attachment: fixed;
color: var(--text);
}
/* Campos de formulário no escuro: o navegador insiste em fundo branco. */
input, select, textarea {
color-scheme: light;
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
/* Barras de rolagem combinando com a tela */
* { scrollbar-color: #DDDDDD transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #B280CC; }
*::-webkit-scrollbar-track { background: transparent; }
/* ---- tipografia ------------------------------------------
Vivo Type e a fonte oficial (licenca interna). Sem ela,
Figtree e a substituta mais proxima. Auto-hospede o WOFF2 na
VPS: rede corporativa costuma bloquear fonts.googleapis.com.
'Inter Tight' e 'Space Grotesk' saem; JetBrains Mono fica
apenas em numero e codigo, nunca em rotulo de interface.
---------------------------------------------------------- */
body,
.brand-mark,
.hero-greeting,
.panel-title,
.kpi-value,
.col-count, .k-col-count,
.score-ring .num, .score-detail-ring .num,
.empty-state h3,
.table-header h3,
.modal-head h2,
.copilot-title,
.hoje-pos, .hoje-nome,
.vender-nome,
.blindagem-stat-value,
.funil-kpi-val, .funil-alert-title,
footer em {
font-family: var(--vivo-fonte);
}
.hero-greeting, .panel-title, .kpi-value { letter-spacing: -0.025em; }
.kpi-label, .col-name, .k-col-nome, .panel-meta, .tab .num,
.pill, .product-tag, .hoje-tag, .action-btn, .field-cell label,
.form-field label, .drawer-section h4, .modal-section-title,
.copilot-sub, .blindagem-stat-label, .funil-kpi-lbl, .ai-label {
font-family: var(--vivo-fonte);
font-weight: 600;
}
.mrr, .days-left, .kpi-delta, .deal-value, .k-card-valor,
.client-meta, .motivo-peso, table td .num {
font-variant-numeric: tabular-nums;
}
/* ---- literais que nao passam por variavel ---------------- */
.btn-primary:hover { box-shadow: 0 8px 28px rgba(102,0,153,0.32); }
.btn-ai {
background: linear-gradient(135deg, rgba(138,43,190,0.08), rgba(102,0,153,0.06));
border-color: rgba(138,43,190,0.30);
}
.btn-ai:hover {
background: linear-gradient(135deg, rgba(138,43,190,0.14), rgba(102,0,153,0.10));
box-shadow: 0 4px 12px rgba(138,43,190,0.15);
}
.ai-briefing {
background: linear-gradient(135deg, rgba(138,43,190,0.05) 0%, rgba(102,0,153,0.03) 100%);
border-color: rgba(138,43,190,0.20);
}
.kpi { background: linear-gradient(160deg, rgba(197,155,224,0.07) 0%, var(--bg-card) 55%); }
.kpi:hover { border-color: rgba(138,43,190,0.35); }
/* ── ABAS · pílulas sólidas (opção A, aprovada pelo GV em 24/08/2026) ──
*
* A aba ativa se distinguia por um sublinhado de 3px e um fundo lilás de 8%
* de opacidade. Contra o branco da barra isso é quase nada, e o número
* (01, 02…) tinha a mesma cor da moldura — nem o destaque nem a numeração
* ajudavam a achar onde se está. "as abas precisam estar mais visíveis,
* realce, com destaque na cor roxa."
*
* Estas regras vivem AQUI e não no `styles.css` de propósito: o
* `vivo-theme.css` carrega depois e é quem tem a última palavra sobre a
* aparência das abas. Mexer só no styles.css não mudaria a tela.
*
* Vale para as duas telas — as dez abas do cockpit e as nove do painel do
* GV usam as mesmas classes.
*/
.tabs { gap: 6px; padding: 10px 32px; border-bottom: 2px solid var(--vivo-lilas-claro, #E0CCEB); }
.tab {
padding: 9px 15px;
border-radius: 10px;
border-bottom: none; /* o sublinhado deu lugar à pílula */
transition: background .18s, color .18s, box-shadow .18s;
}
.tab .num { transition: inherit; }
.tab:hover { background: rgba(197,155,224,0.20); color: var(--vivo-roxo, #660099); }
.tab:hover .num {
background: #FFF; color: var(--vivo-roxo, #660099);
border-color: var(--vivo-lilas, #B280CC);
}
.tab.active {
background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
color: #FFF;
font-weight: 700;
border-bottom-color: transparent;
box-shadow: 0 6px 18px rgba(102,0,153,0.34);
}
/* O número acompanha a pílula: vidro branco sobre o roxo, para continuar
legível sem competir com o rótulo. */
.tab.active .num {
background: rgba(255,255,255,0.22);
color: #FFF;
border-color: rgba(255,255,255,0.30);
font-weight: 800;
}
/* Dentro da pílula roxa o traço do ícone tem de virar branco — ele usa
`currentColor`, então segue o rótulo sozinho, mas o `fill` não. */
.tab.active .ic { color: #FFF; }
/* O badge continua vermelho em qualquer estado: ele conta coisa a fazer, e
misturá-lo com o destaque da aba tiraria a leitura dele. Sobre o roxo,
ganha só um anel branco para não encostar no fundo. */
.tab.active .badge { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
.pill:hover, .pill.active { border-color: rgba(102,0,153,0.40); background: rgba(197,155,224,0.09); }
tr:hover td { background: rgba(197,155,224,0.06); }
.product-tag.blue { border-color: rgba(102,0,153,0.30); background: rgba(197,155,224,0.08); }
.action-btn:hover { border-color: rgba(102,0,153,0.40); background: rgba(197,155,224,0.07); }
.k-cards.dragover { background: rgba(197,155,224,0.010); border-color: var(--blue-bright); }
.k-card-torre-rv { color: var(--vivo-lilas); }
.k-card-impl-badge, .k-card-btn-impl { color: var(--blue-bright); }
.k-card-btn-impl { background: rgba(197,155,224,0.011); border-color: rgba(138,43,190,0.25); }
.k-card-btn-impl:hover { background: rgba(138,43,190,0.16); }
.hoje-card:hover { border-color: rgba(102,0,153,0.30); }
.hoje-tag.blind { border-color: rgba(138,43,190,0.30); background: rgba(197,155,224,0.08); }
.hoje-tag.big { border-color: rgba(102,0,153,0.30); background: rgba(197,155,224,0.08); }
.vender-card:hover, .vender-card.active { border-color: rgba(102,0,153,0.30); }
.vender-card.active { background: rgba(197,155,224,0.06); }
.vender-badge-rotas { background: rgba(197,155,224,0.011); }
.vender-rota-num { background: rgba(197,155,224,0.12); }
.subtab-count { background: rgba(197,155,224,0.10); }
.subtab.active .subtab-count { background: rgba(197,155,224,0.15); }
.blindagem-stat { border-color: rgba(138,43,190,0.20); }
.ai-output { background: rgba(197,155,224,0.07); border-color: rgba(138,43,190,0.20); }
.modal-foot { background: linear-gradient(135deg, var(--bg-elev) 0%, var(--bg-panel) 100%); }
.suggestion:hover { border-color: rgba(102,0,153,0.30); background: rgba(197,155,224,0.07); }
.msg-user { background: rgba(197,155,224,0.09); }
.rv-kpi.projetada, .rv2-kpi-proj { border-color: var(--blue-bright); }
.rv-kpi.projetada .rv-kpi-value, .rv2-kpi-proj .rv2-kpi-val, .rv-th-month { color: var(--blue-bright) !important; }
.rv-kpi.maximo, .rv2-kpi-max { border-color: var(--blue-bright); }
.rv-kpi.maximo .rv-kpi-value, .rv2-kpi-max .rv2-kpi-val { color: var(--blue-bright); }
.rv-table tbody tr:hover td { background: rgba(197,155,224,0.07); }
.rv-input.future { border-color: var(--blue-bright); }
.rv-subrow td { background: rgba(197,155,224,0.06); }
.rv-table tr.rv-subrow:hover td { background: rgba(197,155,224,0.09); }
.rv-ese-slider { accent-color: var(--blue-bright); }
.rv2-ese-result, .rv-ese-result { background: rgba(197,155,224,0.011); }
.ap-drop-item:hover, .cliente-drop-item:hover { background: rgba(197,155,224,0.09); }
.prod-rv-pill.fcv { background: rgba(138,43,190,0.12); color: var(--blue-bright); border-color: rgba(138,43,190,0.35); }
.prod-rv-pill.fcv:hover { background: rgba(138,43,190,0.22); }
::selection { background: rgba(197,155,224,0.18); color: var(--text); }
/* ---- 4 regras de styles.css que o handoff não listou ----------------
Ficaram com o violeta antigo escrito na mão. Como styles.css não é
editado nesta task, a correção vive aqui. ------------------------- */
.copilot-head { background: linear-gradient(135deg, rgba(102,0,153,0.08) 0%, var(--bg-elev) 100%); }
.k-card:hover { box-shadow: 0 8px 28px rgba(102,0,153,0.18); }
.rv2-totais { background: linear-gradient(135deg, var(--bg-elev) 0%, rgba(102,0,153,0.06) 100%); }
.brief-badge { background: rgba(197,155,224,0.15); }
/* ═══ LEGIBILIDADE — "as letras estão quase apagadas" (GV, 25/08/2026) ═════
*
* O GV não conseguia ler a Rotina. Medido com Playwright na tela real: os
* NÚMEROS estavam em preto puro (21:1) e TUDO que diz o que o número
* significa — nome do GN na coluna, rótulo de KPI, botão de modo — estava
* em #666 a 10-11px, maiúsculas, monoespaçada e com letter-spacing: 5,74:1.
* O dado lia; o rótulo não. Daí "difícil entender o que está lá".
*
* Três causas somadas, nenhuma com erro de console:
*
* 1. Os três cinzas do styles.css (#334155 · #64748B · #94A3B8) foram
* achatados neste arquivo para um só #666666. Sem escala, "secundário"
* e "quase invisível" saíam idênticos — sempre no tom mais fraco.
* 2. Rótulo de interface em JetBrains Mono, contra a regra escrita na
* linha 302 deste próprio arquivo ("JetBrains Mono fica apenas em
* número e código, nunca em rótulo de interface"). Mono + caixa alta
* + letter-spacing afina o traço e é o que dá o ar de apagado.
* 3. `--border: #EEEEEE` é 1,19:1 contra o branco. Numa matriz de 14
* linhas x 6 colunas a divisória some e o olho perde a fileira no
* caminho até a coluna TIME.
*
* Decisão do GV: vale para o tema inteiro, e pode escurecer o #666 — que é
* o cinza oficial da Mística (--c5). A marca perde o tom exato; a tela
* ganha a leitura. Escala restaurada em três degraus, todos AAA.
* ═════════════════════════════════════════════════════════════════════════ */
:root {
--text-dim: #333333; /* texto secundário — 12,6:1 */
--text-faded: #3A3A3A; /* rótulo — 11,4:1 (era 5,74:1) */
--text-mute: #555555; /* o mais fraco que a tela aceita — 7,5:1 */
--muted: #555555;
--text-muted: #555555;
/* Divisória de grade. #DDDDDD é --c3, cinza OFICIAL da Vivo: aqui não se
desvia da marca, só se usa o degrau certo dela. Token próprio para não
engrossar a moldura dos cartões, que com #EEE está correta. */
--border-grade: #DDDDDD;
--zebra: #FAFAFA;
}
/* ---- rótulo de interface volta para a fonte da marca --------------------
Só RÓTULO. Número e código continuam monoespaçados — é o que alinha as
colunas de valor, e mexer neles quebraria a grade. */
.panel-meta, .col-name, .k-col-nome, .k-col-total, .funil-kpi-lbl,
.k-empty, .k-badge-prob, .brand-tag,
.rot-col-label, .rot-lbl, .rot-tabela th, .btn-sm {
font-family: var(--vivo-fonte);
letter-spacing: .02em;
}
/* Os rótulos que o GV lê de longe, na reunião: tamanho e peso, não só cor. */
.funil-kpi-lbl { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.brand-tag, .panel-meta { font-size: 11px; }
.btn-sm { font-size: 12px; font-weight: 600; }
/* ---- a grade precisa de trilho -----------------------------------------
Cabeçalho de coluna é a chave de leitura da matriz: é ele que diz de quem
é o número. Vai a preto, 13px/700 — não é rótulo acessório. */
.rot-tabela th { font-size: 13px; font-weight: 700; color: #000; }
.rot-matriz th.rot-prod-h { color: var(--vivo-roxo); }
.rot-tot-col { color: #000; }
.rot-tabela td { border-bottom-color: var(--border-grade); }
.rot-tabela tbody tr:nth-child(even) td,
.rot-matriz tbody tr:nth-child(even) td.rot-prod { background: var(--zebra); }
/* `.rot-sub`, `.rot-total` e `.rot-tot-col` pedem destaque com
`var(--bg-elev)` — e este tema define --bg-elev: #FFFFFF, igual ao painel.
"Total Voz", "TI Recorrente" e a coluna TIME achavam que tinham fundo e
não tinham. Mesmo branco-sobre-branco já registrado no CLAUDE.md; aqui
sai explícito, sem token que o tema inverta.
A coluna TIME precisa vencer a zebra por especificidade, senão ela lista:
o total do time é uma coluna só e tem de ser lido como um bloco. */
.rot-tabela .rot-sub td, .rot-matriz .rot-sub td.rot-prod,
.rot-tabela .rot-total td, .rot-matriz .rot-total td.rot-prod,
.rot-tabela tbody tr:nth-child(even) td.rot-tot-col,
.rot-tabela th.rot-tot-col,
.rot-tot-col { background: #F2F2F2; }
.rot-row:hover { background: var(--zebra); }
/* Célula editável estava em Arial: o input não herda font-family, e ninguém
a declarou. Fica na fonte da casa — em peso 400 e mais larga, porque a
Figtree é mais larga que a Arial e `1234.56` cortava em 84px. */
.rot-in { font-family: var(--vivo-fonte); }
.rot-matriz .rot-in { width: 96px; }
/* ═════════════════════════════════════════════════════════════════════════
ROTINA · O MÉTODO DE COR (GV, 02/09/2026)
Desenhado no Claude Design ("Rotina em cores", opção 2b) e aprovado antes
de virar código.
O pedido foi "mais vida e transparência, quebra o branco e o roxo" — a
tela ia como print para a diretoria e não dizia nada de longe. A resposta
NÃO é enfeite: são duas camadas de cor, cada uma respondendo a uma
pergunta, e nada além disso.
1. a FAIXA do grupo diz ONDE — tom médio, texto escuro por cima
2. o BLOCO do status diz COMO FOI — tom saturado, mais denso que a faixa
Uma terceira camada (cor por pessoa) foi construída e descartada: colidia
com as outras duas — Celso ficava com o mesmo rosa do grupo Móvel. Cor que
serve a dois códigos não serve a nenhum. Quem identifica a coluna é o nome.
Todas as cores vão EXPLÍCITAS. Este arquivo inverte --bg-panel/--bg-elev e
achata os cinzas; usar token aqui já produziu branco sobre branco duas
vezes neste projeto.
═════════════════════════════════════════════════════════════════════════ */
:root {
/* Três torres, três hues (GV, 02/09/2026). O Core herda o rosa porque o
Pós-Pago, que abria a antiga faixa Móvel, é a primeira linha dele. */
--rot-core: #FF5AC4; --rot-ti: #579BFC; --rot-emi: #9CD326;
--rot-ok: #00C875; --rot-med: #FDAB3D; --rot-bad: #D6304B; --rot-ext: #8E4DD1;
--rot-cant-cor: #FF158A; --rot-real-cor: #0073EA;
--rot-tinta: #181B34;
}
/* ---- os quatro cartões do topo ---------------------------------------
Quatro, não sete: os totais por produto já estão na coluna TIME, e
repeti-los era a mesma conta duas vezes na mesma tela. */
#rotina-kpi-bar .rot-k {
border-radius: 18px; padding: 17px 19px 15px;
display: flex; flex-direction: column; position: relative; overflow: hidden;
}
#rotina-kpi-bar .rot-k::after { content: none; }
.rot-k-rot { margin: 0 0 8px; font-family: var(--vivo-fonte);
font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rot-k-num { margin: 0; font-size: 38px; font-weight: 800; line-height: .9;
letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.rot-k-num small { font-size: 17px; font-weight: 700; opacity: .62; margin-right: 2px; }
.rot-k-sem { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.rot-k-leg { margin: 9px 0 0; font-size: 11.5px; line-height: 1.4; font-weight: 500; }
.rot-k-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.rot-k-tags span { font-family: var(--vivo-fonte); font-size: 10px; font-weight: 800;
letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.rot-k.k-cant { background: var(--rot-cant-cor); color: #FFF; }
.rot-k.k-real { background: var(--rot-real-cor); color: #FFF; }
.k-cant .rot-k-rot, .k-real .rot-k-rot { color: rgba(255,255,255,.92); }
.k-cant .rot-k-leg, .k-real .rot-k-leg { color: rgba(255,255,255,.94); }
.k-cant .rot-k-tags span, .k-real .rot-k-tags span { background: rgba(255,255,255,.24); color: #FFF; }
/* Os dois últimos cartões são VEREDITO, não identidade: a cor sai do
resultado. É o que faz a diretora ver verde e vermelho antes de ler. */
.rot-k.f-ok { background: var(--rot-ok); color: var(--rot-tinta); }
.rot-k.f-med { background: var(--rot-med); color: var(--rot-tinta); }
.rot-k.f-bad { background: var(--rot-bad); color: #FFF; }
.rot-k.f-nil { background: #E9EAF2; color: var(--rot-tinta); }
.rot-k.f-ok .rot-k-rot, .rot-k.f-med .rot-k-rot, .rot-k.f-nil .rot-k-rot { color: rgba(24,27,52,.78); }
.rot-k.f-bad .rot-k-rot { color: rgba(255,255,255,.92); }
.rot-k-bar { height: 9px; border-radius: 999px; background: rgba(24,27,52,.22);
margin-top: 12px; overflow: hidden; position: relative; }
.rot-k.f-bad .rot-k-bar { background: rgba(255,255,255,.30); }
.rot-k-bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--rot-tinta); }
.rot-k.f-bad .rot-k-bar b { background: #FFF; }
.rot-k-bar u { position: absolute; top: -3px; bottom: -3px; left: 76.9%; width: 2px;
background: rgba(24,27,52,.60); text-decoration: none; }
.rot-k.f-bad .rot-k-bar u { background: rgba(255,255,255,.80); }
.rot-k-pe { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
font-family: var(--vivo-fonte); font-size: 9.5px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; }
.rot-k.f-bad .rot-k-pe { color: rgba(255,255,255,.84); }
.rot-k.f-ok .rot-k-pe, .rot-k.f-med .rot-k-pe, .rot-k.f-nil .rot-k-pe { color: rgba(24,27,52,.70); }
/* ---- cabeçalho de coluna: quem é o dono do número --------------------- */
.rot-matriz .rot-col { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rot-av { width: 30px; height: 30px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; background: var(--rot-tinta);
color: #FFF; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.rot-gn { font-size: 13.5px; font-weight: 700; color: #000; }
.rot-fora { font-size: 11px; color: #555; }
.rot-pips { display: flex; gap: 3px; }
.rot-pip { width: 7px; height: 5px; border-radius: 1px; background: #D5D8E4; display: block; }
.rot-pip.on { background: var(--rot-tinta); }
/* ---- a faixa do grupo ------------------------------------------------- */
.rot-tabela .rot-banda td { padding: 7px 14px; border-bottom: none; text-align: left; }
.rot-banda-n { font-family: var(--vivo-fonte); font-size: 11.5px; font-weight: 800;
letter-spacing: .15em; text-transform: uppercase; color: var(--rot-tinta); }
.rot-banda-c { font-family: var(--vivo-fonte); font-size: 10.5px; font-weight: 700;
letter-spacing: .04em; color: rgba(24,27,52,.88); margin-left: 10px; }
/* .66 dava 3,43:1 num rotulo de 10,5px sobre a faixa colorida; .88 passa. */
.rot-banda.g-core td { background: var(--rot-core); }
.rot-banda.g-ti td { background: var(--rot-ti); }
.rot-banda.g-emi td { background: var(--rot-emi); }
/* A linha inteira recebe um véu da cor do grupo: é o que deixa o olho
atravessar sete colunas sem perder a fileira. A zebra sai — duas
listras somadas viram sujeira. */
.rot-matriz tbody tr.g-core td { background: rgba(255,90,196,.07); }
.rot-matriz tbody tr.g-ti td { background: rgba(87,155,252,.08); }
.rot-matriz tbody tr.g-emi td { background: rgba(156,211,38,.09); }
.rot-matriz tbody tr:nth-child(even) td,
.rot-matriz tbody tr:nth-child(even) td.rot-prod { background: inherit; }
.rot-matriz tbody tr.rot-sub td { background: #EFEFF4; }
.rot-tabela td { vertical-align: middle; }
/* ---- o bloco de status ------------------------------------------------ */
.rot-chip { display: inline-block; min-width: 62px; padding: 6px 12px; border-radius: 9px;
font-family: var(--vivo-fonte); font-size: 15px; font-weight: 800;
letter-spacing: -.015em; font-variant-numeric: tabular-nums; text-align: center; }
.rot-chip.ok { background: var(--rot-ok); color: #00301C; }
.rot-chip.med { background: var(--rot-med); color: #40260A; }
.rot-chip.bad { background: var(--rot-bad); color: #FFF; }
.rot-chip.ext { background: var(--rot-ext); color: #FFF; }
.rot-chip.nil { background: transparent; color: #A8ACBE; font-weight: 700; }
/* O cantado é METADE da informação: sem ele o bloco é um número sem régua.
Vai legível — a queixa de 25/08 foi exatamente rótulo apagado. */
.rot-cant { display: block; margin-top: 4px; font-family: var(--vivo-fonte);
font-size: 10.5px; font-weight: 700; color: #3A3A3A; }
.rot-cant em { font-style: normal; font-weight: 800; }
.rot-cant em.mais { color: #00794A; }
.rot-cant em.menos { color: #C11838; }
.rot-tabela td.rot-cmp { text-align: center; }
/* ---- coluna TIME: destaque por PESO, não por mais um hue -------------- */
.rot-tabela th.rot-tot-col { background: #000; color: #FFF; }
.rot-matriz tbody tr td.rot-tot-col { background: #EDEEF4; }
.rot-tabela .rot-total td.rot-tot-col { background: #000; }
.rot-tabela .rot-total td { background: var(--rot-tinta); color: #FFF; border-bottom: none; }
.rot-tabela .rot-total td.rot-prod { color: #FFF; }
.rot-total .rot-cant { color: rgba(255,255,255,.80); }
.rot-total .rot-cant em.mais { color: #4AE0A0; }
.rot-total .rot-cant em.menos { color: #FF7A93; }
.rot-total .rot-chip.nil { color: rgba(255,255,255,.34); }
/* ---- linha de aderência: mesma régua, mesma paleta -------------------- */
.rot-ader td, .rot-dias td { background: #F4F5F9 !important; border-bottom: none; }
.rot-ader td.rot-prod, .rot-dias td.rot-prod { color: #000; }
.rot-pct { font-family: var(--vivo-fonte); font-size: 15px; font-weight: 800;
font-variant-numeric: tabular-nums; }
.rot-pct.f-ok { color: #00794A; }
.rot-pct.f-med { color: #9A5A00; }
.rot-pct.f-bai { color: #C11838; }
/* As duas linhas extras do mês herdam `.rot-total`, que pinta texto branco.
Elas são claras, então a cor volta ao preto — o mesmo branco-sobre-branco
de sempre, agora do lado do texto. */
.rot-ader td, .rot-dias td { color: #000 !important; }
.rot-dias td { font-family: var(--vivo-fonte); font-weight: 700; }
/* A FAIXA precisa vencer o véu da linha. `.rot-matriz tbody tr.g-movel td`
tem especificidade maior que `.rot-banda.g-movel td`, então a banda saía
com o mesmo rosa translúcido da linha e deixava de ser faixa. Mesmo erro
de --bg-elev: quem pede destaque tem de ganhar destaque. */
.rot-matriz tbody tr.rot-banda.g-core td { background: var(--rot-core); }
.rot-matriz tbody tr.rot-banda.g-ti td { background: var(--rot-ti); }
.rot-matriz tbody tr.rot-banda.g-emi td { background: var(--rot-emi); }
/* Cinto e suspensório na linha de total: mesmo sem a classe de grupo, ela
tem de vencer qualquer véu de linha que apareça depois. */
.rot-matriz tbody tr.rot-total td { background: var(--rot-tinta); color: #FFF; }
.rot-matriz tbody tr.rot-total td.rot-tot-col { background: #000; }
.rot-matriz tbody tr.rot-ader td, .rot-matriz tbody tr.rot-dias td { background: #F4F5F9; }
/* Sobrou um roxo do tema no canto da grade; a coluna de produto acompanha o
resto da paleta. */
.rot-matriz th.rot-prod-h { color: #181B34; }
/* O bloco de 25/08 já tinha `.rot-matriz .rot-total td.rot-prod{background:#F2F2F2}`,
que vence por especificidade e devolvia o cinza claro — com o `color:#FFF`
da linha por cima, o rótulo "Receita total" saía branco sobre cinza. Esta
regra existe só para ganhar daquela. */
.rot-matriz tbody tr.rot-total td.rot-prod { background: var(--rot-tinta); color: #FFF; }
.rot-matriz tbody tr.rot-ader td.rot-prod,
.rot-matriz tbody tr.rot-dias td.rot-prod { background: #F4F5F9; color: #000; }
/* A tradução da sigla anda junto do rótulo, no mesmo tom escuro da faixa —
é informação, não nota de rodapé. */
.rot-banda-d { font-family: var(--vivo-fonte); font-size: 11px; font-weight: 700;
letter-spacing: .01em; color: rgba(24,27,52,.80); margin-left: 9px; }
/* ── A TIRA DO PC POR DIA ÚTIL (GV, 02/09/2026) ─────────────────────────
Substituiu os quatro cartões de cantado/realizado/aderência. Eles diziam
COMO FOI; esta tira diz O QUE FAZER HOJE — por torre, quanto falta do PC
e quanto isso dá por dia útil restante.
A cor sai do RITMO, não do atingimento cru: no dia 2 de 22 tudo estaria
vermelho e a cor não diria nada. O traço na barra marca onde o mês já
está — quem passou dele está no ritmo. */
#rotina-kpi-bar.rot-pc { display: block; }
.rot-pc-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rot-pc-t { font-family: var(--vivo-fonte); font-size: 12px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase; color: #181B34; }
.rot-pc-s { font-family: var(--vivo-fonte); font-size: 11.5px; font-weight: 600; color: #4A4F68; }
.rot-pc-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.rot-t { border-radius: 14px; padding: 12px 13px 11px; background: #FFFFFF;
border: 1.5px solid #E6E9F0; position: relative; overflow: hidden; }
.rot-t::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.rot-t.f-ok::before { background: #00C875; }
.rot-t.f-med::before { background: #FDAB3D; }
.rot-t.f-bad::before { background: #D6304B; }
.rot-t.f-nil::before { background: #C7CBD9; }
.rot-t-n { margin: 0 0 7px 6px; font-family: var(--vivo-fonte); font-size: 10.5px;
font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #4A4F68; }
.rot-t-v { margin: 0 0 0 6px; font-size: 25px; font-weight: 800; line-height: 1;
letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: #000; }
.rot-t-v small { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #4A4F68; margin-left: 3px; }
.rot-t-ok { color: #00794A; font-size: 20px; }
.rot-t-f { margin: 8px 0 0 6px; font-family: var(--vivo-fonte); font-size: 11px;
font-weight: 600; color: #4A4F68; }
.rot-t-f b { font-weight: 800; color: #181B34; }
.rot-t-bar { height: 7px; border-radius: 999px; background: #EDEEF4; margin: 9px 0 0 6px;
position: relative; overflow: hidden; }
.rot-t-bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.rot-t.f-ok .rot-t-bar b { background: #00C875; }
.rot-t.f-med .rot-t-bar b { background: #FDAB3D; }
.rot-t.f-bad .rot-t-bar b { background: #D6304B; }
.rot-t.f-nil .rot-t-bar b { background: #C7CBD9; }
.rot-t-bar u { position: absolute; top: -2px; bottom: -2px; width: 2px;
background: rgba(24,27,52,.55); text-decoration: none; }
@media (max-width: 1100px) { .rot-pc-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Mês sem PC cadastrado: a tela diz o que falta em vez de mostrar a soma das
grades com o rótulo "PC" — quatro vezes menor que o PC de verdade. */
.rot-pc-vazio { background: #FFF6E4; border: 1.5px solid #F3D9A4; border-radius: 14px;
padding: 13px 16px; font-family: var(--vivo-fonte); font-size: 12.5px;
line-height: 1.55; color: #4A3B14; }
.rot-pc-vazio b { font-weight: 800; color: #2E2408; }
.rot-pc-vazio a { font-weight: 800; color: #006BD6; }
/* Mês fechado não pede ritmo: "—/dia útil" lia como um número faltando. */
.rot-t-fim { color: #8A2436; font-size: 19px; }
/* O seletor de escopo da tira (Semana/Mês) — os dois números vêm no mesmo
payload, trocar é redesenho e não requisição. */
.rot-pc-esc { display: inline-flex; gap: 5px; margin-left: 4px; }
.rot-pc-esc .btn-sm { padding: 4px 12px; font-size: 11px; }
/* O verbo antes do número: sem ele o GV leu o que FALTA como o que foi feito. */
.rot-t-v i { font-style: normal; font-size: 13px; font-weight: 700; color: #4A4F68; margin-right: 7px; }
/* ══════════════════════════════════════════════════════════════════════
PALETA MONDAY NO PORTAL INTEIRO — direcao B, aprovada pelo GV 02/09/2026
("opcao b", depois de ver as duas no Claude Design)
A regra da direcao B: a COR FICA ONDE ELA INFORMA. Numero de KPI, faixa
de etapa, barra de GN, faixa de aging. A moldura -- topbar, abas, fundo,
bordas -- recua para o neutro, e o ROXO DA VIVO CONTINUA sendo a marca
(topo, logo, botao principal). Nao e enfeite: na Rotina a cor funcionou
porque significa torre e status, e espalhada em dez abas ela pararia de
significar.
CADA COR TEM DOIS PAPEIS E ELES NAO SE MISTURAM. Medido, nao chutado:
E MEDIDO CONTRA O PIOR FUNDO DO PORTAL, nao contra branco puro: a pagina e
#FAFAFA e a superficie e #F6F6F6. Medir contra #FFFFFF dava 4,55:1 para o
verde -- que vira 4,21:1 sobre #F6F6F6 e REPROVA. Tres das cinco tintas
cairam nessa e foram escurecidas depois de medir na tela.
TINTA (letra) pior fundo FUNDO (preenchimento) com tinta escura
#B02138 6,23:1 #D6304B 3,52:1
#007A52 4,98:1 #00C875 7,64:1
#006BD6 4,77:1 #579BFC 6,02:1
#8E4DD1 4,70:1 #FDAB3D 8,89:1
#9C6306 4,63:1 #9CD326 9,44:1
Por isso existem os pares `-fundo` e `-tinta`. Pintar texto com o tom de
fundo e o defeito que este projeto ja cometeu duas vezes (branco no branco
na aba MES, rotulo a 5,74:1 na Rotina). **Use `-tinta` para letra e
`-fundo` para preenchimento. Nunca o contrario.**
══════════════════════════════════════════════════════════════════════ */
:root {
/* --- os tons de PREENCHIMENTO: so com tinta escura por cima --- */
--md-azul-fundo: #579BFC;
--md-ciano-fundo: #0073EA;
--md-verde-fundo: #00C875;
--md-lima-fundo: #9CD326;
--md-ambar-fundo: #FDAB3D;
--md-vermelho-fundo: #D6304B;
--md-rosa-fundo: #FF158A;
--md-rosa-cl-fundo: #FF5AC4;
--md-roxo-fundo: #8E4DD1;
/* --- os tons de TEXTO: todos >= 4,5:1 sobre branco --- */
--md-azul-tinta: #006BD6;
--md-verde-tinta: #007A52;
--md-lima-tinta: #557F0D;
--md-ambar-tinta: #9C6306;
--md-vermelho-tinta: #B02138;
--md-rosa-tinta: #D6006E;
--md-roxo-tinta: #8E4DD1;
/* --- a tinta base da monday, para letra sobre fundo colorido claro --- */
--md-tinta: #181B34;
/* Estado: quem e LETRA recebe o tom escuro, quem e PREENCHIMENTO o vivo.
Os nomes abaixo ja existiam e sao consumidos como COR DE TEXTO nas
telas -- por isso recebem `-tinta`, nunca o tom de fundo. */
--hot: var(--md-vermelho-tinta);
--hot-glow: rgba(214,48,75,0.14);
--danger: var(--md-vermelho-tinta);
--red: var(--md-vermelho-tinta);
--warm: var(--md-ambar-tinta);
--warm-glow: rgba(253,171,61,0.20);
--success: var(--md-verde-tinta);
--green: var(--md-verde-tinta);
--green-lt: #E4F9EF;
--emerald: var(--md-verde-tinta);
--teal: var(--md-lima-tinta);
--cool: var(--md-azul-tinta);
--cyan: var(--md-azul-tinta);
--cyan-bright:var(--md-azul-tinta);
/* A MARCA NAO MUDA. `--blue`/`--purple` sao fundo de botao com texto
branco em varias telas e sao a assinatura da Vivo nos prints que o GV
manda para a diretoria. Ficam roxo #660099 de proposito. */
}
/* ══════════════════════════════════════════════════════════════════════
KPI NA DIRECAO B — a cor do cartao e a cor do que ele MEDE
Ate 02/09/2026 os cinco cartoes eram identicos: `.kpi-value` pinta o
numero com `--grad-primary` (o degrade roxo) recortado no texto, e
`.kpi::after` desenha a barra com o mesmo degrade. Resultado: cinco
numeros roxos, e a cor nao dizia nada -- so o Aging tinha variante.
Na direcao B a cor informa. Carteira e azul, Aging e vermelho,
Blindagem e ambar, Faturamento e verde, Score e roxo.
TODAS as cores aqui sao as `-tinta`, porque isto e LETRA sobre cartao
branco. Os tons de `-fundo` (#00C875, #FDAB3D, ...) dariam 2,2:1 e
1,9:1 -- ilegiveis. Ver a tabela no bloco da paleta, acima.
`-webkit-text-fill-color` precisa ser reposto: sem ele o numero herda o
`transparent` da regra do recorte e o cartao aparece VAZIO.
══════════════════════════════════════════════════════════════════════ */
.kpi.k-carteira { --kpi-cor: var(--md-azul-tinta); }
.kpi.k-aging,
.kpi.alert { --kpi-cor: var(--md-vermelho-tinta); }
.kpi.k-blindagem { --kpi-cor: var(--md-ambar-tinta); }
.kpi.k-receita { --kpi-cor: var(--md-verde-tinta); }
.kpi.k-score { --kpi-cor: var(--md-roxo-tinta); }
.kpi.k-carteira::after, .kpi.k-aging::after, .kpi.alert::after,
.kpi.k-blindagem::after, .kpi.k-receita::after, .kpi.k-score::after {
background: var(--kpi-cor);
opacity: 1;
}
.kpi.k-carteira .kpi-value, .kpi.k-aging .kpi-value, .kpi.alert .kpi-value,
.kpi.k-blindagem .kpi-value, .kpi.k-receita .kpi-value, .kpi.k-score .kpi-value {
background: none;
color: var(--kpi-cor);
-webkit-text-fill-color: var(--kpi-cor);
}
/* O cartao de Aging tinha lavagem vermelha propria. Na direcao B a moldura
recua: quem alerta e o numero, nao o cartao inteiro. */
.kpi.alert { background: linear-gradient(160deg, rgba(214,48,75,0.05) 0%, var(--bg-card) 55%); }
/* ══════════════════════════════════════════════════════════════════════
DESIGN VIVO — monday em todas as telas, sem subtitulo
(GV, 02/09/2026: "remova todos os subtitulos, utilize as cores da
monday.com igual esta nas paginas. todo o design precisa ser bem vivo!
porem a logica das informacoes precisam ser a mesma")
**So aparencia.** Nenhuma regra aqui esconde numero, muda ordem ou altera
conta. O que sai da tela e prosa explicativa; o que muda de cor ja estava
la com outra cor.
Este bloco vem DEPOIS do bloco da paleta monday e do bloco dos KPIs, e
consome os mesmos tokens `--md-*`. Cor de letra sai de `-tinta`, cor de
preenchimento de `-fundo` -- a regra que a tabela la em cima documenta.
══════════════════════════════════════════════════════════════════════ */
/* ── 1. FORA OS SUBTITULOS ──
Escopado ao cabecalho de proposito, e nao `.panel-sub` solto:
· `painel-gv.html` escreve MENSAGEM DE ERRO com essa classe
("Erro ao carregar delegacoes", "Voce esta cobrindo outro perfil").
Esconder tudo apagaria o aviso e o GV ficaria olhando uma lista vazia
sem saber por que.
· `.sub` das telas de login, convite e reset e INSTRUCAO
("Defina seu nome e uma senha"), nao enfeite. Fica. */
.panel-header .panel-sub,
.hero .hero-sub,
.pc-cab .pc-sub { display: none; }
/* Sem a linha de baixo o titulo precisa respirar diferente. */
.panel-header { align-items: center; }
.hero-greeting { margin-bottom: 4px; }
/* ── 2. TITULO COM COR, NAO COM TAMANHO ──
O `` dos titulos ja era o acento da marca. Continua roxo Vivo: e a
assinatura nos prints da diretoria, e o unico lugar do sistema onde o roxo
ainda manda. */
.panel-title { letter-spacing: -0.02em; }
.panel-title em { color: var(--blue); font-style: normal; }
/* ── 3. OS ROTULOS DE SECAO GANHAM COR ──
Eram todos o mesmo cinza. Numa tela com seis blocos, cinza igual faz o olho
procurar; cor faz ele encontrar. */
.panel-meta,
.dir-step-label { color: var(--md-azul-tinta); font-weight: 700; }
/* ── 4. AS ABAS ──
A ativa era degrade roxo. Vira degrade monday -- e o "bem vivo" que o GV
pediu -- mas o TOPO e o logo continuam roxos: a marca nao se negocia num
print que vai para a diretoria da Telefonica. */
.tab.active {
background: linear-gradient(135deg, var(--md-azul-tinta) 0%, var(--md-roxo-fundo) 100%);
}
.tab:hover:not(.active) { color: var(--md-azul-tinta); }
/* ── 5. CARTAO COM ARESTA COLORIDA ──
`.panel` e `.card` eram brancos com borda cinza de 1px. A aresta de cima
colorida da vida sem custar legibilidade nenhuma: e fundo, nao letra. */
.panel.active { position: relative; }
.panel.active::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 3px 3px 0 0;
background: linear-gradient(90deg,
var(--md-rosa-fundo) 0%, var(--md-azul-fundo) 25%, var(--md-lima-fundo) 50%,
var(--md-ambar-fundo) 75%, var(--md-verde-fundo) 100%);
}
/* ── 6. BOTAO PRINCIPAL ──
Continua roxo Vivo. Ele e o unico elemento que o GN clica sem ler, e trocar
a cor do botao de acao no meio do expediente e o tipo de mudanca que faz
alguem clicar errado. */
/* ── 7. CADA ABA COM A SUA COR ──
O numero da aba era um cinza so, em dez abas. Cor por posicao da ao olho um
ponto de referencia -- "a verde e a Rotina" -- que o cinza nunca deu.
TINTA ESCURA sobre os tons claros (ambar, verde, lima, azul claro): branco
sobre #FDAB3D e 1,90:1. A tabela no bloco da paleta explica. */
.tab .num {
color: #FFFFFF;
border-radius: 6px;
padding: 2px 6px;
font-weight: 800;
}
.tab:nth-of-type(1) .num { background: var(--md-rosa-fundo); }
.tab:nth-of-type(2) .num { background: var(--md-ciano-fundo); }
.tab:nth-of-type(3) .num { background: var(--md-lima-fundo); color: var(--md-tinta); }
.tab:nth-of-type(4) .num { background: var(--md-roxo-fundo); }
.tab:nth-of-type(5) .num { background: var(--md-ambar-fundo); color: var(--md-tinta); }
.tab:nth-of-type(6) .num { background: var(--md-verde-fundo); color: var(--md-tinta); }
.tab:nth-of-type(7) .num { background: var(--md-rosa-cl-fundo); color: var(--md-tinta); }
.tab:nth-of-type(8) .num { background: var(--md-azul-fundo); color: var(--md-tinta); }
.tab:nth-of-type(9) .num { background: var(--md-vermelho-fundo); }
.tab:nth-of-type(10) .num { background: var(--md-tinta); }
/* 11 a 14: a paleta tem NOVE cores e a regra parava na decima aba. Como
`.tab .num` e branco, numero sem fundo saia BRANCO SOBRE BRANCO -- Ferias e
Campanha estavam assim desde que nasceram, sem um erro de console, e so a
tela contou. O ciclo recomeca aqui, e a tinta escura acompanha o tom claro
pelo mesmo criterio das nove primeiras. */
.tab:nth-of-type(11) .num { background: var(--md-azul-fundo); color: var(--md-tinta); }
.tab:nth-of-type(12) .num { background: var(--md-ambar-fundo); color: var(--md-tinta); }
.tab:nth-of-type(13) .num { background: var(--md-roxo-fundo); }
.tab:nth-of-type(14) .num { background: var(--md-verde-fundo); color: var(--md-tinta); }
/* Na aba ATIVA o numero volta para o vidro branco: sobre o degrade colorido,
um segundo bloco de cor brigaria com ele. */
.tab.active .num { background: rgba(255,255,255,.24) !important; color: #FFFFFF !important; }
/* ── 8. ROTULO DE KPI E DE BLOCO ──
Eram `--text-faded`, o mesmo cinza de tudo. Escurecer ja resolveria a
leitura; dar cor resolve a NAVEGACAO -- o olho encontra o bloco sem ler. */
.kpi.k-carteira .kpi-label { color: var(--md-azul-tinta); }
.kpi.k-aging .kpi-label,
.kpi.alert .kpi-label { color: var(--md-vermelho-tinta); }
.kpi.k-blindagem .kpi-label { color: var(--md-ambar-tinta); }
.kpi.k-receita .kpi-label { color: var(--md-verde-tinta); }
.kpi.k-score .kpi-label { color: var(--md-roxo-tinta); }
/* ── 9. CARTAO COM ARESTA ──
Barra de 3px na esquerda. E fundo, nao letra: nao custa contraste nenhum e
quebra o campo de brancos que a tela virou depois que os subtitulos sairam. */
.card, .cli-kpi, .hoje-card, .brief-card {
position: relative; overflow: hidden;
}
.card::before, .cli-kpi::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--md-azul-fundo);
}
.card:nth-child(2n)::before, .cli-kpi:nth-child(2n)::before { background: var(--md-rosa-cl-fundo); }
.card:nth-child(3n)::before, .cli-kpi:nth-child(3n)::before { background: var(--md-lima-fundo); }
.card:nth-child(4n)::before, .cli-kpi:nth-child(4n)::before { background: var(--md-ambar-fundo); }
.card:nth-child(5n)::before, .cli-kpi:nth-child(5n)::before { background: var(--md-verde-fundo); }
/* ── 10. TAGS E CHIPS ──
Os selos de estado do sistema (`.hoje-tag`, `.brief-chip`, `.dir-selo`)
tinham lavagem de 5% e letra colorida -- corretos, mas apagados de longe.
Sobem para 12% de lavagem: continua letra escura sobre claro, so que
visivel do outro lado da sala, que e como o GV apresenta na reuniao. */
.hoje-tag, .brief-chip, .dir-selo, .est-chip {
font-weight: 700;
border-width: 1px;
border-style: solid;
}
/* ── 11. ESTRATEGIA EM DESTAQUE (GV, 02/09/2026) ──
"deixe em destaque para os GNs na aba de estrategias por produtos"
Cores explicitas, como todo o resto: `--bg-elev` e `--border` sao achatados
pelo tema e um cartao "em destaque" com token achatado ficaria igual aos
outros -- que e exatamente o oposto de destaque. */
.vender-card.destaque {
border-color: var(--md-rosa-fundo);
background: linear-gradient(160deg, #FFF0F8 0%, #FFFFFF 62%);
box-shadow: 0 2px 10px rgba(255,21,138,.14);
}
.vender-card.destaque:hover { border-color: var(--md-rosa-tinta); }
.vender-selo {
position: absolute; top: 10px; right: 10px;
background: var(--md-rosa-fundo); color: #FFFFFF;
font-size: 9px; font-weight: 800; letter-spacing: .12em;
padding: 3px 8px; border-radius: 999px;
}
.vender-card { position: relative; }
/* ── 12. BARRA DO "VER COMO" (GV, 02/09/2026) ──
Precisa ser impossivel de ignorar: o GV esta olhando a tela de OUTRA pessoa,
e confundir a carteira dele com a sua e o tipo de erro que so aparece na
reuniao. Por isso barra no topo, largura inteira, e nao um selo discreto. */
#ver-como-barra {
position: sticky; top: 0; z-index: 99990;
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 10px 18px;
background: var(--md-ambar-fundo); color: var(--md-tinta);
font-size: 13px; font-weight: 600;
box-shadow: 0 2px 8px rgba(24,27,52,.12);
}
#ver-como-barra button {
background: var(--md-tinta); color: #FFFFFF; border: none;
padding: 6px 14px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
#ver-como-barra button:hover { background: #000000; }
/* ══════════════════════════════════════════════════════════════════════
VENDER PRODUTO — a barra da estrategia (GV, 02/09/2026)
"o display de vender produtos ta horrivel, quando ele clica na estrategia
arrasta o navegador la pra baixo e nem deixa ele ler! as letras das
estrategias que ele esta alternando ficam pouco visiveis"
Duas causas, e as duas eram de LAYOUT, nao de cor:
1. o clique rolava a pagina ate a tabela, e o nome da estrategia ficava no
cartao que saiu da tela -- o GN lia uma lista sem saber de qual
estrategia ela era;
2. o nome vivia em `.vender-rota-label`, 11px dentro do cartao, competindo
com o nome do produto e a descricao no mesmo espaco.
A regra da monday aqui: **o controle mora onde o olho esta**. A barra e
sticky no topo da lista, carrega o nome em 20px, a descricao, o passo
(2 de 6) e o botao de alternar. Rolar deixou de ser necessario para saber
onde se esta.
CORES: nenhuma nova. `--md-*` e `--blue` sao os que ja estavam no sistema.
══════════════════════════════════════════════════════════════════════ */
.vd-barra {
/* Gruda ABAIXO da topbar, nao em `top: 0`. A topbar do cockpit tem 69px e e
fixa: em zero, ela cobriria exatamente o nome da estrategia -- o texto que
o GN precisa ler enquanto rola a lista. Medido na tela. */
position: sticky; top: 72px; z-index: 40;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
padding: 18px 22px 16px;
margin-bottom: -1px;
background: #FFFFFF;
border: 1px solid #E1E3EE;
border-bottom: none;
border-radius: 16px 16px 0 0;
}
/* A aresta colorida amarra a barra a lista que vem abaixo. */
.vd-barra::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
border-radius: 16px 16px 0 0;
background: linear-gradient(90deg, var(--md-azul-fundo), var(--md-roxo-fundo));
}
.vd-barra-txt { min-width: 0; flex: 1; }
.vd-barra-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.vd-prod {
font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
color: var(--md-azul-tinta);
}
.vd-passo {
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
/* Nao e `--md-roxo-tinta`: aquele tom e medido contra branco (4,70:1) e
aqui o fundo e a lavagem lilas, onde ele cai para 4,35:1 -- reprova num
texto de 10px. Mesma armadilha da paleta: a tinta se mede contra o fundo
em que ela de fato aparece. */
color: #6B34A3; background: #F3EAFB;
padding: 3px 9px; border-radius: 999px;
}
.vd-conta { font-size: 11.5px; color: var(--text-dim); margin-left: auto; }
/* O NOME DA ESTRATEGIA, que era 11px e sumia. Agora e o maior texto do bloco
-- e o que responde "estou vendo o que?". */
.vd-estrategia {
font-size: 20px; font-weight: 700; letter-spacing: -.015em;
color: var(--text); margin: 0 0 4px; line-height: 1.25;
}
.vd-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0; max-width: 78ch; }
.vd-barra-acao { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.vd-dots { display: flex; gap: 5px; }
.vd-dot {
width: 9px; height: 9px; border-radius: 50%; background: #DDE0EC;
border: none; padding: 0; cursor: pointer;
transition: background .2s, transform .2s;
}
.vd-dot:hover { background: var(--md-azul-fundo); transform: scale(1.2); }
.vd-dot.on { background: var(--md-azul-tinta); transform: scale(1.35); }
.vd-ant {
/* Secundario de proposito: avancar e o gesto comum, voltar e a correcao.
Mesmo tamanho e mesma altura do Proxima para nao brigarem por atencao. */
background: #FFFFFF; color: var(--blue); border: 1px solid var(--border-bright);
padding: 10px 16px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
transition: background .15s;
}
.vd-ant:hover { background: #F6EFFA; }
.vd-prox {
background: var(--blue); color: #FFFFFF; border: none;
padding: 10px 18px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
transition: filter .15s;
}
.vd-prox:hover { filter: brightness(1.15); }
/* A lista encosta na barra, sem cantos duplicados no meio. */
#vender-resultado .table-wrap { border-radius: 0 0 16px 16px; margin-top: 0; }
/* O cabecalho antigo da tabela some: a barra ja diz tudo o que ele dizia, e
dois titulos para a mesma lista e a duplicidade que este projeto ja pagou. */
#vender-resultado .table-wrap > .table-header { display: none; }
@media (max-width: 720px) {
.vd-barra { flex-direction: column; align-items: stretch; gap: 14px; }
.vd-barra-acao { justify-content: space-between; }
.vd-estrategia { font-size: 17px; }
}
/* ══════════════════════════════════════════════════════════════════════
A NAVEGACAO DO COCKPIT — maior, e sempre ao alcance (GV, 03/09/2026)
"preciso que deixe em destaque bem renderizado 01 hoje 02 carteira e
etc... esta pequininho na tela do GN, isso precisa ser destaque para
ele navegar no painel"
Era 13px de rotulo com numero de 10px -- tamanho de metadado para o
elemento que o GN mais usa no dia. As dez abas SAO o painel: sem elas ele
nao chega em lugar nenhum.
Tres mudancas, e a terceira e a que muda o uso:
1. rotulo em 15px, numero em 12px, pilula mais alta;
2. o numero ja tinha a cor da aba (bloco 7) -- agora ele tem tamanho para
ela ser vista;
3. **a barra gruda abaixo da topbar**. Antes, rolar a lista de clientes
levava a navegacao para fora da tela e o GN tinha de voltar ao topo
para trocar de aba.
══════════════════════════════════════════════════════════════════════ */
.tabs {
position: sticky; top: 69px; z-index: 45;
gap: 6px; padding: 12px 22px;
background: rgba(255,255,255,0.97);
border-bottom: 2px solid var(--vivo-lilas-claro, #E0CCEB);
/* QUEBRA DE LINHA, NAO ROLAGEM HORIZONTAL. Com o tamanho novo as dez abas
davam 1.543px num viewport de 1.500 e a ultima -- Rotina Diaria -- saia
da tela atras de um scroll que ninguem percebe que existe. Numa barra de
navegacao, opcao escondida e pior que opcao pequena. Em duas linhas todas
continuam visiveis. */
flex-wrap: wrap;
overflow-x: visible;
row-gap: 8px;
}
.tab {
padding: 11px 15px;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
gap: 9px;
}
.tab .num {
font-size: 12px;
padding: 4px 8px;
border-radius: 7px;
min-width: 26px;
text-align: center;
border: none;
}
.tab.active {
font-weight: 800;
box-shadow: 0 6px 20px rgba(102,0,153,0.30);
}
/* O badge de contagem cresce junto -- ele conta coisa a fazer, e encolher em
relacao ao rotulo o faria sumir. */
.tab .badge { font-size: 11px; padding: 2px 7px; }
/* A barra da estrategia gruda ABAIXO das abas, nao debaixo delas: sem isto as
duas disputam o mesmo topo e uma cobre a outra.
Medido: topbar 69 + abas 70 = 139 numa linha. Abaixo de 1400px as abas
quebram em duas linhas (122px) e o ponto de encaixe muda junto -- por isso
o segundo valor nao e chute, e a soma medida. */
/* O encaixe vem MEDIDO do JS (`--vd-top`), nao de media query: quantas linhas
as abas ocupam depende do CONTEUDO -- o badge de contagem em "01 Hoje"
alarga a aba e joga a decima para a segunda linha. Em produção isso ja
acontece a 1500px, largura em que o homolog (sem badge) cabia em uma linha
so. Media query nao enxerga isso; `offsetHeight` enxerga. */
.vd-barra { top: var(--vd-top, 141px); }
@media (max-width: 900px) {
.tabs { padding: 10px 16px; }
.tab { padding: 10px 13px; font-size: 13.5px; gap: 8px; }
.tab .num { font-size: 11px; min-width: 23px; }
}
/* ══════════════════════════════════════════════════════════════════════
BARRA DA COBERTURA DE FÉRIAS (GV, 03/09/2026)
Irmã da barra do "ver como", e deliberadamente MAIS FORTE que ela: lá o GV
só olha, aqui o substituto ESCREVE na carteira de outra pessoa. O âmbar diz
"cuidado"; este vermelho diz "não é sua". Quem esquece de quem é a carteira
registra a visita na do colega — e isso não dá erro nenhum, nasce como dado
válido e só aparece quando o titular volta de férias e não reconhece o
próprio histórico. A faixa é a única coisa entre esse erro e o banco.
Cores explícitas, medidas contra o fundo REAL da própria faixa: branco sobre
#B02138 dá 6,71:1 e o botão inverte os dois, mantendo a mesma razão. Nada de
`--bg-elev`/`--border` aqui, que o tema achata.
══════════════════════════════════════════════════════════════════════ */
#cobertura-barra {
position: sticky; top: 0; z-index: 99991;
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 10px 18px;
background: #B02138; color: #FFFFFF;
font-size: 13px; font-weight: 600;
box-shadow: 0 2px 8px rgba(24,27,52,.18);
}
#cobertura-barra button {
background: #FFFFFF; color: #B02138; border: none;
padding: 6px 14px; border-radius: 999px; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
#cobertura-barra button:hover { background: #FFE8EC; }
/* O seletor de cobertura no cabeçalho herda o `btn-ai`, mas `select` não pega
a fonte do botão sozinho — sem isto ele sai na fonte do sistema, do lado de
um botão que está na fonte da marca. */
.header-right select.btn-ai { font-family: inherit; font-weight: 700; cursor: pointer; }
/* ══════════════════════════════════════════════════════════════════════
AUTOSAVE DA ROTINA — o estado de cada célula (GV, 03/09/2026)
O autosave nasceu de "o cantado não está salvando", e a lição que ele
carrega é da aba RV: autosave silencioso é indistinguível de autosave
quebrado. Quem grava sozinho precisa DIZER que gravou, e no lugar onde o
olho já está — a célula que a pessoa acabou de digitar.
Três estados, e só três:
pendente âmbar — está na tela, ainda não está no banco
gravado verde — o servidor confirmou (clarão que se apaga sozinho)
erro vermelho — não subiu; o número continua aqui e será reenviado
Cor de FUNDO e de BORDA, nunca de letra: o valor digitado tem de continuar
preto sobre claro. E nada de `box-shadow` aqui — é o que desenha o anel de
foco do `.rot-in`, e sobrescrevê-lo tiraria da tela onde está o cursor.
══════════════════════════════════════════════════════════════════════ */
/* O FUNDO é quem carrega o estado, não a borda: a célula que está sendo
digitada tem foco, e o foco pinta a borda de roxo (`--border-focus`). Um
sinal que só existisse na borda seria invisível exatamente na célula em que
a pessoa está olhando — medido na tela, foi o que aconteceu na primeira
versão. Por isso os tons abaixo são densos o bastante para se verem por
baixo do anel de foco. */
.rot-in.rot-pend { border-color: #C77700; background: #FFEFCF; }
.rot-in.rot-erro { border-color: #C11E3D; background: #FBDDE3; }
.rot-in.rot-ok { animation: rot-flash 2s ease-out both; }
/* Termina no branco do `--bg-panel` do tema, para o clarão sumir sem degrau. */
@keyframes rot-flash {
from { background-color: #A8E9CB; }
to { background-color: #FFFFFF; }
}
.rot-status {
font-family: var(--vivo-fonte);
font-size: 12px; font-weight: 600; color: #3A3A3A;
}
/* Medidos contra o fundo REAL da tela (#FAFAFA), não contra branco puro. */
.rot-status-pend { color: #8A5A00; }
.rot-status-ok { color: #0A6B45; }
.rot-status-erro { color: #B0142F; }
@media (prefers-reduced-motion: reduce) {
.rot-in.rot-ok { animation: none; background: #D6F5E6; }
}