/* admin.css — o painel do gestor. Carregado SEMPRE depois do `flowpest.css`: as cores (--fundo, --ouro, --texto…) vêm de lá e nenhum hex novo nasce aqui, com UMA exceção deliberada explicada logo abaixo (a barra lateral). O desenho é o "misto" aprovado em 17/08: · barra lateral SEMPRE escura, em qualquer tema — é o que dá personalidade sem depender de imagem, e é o padrão das referências que o dono trouxe; · área de trabalho clara de dia, escura à noite, com botão para forçar; · degradê de ouro bem fraco no fundo da área de trabalho (~4%). Percebe-se que "tem alguma coisa ali", não se percebe a cor. Menu SÓ TEXTO, sem ícone e sem emoji (decisão do dono, a mesma do app do técnico): emoji muda de desenho em cada aparelho e não é a nossa marca. */ /* ── A barra lateral tem paleta PRÓPRIA ────────────────────────────────── Ela não pode usar --barra/--texto porque esses viram claro no tema claro, e a lateral tem que ficar escura nos dois. Então ela aponta para os valores `--d-*` do flowpest.css — que são os MESMOS hex do tema escuro, sem cópia. */ :root { /* A cor ATRÁS de tudo. O painel passou a ter três níveis de profundidade (17/08, geometria pedida pelo dono): a moldura no fundo, os dois painéis arredondados por cima dela, e os cartões dentro deles. Sem o nível de baixo, "arredondar" não destacaria nada — cantos redondos só aparecem quando há algo diferente atrás. */ --l-moldura: #E7EAEE; /* o valor CLARO, para quem não segue o tema (a tela de entrada) poder apontar para ele */ --moldura: var(--l-moldura); --lat-fundo: var(--d-barra); --lat-fundo2: var(--d-fundo); --lat-borda: var(--d-borda); --lat-texto: var(--d-texto); --lat-fraco: var(--d-texto-fraco); --lat-ouro: var(--d-ouro); --lat-larg: 244px; --moldura-folga: 10px; /* a margem que revela a moldura */ --raio-painel: 20px; } /* No escuro a moldura é mais funda que o próprio fundo escuro — é o que faz o painel parecer apoiado sobre algo, e não recortado nele. */ :root[data-tema="escuro"] { --moldura: #07090A; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --moldura: #07090A; } } /* ── Esqueleto ─────────────────────────────────────────────────────────── Duas colunas: lateral fixa + o resto. `min-height:100dvh` em vez de 100vh porque no celular a barra de endereço do navegador come parte da `vh` e a página ficava com um vão embaixo ao rolar. */ body.adm { margin: 0; min-height: 100dvh; background: var(--moldura); padding: var(--moldura-folga); } .adm-grade { display: grid; grid-template-columns: var(--lat-larg) 1fr; gap: var(--moldura-folga); min-height: calc(100dvh - var(--moldura-folga) * 2); } /* ── Barra lateral ───────────────────────────────────────────────────── */ .adm-lateral { position: sticky; /* Gruda a uma folga do topo, e não em 0: assim ela para exatamente onde o painel começa, em vez de encostar na borda da janela. */ top: var(--moldura-folga); height: calc(100dvh - var(--moldura-folga) * 2); display: flex; flex-direction: column; background: linear-gradient(180deg, var(--lat-fundo) 0%, var(--lat-fundo2) 100%); border: 1px solid var(--lat-borda); border-radius: var(--raio-painel); /* Sombra funda e larga: é o que separa a lateral escura da moldura, que também é escura no tema noturno. Sem ela, os dois viram uma mancha só. */ box-shadow: 0 8px 28px rgba(0, 0, 0, .22); padding: 14px 10px 10px; /* A lateral inteira NÃO rola: quem rola é só a lista de seções (`.adm-nav`). Assim a marca fica presa em cima e o rodapé — tema, empresa, Sair — fica preso embaixo, sempre à vista. Antes a lateral inteira rolava e o rodapé ficava 220px abaixo da dobra: com a barra de rolagem escondida, ninguém descobriria que ele existe. */ overflow: hidden; } .adm-marca { /* Centralizada e com respiro embaixo (pedido do dono, 17/08): encostada no "Visão geral", a marca parecia o primeiro item do menu. */ display: flex; justify-content: center; padding: 4px 8px 22px; color: var(--lat-texto); line-height: 0; /* o SVG é inline: sem isto sobra um vão embaixo */ } .adm-nav { flex: 1; /* Rola quando a tela é baixa, mas SEM a barra cinza do sistema por cima do menu (o dono apontou em 17/08: "fica feio"). A rolagem continua funcionando pela roda do mouse, pelo toque e pelo teclado — some só o desenho da barra. As três linhas cobrem Firefox, Chrome/Safari e o Edge antigo, nessa ordem. */ overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .adm-nav::-webkit-scrollbar { width: 0; height: 0; } /* Título do grupo ("Operação", "Comercial"…). Ouro, pequeno e espaçado: ele corta a lista em blocos que o olho encontra sem ler. */ .adm-grupo { display: block; color: var(--lat-ouro); font-size: 10.5px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em; /* 10px e não 12: com 12 a lista passava 7px da tela num monitor de 720px de altura útil, e a lateral inteira entrava em rolagem por causa disso. */ margin: 10px 0 4px; padding: 0 13px; text-decoration: none; } .adm-nav > .adm-grupo:first-child { margin-top: 0; } /* O grupo logo depois do "Visão geral" respira mais: ele é o começo do menu de verdade, e colado no destaque os dois pareciam um bloco só. */ .adm-grupo-link + .adm-grupo { margin-top: 22px; } /* "Visão geral" é grupo E destino ao mesmo tempo: um item só não merecia duas linhas. Como ele é clicável, ganha a mesma caixa dos itens — senão nada na tela contaria que dá para clicar. */ .adm-grupo-link { padding: 8px 12px; border: 1px solid rgba(255, 197, 61, .30); border-radius: var(--raio); transition: border-color var(--transicao); /* O DESTAQUE. Ele estava com a mesma cara dos rótulos que não clicam, e nada na tela contava a diferença. São duas camadas: um brilho estreito que atravessa a caixa devagar, e o fundo ouro fixo por baixo. O brilho é `background-size: 220%` deslizando de um lado ao outro — o mesmo truque das telas de "carregando", em câmera lenta e com opacidade baixa. 9 segundos: rápido o bastante para o olho pegar de passagem, lento o bastante para não pedir atenção enquanto a pessoa trabalha. */ background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 62%) 0 0 / 220% 100% no-repeat, rgba(255, 197, 61, .10); /* Duas animações no mesmo elemento, e elas não brigam: a primeira mexe na POSIÇÃO do brilho, a segunda na COR do fundo, da borda e do texto. O brilho ficou branco justamente por causa disso — sendo ouro, ele sumiria em cima do ouro e destoaria em cima do violeta. */ animation: brilho-passando 9s linear infinite, ouro-violeta 9s ease-in-out infinite; } @keyframes brilho-passando { from { background-position: 140% 0, 0 0; } to { background-position: -140% 0, 0 0; } } /* Ouro → violeta → ouro. O violeta é a cor da IA na identidade v2, então o destaque do painel pisca na cor que o produto usa para "inteligência" — e não numa cor inventada. */ @keyframes ouro-violeta { 0%, 100% { color: var(--d-ouro); border-color: rgba(255, 197, 61, .42); background-color: rgba(255, 197, 61, .10); } 50% { color: var(--d-violeta); border-color: rgba(168, 85, 247, .45); background-color: rgba(168, 85, 247, .13); } } .adm-grupo-link:hover { border-color: var(--lat-ouro); } .adm-grupo-link:focus-visible { outline: 2px solid var(--lat-ouro); outline-offset: -2px; } .adm-grupo-link.ativo { border-color: var(--lat-ouro); } /* Quem pediu menos movimento no aparelho não recebe o brilho — o `prefers-reduced-motion` do flowpest.css já mata a animação, e aqui o fundo ouro fixo garante que o destaque continue existindo parado. */ .adm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; /* Compacto de propósito: são 13 itens e o menu precisa caber sem rolar num notebook de 720px de altura útil. `line-height` normal (1.6, herdado do corpo) somava 5px por linha e sozinho jogava a lista para fora da tela. */ padding: 5px 12px; margin-bottom: 2px; border-radius: var(--raio); color: var(--lat-fraco); text-decoration: none; font-size: 13.5px; line-height: 1.45; font-weight: 500; /* A borda nasce transparente e só troca de COR nos estados. Se ela só aparecesse no hover, cada item pularia 1px ao passar o mouse. */ border: 1px solid transparent; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .adm-item:hover { border-color: var(--lat-ouro); background: rgba(255, 197, 61, .07); color: var(--lat-texto); } .adm-item:focus-visible { outline: 2px solid var(--lat-ouro); outline-offset: -2px; } .adm-item.ativo { background: rgba(255, 197, 61, .12); border-color: rgba(255, 197, 61, .38); color: var(--lat-texto); font-weight: 600; /* A barrinha de ouro à esquerda é sombra interna, e não borda: assim ela convive com a borda do contorno em vez de disputar o mesmo lado. */ box-shadow: inset 3px 0 0 var(--lat-ouro); } /* Rodapé da lateral: quem está logado + tema e Sair lado a lado. `flex: none` porque ele é irmão da `.adm-nav`, que estica: sem isso o navegador poderia espremê-lo para dar espaço à lista. */ .adm-rodape { flex: none; border-top: 1px solid var(--lat-borda); padding-top: 10px; margin-top: 10px; } /* As cinco ações dividem uma linha só, em ícone. Escritas por extenso elas ocupariam três linhas da lateral; aqui a pessoa aprende pela POSIÇÃO, que nunca muda. `display: contents` faz o
do Sair sumir do layout — ele existe só para o POST, e como caixa quebraria a linha em duas. */ .adm-rodape-acoes { display: flex; align-items: center; gap: 4px; } .adm-rodape-acoes form { display: contents; } .adm-icone { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 34px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--raio); background: transparent; color: var(--lat-fraco); font: inherit; cursor: pointer; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); } /* 18px de desenho num alvo de 34px: o ícone fica discreto, mas a área de clique continua do tamanho de um dedo. */ .adm-icone svg { width: 18px; height: 18px; flex: none; } .adm-icone:hover { border-color: var(--lat-ouro); background: rgba(255, 197, 61, .07); color: var(--lat-texto); } .adm-icone:focus-visible { outline: 2px solid var(--lat-ouro); outline-offset: -2px; } .adm-icone.ativo { color: var(--lat-ouro); border-color: rgba(255, 197, 61, .38); background: rgba(255, 197, 61, .12); } /* ── O botão de tema: sol OU lua, nunca os dois ────────────────────────── Mesma lógica de três blocos dos tokens de cor no flowpest.css: o padrão é claro (sol), o aparelho escuro troca para a lua, e a escolha na mão ganha do aparelho nos dois sentidos. `hidden` puro não serve aqui porque o CSS precisa religar o que escondeu. */ .adm-tema .adm-tema-lua { display: none; } .adm-tema .adm-tema-sol { display: inline-flex; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .adm-tema .adm-tema-sol { display: none; } :root:not([data-tema="claro"]) .adm-tema .adm-tema-lua { display: inline-flex; } } :root[data-tema="escuro"] .adm-tema .adm-tema-sol { display: none; } :root[data-tema="escuro"] .adm-tema .adm-tema-lua { display: inline-flex; } :root[data-tema="claro"] .adm-tema .adm-tema-sol { display: inline-flex; } :root[data-tema="claro"] .adm-tema .adm-tema-lua { display: none; } .adm-tema span { line-height: 0; } /* O número ao lado do ícone de mensagens (o dono gostou dele ao lado, e não como bolha em cima). Só aparece quando há algo para ler. */ .adm-icone-conta { font-size: 11px; font-weight: 700; color: var(--lat-ouro); line-height: 1; } /* Com o número do lado, o botão de mensagens precisa de mais largura que os outros quatro — senão o ícone fica espremido contra o algarismo. */ .adm-icone:has(.adm-icone-conta) { flex: 1.5; } .adm-conta-nome { display: block; padding: 0 12px 7px; color: var(--lat-texto); font-size: 12.5px; font-weight: 600; /* Nome de dedetizadora é longo; corta com reticências em vez de quebrar. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Coluna de trabalho ──────────────────────────────────────────────── */ .adm-coluna { min-width: 0; /* sem isto, uma tabela larga estica a coluna e empurra a lateral para fora da tela */ display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio-painel); /* `clip` e NÃO `hidden`. Os dois cortam o que passa da borda arredondada, mas `hidden` cria uma área de rolagem — e isso quebraria o `position: sticky` do topo, que passaria a grudar dentro da coluna em vez de na janela. `clip` corta sem criar área de rolagem, então o topo continua funcionando. */ overflow: clip; /* O degradê fraquinho. Dois focos de luz bem diluídos — ouro no alto à direita, azul no alto à esquerda — sobre a cor de fundo de sempre. `fixed` mantém a luz parada enquanto o conteúdo rola. A cor de chegada é a MESMA cor com alfa 0, e não a palavra `transparent`: `transparent` é preto-transparente, e vários navegadores interpolam por ele — o degradê passa por um cinza sujo no meio do caminho e aparece como uma borda visível. Escrever `rgba(…, 0)` faz a cor sumir sem mudar de matiz. */ background: /* Luz de cima: uma faixa clara que desce e some, para a área não ser um retângulo de cor chapada. É o degradê que o dono pediu em 17/08 — o que existia antes eram só os dois focos de cor dos cantos, fracos demais para se perceber no meio da tela. */ linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%), radial-gradient(900px 420px at 100% -8%, rgba(255, 197, 61, .10), rgba(255, 197, 61, 0) 62%), radial-gradient(760px 380px at -6% -10%, rgba(53, 80, 224, .07), rgba(53, 80, 224, 0) 64%), var(--fundo); background-attachment: fixed; } /* No escuro a faixa branca vira névoa cinza por cima do carvão: feia e suja. Lá ela cai para um véu quase imperceptível, só para o topo não ser chapado. */ :root[data-tema="escuro"] .adm-coluna { background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 46%), radial-gradient(900px 420px at 100% -8%, rgba(255, 197, 61, .07), rgba(255, 197, 61, 0) 62%), radial-gradient(760px 380px at -6% -10%, rgba(53, 80, 224, .06), rgba(53, 80, 224, 0) 64%), var(--fundo); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .adm-coluna { background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 46%), radial-gradient(900px 420px at 100% -8%, rgba(255, 197, 61, .07), rgba(255, 197, 61, 0) 62%), radial-gradient(760px 380px at -6% -10%, rgba(53, 80, 224, .06), rgba(53, 80, 224, 0) 64%), var(--fundo); } } .adm-topo { position: sticky; top: var(--moldura-folga); z-index: 5; display: flex; align-items: center; gap: 14px; /* Barra FINA (pedido do dono, 17/08): 52px de altura contra os 70 de antes. O que sobra vai para o conteúdo — que é o que o gestor veio ver. */ min-height: 52px; padding: 7px 18px; border-bottom: 1px solid var(--borda); /* Semitransparente + blur: o conteúdo passa por baixo em vez de sumir numa faixa opaca. `color-mix` mistura a cor da barra com transparente, então ela continua saindo do token e acompanha o tema. */ background: color-mix(in srgb, var(--barra) 82%, transparent); backdrop-filter: blur(10px); } .adm-titulo { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; flex: none; white-space: nowrap; } /* ── Abas do Dashboard ─────────────────────────────────────────────── Elas moram na barra do topo (decisão do dono, 18/08): não custam altura nem largura, e a aba ativa faz o papel do título — que por isso some nesta tela. A marca da aba ativa é uma linha embaixo, e não um fundo: a barra já é uma superfície, e fundo dentro de fundo empilha caixas demais num espaço de 53px. */ .adm-abas { display: flex; align-items: center; gap: 3px; flex: none; min-width: 0; overflow-x: auto; /* `overflow-y: hidden` EXPLÍCITO, e não por esquecimento (sessão 80, achado pelo dono no celular). A regra do CSS diz que, quando um dos eixos deixa de ser `visible`, o outro também deixa: só com `overflow-x: auto` a barra ganhava rolagem VERTICAL de brinde, e o dedo arrastava as abas para cima e para baixo. Declarar o eixo Y encerra o assunto. O `padding-bottom` é a outra metade do conserto, e apareceu MEDINDO por que havia o que rolar: o sublinhado da aba ativa é um `::after` em `bottom: -8px`, ou seja, 8px ABAIXO da caixa. Era essa sobra que a barra rolava - e, sem rolar, o sublinhado ficava recortado. Quer dizer: a marca dourada da aba ativa nunca foi vista sem arrastar. Com os 8px de respiro ela cabe dentro, aparece, e não sobra nada para rolar. */ overflow-y: hidden; padding-bottom: 8px; scrollbar-width: none; } .adm-abas::-webkit-scrollbar { height: 0; } /* Só ícone, no mesmo traço dos do rodapé. Sete palavras ocupariam metade da barra; sete desenhos cabem em um terço dela — e sobra espaço para a busca com IA, que ainda vai entrar aqui. */ .adm-aba { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; color: var(--texto-fraco); text-decoration: none; transition: color var(--transicao), background var(--transicao); } .adm-aba svg { width: 19px; height: 19px; } .adm-aba:hover { color: var(--texto); background: var(--fundo); } .adm-aba:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; } /* A aba aberta fica OURO, e ganha um fundo fraquinho da mesma cor. Sem o fundo, um ícone dourado sozinho some quando o vizinho está em foco. */ .adm-aba.ativa { color: var(--ouro); background: color-mix(in srgb, var(--ouro) 12%, transparent); } .adm-aba.ativa::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -8px; height: 2px; border-radius: 2px; background: var(--ouro); } /* ── Conteúdo das subabas ──────────────────────────────────────────── Diferente da Visão geral, uma subaba PODE rolar: ela é consulta, não vigilância. Espremer um ranking de oito pragas para caber na dobra esconderia justamente o que se foi ali procurar. */ .sub { display: flex; flex-direction: column; gap: 14px; } /* Avisos e a frase de "ainda sem uso" ficam ACIMA da coluna de blocos, com o mesmo respiro que separa um bloco do outro. */ .sub-avisos { margin-bottom: 14px; } .sub-vazio { margin: 0 0 14px; font-size: 13.5px; color: var(--texto-fraco); } /* Baixar planilha: ação secundária de verdade. Tem contorno para se ler como clicável, mas fica no traço fino e alinhada à direita — não pode competir com os números, que são o motivo de a aba existir. */ .sub-baixar-linha { margin: 0; display: flex; justify-content: flex-end; } .sub-baixar { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--borda-forte); border-radius: var(--raio); font-size: 13px; font-weight: 600; color: var(--texto-fraco); text-decoration: none; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); } .sub-baixar:hover { color: var(--ouro); border-color: var(--ouro); background: var(--fundo); } .sub-baixar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } .sub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } /* Ranking: nome, barra proporcional, valor. */ .sub-rank { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--borda); } .sub-rank:last-child { border-bottom: none; } .sub-rank-nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-rank-barra { height: 8px; border-radius: 999px; background: var(--fundo); overflow: hidden; } .sub-rank-barra i { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--ouro); animation: vg-enche .8s cubic-bezier(.2, .8, .2, 1) both; } .sub-rank-valor { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ── Equipe agora ──────────────────────────────────────────────────── Um cartão por técnico. Em tela larga eles ficam lado a lado; a partir de dois técnicos isso é o que permite comparar o dia de um com o do outro sem rolar. */ .eq-grade { display: grid; /* `min(420px, 100%)` e não `420px`: num celular de 375px o `minmax(420px, 1fr)` cria uma coluna de 420px FIXOS, e o cartão passa 68px da tela — sem nem virar rolagem, porque a moldura corta. A pílula de estado e o selo de cada visita ficavam do lado de fora (medido em 19/08, iPhone de 375px). */ grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 12px; } .eq-card { padding: 14px 16px; } .eq-topo { display: flex; align-items: center; gap: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--borda); } .eq-avatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: var(--ouro); color: var(--ouro-contra); font-size: 13px; font-weight: 800; } .eq-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; } .eq-nome strong { font-size: 14.5px; font-weight: 700; } .eq-nome small { font-size: 11.5px; color: var(--texto-fraco); } .eq-visitas { margin: 0; padding: 0; list-style: none; } .eq-visita { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borda); } .eq-visita:last-child { border-bottom: none; padding-bottom: 0; } .eq-hora { flex: none; min-width: 76px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .eq-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; } .eq-quem strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eq-quem small { font-size: 11px; color: var(--texto-fraco); } .eq-marcas { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .eq-marca { padding: 2px 7px; border-radius: 999px; border: 1px solid var(--borda); font-size: 10.5px; color: var(--texto-fraco); white-space: nowrap; } /* Check-in longe do endereço: alerta suave, porque endereço mal cadastrado dá exatamente o mesmo sintoma que técnico que não desceu do carro. */ .eq-marca.longe { color: var(--laranja-txt); border-color: var(--laranja-borda); background: var(--laranja-fundo); } /* As pílulas de estado, herdadas da faixa de equipe que existia na Visão geral. */ .vg-pill { flex: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); font-size: 11.5px; font-weight: 600; white-space: nowrap; } .vg-pill.cor-verde { color: var(--verde-txt); border-color: var(--verde-borda); background: var(--verde-fundo); } .vg-pill.cor-vermelho { color: var(--vermelho-txt); border-color: var(--vermelho-borda); background: var(--vermelho-fundo); } .vg-pill.cor-azul { color: var(--azul); border-color: var(--azul-borda); background: var(--azul-fundo); } .vg-pill.cor-cinza { color: var(--texto-fraco); } /* ── O "up" dos cartões (19/08) ────────────────────────────────────── O dono achou os cartões sem vida. O tratamento é sempre o mesmo e é de propósito discreto: uma FAIXA de cor no topo dizendo o estado, uma entrada que sobe, e resposta ao passar o mouse. Nada pisca sozinho na tela — num painel que fica aberto o dia inteiro, movimento perpétuo cansa e, pior, ensina a ignorar. A ÚNICA coisa que pulsa é "Em serviço", porque essa é literalmente a informação "está acontecendo agora". Quem pediu menos movimento no aparelho não recebe nada disso (regra no fim do arquivo): a cor e a faixa continuam, o movimento não. */ /* A faixa fica sobre a borda de cima do cartão, com as pontas seguindo o arredondamento — por isso `inset` em vez de `width: 100%`. */ .eq-card, .vg-kpi, .adm-kpi { position: relative; overflow: hidden; } .eq-card::before, .vg-kpi::before, .adm-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cor-faixa, var(--borda-forte)), color-mix(in srgb, var(--cor-faixa, var(--borda-forte)) 15%, transparent)); opacity: .9; } .eq-card.estado-em_servico { --cor-faixa: var(--verde); } .eq-card.estado-atrasado { --cor-faixa: var(--vermelho); } .eq-card.estado-concluido { --cor-faixa: var(--azul); } .eq-card.estado-aguardando { --cor-faixa: var(--borda-forte); } .vg-kpi.alerta::before, .adm-kpi.alerta::before { --cor-faixa: var(--vermelho); } .vg-kpi.positivo::before { --cor-faixa: var(--verde); } /* Sobe ao entrar. Escalonado: os cartões chegam em cascata, o que faz o olho varrer a tela na ordem de leitura em vez de receber tudo de uma vez. */ @keyframes adm-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .eq-grade > *, .sub-kpis > * { animation: adm-entra .34s cubic-bezier(.2, .8, .2, 1) both; } .eq-grade > :nth-child(2), .sub-kpis > :nth-child(2) { animation-delay: .05s; } .eq-grade > :nth-child(3), .sub-kpis > :nth-child(3) { animation-delay: .10s; } .eq-grade > :nth-child(4), .sub-kpis > :nth-child(4) { animation-delay: .15s; } .eq-grade > :nth-child(n+5), .sub-kpis > :nth-child(n+5) { animation-delay: .20s; } /* Resposta ao mouse: o cartão sobe 2px e a borda ganha contraste. O mesmo gesto que os cartões-link da Visão geral já faziam — agora vale também para os que não são link, senão metade da tela responde e a outra metade não. */ .eq-card, .vg-kpi, .adm-kpi { transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .eq-card:hover, .vg-kpi:hover, .adm-kpi:hover { transform: translateY(-2px); border-color: var(--borda-forte); } /* O avatar deixa de ser um disco chapado: um leve degradê do ouro e um anel fino separando-o do cartão. */ .eq-avatar { background: linear-gradient(145deg, color-mix(in srgb, var(--ouro) 92%, white), var(--ouro)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 16%, transparent); } /* Quanto do dia já foi. Mesma barra do ranking, mais fina. */ .eq-progresso { height: 4px; margin: 10px 0 2px; border-radius: 999px; background: var(--fundo); overflow: hidden; } .eq-progresso i { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 55%, var(--verde))); animation: vg-enche .9s cubic-bezier(.2, .8, .2, 1) both; } /* A linha da visita acende ao passar o mouse — ajuda a não perder a linha na horizontal num cartão com oito visitas. */ .eq-visita { border-radius: 8px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; transition: background var(--transicao); } .eq-visita:hover { background: var(--fundo); } /* Remarcada ou cancelada: presente, mas claramente fora do dia. */ .eq-fora { opacity: .5; } .eq-fora .eq-hora { text-decoration: line-through; } /* O que a visita É, quando não é o serviço de sempre. */ .eq-tipo { font-weight: 700; color: var(--azul); } .eq-tipo::after { content: " · "; color: var(--texto-fraco); font-weight: 400; } /* "Em serviço" é a única coisa que pulsa: é o estado que está mudando enquanto o gestor olha. Um ponto ao lado da pílula, respirando devagar. */ /* Preso ao cartão de técnico de propósito: verde aqui significa "está em serviço AGORA". Solto, a regra faria pulsar qualquer pílula verde que aparecesse em outra tela — inclusive uma que só diz "pago". */ .eq-card .vg-pill.cor-verde::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--verde); animation: adm-pulsa 2.4s ease-in-out infinite; } @keyframes adm-pulsa { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--verde) 55%, transparent); } 50% { opacity: .6; box-shadow: 0 0 0 5px color-mix(in srgb, var(--verde) 0%, transparent); } } /* A barra do ranking também ganha o degradê — chapada ela parecia impressa. */ .sub-rank-barra i { background: linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 70%, var(--laranja))); } /* ── SEM CINZA NO TEXTO (dono, 19/08) ─────────────────────────────── Regra da área de trabalho: letra PRETA no tema claro, BRANCA no escuro. Ponto. A hierarquia passa a ser feita por TAMANHO e PESO — rótulo pequeno em caixa alta, valor grande, nota pequena — e não por desbotar a cor. Desbotar era o que deixava a tela com cara de morta: rótulo e nota tinham o mesmo cinza, e nenhum dos dois se lia bem. Uma linha, e não trinta: `--texto-fraco` é o token que todas as regras do conteúdo já usam. Trocá-lo aqui alcança rótulo, nota, título de grupo, nome do ranking e as etiquetas — e se um dia se quiser um meio-termo, é este único lugar que muda. A BARRA LATERAL fica de fora de propósito: ela é escura nos dois temas e tem os tokens próprios (`--lat-*`). Letra branca lá já é o normal. */ .adm-conteudo { --texto-fraco: var(--texto); } /* Exceção: a bolinha do alerta neutro é um DESENHO, não texto. Com a troca acima ela viraria um ponto preto no claro, que se lê como marcador de lista e não como "aviso sem urgência". */ .adm-conteudo .nivel-azul .adm-alerta-ponto { background: var(--borda-forte); } /* ── A tela de indicadores estava "apagada e sem graça" (dono, 19/08) ── Quatro mudanças, todas de leitura e nenhuma de enfeite: 1. o cartão ganha PROFUNDIDADE (um degradê quase imperceptível) em vez de ser um retângulo chapado da cor do fundo; 2. o RÓTULO sobe de contraste — era o mesmo cinza fraco da nota de rodapé, então título e observação tinham o mesmo peso; 3. o "R$" encolhe e apaga: é a parte que ninguém precisa ler; 4. porcentagem ganha BARRA — o número vira forma. A faixa do topo dos cartões neutros deixa de ser cinza e ganha um toque de ouro: é a cor da marca aparecendo de leve em toda tela, sem pintar nada. */ .eq-card, .vg-kpi, .adm-kpi, .sub-kpis > .adm-cartao { background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 94%, var(--texto) 6%), var(--superficie) 62%); } .vg-kpi::before, .adm-kpi::before { --cor-faixa: color-mix(in srgb, var(--ouro) 55%, var(--borda-forte)); } .sub-kpis .adm-kpi-rotulo { color: color-mix(in srgb, var(--texto-fraco) 55%, var(--texto)); } .kpi-cifrao { font-size: .62em; font-weight: 700; color: var(--texto-fraco); letter-spacing: 0; } .kpi-barra { display: block; height: 4px; margin-top: 8px; border-radius: 999px; background: var(--fundo); overflow: hidden; } .kpi-barra i { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: linear-gradient(90deg, var(--ouro), color-mix(in srgb, var(--ouro) 60%, var(--verde))); animation: vg-enche .9s cubic-bezier(.2, .8, .2, 1) both; } /* Alerta pinta a barra junto: barra dourada embaixo de um número vermelho diria duas coisas diferentes sobre o mesmo dado. */ .vg-kpi.alerta .kpi-barra i { background: linear-gradient(90deg, var(--vermelho), var(--vermelho-txt)); } /* O título do grupo ganha um traço de ouro à esquerda: são ele que reparte a tela em assuntos, e ele era o texto mais fraco dela. */ .sub .adm-grupo-kpi, .sub-titulo-grupo { display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--texto-fraco) 40%, var(--texto)); } .sub .adm-grupo-kpi::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--ouro); } /* O vão onde a busca com IA vai morar. Vazio hoje; é ele que empurra o sino para a direita e reserva o meio da barra. Quando o campo entrar, ele herda esta caixa e nada mais no topo precisa mudar. */ .adm-busca-lugar { flex: 1; min-width: 0; } /* Botões redondos do topo (sino, WhatsApp, tema). */ .adm-acao { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 11px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto-fraco); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transicao); } .adm-acao svg { width: 19px; height: 19px; } .adm-acao:hover { border-color: var(--borda-forte); color: var(--texto); } .adm-acao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* ── Janelinha de notificações ───────────────────────────────────────── */ /* Elemento `popover` nativo: o navegador cuida de abrir por cima de tudo, fechar ao clicar fora e no Esc, e devolver o foco ao botão. O padrão dele é centralizar na tela; aqui a gente ancora no canto de cima à direita, do lado do botão que a abriu. */ .adm-janela { position: fixed; inset: auto; /* Logo abaixo da barra fina: 10 da moldura + 52 da barra + 6 de respiro. */ top: 68px; right: 20px; width: min(340px, calc(100vw - 32px)); max-height: min(70dvh, 460px); overflow-y: auto; margin: 0; padding: 0; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); } /* O véu que o navegador desenha atrás do popover. Fraco: isto é uma janelinha de canto, não um diálogo que exige decisão. */ .adm-janela::backdrop { background: rgba(0, 0, 0, .28); } .adm-janela-topo { position: sticky; /* o título fica à vista enquanto a lista rola */ top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--superficie); border-bottom: 1px solid var(--borda); font-size: 14px; } .adm-janela-vazia { margin: 0; padding: 22px 14px; color: var(--texto-fraco); font-size: 14px; } .adm-avisos { margin: 0; padding: 0; list-style: none; } .adm-aviso { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--borda); } .adm-aviso:last-child { border-bottom: none; } /* Não lida ganha uma faixa de ouro na borda: dá para ver o que é novo sem ler nada, e sem gastar uma bolinha por linha. */ .adm-aviso.nova { box-shadow: inset 3px 0 0 var(--ouro); background: rgba(255, 197, 61, .05); } .adm-aviso-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.35; } /* O aviso que leva a algum lugar (29/09): o título vira link, na cor de ação. */ a.adm-aviso-titulo { color: var(--azul); text-decoration: none; } a.adm-aviso-titulo:hover { text-decoration: underline; } .adm-aviso-corpo { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.4; } .adm-aviso-data { font-size: 11px; color: var(--texto-fraco); } /* Bolinha de "tem coisa nova". Fica no canto do botão. */ .adm-bolha { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--ouro); color: var(--ouro-contra); font-size: 10.5px; font-weight: 800; line-height: 1.5; } .adm-conteudo { flex: 1; display: flex; flex-direction: column; /* 20px embaixo, e não 56: a Visão geral precisa caber sem rolar, e 56px de ar no rodapé eram 56px a menos para o gráfico. */ padding: 18px 26px 20px; /* 1180px era um teto pensado para texto corrido, e num painel de indicadores ele só produzia faixa cinza à direita (o dono mediu ~330px na tela dele). Aqui quem precisa de largura é o gráfico: quanto mais largo, mais meses cabem sem as barras se espremerem. O teto novo existe só para monitor ultralargo (2560px e acima), onde uma linha de ponta a ponta obriga a virar a cabeça para ler. */ max-width: 1700px; width: 100%; min-height: 0; /* deixa os filhos encolherem em vez de estourar a coluna */ } /* ── Peças que as páginas vão reusar ─────────────────────────────────── */ .adm-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 16px 18px; /* Duas sombras somadas: uma rente à borda, que dá o contorno que a borda sozinha quase não faz no tema claro, e outra larga e diluída, que separa o cartão do fundo. O dono apontou em 18/08 que no claro os quadrados quase desapareciam. */ box-shadow: 0 1px 2px rgba(20, 24, 27, .06), 0 6px 16px rgba(20, 24, 27, .05); } /* No escuro, sombra clara não existe — o que separa é a própria escuridão. Uma sombra preta sobre carvão vira sujeira; então ela quase some e a borda assume. */ :root[data-tema="escuro"] .adm-cartao { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .adm-cartao { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); } } .adm-cartoes { display: grid; /* `auto-fit` + `minmax`: os cartões se reorganizam sozinhos conforme a largura, sem uma média query para cada faixa de tela. `auto-FIT`, e não `auto-fill`. A diferença só aparece quando os cartões não enchem a fileira, que é o caso normal aqui: Contas tem três. Com `auto-fill` o navegador reservava as colunas vazias assim mesmo. Medido em 10/09, em 1545px: cinco colunas de 231px para três cartões, o topo da página terminando em x=1008 enquanto a lista embaixo ia até 1494. 486px de descompasso entre a metade de cima e a de baixo da mesma tela. E o efeito era lido como "a lista está espalhada", o que mandou duas sessões inteiras (88 e 89) mexerem na FILEIRA, onde o defeito nunca esteve. */ grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; } .adm-kpi-rotulo { margin: 0; color: var(--texto-fraco); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .adm-kpi-valor { margin: 6px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .adm-kpi-nota { margin: 3px 0 0; font-size: 12px; color: var(--texto-fraco); } /* ── Visão geral ─────────────────────────────────────────────────────── */ /* A tela CABE numa tela: nada de rolar para ver indicador. Por isso ela é uma grade de duas colunas com altura controlada, e não uma pilha de blocos. Esquerda: os números descendo (o mesmo agrupamento do Streamlit). Direita: o que exige ação — alertas, conversão e a agenda do dia. A direita é fixa em 320px porque lista de visita e alerta são texto curto; quem precisa de largura é o gráfico. */ .vg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; /* `flex: 1` + `min-height: 0` = "ocupe o que sobrou da tela, e encolha se precisar". Sem o `min-height`, uma grade nunca encolhe abaixo do conteúdo e a página volta a rolar. */ flex: 1; min-height: 0; } .vg-esquerda, .vg-direita { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .vg-faixa { min-width: 0; flex: none; } /* O bloco que ESTICA para ocupar a altura que sobrar (o gráfico à esquerda, a agenda à direita). É o que faz as duas colunas terminarem juntas em vez de deixarem um vão embaixo. O seletor traz as DUAS classes de propósito. Com `.vg-cresce` sozinho, ele e o `.vg-faixa` acima têm o mesmo peso, e quem ganha é o último escrito no arquivo — que era o `flex: none`. Resultado medido em 18/08: 379px vazios no pé da coluna da direita, exatamente a queixa do dono. Empatar em especificidade e depender da ordem é o tipo de coisa que volta a quebrar na próxima vez que alguém reorganizar o arquivo. */ .vg-faixa.vg-cresce { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; } .vg-faixa.vg-cresce > .adm-cartao { flex: 1; min-height: 0; } .vg-faixa .adm-grupo-kpi { margin: 0 0 6px; } /* Três indicadores por faixa, sempre. `1fr` e não `auto-fill`: as três faixas precisam ficar com as colunas ALINHADAS entre si, senão a leitura vertical (Recebido embaixo de Agendamentos) se perde. */ .vg-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* O conteúdo fica CENTRADO na altura do cartão. Os três cartões de uma faixa têm a mesma altura (a grade estica todos até o mais alto), mas não a mesma quantidade de linhas: um tem barra de progresso, outro tem a repartição por tipo, e o do meio tem só rótulo, número e nota. Alinhado ao topo, o mais curto ficava com um vão embaixo e parecia torto — foi o que o dono viu no "Valor de hoje" (18/08). Centrado, cada cartão distribui a sobra em cima e embaixo, e a faixa fica visualmente equilibrada. */ .vg-kpi { padding: 9px 14px; } .vg-kpi .adm-kpi-rotulo, .vg-kpi .adm-kpi-nota { margin: 0; } .vg-kpi .adm-kpi-valor { font-size: 22px; margin: 2px 0 0; } .vg-kpi .adm-kpi-nota { margin-top: 1px; } /* A linha que reparte o número de cima. Ela mora dentro do mesmo cartão, com letra menor: é detalhe do número, não um número novo. */ .vg-detalhe { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--borda); font-size: 10.5px; color: var(--texto-fraco); } .vg-detalhe b { color: var(--texto); font-variant-numeric: tabular-nums; } /* ── O gráfico ───────────────────────────────────────────────────────── */ .vg-grafico { display: flex; align-items: center; padding: 10px 12px; } /* O desenho cresce com o cartão, dentro de limites: abaixo de 130px as barras viram traços; acima de ~300px o gráfico fica esticado e o ar entre as barras vira buraco. */ .vg-svg { width: 100%; height: 100%; min-height: 130px; max-height: 300px; overflow: visible; } .vg-legenda { float: right; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-fraco); } .vg-marca-barra, .vg-marca-linha { display: inline-block; } .vg-marca-barra { width: 9px; height: 9px; border-radius: 2px; background: var(--ouro); } .vg-marca-linha { width: 12px; height: 2px; border-radius: 2px; background: var(--azul); margin-left: 8px; } .vg-barra { fill: var(--ouro); /* Sobe do chão, uma depois da outra. `transform-box: fill-box` faz o `transform-origin` valer dentro da própria barra — sem ele, o SVG usa a origem do desenho inteiro e as barras crescem do canto errado. */ transform-box: fill-box; transform-origin: bottom; animation: vg-sobe .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 70ms); } @keyframes vg-sobe { from { transform: scaleY(0); } to { transform: scaleY(1); } } .vg-area { fill: var(--azul); opacity: 0; animation: vg-aparece .8s ease-out .5s both; } @keyframes vg-aparece { to { opacity: .10; } } .vg-linha { fill: none; /* Azul: a cor complementar da marca (o violeta fica reservado para a IA). Ele contrasta com o ouro das barras sem brigar — são cores opostas na roda, e o olho separa as duas séries sem precisar da legenda. */ stroke: var(--azul); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; /* Desenha-se sozinha: o traço inteiro fica escondido e vai sendo revelado. É o mesmo princípio do anel logo abaixo. */ stroke-dasharray: var(--traco); stroke-dashoffset: var(--traco); animation: vg-traca 1.1s ease-out .35s both; } @keyframes vg-traca { to { stroke-dashoffset: 0; } } .vg-ponto { fill: var(--azul); stroke: var(--superficie); stroke-width: 2; opacity: 0; animation: vg-pontinho .3s ease-out both; animation-delay: calc(.6s + var(--i) * 90ms); } @keyframes vg-pontinho { from { transform: scale(.4); } to { opacity: 1; transform: scale(1); } } .vg-num, .vg-mes { text-anchor: middle; font-family: inherit; } .vg-num { fill: var(--texto); font-size: 12px; font-weight: 700; } .vg-mes { fill: var(--texto-fraco); font-size: 10.5px; } /* ── Consulta do mês (parar o mouse em cima) ───────────────────────────── Sem JavaScript: uma faixa transparente por mês recebe o ponteiro e, no `:hover`, acende a coluna e revela a caixinha. `fill: transparent` e NÃO `fill: none`: os dois desenham nada, mas só o primeiro continua recebendo o mouse. Com `none` a faixa vira buraco e o ponteiro atravessa. */ .vg-alvo { fill: transparent; transition: fill .15s ease; } .vg-col:hover .vg-alvo { fill: color-mix(in srgb, var(--ouro) 10%, transparent); } /* A caixinha nasce escondida e não recebe mouse — se recebesse, ela mesma roubaria o ponteiro da faixa e piscaria ao aparecer debaixo do cursor. */ .vg-dica { opacity: 0; pointer-events: none; transition: opacity .15s ease; } .vg-col:hover .vg-dica { opacity: 1; } .vg-dica-caixa { fill: var(--superficie); stroke: var(--borda); stroke-width: 1; /* A sombra é desenhada, e não `box-shadow`: dentro de SVG a propriedade de caixa não vale. */ filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); } .vg-dica-mes, .vg-dica-linha { text-anchor: middle; font-family: inherit; } .vg-dica-mes { fill: var(--texto); font-size: 11.5px; font-weight: 700; } .vg-dica-linha { fill: var(--texto-fraco); font-size: 10.5px; } .vg-dica-dinheiro { fill: var(--azul); font-weight: 600; } /* ── Anéis de conversão ──────────────────────────────────────────────── */ .vg-aneis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 8px 8px; } .vg-anel { display: flex; flex-direction: column; align-items: center; } /* O desenho e o número vivem na MESMA caixa, e o número cobre a caixa inteira com centralização de flex. A versão anterior o posicionava por `top` fixo, contra a posição estática do elemento — e ele saía do centro assim que o texto mudava de largura ("57%" contra "—"). O dono viu isso em 18/08. */ .vg-anel-desenho { position: relative; width: 60px; height: 60px; } .vg-anel-desenho svg { width: 60px; height: 60px; display: block; } .vg-anel-trilha { fill: none; stroke: var(--borda); stroke-width: 6; } .vg-anel-cheio { fill: none; stroke: var(--ouro); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--perimetro); /* Começa vazio (traço todo escondido) e corre até a fatia certa. */ stroke-dashoffset: var(--perimetro); animation: vg-anel-enche 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--i) * 140ms); } @keyframes vg-anel-enche { to { stroke-dashoffset: var(--vazio); } } /* Todos os anéis em ouro: a cor do produto. Antes o terceiro era violeta, e cor diferente sem significado diferente é ruído. */ .vg-anel-valor { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .vg-anel-rotulo { margin-top: 6px; font-size: 11.5px; font-weight: 600; text-align: center; } .vg-anel-nota { font-size: 10.5px; color: var(--texto-fraco); text-align: center; } /* ── Barra de progresso do dia ─────────────────────────────────────── Fica no pé do cartão "Visitas do dia". É a única barra da tela e mostra o ritmo, não o total: número puro diz "8 visitas", a barra diz "metade feita". */ .vg-progresso { display: block; height: 4px; margin-top: 8px; border-radius: 999px; background: var(--borda); overflow: hidden; position: relative; } .vg-progresso::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: 999px; background: var(--ouro); /* Enche da esquerda para a direita, junto com a entrada da tela. */ animation: vg-enche .9s cubic-bezier(.2, .8, .2, 1) both; } @keyframes vg-enche { from { width: 0; } to { width: var(--pct); } } /* ── Exige ação ────────────────────────────────────────────────────── Este é o bloco que ESTICA. Numa dedetizadora movimentada são seis ou sete alertas, e é a informação mais perecível da tela — se faltar espaço, ele rola por dentro em vez de empurrar o resto para fora. */ .vg-acoes { overflow-y: auto; padding: 10px 12px; } /* ── Propostas (pipeline) ──────────────────────────────────────────── Lista de linhas, e não cartões lado a lado. A razão é medida: em três colunas de ~100px, "SEM RESPOSTA" quebrava em duas linhas e desalinhava o valor em relação aos vizinhos. Aqui o texto ocupa a coluna que sobra e o valor fica encostado à direita — o alinhamento não depende do comprimento de nada. */ .vg-lista { padding: 2px 12px; } .vg-linha-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* 7px e não 9: as três linhas daqui disputam altura com os alertas, que são a informação mais perecível da coluna. Medido em 18/08: com 9px, o sexto alerta ficava 10px abaixo da dobra da caixa. */ padding: 7px 2px; border-bottom: 1px solid var(--borda); color: inherit; text-decoration: none; transition: border-color var(--transicao); } .vg-linha-item:last-child { border-bottom: none; } .vg-linha-item:hover .vg-linha-valor { color: var(--ouro); } .vg-linha-item:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; border-radius: 6px; } .vg-linha-txt { display: flex; flex-direction: column; min-width: 0; } .vg-linha-txt strong { font-size: 12.5px; font-weight: 600; } .vg-linha-txt small { font-size: 10.5px; color: var(--texto-fraco); line-height: 1.3; } .vg-linha-valor { flex: none; font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--transicao); } /* Em tela estreita a grade vira uma coluna só e a rolagem volta — no celular ela é natural, e espremer duas colunas em 400px seria pior. */ @media (max-width: 1080px) { .vg { grid-template-columns: 1fr; } /* Em coluna única a página volta a rolar (natural no celular), então os blocos que esticavam passam a ter teto em vez de altura elástica. */ .vg-acoes { max-height: 300px; } /* E param de ESTICAR (sessão 80, colisão vista pelo dono no celular). Medido a 375px: a seção "Exige ação" tinha altura ZERO e o conteúdo dela era desenhado 23px abaixo, por cima de "Conversão e qualidade". `flex: 1 1 0` quer dizer "não tenha altura própria, ocupe a sobra". No computador existe sobra: a grade tem a altura da tela. Em coluna única a página volta a rolar, a linha da grade passa a ter a altura do CONTEÚDO e a sobra é zero - então o bloco fica com zero e o conteúdo transborda, sem erro nenhum, por cima do vizinho. Era a mesma causa do gráfico "achatado" no celular: ele também é `vg-cresce`, e também colapsava para altura zero. Escondê-lo lá tapou o sintoma dele; isto aqui cura a causa dos dois. */ .vg-faixa.vg-cresce { flex: 0 0 auto; } } @media (max-width: 620px) { .vg-kpis { grid-template-columns: 1fr; } /* O gráfico SOME no celular (decisão do dono, sessão 80, olhando no aparelho). O desenho tem 600 por 170 unidades: espremido em ~330px de largura ele vira uma tira de 94px de altura, onde as barras viram traços e a linha do dinheiro encosta no nome dos meses. Não é gráfico, é ruído. E não se perde informação: o que ele mostra — OS concluídas e dinheiro recebido — já está escrito nos cartões de número logo acima, que no celular ficam em coluna e sobram legíveis. A consulta por mês depende de parar o mouse em cima, gesto que no telefone não existe. `display: none` no cartão inteiro, e não só no SVG, para não deixar uma moldura vazia com o título "Desempenho" em cima de nada. As TRÊS classes no seletor não são exagero - são necessidade, e isto foi visto medindo no navegador, não deduzido. A seção também casa com `.vg-faixa.vg-cresce`, que declara `display: flex`. Duas classes pesam mais que uma, então `.vg-desempenho` sozinho PERDIA e o gráfico continuava na tela do celular. Media query não acrescenta peso nenhum a essa conta. */ .vg-faixa.vg-cresce.vg-desempenho { display: none; } } /* ── O celular (medido em 375px, 19/08) ────────────────────────────── A linha da visita tem quatro colunas — hora, cliente, marcas de check-in e estado. Em 330px de cartão elas não cabem lado a lado: o CLIENTE, que é a informação mais importante da linha, ficava com 35px e o nome era cortado em 14 das 15 visitas. Então ela quebra em duas: quem e quando em cima, as marcas embaixo, alinhadas com o nome. */ @media (max-width: 560px) { .eq-visita { flex-wrap: wrap; row-gap: 5px; } .eq-hora { min-width: 62px; } .eq-quem { flex: 1 1 120px; } /* `order` alto joga as marcas para a segunda linha; o selo, que vem depois no HTML, sobe para o fim da primeira. */ .eq-marcas { order: 5; flex-basis: 100%; justify-content: flex-start; padding-left: 62px; } /* O ranking tem três colunas — nome, barra, valor. Em 330px o nome fica com 190px, sobram 25px para a BARRA, e uma barra de 25px não compara nada: ela é a razão de o bloco existir. No celular o nome e o valor dividem a primeira linha e a barra fica com a segunda inteira. O nome também passa a QUEBRAR em vez de ser cortado: "Barata Americana (Periplaneta americana)" virava "Barata Americana (Periplanet…". */ .sub-rank { grid-template-columns: 1fr auto; row-gap: 7px; } .sub-rank-nome { grid-column: 1; white-space: normal; overflow: visible; } .sub-rank-valor { grid-column: 2; } .sub-rank-barra { grid-column: 1 / -1; grid-row: 2; } } /* Rótulo que separa os blocos de indicadores. Mesma linguagem dos grupos da barra lateral, para a tela e o menu falarem igual. */ .adm-grupo-kpi { margin: 20px 0 8px; color: var(--texto-fraco); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } .adm-conteudo > .adm-grupo-kpi:first-of-type { margin-top: 6px; } /* Alertas: uma linha por pendência, cada uma levando à tela que resolve. */ .adm-alertas { display: flex; flex-direction: column; gap: 5px; } /* Compacto de propósito. O sistema sabe gerar SEIS alertas ao mesmo tempo (contas vencidas, aprovações, follow-ups, estoque, reaplicações vencidas e a vencer). Medido em 18/08 com sete na tela: no tamanho anterior, dois ficavam escondidos atrás da rolagem — e alerta escondido é alerta perdido. */ .adm-alerta { display: flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); text-decoration: none; font-size: 12.5px; line-height: 1.35; transition: border-color var(--transicao), transform var(--transicao); } .adm-alerta:hover { border-color: var(--borda-forte); transform: translateX(2px); } .adm-alerta:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; } /* O nível vira uma bolinha, e não o fundo inteiro colorido: com quatro alertas ativos, quatro faixas coloridas deixam a tela parecendo um alarme. */ .adm-alerta-ponto { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--texto-fraco); } .nivel-vermelho .adm-alerta-ponto { background: var(--vermelho); } .nivel-laranja .adm-alerta-ponto { background: var(--laranja); } .nivel-amarelo .adm-alerta-ponto { background: var(--ouro); } .nivel-azul .adm-alerta-ponto { background: var(--texto-fraco); } .adm-tudo-certo { margin: 0; padding: 9px 14px; border: 1px solid var(--verde-borda); border-radius: var(--raio); background: var(--verde-fundo); color: var(--verde-txt); font-size: 13.5px; } /* Cartão de indicador. Ele é um LINK, então precisa desfazer o que o navegador faz com link: sublinhado e azul. Isto já quebrou uma vez (18/08): o template passou a usar a classe `vg-kpi` e estas regras, presas ao nome antigo, deixaram de valer — os nove indicadores viraram links azuis sublinhados. Por isso o seletor cobre os dois nomes. */ .adm-kpi, .vg-kpi { /* Coluna centrada na vertical: os três cartões de uma faixa têm a mesma altura, mas não a mesma quantidade de linhas (um tem barra de progresso, outro a repartição por tipo). Alinhado ao topo, o mais curto ficava com um vão embaixo e parecia torto. */ display: flex; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; transition: border-color var(--transicao), transform var(--transicao); } a.adm-kpi:hover, a.vg-kpi:hover { border-color: var(--borda-forte); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 24, 27, .07), 0 12px 24px rgba(20, 24, 27, .08); } a.adm-kpi:focus-visible, a.vg-kpi:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; } /* Só o cartão de vencido muda de cor, e só quando há o que cobrar. */ /* Os dois cartões que MUDAM DE COR, e só eles: o dinheiro que entrou e o que está atrasado. Cor aqui não é enfeite — é o resumo do mês em um relance. O verde é mais discreto que o vermelho de propósito: receber é o normal, atrasar é o que precisa de reação. */ /* O fundo preenchido saiu em 18/08: um retângulo vermelho inteiro no meio de nove cartões brancos gritava, e o dono preferiu o tratamento discreto do verde. Agora os dois falam a mesma língua — borda e número coloridos, fundo igual ao dos outros. */ .adm-kpi.alerta, .vg-kpi.alerta { border-color: var(--vermelho-borda); } .adm-kpi.alerta .adm-kpi-valor, .vg-kpi.alerta .adm-kpi-valor { color: var(--vermelho-txt); } .vg-kpi.positivo { border-color: var(--verde-borda); } .vg-kpi.positivo .adm-kpi-valor { color: var(--verde-txt); } /* `tabular-nums` deixa todo algarismo com a mesma largura. Sem isso, a coluna de valores "dança" quando o número muda — o 1 é mais estreito que o 8. */ .adm-kpi-valor { font-variant-numeric: tabular-nums; } /* Agenda do dia: uma linha por visita. */ .adm-vazio-linha { margin: 6px 0 0; color: var(--texto-fraco); font-size: 13.5px; } .adm-vazio { padding: 30px 18px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); color: var(--texto-fraco); text-align: center; } /* ── Login ───────────────────────────────────────────────────────────── */ /* A tela de entrada é a única sem lateral, e é CLARA em qualquer tema (decisão do dono, 17/08): ela não segue o tema do aparelho de propósito — é a primeira impressão do produto, e primeira impressão não pode depender de configuração de quem olha. Por isso tudo aqui aponta para os tokens `--l-*` (a paleta clara) na mão, em vez dos nomes normais: num aparelho no modo escuro, `--superficie` seria quase preto e a página sumiria. A GEOMETRIA é a mesma da página principal do painel (decisão do dono, 20/08): moldura clara por fora, página branca de cantos redondos apoiada em cima, e dentro dela dois retângulos — o formulário e o painel da arte. Só linhas retas com canto redondo; a versão anterior separava os dois lados com uma onda desenhada, e ela saiu. `min-height: 100dvh` não é detalhe: sem ele o corpo da página termina onde o conteúdo termina e a moldura corta numa linha reta no meio da tela. `100dvh` e não `100vh` porque no celular a barra de endereço come parte da `vh`. */ body.adm-entrada { min-height: 100dvh; padding: var(--moldura-folga); background: var(--l-moldura); color: var(--l-texto); display: grid; } /* Três níveis de profundidade, os mesmos do painel (moldura → painel → cartão): a moldura no fundo, esta página em cima dela, e dentro dela o painel escuro e o cartão branco do login. Sem o nível do meio ser mais fundo que o cartão, o cartão não teria como flutuar. */ .adm-entrada-pagina { background: var(--l-fundo); border: 1px solid var(--l-borda); border-radius: var(--raio-painel); /* Duas sombras somadas, como nos cartões do painel: uma rente à borda, que dá o contorno que a borda sozinha quase não faz no claro, e outra larga e diluída, que separa a página da moldura. */ box-shadow: 0 1px 2px rgba(20, 24, 27, .06), 0 10px 30px rgba(20, 24, 27, .07); display: grid; grid-template-columns: 1fr 1fr; gap: var(--moldura-folga); padding: var(--moldura-folga); overflow: hidden; } /* ── O painel da arte ────────────────────────────────────────────────── */ /* Ele NÃO tem padding e NÃO é flex, de propósito. Medido em 20/08: com padding e `display:flex` aqui, tanto a camada do degradê (`inset: 0`) quanto a teia (`left: 100%`) são espremidas para dentro da caixa de CONTEÚDO — o degradê deixava uma tarja escura de 34px em volta do painel e o miolo da teia não pousava no canto. Quem afasta o texto das bordas é `.adm-arte-txt`. */ .adm-arte { position: relative; overflow: hidden; /* é ele que recorta a teia pelo canto redondo */ border-radius: var(--raio-painel); background: var(--d-fundo); color: var(--d-texto); /* A arte fica à ESQUERDA e o formulário à direita (decisão do dono, 20/08). Feito por `order` e não trocando o HTML: no teclado, o formulário deve continuar recebendo o foco antes da decoração. O mesmo `-1` serve ao celular, onde a única coluna vira duas linhas e a arte sobe para o topo. */ order: -1; } /* O brilho. UM só, azul — a cor complementar da identidade v2. Havia mais duas manchas douradas (uma no alto à esquerda, outra no pé); o dono mandou tirar as duas em 20/08. O ouro não sumiu do painel: ele segue na marca e na teia, que é justamente onde ele deve estar. E o lado do texto ficou carvão liso, o que só ajuda a leitura do slogan. */ .adm-arte-fundo { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(110% 80% at 96% 30%, rgba(76, 111, 255, .26), transparent 60%); } /* A teia (desenhada por cálculo em `admin_web._teia_svg`). O miolo dela é o canto 0,0 do desenho, que fica no canto superior ESQUERDO da caixa: para o miolo pousar no canto do painel e a teia crescer para dentro, a caixa começa na borda direita (`left: 100%`) e é espelhada em torno desse mesmo ponto. A máscara radial faz o fio APAGAR ao se afastar, em vez de terminar cortado numa linha reta. */ .adm-teia { position: absolute; left: 100%; top: 0; width: 780px; height: 780px; color: var(--d-ouro); /* 20%: escolhido pelo dono em 20/08 olhando um controle deslizante sobre a tela de verdade. A 17% ele não a encontrava sozinho — e motivo de marca que ninguém percebe não paga o que custa. Acima de ~35% ela deixa de ser textura e começa a disputar com o slogan. */ opacity: .20; pointer-events: none; transform: scaleX(-1); transform-origin: left top; -webkit-mask-image: radial-gradient(circle at 0 0, #000 0, #000 22%, transparent 72%); mask-image: radial-gradient(circle at 0 0, #000 0, #000 22%, transparent 72%); } .adm-arte-txt { position: relative; z-index: 2; height: 100%; padding: 38px 34px; display: flex; flex-direction: column; } .adm-arte-marca { line-height: 0; } /* `auto` em cima e embaixo joga o texto para o MEIO do espaço que sobra abaixo da marca (pedido do dono, 20/08). Antes era `auto 0 0`, que empurrava tudo para o pé do painel. */ .adm-arte-frases { margin: auto 0; } .adm-arte-frases h2 { margin: 0 0 16px; font-size: 30px; line-height: 1.24; font-weight: 700; letter-spacing: -.015em; /* Reparte as linhas de forma pareja em vez de encher a primeira e largar uma palavra sozinha na última — sem isso "para" ficava numa linha só dele (apontado pelo dono, 20/08). Navegador que ainda não conhece a propriedade ignora; por isso o template também amarra "para" à palavra seguinte com um espaço inquebrável. */ text-wrap: balance; } .adm-arte-frases h2 em { font-style: normal; color: var(--d-ouro); } .adm-arte-frases p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--d-texto-fraco); } /* ── O lado do formulário ────────────────────────────────────────────── */ .adm-entrada-lado { display: grid; place-items: center; padding: 30px 26px; } /* O cartão flutuante do login (pedido do dono, 20/08). Duas sombras somadas, a mesma receita dos cartões do painel: uma rente à borda, que dá o contorno que a borda sozinha quase não faz no claro, e outra larga e diluída, que descola o cartão da página. */ .adm-entrada-caixa { width: 100%; max-width: 374px; background: var(--l-superficie); border: 1px solid var(--l-borda); border-radius: var(--raio-painel); padding: 32px 28px 30px; box-shadow: 0 1px 2px rgba(20, 24, 27, .06), 0 12px 32px rgba(20, 24, 27, .09); } .adm-entrada-topo { text-align: center; margin-bottom: 26px; } .adm-entrada-topo h1 { margin: 0 0 5px; font-size: 24px; font-weight: 700; color: var(--l-texto); letter-spacing: -.01em; } .adm-entrada-topo p { margin: 0; font-size: 14px; color: var(--l-texto-fraco); } /* Os campos não podem herdar os tokens do tema: num aparelho no modo escuro eles nasceriam pretos dentro da página branca. */ .adm-entrada .campo { margin-bottom: 12px; } .adm-entrada .campo > span { color: var(--l-texto-fraco); } .adm-entrada .campo input { background: var(--l-superficie); border: 1px solid var(--l-borda-forte); color: var(--l-texto); } .adm-entrada .campo input:focus { border-color: var(--l-ouro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-ouro) 15%, transparent); } /* O olho da senha. O gestor digita no celular, muitas vezes no sol, e senha errada aqui custa um bloqueio de conta. O botão nasce `hidden` no HTML e só aparece quando o script assume — assim, sem JavaScript, ninguém vê um botão que não faz nada. */ .adm-olho { position: relative; display: block; } .adm-olho input { padding-right: 44px; } .adm-olho-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 7px; line-height: 0; cursor: pointer; color: var(--l-texto-fraco); border-radius: 8px; } .adm-olho-btn:hover { background: color-mix(in srgb, var(--l-texto) 7%, transparent); } .adm-olho-btn:focus-visible { outline: 2px solid var(--l-ouro); outline-offset: 1px; } /* Embaixo do campo de senha, e não ao lado do rótulo (decisão do dono, 20/08): é onde o olho já está quando a senha não entra. */ .adm-esqueci-linha { text-align: right; margin: -2px 0 18px; } .adm-esqueci { font-size: 12.5px; font-weight: 600; color: var(--l-ouro); text-decoration: none; } .adm-esqueci:hover { text-decoration: underline; } .adm-entrada-btn { width: 100%; padding: 12px; border: none; border-radius: var(--raio); /* Ouro VIVO com texto carvão, e não o ouro escurecido com texto branco: sobre branco, ouro escuro + branco dá 3,6:1 de contraste, abaixo do mínimo de 4,5:1 para texto deste tamanho. Assim são 11:1 e a marca fica mais viva. */ background: var(--d-ouro); color: var(--l-texto); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transicao); } .adm-entrada-btn:hover { filter: brightness(1.06); } .adm-entrada-btn:focus-visible { outline: 2px solid var(--l-texto); outline-offset: 2px; } .adm-entrada .aviso { background: var(--l-vermelho-fundo); border: 1px solid var(--l-vermelho-borda); color: var(--l-vermelho-txt); margin-bottom: 14px; } /* O texto da tela de recuperação de senha, que divide a mesma moldura. */ .adm-entrada-texto { margin: 0 0 14px; font-size: 14px; line-height: 1.62; color: var(--l-texto-fraco); } .adm-entrada-texto:last-of-type { margin-bottom: 22px; } .adm-entrada-texto strong { color: var(--l-texto); } /* Lá o "botão" é um link de verdade (ele NAVEGA, não envia formulário), então herda o visual do botão e só corrige o que muda entre e