/* === css/vero-tokens.css === */
/* ============================================================
VERO MANGO - assets/css/vero-tokens.css
Etapa 10.2A - Fundação visual (fontes, tokens, tipografia, contraste).
Fonte normativa: docs/auditoria/DIRECAO-VISUAL-VERO-MANGO-10.md,
seções 11 (paleta), 12 (tipografia), 13 (espaçamento), 25.2 (resumo
de tokens). Nenhum valor aqui foi inventado - todos vêm do documento.
Este arquivo é ADITIVO: define o namespace --vm-* e a escala --t-*.
Não redefine nem remove nenhum token existente de agro.css/bios.css/
crm.css - esses continuam onde estavam. `agro.css` passa a usar estes
tokens como fonte de verdade dos seus próprios tokens (--accent,
--muted etc. tornam-se aliases), o que propaga a correção de
contraste (V-03) e a paleta para as ~250 páginas do shell agro sem
editar nenhuma delas.
Carregado por `includes/agro_header.php`, ANTES de `agro.css`.
============================================================ */
:root{
/* ---- 1. Famílias tipográficas (12.1) ----
Interface/corpo/campos/botões = Inter; títulos = Poppins;
códigos/identificadores = IBM Plex Mono. Nenhuma família nova. */
--vm-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--vm-titulo: 'Poppins', 'Inter', system-ui, sans-serif;
--vm-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
/* ---- 2. Escala tipográfica fechada (12.2) ----
Uso: font: var(--t-14). Cada token já embute família, peso e
altura de linha; ajustar tamanho/peso só aqui, nunca no consumidor. */
--t-11: 600 11px/1.2 var(--vm-sans); /* eyebrow, grupo de menu, rótulo de KPI (caixa alta .06em - aplicar via classe) */
--t-12: 400 12px/1.4 var(--vm-sans); /* meta, hint */
--t-12-500: 500 12px/1.4 var(--vm-sans); /* rótulo de campo, título de coluna (caixa alta .04em - aplicar via classe) */
--t-13: 400 13px/1.45 var(--vm-sans); /* célula de tabela densa, rail do menu */
--t-14: 400 14px/1.5 var(--vm-sans); /* corpo padrão, campos e botões no desktop */
--t-16: 400 16px/1.5 var(--vm-sans); /* campos no celular, leitura longa */
--t-18: 600 18px/1.3 var(--vm-titulo); /* título de card e de seção */
--t-22: 600 22px/1.25 var(--vm-titulo);/* título de página (topbar) */
--t-28: 600 28px/1.15 var(--vm-sans); /* número-âncora de KPI (aplicar font-variant-numeric:tabular-nums) */
--t-36: 600 36px/1.1 var(--vm-sans); /* um número por tela em painéis de campo */
/* ==============================================================
REGRESSÃO CROMÁTICA - volta ao estado aprovado na Etapa 10.3
Pedido do dono do produto (10/09/2026): desfazer SÓ as cores
alteradas depois da 10.3 (10.4 convergência com o VERO GESTÃO,
10.5 tema escuro TERA, 10.6 escuro médio). Ver
docs/auditoria/REGRESSAO-CORES-VERO-MANGO.md.
Evidência do estado 10.3: leitura deste arquivo registrada no
transcrito da sessão em 2026-09-10T01:52:59Z, imediatamente antes
da primeira edição da 10.4 (01:53:27Z). Conferida contra a coluna
"Antes (VERO MANGO)" da tabela D-VIS-17 e contra
a paleta normativa de DIRECAO-VISUAL-VERO-MANGO-10.md §11.
A 10.3 não alterou nenhum token da 10.2A (diff vazio).
NÃO faz parte desta regressão: raios (seção 8) e geometria das
sombras (seção 9) seguem nos valores 10.4/10.5 - são medida, não
cor, e o pedido exclui border-radius e box-shadow. Só a COR
dentro das sombras voltou.
============================================================== */
/* ==============================================================
ETAPA "VISUAL VERO GESTÃO" (11/09/2026) - decisão do dono do produto:
adotar a identidade do VERO GESTÃO (referência em
o sistema de referencia da VERO), que é
off-white FRIO + neumorfismo, no lugar do papel quente bege.
Isto REVERTE deliberadamente a regressão cromática de 10/09/2026
(bloco acima): naquele dia o pedido foi desfazer a convergência 10.4
com o VERO GESTÃO; agora o pedido é adotá-la de vez. O bloco histórico
acima fica preservado como registro - nada de histórico foi apagado.
Os NOMES dos tokens não mudaram: só os VALORES. É isso que faz a troca
alcançar as 16 folhas e as 319 telas sem tocar em markup, porque
agro.css já aponta --accent/--page/--surface/--border/--ink/--muted
para estes tokens.
Contraste REMEDIDO para esta paleta (WCAG 2.1, fórmula oficial):
tinta sobre fundo .......... 14,11:1 tinta sobre card ... 14,87:1
tinta-2 sobre card ......... 11,73:1 tinta-3 sobre card .. 5,15:1
tinta-4 sobre card .......... 4,56:1 tinta-4 sobre fundo . 4,33:1
teal sobre card ............. 8,51:1 branco sobre teal ... 9,16:1
sidebar-texto sobre chrome . 11,62:1 sidebar-rotulo ...... 5,13:1
tinta-4 fica em #64737B, e não no #7C8B93 da referência (3,27:1, que
reprovaria em texto normal). É o mesmo cuidado que o projeto já tinha.
============================================================== */
/* ---- 3. Neutros e superfícies (11.1) - base FRIA, que é o que faz o relevo funcionar ---- */
--vm-papel:#EEF1F3; /* GESTÃO --fundo */
--vm-papel-2:#E7ECEF; /* GESTÃO --fundo-2 */
--vm-superficie:#F4F7F8; /* GESTÃO --card - cartão extrudado, não branco puro */
--vm-superficie-2:#FBFDFD; /* GESTÃO --card-alto */
--vm-campo:#E9EEF0; /* GESTÃO --campo - o campo AFUNDA, não é mais branco com borda */
--vm-tinta:#17232B; /* 14,11:1 sobre papel - 14,87:1 sobre card */
--vm-tinta-2:#243542; /* 11,73:1 sobre card */
--vm-tinta-3:#5A6B74; /* 5,15:1 sobre card - 4,88:1 sobre papel (GESTÃO --mut) */
--vm-tinta-4:#64737B; /* 4,56:1 sobre card - 4,33:1 sobre papel - ver nota acima */
--vm-fraco:#A9B6BC; /* SÓ decoração (seta, pega da folha). Nunca texto: 1,78:1 no campo */
--vm-borda:#DCE4E7; /* no VERO GESTÃO a borda quase some: quem separa é o relevo */
--vm-borda-2:#CBD5DA;
--vm-trilho:#E9EEF0;
--vm-sidebar:#08262A; /* --chrome: idêntico nos dois sistemas, não muda */
--vm-sidebar-2:#0C3036;
--vm-sidebar-texto:#CFE0DC; /* 11,62:1 sobre o chrome */
--vm-sidebar-rotulo:#7E979A; /* 5,13:1 sobre o chrome */
/* ---- 4. Marca e ação (11.2) - o teal já era idêntico nos dois sistemas ---- */
--vm-teal:#005059; /* 8,51:1 sobre card */
--vm-teal-escuro:#00363D;
--vm-teal-claro:#2A767C;
--vm-teal-medio:#4E9CA1; /* GESTÃO --teal-cla: guia da linha do tempo, 2ª série do gráfico */
--vm-teal-fundo:#DEEDED; /* GESTÃO .tag--teal */
--vm-sobre-acento:#FFFFFF;
--vm-marca-teal:#005059;
--vm-teal-neon:#5FD3C4; /* 8,78:1 sobre o chrome - ícone ativo do menu e barra do herói */
/* ---- 5. Semânticas - estado, não decoração (11.3) ----
Par gráfico/texto: o token *-tinta é o único seguro para TEXTO;
o token base (sem -tinta) é só para ícone/ponto/borda. */
--vm-ok:#0E7E72; /* = GESTÃO --pos (já era o mesmo hex) */
--vm-ok-tinta:#0A5C53; /* 6,59:1 sobre --vm-ok-fundo (GESTÃO --pos-esc) */
--vm-ok-fundo:#DCEFEB;
--vm-aviso:#B57C1A; /* só gráfico/ícone - 3,33:1 sobre card, NUNCA em texto */
--vm-aviso-tinta:#7A5410; /* 5,86:1 sobre --vm-aviso-fundo - usar em texto */
--vm-aviso-fundo:#F7EEDA;
--vm-erro:#C0392B; /* GESTÃO --neg */
--vm-erro-tinta:#8F2A20; /* 6,94:1 sobre --vm-erro-fundo */
--vm-erro-fundo:#FAE6E3;
--vm-agua:#1D4ED8;
--vm-agua-tinta:#1A3F9E;
--vm-agua-fundo:#E4EBFB;
--vm-folha:#0E7E72; /* no VERO GESTÃO não há verde-folha separado: é o positivo */
--vm-folha-tinta:#0A5C53;
--vm-folha-fundo:#DCEFEB;
--vm-info:#1D4ED8; /* GESTÃO --inf - 5,61:1 sobre --vm-info-fundo */
--vm-info-fundo:#E4EBFB;
/* ---- 6. Destaque da manga (11.4) - no máximo 1 por tela; nunca em texto corrido ---- */
--vm-manga:#D98E2B; /* 2,67:1 - NUNCA em texto */
--vm-manga-tinta:#8A4E0E; /* 6,61:1 sobre branco - 5,81:1 sobre --vm-manga-fundo */
--vm-manga-fundo:#FBEFD9;
--vm-manga-claro:#E8A33A; /* 7,37:1 sobre --vm-sidebar - descritor MANGO no menu */
/* ---- 7. Espaçamento - escala base 4 (13) ---- */
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e12:48px;
/* ---- 8. Raios - escala do VERO GESTÃO (era 6/8/12) ---- */
--vm-r-sm:12px; /* GESTÃO: --r-sm */
--vm-r:18px; /* GESTÃO: --r */
--vm-r-lg:26px; /* GESTÃO: --r-lg */
--vm-r-full:999px; /* GESTÃO: --r-pill */
/* ---- 9. Profundidade - NEUMORFISMO (a alma do visual VERO GESTÃO) ----
Luz em cima/à esquerda, sombra embaixo/à direita: o cartão parece extrudado
da superfície, e o campo de formulário parece afundado nela. O que muda de
estado muda de PROFUNDIDADE (relevo -> afundado), não só de cor.
Os nomes continuam os mesmos de antes - ~200 consumidores já apontam para
a família --vm-relevo, --vm-afundado e --vm-sombra-N, então a troca de
valor aqui converte o sistema inteiro sem editar nenhum consumidor.
(Nada de escrever asterisco seguido de barra dentro deste comentário: isso
fecharia o bloco antes da hora e invalidaria os tokens logo abaixo.)
Geometria e pigmento vêm do vg.css da referência, sem alteração. ---- */
--vm-luz:rgba(255,255,255,.92);
--vm-sombra:rgba(23,35,43,.13);
--vm-relevo-sm:-3px -3px 8px var(--vm-luz), 3px 3px 9px var(--vm-sombra);
--vm-relevo:-6px -6px 14px var(--vm-luz), 6px 6px 16px var(--vm-sombra);
--vm-relevo-lg:-10px -10px 24px var(--vm-luz), 12px 12px 28px var(--vm-sombra);
--vm-afundado:inset 3px 3px 7px var(--vm-sombra), inset -3px -3px 7px var(--vm-luz);
--vm-afundado-sm:inset 2px 2px 5px var(--vm-sombra), inset -2px -2px 5px var(--vm-luz);
--vm-sombra-1:var(--vm-relevo-sm);
--vm-sombra-2:var(--vm-relevo);
--vm-sombra-3:var(--vm-relevo-lg);
/* Sombra "solta" (flutuante) para o que NÃO é superfície neumórfica:
gaveta, folha inferior, toast, modal - onde a luz interna não faz sentido. */
--vm-flutua:0 12px 34px rgba(12,22,28,.35);
/* ---- 10. Motion (25.2) ---- */
--vm-ease-out:cubic-bezier(.23,1,.32,1);
/* ---- 11. Reestruturação UX (10/09/2026, bloco B1) - ergonomia e movimento ----
Medidas extraídas por princípio da referência (VERO GESTÃO), não copiadas.
Consumidores: --vm-toque em vero-ui.css (.vlinhas) e vero-painel.css (.vp-etapa);
--vm-relevo-hover em vero-ui.css (a.vkpi, .vlinhas). Nenhum token anterior
mudou de valor. Tokens de blocos posteriores (curva do painel lateral, toque
grande) entram junto com o componente que os consumir - nada reservado aqui. */
--vm-toque:46px; /* = GESTÃO --tap (já era o mesmo valor) */
--vm-toque-lg:54px; /* = GESTÃO --tap-lg: ação principal */
--vm-relevo-hover:var(--vm-relevo-lg); /* card clicável ao passar o mouse: sobe o relevo */
}
/* === css/vero-spa.css === */
/* =============================================================================
VERO VENDEDOR - assets/css/vero-spa.css
A folha da casca, COPIADA do VERO MANGO (`assets/vm.css`) - cópia, não
interpretação.
POR QUE ESTE ARQUIVO EXISTE
O JS da casca (core.js, bi.js, app.js, login.js) monta o DOM com as
classes .card/.tile/.anel/.sheet/.aba/.barra-inferior/.ctrl... Essas
classes moram no `vm.css` do VERO MANGO - que é a folha da SPA - e NÃO
nas folhas do sistema legado (`vero-ui.css`, `vero-painel.css`,
`vero-crud.css`, `agro-nav.css`), que estilizam o markup `.v*` das telas
antigas em PHP e dependem dos apelidos de `agro.css`. Sem esta cópia a
casca nasceria sem estilo nenhum. Ver.
O QUE FOI PODADO (permitido: "copiar e podar o que o projeto não usa,
sem mudar valores"):
- §14-21 inteiras - Mapa da Fazenda, Caderno de Campo, Calculadora,
Gestão Agrícola, Packhouse, Relatórios, Busca global e Configurações
do VERO MANGO;
- `.topo__fazenda` e `.topo__safra` (o vendedor não tem fazenda/safra);
- o QR do "Acessar APP", o recorte de foto do perfil, a ficha viva de
válvula/safra, a extração de documento e o catálogo de componentes.
NENHUM VALOR FOI ALTERADO. Um `#` aqui dentro veio do VERO MANGO; cor,
raio e sombra novos são proibidos (vero-app.css usa só `var(--...)`).
Carregada por: assets/pacote.php (?t=css), depois de vero-tokens.css e
antes de vero-app.css - que é quem ajusta a ergonomia de campo por cima.
============================================================================= */
/* ===== 1. Tokens - tema escuro (padrão) ===================================== */
:root{
/* superfícies */
--fundo:#061A1D; --menu:#041416; --card:#0B2A2F; --card-alto:#0F363D; --campo:#051619;
--linha:rgba(255,255,255,.08); --linha-forte:rgba(255,255,255,.14);
/* tinta */
--tinta:#ECF3F2; --tinta-2:#C9D6D4; --mut:#8FA5A2; --fraco:#5E7472; /* --fraco: só decoração, nunca texto */
/* marca */
--teal:#005059; --teal-escuro:#00363D; --teal-2:#2A767C; --teal-3:#4E9CA1; --neon:#5FD3C4; --chrome:#08262A;
/* ação = neon com texto escuro por cima */
--acao:var(--neon); --sobre-acao:#04191B;
/* estados (texto + fundo tintado 14 %) */
--pos:#43C59E; --pos-bg:rgba(67,197,158,.14);
--amb:#E8B84B; --amb-bg:rgba(232,184,75,.14);
--neg:#F08080; --neg-bg:rgba(240,128,128,.14);
--inf:#7DA9F5; --inf-bg:rgba(125,169,245,.14);
/* manga = tempo presente (fase atual, hoje, safra ativa) - máx. 1 elemento por tela */
--manga:#E8A33A;
/* séries de gráfico, nesta ordem */
/* --s3: teal-2 clareado (#2A767C dava 2,87:1 sobre o cartão; série exige >= 3:1 - C-33) */
--s1:#5FD3C4; --s2:#4E9CA1; --s3:#338A90; --s4:#E8B84B; --s5:#E8A33A; --s6:#7DA9F5; --s7:#B8C7C5;
--grad-heroi:linear-gradient(135deg,#0F4A52 0%,#1C7C80 55%,#5FD3C4 100%);
/* profundidade (neumorfismo sobre escuro = suave) */
--relevo:-4px -4px 10px rgba(255,255,255,.035), 6px 6px 16px rgba(0,0,0,.45);
--relevo-p:-2px -2px 6px rgba(255,255,255,.03), 3px 3px 9px rgba(0,0,0,.4);
--afundado:inset 3px 3px 7px rgba(0,0,0,.5), inset -2px -2px 6px rgba(255,255,255,.04);
--raio:18px; --raio-p:12px; --raio-g:26px; --raio-pill:999px;
/* sidebar (sempre sobre --menu, nos dois temas) */
--menu-tinta:#C9D8D5; --menu-mut:#7E979A; --menu-hover:rgba(255,255,255,.05);
--sobre-marca:#FFFFFF;
/* vidro do topo */
--topo-fundo:rgba(6,26,29,.86);
/* sobreposições */
--scrim:rgba(2,10,12,.62); --toast-fundo:#0F363D;
--sobre-heroi:#FFFFFF; --sobre-heroi-2:#CFEDE8;
/* texto escuro sobre os fundos de estado sólidos (ícone do alerta, botão perigo) */
--sobre-pos:#062A20; --sobre-amb:#2E2000; --sobre-neg:#2A0D0D; --sobre-inf:#0B1F4A;
--branco:#FFFFFF; --menu-tinta-forte:#EAF3F1;
--manga-bg:rgba(232,163,58,.16);
--sombra-acao:rgba(95,211,196,.22); --sombra-neg:rgba(240,128,128,.22); --sombra-heroi:rgba(0,0,0,.35);
--foco:rgba(95,211,196,.45); --foco-neg:rgba(240,128,128,.5);
/* login: SEMPRE claro, nos dois temas */
--login-fundo:#FFFFFF; --login-tinta:#17232B; --login-tinta-2:#243542; --login-mut:#5A6B74;
--login-linha:#D3DCE0; --login-placeholder:#9AAAB2; --login-hover:#EEF1F3;
--login-erro-bg:#FAE6E3; --login-erro:#8F2A20; --login-neg:#C0392B; --login-painel:#08262A;
--login-sobre:#FFFFFF; --login-sobre-2:#CFE0DC; --login-sombra:rgba(0,0,0,.45);
/* tipografia */
--sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--disp:'Poppins',var(--sans);
--num:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
/* ergonomia e medidas da casca */
--tap:46px; --tap-g:54px;
--sidebar:240px; --sidebar-recolhida:72px; --topo:56px; --respiro:20px;
--rodape:calc(env(safe-area-inset-bottom,0px) + 66px);
color-scheme:dark;
}
/* ===== 1b. Tokens - tema claro (vg.css sem alteração) ======================= */
html[data-tema="claro"]{
--fundo:#EEF1F3; --menu:#08262A; --card:#F4F7F8; --card-alto:#FBFDFD; --campo:#E9EEF0;
--linha:rgba(23,35,43,.08); --linha-forte:rgba(23,35,43,.14);
--tinta:#17232B; --tinta-2:#243542; --mut:#5A6B74; --fraco:#A9B6BC;
--acao:#005059; --sobre-acao:#FFFFFF;
--pos:#0A6E63; --pos-bg:#DCEFEB; /* 5,7:1 sobre o cartão (o #0E7E72 ficava em 4,59) */
--amb:#7A5410; --amb-bg:#F7EEDA; /* texto âmbar: o #B57C1A do vg.css dá 3,3:1 sobre o cartão; #7A5410 (amb-esc do vg) dá 6,3:1 */
--neg:#C0392B; --neg-bg:#FAE6E3;
--inf:#1D4ED8; --inf-bg:#E4EBFB;
--manga:#8F5F1A; /* manga como texto no claro: 5,1:1 (o #E8A33A fica só no escuro) */
/* --s3 e --s5 medidos (C-33): #4E9CA1 dava 2,96:1 e #E8A33A 2,00:1 sobre o cartão claro */
--s1:#005059; --s2:#2A767C; --s3:#3A8A90; --s4:#B57C1A; --s5:#BE5E1C; --s6:#1D4ED8; --s7:#7C8B93;
--grad-heroi:linear-gradient(135deg,#0A6E75 0%,#005059 55%,#00363D 100%);
--relevo:-6px -6px 14px rgba(255,255,255,.92), 6px 6px 16px rgba(23,35,43,.13);
--relevo-p:-3px -3px 8px rgba(255,255,255,.92), 3px 3px 9px rgba(23,35,43,.13);
--afundado:inset 3px 3px 7px rgba(23,35,43,.13), inset -3px -3px 7px rgba(255,255,255,.92);
--topo-fundo:rgba(238,241,243,.88);
--scrim:rgba(12,22,28,.5); --toast-fundo:#08262A;
--sobre-pos:#FFFFFF; --sobre-amb:#FFFFFF; --sobre-neg:#FFFFFF; --sobre-inf:#FFFFFF;
--sombra-acao:rgba(0,80,89,.26); --sombra-neg:rgba(192,57,43,.26); --sombra-heroi:rgba(0,54,61,.30);
--foco:rgba(0,80,89,.28); --foco-neg:rgba(192,57,43,.4); --login-sombra:rgba(23,35,43,.22);
color-scheme:light;
}
/* ===== 2. Base ============================================================== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;height:100%}
body{
font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--tinta);
background:var(--fundo);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
min-height:100%;
}
@media(max-width:1023px){body{font-size:16px}}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--neon);text-decoration:none}
html[data-tema="claro"] a{color:var(--teal)}
svg{flex:none}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--neon);outline-offset:2px;border-radius:8px}
html[data-tema="claro"] :focus-visible{outline-color:var(--teal-2)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--fraco);border-radius:6px;border:2px solid var(--fundo)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== 3. Casca ============================================================= */
#app{min-height:100dvh;display:flex;flex-direction:column}
.casca{display:flex;min-height:100dvh}
/* --- sidebar (PC) --- */
.sidebar{
width:var(--sidebar);flex:none;background:var(--menu);color:var(--menu-tinta);
display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
transition:width .2s cubic-bezier(.32,.72,0,1);
}
.sidebar__marca{
display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px 14px;
border-bottom:1px solid var(--linha);min-height:82px;
}
.sidebar__marca img{width:118px;height:auto}
.sidebar__marca .descritor{
font:600 11px/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--neon);
}
.sidebar__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 10px 14px}
.sidebar__grupo{font:700 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--menu-mut);margin:14px 12px 6px}
.nav-item{
display:flex;align-items:center;gap:11px;width:100%;text-align:left;position:relative;
padding:10px 12px 10px 14px;border-radius:12px;color:var(--menu-tinta);font:500 13.5px/1.2 var(--sans);
margin-bottom:2px;transition:background .15s,color .15s;min-height:42px;
}
.nav-item svg{width:20px;height:20px;flex:none}
.nav-item span:not(.seta){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item:hover{background:var(--menu-hover);color:var(--branco)}
.nav-item--on{background:var(--card-alto);color:var(--branco);font-weight:600}
html[data-tema="claro"] .nav-item--on{background:rgba(255,255,255,.1)}
.nav-item--on::before{
content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--neon);
}
.nav-item--on svg{color:var(--neon)}
.nav-item .seta{width:16px;height:16px;flex:none;display:grid;place-items:center;color:var(--menu-mut);transition:transform .2s}
.nav-item[aria-expanded="true"] .seta{transform:rotate(90deg)}
.nav-sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 22px}
.nav-sub__item{
display:block;width:100%;text-align:left;padding:8px 12px 8px 24px;border-radius:10px;position:relative;
color:var(--menu-mut);font:500 13px/1.25 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-sub__item::before{content:'';position:absolute;left:11px;top:50%;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateY(-50%);opacity:.6}
.nav-sub__item:hover{color:var(--branco);background:var(--menu-hover)}
.nav-sub__item--on{color:var(--neon)}
.sidebar__pe{padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--linha);display:flex;align-items:center;gap:10px}
.sidebar__pe .nome{flex:1;min-width:0}
.sidebar__pe .nome b{display:block;font:600 13px/1.2 var(--sans);color:var(--menu-tinta-forte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__pe .nome span{font-size:11px;color:var(--menu-mut)}
.sidebar__recolher{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--menu-mut);
}
.sidebar__recolher:hover{background:var(--menu-hover);color:var(--branco)}
.sidebar__recolher svg{width:18px;height:18px;transition:transform .2s}
/* sidebar recolhida: só ícones (preferência lembrada) */
.casca--recolhida .sidebar{width:var(--sidebar-recolhida)}
.casca--recolhida .sidebar__marca{align-items:center;padding:16px 8px 12px}
.casca--recolhida .sidebar__marca img{width:34px}
.casca--recolhida .sidebar__marca .descritor,.casca--recolhida .sidebar__grupo,
.casca--recolhida .nav-item span,.casca--recolhida .nav-item .seta,.casca--recolhida .nav-sub,
.casca--recolhida .sidebar__pe .nome{display:none}
.casca--recolhida .nav-item{justify-content:center;padding:11px 0}
.casca--recolhida .sidebar__pe{flex-direction:column;gap:8px}
.casca--recolhida .sidebar__recolher svg{transform:rotate(180deg)}
/* --- conteúdo e topo --- */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{
position:sticky;top:0;z-index:30;background:var(--topo-fundo);backdrop-filter:saturate(1.4) blur(10px);
border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:10px;
padding:0 var(--respiro);min-height:var(--topo);
}
.topo__busca{flex:1;min-width:0;display:flex;justify-content:center}
.topo__busca .busca{max-width:420px;width:100%}
.topo__direita{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.busca{position:relative;flex:1;min-width:0}
.busca>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--mut);pointer-events:none}
.busca .ctrl{padding-left:40px;padding-right:44px;min-height:38px;font-size:13.5px}
.busca>kbd{
position:absolute;right:11px;top:50%;transform:translateY(-50%);font:600 10.5px/1 var(--num);
color:var(--mut);border:1px solid var(--linha-forte);border-radius:6px;padding:3px 6px;pointer-events:none;transition:opacity .15s;
}
/* com o campo em uso, o atalho some e o "x" nativo do type=search não briga com ele */
.busca .ctrl:focus~kbd{opacity:0}
.busca .ctrl::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.corpo{
flex:1;padding:var(--respiro) var(--respiro) 40px;display:flex;flex-direction:column;gap:16px;
max-width:1600px;width:100%;margin:0 auto;min-width:0;
}
/* --- menu do avatar --- */
.menu-avatar{position:relative}
.menu-avatar__lista{
position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:40;background:var(--card-alto);
border-radius:14px;box-shadow:var(--relevo);border:1px solid var(--linha);padding:8px;
}
.menu-avatar__cab{padding:8px 10px 10px;border-bottom:1px solid var(--linha);margin-bottom:6px}
.menu-avatar__cab b{display:block;font:600 13.5px/1.2 var(--sans);color:var(--tinta)}
.menu-avatar__cab span{font-size:12px;color:var(--mut)}
.menu-avatar__item{
display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;
font:500 13.5px/1.2 var(--sans);color:var(--tinta-2);min-height:40px;
}
.menu-avatar__item svg{width:17px;height:17px;color:var(--mut)}
.menu-avatar__item:hover{background:var(--card);color:var(--tinta)}
.menu-avatar__item--perigo{color:var(--neg)}
/* --- barra inferior (celular) --- */
.barra-inferior{display:none}
@media(max-width:1023px){
.sidebar{display:none}
.topo{padding:0 14px;min-height:calc(env(safe-area-inset-top,0px) + 56px);padding-top:env(safe-area-inset-top,0px);gap:8px}
.topo__busca{display:none}
.topo__safra{display:none}
.corpo{padding:14px 16px calc(var(--rodape) + 24px);gap:14px}
.barra-inferior{
display:grid;position:fixed;bottom:0;left:0;right:0;z-index:45;
grid-template-columns:repeat(5,1fr);align-items:end;
background:var(--menu);padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
border-top:1px solid var(--linha);
}
.aba{
display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:12px;
color:var(--menu-mut);font:600 10px/1.1 var(--sans);min-height:48px;justify-content:center;min-width:0;
}
.aba svg{width:22px;height:22px;flex:none}
.aba span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aba--on{color:var(--branco)}
.aba--on svg{color:var(--neon)}
/* botão central elevado (+ Lançar) */
.aba--centro{
background:var(--neon);color:var(--sobre-acao);border-radius:20px;margin:-22px 6px 0;min-height:58px;
box-shadow:0 6px 20px var(--sombra-acao);
}
.aba--centro svg{width:26px;height:26px;color:var(--sobre-acao)}
.aba--centro span{font-size:9.5px}
}
@media(max-width:360px){
.barra-inferior{padding-left:3px;padding-right:3px}
.aba{font-size:9px;padding-left:1px;padding-right:1px;gap:3px}
.aba svg{width:20px;height:20px}
.aba--centro{margin-left:3px;margin-right:3px}
}
/* ===== 4. Cabeçalho de tela ================================================ */
.tela__cab{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.tela__cab > div:first-child{flex:1;min-width:200px}
.tela__migalha{font-size:12px;color:var(--mut);margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tela__migalha svg{width:12px;height:12px;color:var(--fraco)}
.tela__titulo{font:600 20px/1.2 var(--disp);color:var(--tinta);letter-spacing:-.2px}
.tela__sub{font-size:13px;color:var(--mut);margin-top:3px}
.tela__acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* ===== 5. Componentes base ================================================= */
/* --- cartão --- */
.card{background:var(--card);border-radius:var(--raio);padding:18px;box-shadow:var(--relevo);min-width:0}
.card--plano{box-shadow:var(--relevo-p)}
.card--fundo{background:var(--fundo);box-shadow:var(--afundado)}
.card__cab{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.card__titulo{font:600 13px/1.3 var(--disp);color:var(--tinta);flex:1;min-width:0}
.card__sub{font:400 12px/1.4 var(--sans);color:var(--mut);margin-top:2px;overflow-wrap:anywhere}
.card__cab .ic{
width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
background:var(--card-alto);color:var(--neon);box-shadow:var(--relevo-p);
}
html[data-tema="claro"] .card__cab .ic{color:var(--teal)}
.card__cab .ic svg{width:17px;height:17px}
.card__acoes{display:flex;gap:6px;flex:none;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* celular estreito: as ações do cabeçalho descem para a linha de baixo quando não cabem ao lado do título */
@media(max-width:479px){.card__cab{flex-wrap:wrap}.card__acoes{max-width:100%;justify-content:flex-start}}
/* Cartão-herói: o número principal da tela, único lugar do gradiente. */
.card--heroi{
border-radius:var(--raio-g);padding:22px;color:var(--sobre-heroi);position:relative;overflow:hidden;
background:var(--grad-heroi);box-shadow:0 12px 30px var(--sombra-heroi);
}
.card--heroi::after{content:'';position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.heroi__rotulo{font:700 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--sobre-heroi-2)}
.heroi__valor{font-family:var(--num);font-size:36px;font-weight:600;letter-spacing:-.035em;margin:8px 0 4px;font-variant-numeric:tabular-nums}
.heroi__sub{font-size:13px;color:var(--sobre-heroi-2)}
@media(max-width:1023px){.heroi__valor{font-size:30px}}
/* --- botão de texto pequeno no cabeçalho --- */
.acao{font:600 12.5px/1 var(--sans);color:var(--neon);flex:none;display:inline-flex;align-items:center;padding:14px 0;margin:-14px 0;gap:5px}
html[data-tema="claro"] .acao{color:var(--teal)}
/* --- botões --- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;
border-radius:var(--raio-p);font:600 14px/1 var(--sans);background:var(--acao);color:var(--sobre-acao);
box-shadow:0 4px 14px var(--sombra-acao);transition:transform .12s,box-shadow .14s,filter .14s;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn[disabled]{opacity:.45;box-shadow:none;pointer-events:none}
.btn--acao{background:var(--acao);color:var(--sobre-acao)}
.btn--2{background:var(--card-alto);color:var(--tinta);box-shadow:var(--relevo-p)}
.btn--2:active{box-shadow:var(--afundado)}
.btn--fantasma{background:transparent;color:var(--mut);box-shadow:none}
.btn--fantasma:hover{background:var(--card-alto);color:var(--tinta)}
.btn--perigo{background:var(--neg);color:var(--sobre-neg);box-shadow:0 4px 14px var(--sombra-neg)}
.btn--pq{min-height:36px;font-size:12.5px;padding:0 12px;border-radius:10px}
.btn--pq svg{width:15px;height:15px}
.btn--g{min-height:var(--tap-g);font-size:15px;border-radius:14px}
.btn--bloco{width:100%}
.btn--heroi{background:var(--sobre-heroi);color:var(--teal-escuro);box-shadow:none}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns--bloco .btn{flex:1}
.ic-btn{
width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;position:relative;
background:var(--card);color:var(--mut);box-shadow:var(--relevo-p);
}
.ic-btn svg{width:19px;height:19px}
.ic-btn:hover{color:var(--tinta);box-shadow:var(--relevo)}
.ic-btn:active{box-shadow:var(--afundado)}
.ic-btn .bolha{
position:absolute;top:-4px;right:-4px;background:var(--neg);color:var(--sobre-neg);font:700 9.5px/1 var(--num);
min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--fundo);
}
/* --- avatar --- */
.avatar{
width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;overflow:hidden;
color:var(--branco);font:600 13px var(--sans);background:var(--teal);box-shadow:var(--relevo-p);letter-spacing:.02em;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--g{width:52px;height:52px;border-radius:17px;font-size:18px}
.avatar--gg{width:112px;height:112px;border-radius:32px;font-size:36px}
.avatar--p{width:28px;height:28px;border-radius:9px;font-size:11px}
button.avatar{cursor:pointer}
/* --- tag --- */
.tag{
display:inline-flex;align-items:center;gap:4px;font:700 10px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
padding:5px 9px;border-radius:7px;background:var(--campo);color:var(--tinta-2);white-space:nowrap;
}
.tag svg{width:11px;height:11px}
.tag--pos{background:var(--pos-bg);color:var(--pos)}
.tag--amb{background:var(--amb-bg);color:var(--amb)}
.tag--neg{background:var(--neg-bg);color:var(--neg)}
.tag--inf{background:var(--inf-bg);color:var(--inf)}
.tag--manga{background:var(--manga-bg);color:var(--manga)}
/* --- linha de lançamento / item --- */
.itens{display:flex;flex-direction:column;gap:9px}
.item{
display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border-radius:14px;
padding:12px 14px;box-shadow:var(--relevo-p);min-height:var(--tap);transition:transform .12s,box-shadow .14s;color:var(--tinta);
}
button.item:hover{transform:translateY(-1px);box-shadow:var(--relevo)}
button.item:active{box-shadow:var(--afundado);transform:none}
.item__ic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--campo);color:var(--neon);box-shadow:var(--relevo-p)}
html[data-tema="claro"] .item__ic{color:var(--teal)}
.item__ic svg{width:18px;height:18px}
.item__c{flex:1;min-width:0}
.item__t{font:600 14px/1.3 var(--sans);color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__s{font-size:12px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__d{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.item__v{font-family:var(--num);font-size:14.5px;font-weight:600;color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.item__v--neg{color:var(--neg)}
.item__v--pos{color:var(--pos)}
.item__seta{color:var(--fraco);flex:none}
.item__seta svg{width:17px;height:17px}
/* --- alerta / aviso --- */
.alerta{
display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border-radius:var(--raio);padding:13px 15px;
min-height:var(--tap);box-shadow:var(--relevo-p);background:var(--card);color:var(--tinta);
}
.alerta__ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none}
.alerta__ic svg{width:17px;height:17px}
.alerta__t{font:600 14px/1.3 var(--sans)}
.alerta__s{font-size:12.5px;margin-top:3px;line-height:1.4;color:var(--tinta-2)}
.alerta--pos{background:var(--pos-bg)} .alerta--pos .alerta__ic{background:var(--pos);color:var(--sobre-pos)}
.alerta--amb{background:var(--amb-bg)} .alerta--amb .alerta__ic{background:var(--amb);color:var(--sobre-amb)}
.alerta--neg{background:var(--neg-bg)} .alerta--neg .alerta__ic{background:var(--neg);color:var(--sobre-neg)}
.alerta--inf{background:var(--inf-bg)} .alerta--inf .alerta__ic{background:var(--inf);color:var(--sobre-inf)}
.faixa-erro{
display:flex;gap:10px;align-items:flex-start;background:var(--neg-bg);color:var(--neg);border-radius:12px;
padding:11px 13px;font:500 13px/1.45 var(--sans);
}
.faixa-erro svg{width:18px;height:18px;flex:none;margin-top:1px}
/* --- segmento (1D/1S/1M) --- */
.segmento{
display:flex;gap:3px;background:var(--campo);border-radius:var(--raio-pill);padding:4px;box-shadow:var(--afundado);
max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.segmento::-webkit-scrollbar{display:none}
.segmento button{
min-height:32px;padding:0 14px;border-radius:var(--raio-pill);flex:none;font:600 12.5px/1 var(--sans);color:var(--mut);
transition:all .16s;white-space:nowrap;
}
.segmento button.on{background:var(--acao);color:var(--sobre-acao);box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* --- texto --- */
.h1{font:600 22px/1.2 var(--disp);color:var(--tinta);letter-spacing:-.25px}
.h2{font:600 17px/1.25 var(--disp);color:var(--tinta)}
.secao{font:700 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:10px;margin:6px 0 -2px}
.secao::after{content:'';flex:1;height:1px;background:var(--linha)}
.sub{font-size:13.5px;color:var(--mut);line-height:1.5;overflow-wrap:anywhere}
.mini{font-size:12px;color:var(--mut);overflow-wrap:anywhere}
.saudacao{font:600 21px/1.25 var(--disp);color:var(--tinta)}
.saudacao span{display:block;font:400 13.5px/1.4 var(--sans);color:var(--mut);margin-top:4px}
/* --- vazio / erro / esqueleto (estados obrigatórios de toda tela) --- */
.vazio{text-align:center;padding:42px 22px;display:flex;flex-direction:column;align-items:center;gap:12px}
.vazio__ic{width:68px;height:68px;border-radius:22px;background:var(--fundo);display:grid;place-items:center;color:var(--mut);box-shadow:var(--afundado)}
.vazio__ic svg{width:30px;height:30px}
.vazio__t{font:600 16px/1.3 var(--disp);color:var(--tinta)}
.vazio__s{font-size:13.5px;color:var(--mut);max-width:340px;line-height:1.55}
@keyframes vmPulso{0%,100%{opacity:.45}50%{opacity:.8}}
.esqueleto{background:var(--campo);border-radius:var(--raio);animation:vmPulso 1.3s ease-in-out infinite;box-shadow:var(--afundado)}
.esqueleto--kpi{height:104px}
.esqueleto--linha{height:60px;border-radius:14px}
.esqueleto--card{height:220px}
/* --- grades --- */
.grade{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.g-3{grid-column:span 3}.g-4{grid-column:span 4}.g-6{grid-column:span 6}.g-8{grid-column:span 8}.g-12{grid-column:span 12}
@media(max-width:1279px){.g-3{grid-column:span 6}.g-4{grid-column:span 6}}
@media(max-width:900px){.g-3,.g-4,.g-6,.g-8{grid-column:span 12}}
.blocos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.pilha{display:flex;flex-direction:column;gap:16px;min-width:0}
.atalhos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.atalho{
background:var(--card);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--relevo);display:flex;align-items:center;gap:12px;
min-height:64px;text-align:left;color:var(--tinta);transition:transform .14s,box-shadow .2s;
}
.atalho:hover{transform:translateY(-2px)}
.atalho:active{transform:none;box-shadow:var(--afundado)}
.atalho__ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--campo);color:var(--neon);flex:none}
html[data-tema="claro"] .atalho__ic{color:var(--teal)}
.atalho__ic svg{width:18px;height:18px}
.atalho__t{font:600 13.5px/1.3 var(--sans);min-width:0;overflow-wrap:anywhere}
.atalho__s{font-size:11.5px;color:var(--mut);margin-top:2px}
/* (a tabela é a inteligente do §12 - .tabela-bi; a base do PROMPT-01 foi removida no PROMPT-02) */
/* ===== 6. Formulário ======================================================== */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo > label{font:600 12.5px/1.2 var(--sans);color:var(--tinta-2);display:flex;align-items:center;gap:5px}
.campo > label .req{color:var(--neg);font-weight:700}
.campo .ajuda{font-size:12px;color:var(--mut);line-height:1.4}
.ctrl{
width:100%;min-height:var(--tap);padding:11px 14px;background:var(--campo);border:0;border-radius:var(--raio-p);
color:var(--tinta);font-size:14px;box-shadow:var(--afundado);transition:box-shadow .16s;
}
@media(max-width:1023px){.ctrl{font-size:16px;min-height:52px}}
.ctrl:focus{outline:none;box-shadow:var(--afundado), 0 0 0 2.5px var(--foco)}
.ctrl::placeholder{color:var(--mut)}
textarea.ctrl{min-height:96px;resize:vertical;line-height:1.5}
select.ctrl{
appearance:none;padding-right:40px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA5A2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.ctrl--num{font-family:var(--num);font-size:15px;font-weight:600;letter-spacing:-.02em}
.campo--erro .ctrl{box-shadow:var(--afundado), 0 0 0 2.5px var(--foco-neg)}
.campo__erro{font-size:12px;color:var(--neg);font-weight:600}
.comun{position:relative}
.comun .ctrl{padding-right:60px}
.comun span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:600 12.5px var(--sans);color:var(--mut);pointer-events:none}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grade2{grid-template-columns:1fr}}
.interruptor{
display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--tap);padding:10px 14px;
background:var(--card);border-radius:var(--raio-p);box-shadow:var(--relevo-p);cursor:pointer;
}
.interruptor > span:first-child{font:600 14px/1.35 var(--sans);flex:1}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor .cx{width:48px;height:28px;border-radius:15px;background:var(--campo);flex:none;position:relative;box-shadow:var(--afundado);transition:background .2s}
.interruptor .cx::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--card-alto);box-shadow:var(--relevo-p);transition:transform .22s cubic-bezier(.32,.72,0,1)}
.interruptor input:checked + .cx{background:var(--acao)}
.interruptor input:checked + .cx::after{transform:translateX(20px)}
.interruptor input:focus-visible + .cx{outline:2.5px solid var(--neon);outline-offset:2px}
/* ===== 7. Sobreposições ==================================================== */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);opacity:0;transition:opacity .22s}
.scrim.on{opacity:1}
.sheet{position:fixed;z-index:61;background:var(--fundo);display:flex;flex-direction:column;box-shadow:0 -10px 50px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.32,.72,0,1)}
@media(max-width:1023px){
.sheet{left:0;right:0;bottom:0;border-radius:24px 24px 0 0;max-height:93dvh;transform:translateY(100%)}
.sheet.on{transform:translateY(0)}
}
@media(min-width:1024px){
.sheet{top:0;right:0;bottom:0;width:min(560px,92vw);transform:translateX(100%)}
.sheet.on{transform:translateX(0)}
.sheet--modal{top:50%;left:50%;right:auto;bottom:auto;width:min(520px,92vw);max-height:90dvh;border-radius:var(--raio-g);transform:translate(-50%,-46%);opacity:0;transition:transform .25s,opacity .2s}
.sheet--modal.on{transform:translate(-50%,-50%);opacity:1}
}
.sheet__pega{width:40px;height:5px;border-radius:3px;background:var(--fraco);margin:9px auto 2px;flex:none}
@media(min-width:1024px){.sheet__pega{display:none}}
.sheet__cab{display:flex;align-items:center;gap:12px;padding:16px 18px;flex:none;border-bottom:1px solid var(--linha)}
.sheet__cab .t{font:600 16px/1.2 var(--disp);flex:1;min-width:0;color:var(--tinta)}
.sheet__corpo{flex:1;overflow-y:auto;padding:18px}
.sheet__pe{flex:none;padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 16px);border-top:1px solid var(--linha);background:var(--card)}
.toast{
position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);z-index:80;max-width:460px;width:calc(100% - 32px);
background:var(--toast-fundo);color:var(--menu-tinta-forte);border-radius:14px;padding:13px 16px;font:500 14px/1.4 var(--sans);
box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:10px;
border:1px solid var(--linha-forte);
}
@media(max-width:1023px){.toast{bottom:calc(var(--rodape) + 18px)}}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:19px;height:19px;flex:none;color:var(--neon)}
.toast--erro{border-color:var(--neg)}
.toast--erro svg{color:var(--neg)}
.toast--ok svg{color:var(--pos)}
/* ===== 8. Login (modelo ICL, sempre claro) ============== */
.login{
min-height:100dvh;display:grid;place-items:center;padding:24px 16px;
background:var(--fundo);color-scheme:light;
}
.login__cartao{
width:100%;max-width:980px;min-height:560px;display:grid;grid-template-columns:1fr 1fr;
background:var(--login-fundo);border-radius:var(--raio-g);overflow:hidden;box-shadow:0 30px 80px var(--login-sombra);
}
.login__form{padding:52px 56px 36px;display:flex;flex-direction:column;color:var(--login-tinta);min-width:0}
.login__titulo{font:600 26px/1.2 var(--disp);color:var(--login-tinta);margin-bottom:26px}
.login__campo{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.login__campo label{font:600 12.5px/1.2 var(--sans);color:var(--login-tinta-2)}
.login__campo .linha{position:relative}
.login__campo input{
width:100%;background:transparent;border:0;border-bottom:2px solid var(--login-linha);border-radius:0;padding:10px 40px 10px 0;
font:400 15px/1.4 var(--sans);color:var(--login-tinta);transition:border-color .16s;min-height:44px;
}
.login__campo input:focus{outline:none;border-bottom-color:var(--teal)}
.login__campo input::placeholder{color:var(--login-placeholder)}
.login__campo--erro input{border-bottom-color:var(--login-neg)}
.login__mostrar{
position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:10px;
display:grid;place-items:center;color:var(--login-mut);
}
.login__mostrar:hover{background:var(--login-hover);color:var(--teal)}
.login__mostrar svg{width:18px;height:18px}
.login__esqueci{text-align:right;margin:-12px 0 20px}
.login__esqueci button{font:500 12.5px/1 var(--sans);color:var(--teal);padding:8px 0 8px 8px;min-height:36px}
.login__esqueci button:hover{text-decoration:underline}
.login__erro{margin:0 0 16px;background:var(--login-erro-bg);color:var(--login-erro)}
.login__botoes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.login__botoes .btn{min-height:46px;border-radius:var(--raio-p);font-size:14px;box-shadow:0 4px 14px rgba(0,80,89,.22)}
.login__painel-btn{background:var(--teal);color:var(--login-sobre)}
.login__app-btn{background:var(--teal-2);color:var(--login-sobre)}
.login__botoes .btn:hover{filter:brightness(1.08)}
.login__pe{margin-top:auto;padding-top:28px;font:400 12px/1.5 var(--sans);color:var(--login-mut);text-align:left}
.login__painel{
position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;
background:var(--login-painel) center/cover no-repeat;color:var(--login-sobre);text-align:center;min-height:100%;
}
.login__painel::before{
content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,80,89,.78) 0%,rgba(8,38,42,.88) 100%);
}
.login__painel > *{position:relative}
.login__simbolo{width:150px;height:150px;border-radius:50%;background:var(--login-fundo);display:grid;place-items:center;box-shadow:0 14px 40px var(--sombra-heroi)}
.login__simbolo svg{width:82px;height:auto;color:var(--teal)}
.login__marca{font:600 22px/1.2 var(--disp);letter-spacing:.06em;color:var(--login-sobre)}
.login__fazenda{font:400 13px/1.4 var(--sans);color:var(--login-sobre-2)}
@media(max-width:767px){
.login{padding:0;place-items:start}
.login__cartao{grid-template-columns:1fr;border-radius:0;min-height:100dvh;box-shadow:none;max-width:none}
.login__painel{order:0;min-height:160px;flex-direction:row;justify-content:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 16px;text-align:left}
.login__simbolo{width:64px;height:64px;flex:none}
.login__simbolo svg{width:36px}
.login__form{order:1;padding:28px 22px 24px}
.login__titulo{font-size:24px;margin-bottom:20px}
.login__botoes{grid-template-columns:1fr}
}
@media(min-width:768px) and (max-width:1023px){
.login__form{padding:40px 36px 28px}
}
/* ===== 9. Perfil ======================================================= */
.perfil__topo{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.perfil__tema{display:flex;gap:10px;flex-wrap:wrap}
.perfil__tema .escolha{
flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--raio-p);
background:var(--card);box-shadow:var(--relevo-p);font:600 13.5px/1.2 var(--sans);color:var(--tinta);text-align:left;min-height:var(--tap);
}
.perfil__tema .escolha svg{width:18px;height:18px;color:var(--mut)}
.perfil__tema .escolha--on{box-shadow:var(--afundado);color:var(--neon)}
.perfil__tema .escolha--on svg{color:var(--neon)}
html[data-tema="claro"] .perfil__tema .escolha--on,html[data-tema="claro"] .perfil__tema .escolha--on svg{color:var(--teal)}
/* ===== 10. Utilitários e acessibilidade ===================================== */
.oculto-pc{display:none}
@media(max-width:1023px){.oculto-pc{display:initial}.oculto-cel,.corpo .oculto-cel,.topo .oculto-cel{display:none}}
@keyframes vmEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.corpo > *{animation:vmEntra .24s cubic-bezier(.23,1,.32,1) both}
@media(prefers-reduced-motion:reduce){
.corpo > *{animation:none}
}
/* ===== 11. Impressão (sempre claro) ======================================== */
@media print{
.sidebar,.barra-inferior,.topo,.btn,.ic-btn,.segmento,.toast,.scrim,.sheet,.casca .barra-inferior{display:none}
body{background:var(--login-fundo);color:var(--login-tinta)}
.corpo{padding:0;gap:12px;max-width:none}
.card,.item{box-shadow:none;border:1px solid var(--login-linha);break-inside:avoid;background:var(--login-fundo);color:var(--login-tinta)}
.casca .card--heroi{background:var(--login-fundo);color:var(--login-tinta);border:1px solid var(--login-linha)}
.casca .heroi__rotulo,.casca .heroi__sub{color:var(--login-mut)}
}
/* ===== 12. Componentes BI (PROMPT-02) ================== */
/* --- filtros globais --- */
.filtros{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;background:var(--card);border-radius:var(--raio);padding:10px 14px;box-shadow:var(--relevo-p)}
.filtros__grupo{display:flex;flex-direction:column;gap:4px;min-width:0}
.filtros__grupo > label{font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.filtros .ctrl{min-height:36px;padding:6px 32px 6px 10px;font-size:13px;width:auto;min-width:140px;max-width:100%}
.filtros__periodo{margin-left:auto;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.filtros__datas{display:flex;gap:6px;flex-wrap:wrap}
.filtros__datas .ctrl{min-width:0;width:138px;padding-right:10px}
@media(max-width:640px){.filtros__grupo,.filtros__periodo{width:100%}.filtros .ctrl{width:100%}.filtros__periodo{margin-left:0}.filtros .segmento{width:100%}.filtros .segmento button{flex:1}}
/* --- tile KPI --- */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.tile{background:var(--card);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--relevo);display:flex;gap:12px;align-items:center;min-width:0;text-align:left;color:var(--tinta);width:100%;transition:transform .14s,box-shadow .14s;container-type:inline-size}
button.tile:hover{transform:translateY(-2px)}
button.tile:active{box-shadow:var(--afundado);transform:none}
.tile__ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--campo);color:var(--neon);box-shadow:var(--afundado)}
html[data-tema="claro"] .tile__ic{color:var(--teal)}
.tile__ic svg{width:22px;height:22px}
.tile__c{flex:1;min-width:0}
.tile__v{font-family:var(--num);font-size:24px;font-weight:600;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.tile__v small{font-size:12px;font-weight:500;color:var(--mut);letter-spacing:0}
.tile__v--texto{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip;hyphens:auto;overflow-wrap:anywhere}
/* Tile estreito (5 por linha em 1280): número menor e ícone menor, em vez de reticências. */
@container (max-width:230px){.tile{padding:12px 14px;gap:10px}.tile__v{font-size:19px}.tile__ic{width:36px;height:36px;border-radius:11px}.tile__ic svg{width:18px;height:18px}.tile__v--texto{font-size:14.5px}}
.tile__r{font:700 10px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__s{font-size:11.5px;color:var(--mut);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile__d{display:inline-flex;align-items:center;gap:3px;font:600 11.5px/1 var(--num);margin-top:6px;padding:3px 7px;border-radius:7px;font-variant-numeric:tabular-nums}
.tile__d svg{width:12px;height:12px}
.tile__d--pos{color:var(--pos);background:var(--pos-bg)}
.tile__d--neg{color:var(--neg);background:var(--neg-bg)}
.tile__d--neutro{color:var(--mut);background:var(--campo)}
.tile--manga .tile__ic,.tile--manga .tile__v{color:var(--manga)}
.tile--pos .tile__ic{color:var(--pos)}
.tile--neg .tile__ic{color:var(--neg)}
.tile--amb .tile__ic{color:var(--amb)}
/* --- anel --- */
.anel{position:relative;flex:none;display:grid;place-items:center}
.anel svg{transform:rotate(-90deg)}
.anel__trilha{stroke:var(--campo)}
.anel__valor{stroke:var(--s1);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.23,1,.32,1)}
.anel--pos .anel__valor{stroke:var(--pos)}
.anel--amb .anel__valor{stroke:var(--amb)}
.anel--neg .anel__valor{stroke:var(--neg)}
.anel--manga .anel__valor{stroke:var(--manga)}
.anel__txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--num);font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums;line-height:1.1}
.anel__txt small{display:block;font:500 10px/1.2 var(--sans);color:var(--mut);margin-top:2px}
.anel-item{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.anel-item__r{font:700 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:center}
.anel-item__d{font:600 11.5px/1 var(--num);display:inline-flex;align-items:center;gap:3px}
.anel-item__d svg{width:12px;height:12px}
.anel-item__d--pos{color:var(--pos)}
.anel-item__d--neg{color:var(--neg)}
.aneis{display:flex;gap:18px;justify-content:space-around;flex-wrap:wrap}
/* --- medidor semicircular --- */
.medidor{position:relative;width:100%;max-width:300px;margin:0 auto}
.medidor svg{width:100%;height:auto;display:block;overflow:visible}
.medidor__trilha{stroke:var(--campo)}
.medidor__faixa{opacity:.9}
.medidor__valor{stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.23,1,.32,1)}
.medidor__marcador{fill:var(--card);stroke:var(--tinta);stroke-width:3}
.medidor__c{position:absolute;left:0;right:0;bottom:8%;text-align:center}
.medidor__r{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.medidor__v{font-family:var(--num);font-size:30px;font-weight:600;letter-spacing:-.035em;color:var(--tinta);margin-top:5px;font-variant-numeric:tabular-nums}
.medidor__s{font-size:12px;color:var(--mut);margin-top:2px}
.medidor__minmax{display:flex;justify-content:space-between;font:600 10.5px var(--num);color:var(--mut);padding:0 6%;margin-top:-4px}
/* --- número-âncora + sparkline --- */
.ancora{display:flex;flex-direction:column;gap:4px;min-width:0}
.ancora__r{font:700 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.ancora__v{font-family:var(--num);font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(max-width:1023px){.ancora__v{font-size:30px}}
.ancora__v--texto{font-family:var(--disp);font-size:24px;letter-spacing:-.01em}
.ancora__s{font-size:13px;color:var(--mut)}
.ancora__spark{margin-top:8px}
.card--heroi .ancora__r,.card--heroi .ancora__s{color:var(--sobre-heroi-2)}
.card--heroi .ancora__v{color:var(--sobre-heroi)}
.spark{width:100%;height:auto;display:block;overflow:visible}
.spark__linha{fill:none;stroke:var(--s1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spark__area{fill:var(--s1);opacity:.14}
.spark__ponto{fill:var(--card);stroke:var(--s1);stroke-width:3}
.card--heroi .spark__linha,.card--heroi .spark__ponto{stroke:var(--sobre-heroi)}
.card--heroi .spark__area{fill:var(--sobre-heroi)}
.card--heroi .spark__ponto{fill:var(--teal-escuro)}
.spark__rotulos{display:flex;justify-content:space-between;margin-top:4px;font-size:10px;color:var(--mut)}
.card--heroi .spark__rotulos{color:var(--sobre-heroi-2)}
/* --- gráfico (ECharts) --- */
.grafico{position:relative;width:100%;min-height:240px;min-width:0}
.grafico__area{width:100%;height:100%;min-height:240px}
.grafico--pequeno,.grafico--pequeno .grafico__area{min-height:170px}
.grafico--alto,.grafico--alto .grafico__area{min-height:320px}
.grafico--maior,.grafico--maior .grafico__area{min-height:420px}
.grafico__estado{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;padding:16px}
/* --- tabela inteligente --- */
.tabela-bi{display:flex;flex-direction:column;gap:10px;min-width:0}
.tabela-bi__ferramentas{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabela-bi__ferramentas .busca{max-width:320px}
.tabela-bi__ferramentas .busca .ctrl{min-height:36px;font-size:13px}
.tabela-bi__rolagem{overflow:auto;max-height:var(--tabela-altura,440px);border-radius:var(--raio-p);background:var(--fundo);box-shadow:var(--afundado);overscroll-behavior:contain}
table.tabela-bi__t{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.tabela-bi__t th{position:sticky;top:0;z-index:2;background:var(--card-alto);font:700 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);text-align:left;padding:0;border-bottom:1px solid var(--linha-forte);white-space:nowrap}
table.tabela-bi__t th > span,table.tabela-bi__t th > button{display:flex;align-items:center;gap:5px;width:100%;padding:11px 12px;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;min-height:40px}
table.tabela-bi__t th > button{cursor:pointer}
table.tabela-bi__t th > button:hover{color:var(--tinta)}
table.tabela-bi__t th > button svg{width:13px;height:13px;color:var(--fraco);flex:none}
table.tabela-bi__t th > button[aria-sort="ascending"] svg,table.tabela-bi__t th > button[aria-sort="descending"] svg{color:var(--neon)}
html[data-tema="claro"] table.tabela-bi__t th > button[aria-sort="ascending"] svg,html[data-tema="claro"] table.tabela-bi__t th > button[aria-sort="descending"] svg{color:var(--teal)}
table.tabela-bi__t th > button[aria-sort="descending"] svg{transform:rotate(180deg)}
table.tabela-bi__t th.n > button,table.tabela-bi__t th.n > span{justify-content:flex-end;text-align:right}
table.tabela-bi__t td{padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:middle;white-space:nowrap;color:var(--tinta)}
table.tabela-bi__t tbody tr:last-child td{border-bottom:0}
table.tabela-bi__t tbody tr:hover td,table.tabela-bi__t tbody tr:focus-within td{background:var(--card-alto)}
table.tabela-bi__t tr.clicavel{cursor:pointer}
table.tabela-bi__t .n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
table.tabela-bi__t tr.tabela-bi__filtros th{top:40px;z-index:1;background:var(--card);padding:4px 6px;border-bottom:1px solid var(--linha)}
table.tabela-bi__t tr.tabela-bi__filtros .ctrl{min-height:30px;padding:4px 8px;font-size:12px;border-radius:8px;width:100%;min-width:80px}
.tabela-bi__pe{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mut);gap:8px;flex-wrap:wrap}
/* --- progresso --- */
.progressos{display:flex;flex-direction:column;gap:12px}
.progresso{display:flex;flex-direction:column;gap:6px;min-width:0}
.progresso__cab{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--tinta-2)}
.progresso__cab span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progresso__pct{font-family:var(--num);font-weight:600;color:var(--tinta);font-variant-numeric:tabular-nums;flex:none}
.progresso__barra{height:8px;border-radius:5px;background:var(--campo);overflow:hidden;box-shadow:var(--afundado)}
.progresso__barra i{display:block;height:100%;border-radius:5px;background:var(--s1);transition:width .55s cubic-bezier(.23,1,.32,1)}
.progresso--pos .progresso__barra i{background:var(--pos)}
.progresso--amb .progresso__barra i{background:var(--amb)}
.progresso--neg .progresso__barra i{background:var(--neg)}
/* --- lista de situação --- */
.situacao{display:flex;flex-direction:column}
.situacao__i{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--linha);width:100%;text-align:left;color:var(--tinta);min-height:50px}
.situacao__i:last-child{border-bottom:0}
button.situacao__i:hover{background:var(--card-alto);border-radius:10px}
.situacao__ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--campo);color:var(--mut);box-shadow:var(--afundado)}
.situacao__ic svg{width:15px;height:15px}
.situacao__ic--pos{background:var(--pos-bg);color:var(--pos);box-shadow:none}
.situacao__ic--amb{background:var(--amb-bg);color:var(--amb);box-shadow:none}
.situacao__ic--neg{background:var(--neg-bg);color:var(--neg);box-shadow:none}
.situacao__ic--inf{background:var(--inf-bg);color:var(--inf);box-shadow:none}
.situacao__ic--manga{background:var(--manga-bg);color:var(--manga);box-shadow:none}
.situacao__c{flex:1;min-width:0}
.situacao__t{font:500 13.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.situacao__s{font-size:12px;color:var(--mut);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.situacao--quebra .situacao__t,.situacao--quebra .situacao__s{white-space:normal}
.situacao__m{font:600 12px/1 var(--num);color:var(--mut);flex:none;display:flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.situacao__m svg{width:13px;height:13px}
/* --- mapa (Leaflet) --- */
.mapa{width:100%;min-height:320px;border-radius:var(--raio-p);overflow:hidden;background:var(--campo);box-shadow:var(--afundado);position:relative;z-index:0}
.mapa--alto{min-height:460px}
.mapa .leaflet-container{width:100%;height:100%;min-height:inherit;background:var(--campo);font-family:var(--sans)}
.mapa__estado{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px;z-index:1;text-align:center;padding:16px}
.mapa .leaflet-control-attribution{font-size:9px;background:var(--card);color:var(--mut)}
.mapa .leaflet-control-attribution a{color:var(--mut)}
.mapa .leaflet-bar a{background:var(--card);color:var(--tinta);border-color:var(--linha-forte)}
.mapa .leaflet-control-layers{background:var(--card);color:var(--tinta);border:1px solid var(--linha-forte);border-radius:10px}
/* --- linha do tempo das fases --- */
.tempo{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.tempo__f{flex:1;min-width:128px;background:var(--campo);border-radius:var(--raio-p);padding:10px 12px;box-shadow:var(--afundado);position:relative}
.tempo__f--passada{opacity:.6}
.tempo__f--atual{background:var(--manga-bg);box-shadow:none;outline:1.5px solid var(--manga)}
.tempo__n{font:700 9.5px/1 var(--num);color:var(--mut);letter-spacing:.08em}
.tempo__t{font:600 12.5px/1.3 var(--sans);color:var(--tinta);margin-top:4px}
.tempo__f--atual .tempo__t{color:var(--manga)}
.tempo__d{font-size:11px;color:var(--mut);margin-top:3px;white-space:nowrap}
/* ===== 13. Cadastro (PROMPT-03): formulário em seções/passos, multi, ficha, extração ===== */
/* --- lista --- */
.cad__topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cad__resumo{font-size:12.5px;color:var(--mut)}
/* --- formulário em seções (PC) --- */
.cad__form{display:flex;flex-direction:column;gap:4px;min-width:0}
.cad__secoes{display:flex;flex-direction:column;gap:18px}
.cad__secao{display:flex;flex-direction:column;gap:10px}
.cad__secao-t{font:600 11px/1.2 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin:0;padding-bottom:6px;border-bottom:1px solid var(--linha)}
.cad__grupo{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.cad__grupo .campo[data-campo="observacao"],.cad__grupo .campo[data-campo="observacoes"],.cad__grupo .campo[data-campo="descricao"],.cad__grupo .campo[data-campo="observacao_tecnica"],.cad__grupo .campo:has(.multi){grid-column:1 / -1}
.cad__rodape{justify-content:flex-end}
.cad__estimativa{color:var(--pos)}
.sheet__corpo .cad__form{padding-bottom:6px}
.campo--acao{align-self:end}
/* --- passo a passo (§4.7: uma decisão por tela no celular) --- */
.passos{display:flex;flex-direction:column;gap:14px;min-height:60dvh}
.passos__cab{display:flex;flex-direction:column;gap:6px}
.passos__n{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.passos__t{font:600 18px/1.2 var(--disp);color:var(--tinta)}
.passos__pontos{display:flex;gap:5px;margin-top:4px}
.passos__pontos i{flex:1;height:4px;border-radius:2px;background:var(--campo)}
.passos__pontos i.on{background:var(--neon)}
html[data-tema="claro"] .passos__pontos i.on{background:var(--teal)}
.passos__corpo{flex:1}
.passos__passo{display:flex;flex-direction:column;gap:12px}
.passos__passo .cad__grupo{grid-template-columns:1fr}
.passos__passo .ctrl{min-height:52px;font-size:16px}
.passos__pe{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 0 4px;background:var(--fundo);border-top:1px solid var(--linha)}
.passos__pe .btn{flex:1;min-height:var(--tap-g,54px)}
/* --- campo multi (lista de marcação com busca) --- */
.multi{background:var(--campo);border-radius:var(--raio-p);box-shadow:var(--afundado);padding:8px}
.multi__topo{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.multi__topo .ctrl{min-height:34px;font-size:13px;flex:1;box-shadow:none;background:var(--card)}
.multi__n{font-size:11.5px;color:var(--mut);white-space:nowrap}
.multi__lista{max-height:220px;overflow:auto;display:grid;gap:2px;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr))}
.multi__item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13.5px;color:var(--tinta);cursor:pointer;min-height:36px}
.multi__item:hover{background:var(--card-alto)}
.multi__item input{width:18px;height:18px;accent-color:var(--neon);flex:none}
html[data-tema="claro"] .multi__item input{accent-color:var(--teal)}
/* === css/vero-app.css === */
/* =============================================================================
VERO VENDEDOR - assets/css/vero-app.css
O shell do vendedor: o que muda por cima da casca copiada do VERO MANGO
(`vero-spa.css`) para o sistema virar um aplicativo de CAMPO.
POR QUE ESTE ARQUIVO EXISTE
O visual é o mesmo; a ergonomia não. O VERO MANGO é usado sentado, num
PC. O VERO VENDEDOR é usado em pé, no sol, com a mão suja, no celular.
Tudo aqui sai disso: alvo de toque maior, texto maior, barra inferior
com cinco destinos e o botão central elevado, folha de ação rápida,
cascas "em construção" que nunca ficam em branco.
LEI QUE ESTE ARQUIVO NÃO QUEBRA
Nenhuma cor, raio ou sombra escrito à mão: tudo é `var(--...)` de
`vero-tokens.css` ou dos apelidos de `vero-spa.css`. Conferir com
grep -n "#[0-9a-fA-F]\{3,6\}" assets/css/vero-app.css -> vazio.
Carregada por: assets/pacote.php (?t=css), por ÚLTIMO - é quem vence.
============================================================================= */
/* ===== 1. Ergonomia de campo - a única medida nova do sistema ==============
`vero-tokens.css` traz --vm-toque:46px e --vm-toque-lg:54px, medidas do
VERO MANGO (uso sentado, com mouse). O VERO VENDEDOR é norma diferente e
ESCRITA: exigem 52px no toque comum e 58px na
ação principal. Não dá para derivar de um token existente sem inventar um
número no meio do caminho, então os dois valores nascem AQUI, uma vez só,
no namespace --vd-* (vendedor), e todo o resto do sistema os consome por
--tap/--tap-g, que é o que a casca copiada já lê. Registrado em
. */
:root{
--vd-toque:52px; /* mínimo absoluto de qualquer alvo tocável */
--vd-toque-lg:58px; /* ação principal da tela (o polegar acha sem olhar) */
--tap:var(--vd-toque);
--tap-g:var(--vd-toque-lg);
}
/* ===== 1a. A ERGONOMIA DO VENDEDOR TAMBÉM VALE DENTRO DO MÓDULO DE COTAÇÃO =
`cotacao/assets/cotacao.css` é do MÓDULO PORTÁTIL e não se edita (a próxima
atualização sobrescreveria). Ele consome `--vm-toque` / `--vm-toque-lg`, que
`vero-tokens.css` traz em 46px/54px - a medida do VERO MANGO, de uso
sentado. No VENDEDOR a norma é 52px/58px, e um módulo com alvo de 46px
reprovaria o `dev/medir-telas.js` na hora.
A adaptação é do HOSPEDEIRO e entra por aqui, que é o lugar certo: os dois
tokens são redefinidos NO PRÓPRIO `.ct-raiz`/`.ct-doc`, de onde o bloco de
fallback do módulo os lê (`--ct-toque: var(--vm-toque, 46px)`). Nenhuma
medida nova é inventada: reaponta para os `--vd-*` que já existem acima.
`min-width:0` é o que o LEIA-ME §7 pede do contêiner onde o módulo é
montado: sem ele, item de grid/flex cresce além da tela no celular. */
.ct-raiz,.ct-doc{
--vm-toque:var(--vd-toque);
--vm-toque-lg:var(--vd-toque-lg);
}
.tela-cotacao{min-width:0;max-width:100%}
/* A BARRA DE AÇÕES DO MÓDULO NÃO PODE FICAR EMBAIXO DA NOSSA (19/09). O módulo
gruda "Salvar rascunho / Enviar ao cliente" no pé da tela (sticky, bottom:0);
no celular o pé da tela é da barra inferior desta casca (fixed, z 45) - e o
dev/percorrer-cotacao.js achou o "Enviar ao cliente" COBERTO por ela a 320px.
Aqui ela gruda acima da nossa barra, com folga para o botão central elevado
(.aba--centro sobe 22px). Os avisos do módulo, idem. */
@media(max-width:1023px){
.tela-cotacao .ct-ed-acoes{bottom:calc(var(--rodape) + 24px)}
.tela-cotacao .ct-grade--previa .ct-ed-acoes{bottom:calc(var(--rodape) + 24px)}
.tela-cotacao .ct-grade--previa .ct-col-previa{padding-bottom:calc(var(--ct-toque-lg) + 3 * var(--ct-e4) + var(--rodape) + 24px)}
.ct-avisos{bottom:calc(var(--rodape) + 24px)}
}
/* Módulo 2.2+: o módulo SEGUE O TEMA desta casca sozinho (lê --fundo, --card...
do vm.css; sem atributo = escuro). A regra que dava a ele o papel claro no
escuro (B-TEMA-05) SAIU, como a nota da 2.2 manda: com ela, os cartões do
módulo ficariam escuros sobre fundo claro. E a impressão: sem esta linha,
no escuro, a margem da folha A4 sai escura - o módulo não mexe no :root
do hospedeiro (nota da 2.2, item 4). */
@media print{:root{color-scheme:light}}
/* Campo de 16px em TODA largura, não só no celular.
O módulo sobe o campo para 16px em `max-width:767px` (é o tamanho abaixo do
qual o iPhone dá zoom sozinho) e deixa 14px do tablet para cima. A norma
deste sistema não tem essa dobra: campo é 16px sempre, e o
`dev/medir-telas.js` mede as três larguras - 14px em 768px e 1280px reprova
a tela, e reprovava de verdade (menor campo 14px em `input.ct-entrada`).
A classe repetida (0,3,0) é o mesmo truque que o próprio módulo usa para
vencer regra global do hospedeiro: assim esta linha independe da ordem das
folhas no pacote, e continua valendo quando o módulo for atualizado.
`--ct-t-16` é o token do módulo, o MESMO que ele aplica no celular - nada
de tamanho novo inventado aqui. */
.ct-raiz .ct-entrada.ct-entrada{font:var(--ct-t-16)}
/* ===== 1b. UMA fonte de verdade para a cor =================================
`vero-tokens.css` é a fundação do VERO e
carrega em toda página; `vero-spa.css` é a cópia exata do `vm.css` do VERO
MANGO e, por ser cópia, repete os MESMOS valores em hex literal. Duas
grafias do mesmo azul-petróleo, em três sistemas que precisam ficar
idênticos, é como eles deixam de ficar idênticos.
`vero-spa.css` NÃO se edita - ser subsequência exata do `vm.css` é o que
torna a cópia auditável (revisão 1: diff com 0 linhas alteradas
e 406 podadas). Então a costura entra por cima, aqui: cada token da casca
passa a APONTAR para o `--vm-*` de valor idêntico. Nenhum pixel muda hoje
- o que muda é que amanhã a cor tem um dono só.
Conferido token a token contra `vero-tokens.css` ANTES de apelidar. Os que
NÃO têm equivalente lá continuam vindo de `vero-spa.css`, sem cópia aqui:
copiar o valor seria criar a TERCEIRA grafia do mesmo número, que é
exatamente o defeito que este bloco existe para fechar. São eles:
- tema CLARO - `--manga`, `--pos`, `--s3`, `--s5` e `--s7`: correções de
contraste do próprio VERO MANGO, medidas e comentadas em
vero-spa.css:97-103. O token da fundação reprova (o manga base dá
2,67:1 e o aviso base 3,33:1 sobre o cartão; texto exige 4,5:1 e série
de gráfico 3:1), então o valor certo só existe na casca;
- tema ESCURO - superfícies, tinta e estados: `vero-tokens.css` descreve
só o tema claro do VERO, não há o que apontar.
Registrado em. */
/* Marca e séries que valem nos dois temas (o claro sobrescreve o que muda). */
:root{
--teal:var(--vm-teal);
--teal-escuro:var(--vm-teal-escuro);
--teal-2:var(--vm-teal-claro);
--teal-3:var(--vm-teal-medio);
--neon:var(--vm-teal-neon);
--chrome:var(--vm-sidebar);
--manga:var(--vm-manga-claro); /* escuro; o claro tem correção própria */
--s1:var(--vm-teal-neon);
--s2:var(--vm-teal-medio);
--s5:var(--vm-manga-claro);
}
/* Tema claro - a OPÇÃO (o escuro, sem atributo, é o padrão: identidade visual). Mesma especificidade da
regra de vero-spa.css:92, e esta folha carrega depois: esta vence. */
html[data-tema="claro"]{
/* superfícies */
--fundo:var(--vm-papel);
--menu:var(--vm-sidebar);
--card:var(--vm-superficie);
--card-alto:var(--vm-superficie-2);
--campo:var(--vm-campo);
/* tinta */
--tinta:var(--vm-tinta);
--tinta-2:var(--vm-tinta-2);
--mut:var(--vm-tinta-3);
--fraco:var(--vm-fraco); /* só decoração, nunca texto */
/* ação */
--acao:var(--vm-teal);
--sobre-acao:var(--vm-sobre-acento);
/* estados */
--pos-bg:var(--vm-ok-fundo);
--amb:var(--vm-aviso-tinta); /* o -tinta é o único seguro em texto */
--amb-bg:var(--vm-aviso-fundo);
--neg:var(--vm-erro);
--neg-bg:var(--vm-erro-fundo);
--inf:var(--vm-info);
--inf-bg:var(--vm-info-fundo);
--sobre-pos:var(--vm-sobre-acento);
--sobre-amb:var(--vm-sobre-acento);
--sobre-neg:var(--vm-sobre-acento);
--sobre-inf:var(--vm-sobre-acento);
/* séries de gráfico */
--s1:var(--vm-teal);
--s2:var(--vm-teal-claro);
--s4:var(--vm-aviso); /* base: só gráfico e ícone */
--s6:var(--vm-info);
/* sobreposições */
--toast-fundo:var(--vm-sidebar);
}
/* Texto do corpo: 16px em QUALQUER largura. O vendedor de campo lê no sol -
e abaixo de 16px o iPhone dá zoom sozinho no campo e desmonta o layout. */
body{font-size:16px}
.ctrl{font-size:16px;min-height:var(--vd-toque)}
/* Alvos que a casca do VERO MANGO desenha menores que 52px. Nenhum fica
abaixo do mínimo - inclusive no PC, porque o mesmo aparelho de campo
também é usado com o dedo em tela grande. */
.ic-btn{width:var(--vd-toque);height:var(--vd-toque);border-radius:var(--vm-r-sm)}
.ic-btn svg{width:22px;height:22px}
.btn{font-size:15px}
.btn--pq{min-height:var(--vd-toque);font-size:14px;padding:0 16px}
.btn--pq svg{width:17px;height:17px}
.btn--g,.btn--acao{min-height:var(--vd-toque-lg)}
.segmento button{min-height:var(--vd-toque);padding:0 16px;font-size:14px}
.segmento{padding:5px}
.busca .ctrl{min-height:var(--vd-toque);font-size:16px}
.filtros .ctrl{min-height:var(--vd-toque);font-size:16px}
.acao{min-height:var(--vd-toque);padding:0;margin:0}
.aba{min-height:var(--vd-toque)}
.nav-item{min-height:var(--vd-toque)}
.nav-sub__item{min-height:var(--vd-toque);display:flex;align-items:center}
.menu-avatar__item{min-height:var(--vd-toque)}
.sidebar__recolher{width:var(--vd-toque);height:var(--vd-toque)}
.multi__item{min-height:var(--vd-toque)}
.situacao__i{min-height:var(--vd-toque)}
/* O campo do LOGIN não é `.ctrl`: tem regra própria em vero-spa.css:567, com
`font:400 15px/1.4` - e 15px faz o iPhone dar zoom sozinho na PRIMEIRA tela
que o vendedor vê na vida. A altura já subia aqui; a fonte faltava. */
.login__campo input{min-height:var(--vd-toque);font-size:16px}
.login__botoes .btn{min-height:var(--vd-toque-lg)}
.login__esqueci button{min-height:var(--vd-toque)}
.login__mostrar{width:var(--vd-toque);height:var(--vd-toque)}
.sheet__cab .ic-btn{width:var(--vd-toque);height:var(--vd-toque)}
/* Os quatro alvos que a casca desenha com seletor mais específico que o meu:
a busca dentro da tabela, o cabeçalho que ordena, o filtro por coluna e a
busca do campo de marcação. Repetidos com a MESMA especificidade da regra
original, senão eles venceriam e ficariam em 30-40px.
18/09 - OS QUATRO ESTAVAM COM 15px de fonte, e 15px é o número
exato que faz o iPhone dar zoom sozinho no campo. Passaram por duas etapas
sem aparecer porque NENHUMA TELA usava `ui.tabela`, `ui.filtros` ou o campo
de marcação: as verticais eram casca. A versão 3 pôs a `ui.tabela` em Vendas
e em Pedidos e o medidor acusou na primeira rodada - "menor campo 15px em
input.ctrl "Buscar na tabela"". Sobem para 16px, que é a norma escrita.
Só os CAMPOS: `.btn` fica em 15px, porque botão não recebe digitação e não
dispara o zoom. */
.tabela-bi__ferramentas .busca .ctrl{min-height:var(--vd-toque);font-size:16px}
table.tabela-bi__t th > span,table.tabela-bi__t th > button{min-height:var(--vd-toque)}
table.tabela-bi__t tr.tabela-bi__filtros .ctrl{min-height:var(--vd-toque);font-size:16px;padding:4px 10px}
.multi__topo .ctrl{min-height:var(--vd-toque);font-size:16px}
/* O avatar é DECORAÇÃO quando é `div` (36px, a medida do VERO MANGO) e ALVO
DE TOQUE quando é `button` - e é botão no menu do usuário, no topo, em
todas as larguras (app.js:174 e :310). Era o último clicável abaixo de
52px da casca; o `grep` não o pegava porque `.avatar` não tem nada de
suspeito no nome. `button.avatar` (0,1,1) também vence `.avatar--p`
(0,1,0), então o miúdo de 28px sobe junto SE algum dia virar botão - e
continua 28px enquanto for enfeite, que é o certo: enfeite não se toca.
`.avatar--p` não tem uso hoje e não pode ser apagada sem editar
`vero-spa.css`, que é intocável.. */
button.avatar{width:var(--vd-toque);height:var(--vd-toque)}
/* ===== 2. Topo enxuto: nome da tela + busca + sino ==========================
O VERO MANGO mostra fazenda e safra no topo; o vendedor não tem nem uma
nem outra. No lugar entra ONDE ELE ESTÁ - que no celular é a única pista
de contexto que sobra depois que a barra lateral some. */
.topo__tela{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;max-width:42vw}
.topo__tela svg{width:20px;height:20px;color:var(--neon);flex:none}
.topo__tela b{
font:600 17px/1.2 var(--disp);color:var(--tinta);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media(max-width:1023px){.topo__tela{max-width:58vw}}
/* O topo não cabia em 320px - e não era o nome da tela que estourava.
MEDIDO no navegador (Edge headless por CDP, 320x800, mobile):
`documentElement.scrollWidth` 440 contra `clientWidth` 320 em TODA rota
com sessão. `.topo__direita` levava quatro alvos de 52px + 3 gaps de 8 =
232px, mais 28 de padding e 10 de gap = 270 de 320, e `.topo__tela` estava
`flex:none`, então o nome da tela EMPURRAVA em vez de encurtar.
(Atenção a quem for reconferir: em emulação de celular a `innerWidth` do
Chrome CRESCE junto com o conteúdo que transborda - ela devolveu 440 aqui.
Comparar `scrollWidth` com `innerWidth` dá 440 = 440 e parece aprovado. A
comparação honesta é contra `documentElement.clientWidth`.)
Duas correções, as duas de ergonomia, nenhuma de valor:
1) `.topo__tela` passa a encurtar antes de empurrar (`flex:0 1 auto`
acima) - ele já tem `min-width:0` e reticências;
2) no celular sai do topo o ÚNICO controle que tem cópia exata em outro
lugar: o alternador de tema, que mora em Configurações (`.perfil__tema`,
mod-configuracoes.js:28) com rótulo escrito, em vez de um solzinho sem
legenda. Sobram no topo busca, avisos e quem-sou-eu. Três alvos de 52 =
172px, e o nome da tela volta a ter espaço.
Não é o VERO MANGO que muda: lá o topo tem 38px de ícone e o sistema é de
PC. O alvo de 52px é norma deste sistema, e norma nova pede
conferência nova.. */
/* Entrega final (item 2 - "botão de alternância no topo"): o
botão volta ao topo a partir de 480px, exatamente como no VERO MANGO
(`vm.css`: `@media(max-width:479px){#vmTema{display:none}}`). Abaixo disso
ele não cabe ao lado de busca, avisos e avatar com 52px cada, e continua a
um toque em "Mais" e em Configurações. A conta de largura acima continua
valendo para 320px; em 480px sobram 210px para o nome da tela. */
@media(max-width:479px){
#vdTema{display:none}
}
/* Voltar: no celular a barra inferior não tem "voltar", então ele mora no
topo, à esquerda, e só aparece quando a tela é filha de outra. */
.topo__voltar{margin-left:calc(var(--respiro) * -0.4)}
/* ===== 3. Barra inferior e botão central ===================================
A geometria vem da casca (5 colunas, centro elevado). Aqui só o que a
ergonomia de campo exige: alvo maior, rótulo legível e o respiro da
barra do sistema (safe-area) - que no iPhone come 34px de dedo. */
@media(max-width:1023px){
.aba{font-size:11px;gap:5px}
.aba svg{width:24px;height:24px}
.aba--centro{min-height:var(--vd-toque-lg);border-radius:var(--vm-r)}
.aba--centro span{font-size:10px}
/* O conteúdo nunca fica embaixo da barra: o último cartão continua
alcançável com o polegar. */
.corpo{padding-bottom:calc(var(--rodape) + 28px)}
}
/* ===== 4. Folha de ação rápida (o [+] elevado) =============================
Uma decisão por tela: a folha mostra três escolhas grandes, nada mais. */
.rapida{display:flex;flex-direction:column;gap:12px}
.rapida .item{min-height:var(--vd-toque-lg);padding:14px 16px}
.rapida .item__t{font-size:16px;white-space:normal}
.rapida .item__s{white-space:normal;font-size:13px}
.rapida__nota{font-size:13px;color:var(--mut);line-height:1.5;margin-top:4px}
/* ===== 5. Casca de módulo "em construção" ==================================
Regra do projeto: cartão em branco não existe. Enquanto a vertical não
tem regra de negócio, a tela mostra o que JÁ é verdade - o que a vertical
vai fazer, o que falta e onde isso está escrito. Visual pronto, conteúdo
honesto. Um destaque manga por tela, e é este. */
.construcao{display:flex;flex-direction:column;gap:14px}
.construcao__topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.construcao__ic{
width:56px;height:56px;border-radius:var(--vm-r);flex:none;display:grid;place-items:center;
background:var(--manga-bg);color:var(--manga);
}
.construcao__ic svg{width:26px;height:26px}
.construcao__t{font:600 18px/1.25 var(--disp);color:var(--tinta);min-width:0}
.construcao__s{font-size:15px;color:var(--mut);line-height:1.55;margin-top:4px}
.construcao__lista{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.construcao__lista li{
display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--tinta-2);
}
.construcao__lista svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--mut)}
.construcao__pe{font-size:13px;color:var(--mut);line-height:1.5}
/* ===== 6. Convite (não há registro aberto) =================================
Mesma cara da entrada: o código de convite é a porta, então ele aparece
no mesmo cartão, com o mesmo peso - não numa tela de segunda classe. */
.login__ajuda{font:400 13.5px/1.5 var(--sans);color:var(--login-mut);margin:-10px 0 18px}
.login__trocar{margin-top:18px;text-align:center}
.login__trocar button{
font:600 14px/1 var(--sans);color:var(--teal);min-height:var(--vd-toque);padding:0 12px;
}
.login__trocar button:hover{text-decoration:underline}
.login__codigo .ctrl,.login__campo input.codigo{
font-family:var(--num);font-size:19px;letter-spacing:.18em;text-transform:uppercase;
}
.login__convidado{
display:flex;align-items:center;gap:10px;background:var(--login-hover);color:var(--login-tinta-2);
border-radius:var(--vm-r-sm);padding:12px 14px;font:500 14px/1.4 var(--sans);margin-bottom:18px;
}
.login__convidado svg{width:20px;height:20px;flex:none;color:var(--teal)}
/* ===== 7. Listas em cartão no celular ======================================
Tabela espremida em 320px não se lê. A tabela inteligente segue existindo
no PC; no celular a mesma informação vai em `ui.item`. As telas usam este
par de classes para dizer qual das duas formas serve a cada largura. */
@media(max-width:1023px){.so-pc{display:none!important}}
@media(min-width:1024px){.so-celular{display:none!important}}
/* ===== 8. Acessibilidade e sol =============================================
Foco sempre visível (o campo é tocado, mas o PC é usado com teclado) e
nenhuma animação para quem pediu para não ter. */
:focus-visible{outline-width:3px}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Sob luz forte a diferença de profundidade some antes da diferença de cor:
o item ativo da barra inferior ganha um traço, não só um tom. */
@media(max-width:1023px){
.aba--on{position:relative}
.aba--on::before{
content:'';position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;
background:var(--neon);
}
.aba--centro.aba--on::before{display:none}
}
/* Linha "nenhuma linha combina com o filtro" da tabela. Existe como classe
porque o bi.js não escreve estilo à mão - nem inline. */
.tabela-bi__semfiltro{text-align:center;color:var(--mut);padding:22px}
/* ===== 9. Dado de verdade não cabe ========================================
Três pontos da casca não têm teto de largura. Hoje não aparecem porque
não há dado; na versão 2 entram e-mail de gente e nome de cliente, e aí
estouram. Como `vero-spa.css` não se edita, o teto vem por cima.
A medida que vale: `document.documentElement.scrollWidth` em 320px com
e-mail e nome longos injetados - tem de continuar igual a innerWidth. */
/* (a) Menu do avatar: `min-width:220px` sem `max-width` (vero-spa.css:232) e
o e-mail sem corte (:237). Um e-mail de 60 caracteres empurrava a gaveta
para fora da borda esquerda da tela - ela é `right:0`, então crescia para
o lado de lá. Teto pela viewport e corte com reticências nas duas linhas. */
.menu-avatar__lista{max-width:calc(100vw - 2 * var(--respiro))}
.menu-avatar__cab b,
.menu-avatar__cab span{
display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* (b) `.btn` é `white-space:nowrap` sem `max-width` (vero-spa.css:328): um
rótulo longo alargava o botão além do cartão. O teto é o pai; o rótulo do
botão é nó de texto solto dentro de um flex, e nó anônimo de flex não
aceita `text-overflow` - então aqui o corte é limpo, sem reticências. Para
o rótulo que PRECISA aparecer inteiro existe a folha de ação rápida,
que já desliga o nowrap. */
.btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* (c) `.item__v` é nowrap dentro de `.item__d{flex:none}` (vero-spa.css:398):
valor comprido tirava o título do cartão da tela inteira. O bloco da
direita passa a ter teto, e o valor corta com reticências - o número
continua legível, e quem manda no cartão volta a ser o nome do cliente. */
.item__d{max-width:45%;min-width:0}
.item__v{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* ===== 10. Os componentes da versão 2 ======================================
Quatro peças que a versão 3 (Previsão, Vendas e Pedidos) e a versão 4
(Agenda, Comissão, Marketing, Checklist) vão consumir prontas:
.planilha tabela-planilha no PC + lista em cartão no celular
.sheet--arrastando a folha inferior sendo puxada para baixo
.seletor seletor de produto da lista fechada do contrato §3.2
.campo--dinheiro campo de dinheiro com máscara pt-BR
Nenhuma cor, raio ou sombra à mão: tudo é var(--...) dos apelidos do §1b ou
de vero-tokens.css. As duas medidas novas (largura de coluna fixa da
planilha) nascem como token no namespace --vd-*, uma vez só, logo abaixo,
pelo mesmo motivo do §1: elas não existem na escala do VERO MANGO, porque
o VERO MANGO não tem planilha de 12 meses. */
:root{
/* Colunas de identificação da planilha. A primeira é o nome do cliente e
precisa caber "Fazenda Nossa Senhora de Fátima"; as seguintes são
região, cultura e produto. Múltiplos de 4, como a escala de espaço. */
--vd-pl-c1:208px;
--vd-pl-c:132px;
}
/* ---- 10.1 planilha: a casca ---------------------------------------------- */
.planilha{display:flex;flex-direction:column;gap:10px;min-width:0}
.planilha__ferramentas{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.planilha__ferramentas .busca{max-width:340px;flex:1 1 200px}
.planilha__ferramentas .busca .ctrl{min-height:var(--vd-toque);font-size:16px}
.planilha__ordem{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
.planilha__ordem span{font:var(--t-12-500);color:var(--mut);flex:none}
.planilha__ordem .ctrl{min-height:var(--vd-toque);font-size:16px;flex:1;min-width:0}
.planilha__aviso{font:var(--t-13);color:var(--mut);margin-bottom:8px}
.planilha__pe{
display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
font:var(--t-12);color:var(--mut);
}
.planilha__semfiltro{text-align:center;color:var(--mut);padding:22px;font:var(--t-13)}
/* O cabeçalho da `ui.tabela` herdada do VERO MANGO tem 40px de alvo
(vero-spa.css:749) - o mesmo defeito que o medidor pegou na planilha em
18/09, e pela mesma razão: lá o clique é de mouse, aqui é de dedo. Como
`vero-spa.css` não se edita, o teto sobe por cima, junto com o do §1. */
table.tabela-bi__t th > button,
table.tabela-bi__t th > span{min-height:var(--vd-toque)}
/* ---- 10.2 planilha: quem rola é o CONTÊINER, nunca a página --------------
max-width:100% + min-width:0 são o que impede a tabela de empurrar a
largura do documento. Em 320px a tabela nem chega a existir (.so-pc), mas
a trava fica aqui de qualquer jeito: foi rolagem horizontal que reprovou a
versão inicial duas vezes, e ela não volta. */
.planilha__rolagem{
overflow:auto;max-width:100%;min-width:0;
max-height:var(--planilha-altura,560px);
border-radius:var(--raio-p);background:var(--fundo);box-shadow:var(--afundado);
overscroll-behavior:contain;
}
.planilha__rolagem:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
/* ---- 10.3 planilha: densidade de planilha de Excel ------------------------ */
table.planilha__t{
width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;
font:var(--t-13);font-variant-numeric:tabular-nums;
}
table.planilha__t th{
position:sticky;top:0;z-index:3;background:var(--card-alto);
font:var(--t-11);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
text-align:left;padding:0;border-bottom:1px solid var(--linha-forte);white-space:nowrap;
}
table.planilha__t th > span,
table.planilha__t th > button{
display:flex;align-items:center;gap:5px;width:100%;padding:10px 12px;
font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;
text-align:left;min-height:var(--vd-toque);
}
table.planilha__t th > button{cursor:pointer}
table.planilha__t th > button:hover{color:var(--tinta)}
table.planilha__t th > button svg{width:13px;height:13px;color:var(--fraco);flex:none}
table.planilha__t th > button[aria-sort="ascending"] svg,
table.planilha__t th > button[aria-sort="descending"] svg{color:var(--neon)}
html[data-tema="claro"] table.planilha__t th > button[aria-sort="ascending"] svg,
html[data-tema="claro"] table.planilha__t th > button[aria-sort="descending"] svg{color:var(--teal)}
table.planilha__t th > button[aria-sort="descending"] svg{transform:rotate(180deg)}
table.planilha__t th.n > button,
table.planilha__t th.n > span{justify-content:flex-end;text-align:right}
table.planilha__t td{
padding:9px 12px;border-bottom:1px solid var(--linha);vertical-align:middle;
white-space:nowrap;color:var(--tinta);
}
table.planilha__t .n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
table.planilha__t tr.clicavel{cursor:pointer}
/* Zebra sutil: uma linha sim, outra não, com a MESMA superfície que o cartão
usa quando sobe um degrau. Sem cor nova, sem opacidade inventada. */
table.planilha__t tbody tr:nth-child(even) td{background:var(--card)}
table.planilha__t tbody tr:hover td,
table.planilha__t tbody tr:focus-within td{background:var(--card-alto)}
table.planilha__t tbody tr:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
/* ---- 10.4 planilha: as colunas de identificação, fixas à esquerda --------
O `left` é calculado no JS (funcao `esquerda(i)`) a partir dos dois tokens
do topo, como `calc()` - o JS não escreve pixel, escreve a conta com os
tokens. Célula fixa precisa de fundo OPACO próprio: sem ele, os meses
passam por baixo dela quando a planilha rola. */
.planilha__fixa{
position:sticky;z-index:2;background:var(--fundo);
width:var(--vd-pl-c);min-width:var(--vd-pl-c);max-width:var(--vd-pl-c);
overflow:hidden;text-overflow:ellipsis;
}
.planilha__fixa--1{
width:var(--vd-pl-c1);min-width:var(--vd-pl-c1);max-width:var(--vd-pl-c1);
font-weight:600;color:var(--tinta);
}
table.planilha__t th.planilha__fixa{z-index:4;background:var(--card-alto)}
table.planilha__t tbody tr:nth-child(even) td.planilha__fixa{background:var(--card)}
table.planilha__t tbody tr:hover td.planilha__fixa,
table.planilha__t tbody tr:focus-within td.planilha__fixa{background:var(--card-alto)}
/* A borda direita separa o bloco fixo do bloco que rola: sem ela ninguém
entende por que parte da tabela não se move. */
table.planilha__t th.planilha__fixa:last-of-type,
table.planilha__t td.planilha__fixa:last-of-type{box-shadow:1px 0 0 var(--linha-forte)}
/* ---- 10.5 planilha: total na lateral e no rodapé -------------------------- */
table.planilha__t .planilha__totalcol{
position:sticky;right:0;z-index:2;background:var(--card-alto);
font-weight:600;color:var(--tinta);box-shadow:-1px 0 0 var(--linha-forte);
}
table.planilha__t th.planilha__totalcol{z-index:4}
table.planilha__t tfoot td,
table.planilha__t tfoot th{
position:sticky;bottom:0;z-index:3;background:var(--card-alto);
border-top:1px solid var(--linha-forte);border-bottom:0;
font-weight:600;color:var(--tinta);white-space:nowrap;padding:10px 12px;
}
table.planilha__t tfoot .planilha__perotulo{
position:sticky;left:0;z-index:4;text-align:left;
font:var(--t-11);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);
}
table.planilha__t tfoot .planilha__totalcol{z-index:5}
/* ---- 10.6 planilha: no celular, lista em cartão --------------------------
Tabela espremida em 320px não se lê: a informação é a mesma, o corpo é
outro. Cada cartão é um `ui.item`, que o §1 já eleva a 52px. */
.planilha__cartoes{display:flex;flex-direction:column;gap:10px;min-width:0}
.planilha__cartao{min-width:0}
.planilha__cartao .item{width:100%;min-height:var(--vd-toque-lg);text-align:left}
.planilha__cartao .item__t{font-size:15px}
.planilha__cartao .item__s{font-size:13px}
.planilha__cartao .item__v{font-size:15px}
/* ---- 10.7 a folha de detalhe: pares rótulo -> valor ----------------------- */
.det{display:flex;flex-direction:column;gap:2px}
.det--total{margin-top:10px;border-top:1px solid var(--linha-forte);padding-top:8px}
.det__l{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:9px 0;border-bottom:1px solid var(--linha);min-width:0;
}
.det__l:last-child{border-bottom:0}
.det__r{font:var(--t-13);color:var(--mut);flex:0 1 auto;min-width:0}
.det__v{
font-size:15px;color:var(--tinta);text-align:right;flex:1 1 auto;min-width:0;
word-break:break-word;
}
.det__v--n{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;word-break:normal}
.det--total .det__r,.det--total .det__v{font-weight:600;color:var(--tinta)}
/* ---- 10.8 folha inferior: arrastando -------------------------------------
Durante o arrasto a folha segue o dedo, então a transição sai do caminho:
com ela ligada o movimento chega 300ms atrasado e parece travado.
`touch-action:none` na pega é o que impede o navegador de rolar a página
no mesmo gesto. */
.sheet--arrastando{transition:none}
.sheet__pega{touch-action:none;cursor:grab}
@media(max-width:1023px){
/* A pega precisa de ÁREA de toque, não só do risquinho: o alvo tem 52px de
altura e o risco de 5px continua desenhado no meio dele. */
.sheet__pega{
height:var(--vd-toque);width:100%;margin:0;border-radius:24px 24px 0 0;
background:linear-gradient(var(--fraco),var(--fraco)) center/40px 5px no-repeat;
}
.sheet__cab{touch-action:pan-y}
}
.sheet__pe .btn{min-height:var(--vd-toque-lg)}
.sheet__pe .btns{display:flex;gap:10px}
.sheet__pe .btns .btn{flex:1}
/* ---- 10.9 seletor de produto (contrato §3.2) -----------------------------
Lista fechada, vinda do servidor. Alvo de 52px por opção, porque no campo
a escolha do produto é feita com o polegar, de pé, no sol.
POR QUE O COBRE A OPÇÃO INTEIRA
O rádio/caixa nativo mede 22px, e 22px é alvo reprovado aqui. Medido no
Edge em 18/09: `input.seletor__marca` saiu 22x22px em 320/768/1280 e
REPROVOU as três telas. Envolver num rótulo de 52px não resolve: o
medidor (e o dedo) enxergam o , que continua sendo um alvo por
conta própria. Então o passa a OCUPAR a opção inteira, sem
aparência nativa (`appearance:none`), e quem desenha o estado é o
`.seletor__cx` logo atrás dele. O alvo vira a linha toda - que é o que
o dedo já tentava acertar. */
.seletor__lista{display:flex;flex-direction:column;gap:6px;min-width:0}
.seletor__op{
position:relative;
display:flex;align-items:center;gap:12px;min-height:var(--vd-toque);
padding:8px 14px;border-radius:var(--raio-p);background:var(--campo);
box-shadow:var(--afundado);color:var(--tinta);cursor:pointer;min-width:0;
font-size:16px;line-height:1.35;
}
.seletor__op:hover{background:var(--card-alto)}
.seletor__marca{
position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
appearance:none;-webkit-appearance:none;background:transparent;border:0;
border-radius:var(--raio-p);cursor:pointer;font-size:16px;
}
.seletor__cx{
width:24px;height:24px;flex:none;border-radius:var(--raio-pill);
display:grid;place-items:center;background:var(--fundo);box-shadow:var(--afundado);
color:transparent;
}
.seletor__lista--multi .seletor__cx{border-radius:8px}
.seletor__cx svg{width:16px;height:16px}
.seletor__r{flex:1;min-width:0}
/* Estado muda PROFUNDIDADE, não só cor - é a lei do neumorfismo do VERO. */
.seletor__op--on{background:var(--card);box-shadow:var(--relevo-p);font-weight:600}
.seletor__op--on .seletor__cx{background:var(--acao);color:var(--sobre-acao);box-shadow:var(--relevo-p)}
.seletor__op:focus-within{outline:2px solid var(--acao);outline-offset:2px}
.seletor .vazio{padding:26px 16px}
/* ---- 10.10 campo de dinheiro --------------------------------------------- */
.campo--dinheiro .ctrl{font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right}
/* Aviso curto do próprio campo (sinal negativo retirado, por exemplo). O
token de texto seguro do âmbar é --amb (que já aponta para o -tinta). */
.campo__nota{font:var(--t-12);color:var(--amb);font-weight:600}
/* ===== 11. As três verticais da versão 3 ===================================
Previsão de Vendas, Vendas e Pedidos deixaram de ser casca. O que entra
aqui é só o que as telas novas pedem e a casca copiada não tem:
.formato o par Tabela | Painel, que alterna sem ir à rede
.barra-mes o mês de referência das Vendas e dos Pedidos
.calculado CAMPO CALCULADO em somente-leitura (comissão, overprice)
.conta a resposta de `pedido.calcular` desenhada no formulário
.rascunho a linha que diz que o preenchimento está guardado
.assina o quadro de assinatura (maior ou igual a 200px em retrato E em paisagem)
.assinatura os dois caminhos de assinatura, lado a lado
.ficha o cabeçalho do pedido aberto
.mapa-reg o mapa por região + a lista de quem não tem ponto
Mesma lei do resto do arquivo: nenhuma cor, raio ou sombra à mão.
grep -n "#[0-9a-fA-F]\{3,6\}" assets/css/vero-app.css -> vazio. */
/* ---- 11.1 o par Tabela | Painel ------------------------------------------ */
.formato__barra{display:flex;flex-direction:column;gap:8px;min-width:0}
.formato__r{font:var(--t-12-500);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.formato__n{font:var(--t-12);color:var(--mut);line-height:1.5}
.formato__linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.formato__barra .segmento{max-width:100%}
.formato{display:flex;flex-direction:column;gap:16px;min-width:0}
.formato[hidden]{display:none}
/* ---- 11.2 o mês de referência -------------------------------------------- */
.barra-mes{display:flex;flex-direction:column;gap:8px;min-width:0}
.barra-mes .campo{margin:0;max-width:280px}
.barra-mes__n{font:var(--t-12);color:var(--mut);line-height:1.5}
/* ---- 11.3 CAMPO CALCULADO - o que a tela não deixa digitar ----------------
A especificação chama o potencial de comissão de "campo calculado,
nunca digitado". Aqui ele nem é um : é um bloco AFUNDADO (a mesma
profundidade do campo desabilitado), com o valor em fonte de número e a
regra usada escrita embaixo. Quem olha entende, sem ler manual, que não há
o que digitar ali. */
.calculado{
display:flex;flex-direction:column;gap:4px;
padding:14px 16px;border-radius:var(--raio-p);
background:var(--campo);box-shadow:var(--afundado);min-width:0;
}
.calculado__r{font:var(--t-12-500);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.calculado__v{
font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;font-size:22px;
line-height:1.2;color:var(--tinta);overflow-wrap:anywhere;
}
.calculado__s{font:var(--t-12);color:var(--mut);line-height:1.5}
.card--comissao .calculado__v{color:var(--manga)}
/* ---- 11.4 a conta do servidor dentro do formulário ----------------------- */
.conta{
display:flex;flex-direction:column;gap:10px;
padding:14px 16px;border-radius:var(--raio-p);
background:var(--card-alto);box-shadow:var(--relevo-p);min-width:0;
}
.conta__espera{font:var(--t-13);color:var(--mut);line-height:1.5;min-height:22px}
.conta__parc{font:var(--t-13);color:var(--tinta-2);font-family:var(--num)}
.conta__ok{font:var(--t-12);color:var(--mut)}
/* ---- 11.5 o rascunho ------------------------------------------------------ */
.rascunho{font:var(--t-12);color:var(--mut);line-height:1.5;margin-bottom:10px}
.rascunho--ruim{color:var(--amb);font-weight:600}
/* O rodapé dos passos é grudado embaixo - e no celular a barra de navegação
mora ali. Sem este deslocamento, "Continuar" nasce ESCONDIDO atrás dela. */
@media(max-width:1023px){
.passos__pe{bottom:var(--rodape);padding-bottom:14px}
}
.confirma{display:flex;flex-direction:column;gap:14px;min-width:0}
.confirma .card{margin:0}
/* ---- 11.6 O QUADRO DE ASSINATURA -----------------------------------------
O roteiro da versão 3 fixa a medida: ÁREA DE 200px NO MÍNIMO, em retrato e
em paisagem. `clamp()` é o que garante os dois de uma vez -
retrato, celular de 320x640 : 30vh = 192px -> o clamp segura em 200px
paisagem, o mesmo aparelho : 30vh = 96px -> o clamp segura em 200px
PC de 1280x800 : 30vh = 240px -> 240px, e o teto é 320px
ou seja: o quadro NUNCA encolhe abaixo de 200px, e quem rola é a página.
A linha de assinatura é desenhada aqui, no fundo, e não no canvas: o canvas
guarda só o traço do cliente, que é o que vira vetor. */
.assina{display:flex;flex-direction:column;gap:8px;min-width:0}
.assina > label{font:var(--t-12-500);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.assina__area{
position:relative;border-radius:var(--raio-p);
background:var(--campo);box-shadow:var(--afundado);overflow:hidden;
}
/* a linha onde se assina - 24px acima da base do quadro */
.assina__area::after{
content:'';position:absolute;left:18px;right:18px;bottom:26px;height:1px;
background:var(--linha-forte);pointer-events:none;
}
.assina__tela{
display:block;width:100%;
height:clamp(200px,30vh,320px);
color:var(--tinta);
touch-action:none;cursor:crosshair;position:relative;z-index:1;
}
.assina--preenchida .assina__area{box-shadow:var(--afundado),0 0 0 2px var(--acao)}
.assina__pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.assina__estado{flex:1;min-width:0;font:var(--t-12);color:var(--mut);line-height:1.45}
.assina__pe .btn{min-height:var(--vd-toque)}
.assina__prova{
display:block;width:100%;height:auto;max-width:100%;
border-radius:var(--raio-p);background:var(--campo);box-shadow:var(--afundado);
}
/* ---- 11.7 os dois caminhos de assinatura --------------------------------- */
.assinatura{display:flex;flex-direction:column;gap:14px;min-width:0}
.assinatura__corpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.assinatura__corpo .segmento{align-self:flex-start;max-width:100%}
.assinatura__corpo form{display:flex;flex-direction:column;gap:12px}
/* O hash é prova: monoespaçado e quebrando em qualquer lugar, porque ele não
tem espaço nenhum e numa tela de 320px sairia da borda. */
.hash{
font-family:var(--num);font-size:12px;line-height:1.6;color:var(--tinta-2);
word-break:break-all;padding:12px 14px;border-radius:var(--raio-p);
background:var(--campo);box-shadow:var(--afundado);
}
/* ---- 11.8 o cabeçalho do pedido aberto ----------------------------------- */
.ficha__topo{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;min-width:0}
.ficha__num{font-family:var(--num);font-size:13px;letter-spacing:.06em;color:var(--mut)}
.ficha__cli{font:600 19px/1.25 var(--disp);color:var(--tinta);overflow-wrap:anywhere}
.ficha__topo > .tag{white-space:normal;max-width:100%}
/* V6: uma chave do BI por bloco, com um fio entre elas */
.chave-bi{padding:12px 0;border-top:1px solid var(--linha)}
.chave-bi:first-child{border-top:0;padding-top:4px}
.ficha__sub{font:var(--t-13);color:var(--mut);line-height:1.5;margin-top:2px}
/* ---- 11.9 mapa por região + a lista do que não tem ponto ----------------- */
.mapa-reg{display:flex;flex-direction:column;gap:12px;min-width:0}
.mapa-reg__lista{display:flex;flex-direction:column;gap:8px;min-width:0}
.mapa-reg__nota{font:var(--t-12);color:var(--mut);line-height:1.5}
/* ---- 11.10 os controles do Leaflet ---------------------------------------
O MAPA É NOVO NESTE SISTEMA e traz os controles do Leaflet como eles vêm da
biblioteca: zoom de 26px, seletor de camadas de 36px e os créditos de 10px
de altura. Os três são ALVOS DE TOQUE de verdade - o vendedor aproxima o
mapa com o polegar, dentro do carro - e os três reprovaram na primeira
medição da versão 3 (`menor alvo 10x38,5px em a "Leaflet"`, nas três
larguras, assim que Vendas passou a desenhar o mapa).
`leaflet.css` é arquivo de biblioteca e não se edita, pela mesma razão que
`vero-spa.css` não se edita: a cópia tem de continuar conferível contra a
original. Então o teto de 52px sobe por cima, aqui.
OS CRÉDITOS CONTINUAM CLICÁVEIS, e de propósito: a licença do OpenStreetMap
e a do Esri exigem o crédito com link. O que muda é a ÁREA - eles viram uma
faixa de 52px, legível no sol, em vez de duas letrinhas de 10px. */
/* A ESPECIFICIDADE TEM DE SUBIR, e este é o porquê: o `leaflet.css` é
carregado SOB DEMANDA (`VD.carregarFolha`, quando o primeiro mapa aparece),
ou seja DEPOIS desta folha. Em empate de especificidade quem vem depois
vence - e `.leaflet-touch .leaflet-bar a` (0,2,1) empatava com a minha
regra. Por isso tudo aqui está ancorado no contêiner do mapa
(`.mapa.leaflet-container`), que sobe para (0,3,x) e ganha sem precisar de
`!important`. Medido: sem a âncora o zoom continuava 30x30px nas três
larguras, com a regra escrita e "aplicada". */
.mapa.leaflet-container .leaflet-bar a,
.mapa.leaflet-container .leaflet-control-zoom-in,
.mapa.leaflet-container .leaflet-control-zoom-out,
.mapa.leaflet-container .leaflet-control-layers-toggle{
width:var(--vd-toque);height:var(--vd-toque);
line-height:var(--vd-toque);
display:flex;align-items:center;justify-content:center;
}
.mapa.leaflet-container .leaflet-control-layers-expanded{padding:10px 14px}
.mapa.leaflet-container .leaflet-control-layers-selector{width:22px;height:22px}
.mapa.leaflet-container .leaflet-control-layers label{
display:flex;align-items:center;gap:8px;min-height:var(--vd-toque);font-size:16px;
}
.mapa.leaflet-container .leaflet-control-attribution{
min-height:var(--vd-toque);display:flex;align-items:center;gap:6px;
padding:0 10px;font-size:12px;
/* O fundo semibranco do leaflet.css deixava o --mut do ESCURO em 1,68:1
(medido em 18/09): o crédito ganha o fundo do cartão, nos dois temas. */
background:var(--card);color:var(--mut);
}
.mapa.leaflet-container .leaflet-control-attribution a{
display:inline-flex;align-items:center;justify-content:center;
min-height:var(--vd-toque);min-width:var(--vd-toque);padding:0 6px;
}
/* Sem ladrilho, o `leaflet.css` pinta o fundo de cinza #ddd - o "cinza sem
explicação". O fundo passa a ser o do campo, nos dois temas, e a faixa de
aviso (`ui.mapa` -> `vigiarLadrilhos`) diz o que aconteceu. Os pontos
continuam por cima: são vetor, e vêm do banco. */
.mapa.leaflet-container{background:var(--campo)}
.mapa__aviso{
position:absolute;left:10px;right:10px;bottom:calc(var(--vd-toque) + 10px);z-index:900;
padding:10px 14px;border-radius:var(--raio-p);
background:var(--card-alto);color:var(--tinta);border-left:4px solid var(--amb);
box-shadow:var(--relevo-p);font:600 14px/1.4 var(--sans);
}
/* ---- 11.11 o quadro de assinatura dentro de `assinar.php` -----------------
A página pública é HTML puro, com um esqueleto de estilo embutido escrito
pelo `back` e o nosso pacote de CSS por cima. Quando o canvas é montado, o
contêiner `.as-desenho` ganha a classe `.assina-caixa` e precisa desistir do
que ele era: uma caixa tracejada, centralizada, com um texto de aviso no
meio. A especificidade é (0,2,0) de propósito - o `