/* Werner Contabilidade — design system. Duas cores, medidas no arquivo oficial da marca. Quem domina a tela é o AMARELO — botão, item ativo, barra de gráfico, painel do login — e o rosa entra só em detalhe: contador, link, segunda série. Não há azul na marca e não há azul aqui. O amarelo dá 1,5:1 no branco, então ele nunca é texto: é sempre área, com tinta escura por cima (12:1). Onde a marca precisa virar texto, entra o rosa fechado (#a3009e, 6,9:1) — é o único jeito de a marca aparecer em letra. Os estados semânticos ficam fora do par da marca — verde, laranja e vermelho — porque amarelo de marca e amarelo de alerta lado a lado fariam "isto é a Werner" e "isto pede atenção" se confundirem. Por isso o amarelo aparece só como preenchimento de ação, e nunca como chip de estado. Duas fontes e só duas, com a Montserrat mandando. A Anton aparece em dois lugares e mais nenhum: a manchete do login e a fita. Ela é condensada de peso único — em número e em botão ela empurrava a Montserrat para o canto, que é o contrário do que o sistema deve parecer. O logotipo não usa fonte nenhuma: é recorte do arquivo da marca. */ :root{ /* Medidas nas peças da Werner: o amarelo do círculo do perfil e o rosa da estrela que fica atrás das fotos. O rosa da estrela é mais quente (matiz 317) que o magenta do arquivo vetorial da marca — quem o público reconhece é este. Ele dá 4,1:1 no branco, então preenche forma; as versões fechadas do MESMO matiz é que viram botão e texto. */ --rosa:#e816ac; --rosa-rgb:232 22 172; --rosa-acao:#d6149f; --rosa-acao-rgb:214 20 159; --rosa-texto:#b11183; --amarelo:#fbce04; --amarelo-rgb:251 206 4; --amarelo-forte:#e0b600; --marca:#fbce04; --marca-rgb:251 206 4; --marca-forte:#e0b600; --marca-forte-rgb:224 182 0; --marca-sutil:#fff7d6; --acento:#d6149f; --acento-rgb:214 20 159; --acento-texto:#b11183; --acento-sutil:#fdeaf6; /* A cor da marca que pode virar texto NESTE tema. Existe para que nenhuma regra precise perguntar em qual tema está. */ /* Sobre fundo amarelo o texto é tinta escura; o rosa é quem vira letra. */ --acao-texto:#12100a; --sobre-marca:#12100a; --sobre-acento:#ffffff; --primary:#fbce04; --primary-rgb:251 206 4; --primary-dark:#b11183; --primary-dark-rgb:177 17 131; --primary-light:#b11183; --primary-light-rgb:177 17 131; --bg:#f5f4f7; --k-day:#fafafa; --surface:#fff; --card-bg:#fff; --card-solid:#fff; --raised:#fff; --sidebar-bg:#fcfcfd; --modal-bg:#fff; --input-bg:#f6f5f8; /* A coluna de módulos fica escura mesmo no tema claro: é a âncora da marca e repete o preto das peças do Instagram. */ --trilho:#111116; --text-1:#16151a; --text-2:#56535f; --text-3:#6c6877; --k-ink:#16151a; --k-ink-2:#56535f; --k-ink-3:#6c6877; --lateral-texto:#4a4854; --border:rgba(20,18,26,.11); --border-strong:rgba(20,18,26,.20); --hover-bg:rgba(20,18,26,.045); --k-line:rgba(20,18,26,.11); --ok:#15803d; --ok-bg:rgba(21,128,61,.11); --warn:#b4530c; --warn-bg:rgba(180,83,12,.11); --crit:#b91c30; --crit-bg:rgba(185,28,48,.10); --info:#b11183; --info-bg:rgba(232,22,172,.09); /* Séries do arco amarelo->magenta. Nenhum azul, e luminosidade escalonada para a pizza continuar legível impressa em cinza. */ --serie-1:#f0b400; --serie-2:#c9089f; --serie-3:#d1631f; --serie-4:#8a35d6; --serie-5:#7d8f1a; --serie-6:#e0479e; --elev-1:0 1px 1.5px rgba(20,18,26,.05); --elev-2:0 1px 2px rgba(20,18,26,.05),0 4px 12px -6px rgba(20,18,26,.10); --elev-3:0 1px 2px rgba(20,18,26,.05),0 12px 30px -18px rgba(20,18,26,.24); --r-control:9px; --r-surface:13px; --r-container:16px; --r-pill:999px; /* Escala compacta: 32/22/18/15/13/12/11/10 px. */ --fs-display:2rem; --fs-h1:1.375rem; --fs-h2:1.125rem; --fs-h3:.9375rem; --fs-body:.8125rem; --fs-label:.75rem; --fs-caption:.6875rem; --fs-micro:.625rem; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55; /* Tracking -20 na Montserrat, ou seja -0.02em. Herda por toda a interface; a Anton, a fita e os rótulos em caixa alta trazem o seu próprio espacejamento e por isso não são afetados. */ --tracking:-.02em; --tracking-tight:-.012em; --curva:cubic-bezier(.22,.8,.24,1); --d-fast:150ms; --d-base:220ms; --sb-w:246px; --sb-min:64px; --topo-h:56px; --ring:0 0 0 3px rgb(251 206 4/.38); --estrela-kpi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23000' points='99.1,55.2 76.8,59.7 96.5,81.0 68.7,70.5 74.0,94.0 57.3,77.7 50.7,95.6 43.7,77.4 26.7,96.3 30.3,73.0 13.9,75.8 25.4,59.8 6.1,56.0 19.7,46.8 0.4,32.1 29.7,36.5 11.7,8.1 34.8,22.2 36.7,-0.4 49.5,21.1 60.1,5.9 60.9,28.4 82.8,11.7 70.0,35.7 92.4,33.1 75.7,46.5'/%3E%3C/svg%3E") center/contain no-repeat; --font-sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --font-display:"Montserrat",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-marca:"Anton",Impact,"Haettenschweiler",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; /* Anton é caixa alta pesada de peso único: onde entra, domina. Fica na manchete, no número do painel e no rótulo do botão — nunca em texto corrido, nunca em coluna de tabela. */ color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{letter-spacing:var(--tracking); background:var(--bg);color:var(--text-1); font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-normal); line-height:var(--lh-normal);letter-spacing:var(--tracking-tight); -webkit-font-smoothing:antialiased; } a{color:var(--primary);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold); line-height:var(--lh-snug);letter-spacing:var(--tracking-tight)} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} p{margin:0 0 10px} small{font-size:var(--fs-caption)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .mono{font-family:var(--font-mono)} .muted{color:var(--text-3)} .dim{color:var(--text-2)} .ok{color:var(--ok)} .warn{color:var(--warn)} .crit{color:var(--crit)} .right{text-align:right} .center{text-align:center} .nowrap{white-space:nowrap} .grow{flex:1} .w100{width:100%} .mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px} .mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .row-top{align-items:flex-start} .between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap} .stack{display:flex;flex-direction:column;gap:4px} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))} .g-2-1{grid-template-columns:2fr 1fr} .g-1-2{grid-template-columns:1fr 2fr} /* ------------------------------------------------------------- estrutura */ /* -------------------------------------------------- lateral única */ /* Antes eram duas colunas: uma faixa preta de módulos e a lateral do módulo ativo. Virou uma coluna só, clara, onde cada módulo abre as próprias opções no lugar. Recolhida, sobra a fileira de ícones. */ .app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100vh; /* É este fundo que aparece entre os dentes da lateral. Branco, como o miolo — se ele diferir do conteúdo, sobra uma tira de outra cor atrás da serra. Sobre branco quem separa cartão de fundo é a borda, não o contraste de superfície: por isso ela ganhou um passo de peso. */ background:var(--surface); transition:grid-template-columns var(--d-base) var(--curva)} .app.recolhido{grid-template-columns:var(--sb-min)} .lateral-topo{display:flex;align-items:center;gap:9px;padding:13px 12px 10px} .lateral-topo .selo-nome{font-family:var(--font-display);font-size:20px;font-weight:var(--fw-bold); color:var(--text-1);letter-spacing:-.02em;line-height:1;flex:1; overflow:hidden;white-space:nowrap} .recolher{background:none;border:0;cursor:pointer;color:var(--text-3); padding:6px;border-radius:8px;display:flex;flex:0 0 auto} .recolher:hover{background:var(--hover-bg);color:var(--text-1)} /* módulo: a linha que abre as opções */ .menu .mod>summary{ position:relative;display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer; padding:8px 9px;border-radius:var(--r-control);margin-top:2px; font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-2); text-transform:none;letter-spacing:0; transition:background var(--d-fast) var(--curva),color var(--d-fast); } .menu .mod>summary:hover{background:var(--hover-bg);color:var(--text-1)} .menu .mod[open]>summary{background:rgb(var(--marca-rgb)/.16);color:var(--text-1)} .menu .mod>summary .ico{width:19px;height:19px;flex:0 0 auto;display:flex} .menu .mod>summary .ico svg{width:19px;height:19px} .menu .mod>summary .rot{flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .menu .mod>summary .seta{margin-left:auto} .menu .mod-itens{padding:2px 0 6px 7px;margin-left:13px; border-left:1px solid var(--border)} .menu .grupo{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.07em; color:var(--text-3);padding:9px 9px 3px} .menu .raiz{margin-top:2px} /* recolhida: só os ícones */ .app.recolhido .selo-nome,.app.recolhido .busca,.app.recolhido .sel-empresa, .app.recolhido .mod-itens,.app.recolhido .rot,.app.recolhido .seta, .app.recolhido .lateral-rodape .stack{display:none} .app.recolhido .lateral-topo{flex-direction:column;gap:6px;padding:12px 0 8px} .app.recolhido .menu{padding:2px 8px 18px} .app.recolhido .menu .mod>summary,.app.recolhido .menu .raiz{ justify-content:center;padding:9px 0} .app.recolhido .lateral-rodape .row{justify-content:center} .app.recolhido .lateral-rodape form{flex:0 0 auto} .app.recolhido .contador{position:absolute;transform:translate(11px,-9px); padding:0 4px;min-width:14px;font-size:9px} @media (max-width:980px){ .app,.app.recolhido{grid-template-columns:1fr} .lateral-env{position:static;height:auto;filter:none} .lateral{position:static;height:auto} } /* A sombra vai no invólucro, não na lateral: a ordem de renderização é filtro e depois máscara, então um drop-shadow na própria lateral seria recortado pela serra junto com o resto. */ .lateral-env{position:sticky;top:0;height:100vh;z-index:40; filter:drop-shadow(3px 0 6px rgba(42,10,34,.16)) drop-shadow(1px 0 1px rgba(42,10,34,.1))} .lateral{ background:var(--sidebar-bg);border-right:1px solid var(--border); display:flex;flex-direction:column;position:relative;height:100%;overflow-y:auto; } /* ------------------------------------------------- lateral no padrão KontFy */ .marca{display:flex;align-items:center;gap:10px;padding:15px 14px 12px;text-decoration:none} .marca svg{flex:0 0 auto;border-radius:11px;box-shadow:0 3px 10px -3px rgb(var(--marca-rgb)/.5)} .login-arte .marca-icone svg,.login-arte svg{border-radius:10px} .marca-texto{ font-family:var(--font-display);font-size:21px;font-weight:var(--fw-semibold); color:var(--text-1);letter-spacing:-.035em;line-height:1; } .marca-texto b{color:var(--marca);font-weight:var(--fw-bold)} /* busca global */ .busca{margin:0 12px 6px;position:relative;display:block} .busca input{ width:100%;padding:8px 42px 8px 34px;border-radius:10px; border:1px solid var(--border);background:var(--k-day); font-family:inherit;font-size:var(--fs-label);color:var(--text-1); } .busca input::placeholder{color:var(--text-3)} .busca input:focus{background:var(--surface);border-color:var(--primary);box-shadow:var(--ring)} .busca .lupa{position:absolute;left:11px;top:50%;transform:translateY(-50%); color:var(--text-3);pointer-events:none;display:flex} .busca kbd{ position:absolute;right:9px;top:50%;transform:translateY(-50%); font-family:var(--font-mono);font-size:10px;color:var(--text-3); background:var(--surface);border:1px solid var(--border);border-radius:5px; padding:2px 5px;pointer-events:none; } /* grupos colapsáveis */ .menu{padding:2px 10px 18px;flex:1} .menu details{margin-bottom:2px} .menu summary{ display:flex;align-items:center;justify-content:space-between;gap:8px; list-style:none;cursor:pointer;padding:13px 9px 5px; font-size:11px;font-weight:var(--fw-normal);color:var(--text-3); text-transform:uppercase;letter-spacing:.06em; } .menu summary::-webkit-details-marker{display:none} .menu summary .seta{transition:transform var(--d-fast) var(--curva);opacity:.75;display:flex} .menu details[open] summary .seta{transform:rotate(180deg)} .menu summary:hover{color:var(--text-2)} .menu a{ display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px; color:var(--lateral-texto);font-size:13px;font-weight:var(--fw-normal); text-decoration:none;transition:background var(--d-fast) var(--curva),color var(--d-fast); } .menu a:hover{background:var(--hover-bg);color:var(--text-1);text-decoration:none} /* O item ativo muda de cor e de fundo, não de peso: no KontFy nada no menu é negrito. */ .menu a.ativo{background:rgb(var(--primary-rgb)/.14);color:var(--acao-texto);font-weight:var(--fw-normal)} .menu a .ico{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center} .menu a .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu .contador{flex:0 0 auto} .menu a .ico svg{width:18px;height:18px;stroke-width:1.6} .menu .contador{ margin-left:auto;font-size:9.5px;font-weight:var(--fw-bold);min-width:20px;text-align:center; background:var(--crit);color:#fff;padding:1px 6px;border-radius:var(--r-pill);line-height:1.5; } .menu .contador.aviso{background:var(--warn)} .lateral-rodape{padding:12px;border-top:1px solid var(--border);font-size:var(--fs-caption);color:var(--text-3)} .topo{ /* B — a barra fica presa no topo e as linhas passam desfocadas por baixo. Sem o vidro ela continuaria fixa: o comportamento útil não depende dele. */ position:sticky;top:0;z-index:30; height:var(--topo-h);display:flex;align-items:center;gap:12px; margin-left:calc(-1 * var(--sb-w)); padding:0 22px 0 calc(22px + var(--sb-w)); background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(170%); -webkit-backdrop-filter:blur(16px) saturate(170%); border-bottom:1px solid var(--border); position:sticky;top:0;z-index:20; } .topo h1{font-size:var(--fs-h2);font-weight:var(--fw-semibold)} .conteudo{padding:20px;max-width:1480px} .modulos{font-size:var(--fs-caption);color:var(--text-3);margin-bottom:2px} /* --------------------------------------------------------------- cartões */ .cartao{ background:var(--card-bg);border:1px solid var(--border-strong);border-radius:var(--r-container); box-shadow:var(--elev-1);overflow:hidden; } .cartao-topo{ padding:12px 16px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; } .cartao-topo h2,.cartao-topo h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold)} .cartao-corpo{padding:16px} .cartao-corpo.compacto{padding:12px 14px} .cartao-rodape{padding:12px 18px;border-top:1px solid var(--border);background:var(--k-day)} .kpi{ background:var(--card-bg);border:1px solid var(--border-strong);border-radius:var(--r-container); padding:13px 15px;box-shadow:var(--elev-1);position:relative;overflow:hidden; } .kpi::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--kpi-cor,var(--primary));opacity:.85} .kpi .rotulo{font-size:var(--fs-caption);color:var(--text-3);font-weight:var(--fw-medium); text-transform:uppercase;letter-spacing:.05em} .kpi .valor{font-family:var(--font-display);font-size:1.3rem;font-weight:var(--fw-semibold); letter-spacing:-.03em;margin-top:5px;line-height:1.1} .kpi .valor .cifrao{font-size:.7em;color:var(--text-3);font-weight:var(--fw-medium);margin-right:3px} .kpi .nota{font-size:var(--fs-caption);color:var(--text-3);margin-top:4px} /* --------------------------------------------------------------- tabelas */ .tabela-wrap{overflow-x:auto} table.t{width:100%;border-collapse:collapse;font-size:var(--fs-label)} table.t th{ text-align:left;font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--text-3); text-transform:uppercase;letter-spacing:.06em;padding:9px 12px; border-bottom:1px solid var(--border);background:var(--k-day);white-space:nowrap;position:sticky;top:0; } table.t td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle} table.t tbody tr:hover{background:var(--hover-bg)} table.t tbody tr:last-child td{border-bottom:none} table.t tfoot td{ padding:10px 12px;border-top:1px solid var(--border-strong); font-weight:var(--fw-semibold);background:var(--k-day); } table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums} .linha-clicavel{cursor:pointer} .vazio{padding:40px 20px;text-align:center;color:var(--text-3)} .vazio .ico{font-size:26px;display:block;margin-bottom:8px;opacity:.5} /* --------------------------------------------------------------- selos */ .selo.ok{background:var(--ok-bg);color:var(--ok)} .selo.warn{background:var(--warn-bg);color:var(--warn)} .selo.crit{background:var(--crit-bg);color:var(--crit)} .selo.info{background:var(--info-bg);color:var(--info)} .selo.neutro{background:var(--hover-bg);color:var(--text-2)} .ponto{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto} /* --------------------------------------------------------------- botões */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:8px 14px;border-radius:var(--r-control);border:1px solid transparent; font-family:inherit;font-size:var(--fs-label);font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight);cursor:pointer;white-space:nowrap; transition:background var(--d-fast) var(--curva),border-color var(--d-fast), box-shadow var(--d-fast),transform var(--d-fast); background:var(--surface);color:var(--text-1);border-color:var(--border-strong); text-decoration:none; } .btn:hover{background:var(--hover-bg);text-decoration:none} .btn:active{transform:translateY(.5px)} .btn:focus-visible{outline:none;box-shadow:var(--ring)} .btn.primario{ background:var(--marca);color:var(--sobre-marca);border-color:transparent; box-shadow:0 1px 5px rgb(var(--marca-rgb)/.45); } .btn.primario:hover{filter:brightness(1.06)} .btn.perigo{background:var(--crit);color:#fff;border-color:transparent} .btn.sucesso{background:var(--ok);color:#fff;border-color:transparent} .btn.fantasma{background:transparent;border-color:transparent;color:var(--text-2)} .btn.fantasma:hover{background:var(--hover-bg);color:var(--text-1)} .btn.pequeno{padding:5px 10px;font-size:var(--fs-caption)} .btn.bloco{width:100%} .btn[disabled]{opacity:.5;pointer-events:none} .btn-grupo{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--r-control);overflow:hidden} .btn-grupo a,.btn-grupo button{ border:none;border-radius:0;background:var(--surface);padding:6px 12px; font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--text-2); cursor:pointer;font-family:inherit;text-decoration:none; } .btn-grupo a+a,.btn-grupo button+button{border-left:1px solid var(--border)} .btn-grupo a:hover,.btn-grupo button:hover{background:var(--hover-bg)} .btn-grupo .ativo{background:rgb(var(--primary-rgb)/.14);color:var(--acao-texto);font-weight:var(--fw-semibold)} /* -------------------------------------------------------------- formulários */ .campo{display:flex;flex-direction:column;gap:5px;margin-bottom:14px} .campo>label,.rotulo{ font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-2); letter-spacing:.005em; } .campo .ajuda{font-size:var(--fs-micro);color:var(--text-3)} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date], input[type=search],input[type=file],select,textarea{ width:100%;padding:8px 11px;border-radius:var(--r-control); border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text-1); font-family:inherit;font-size:var(--fs-label);font-weight:var(--fw-normal); transition:border-color var(--d-fast),box-shadow var(--d-fast),background var(--d-fast); } input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--primary);background:var(--surface);box-shadow:var(--ring); } input[type=file]{padding:7px 10px;background:var(--surface);cursor:pointer} textarea{min-height:78px;resize:vertical;line-height:var(--lh-normal)} select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 10px center;padding-right:28px} .checkbox{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);cursor:pointer;font-weight:var(--fw-medium)} .checkbox input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer} .form-grid{display:grid;gap:0 14px} .filtros{ display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap; padding:13px 16px;background:var(--k-day);border:1px solid var(--border); border-radius:var(--r-surface);margin-bottom:16px; } .filtros .campo{margin-bottom:0;min-width:132px} .prefixo{position:relative} .prefixo>span{position:absolute;left:11px;top:50%;transform:translateY(-50%); color:var(--text-3);font-size:var(--fs-caption);pointer-events:none} .prefixo input{padding-left:32px} /* --------------------------------------------------------------- avisos */ .aviso{ padding:11px 14px;border-radius:var(--r-surface);font-size:var(--fs-label); border:1px solid;display:flex;gap:9px;align-items:flex-start;margin-bottom:16px; font-weight:var(--fw-medium); } .aviso.ok{background:var(--ok-bg);border-color:rgb(8 122 85/.28);color:var(--ok)} .aviso.erro{background:var(--crit-bg);border-color:rgb(196 61 61/.28);color:var(--crit)} .aviso.alerta{background:var(--warn-bg);border-color:rgb(154 92 0/.28);color:var(--warn)} .aviso.info{background:var(--info-bg);border-color:rgb(var(--primary-rgb)/.28);color:var(--info)} /* --------------------------------------------------------------- gráficos */ .barras{display:flex;align-items:flex-end;gap:var(--gap,7px);height:var(--h,150px);padding-top:8px} /* Séries lado a lado dentro do mês — empilhar faria a leitura de entradas x saídas mentir. */ .barras .col{flex:1;display:flex;align-items:flex-end;justify-content:center; gap:2px;height:100%;position:relative;min-width:0} .barras .b{flex:1;max-width:22px;border-radius:3px 3px 0 0;background:var(--cor,var(--serie-1)); min-height:2px;transition:height var(--d-base) var(--curva)} .barras .rot{font-size:var(--fs-micro);color:var(--text-3);text-align:center; margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-caption);color:var(--text-2);margin-top:10px} .legenda i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px} .trilho{height:6px;border-radius:var(--r-pill);background:var(--hover-bg);overflow:hidden} .trilho i{display:block;height:100%;border-radius:var(--r-pill);background:var(--cor,var(--primary))} /* --------------------------------------------------------------- diversos */ .pilha-etapas{display:flex;align-items:center;gap:0;font-size:var(--fs-caption);flex-wrap:wrap} .etapa{display:flex;align-items:center;gap:6px;padding:4px 12px;background:var(--hover-bg); color:var(--text-3);font-weight:var(--fw-medium)} .etapa:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill);padding-left:14px} .etapa:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0;padding-right:14px} .etapa.feito{background:var(--ok-bg);color:var(--ok);font-weight:var(--fw-semibold)} .etapa.atual{background:rgb(var(--primary-rgb)/.16);color:var(--acao-texto);font-weight:var(--fw-semibold)} .abas{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto} .abas a{ padding:9px 14px;font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-3); border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none; } .abas a:hover{color:var(--text-1);text-decoration:none} .abas a.ativo{color:var(--acao-texto);border-bottom-color:var(--primary);font-weight:var(--fw-semibold)} /* Duas fileiras em Configurações: a de cima troca de módulo, a de baixo é do módulo. Separar as duas evita a fileira única de sete assuntos diferentes. */ .abas.modulos-config{border-bottom:0;margin-bottom:2px;gap:4px} .abas.modulos-config a{font-size:var(--fs-caption);font-weight:var(--fw-semibold); letter-spacing:.03em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill); border-bottom:0;margin-bottom:0;background:var(--hover-bg)} .abas.modulos-config a.ativo{background:var(--marca);color:var(--sobre-marca); border-bottom:0} /* Cartão que é link inteiro: a área de clique é o cartão, não uma palavra. */ .cartao-link{display:block;text-decoration:none;color:inherit; transition:transform .12s ease,box-shadow .12s ease} .cartao-link:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--elev-2)} .cartao-link h3{color:var(--text-1)} .ico-modulo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px; background:var(--marca-sutil);color:var(--acao-texto)} .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill); background:var(--hover-bg);font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--text-2)} .avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:rgb(var(--primary-rgb)/.15);color:var(--primary-dark); font-size:var(--fs-micro);font-weight:var(--fw-bold)} .sep{height:1px;background:var(--border);margin:16px 0} .tt{border-bottom:1px dotted var(--text-3);cursor:help} /* --------------------------------------------------------------- login */ /* ------------------------------------------------------- assinatura */ /* Símbolo, nome e a linha CONTABILIDADE sob um filete, como no arquivo da marca. Tudo dimensionado a partir de --assin-h para a assinatura crescer inteira, sem descolar o filete do nome. */ .assinatura{display:inline-flex;align-items:center;gap:calc(var(--assin-h)*.26)} .assinatura svg{flex:0 0 auto} .assinatura-txt{display:flex;flex-direction:column;line-height:1} .assinatura-txt b{font-family:var(--font-display);font-weight:700; font-size:calc(var(--assin-h)*.66);letter-spacing:.005em} .assinatura-txt i{font-style:normal;font-size:calc(var(--assin-h)*.175); letter-spacing:.33em;margin-top:calc(var(--assin-h)*.11); padding-top:calc(var(--assin-h)*.10);border-top:1px solid currentColor;opacity:.78} .modulos .selo img{filter:none} .login-arte h2{font-size:2rem;font-weight:var(--fw-semibold);line-height:1.2;position:relative} .login-form h1{font-size:1.5rem;margin-bottom:4px} .login-form .sub{color:var(--text-3);margin-bottom:26px;font-size:var(--fs-label)} .credenciais{margin-top:22px;padding:11px 13px;background:var(--k-day);border:1px dashed var(--border-strong); border-radius:var(--r-surface);font-size:var(--fs-caption);color:var(--text-3);line-height:1.7} /* --------------------------------------------------------------- responsivo */ @media (max-width:1180px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}} @media (max-width:980px){ .lateral-env{position:static;height:auto;filter:none} .lateral{position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center; border-right:none;border-bottom:1px solid var(--border)} .menu{display:flex;gap:4px;padding:8px;flex:1} .menu-grupo,.lateral-rodape,.sel-empresa{display:none} .g2,.g3,.g4,.g5,.g-2-1,.g-1-2{grid-template-columns:1fr} .login-arte{display:none} .conteudo{padding:14px} } @media print{ .lateral,.topo,.filtros,.btn,.abas{display:none!important} .app{grid-template-columns:1fr} .cartao{break-inside:avoid;box-shadow:none;border-color:#ccc} body{background:#fff} } /* --------------------------------------------------------- boas-vindas */ .boas-vindas{margin-bottom:20px} .boas-vindas h2{font-family:var(--font-display);font-size:1.75rem; font-weight:var(--fw-bold);letter-spacing:-.02em;margin:0 0 2px} .modulos-grade{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))} .cartao-modulo{ display:flex;flex-direction:column;gap:8px;padding:16px;text-decoration:none; background:var(--card-bg);border:1px solid var(--border); border-radius:var(--r-container);box-shadow:var(--elev-1);color:var(--text-1); transition:border-color var(--d-fast),box-shadow var(--d-fast),transform var(--d-fast) var(--curva); } .cartao-modulo:hover{text-decoration:none;transform:translateY(-2px); border-color:rgb(var(--marca-rgb)/.55);box-shadow:var(--elev-2)} .cm-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:rgb(var(--marca-rgb)/.18);color:var(--text-1)} .cm-ico svg{width:21px;height:21px} .cm-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:var(--fs-h3);font-weight:var(--fw-semibold)} .cm-txt{font-size:var(--fs-label);color:var(--text-2);line-height:var(--lh-snug)} /* =================================================================== A SERRA O menu termina em serra rosa; no login é o próprio painel da marca que é recortado, e o branco do formulário aparece nas mordidas. Os dentes têm profundidade e altura variáveis: recorte de tesoura, não serra de máquina. O ladrilho passa de 350px para a repetição não ser percebida. =================================================================== */ .lateral{position:relative;z-index:40;border-right:0;padding-right:26px; /* A máscara recorta tudo o que está dentro do elemento — inclusive a barra de rolagem, que virava uma segunda serra cinza intercalada com a amarela. A rolagem continua funcionando pela roda, pelo trackpad e pelo teclado. */ scrollbar-width:none; -webkit-mask:linear-gradient(#000 0 0) left center/calc(100% - 22px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='460' viewBox='0 0 22 460'%3E%3Cpolygon fill='%23000' points='0,0 20.8,12.6 0,25.2 12.1,40.1 0,55.1 19.1,69.2 0,83.3 21.3,96.3 0,109.3 11.0,123.1 0,136.8 18.1,155.1 0,173.4 14.7,193.5 0,213.7 17.4,233.7 0,253.7 12.2,270.6 0,287.4 18.3,301.8 0,316.1 13.3,329.3 0,342.6 16.5,363.5 0,384.4 20.0,404.6 0,424.8 20.0,442.4 0,460.0'/%3E%3C/svg%3E") right center/22px 460px repeat-y;mask:linear-gradient(#000 0 0) left center/calc(100% - 22px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='460' viewBox='0 0 22 460'%3E%3Cpolygon fill='%23000' points='0,0 20.8,12.6 0,25.2 12.1,40.1 0,55.1 19.1,69.2 0,83.3 21.3,96.3 0,109.3 11.0,123.1 0,136.8 18.1,155.1 0,173.4 14.7,193.5 0,213.7 17.4,233.7 0,253.7 12.2,270.6 0,287.4 18.3,301.8 0,316.1 13.3,329.3 0,342.6 16.5,363.5 0,384.4 20.0,404.6 0,424.8 20.0,442.4 0,460.0'/%3E%3C/svg%3E") right center/22px 460px repeat-y} .lateral::-webkit-scrollbar{width:0;height:0} .app.recolhido .lateral{padding-right:20px} /* Submenu aberto alarga a coluna em vez de cortar o rótulo: "Clientes e fornecedores" não cabe em 246px depois de descontar ícone, indentação e os 26px que a serra ocupa. Recolhida, nada disso vale. */ .app:has(.menu .mod[open]):not(.recolhido){--sb-w:302px} /* ------------------------------------------------------------ login */ /* O corte da serra atravessa a tela toda e o retângulo do formulário pousa em cima dele: parte no rosa, parte no branco. A serra deixa de ser acabamento de um painel e vira o desenho da página. */ .login-tela{position:relative;min-height:100vh;display:block;overflow:hidden; background:radial-gradient(130% 95% at 80% 10%,rgba(251,206,4,.15),transparent 64%), radial-gradient(95% 85% at 10% 90%,rgba(232,22,172,.07),transparent 62%),#fefbf4} /* drop-shadow acompanha a máscara e sai dente a dente; box-shadow desenharia no retângulo do elemento e ignoraria o recorte. */ .corte-env{position:absolute;left:0;top:0;bottom:0;width:56%;z-index:1; filter:drop-shadow(3px 0 6px rgba(61,11,49,.2)) drop-shadow(1px 0 1px rgba(61,11,49,.13))} .corte{position:absolute;inset:0;background:var(--acento); -webkit-mask:linear-gradient(#000 0 0) left center/calc(100% - 24px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='380'%3E%3Cpolygon fill='%23000' points='0,0 18.0,18.9 0,37.7 20.5,48.9 0,60.2 21.2,77.1 0,94.1 20.4,108.6 0,123.1 18.1,139.1 0,155.0 22.0,169.6 0,184.1 21.4,198.5 0,213.0 18.0,230.4 0,247.8 14.2,266.8 0,285.9 15.9,297.9 0,309.9 15.5,328.2 0,346.5 16.8,363.2 0,380.0'/%3E%3C/svg%3E") right center/24px 380px repeat-y;mask:linear-gradient(#000 0 0) left center/calc(100% - 24px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='380'%3E%3Cpolygon fill='%23000' points='0,0 18.0,18.9 0,37.7 20.5,48.9 0,60.2 21.2,77.1 0,94.1 20.4,108.6 0,123.1 18.1,139.1 0,155.0 22.0,169.6 0,184.1 21.4,198.5 0,213.0 18.0,230.4 0,247.8 14.2,266.8 0,285.9 15.9,297.9 0,309.9 15.5,328.2 0,346.5 16.8,363.2 0,380.0'/%3E%3C/svg%3E") right center/24px 380px repeat-y} .lado-esq{position:absolute;left:0;top:0;bottom:0;width:56%;z-index:3;color:#fff; display:flex;flex-direction:column;padding:clamp(32px,7.5vh,84px) 46px 0 44px} /* Logo e conta viram uma peça só para poderem ser centradas juntas: separadas, cada uma se centraria pela própria largura e o W sairia de cima do C. */ .la-bloco{align-self:center;display:flex;flex-direction:column;max-width:100%; /* Centrado, mas recuado: `right` desloca só o desenho, sem entrar na conta do centro — assim o recuo é o valor pedido, e não metade dele como aconteceria com margem num item centrado. */ position:relative;right:clamp(38px,6.8vw,126px)} .la-topo{flex:0 0 auto; /* Mesmo corpo da linha da conta, só para o em bater: a logo é imagem e não muda de tamanho com isto. */ font-size:clamp(1.15rem,2.1vw,1.7rem); padding-left:.9312em; margin-bottom:.62em} .la-meio{flex:0 0 auto;min-width:0;max-width:min(560px,94%)} .la-meio h2{margin:0;font-family:var(--font-marca);font-weight:400; text-transform:uppercase;letter-spacing:.004em;color:#fff;line-height:.9} .la-meio h2 .linha{display:flex;align-items:center;gap:.46em; font-size:clamp(1.15rem,2.1vw,1.7rem);line-height:1.14;letter-spacing:.02em} /* O sinal em coluna própria: + e − têm larguras diferentes e, soltos, desencontram o começo das palavras. */ .la-meio h2 .linha i{font-style:normal;font-family:var(--font-sans);font-weight:700; font-size:.76em;color:var(--marca);width:.62em;flex:0 0 auto;text-align:center} .la-meio h2 strong{display:block;font-weight:400;line-height:.9;white-space:nowrap; font-size:clamp(1.7rem,3.1vw,2.5rem);color:var(--marca);margin-top:.26em} /* A estrela é o fundo do par: maior que os dois, atrás dos dois. */ .duo{position:relative;margin:auto 0 0;align-self:flex-start; /* Largura em porcentagem da coluna, não em pixel fixo: assim eles encolhem junto com o painel e nunca alcançam o cartão. margin-top:auto encosta o par na base sem estourá-la. */ width:min(74%,510px); /* 1,25 é a soma das larguras das duas fotos menos a sobreposição, na altura delas: assim a altura sai da largura e elas nunca estouram a coluna. */ aspect-ratio:1.25; display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none;z-index:0} .duo svg{position:absolute;left:50%;bottom:-4%;width:auto;height:113%;aspect-ratio:1; z-index:0;transform:translateX(-50%);fill:var(--marca); animation:duo-gira 54s linear infinite} @keyframes duo-gira{from{transform:translateX(-50%) rotate(0)} to{transform:translateX(-50%) rotate(360deg)}} .foto{position:relative;height:100%;width:auto;flex:0 0 auto;background-repeat:no-repeat; background-size:contain;background-position:bottom center} .foto.m{aspect-ratio:553/900;z-index:1;background-image:url("/estatico/socio-m.png"); animation:duo-m 6.5s ease-in-out infinite} .foto.h{aspect-ratio:592/900;z-index:2;margin-left:clamp(-58px,-5%,-22px); background-image:url("/estatico/socio-h.png");animation:duo-h 7.8s ease-in-out infinite} @keyframes duo-m{0%,100%{transform:translateX(-5px)}50%{transform:translateX(3px)}} @keyframes duo-h{0%,100%{transform:translateX(4px)}50%{transform:translateX(-3px)}} @media (prefers-reduced-motion:reduce){.duo svg,.foto{animation:none}} /* A fita é recortada pela MESMA máscara e na MESMA caixa do corte: ela some no dente, como no painel, em vez de terminar numa ponta reta. */ .fita-corte{position:absolute;left:0;top:0;bottom:0;width:56%;z-index:5;pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) left center/calc(100% - 24px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='380'%3E%3Cpolygon fill='%23000' points='0,0 18.0,18.9 0,37.7 20.5,48.9 0,60.2 21.2,77.1 0,94.1 20.4,108.6 0,123.1 18.1,139.1 0,155.0 22.0,169.6 0,184.1 21.4,198.5 0,213.0 18.0,230.4 0,247.8 14.2,266.8 0,285.9 15.9,297.9 0,309.9 15.5,328.2 0,346.5 16.8,363.2 0,380.0'/%3E%3C/svg%3E") right center/24px 380px repeat-y;mask:linear-gradient(#000 0 0) left center/calc(100% - 24px) 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='380'%3E%3Cpolygon fill='%23000' points='0,0 18.0,18.9 0,37.7 20.5,48.9 0,60.2 21.2,77.1 0,94.1 20.4,108.6 0,123.1 18.1,139.1 0,155.0 22.0,169.6 0,184.1 21.4,198.5 0,213.0 18.0,230.4 0,247.8 14.2,266.8 0,285.9 15.9,297.9 0,309.9 15.5,328.2 0,346.5 16.8,363.2 0,380.0'/%3E%3C/svg%3E") right center/24px 380px repeat-y} .fita{position:absolute;left:-44px;right:-34px;bottom:70px;padding:9px 0; transform:rotate(-2.4deg);overflow:hidden; /* Vidro com corpo e letra escura. Clarear mantendo a letra branca piora: aproxima o fundo da cor do texto e derruba o contraste de 4,1 para 2,7. Assim o pior caso — a fita sobre a foto em preto e branco — dá 7,1:1. */ color:var(--sobre-marca); background:rgba(255,255,255,.45); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(255,255,255,.3)} .fita-trilho{display:flex;width:max-content;animation:fita-corre 34s linear infinite} .fita-trilho span{display:inline-block;white-space:nowrap; font-family:var(--font-marca);font-weight:400;font-size:.8125rem; letter-spacing:.11em;text-transform:uppercase} @keyframes fita-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.fita-trilho{animation:none}} /* O retângulo pousa sobre o corte. */ .login-caixa{position:absolute;z-index:6;top:50%;transform:translateY(-50%); left:clamp(20px,calc(56% - 148px),calc(100% - 380px)); width:min(360px,86vw);background:var(--surface);border-radius:20px;padding:28px 28px 22px; box-shadow:0 2px 6px rgba(61,11,49,.08),0 30px 68px -28px rgba(61,11,49,.5)} .login-form{width:100%} .olho{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:var(--fw-bold); letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px} .olho i{width:7px;height:7px;border-radius:50%;background:var(--rosa);display:block} .login-form h1{font-family:var(--font-sans);font-size:1.55rem;font-weight:var(--fw-bold); letter-spacing:-.025em;margin:0 0 3px} .login-form .sub{color:var(--text-3);font-size:var(--fs-label);margin-bottom:15px} .login-esq{display:block;text-align:center;margin-top:11px;font-size:var(--fs-caption); font-weight:var(--fw-semibold);color:var(--acento-texto);text-decoration:none} .login-crc{margin:14px 0 0;text-align:center;font-size:9px;letter-spacing:.06em; color:var(--text-1)} @media (max-width:860px){ .corte-env,.lado-esq,.fita-corte{position:static;width:auto} .corte-env{display:none} .lado-esq{background:var(--acento);padding:26px 22px 18px} .fita-corte{-webkit-mask:none;mask:none} .fita{position:static;margin:14px -22px 0} .login-tela{display:block} .login-caixa{margin:-26px auto 26px;width:min(360px,90vw)} } /* --------------------------------------------------- assinatura */ /* O W e a palavra WERNER são recorte do arquivo da marca. */ .assin{display:inline-flex;align-items:center;gap:8px;text-decoration:none} .assin img{display:block} .assin .a-sim{width:26px;height:26px;flex:0 0 auto} .assin .a-wm{height:15px;width:auto} .assin.mini .a-sim{width:18px;height:18px} .assin.mini .a-wm{height:10px} .app.recolhido .assin .a-wm{display:none} /* ------------------------------------- número e botão na Anton */ .kpi-valor,.kpi .valor{font-weight:var(--fw-bold);letter-spacing:-.015em; white-space:nowrap;font-variant-numeric:tabular-nums} @media (max-width:900px){ .login-arte{-webkit-mask:none;mask:none;padding:28px 24px} } /* ------------------------------------------- o menu vira o campo amarelo */ .lateral{background:var(--marca);color:var(--sobre-marca)} .lateral .busca input{background:rgba(255,255,255,.82);border-color:rgba(18,16,10,.14)} .lateral .busca input:focus{background:#fff} .lateral .busca kbd{background:rgba(255,255,255,.7);border-color:rgba(18,16,10,.14); color:rgba(18,16,10,.6)} .lateral .sel-empresa select{background:rgba(255,255,255,.82);border-color:rgba(18,16,10,.14); color:var(--sobre-marca)} .menu .raiz,.menu .mod>summary{color:rgba(18,16,10,.78)} .menu .raiz:hover,.menu .mod>summary:hover{background:rgba(255,255,255,.42); color:var(--sobre-marca)} .menu .grupo{color:rgba(18,16,10,.55)} .menu a{color:rgba(18,16,10,.78)} .menu a:hover{background:rgba(255,255,255,.42);color:var(--sobre-marca)} /* Ativo em branco recortado: é a caixa branca das peças, no tamanho do item. */ .menu a.ativo,.menu .mod[open]>summary{background:#fff;color:var(--sobre-marca); font-weight:var(--fw-semibold)} .menu .mod-itens{border-left-color:rgba(18,16,10,.16)} .lateral-rodape{border-top-color:rgba(18,16,10,.16);color:rgba(18,16,10,.7)} .lateral-rodape .btn.fantasma{color:rgba(18,16,10,.8)} .lateral-rodape .btn.fantasma:hover{background:rgba(255,255,255,.5)} .recolher{color:rgba(18,16,10,.7)} .recolher:hover{background:rgba(255,255,255,.45);color:var(--sobre-marca)} /* Com o menu amarelo, a ação primária passa para o rosa — senão o botão sumiria dentro do campo da marca. */ .btn.primario{background:var(--acento);color:#fff; box-shadow:0 1px 5px rgb(var(--acento-rgb)/.4)} .menu .contador{background:var(--acento);color:#fff} /* C — os indicadores abrem o painel sobre uma faixa amarela, com a estrela ao fundo, e os cartões em vidro por cima. Uma faixa só, no topo: repetida em cada seção o sistema ficaria listrado. */ .faixa-kpi{ position:relative;overflow:hidden; margin:-20px -20px 0 calc(-20px - var(--sb-w)); padding:15px 20px 15px calc(20px + var(--sb-w)); /* Vidro só existe se houver o que desfocar. Amarelo chapado desfocado é amarelo chapado — por isso a faixa carrega estrelas e uma trama diagonal por baixo dos cartões. É isso que aparece através deles. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23e816ac' fill-opacity='.55' points='95.5,38.7 78.3,49.0 97.7,58.4 76.6,60.8 92.7,78.8 67.4,68.0 73.4,87.4 60.4,78.4 56.6,96.7 48.2,76.2 34.6,103.8 36.9,74.5 15.3,91.4 28.1,67.1 3.6,72.7 25.1,56.2 -1.6,51.8 20.0,44.7 3.4,31.2 25.4,33.4 13.8,12.6 36.7,28.7 31.8,0.1 46.0,21.7 53.3,2.5 56.8,26.1 75.5,2.0 67.9,28.7 91.5,17.6 77.5,36.6'/%3E%3C/svg%3E") -30px -70px/190px 190px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23e816ac' fill-opacity='.34' points='99.0,56.9 76.3,61.9 83.8,79.1 68.1,78.0 62.1,90.8 50.1,80.0 34.4,103.8 35.9,72.1 11.7,83.4 21.8,63.0 7.3,56.3 21.4,46.0 1.7,28.1 27.6,30.7 21.0,5.2 42.3,24.2 49.9,3.9 57.4,24.6 76.9,7.8 75.5,27.8 96.6,28.5 82.1,45.3'/%3E%3C/svg%3E") 26% 110%/150px 150px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23ffffff' fill-opacity='.5' points='95.5,46.8 77.9,54.8 97.4,70.8 71.3,66.4 78.9,86.2 62.2,76.4 60.2,103.0 48.6,77.1 35.6,97.9 37.2,71.6 19.5,81.1 27.8,63.7 1.3,65.7 26.1,51.7 -3.0,40.8 27.0,39.9 13.1,21.7 35.2,31.4 26.3,-1.3 44.6,21.8 52.8,-4.8 58.0,23.4 72.4,12.2 68.1,31.6 92.5,23.7 73.1,42.6'/%3E%3C/svg%3E") 62% -40%/130px 130px no-repeat, repeating-linear-gradient(52deg,transparent 0 26px,rgba(255,255,255,.22) 26px 29px), var(--marca); } .faixa-kpi .grid{position:relative} .faixa-kpi .kpi{ background:rgba(255,255,255,.6); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); border-color:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 8px 22px -16px rgba(42,10,34,.5); } .faixa-kpi .kpi::after{opacity:1} .faixa-kpi .kpi .rotulo{color:rgba(42,10,34,.7)} .faixa-kpi .kpi .valor{color:var(--sobre-marca)} .faixa-kpi .kpi .nota{color:rgba(42,10,34,.66)} @media (max-width:980px){.faixa-kpi{margin:-14px -14px 0;padding:14px} .topo{margin-left:0;padding:0 14px}} /* ------------------------------------------------- portal administrativo */ /* Medida de infraestrutura: rótulo, número grande, barra e a nota embaixo. A barra é a mesma peça em três tons — verde até 75%, âmbar até 90%, rosa acima disso. Sem medida ela fica vazia, nunca cheia: barra cheia num painel de disco é a diferença entre dormir e acordar às três da manhã. */ .medida .cartao-corpo{display:flex;flex-direction:column;gap:9px} .medida .rotulo{font-size:var(--fs-micro);font-weight:var(--fw-bold); letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)} .medida-valor{font-family:var(--font-sans);font-size:1.62rem;font-weight:var(--fw-semibold); letter-spacing:-.03em;line-height:1.05;color:var(--text-1)} .medida-pct{font-size:var(--fs-label);font-weight:var(--fw-semibold)} .medida-pct.ok{color:var(--ok)} .medida-pct.warn{color:var(--warn)} .medida-pct.crit{color:var(--crit)} .medida-pct.neutro{color:var(--text-3)} .medidor{height:7px;border-radius:var(--r-pill);background:var(--hover-bg);overflow:hidden} .medidor span{display:block;height:100%;border-radius:var(--r-pill); background:var(--ok);transition:width .45s ease} .medidor span.warn{background:var(--warn)} .medidor span.crit{background:var(--crit)} .medidor span.neutro{background:var(--border-strong)} /* Grade de acesso: uma linha por módulo, três opções exclusivas. Botão em vez de