/* Genesis Financeiro, folha de estilo.
Recortada do index.html em 22/08/2026 (Fase 14, Atividade 2), sem
alterar uma regra. Aqui mora a APARENCIA: cor, tamanho, espaco e o
bloco CELULAR, que decide o arranjo abaixo de 760px.
Mexer aqui nao pode mudar numero nenhum na tela. */
:root{
--logo-efata:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAA/1BMVEUmXmALaWZl1JQqq2oDFV5HlXU5o4EHKU01rnEAMT0HKktB0n4gcGM0rHJTqFwUME0lc2lEdW5gsYo7wnYA//8CDzoA/wAF+X5v+HQyoXM7wnY8xHdBwXpV/6ocXSRBvnpVqqoppDwAqqpqampCw30/yYFI1IMAAAAJKUw7yHcCG0Q0lnlL14Yxh3Qvd2tPt4cuaGUTNVA3pnk4t3UnVlpNxoYDFT1MqYNV5I0mSlUbRlU7poFBynxIpHo90XtJmHkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACjgV5vAAAAQHRSTlP5Cv4XEP3+lmAIXvpamQXtlv7+pgH+AQQHz2TPkAMGTwMIAwJg/qEA/f39/f79/f7+/v38/v3+/f7+/f39/v7+PzEtWQAACa1JREFUeNqtmgl/oroWwFnE2qp1qXabO8t9974HhEAIsovy/b/VOycBBQRrZ5pfp3Zm6vlz9pNExbx96RPdVM2RaU5e4PXGpdz4e8+m/hRF9gQkv86pcm+aj18L2Px4o9E0KnTzXqGFRx5M83XzhYAXU7d3+uM8mj9YSmF7hBvvYLOvA+jmhL6B8W2DI8AnVjR90s3nx6/UwJ5M3uzAqgA7m07/BTu9fJEPVPN/qb2zo/AEKOyIghLmd/XPAa+/THO0DArbUCwETD0EFLY9tRHx+PhngNEr/HlYWJaBghFA4dUA+bCoQJj65rcBKiTW6xzkWnxXCEBIKZjIsOUqaCEQ3x+ffwOA0s3RfBqgYG4ULr5mlCrEOqR2vaj97X2QMQwY3QvpD3ecTh0BYNJEEmC5lJ4QR7DUBBkv+stNACkcpaPgiJZEvjYBZJGkU/usRvFtLhgA+f7y3A8Yqeq9sAqseyldCJ7WAKUBsKw4XKdHu6kG6vGjypxXXf97QAOQ/XC3sOrFo0KYyGItDWAR4mtNLSBuj/b0CSh6rwYgFyTfLc6yO4C0A0CEwjTaRED6UVDr29Nf7xM02RkwMkdW7wLTiOixihPAJ6f/JXGWaE1LyeCdUlhQ3RsA1Xz4AMD6AIhYrNaXDFw/bwJYMooIgIy4ByAslRlamk47kOO/twM4yWhhC1LTB+cVW5kBetCmz4/vTcC9eXdVA/bf6FCkKzIAEHpwxWAaqEIrVSa3AsAHPjV47FJWa7AgFu9hxKCJb5SRUOR4M8AglhId4kWYstoHWsLjgd8nZOuLSnWcfwLAaWGEDI0lASzVjCEEJ58FuOBkAyNb47UGzLYBsYj7vbESgOlftwDA8NTdciv2GTssCK/6AUM/plqZ9SFuBhBixQZUgogT8Rd07HZxBkARTdcrTrqMykQfAYgVZluQDxOdxoUMDummHIoGAAydamufxy13EO8WAFGgbsEXi0Nqa9JcWUIhlbBksEZC0VRLVlmPia6HaUh3RrQrDEQJAvRJjR4BymB40dJWVZimqXYBuJ4HpIwOVoY9ABzsUZvFGRRmyvzcQnMskkaZxhHGprxrouK6BodIWWxL2S6BEDGwFwtPDo2zg9ZuaI2HM+jHpYKUwYGHRuTJ9uhFhZ0arfoQL6CEntQ4Nk1U4j8Xtt4GtKspCaOAsXFU/x3cgNbqxJmf1E3zEmC3AYC4iCLGmIxPK04ieiFfVDcr1IShpuwcqSSZXgBU9ccD5zzP4Rupny/L6x99Gh165Au2JoSlZQNQZcljDVBNVXEV13UdZxwcWBifTHB6RzNIOqaUAZs225xQavqtCfDGKB5WELis21BISKNySIFE2ltrDiNCKTpvjC3qbDab+L7iwzq4zI8rDQgua1tGNBxQIJMWOq4bD7W4BIh1J2XmzE0OCSzxDV8P6O1+QLyW/kxXcddqdGK2nKzqd1W7yJkT7INgvx/XK4jKfvlboyoZGu8W04K+tzU4JwLJD51lRO6AfGkgyMFGOY1lIhc/K4D6S1fFaPfQaASExPAVCx9swyjy+uxvreuSp7X+fX3KMwSoMo4QMdhi+wCxtdLorpLfijsiovSIUQoACNHlUkUfqOZiIFIaAFItK0Pxu92lgeCJhN2mT7D7RQ1m7njszk5hZHUkYZRCGvjinUoYhoqvKG7JoigIdpKQrtvjBUZugVH6KjTw3OXSdWeowlLJ8xz/4MryPJQrMyIJyD0P03G/3wciJXdipWvS0/ILiFJRi5bjJWqBb/XcsVOt8V4uyALIARZIE3FF8T34Ta9OepRPE9JNjdrHLxIwQ4BcjviG793D24OKwZjDBCCvAFVVwV+xtVV3/JI+RsAzAmbu22z2Jk2kK2KFCto6FD/A8kODnQFtAl1nF+PdqVBszNrJrrs0m14m7bUNGfNrEwGh0tXZR0y5nLuqoYg+mTIPns3ZcjkTYaqqvVsEbvkNgFc5GjxThqRvrJPtbPrTfGwk2kZu0+4H8oDtJUA+vlMeSsPPrP7BVNTqI3abTV0q/vmnOpKZLT2/HxB4nZmSEDIwK8v6DRZ67WxjVXMJlh173TTD8tsFXFnEqGu13gboMp5cR8lFEClVlvHPAk5BqrYBqABkxNw9xaBYDOeinAXGrfKlhabfpFsbgI2pIABavwMdBjMMkg0TD42UOMmQwM54EMsYgmajm10NZmNlBlWpSjZZhQ6O2COXDsv6SzlEK/bUaEWa/R6Huq4G5kZdYl1VGk62tp6ToBP8ZL/qBZwymrfm6jqGuqcts+WsnWskdBLsJZy5vV0fCyQyxl5tqnUhB/dnfehAqt3WeOIYaCPDgdfuZMpdt6pLyemBNLuQMbTpA6jqo9oesknpyjczD0b3NkFxZd1zXfivysVy4wOF7tfQkVrnVIf4joMzIaSCx7IGIYeigXUJ28j+ZKBQNGlw8bM6eGY36uwTEpfJBE28yD+XZt/zfQnwHO80y65tbKKQxY/mFcCFCl7McdgBHcrTllUMmQjwHPfcK1GBnb07K9B3ZnehAtpGbLyY67BSkWYKlQrg+O06ChrM6xgdArRVQOtXVSBh0AighYJPw7r3KKeAgyRGBXY7vXED03fq2FGBrBI3iWU9UNbJ2HGxPole6nk+b1YhOcXMm9cv/YB2LpDEcQ6W2P4RkvtlEEBc5QhQeGunI4YY+01Xnz84+R11T9eAkNQbq5gzBGRhzjvDSiQHsUnr/kgZuI7o7JmTsQd2kQio3d5FN+Pxikr58/b91NDheGcOxhhNErkl7AVIB+w6Hh4GXBxBxj6TzgVAcgkgvJY/6VywKYN3Nt2zF146rjMEsCr5XQNduT8YjbqzPASTOwRgYyeoImhzK+ByO1LWAKcD2KJ8MQnrF5ecypWLrS7BGQLAcBzg2k0uL1Gv3OF0T0csRw4A+b4J4ITL5++Xf/WSqEvoBcR5tBPig/2873Lz6i1UhwCtRQBkC6rkh8yRzz/ulf/BNVeb4FwCiMvkPgTlP/7GRV0r4RxZ+vNxDSAc67cg9NvnhpvAlg6+nOFrDYjCxEYLz4AmQ5fLH141tgi8ASCWW5vfcQbl33BZem92cppLU4WnfWAA8v/zJ7ex5qhVl7iLAHdfAfbjN31Y/k33ySOzFUwwz4Xo8XpDPVevXe7fdiOuNpUAAGpQ79kn5tUPWdx45X5v3t91TOSIbcT1x//EnT6YqVZCOhkB+7cPHv8TACHoYXHWAI8r5n+bm48+vXE7QCjxcDaRu1Rv+fzJJwBCCbCTBCxhPzdwjf/7gAoBO927EW65vvLDM+dLc6AI49z4AaD/A6RybLYJkbVEAAAAAElFTkSuQmCC);
--azul:#042C53; --azul-2:#0A3C6B; --tech:#378ADD; --tech-l:#E8F1FB;
--teal:#1D9E75; --teal-l:#E4F5EE;
--cinza:#888780; --cinza-l:#F2F2F0;
--neg:#A32D2D; --neg-l:#FBEDED;
--amb:#9A6B12; --amb-l:#FBF3E2;
--paper:#F6F7F9; --card:#FFFFFF; --line:#E2E5E9; --line2:#EFF1F4;
--text:#12202F; --muted:#5F6B78;
/* Existiam sete regras usando var(--brand) sem que --brand fosse
declarado em lugar nenhum. Fundo invalido nao pinta: o botao
selecionado ficava transparente com letra branca, ilegivel. */
--brand:#135B9E;
--r:10px;
--sh:0 1px 2px rgba(4,44,83,.05), 0 8px 24px -18px rgba(4,44,83,.28);
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--paper);color:var(--text);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit;font-size:13px}
:focus-visible{outline:2px solid var(--tech);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
/* ---------- shell ---------- */
/* 268px e nao 250: com 250 o item mais longo do menu, Planejamento
Or\u00e7ament\u00e1rio, quebrava em duas linhas e desalinhava a lista inteira. */
/* 27/08/2026, com a linha vermelha no print: "quero que voce mude o
tamanho dela conforme a linha vermelha, no sentido de largura".
MEDIDO no proprio print: a borda da coluna estava em 272 e a linha dele
em 210, entao ela pediu 62px a menos. 206px e o que sobra.
Cabe: o rotulo mais longo virou "Projeção de Receita" depois que
"Planejamento Orçamentário" encurtou para "Orçamento", e ele mede cerca
de 130px nos 158 que sobram depois do recheio e do icone.
Os dois valores viraram um so. A largura menor em tela de lista existia
para dar espaco a tabela; agora que a tabela nao tem mais teto de
largura, duas medidas para a mesma coluna so dariam a chance de a coluna
pular de tamanho quando a pessoa troca de menu. */
.app{display:grid;grid-template-columns:206px 1fr;min-height:100vh}
.side{background:var(--azul);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* Espaco de trabalho, botao do assistente e rodape centralizados (pedido
do usuario em 22/08/2026). A MARCA voltou para a esquerda em 22/08/2026,
a pedido dele, depois de ver as duas versoes lado a lado. Os itens do
menu tambem ficam a esquerda: lista se le pela borda. */
/* .brand virou botao (a marca leva para a home), entao precisa zerar o
que o navegador poe em button: largura, cor e alinhamento. */
.brand{padding:22px 18px 18px;display:flex;gap:11px;align-items:center;
width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer}
.brand:hover b{color:#fff}
.brand:hover .efata-logo{filter:brightness(1.15)}
.brand .mark{flex:none}
.efata-logo{background-image:var(--logo-efata);background-size:contain;background-position:center;background-repeat:no-repeat;display:block;flex:none}
.brand .efata-logo{width:34px;height:34px}
.brand b{font-size:15px;font-weight:700;letter-spacing:.2px;display:block;line-height:1.2}
.brand span{font-size:10.5px;color:#7FB4EA;font-weight:600;letter-spacing:1.3px;text-transform:uppercase}
.ws{margin:2px 14px 16px;padding:11px 13px;background:rgba(255,255,255,.07);border-radius:8px;text-align:center}
.ws em{font-style:normal;font-size:9.5px;letter-spacing:1.2px;color:#8FA8C0;font-weight:600;display:block;text-transform:uppercase}
.ws strong{font-size:13.5px;font-weight:600;display:block;margin-top:1px;line-height:1.4}
.ws-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;text-align:center;color:#fff;padding:1px 0;border-radius:6px;transition:.15s;cursor:default}
/* Com nome definido a caixa e SO leitura: nome de empresa nao muda toda
hora, e link permanente ali convida ao clique errado. Sem nome ela
continua sendo convite, porque ai tem trabalho a oferecer. */
.ws-btn.vazio{cursor:pointer}
.ws-btn.definido{cursor:default}
.ws-btn.vazio strong{color:#7FB4EA;font-weight:500;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;transition:.15s}
.ws-btn.vazio:hover strong{color:#fff}
.ws-btn.vazio:hover svg{color:#fff}
nav{padding:0 12px;flex:1}
.titulo-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 27/08/2026: a fileira do exercicio virou a linha de cima do cabecalho.
O width:max-content impede que ela estique pela linha inteira e deixe um
vazio de 900px ao lado de dois botoes de 30px. */
.exerc-topo{display:flex;gap:6px;align-items:center;position:relative;
flex:0 0 auto;
width:max-content;margin:0 0 7px}
/* Dentro do topo da Tesouraria ele nao e mais uma LINHA acima do titulo, e
sim um bloco ao lado dos cartoes: a margem de baixo iria empurrar a
fileira inteira. */
#topoKpis .exerc-topo{margin:0 0 0 14px;align-self:center}
/* 27/08/2026: hospedado na barra de botoes da direita, o exercicio nao tem
margem propria: quem da o respiro entre os botoes e o gap da barra. */
.lista-barra .exerc-topo{margin:0}
/* Com o periodo fora da coluna do titulo, sobra so o nome da tela ali. Ele
se centraliza na altura dos cartoes, que e "no local onde ele estava". */
body.tela-contas .top-row>div:first-child{align-self:center}
/* O seletor de periodo da Tesouraria mora aqui desde 27/08. Ele herda o
desenho escuro de .exerc-topo select; o que precisa e perder as margens
que a caixinha tinha quando morava na linha de filtros. */
/* FASE 30, At. 1 (29/08/2026): "retirar esse menu 'todos os meses' e
deixar ele igual a esse menu que esta na tesouraria no movimento de
bancos, esse azulzinho com o numero branco, que tem o mes e o ano".
A .titulo-abaixo entra no MESMO seletor, e nao ganha uma copia da
regra: e o mesmo controle, na mesma linha, com o mesmo papel. Duas
copias da mesma pintura divergem no dia em que alguem mexer numa. */
.exerc-topo .msel,
.titulo-abaixo .msel{margin:0}
.exerc-topo .msel select,
.titulo-abaixo .msel select{background:#0b2239;color:#fff;border:1px solid #0b2239;border-radius:7px;padding:6px 26px 6px 10px;font-size:12.5px;font-weight:700;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:13px}
/* O .msel select da linha de filtros vem DEPOIS no arquivo e tem a
mesma especificidade de .exerc-topo select, entao ganhava por
ordem e a caixinha nascia branca no topo escuro. A regra acima e
a mesma do irmao ao lado, com um seletor mais especifico. */
.exerc-topo .msel select,
.titulo-abaixo .msel select{min-width:96px}
.exerc-topo select{background:#0b2239;color:#fff;border:1px solid #0b2239;border-radius:7px;padding:6px 26px 6px 10px;font-size:12.5px;font-weight:700;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;background-size:13px}
.exerc-topo select option,
/* a lista ABERTA continua clara: texto branco em fundo branco
e o que acontece quando so a caixinha fechada e pintada */
.titulo-abaixo .msel select option{color:#0b2239;background:#fff}
.exerc-topo button{width:30px;height:30px;flex:0 0 30px;border-radius:7px;background:#0b2239;border:1px solid #0b2239;color:#fff;font-size:17px;line-height:1;cursor:pointer}
.exerc-topo button:hover{background:#123a5e}
.exerc-topo .dica{position:absolute;top:calc(100% + 9px);left:0;width:270px;background:#0b2239;color:#fff;padding:10px 12px;border-radius:9px;font-size:11.5px;line-height:1.5;font-weight:500;box-shadow:0 10px 26px rgba(11,34,57,.28);opacity:0;visibility:hidden;transition:opacity .14s ease;z-index:60;pointer-events:none}
.exerc-topo .dica::before{content:'';position:absolute;bottom:100%;left:14px;border:6px solid transparent;border-bottom-color:#0b2239}
.menu-acoes{padding:6px 20px 2px;display:flex;flex-direction:column;gap:8px}
.tpl-secao{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.tpl-secao h4{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--text)}
.tpl-secao p{margin:0 0 10px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.tpl-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tpl-linha select,.tpl-linha input[type=file]{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:12.5px;background:#fff;color:var(--text)}
.tpl-res{margin-top:10px;font-size:12px;line-height:1.6;color:var(--text);max-height:210px;overflow:auto}
.tpl-res .erro-linha{color:#B3261E}
.tpl-res .aviso-linha{color:#8A6100}
.menu-acoes button{width:100%;text-align:left;padding:11px 13px;border-radius:9px;border:1px solid var(--line);background:#fff;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.menu-acoes button:hover{border-color:var(--brand);background:#F4F8FC}
.menu-acoes button small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.virada-bloco{font-size:12.5px;line-height:1.6;color:var(--text)}
.virada-bloco h4{margin:12px 0 4px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted2)}
.virada-bloco .linha{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dashed var(--line)}
.virada-bloco .nada{color:var(--muted)}
.selo-pend{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;background:#FFF4E0;color:#8A6100;font-size:10.5px;font-weight:700;vertical-align:middle}
.selo-papel{display:inline-block;margin-right:5px;padding:1px 7px;border-radius:999px;background:#EAF1F8;color:#20486E;font-size:10.5px;font-weight:600}
.pc-busca{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pc-campo{display:flex;gap:6px;align-items:flex-end}
.pc-campo .field{flex:1 1 auto;min-width:0}
.pc-campo button{flex:0 0 auto;height:33px}
.pc-grade{display:flex;flex-wrap:wrap;gap:10px}
.pc-grade .field{flex:1 1 190px}
.pc-grade .larga{flex:1 1 100%}
/* Fornecedor e Cliente lado a lado, cada um em bloco que nao se parte
entre a caixinha e a palavra. Em 190px de campo eles quebravam, e a
marca parecia ser de outro campo. */
.pc-papel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
padding-top:8px;font-weight:400;font-size:13px}
/* label dentro de .field e rotulo de campo (maiuscula, cinza, 10,5px) e
input dentro de .field ocupa a largura toda. Aqui a label e a OPCAO e o
input e uma caixinha: as duas heranças voltam ao normal. */
.pc-grade .pc-papel label{display:inline-flex;align-items:center;gap:7px;
white-space:nowrap;cursor:pointer;text-transform:none;
letter-spacing:0;font-size:13px;font-weight:500;
color:var(--text);margin:0}
.pc-grade .pc-papel input[type=checkbox]{width:16px;height:16px;min-height:0;
min-width:0;padding:0;border:0;flex:none;
margin:0;accent-color:var(--azul)}
.pc-papel-ajuda{flex:1 1 260px;font-size:11.5px;color:var(--muted);
line-height:1.5}
.pc-secao{width:100%;margin:6px 0 0;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted2);font-weight:700;border-top:1px solid var(--line);padding-top:10px}
.pc-aviso{width:100%;font-size:12px;color:#8A6100;background:#FFF7E8;border:1px solid #F0DEB8;border-radius:8px;padding:8px 10px}
.cc-colunas{display:flex;gap:18px;flex-wrap:wrap}
.cc-col{flex:1 1 240px;min-width:210px}
.cc-col h4{margin:0 0 7px;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted2);font-weight:700}
.cc-linha{display:flex;align-items:center;gap:8px;padding:3px 0}
.cc-linha .valor-nota{flex:0 0 72px;font-size:13px;font-weight:600;color:var(--text);text-align:right}
.cc-linha input{flex:0 0 62px;width:62px;border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-family:inherit;font-size:13px;text-align:right;background:#fff;color:var(--text)}
.cc-linha .subtotal{flex:1 1 auto;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cc-linha.tem input{border-color:var(--brand);font-weight:600}
.cc-linha.tem .subtotal{color:var(--text);font-weight:600}
.cc-fecho{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.cc-fecho .l{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;font-size:13.5px}
.cc-fecho .l b{font-variant-numeric:tabular-nums}
.cc-fecho .total{font-size:16px;font-weight:700;color:var(--text)}
.cc-dif{margin-top:10px;border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.5}
.cc-dif.bate{background:#E9F7EF;color:#1E6B41;border:1px solid #BFE3CE}
.cc-dif.sobra{background:#FFF7E8;color:#8A6100;border:1px solid #F0DEB8}
.cc-dif.falta{background:#FDECEA;color:#B3261E;border:1px solid #F3C9C4}
.nm-grade{display:flex;flex-wrap:wrap;gap:10px}
.nm-grade .field{flex:1 1 190px}
.nm-linha{display:flex;align-items:center;gap:8px;flex:1 1 100%;padding:5px 0;border-bottom:1px dashed var(--line)}
.nm-linha .nome{flex:1 1 150px;font-size:13.5px;font-weight:600;color:var(--text)}
.nm-linha .sistema{flex:0 0 130px;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.nm-linha input{flex:0 0 120px;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-family:inherit;font-size:13px;text-align:right;background:#fff;color:var(--text)}
.nm-linha .dif{flex:0 0 120px;text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.nm-linha .dif.zero{color:#1E6B41}
.nm-linha .dif.mais{color:#8A6100}
.nm-linha .dif.menos{color:#B3261E}
.nm-cab{display:flex;gap:8px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted2);font-weight:700;flex:1 1 100%;padding-bottom:4px;border-bottom:1px solid var(--line)}
.nm-cab .nome{flex:1 1 150px}
.nm-cab .sistema{flex:0 0 130px;text-align:right}
.nm-cab .contado{flex:0 0 120px;text-align:right}
.nm-cab .dif{flex:0 0 120px;text-align:right}
.nm-total{flex:1 1 100%;display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;font-size:14px;font-weight:700}
.nm-total b{font-variant-numeric:tabular-nums}
.nm-calc-btn{flex:0 0 30px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nm-calc-btn svg{width:18px;height:18px;display:block}
.nm-calc-btn:hover{border-color:var(--brand)}
.nm-calc-btn.on{border-color:var(--brand);box-shadow:0 0 0 2px rgba(19,91,158,.13)}
.nm-calc{display:none;flex:1 1 100%;padding:4px 0 14px;border-bottom:1px dashed var(--line);background:#FAFBFC;border-radius:0 0 8px 8px}
.nm-calc.on{display:block}
.nm-calc .cc-colunas{padding:10px 12px 0}
.nm-calc-fecho{display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px 0;font-size:13px}
.nm-calc-fecho b{font-variant-numeric:tabular-nums;font-size:14px}
/* A calculadora fica AO LADO das abas, e nao dentro da borda delas: por
dentro ela parecia uma quarta aba, e nao e uma visao, e uma ferramenta. */
.tesouraria-linha{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
/* botao que esta "ligado": a pessoa precisa saber que a visao esta nele
e nao no periodo escolhido ao lado */
/* Selecionado e o azul do sistema, o mesmo da barra lateral. Contra o
cinza da tela e contra o branco dos outros botoes ele nao some. */
.btn.sel{background:var(--azul);border-color:var(--azul);color:#fff;
box-shadow:0 1px 2px rgba(4,44,83,.22)}
.btn.sel:hover{background:var(--azul-2);border-color:var(--azul-2);color:#fff}
/* FASE 48, At. 29 (02/09/2026): "coloque o botao home conforme o layout da
tesouraria bancos, nesta mesma distancia e ordem".
MEDIDO ANTES DE MEXER, no Banco: o Home tinha 36px e o Atualizar ao lado,
34px. Dois botoes vizinhos com alturas diferentes e exatamente a
"estranheza" que ele descreveu na Fase 47, e a regra daquela fase e clara:
tudo no cabecalho tem 34px. A calculadora era a ultima excecao, e cai
junto, senao ela e que passaria a destoar. O respiro de 8px entre eles ja
era igual dos dois lados. */
.ib-calc{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 34px;padding:0;transition:border-color .15s,box-shadow .15s}
.ib-calc svg{width:22px;height:22px;display:block}
.ib-calc:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(4,44,83,.14)}
.selo-fechado{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#FFF4E5;color:#8A6100;font-size:11.5px;font-weight:700;border:1px solid #F5DFBE}
.exerc-topo button:hover ~ .dica,.exerc-topo button:focus ~ .dica{opacity:1;visibility:visible}
.selo-encerrado{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#FDECEA;color:#B3261E;font-size:11px;font-weight:700;vertical-align:middle}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;white-space:nowrap;padding:10px 11px;border-radius:8px;color:#BDD1E4;font-size:13.5px;font-weight:500;line-height:1.4;transition:background .15s,color .15s;margin-bottom:2px}
.nav-item .ico{flex:0 0 auto}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.on{background:rgba(55,138,221,.22);color:#fff;font-weight:600}
.nav-item.on .ico{color:var(--tech)}
/* ---------- Fase 19, At. 1 (26/08/2026): menu com gaveta ----------
A seta gira em vez de trocar de desenho: um icone so, e o movimento
conta o que aconteceu. A gaveta abre por grid-template-rows 0fr->1fr,
que anima de verdade sem precisar saber a altura de antemao (max-height
com numero chutado corta o quarto item ou deixa buraco). */
.nav-grupo{display:block}
.nav-pai .nav-seta{width:14px;height:14px;margin-left:auto;flex:0 0 auto;
opacity:.65;transition:transform .18s ease,opacity .15s}
.nav-pai:hover .nav-seta{opacity:1}
.nav-grupo.aberta>.nav-pai .nav-seta{transform:rotate(90deg);opacity:1}
.nav-grupo.aberta>.nav-pai{color:#fff}
/* Achado no QA em producao, 26/08: as gavetas FECHADAS estavam vazando os
filhos, e o primeiro de cada uma aparecia cortado por tras do pai.
A causa: grid-template-rows:0fr define UMA linha explicita. Com dois ou
quatro botoes dentro, so o primeiro caia nessa linha; os outros viravam
linhas implicitas, que sao auto e nunca encolhem. O 0fr fechava um
quarto da gaveta e o resto ficava na tela.
A correcao e o quadro interno: a gaveta passa a ter UM filho so, que e o
que a linha 0fr/1fr precisa para funcionar, e os botoes ficam dentro
dele. O overflow:hidden mora no quadro interno, que e quem tem altura
variavel; na gaveta ele nao adiantava nada. */
.nav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .18s ease}
.nav-grupo.aberta>.nav-sub{grid-template-rows:1fr}
.nav-sub-in{overflow:hidden;min-height:0}
.nav-sub-item{display:block;width:100%;text-align:left;white-space:nowrap;
padding:7px 11px 7px 40px;border-radius:8px;color:#9FB6CC;font-size:12.5px;
font-weight:500;line-height:1.4;transition:background .15s,color .15s;
margin-bottom:2px;position:relative}
/* o fio vertical amarra os filhos ao pai sem precisar de recuo maior */
.nav-sub-item::before{content:"";position:absolute;left:22px;top:0;bottom:0;
width:1px;background:rgba(255,255,255,.13)}
.nav-sub-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-sub-item.on{background:rgba(55,138,221,.22);color:#fff;font-weight:600}
.nav-sub-item.on::before{background:var(--tech);width:2px;left:21px}
.ico{width:17px;height:17px;flex:none;color:#7089A3}
.side-foot{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:#7B90A6;line-height:1.6;text-align:center}
.side-foot b{color:#A9C0D6;font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:18px 28px 0;position:sticky;top:0;z-index:20}
.top-row{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;flex-wrap:wrap}
h1{font-size:21px;font-weight:700;margin:0;letter-spacing:-.3px;line-height:1.3}
/* FASE 47 (01/09/2026): o nome da tela, igual ao prototipo. Menor e mais
leve do que era (17px/600 contra 21px/700), em caixa alta.
A caixa alta era feita no JAVASCRIPT e so na Tesouraria, decisao de
27/08. Agora vale para todas as telas, que foi o que ele pediu olhando o
prototipo, e por isso mora no CSS: pintura e coisa de folha de estilo, e
deixá-la no codigo obrigaria cada tela nova a lembrar de aplicá-la. */
.top h1{font-size:17px;font-weight:600;letter-spacing:-.2px;
text-transform:uppercase}
/* FASE 47: o subtitulo e o periodo, na MESMA linha, como no prototipo. */
.sub-linha{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.sub-periodo{color:var(--muted);font-size:12px;line-height:1.5}
.sub-periodo:empty{display:none}
/* 28/08/2026: "todos os nomes de menu deixa em caixa alta".
A regra mora aqui, e nao no texto de cada tela, porque o titulo e UM SO
elemento que muda de conteudo conforme o menu: A PAGAR e a Tesouraria ja
chegam em maiuscula pelo JS, e as outras telas escrevem o nome como ele se
le. Fazendo pelo CSS, quem escreve o titulo continua escrevendo em
portugues normal (o leitor de tela e a busca leem o texto de verdade) e a
tela mostra tudo no mesmo padrao, inclusive os nomes que ainda vao nascer.
O letter-spacing negativo era do texto de caixa mista: em maiuscula ele
gruda as letras. Vira um respiro positivo. */
#pgTitle{text-transform:uppercase;letter-spacing:.3px}
.sub{color:var(--muted);font-size:12px;margin-top:1px;line-height:1.5}
.top-act{display:flex;gap:8px;align-items:center;flex:none}
.btn{padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--text);transition:.15s;line-height:1.4}
.btn:hover{border-color:#C3CBD4;background:#FAFBFC}
.btn-p{background:var(--azul);color:#fff;border-color:var(--azul)}
.btn-p:hover{background:var(--azul-2);border-color:var(--azul-2)}
.btn-t{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-t:hover{background:#178462;border-color:#178462}
.btn.on{background:var(--tech);color:#fff;border-color:var(--tech)}
/* 23/08/2026: 33px era pequeno demais para o unico botao que abre o menu
da pessoa. Sobe para o tamanho da foto que aparece DENTRO do proprio
menu, que foi a referencia que o Leandro mandou no print. */
.avatar{width:52px;height:52px;border-radius:50%;background:var(--tech-l);color:var(--azul);display:grid;place-items:center;font-weight:700;font-size:17px;border:1px solid #C9E0F7}
/* 27/08/2026: "sobe os meses para perto do texto orçado, realizado". Com o
exercicio fora da linha de cima, o cabecalho encolheu e os 16px viraram um
vao no meio do nada. */
.ribbon{display:flex;margin-top:9px;overflow-x:auto}
.mo{flex:1;min-width:72px;padding:8px 4px 9px;border-bottom:2px solid transparent;text-align:center;transition:.15s}
.mo small{display:block;font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:#9AA5B1}
.mo b{display:block;font-size:12.5px;font-weight:600;margin-top:2px;color:#B3BDC7;font-variant-numeric:tabular-nums;white-space:nowrap}
.mo:hover{background:#F8FAFC}
.mo.sel{background:#F5FAFF;border-bottom-color:var(--tech)}
.mo.sel small,.mo.sel b{color:var(--azul)}
.mo.fechado small{color:var(--muted)}
.mo.ano{border-left:1px solid var(--line);background:#F8FAFC;cursor:default;min-width:84px}
.mo.ano:hover{background:#F8FAFC}
.mo.ano small{color:var(--azul)}
.mo b.pos{color:var(--teal)} .mo b.negv{color:var(--neg)}
.ribbon-legend{display:flex;gap:18px;padding:8px 0 10px;font-size:10.5px;color:#8B96A2;align-items:center;flex-wrap:wrap}
.ribbon-legend i{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
/* 27/08/2026, SEGUNDA correcao da mesma queixa, e a primeira estava pela
metade. Eu tinha tirado o teto so nas telas de lista (body.tela-contas), e
ele voltou a mandar o print: a lacuna continuava, porque a tela dele era o
Planejamento Orcamentario, que nao entra naquela classe.
O teto de 1520px sai de vez. Ele foi escrito pensando em texto, onde linha
comprida cansa de ler, mas nao existe uma tela de texto neste sistema:
todas sao tabela, cartao ou formulario em grade, e todas ficam melhores
ocupando o monitor. Deixar o teto valendo em algumas telas e nao em outras
ainda daria o pior dos dois mundos, a largura mudando quando a pessoa
troca de menu. */
.wrap{padding:24px 28px 70px}
/* 27/08/2026, medido no Chrome: dos 84px de cinza que ele viu embaixo das
tabelas, 70 eram ESTE recheio. Ele existe para a pagina que ROLA: ali o
ultimo cartao precisa de folga antes da borda da janela.
Nas telas de lista a pagina nao rola: o quadro da tabela e que rola por
dentro, e essa folga vira faixa cinza parada. Entao ela cai para o mesmo
respiro das laterais, e a tabela ocupa o que sobrou.
E A LARGURA, do print dele no monitor de mesa: "no notebook preenche ok,
mas quando vejo no monitor fica com esta lacuna no final".
O max-width de 1520px vale para texto, onde linha comprida cansa de ler.
Uma tabela e o contrario: cada pixel a mais e uma coluna que a pessoa ve
sem rolar de lado. Num monitor de 1920 o limite deixava 140px de fundo a
direita E escondia a coluna Local de pagamento atras da barra de rolagem
ao mesmo tempo, que e o pior dos dois mundos. */
/* o max-width:none saiu daqui porque o teto deixou de existir para todo
mundo; o que continua sendo so das telas de lista e o recheio de baixo */
body.tela-contas .wrap{padding-bottom:14px}
.screen{display:none}
.screen.on{display:block}
:root{--muted2:#8B96A2}
.tag i{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:1px}
.tag.ok i{background:var(--teal)}.tag.bad i{background:var(--neg)}.tag.info i{background:var(--tech)}
.tag.warn{background:var(--amb-l);color:var(--amb)}.tag.warn i{background:var(--amb)}
.tag.prev{background:var(--tech-l);color:#1B5E9E;border:1px dashed #A9CDF1}
.cat-chip{font-size:11px;color:var(--muted);background:var(--cinza-l);padding:2px 8px;border-radius:20px;white-space:nowrap}
.desc b{display:block;font-size:13px;font-weight:500}
.desc span{display:block;font-size:11.5px;color:var(--muted2);margin-top:1px}
/* etiqueta dentro da descricao continua etiqueta: a regra de cima e
para legenda, e esticava o selo de ponta a ponta da coluna */
.desc span.tag{display:inline-block;width:auto;margin-top:3px;
font-size:10.5px;color:inherit}
.audit{display:block;font-size:10.5px;color:var(--muted2);margin-top:4px}
/* conta atrasada que veio de outro mes: ela aparece em dois meses de
proposito, e sem o selo a pessoa veria a mesma conta duas vezes sem
entender por que */
.selo-arrasto{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#FDECEA;color:#B3261E;font-size:10px;font-weight:700;vertical-align:middle}
.audit b{color:var(--muted);font-weight:600}
.period-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.msel select{appearance:none;-webkit-appearance:none;-moz-appearance:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 30px 8px 14px;cursor:pointer}
.pill-tabs{display:inline-flex;gap:2px;background:#EEF1F4;border:1px solid var(--line);padding:3px;border-radius:9px}
.pill-tabs button{padding:7px 13px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pill-tabs button.active{background:#fff;color:var(--azul);box-shadow:0 1px 2px rgba(4,44,83,.14)}
.statline{display:flex;gap:0;flex-wrap:wrap;padding:2px 18px 16px;border-bottom:1px solid var(--line)}
.stat{padding:0 22px 0 0;margin-right:22px;border-right:1px solid var(--line2)}
.stat:last-child{border-right:0;margin-right:0;padding-right:0}
.stat .lab{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted2)}
.stat .val{font-size:16.5px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.chart-row{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}
@media(max-width:980px){.chart-row{grid-template-columns:1fr}}
.legend{display:flex;gap:16px;padding:0 18px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend .item{display:flex;align-items:center;gap:6px}
.legend .sw{width:10px;height:10px;border-radius:3px}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .axl{fill:var(--muted2);font-size:9.5px}
.chart-svg .mol{fill:var(--muted);font-size:10px}
.chart-svg .endl{fill:var(--azul);font-size:11px;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.filters{display:flex;gap:10px;padding:0 18px 16px;flex-wrap:wrap;align-items:flex-end}
/* Fase 18 (24/08/2026): a lista de Contas tem 14 colunas e passava da
largura do card, cortando Histórico, Situação e Ações sem deixar
rolar. A classe .table-wrap ja estava escrita no HTML e nao existia
no estilo. Agora a tabela rola DENTRO da propria caixa. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Fase 18, At. 17 (24/08/2026): duas queixas que sao a mesma coisa.
1) Rolando a lista, o cabecalho subia junto e no meio de duzentas
linhas ninguem sabe mais qual coluna e qual.
2) A barra de rolagem horizontal ficava no PE da tabela: com a lista
inteira aberta, para alcancar a barra era preciso descer a pagina toda,
arrastar, e subir de novo.
A caixa da tabela passa a ter altura maxima e a rolar por dentro. Com
isso a barra horizontal fica sempre na base da caixa visivel (perto das
linhas) e o cabecalho gruda no topo dela. O fundo e a sombra existem
porque celula grudada e transparente deixa as linhas passarem por
baixo do titulo, e borda de celula grudada se descola em alguns
navegadores; a sombra interna faz o papel da linha. */
.table-wrap{overflow-y:auto;max-height:70vh}
.table-wrap thead th{position:sticky;top:0;z-index:3;background:var(--card);
box-shadow:inset 0 -1px 0 var(--line)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.field select,.field input{border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:#fff;color:var(--text);min-width:130px;font-family:inherit;font-size:13px}
/* QA de 24/08/2026: a linha que diz o que o sistema entendeu da
diferenca entre o valor do titulo e o valor pago. Cabe embaixo do
campo, na largura dele, sem empurrar o formulario. */
.dica-campo{font-size:11px;line-height:1.4;color:var(--muted);margin-top:3px;
max-width:100%}
/* Fase 18, At. 25 (25/08/2026): a fileira de bancos e uma SUBdivisao da
aba Banco, e o tamanho diz isso. Do mesmo tamanho das de cima, as duas
fileiras competiriam e ninguem saberia qual manda. */
.pill-sub{margin-left:0;flex-basis:100%;margin-top:8px}
.pill-sub button{font-size:12px;padding:6px 12px;min-height:32px}
.field.grow{flex:1;min-width:200px}
.field.grow input{width:100%}
.table-foot{display:flex;justify-content:space-between;padding-top:11px;font-size:11.5px;color:var(--muted2)}
.sep-row td{background:#F4F7FA;color:var(--muted2);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line)}
/* FASE 47: cada tela com o numero de colunas dos cartoes QUE ELA TEM.
Contas mostra cinco (aberto, do mes, vencidas, a vencer, pago) e a
Tesouraria mostra quatro (saldo inicial, entradas, saidas, saldo do mes).
Quatro colunas para cinco cartoes jogava o quinto para uma segunda
fileira sozinho, que e o "desalinhado" que ele viu. */
#s-contas .kpis{grid-template-columns:repeat(5,1fr)}
#s-fluxo .kpis{grid-template-columns:repeat(4,1fr)}
/* Fase 18, At. 18 (24/08/2026): nas telas de quatro cartoes o numero
ficava encostado na esquerda, com um vao grande sobrando a direita,
porque quatro cartoes numa linha sao mais largos do que cinco. Rotulo,
valor e rodape vao juntos para o centro: centralizar so o numero e
deixar o titulo na esquerda desalinha os tres. */
#s-fluxo .kpis .kpi,#s-contas .kpis .kpi{text-align:center}
@media(max-width:1250px){#s-fluxo .kpis,#s-contas .kpis{grid-template-columns:repeat(2,1fr)}}
/* Fase 11, Atividade 4: contas sem data de vencimento */
.smd-faixa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--amb);border-radius:9px;background:#fff;font-size:13px;line-height:1.5}
.smd-barra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:9px;background:#fff;font-size:13px}
.smd-barra .field{margin:0}
.smd-barra .smd-conta{padding-bottom:7px}
.smd-conta{color:var(--muted)}
td.smd-sel,th.smd-sel{width:34px;text-align:center}
/* Fase 36: a setinha do Lote mora dentro do cabecalho da coluna, e por isso
veste a roupa do cabecalho: sem borda, sem fundo proprio, do tamanho da
letra dos outros titulos. Um select com cara de formulario ali dentro
pareceria um filtro solto no meio da tabela. */
th.lote-th{width:74px}
th.lote-th select{background:transparent;border:0;color:inherit;font:inherit;
font-weight:inherit;letter-spacing:inherit;text-transform:inherit;
cursor:pointer;padding:0 2px;max-width:68px}
th.lote-th select option{color:#0b2239;background:#fff;text-transform:none;
letter-spacing:0}
.grid{display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{padding:15px 18px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.card-h h2{font-size:14.5px;font-weight:600;margin:0;line-height:1.4}
.card-h p{font-size:11.5px;color:var(--muted);margin:2px 0 0;line-height:1.5}
.card-b{padding:14px 18px 18px}
.kpis{grid-template-columns:repeat(5,1fr);margin-bottom:16px}
.kpi{padding:15px 17px}
/* Pedido de 25/08/2026: os quatro cartoes do topo de Contas viram links.
Sao BOTAO no HTML, e nao div com onclick: quem navega por teclado chega
neles com Tab, o Enter funciona e o leitor de tela anuncia que da para
clicar. O reset abaixo desfaz o que o navegador poe em button. */
.kpi-link{display:block;width:100%;text-align:inherit;font:inherit;color:inherit;
cursor:pointer;transition:box-shadow .15s,transform .15s}
.kpi-link:hover{box-shadow:0 4px 14px rgba(11,34,57,.13);transform:translateY(-1px)}
.kpi-link:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.kpi .lab{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#8B96A2}
.kpi .val{font-size:23px;font-weight:600;margin:7px 0 1px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .foot{font-size:11.5px;color:var(--muted);line-height:1.5}
.pos{color:var(--teal)} .negv{color:var(--neg)}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.3px;padding:3px 9px;border-radius:20px;background:var(--cinza-l);color:var(--muted);white-space:nowrap;display:inline-block;line-height:1.6}
.tag.ok{background:var(--teal-l);color:#146B4F}
.tag.bad{background:var(--neg-l);color:var(--neg)}
.tag.info{background:var(--tech-l);color:#1B5E9E}
table{width:100%;border-collapse:collapse}
th{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#8B96A2;font-weight:700;text-align:right;padding:0 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{text-align:left;padding-left:0}
td{padding:9px 10px;border-bottom:1px solid var(--line2);text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
td:first-child{text-align:left;padding-left:0;font-variant-numeric:normal}
table.tbl-center th{text-align:center}
table.tbl-center th:first-child{text-align:left}
table.tbl-center td{text-align:center}
table.tbl-center td:first-child{text-align:left;padding-left:0;font-variant-numeric:normal}
tbody tr:hover{background:#FAFBFD}
.grp-row td{background:#F4F7FA;font-weight:600;cursor:pointer}
.grp-row td:first-child{border-left:3px solid var(--azul)}
.chev{display:inline-block;width:13px;color:#9AA5B1;transition:transform .18s;font-size:10px}
.grp-row.open .chev{transform:rotate(90deg)}
.item-row td:first-child{padding-left:20px;color:#3D4B5A}
/* FASE 48, At. 5 (02/09/2026): o DIA DO MES virou um grupo de segundo
nivel, e precisa parecer um sem virar o de primeiro.
O .grp-row tem fundo cinza e a barra azul de tres pixels, e usar ele aqui
faria o dia disputar leitura com o FATURAMENTO logo acima. O sub-row fica
entre os dois: mais claro que o grupo, mais marcado que o item, com a
mesma setinha girando. */
.sub-row td{background:#FAFBFC;font-weight:600;cursor:pointer}
.sub-row td:first-child{border-left:3px solid var(--linha,#E2E5E9)}
.sub-row.open .chev{transform:rotate(90deg)}
.tot-row td{border-top:2px solid var(--azul);border-bottom:0;font-weight:700;padding-top:11px}
.acts{display:flex;gap:5px;justify-content:flex-end}
.ib{width:27px;height:27px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);background:#fff;transition:.15s}
.ib:hover{border-color:var(--tech);color:var(--tech);background:var(--tech-l)}
.ib.del:hover{border-color:var(--neg);color:var(--neg);background:var(--neg-l)}
.ib svg{width:14px;height:14px}
.edt{border:1px solid var(--tech);border-radius:6px;padding:4px 7px;width:100%;max-width:150px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.edt.l{text-align:left;max-width:100%}
.addbar{display:flex;gap:8px;align-items:center;padding:11px 0 0;flex-wrap:wrap}
.addbar input{border:1px solid var(--line);border-radius:7px;padding:7px 10px}
.hint{font-size:11.5px;color:#8B96A2;line-height:1.6}
.bar{height:6px;border-radius:3px;background:var(--line2);position:relative;overflow:hidden;min-width:64px;display:inline-block;vertical-align:middle}
.bar i{position:absolute;top:0;bottom:0;left:0;border-radius:3px}
.modal-bg{position:fixed;inset:0;background:rgba(4,44,83,.42);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.on{display:flex}
.modal-h{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-h h3{margin:0;font-size:15px;font-weight:600}
.modal-b{padding:20px;flex:1 1 auto;overflow-y:auto;min-height:0}
.modal-h,.modal-f{flex:0 0 auto}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:#FAFBFC}
.fdoc{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line2)}
.fdoc:last-child{border-bottom:0}
.fico{width:34px;height:34px;border-radius:8px;background:var(--neg-l);color:var(--neg);display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:none}
.fdoc b{display:block;font-size:13px;font-weight:500}
.fdoc span{font-size:11.5px;color:#8B96A2}
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;margin-bottom:14px}
.crumb button{color:var(--tech);font-weight:500}
.crumb button:hover{text-decoration:underline}
.crumb span{color:#8B96A2}
.dz{border:1.5px dashed var(--line);border-radius:10px;padding:26px 16px;text-align:center;color:#8B96A2;font-size:12.5px;transition:.15s;margin-top:14px}
.dz.hot{border-color:var(--tech);background:rgba(55,138,221,.06);color:var(--azul)}
.fico.pasta{background:rgba(55,138,221,.13);color:var(--tech)}
.cxItem{border:1px solid var(--line2);border-radius:10px;padding:14px;margin-bottom:12px}
.cxItem:last-child{margin-bottom:0}
.cxItemTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:11px}
.cxItemTop span{color:#8B96A2;font-weight:400}
.cxAviso{font-size:11.5px;color:#8B96A2;margin-top:2px}
.cxAviso.alerta{color:#B26A00}
.cxItemForm{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.cxItemForm label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:#8B96A2;font-weight:500}
.cxItemForm input,.cxItemForm select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:13px;font-family:inherit;background:#fff}
.cxItemAcoes{display:flex;gap:8px}
/* 27/08/2026: "faca caber em uma linha o pergunte ao assistente". Com a
coluna em 206px o rotulo quebrava em duas.
Tres ajustes pequenos, e nao um so: o recheio dos lados cai de 13 para 9,
o espaco entre a bolinha e o texto cai de 10 para 7, e a letra de 13 para
12,5. Somados, sobram os poucos pixels que faltavam. O nowrap fecha a
conta: se um dia a coluna encolher mais, o texto passa a ser cortado com
reticencias em vez de voltar para duas linhas. */
.fab{display:flex;gap:7px;align-items:center;justify-content:center;width:calc(100% - 24px);margin:0 12px 12px;padding:11px 9px;border-radius:8px;background:rgba(55,138,221,.16);border:1px solid rgba(55,138,221,.42);color:#DCEBFA;font-size:12.5px;font-weight:600;text-align:center;transition:.15s;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab:hover{background:rgba(55,138,221,.28);border-color:var(--tech);color:#fff}
.fab i{width:7px;height:7px;border-radius:50%;background:var(--tech);display:block;flex:none}
/* ---------- assistente ---------- */
.chat{position:fixed;right:0;top:0;bottom:0;width:412px;max-width:94vw;background:#fff;border-left:1px solid var(--line);z-index:70;transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-24px 0 60px -34px rgba(4,44,83,.5)}
.chat.on{transform:none}
.chat-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.chat-h h3{margin:0;font-size:15.5px;font-weight:600;line-height:1.4}
.chat-h p{margin:1px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.chat-b{padding:20px;overflow-y:auto;flex:1}
.msg{margin-bottom:16px;display:flex}
.msg.me{justify-content:flex-end}
.bub{padding:12px 15px;border-radius:13px;font-size:13px;line-height:1.65;max-width:88%}
.msg.me .bub{background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.msg.ai .bub{background:#F6F8FB;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.ai .bub b{color:var(--teal);font-weight:600}
.chat-f{padding:12px 20px 16px;border-top:1px solid var(--line)}
.chip{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:20px;font-size:12px;color:var(--muted);margin:0 6px 8px 0;background:#fff;line-height:1.5;text-align:left}
.chip:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-l)}
.ask{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:13px}
.ask:focus{border-color:var(--teal)}
.dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#B3BDC7;margin-right:4px;animation:bl 1.1s infinite}
.dots span:nth-child(2){animation-delay:.18s} .dots span:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.28}30%{opacity:1}}
@media(max-width:1250px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.side{position:static;height:auto}
.brand{padding-bottom:10px} .ws,.side-foot{display:none}
/* QA de 23/08/2026: aqui havia ".nav-label{display:none}", e .nav-label
deixou de existir quando a Fase 13 At. 12 renomeou o rotulo para
.nav-txt. A regra virou seletor morto e os SETE rotulos inteiros
ficaram numa linha so: medido em 873px de tela, a pagina pedia 1262 e
transbordava 389px para o lado. Aqui vale o rotulo CURTO, o mesmo do
celular, e a barra quebra em duas linhas em vez de empurrar a pagina. */
nav{display:flex;flex-wrap:wrap;padding:8px;gap:6px}
/* .nav-item .nav-curto e nao .nav-curto: a regra base ".nav-curto
{display:none}" mora MAIS ABAIXO no arquivo (dentro do bloco do
celular), e entre duas regras de mesmo peso vence a ultima. Com a
classe do pai junto, esta ganha por especificidade e para de depender
da ordem. Mesmo tropeco do incidente 24. */
.nav-item .nav-txt{display:none}
.nav-item .nav-curto{display:block}
.nav-item{white-space:nowrap;margin:0;width:auto}
html,body{overflow-x:hidden}
.kpis{grid-template-columns:repeat(2,1fr)}
.wrap,.top{padding-left:15px;padding-right:15px}
}
/* Confirmacao e aviso DENTRO da pagina (Fase 11, Atividade 6). Substituem
confirm/alert/prompt nativos, que congelam a automacao do navegador e nao
permitem explicar o que uma acao destrutiva faz. z-index acima do modal de
Documentos (80), porque da para pedir exclusao de dentro dele. */
.conf-bg{position:fixed;inset:0;background:rgba(4,44,83,.42);z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.conf-bg.on{display:flex}
.conf{background:#fff;border-radius:12px;max-width:470px;width:100%;box-shadow:0 24px 60px -20px rgba(4,44,83,.5);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.conf h3,.conf .conf-txt,.conf .conf-campo,.conf .conf-f,.conf .menu-acoes{flex:0 0 auto}
/* o miolo rola, o rodape com os botoes fica sempre alcancavel */
.conf .conf-corpo{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0}
.conf-f{border-top:1px solid var(--line);background:#fff}
#opBg .conf{max-width:520px}
/* precisa vencer a regra de id acima, por isso o seletor tambem tem id */
#opBg .conf.largo,.conf.largo{max-width:820px}
/* clicar fora nao fecha: balanca para dizer que precisa de resposta */
@keyframes confBalanca{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.conf.pede-resposta{animation:confBalanca .28s ease}
.modal{background:#fff;border-radius:12px;max-width:520px;width:100%;box-shadow:0 24px 60px -20px rgba(4,44,83,.5);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
.conf h3{margin:0;padding:18px 20px 0;font-size:15.5px;font-weight:600;color:var(--text)}
.conf-txt{padding:9px 20px 2px;font-size:13.5px;color:var(--muted);line-height:1.6}
.conf-campo{display:block;padding:10px 20px 2px}
.conf-campo span{display:block;font-size:11.5px;font-weight:600;color:var(--muted2);margin-bottom:5px}
.conf-campo input{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px 10px;background:#fff;color:var(--text);font-family:inherit;font-size:13px}
.conf-f{padding:16px 20px 18px;display:flex;gap:8px;justify-content:flex-end}
.btn-neg{background:var(--neg);color:#fff;border-color:var(--neg)}
.btn-neg:hover{background:#8E1F16;border-color:#8E1F16}
.avisos{position:fixed;right:18px;bottom:74px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:390px}
.aviso{white-space:pre-line;background:#fff;border:1px solid var(--line);border-left:3px solid var(--amb);border-radius:9px;box-shadow:0 12px 30px -12px rgba(4,44,83,.4);padding:11px 14px;font-size:13px;line-height:1.5;color:var(--text);cursor:pointer;animation:avisoEntra .16s ease-out}
.aviso.erro{border-left-color:var(--neg)}
.aviso.ok{border-left-color:var(--teal)}
@keyframes avisoEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Menu do avatar (Fase 11, Atividade 8). Padrao de mercado: configuracao
do sistema, imagem e saida moram sob a identidade, no canto superior
direito, e nao no menu lateral, que e de telas de trabalho. */
.avatar-wrap{position:relative}
.avatar{cursor:pointer;background-size:cover;background-position:center;overflow:hidden}
.avatar:hover{box-shadow:0 0 0 3px var(--tech-l)}
.menu-perfil{position:absolute;right:0;top:60px;z-index:130;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -14px rgba(4,44,83,.45);min-width:236px;padding:6px;display:none}
.menu-perfil.on{display:block}
/* Fase 13, At. 6 (22/08/2026): a empresa em cima, discreta, e o DESTAQUE
na pessoa. Ate aqui o menu so sabia de quem era o espaco de trabalho e
nunca dizia quem estava usando. */
.menu-perfil{min-width:300px;padding:0;overflow:hidden}
.mp-topo{display:flex;align-items:center;justify-content:space-between;
gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);
background:#FAFBFC}
.mp-topo span{font-size:12.5px;font-weight:600;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-sair{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);
padding:3px 6px;border-radius:6px;transition:.15s}
.mp-sair:hover{background:var(--neg-l);color:var(--neg)}
.mp-pessoa{display:flex;gap:14px;align-items:flex-start;padding:16px 14px 14px}
.mp-foto{flex:none;width:56px;height:56px;border-radius:50%;
background:var(--tech-l);color:var(--azul);display:grid;
place-items:center;font-weight:700;font-size:17px;
border:1px solid #C9E0F7;background-size:cover;
background-position:center;overflow:hidden}
.mp-dados{min-width:0;flex:1}
.mp-dados strong{display:block;font-size:16px;font-weight:600;
line-height:1.25;color:var(--text)}
.mp-dados>span{display:block;font-size:12px;color:var(--muted);
margin:2px 0 8px;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.mp-dados button{display:block;width:100%;text-align:left;padding:3px 0;
font-size:12.5px;color:var(--tech);text-decoration:underline;
text-underline-offset:3px;line-height:1.7}
.mp-dados button:hover{color:var(--azul)}
.mp-pe{border-top:1px solid var(--line);padding:6px}
.mp-pe button{display:block;width:100%;text-align:left;padding:9px 11px;
border-radius:7px;font-size:13px;color:var(--text);line-height:1.4}
.mp-pe button:hover{background:#F4F7FA}
/* Quem tem acesso */
.ac-linha{display:flex;align-items:center;gap:12px;padding:11px 0;
border-bottom:1px solid var(--line2)}
.ac-linha:last-child{border-bottom:0}
.ac-foto{flex:none;width:38px;height:38px;border-radius:50%;
background:var(--tech-l);color:var(--azul);display:grid;
place-items:center;font-weight:700;font-size:12.5px;
border:1px solid #C9E0F7}
.ac-dados{flex:1;min-width:0}
.ac-dados b{display:block;font-size:13.5px;font-weight:600}
.ac-dados span{display:block;font-size:11.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-papel{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.4px;
text-transform:uppercase;padding:3px 9px;border-radius:20px;
background:var(--cinza-l);color:var(--muted)}
.ac-papel.dono{background:var(--teal-l);color:var(--teal)}
.zona-perigo{border:1px solid #F0C7C2;border-radius:var(--r);background:#FDF7F6;padding:18px 20px}
.zona-perigo h3{margin:0;font-size:14.5px;font-weight:600;color:var(--neg)}
.zona-perigo p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.zona-perigo .field{margin:14px 0 0}
.linha-campos{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.linha-campos .field{margin:0}
.linha-campos .field input{width:100%}
.grade-perfil{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:1050px){.grade-perfil{grid-template-columns:1fr}}
.preview-imagem{width:74px;height:74px;border-radius:50%;background:var(--tech-l);color:var(--azul);display:grid;place-items:center;font-weight:700;font-size:20px;border:1px solid #C9E0F7;background-size:cover;background-position:center;flex:none}
/* Modal de operacao da conta (Fase 12, Atividade 1): a baixa passou a ter
cinco campos (desconto, juros, valor pago, forma e banco) e a
prorrogacao pede data. Nao cabia mais numa confirmacao de uma linha. */
.op-grade{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.op-grade .field{margin:0}
.op-grade .field input,.op-grade .field select{width:100%}
.op-larga{grid-column:1/-1}
.op-total{grid-column:1/-1;background:#F4F7FA;border-radius:8px;padding:10px 12px;font-size:13px;color:var(--text);display:flex;justify-content:space-between;align-items:center}
.op-total b{font-size:15px;font-variant-numeric:tabular-nums}
/* ---------- tela de entrada (Fase 13, Atividade 5) ----------
Cinco cartoes no mesmo lugar, um visivel por vez: entrar, criar conta,
confirmar o codigo do e-mail, pedir senha nova e redefinir. Ficam em
formularios separados de proposito: um formulario so, com campos
escondidos, faz o navegador salvar a senha errada e o Enter disparar a
acao errada. */
.lg-caixa{width:344px;max-width:100%}
.lg-cartao{background:#fff;border-radius:14px;padding:30px 26px;
box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lg-marca{display:flex;align-items:center;justify-content:center;gap:10px;
margin-bottom:20px}
/* 27/08/2026: "aumenta para o proximo tamanho o logo da Efata na tela de
login". Um passo, e nao dois: o cartao tem 344px e o logo divide a linha
com o nome do sistema. Passando de 52 o nome cai para a linha de baixo e
a marca deixa de ser uma coisa so. */
.lg-marca i{width:52px;height:52px}
.lg-marca b{font-weight:700;color:#042C53;font-size:15px;letter-spacing:.03em;
display:block;line-height:1.15}
.lg-marca span{font-size:11px;color:#888780;letter-spacing:.08em;display:block}
.lg-cartao label{display:block;font-size:12.5px;color:#042C53;font-weight:600;
margin-bottom:5px}
.lg-cartao input[type=text],.lg-cartao input[type=email],
.lg-cartao input[type=password]{width:100%;padding:10px 12px;border:1px solid #ddd;
border-radius:8px;margin-bottom:14px;font-size:14px;box-sizing:border-box;
font-family:inherit}
.lg-btn{width:100%;padding:11px;border:none;border-radius:8px;background:#1D9E75;
color:#fff;font-weight:600;font-size:14px;cursor:pointer;margin-top:6px;
font-family:inherit}
.lg-btn:disabled{opacity:.65;cursor:default}
.btn:disabled{opacity:.5;cursor:default}
.lg-esqueci{display:block;text-align:right;font-size:12px;color:#1D9E75;
text-decoration:none;font-weight:600;margin:-8px 0 12px}
.lg-esqueci:hover{text-decoration:underline}
/* 27/08/2026: esta caixa nunca tinha aparecido na tela, por causa do
defeito do lgAviso. Agora que ela aparece, ganha fundo e borda: um
texto vermelho solto acima do campo se confunde com rotulo. */
.lg-erro{background:#FDECEB;border:1px solid #F3C9C6;border-radius:8px;
padding:9px 11px;line-height:1.45;
display:none;color:#B3261E;font-size:12.5px;margin-bottom:10px;
line-height:1.5}
.lg-ok{display:none;color:#0F6B4C;font-size:12.5px;margin-bottom:10px;
line-height:1.5}
.lg-dica{font-size:11.5px;color:#6B7A88;line-height:1.55;margin:0 0 14px;
background:#F4F7FA;border-radius:8px;padding:9px 11px}
.lg-aceite{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;
color:#5A6B7C;line-height:1.5;margin:2px 0 10px}
.lg-aceite input{margin-top:2px;flex:none}
.lg-aceite a{color:#1D9E75;font-weight:600}
.lg-voltar{display:block;text-align:center;font-size:12.5px;color:#5A7184;
text-decoration:none;margin-top:14px;background:none;border:none;width:100%;
cursor:pointer;font-family:inherit}
.lg-voltar:hover{text-decoration:underline}
.lg-novo{margin-top:14px;background:rgba(255,255,255,.09);border-radius:10px;
padding:13px 16px;text-align:center;color:#C9DCEF;font-size:12.5px}
.lg-novo a{color:#fff;font-weight:700;text-decoration:underline;cursor:pointer}
.lg-rodape{margin-top:16px;text-align:center;font-size:11px;color:#8FA8C0;
line-height:1.9}
.lg-rodape a{color:#C9DCEF;text-decoration:underline}
.lg-rodape b{color:#C9DCEF}
.lg-rodape .versao{color:#6F87A0}
/* ===========================================================================
CELULAR (Fase 13, Atividade 12, 22/08/2026)
===========================================================================
Medido antes de mexer, num quadro de 390 pixels: a pagina ocupava 1262.
O culpado era o menu, que virava uma linha de sete botoes somando 1209
pixels, e coluna de grade tem a largura do conteudo mais largo.
O corte e em 760px e nao em 900: entre 760 e 900 esta o tablet deitado e
a janela estreita no computador, onde a lateral ainda cabe e a barra de
rodape seria estranha.
No celular a pessoa CONFERE e RESOLVE: olha o saldo, ve o que vence,
da baixa, fotografa a nota. Ninguem monta orcamento anual no celular,
entao o Planejamento mostra o resultado do mes e convida a abrir no
computador, em vez de uma tabela ilegivel. */
.nav-curto{display:none}
/* o Mais so existe na barra do rodape do celular: no computador os
sete menus cabem na lateral e uma gaveta a mais so atrapalha */
.nav-mais{display:none}
/* Fase 14, Atividade 4 (23/08/2026): estas duas se chamavam
.so-computador e .so-celular, e o nome mentia sobre a regra. Quem liga
e desliga estes blocos e a LARGURA da tela (max-width:760px), e nao o
aparelho: janela estreita no computador levava o tratamento de
"celular", tablet deitado levava o de "computador", e quem lia o HTML
ia procurar defeito no lugar errado. Agora o nome diz o que a regra
testa. */
.tela-estreita{display:none}
.top-cel{display:none}
@media(max-width:760px){
.tela-larga{display:none !important}
.tela-estreita{display:block}
/* ---- a lateral vira uma barra no rodape, onde o polegar alcanca ---- */
.side{background:transparent;height:auto;position:static;display:block}
.brand,.ws,.side-foot,.fab{display:none}
nav{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;
background:#fff;border-top:1px solid var(--line);gap:0;
padding:4px 2px calc(6px + env(safe-area-inset-bottom));
box-shadow:0 -2px 14px rgba(4,44,83,.10)}
.nav-item{flex:1;flex-direction:column;gap:2px;padding:5px 2px;margin:0;
border-radius:9px;min-height:48px;justify-content:center;
color:#8496A6;font-size:9px;font-weight:600;letter-spacing:0;
text-align:center;overflow:hidden}
.nav-item .ico{width:19px;height:19px}
.nav-item.on{background:transparent;color:var(--tech)}
.nav-txt{display:none}
.nav-curto{display:block;line-height:1.15;max-width:100%;
overflow:hidden;text-overflow:ellipsis}
/* cinco itens na barra. Sete nao cabem com dignidade em 390 pixels,
entao Cadastros e Onboarding vao para a folha Mais.
QA de 08/09/2026: a Projecao saiu daqui porque ela NAO E MAIS UM ITEM
DE MENU. A Fase 60 apagou a tela cheia, o item e o galho da navegacao,
e ela virou gaveta do Orcamento. A propria Fase 60 apagou a regra de
CSS da Fase 59 que escondia esse item, com a frase certa escrita ao
lado: "esconder um elemento que nao existe mais e folha de estilo
falando de fantasma". Esta segunda regra, do bloco do celular, ficou
falando com o mesmo fantasma. */
.nav-item[data-go="parceiros"],
.nav-item[data-go="onboarding"]{display:none}
/* Fase 19, At. 1: no celular o menu e a barra do rodape, com cinco
botoes de um dedo de largura. Nao ha lugar para gaveta, entao ela some
e o pai volta a navegar direto (ver _telaEstreita em genesis.js). O
nav-grupo vira o proprio botao, para nao quebrar o flex da barra. */
.nav-sub{display:none}
.nav-pai .nav-seta{display:none}
.nav-grupo{flex:1;display:flex}
.nav-grupo[id="grupo-parceiros"]{display:none}
.nav-mais{display:flex}
/* espaco para a barra nao cobrir o fim do conteudo */
.wrap{padding:14px 12px calc(78px + env(safe-area-inset-bottom))}
.top{padding:12px 12px 0}
.top-row{gap:10px}
.top h1{font-size:17px}
/* ---- nada pode empurrar a pagina para os lados ---- */
html,body{overflow-x:hidden}
.app{grid-template-columns:1fr}
.card-h{padding:13px 14px 0}
.card-b{padding:12px 14px 14px}
.kpis{grid-template-columns:repeat(2,1fr);gap:9px}
.kpi{padding:11px 12px}
.kpi .val{font-size:17px;margin:4px 0 1px}
.kpi .lab{font-size:9px;letter-spacing:.5px}
.kpi .foot{font-size:10px}
.ribbon{gap:6px;padding-bottom:4px;scroll-snap-type:x proximity}
.ribbon>*{flex:none;scroll-snap-align:center}
.ribbon-legend{font-size:9.5px;gap:10px}
.linha-campos,.pc-busca{gap:9px}
.field{min-width:0}
.field.grow{min-width:0}
/* ---- toque: alvo de 44 e fonte de 16 ----
Abaixo de 16px o iPhone da zoom sozinho ao tocar no campo, e o layout
salta para o lado. Nao e preciosismo, e a diferenca entre usavel e
irritante. */
/* QA de celular de 23/08/2026: a lista de tipos deixava de fora todo
SEM atributo type, e havia 21 deles (o campo do chat, o valor
recebido, o valor orcado, os da Projecao e todos os de edicao em linha
do Planejamento). "input[type=text]" so casa com quem tem o atributo
escrito; sem ele o campo e texto em tempo de execucao mas invisivel
para o seletor. Agora a regra exclui quem NAO pode entrar, em vez de
listar quem entra: caixa de marcar e radio se deformariam com 44px de
altura, e campo de arquivo abre o seletor do sistema, sem teclado. */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select,textarea{font-size:16px !important;min-height:44px}
.field select,.field input{min-width:0;width:100%;padding:10px 12px}
.btn{min-height:44px;padding:10px 14px;font-size:13.5px}
.ib{width:auto;min-width:44px;min-height:44px}
/* ---- o modal vira folha que sobe ---- */
.conf-bg{align-items:flex-end;padding:0}
.conf{max-width:100%;border-radius:16px 16px 0 0;
max-height:calc(100vh - 40px)}
.conf h3{padding:16px 16px 0}
.conf-txt,.conf-campo{padding-left:16px;padding-right:16px}
.conf-f{padding:13px 16px calc(16px + env(safe-area-inset-bottom));
flex-direction:column-reverse;gap:8px}
.conf-f .btn{width:100%}
.op-grade{grid-template-columns:1fr}
/* ---- tabela larga vira um cartao por linha ----
A tecnica exige que cada celula diga o que ela e, no atributo data-r.
Sem isso o cartao viraria uma pilha de numeros sem rotulo. */
.tab-cartao thead{display:none}
/* At. 17 vale para o computador. No app a tabela vira cartao, nao tem
cabecalho para congelar, e caixa que rola dentro de tela que rola e o
jeito mais rapido de prender o dedo do usuario. */
.table-wrap{max-height:none;overflow-y:visible}
.tab-cartao,.tab-cartao tbody,.tab-cartao tr,.tab-cartao td{display:block;
width:auto}
.tab-cartao tr{background:#fff;border:1px solid var(--line);
border-radius:12px;margin-bottom:9px;padding:11px 13px}
.tab-cartao td{border:none;padding:3px 0;text-align:left !important}
.tab-cartao td:empty{display:none}
.tab-cartao td[data-r]::before{content:attr(data-r);display:block;
font-size:9px;font-weight:700;letter-spacing:.06em;color:#8B96A2;
text-transform:uppercase;margin-bottom:1px}
.tab-cartao td.num{font-size:16px;font-weight:700;
font-variant-numeric:tabular-nums}
.tab-cartao .acts{justify-content:stretch;flex-wrap:wrap;gap:7px;
margin-top:9px}
/* o titulo do botao vira o rotulo visivel: no computador ele e a dica
que aparece ao passar o mouse, e no celular nao existe passar o
mouse, entao um icone sozinho vira adivinhacao */
.tab-cartao .acts .ib{flex:1 1 auto;justify-content:center;gap:6px;
display:inline-flex;align-items:center;padding:0 12px;
grid-template-columns:none;color:var(--text)}
.tab-cartao .acts .ib::after{content:attr(title);font-size:12px;
font-weight:600}
.tab-cartao .acts .ib.ok{border-color:var(--teal);color:#146B4F;
background:var(--teal-l)}
.table-foot{padding-top:9px;font-size:11px}
/* ---- tabela que NAO virou cartao rola dentro da propria caixa ----
Medido em 23/08/2026: sem isto, a tabela da Projecao chegava a 450px
e a de Fornecedores e Clientes a 412px numa tela de 390, e o
overflow-x:hidden do corpo cortava o resto sem deixar rolar. O
usuario perdia coluna e nao tinha como saber. */
table:not(.tab-cartao){display:block;max-width:100%;
overflow-x:auto;-webkit-overflow-scrolling:touch}
/* dica que nao quebrava linha esticava ate 512px numa tela de 390 */
.dica{max-width:100%;white-space:normal;overflow-wrap:anywhere}
/* alvo de toque: a propria At. 12 definiu 44px, e estes quatro ficaram
abaixo (o botao de exercicio com 30px, os atalhos do chat com 34px) */
#btnExercicios,.chip{min-height:44px}
/* ---- o aviso do Planejamento ---- */
.aviso-tela{background:#fff;border:1px solid var(--line);border-radius:14px;
padding:22px 18px;text-align:center;margin-top:14px}
.aviso-tela .ico{width:46px;height:46px;border-radius:12px;
background:var(--tech-l);color:#2C5F91;display:flex;align-items:center;
justify-content:center;margin:0 auto 11px}
.aviso-tela .ico svg{width:23px;height:23px}
.aviso-tela h3{margin:0 0 6px;font-size:15px;color:var(--azul)}
.aviso-tela p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.65}
/* ---- Documentos: a camera ---- */
.botao-camera{display:flex;width:100%;align-items:center;
justify-content:center;gap:9px;margin-top:12px;min-height:52px;
font-size:14.5px}
.botao-camera svg{width:22px;height:22px}
.dz{padding:18px 14px;font-size:12px}
/* =====================================================================
Fase 13, Atividade 20 (23/08/2026): CASCA DE APLICATIVO.
O que estava errado, medido em 390x844 nas nove telas: o botão do
Espaço de trabalho era conteúdo comum, então ele caia em lugar
diferente em cada aba (x variava 288px e y variava 231px); o menu
dele abria alinhado à direita de um ancoradouro colado na borda
esquerda, e 236px do menu ficavam FORA da tela; o rodapé do
assistente ficava atrás da barra de baixo; ícone de 19px e rótulo
de 9px na navegação; o botão + com 30px de largura; e 134
elementos de texto abaixo de 12px.
Tudo daqui para baixo vive DENTRO deste media query. A visão de
computador não muda em nada.
===================================================================== */
/* ---- a barra de cima passa a ser fixa, como em aplicativo ----
.top sai do sticky e vira caixa comum com um vao do tamanho da barra,
senão a fita de meses subiria para baixo dela. */
:root{--barra-app:56px; --nav-app:59px}
.top{position:static;z-index:auto;
padding:calc(var(--barra-app) + 1px + env(safe-area-inset-top)) 12px 0}
.top-row{position:fixed;top:0;left:0;right:0;z-index:950;
box-sizing:content-box;min-height:var(--barra-app);
display:flex;align-items:center;flex-wrap:nowrap;gap:10px;
padding:env(safe-area-inset-top) 12px 0;
background:#fff;border-bottom:1px solid var(--line);
box-shadow:0 1px 10px rgba(4,44,83,.07)}
/* display:contents dissolve os invólucros e deixa os quatro elementos
que interessam virarem filhos diretos da barra. Sem isso seria
preciso mover DOM, e mover DOM quebraria a visão de computador. */
.top-row > div:first-child{display:contents}
.titulo-linha{display:contents}
.top-act{display:contents}
.avatar-wrap{order:1;flex:none;width:44px;height:44px;
display:flex;align-items:center;justify-content:center}
.avatar{width:32px;height:32px;font-size:12px;
box-shadow:0 0 0 3px rgba(19,91,158,.12)}
#pgTitle{order:2;flex:1 1 auto;min-width:0;margin:0;
font-size:16px;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exerc-topo{order:3;flex:none}
#seloExercicio{order:4;flex:none}
/* ---- o menu do avatar abre pela ESQUERDA e cabe na tela ----
Ele estava alinhado à direita de um ancoradouro que no celular fica
colado na borda esquerda, e por isso saia 236px pela esquerda. */
.menu-perfil{left:0;right:auto;top:calc(100% + 6px);
width:calc(100vw - 24px);min-width:0;max-width:calc(100vw - 24px)}
/* ---- o subtítulo e os botões de arquivo, agora no corpo ---- */
.top-cel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
padding:11px 0 0}
.top-cel:empty{display:none}
.top-cel #pgSub{flex:1 1 100%;margin:0}
.top-cel .btn{flex:1 1 auto}
/* ---- nada de conteúdo atrás da barra de baixo ----
O assistente e fixo e o rodape dele terminava debaixo da navegacao. */
.wrap{padding-bottom:calc(var(--nav-app) + 16px + env(safe-area-inset-bottom))}
.chat-f{padding-bottom:calc(var(--nav-app) + 16px + env(safe-area-inset-bottom))}
/* ---- navegação de baixo no tamanho de mercado ----
Material 3 usa rótulo de 12px e ícone de 24px; Apple usa 24px. Com
19 e 9 a barra parecia desproporcional. O item continua com 48px de
altura mínima, então a barra NAO cresce: 24+2+13 = 39, ainda abaixo
dos 48. */
.nav-item{font-size:11px}
.nav-item .ico{width:24px;height:24px}
/* ---- alvo de 44 no botão de exercício ---- */
#btnExercicios{min-width:44px;width:44px;padding:0}
/* ---- a fita de meses com cara de app, e não de janela ---- */
.ribbon{scrollbar-width:none;-ms-overflow-style:none}
.ribbon::-webkit-scrollbar{display:none;width:0;height:0}
/* ---- piso de 12px no texto ----
As bolinhas da legenda têm 6px e estão CERTAS: elas são forma, não
texto, e ficam de fora de propósito. */
th{font-size:12px}
small{font-size:12px}
p{font-size:12.5px}
label{font-size:12px}
.lab,.foot{font-size:12px}
.kpi .lab{font-size:12px;letter-spacing:.4px}
.kpi .foot{font-size:12px}
.cat-chip{font-size:12px}
.dica{font-size:12px}
.hint{font-size:12.5px}
.audit{font-size:12px}
.tag{font-size:12px}
.table-foot{font-size:12px}
.versao{font-size:12px}
.ribbon-legend{font-size:12px}
.ribbon-legend i{font-size:0}
.tab-cartao td{font-size:12.5px}
.tab-cartao td[data-r]::before{font-size:12px}
.desc span{font-size:12px}
/* Estas seis perderam a primeira rodada por especificidade: cada uma
tem um seletor mais pesado escrito antes no arquivo, e regra de
mesmo peso escrita depois nao vence peso maior. Medido de novo em
23/08/2026 e conferido tela por tela. */
.field label{font-size:12px}
.card-h p{font-size:12.5px}
.mo small{font-size:12px}
.stat .lab{font-size:12px}
.desc span.tag,.tag{font-size:12px}
.sep-row td{font-size:12px}
.cxItemForm label{font-size:12px}
.ac-papel{font-size:12px}
.conf-campo span{font-size:12px}
/* ---- alvo de toque de 44px (item 9) ----
Medido em 23/08/2026: as abas de pilula tinham 29px de altura na
Tesouraria e em Contas, a calculadora tinha 36x36 e o caminho de
pastas dos Documentos tinha 18px. O que cresce e a AREA de toque,
nao o desenho: a pilula continua com a mesma cara, com mais espaco
em volta do texto. */
.pill-tabs button{min-height:44px;padding-top:0;padding-bottom:0;
display:inline-flex;align-items:center}
.ib-calc{min-width:44px;min-height:44px}
.crumb button,.crumb a{min-height:44px;display:inline-flex;align-items:center}
}
/* ---- a folha Mais ---- */
.folha-bg{position:fixed;inset:0;background:rgba(4,22,40,.45);z-index:1000;
display:none;align-items:flex-end}
.folha-bg.on{display:flex}
.folha{background:#fff;border-radius:18px 18px 0 0;width:100%;
padding:14px 15px calc(18px + env(safe-area-inset-bottom));
max-height:86vh;overflow-y:auto}
.folha .puxador{width:38px;height:4px;background:#D5DEE7;border-radius:99px;
margin:0 auto 13px}
.folha h3{margin:0 0 2px;font-size:16px;color:var(--azul)}
.folha .folha-sub{margin:0 0 13px;font-size:11.5px;color:var(--muted)}
.folha-lista{display:flex;flex-direction:column;gap:8px}
.folha-lista button{display:block;width:100%;text-align:left;background:#fff;
border:1px solid var(--line);border-radius:11px;padding:12px 13px;
min-height:56px;font-family:inherit;cursor:pointer}
.folha-lista button b{display:block;font-size:14px;font-weight:600;
color:var(--azul);line-height:1.3}
.folha-lista button span{display:block;font-size:11.5px;color:var(--muted);
margin-top:2px;line-height:1.45}
.folha-lista button.sair b{color:var(--neg)}
/* Escolha estruturada dentro do pop-up (Fase 13, At. 10). Cada opção
carrega o nome e o que ela faz, porque "excluir informações" e
"excluir a conta" são parecidos no rótulo e opostos na consequência.
min-width:0 no rádio de propósito: a regra de .field input mora mais
tarde no arquivo e já esticou caixa de seleção duas vezes aqui. */
.ex-op{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:#fff}
.ex-op + .ex-op{margin-top:9px}
.ex-op:hover{border-color:var(--tech)}
.ex-op.sel{border-color:var(--azul);background:#F4F9FF}
.ex-op input[type=radio]{flex:none;width:16px;height:16px;min-width:0;margin:3px 0 0;accent-color:var(--azul);cursor:pointer}
.ex-op strong{display:block;font-size:14px;color:var(--azul);font-weight:600}
.ex-op em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.ex-op.travada{opacity:.62;cursor:not-allowed}
.ex-op.travada:hover{border-color:var(--line)}
/* =========================================================================
Fase 19, At. 4 a 8 e 12 (26/08/2026): a lista com cara de Excel
========================================================================= */
.lista-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.btn-barra{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;
white-space:nowrap}
.btn-barra svg{width:14px;height:14px;flex:0 0 auto}
.btn-barra.ligado{border-color:var(--teal);color:var(--teal);background:var(--teal-l)}
/* Botao so de icone: sem texto dentro, o padding de 12px de cada lado
deixava o funil boiando no meio de um retangulo largo. Aqui ele fica
quadrado, com a mesma altura dos vizinhos da barra. */
.btn-barra.btn-so-icone{padding-left:9px;padding-right:9px;gap:0}
/* =======================================================================
FASE 46 (01/09/2026): a barra do topo vira uma fileira de ICONES.
Do prototipo que ele aprovou. Cada botao vira um quadrado de 34px com o
desenho no meio, e o nome aparece quando o mouse para em cima.
O TEXTO NAO E APAGADO, ele e escondido: font-size:0 no botao e tamanho de
volta no svg. Apagar o texto do HTML tiraria o nome do botao de quem usa
leitor de tela, e um botao sem nome e um botao que so quem enxerga
consegue usar. Foi por isso que o Limpar e o Atualizar, que ja eram so
icone antes desta fase, ganharam aria-label na epoca.
======================================================================= */
.btn-icone{font-size:0 !important;width:34px;height:34px;padding:0 !important;
gap:0 !important;display:inline-grid;place-items:center;flex:0 0 auto}
.btn-icone svg{width:16px !important;height:16px !important;
margin:0 !important;vertical-align:middle}
/* o painel de colunas prende no botao, e nao no canto da tela: a lista
pode estar rolada e o painel tem que nascer onde o dedo clicou */
.col-wrap{position:relative}
.col-painel{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;
min-width:230px;max-height:320px;overflow-y:auto;background:#fff;
border:1px solid var(--line);border-radius:10px;padding:8px;
box-shadow:0 18px 40px -22px rgba(4,44,83,.45)}
.col-painel.on{display:block}
.col-painel-h{font-size:11px;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted);padding:4px 8px 8px}
.col-linha{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;
font-size:13px;cursor:pointer;line-height:1.4}
.col-linha:hover{background:#F6F8FB}
.col-linha input{flex:0 0 auto;margin:0}
.col-painel-f{border-top:1px solid var(--line);margin-top:6px;padding-top:8px}
.col-painel-f .btn{width:100%;font-size:12px;padding:6px 10px}
/* arrastar coluna: o alvo se anuncia com um fio, e nao com fundo colorido,
porque fundo colorido no cabecalho ja quer dizer "coluna ordenada" */
th.col-arrastando{opacity:.45}
th.col-alvo{box-shadow:inset 2px 0 0 var(--teal)}
/* ---------- At. 12: uma barra de rolagem so ----------
Video das 10:44. "Percebe que ele tem essa barra aqui e tem essa outra
barra aqui... e ele nao esta do tamanho da tela, ele corta aqui. Tem que
fazer com que ele estenda ate o final da tela e tenha apenas uma barra."
Eram duas porque a tabela rolava dentro do .table-wrap E a pagina rolava
por fora. Agora quem rola na horizontal e SO o .table-wrap, e a largura
dele vai ate o fim do cartao. A vertical fica com a pagina, e o
cabecalho gruda pelo position:sticky, que e o "painel congelado". */
/* Achado no QA em producao, 26/08. A primeira versao desta regra usava
overflow-x:auto com overflow-y:visible para tirar a segunda barra. Nao
funciona: o navegador nao aceita rolar so um eixo, e overflow-y vira
auto sozinho. Resultado: o quadro passava a ser o dono da rolagem, mas
sem altura, entao o position:sticky do cabecalho nunca disparava e o
cabecalho subia junto com a pagina. Medido: rolando ate o fim, o topo do
TH ia para -841px.
Agora o quadro rola nos DOIS eixos e tem altura, que e o modelo do
Field: o cabecalho gruda no topo DELE, a barra horizontal fica no pe
DELE (e por isso nao some quando se desce) e a pagina nao rola por
baixo. A altura vem do JS, medida ate o fim da tela, porque "vai ate o
fim da tela" e uma medida da janela e nao um numero que se chuta. */
.table-wrap{overflow:auto;width:100%}
.table-wrap>table{min-width:100%}
.main,.screen,.card{max-width:100%}
.card{overflow:visible}
thead th{position:sticky;top:0;z-index:5;background:#fff}
/* ---------- Fase 19, At. 9: a gaveta lateral ---------- */
/* Fase 19, 26/08, terceira referencia: "esta tela e referente ao
lancamento de novas contas a pagar; quando clicar no botao novo
lancamento tem que aparecer uma tela similar a esta, da direita para a
esquerda". Na tela dele a gaveta cobre dois tercos da janela, e nao um
terco: formulario de lancamento tem campo demais para caber estreito, e
foi disso que ele reclamou quando ele abria embaixo. */
.gaveta-lado{display:block;position:fixed;right:0;top:0;bottom:0;width:min(66vw,1040px);min-width:min(94vw,720px);z-index:75;
margin:0;border-radius:0;border-left:1px solid var(--line);
overflow-y:auto;transform:translateX(102%);
transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:-24px 0 60px -34px rgba(4,44,83,.5)}
.gaveta-lado.on{transform:none}
.gaveta-fundo{position:fixed;inset:0;background:rgba(4,44,83,.22);z-index:74;
opacity:0;pointer-events:none;transition:opacity .28s}
.gaveta-fundo.on{opacity:1;pointer-events:auto}
/* ---------- Fase 19, At. 10: o menu encolhido ----------
As mesmas regras que a tela de 1250px ja usava, agora tambem por
escolha da pessoa. Reaproveitar em vez de escrever um segundo jeito de
encolher: dois jeitos discordariam no dia em que um deles mudasse. */
.menu-fino-btn{display:flex;align-items:center;gap:9px;margin:0 12px 8px;padding:8px 11px;
border-radius:8px;color:#8FA8C0;font-size:12px;font-weight:500;white-space:nowrap;
transition:background .15s,color .15s}
.menu-fino-btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .2s}
.menu-fino-btn:hover{background:rgba(255,255,255,.07);color:#fff}
body.menu-fino .app{grid-template-columns:74px 1fr}
body.menu-fino .side .ws,
body.menu-fino .side-foot,
body.menu-fino .brand span,
body.menu-fino .fab,
body.menu-fino .nav-txt,
body.menu-fino .nav-curto,
body.menu-fino .nav-sub,
body.menu-fino .nav-pai .nav-seta,
body.menu-fino .menu-fino-btn span{display:none}
body.menu-fino .nav-item{justify-content:center;padding:11px 0}
body.menu-fino .menu-fino-btn{justify-content:center;padding:9px 0;margin:0 10px 8px}
body.menu-fino .menu-fino-btn svg{transform:rotate(180deg)}
body.menu-fino .brand{justify-content:center}
@media(max-width:900px){
body.menu-fino .app{grid-template-columns:1fr}
body.menu-fino .nav-curto{display:block}
.menu-fino-btn{display:none}
.gaveta-lado{width:100vw}
}
/* ---------- Fase 19, At. 11: pesquisa no alto e paginacao no rodape ---- */
.busca-topo{display:flex;align-items:center;gap:8px;margin:0 12px 10px;padding:8px 11px;
border-radius:8px;background:rgba(255,255,255,.08);color:#9FB6CC}
.busca-topo svg{width:14px;height:14px;flex:0 0 auto}
.busca-topo input{flex:1;min-width:0;background:transparent;border:0;color:#fff;
font-size:12.5px;padding:0;outline:none}
.busca-topo input::placeholder{color:#7E96AE}
.busca-topo:focus-within{background:rgba(255,255,255,.14)}
body.menu-fino .busca-topo{display:none !important}
.tab-paginacao{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:11px 0 2px;border-top:1px solid var(--line);margin-top:10px;
font-size:12.5px;color:var(--muted)}
.tab-paginacao label{display:inline-flex;align-items:center;gap:7px}
.tab-paginacao select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;
font-size:12.5px;background:#fff}
.pg-botoes{margin-left:auto;display:inline-flex;gap:6px}
.pg-botoes .btn{padding:4px 12px;font-size:15px;line-height:1.2}
.pg-botoes .btn:disabled{opacity:.4;cursor:default}
@media(max-width:900px){.busca-topo{display:none}}
/* =========================================================================
Fase 19, At. 14, 22, 23 e 24: a gaveta de filtros
=========================================================================
Desenhada em cima da tela que ele mandou: painel branco encostado na
direita, titulo "Filtros" com o X, campo de busca por filtro, e um bloco
recolhivel por pergunta, cada um com o punho de arrasto e a setinha. */
.gaveta-filtro{position:fixed;right:0;top:0;bottom:0;width:min(340px,92vw);z-index:78;
background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;
transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
box-shadow:-24px 0 60px -34px rgba(4,44,83,.5)}
.gaveta-filtro.on{transform:none}
.gf-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:16px 18px;border-bottom:1px solid var(--line)}
.gf-topo h3{margin:0;font-size:15.5px;font-weight:600}
.gf-topo button{font-size:20px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px}
.gf-topo button:hover{background:#F0F3F7;color:var(--azul)}
.gf-busca{padding:12px 14px 4px}
.gf-busca input{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:8px;
font-size:12.5px}
.gf-busca input:focus{border-color:var(--teal);outline:none}
.gf-lista{flex:1;overflow-y:auto;padding:8px 14px 14px}
.gf-pe{padding:12px 14px;border-top:1px solid var(--line)}
.gf-pe .btn{width:100%}
.flt-bloco{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;overflow:hidden}
.flt-cab{display:flex;align-items:center;gap:4px;width:100%;
padding:2px 6px 2px 0;background:#FAFCFE}
.flt-titulo{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
text-align:left;padding:10px 6px 10px 11px;font-size:12.8px;font-weight:600;
color:var(--azul)}
.flt-cab:hover{background:#F2F6FA}
.flt-nome{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flt-arrasta{color:#C2CDD8;font-size:12px;letter-spacing:-1px;cursor:grab}
/* estava saindo como um traco solto entre o titulo e a estrela: pequena
demais e cinza demais para se ler como seta */
.flt-seta{color:#8FA0B0;font-size:14px;line-height:1;flex:0 0 auto;
transition:transform .16s;margin-left:2px}
.flt-bloco.fechado .flt-seta{transform:rotate(-90deg)}
.flt-corpo{padding:11px;border-top:1px solid var(--line)}
.flt-bloco.fechado .flt-corpo{display:none}
/* o campo emprestado da faixa antiga chega com a largura dela */
.flt-corpo .field{width:100%;flex:1 1 auto;min-width:0;margin:0}
.flt-corpo .field input,.flt-corpo .field select{width:100%}
.flt-datas{display:flex;gap:7px;margin-bottom:9px}
.flt-datas input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);
border-radius:7px;font-size:12.2px}
.flt-radio{display:flex;align-items:center;justify-content:space-between;gap:9px;
padding:6px 3px;font-size:12.5px;cursor:pointer;line-height:1.4}
.flt-radio:hover{color:var(--azul)}
.flt-zerar{width:100%;margin-top:8px;padding:6px 10px;border:1px solid var(--line);
border-radius:7px;font-size:11.5px;color:var(--muted);background:#fff}
.flt-zerar:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:900px){.gaveta-filtro{width:100vw}}
/* =========================================================================
Fase 19, print de 26/08: o topo do Contas a Pagar
========================================================================= */
/* =========================================================================
Fase 19, print de 26/08: o topo do Contas a Pagar
=========================================================================
Cinco tentativas empilhadas se contradiziam neste ponto do arquivo, cada
uma tentando apertar mais que a anterior. Foram todas apagadas e este
bloco e a versao unica. Fica registrado por que, porque o proximo que
mexer aqui vai ser tentado a apertar de novo.
A CONTA, MEDIDA EM PRODUCAO e nao estimada: em 1536px de tela o
cabecalho tem 1256px uteis e precisa de 1383 para por numa linha o
titulo (151), os quatro cartoes (466) e os oito botoes com o avatar
(824). Faltam 127px. Depois de apertar o menu de 268 para 236, o padding
dos botoes e o dos cartoes, o unico corte que restava era no proprio
numero, e numero cortado mente: "R$ 3.134,..." nao e uma informacao.
Entao a regra e por LARGURA. A partir de 1700px o topo e a linha unica
da foto dele. Abaixo disso os cartoes descem para uma segunda linha,
inteiros, com o titulo e os botoes na primeira. O monitor dele, com o
menu estreito, cai no primeiro caso.
O rotulo do cartao PODE quebrar em duas linhas: na foto dele "TOTAL A
PAGAR (ABERTO)" esta em duas. O que nunca quebra nem encolhe e o VALOR.
========================================================================= */
.top-kpis{display:flex;align-items:center;gap:8px;min-width:0}
.top-kpis .kpis{display:flex;gap:8px;margin:0;grid-template-columns:none;flex-wrap:wrap}
.top-kpis .kpi{padding:5px 10px;min-width:0;flex:0 1 auto;text-align:center;
border-radius:10px}
.top-kpis .kpi .lab,.top-kpis .kpi>span:first-child{font-size:9px;letter-spacing:.04em;
white-space:normal;line-height:1.25}
.top-kpis .kpi .val,.top-kpis .kpi b{font-size:16px;line-height:1.2;white-space:nowrap}
.top-kpis .kpi small,.top-kpis .kpi .sub{font-size:9.5px;white-space:nowrap}
/* Na tela de Contas o cartao da tabela nao tem cabecalho, as abas e o mes
saem da tela e a lista comeca direto, como na foto. As abas viraram o
submenu do lado e o mes virou um bloco da gaveta de filtros: nenhuma das
duas foi apagada, as duas mudaram de porta. */
body.tela-contas #s-contas>.period-row,
body.tela-contas #s-contas .card>.card-h,
body.tela-contas #pgSub{display:none}
body.tela-contas #pgTitle{font-size:21px;white-space:nowrap}
body.tela-contas #s-contas .card-b.table-wrap{padding-top:6px}
/* menu um pouco mais estreito devolve 32px para o cabecalho, e os rotulos
continuam cabendo numa linha */
body.tela-contas .app{grid-template-columns:206px 1fr}
body.tela-contas .wrap,body.tela-contas .top{padding-left:22px;padding-right:22px}
/* botoes compactos, mas nunca menores que o dedo */
body.tela-contas .top-act{flex-wrap:nowrap;gap:5px;margin-left:auto}
body.tela-contas .btn-barra,
body.tela-contas #btnRelatorio,
body.tela-contas #btnTemplate{padding:6px 8px;font-size:11.5px;gap:5px}
body.tela-contas .btn-barra svg,
body.tela-contas #btnRelatorio svg,
body.tela-contas #btnTemplate svg{width:13px;height:13px;margin-right:4px}
/* FASE 46: em Contas a regra de cima encolhia os botoes para caber oito
deles com texto. Com icone nao ha o que encolher, e deixar as duas
regras brigando faria o icone de Contas nascer menor que o das outras
telas, sem ninguem ter pedido. */
body.tela-contas .btn-icone{padding:0 !important;font-size:0 !important}
body.tela-contas .btn-icone svg{width:16px !important;height:16px !important;
margin:0 !important}
body.tela-contas #contasNew{padding:7px 12px;font-size:12px;white-space:nowrap;
margin-left:4px}
/* 27/08/2026, primeiro pedido: "aumente para um numero acima o tamanho do
icone onde fica a foto e as configuracoes do menu".
Depois ele deu a medida exata, olhando a tela: "siga o exemplo de tamanho
que esta no menu planejamento orcamentario para todos os menus". Ou seja,
nao e um numero novo: e o tamanho que o icone SEMPRE teve, e que so as
telas de lista encolhiam para caber na linha do topo. Com o periodo e os
cartoes reorganizados hoje, a linha tem folga e o encolhimento perdeu o
motivo. Os valores abaixo sao os mesmos de .avatar la em cima. */
body.tela-contas .avatar{width:52px;height:52px;font-size:17px}
/* abaixo de 1700 os cartoes vao para a segunda linha, INTEIROS */
body.tela-contas .top-row{flex-wrap:wrap;align-items:center;gap:10px 12px}
body.tela-contas .top-row>div:first-child{order:1}
body.tela-contas .top-act{order:2}
body.tela-contas .top-kpis{order:3;flex:1 1 100%;justify-content:flex-start}
@media(min-width:1700px){
/* a linha unica da foto dele */
body.tela-contas .top-row{flex-wrap:nowrap}
body.tela-contas .top-kpis{order:2;flex:0 1 auto}
body.tela-contas .top-act{order:3}
body.tela-contas .top-kpis .kpis{flex-wrap:nowrap}
}
@media(max-width:1100px){
.top-kpis{display:none !important}
body.tela-contas #s-contas>.period-row{display:flex}
body.tela-contas .app{grid-template-columns:1fr}
}
/* =========================================================================
Fase 19, 26/08: a setinha do menu e o menu so de icones
========================================================================= */
/* A setinha mora na BORDA da coluna azul, meio dentro meio fora, que e
onde os sites modernos a colocam: ali ela e achada sem procurar e nao
disputa espaco com nenhum item do menu. */
.menu-aba{position:absolute;top:78px;right:-13px;z-index:30;
width:26px;height:26px;border-radius:50%;
background:#fff;border:1px solid var(--line);color:var(--azul);
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 8px -2px rgba(4,44,83,.35);transition:transform .2s,box-shadow .15s}
.menu-aba svg{width:13px;height:13px}
.menu-aba:hover{box-shadow:0 4px 12px -3px rgba(4,44,83,.45)}
.side{position:sticky}
aside.side,.side{position:sticky}
.app>.side{position:sticky}
body.menu-fino .menu-aba svg{transform:rotate(180deg)}
/* Encolhido: a coluna fica com a largura do LOGO, e nao menos que isso.
Ele pediu "esconda a barra ate o logo da Efata sem cortar o logo": 74px
cortava a marca, entao a medida passou a ser a do proprio simbolo mais o
respiro dos dois lados. */
body.menu-fino .app{grid-template-columns:86px 1fr}
body.menu-fino.tela-contas .app{grid-template-columns:86px 1fr}
body.menu-fino .brand{justify-content:center;padding-left:0;padding-right:0}
body.menu-fino .brand .mark,body.menu-fino .brand i{margin:0}
body.menu-fino .nav-item{justify-content:center;padding:11px 0;position:relative}
body.menu-fino .menu-fino-btn{justify-content:center;padding:10px 0;margin:0 12px 10px}
/* O balao com o nome, no hover do icone. Nasce do data-balao, que veio do
proprio rotulo: uma segunda lista de nomes escrita a mao envelheceria no
primeiro menu renomeado. */
body.menu-fino .nav-item[data-balao]:hover::after{
content:attr(data-balao);position:absolute;left:calc(100% + 10px);top:50%;
transform:translateY(-50%);white-space:nowrap;z-index:90;
background:var(--azul);color:#fff;font-size:12px;font-weight:500;
padding:7px 11px;border-radius:8px;box-shadow:0 6px 18px -6px rgba(4,44,83,.6);
pointer-events:none}
body.menu-fino .nav-item[data-balao]:hover::before{
content:"";position:absolute;left:calc(100% + 4px);top:50%;
transform:translateY(-50%);border:6px solid transparent;
border-right-color:var(--azul);z-index:90;pointer-events:none}
/* =========================================================================
Fase 19: dois acertos vistos na tela,
com o menu encolhido
=========================================================================
1. OS CARTOES EMPILHARAM. #contasKpis carrega as classes "grid kpis",
com o menu encolhido
=========================================================================
1. OS CARTOES EMPILHARAM. #fluxoKpisMes carrega as classes "grid kpis",
e
a regra .grid.kpis com grid-template-columns tem a MESMA
especificidade que .top-kpis .kpis: empate,
e quem ganha e a ordem no
arquivo,
que muda conforme onde a regra cai. Empate resolvido por
ordem e armadilha; aqui o seletor passa a ser pelo id,
que nao
empata com ninguem.
2. O MENU FINO DEVOLVE 150px. O limiar de 1700px olhava a JANELA,
e nao
o espaco util. Com a coluna azul encolhida sobra largura de sobra
para a linha unica da foto dele bem antes disso. */
/* Fase 19, 26/08: a Tesouraria usa os MESMOS cartoes do Contas a
Pagar. Cada regra abaixo carrega os dois ids em vez de as regras
serem copiadas, para o dia em que uma delas mudar valer nas duas
telas. */
body.tela-contas #contasKpis,
e nao
o espaco util. Com a coluna azul encolhida sobra largura de sobra
para a linha unica da foto dele bem antes disso. */
body.tela-contas #fluxoKpisMes{display:flex;flex-wrap:wrap;gap:8px;
grid-template-columns:none;margin:0}
body.tela-contas #contasKpis .kpi,
body.tela-contas #fluxoKpisMes .kpi{flex:0 1 auto;min-width:0}
/* Este bloco existia e foi apagado: ele punha a linha unica ja em 1400px
quando o menu estava fino,
na esperanca de que os 150px devolvidos pelo
menu bastassem. Medido na tela: em 1536px com o menu fino sobram 1420
uteis e a linha precisa de 1490,
entao o quarto cartao ia parar por
BAIXO do botao Ver hoje. Sobreposicao e pior que segunda linha,
porque
esconde o numero sem avisar.
Fica so o limiar de 1700px,
que e onde a conta fecha de verdade. */
/* =========================================================================
Fase 19: a regra final dos cartoes do topo
=========================================================================
Medido nos dois estados do menu,
e os dois estavam errados por motivos
opostos: com o menu fino os cartoes ficavam em linha mas CORTAVAM o
numero; com o menu aberto nao cortavam mas empilhavam em quatro linhas,
ocupando 300px de altura.
A causa dos dois e a mesma: o cartao estava sendo esticado ou espremido
por regras de largura herdadas do .grid.kpis. A regra passa a ser uma so
e explicita: o cartao tem o tamanho do CONTEUDO dele,
nem mais nem
menos,
e quem cede quando nao cabe e a FAIXA,
quebrando linha. Assim
nunca corta um numero e nunca vira uma coluna de quatro.
width:auto e flex:0 0 auto juntos,
e nao um so: o primeiro desfaz o
width:100% herdado,
o segundo impede o flex de espremer de volta. */
body.tela-contas #contasKpis,
o segundo impede o flex de espremer de volta. */
body.tela-contas #fluxoKpisMes{display:flex;flex-wrap:wrap;gap:8px;
grid-template-columns:none;margin:0;align-items:stretch}
body.tela-contas #contasKpis>.kpi,
body.tela-contas #fluxoKpisMes>.kpi{width:auto;max-width:none;min-width:0;
flex:0 0 auto;padding:5px 11px}
body.tela-contas #contasKpis .val,
body.tela-contas #fluxoKpisMes .val,
body.tela-contas #contasKpis b,
body.tela-contas #fluxoKpisMes b{white-space:nowrap;min-width:max-content}
/* =========================================================================
Fase 19, 26/08: o menu encolhido tinha dois defeitos, os dois na foto
=========================================================================
1. "O MENU ESTA ATRAS DA PARTE BRANCA, ELE TEM QUE VIR PARA A FRENTE."
A coluna azul e sticky mas nascia no mesmo plano do conteudo, e o
balao com o nome do menu, que sai POR FORA dela, ficava por baixo do
cartao branco. Nao adianta so subir o z-index do balao: quem tem que
subir e a coluna, senao o proximo elemento que vazar repete o
problema.
2. "QUANDO CLICAR NOS ICONES TEM QUE APARECER OS SUBMENUS." Com o menu
largo a gaveta empurra os itens de baixo, e isso e o certo la. Com o
menu so de icones nao ha onde empurrar: o submenu precisa FLUTUAR ao
lado do icone, como um menu de contexto. E o mesmo estado
(nav-grupo.aberta), so que desenhado de outro jeito. */
.side{z-index:40;overflow:visible}
/* FASE 56, At. 4 (07/09/2026): com o menu LARGO a lista rola DENTRO da
coluna. Sem isto, um menu mais alto que a janela vaza por baixo dela e
fica por cima do conteudo, que foi o que ele viu na Tesouraria.
No menu FINO o overflow continua visivel, porque la o submenu flutua para
fora da coluna de proposito, e cortar ele apagaria o submenu inteiro. */
.side nav{overflow-y:auto;overscroll-behavior:contain}
body.menu-fino .side nav{overflow:visible}
.brand{position:relative;z-index:41}
body.menu-fino .nav-grupo{position:relative}
body.menu-fino .nav-grupo>.nav-sub{
position:absolute;left:calc(100% + 8px);top:0;z-index:95;
min-width:212px;background:var(--azul);border-radius:10px;
padding:6px;display:block;grid-template-rows:none;
box-shadow:0 14px 34px -12px rgba(4,44,83,.7);
border:1px solid rgba(255,255,255,.12);
opacity:0;visibility:hidden;transform:translateX(-6px);
transition:opacity .14s,transform .14s,visibility .14s}
body.menu-fino .nav-grupo.aberta>.nav-sub{
opacity:1;visibility:visible;transform:none}
body.menu-fino .nav-grupo>.nav-sub .nav-sub-in{overflow:visible}
/* dentro do painel flutuante o filho volta a ter recuo normal e nao
precisa do fio vertical, que so existia para amarrar ao pai acima */
body.menu-fino .nav-sub-item{padding:8px 12px}
body.menu-fino .nav-sub-item::before{display:none}
/* o titulo do grupo aparece no alto do painel, senao o painel flutuante
nao diz de qual menu ele e */
body.menu-fino .nav-grupo.aberta>.nav-sub::before{
content:attr(data-titulo);display:block;padding:7px 12px 6px;
font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
color:#8FA8C0;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}
/* com o painel aberto o balao do hover so atrapalharia */
body.menu-fino .nav-grupo.aberta>.nav-pai[data-balao]:hover::after,
body.menu-fino .nav-grupo.aberta>.nav-pai[data-balao]:hover::before{display:none}
/* =========================================================================
Fase 19, 26/08: a linha unica, agora que a conta fecha
=========================================================================
"Reduz o tamanho dos botoes total a receber e demais, retira o botao Ver
hoje e mantem tudo la na parte superior como foi pedido no print."
A CONTA REFEITA. Antes: titulo 148 + cartoes 466 + botoes 824 = 1438
para 1256 uteis, e faltavam 182. Agora: Ver hoje fora (-90 nos botoes),
cartoes menores (-74) e botoes um pouco mais justos (-54), o que da
1220 em 1256. Cabe, com folga de 36px, e sem cortar numero nenhum.
Por isso o limiar de 1700px saiu: ele so existia porque a conta nao
fechava. Agora fecha, e a linha unica vale sempre. */
body.tela-contas .top-row{flex-wrap:nowrap;align-items:center;gap:12px}
body.tela-contas .top-row>div:first-child{order:1;flex:0 0 auto}
body.tela-contas .top-kpis{order:2;flex:0 1 auto;min-width:0}
body.tela-contas .top-act{order:3;margin-left:auto;flex:0 0 auto}
body.tela-contas #contasKpis,
body.tela-contas #fluxoKpisMes{flex-wrap:nowrap;gap:7px}
/* cartoes menores,
como ele pediu,
com o valor ainda inteiro */
body.tela-contas #contasKpis>.kpi,
com o valor ainda inteiro */
body.tela-contas #fluxoKpisMes>.kpi{padding:4px 9px;border-radius:9px}
body.tela-contas #contasKpis .lab,
body.tela-contas #fluxoKpisMes .lab,
body.tela-contas #contasKpis>.kpi>span:first-child,
body.tela-contas #fluxoKpisMes>.kpi>span:first-child{font-size:8.5px;line-height:1.2}
body.tela-contas #contasKpis .val,
body.tela-contas #fluxoKpisMes .val,
body.tela-contas #contasKpis b,
body.tela-contas #fluxoKpisMes b{font-size:14px;line-height:1.2}
body.tela-contas #contasKpis small,
body.tela-contas #fluxoKpisMes small,
body.tela-contas #contasKpis .sub,
/* FASE 47: revogada. Os 8,5px existiam para o cartao MINIATURA que morava
no cabecalho ate hoje. Com o cartao grande de volta na linha de baixo,
este tamanho deixaria a legenda ilegivel debaixo de um numero de 24px. */
/* botoes um pouco mais justos, sem ficarem menores que o dedo */
body.tela-contas .top-act{gap:4px}
body.tela-contas .btn-barra,
body.tela-contas #btnRelatorio,
body.tela-contas #btnTemplate{padding:6px 8px;font-size:11px;gap:4px}
body.tela-contas #contasNew{padding:6px 11px;font-size:11.5px}
@media(max-width:1250px){
/* abaixo disso a conta volta a nao fechar, e ai o cartao desce inteiro
em vez de ser cortado */
body.tela-contas .top-row{flex-wrap:wrap}
body.tela-contas .top-kpis{order:3;flex:1 1 100%}
body.tela-contas .top-act{order:2}
body.tela-contas #contasKpis,
body.tela-contas #fluxoKpisMes{flex-wrap:wrap;overflow:visible}
}
/* =========================================================================
Fase 19: os ultimos 119px
=========================================================================
Medido de novo depois de tirar o Ver hoje: titulo 163 + cartoes 511 +
botoes 677 = 1375 para 1256 uteis. Faltavam 119.
Eles saem do ROTULO do cartao,
e nao do numero. Com flex:0 0 auto o
cartao ficava na largura do maior texto dele,
que e "TOTAL A PAGAR
(ABERTO)" numa linha so: 137px para mostrar um valor de 85. Deixando o
rotulo quebrar em duas linhas,
o cartao encolhe ate a largura do VALOR e
os quatro passam de 511 para cerca de 380.
E exatamente o que a foto dele mostra: naquele print "TOTAL A PAGAR
(ABERTO)" esta em duas linhas. Eu e que tinha travado numa. */
body.tela-contas #contasKpis>.kpi,
o cartao encolhe ate a largura do VALOR e
os quatro passam de 511 para cerca de 380.
E exatamente o que a foto dele mostra: naquele print "TOTAL A PAGAR
(ABERTO)" esta em duas linhas. Eu e que tinha travado numa. */
body.tela-contas #fluxoKpisMes>.kpi{flex:0 1 auto;min-width:0;width:auto;
padding:4px 9px}
body.tela-contas #contasKpis .lab,
body.tela-contas #fluxoKpisMes .lab,
body.tela-contas #contasKpis>.kpi>span:first-child,
body.tela-contas #fluxoKpisMes>.kpi>span:first-child{white-space:normal;
font-size:8.5px;line-height:1.15;display:block}
body.tela-contas #contasKpis small,
body.tela-contas #fluxoKpisMes small,
body.tela-contas #contasKpis .sub,
/* FASE 47: revogada junto com a de cima, pelo mesmo motivo. */
/* o valor continua intocavel */
body.tela-contas #contasKpis .val,
/* o valor continua intocavel */
body.tela-contas #fluxoKpisMes .val,
body.tela-contas #contasKpis b,
body.tela-contas #fluxoKpisMes b{white-space:nowrap;min-width:max-content}
body.tela-contas #pgTitle{font-size:18.5px}
/* =========================================================================
Fase 19: o mesmo topo no notebook
=========================================================================
Com o Exportar fora sobraram 12px de folga em 1536px, o que resolve o
monitor e nao resolve o notebook: em 1366 o cabecalho perde 170px e a
folga viraria divida.
A regra que faz caber nos dois e deixar o CARTAO ceder, com um piso: ele
encolhe apertando o rotulo, que pode quebrar em mais linhas, e para de
encolher na largura do VALOR, que tem min-width:max-content. O piso dos
quatro fica em cerca de 340px, e em 1366 sobram 353 depois do titulo e
dos botoes. Cabe, e o numero continua inteiro.
O overflow:hidden aqui e cinto de seguranca, nao mecanismo: com o piso
no valor ele nunca chega a cortar. Sem ele, uma fonte de sistema maior
que o normal poria o cartao por cima do botao, que foi o que ele viu. */
/* 27/08/2026: "o texto aqui quando deixa o mouse parado no + tem que vir
para frente, esta ficando escondido e nao da para ler".
O cinto de seguranca acima nasceu quando o topo so tinha cartao. Depois
o seletor de exercicio mudou de lugar e passou a morar DENTRO deste
mesmo bloco, levando junto a dica do +. overflow:hidden corta tudo que
e descendente, inclusive uma dica posicionada por absolute, e era ela
que aparecia pela metade.
O corte desce um nivel: fica na lista de cartoes, que e quem precisa
dele, e a dica volta a poder passar por fora do topo. */
body.tela-contas .top-kpis{min-width:0}
body.tela-contas #contasKpis,
body.tela-contas #fluxoKpisMes{min-width:0;overflow:hidden}
body.tela-contas #contasKpis>.kpi,
body.tela-contas #fluxoKpisMes>.kpi{flex:0 1 auto;min-width:0}
body.tela-contas #contasKpis .val,
body.tela-contas #fluxoKpisMes .val,
body.tela-contas #contasKpis b,
body.tela-contas #fluxoKpisMes b{min-width:max-content;white-space:nowrap}
/* MEDIDO em tres larguras, e nao chutado: em 1440 a linha unica cabe com
folga; em 1366 os cartoes ja estao no piso (85 a 101px cada) e mesmo
assim passam por cima dos botoes, faltando 11px. O limiar e 1400.
Abaixo disso o cartao desce INTEIRO para a segunda linha. Quem quiser a
linha unica num notebook tem a setinha do menu: encolhida, a coluna
devolve 150px e o topo volta a caber, com sobra, ate em 1366. */
@media(max-width:1400px){
body.tela-contas .top-row{flex-wrap:wrap}
body.tela-contas .top-kpis{order:3;flex:1 1 100%}
body.tela-contas .top-act{order:2}
body.tela-contas #contasKpis,
body.tela-contas #fluxoKpisMes{flex-wrap:wrap;overflow:visible}
}
/* com o menu encolhido a conta fecha bem antes, entao a linha unica volta */
@media(min-width:1300px){
body.menu-fino.tela-contas .top-row{flex-wrap:nowrap}
body.menu-fino.tela-contas .top-kpis{order:2;flex:0 1 auto}
body.menu-fino.tela-contas .top-act{order:3}
body.menu-fino.tela-contas #contasKpis,
body.menu-fino.tela-contas #fluxoKpisMes{flex-wrap:nowrap;overflow:hidden}
}
/* =========================================================================
Fase 19, 26/08: cada celula em UMA linha
=========================================================================
"Estes itens tem que ficar em uma unica linha, aumente o tamanho da
coluna para isso. Em relacao a valor considere R$ 1.000.000,00, esta
quantidade de digitos que caiba em uma linha."
O que ele mostrou: "por leandro.passos" quebrando em "por" e
"leandro.passos", e "R$ 3.200,00" quebrando em "R$" e "3.200,00". Numa
tabela que ele quer com cara de Excel isso e o que mais denuncia que nao
e: no Excel a celula nao quebra, a coluna e que tem largura.
A LARGURA DO VALOR vem do pedido dele e nao de um chute: R$ 1.000.000,00
sao quinze caracteres, e na fonte da tabela isso da 118px. Fica como
MINIMO, entao um valor maior alarga a coluna em vez de quebrar.
A tabela ja rola na horizontal desde a At. 12, entao alargar coluna nao
empurra nada para fora da tela: empurra para dentro da barra de
rolagem, que e onde ele espera encontrar o resto. */
#tblContas th,#tblContas td,
#tblParceiros th,#tblParceiros td,
#tblExtrato th,#tblExtrato td{white-space:nowrap}
/* o que e texto livre continua podendo quebrar, senao o Historico de uma
nota inteira esticaria a tabela por metros */
#tblContas td .quebra,#tblContas td small{white-space:normal}
/* a coluna de dinheiro cabe R$ 1.000.000,00 sem quebrar */
#tblContas .num,#tblExtrato .num{min-width:118px}
/* Situacao guarda "por fulano.sobrenome" e a data, uma linha cada */
#tblContas td:nth-child(2),#tblContas th:nth-child(2){min-width:150px}
/* com a celula em uma linha a altura da linha cai, e ai a tabela mostra
mais titulos por tela, que era o outro lado do pedido */
#tblContas td,#tblParceiros td,#tblExtrato td{vertical-align:middle}
/* =========================================================================
Fase 19, 26/08: os titulos das colunas
=========================================================================
"Arruma os titulos nas colunas, deixa eles centralizados, e coloca uma
pequena faixa em branco antes dos titulos, pois esta bem espremido, o
layout quase em cima do texto."
A FAIXA. O cabecalho colava na borda de cima do cartao porque o
.table-wrap perdeu o padding quando a lista passou a comecar direto,
sem o card-h. A faixa entra no proprio TH, e nao numa div nova: assim
ela acompanha o cabecalho quando ele gruda no topo pelo position:sticky,
em vez de rolar para longe e deixar o texto colado de novo.
O CENTRO, e a excecao que fica. Titulo e celula centralizam JUNTOS,
senao o titulo ficaria no meio e o dado na ponta, que e pior que o
aperto que ele reclamou. As colunas de DINHEIRO seguem a direita, as
duas: e o que faz a virgula bater na coluna e deixa comparar valor de
relance sem ler digito por digito. Centralizar dinheiro deixa
R$ 96,20 e R$ 3.200,00 com as virgulas em lugares diferentes, e ai a
coluna deixa de ser uma coluna. */
#tblContas thead th,#tblParceiros thead th,#tblExtrato thead th{
text-align:center;padding-top:16px;padding-bottom:9px;vertical-align:bottom}
#tblContas tbody td,#tblParceiros tbody td,#tblExtrato tbody td{text-align:center}
/* dinheiro a direita, titulo e celula, pelo mesmo motivo */
#tblContas thead th.num,#tblExtrato thead th.num,
#tblContas tbody td.num,#tblExtrato tbody td.num{text-align:right}
/* a faixa em branco do topo tambem acompanha o cabecalho grudado */
#tblContas thead th,#tblParceiros thead th,#tblExtrato thead th{
background:#fff;box-shadow:inset 0 -1px 0 var(--line)}
/* ---------- Fase 19: as abas e a estrela dos filtros ---------- */
.gf-abas{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1px solid var(--line)}
.gf-aba{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--muted);
border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0}
.gf-aba:hover{color:var(--azul);background:#F6F8FB}
.gf-aba.on{color:var(--teal);border-bottom-color:var(--teal)}
/* a estrela e cinza vazada ate ser escolhida, e ai fica cheia e amarela:
o estado tem que ser legivel de relance, sem passar o mouse */
.flt-estrela{flex:0 0 auto;width:22px;height:22px;display:inline-flex;
align-items:center;justify-content:center;border-radius:6px;padding:0}
.flt-estrela svg{width:14px;height:14px;fill:none;stroke:#B7C4D1;stroke-width:1.5}
.flt-estrela:hover svg{stroke:var(--amb)}
.flt-estrela.on svg{fill:var(--amb);stroke:var(--amb)}
.gf-vazio{margin:14px 6px;font-size:12.5px;color:var(--muted);line-height:1.6}
/* ---------- Fase 19, At. 26: a seta de ordenacao ---------- */
/* A seta so existe na coluna ordenada. Um ::after invisivel em TODOS os
cabecalhos empurraria cada titulo uns 3px para a esquerda, e os titulos
acabaram de ser centralizados a pedido dele. */
#tblContas thead th.ord-sobe::after,#tblParceiros thead th.ord-sobe::after,
#tblExtrato thead th.ord-sobe::after,#tblContas thead th.ord-desce::after,
#tblParceiros thead th.ord-desce::after,#tblExtrato thead th.ord-desce::after{
content:'';display:inline-block;width:0;height:0;margin-left:6px;
vertical-align:middle;border-left:4px solid transparent;
border-right:4px solid transparent}
#tblContas thead th.ord-sobe::after,#tblParceiros thead th.ord-sobe::after,
#tblExtrato thead th.ord-sobe::after{border-bottom:5px solid var(--brand)}
#tblContas thead th.ord-desce::after,#tblParceiros thead th.ord-desce::after,
#tblExtrato thead th.ord-desce::after{border-top:5px solid var(--brand)}
#tblContas thead th.ord-sobe,#tblParceiros thead th.ord-sobe,
#tblExtrato thead th.ord-sobe,#tblContas thead th.ord-desce,
#tblParceiros thead th.ord-desce,#tblExtrato thead th.ord-desce{
color:var(--brand)}
/* ---------- Fase 19: arrastar a coluna dentro do painel Colunas ---------- */
/* A alca e desenhada em CSS e nao e um caractere de fonte: o glifo de
pontinhos nao existe em toda fonte e, onde falta, sai um retangulo
vazio no lugar. */
.col-alca{flex:0 0 auto;width:8px;height:12px;cursor:grab;opacity:.5;
background-image:radial-gradient(currentColor 1px,transparent 1px);
background-size:4px 4px;background-position:0 1px}
.col-linha:hover .col-alca{opacity:.85}
.col-linha{cursor:grab}
.col-linha.col-arrastando{opacity:.45}
.col-linha.col-alvo{box-shadow:inset 0 2px 0 var(--teal)}
/* ======================================================================
Fase 19: a gaveta de lancamento no desenho da tela de referencia.
TRES FAIXAS EM COLUNA, e so a do meio rola. O cabecalho com o titulo e
o rodape com o botao de gravar ficam presos: numa gaveta de vinte
campos, o botao Criar no fim do formulario obriga a rolar tudo de novo
so para gravar, e quem esta lancando nota atras de nota faz isso o dia
inteiro.
A LARGURA ENCOLHEU. A gaveta larga fazia sentido enquanto ela era o
formulario antigo espalhado em uma linha so; com os campos em blocos de
duas colunas, 560px chega e sobra tela da lista atras, que e o que a
referencia mostra.
====================================================================== */
.gl-form{display:flex;flex-direction:column;padding:0;
width:min(92vw,560px);min-width:0;overflow:hidden}
.gl-cab{flex:0 0 auto;display:flex;align-items:flex-start;gap:12px;
padding:18px 20px 14px;border-bottom:1px solid var(--line2)}
.gl-cab-txt{flex:1;min-width:0}
.gl-cab h3{margin:0;font-size:17px;font-weight:700;color:var(--text)}
.gl-cab p{margin:4px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.gl-x{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;
justify-content:center;border:1px solid var(--line);background:#fff;
border-radius:8px;cursor:pointer;color:var(--muted)}
.gl-x:hover{border-color:var(--brand);color:var(--brand)}
.gl-x svg{width:15px;height:15px}
.gl-abas{flex:0 0 auto;display:flex;gap:2px;padding:0 20px;
border-bottom:1px solid var(--line2)}
.gl-aba{border:0;background:none;font-family:inherit;font-size:13.5px;
font-weight:600;color:var(--muted);padding:11px 14px;cursor:pointer;
border-bottom:2px solid transparent;margin-bottom:-1px}
.gl-aba:hover{color:var(--text)}
.gl-aba.on{color:var(--brand);border-bottom-color:var(--brand)}
.gl-selo{display:inline-block;margin-left:7px;min-width:18px;padding:0 5px;
border-radius:9px;background:var(--brand);color:#fff;font-size:11px;
line-height:18px;text-align:center;font-weight:700}
.gl-corpo{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:16px 20px 20px}
.gl-painel{display:none}
.gl-painel.on{display:block}
.gl-bloco{border:1px solid var(--line2);border-radius:11px;padding:14px 15px;
margin-bottom:13px;background:#FCFDFE}
.gl-bloco-t{font-size:11px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted);margin-bottom:11px}
/* Duas colunas de largura igual, e nao um flex-wrap: com wrap, um campo
longo empurrava o vizinho para a linha de baixo e a gaveta ficava com
buracos diferentes a cada abertura. */
.gl-grade{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;
align-items:end}
.gl-grade .field{margin:0;min-width:0}
/* 27/08/2026: "o numero do boleto ficou desalinhado do nome GRUPO,
alinhe em todos os lugares que estiver assim".
O link "Gerenciar ..." deixou o campo do Grupo uma linha mais alto que
o vizinho. Como a grade alinha pelo PE (align-items:end), o vizinho
descia junto e o rotulo dele parava abaixo do rotulo do Grupo.
Na linha que tem o link, o alinhamento passa a ser pelo TOPO: rotulo
com rotulo, caixa com caixa, e a sobra do link fica no fim da celula
vizinha. A caixinha de marcar e o campo de tres pecas continuam pelo
pe, senao eles subiriam para a altura do rotulo do campo ao lado. */
.gl-grade:has(.ger-link)>.field{align-self:start}
.gl-grade:has(.ger-link)>.field.pc-campo,
.gl-grade:has(.ger-link)>.field:has(label.gl-check){align-self:end}
.gl-grade .field.grow,.gl-grade .field.pc-campo,
/* O Item ocupou o lugar do Fornecedor e herdou a importancia dele:
e ele que diz quem recebe o dinheiro. Em meia largura a marca
d'agua que ele ditou ("Fornecedor / Prestador de servico / Imposto
/ Contas de consumo...") era cortada no meio da segunda palavra,
e uma marca d'agua cortada nao explica nada. */
#cfItemWrap{grid-column:1 / -1}
/* .field empilha rotulo em cima do campo, e o Fornecedor e um .field
que por dentro e uma linha: o select e os dois botoes. Sem virar a
direcao aqui, Consultar e Novo caiam um embaixo do outro e o bloco
gastava tres linhas para mostrar um campo so. */
.gl-grade .field.pc-campo{flex-direction:row;align-items:flex-end}
.gl-grade .field input,.gl-grade .field select{width:100%;min-width:0}
/* .field label deixa todo rotulo em caixa alta e miudo, que e o certo
para um rotulo. Este aqui nao e rotulo: e a frase que a pessoa le e
marca, e em caixa alta ela virava um segundo titulo de bloco.
Medido no Chrome: com o seletor curto, ".field label" (0,1,1) vencia
".gl-check" (0,1,0) e o texto continuava em caixa alta de 10,5px; e
".gl-grade .field input" esticava a caixinha de marcar para 162px de
largura, o que jogava a palavra Parcelar para longe dela. Os dois
seletores abaixo carregam o peso necessario para ganhar, e nao um
!important, que apagaria a discussao em vez de resolve-la. */
.gl-grade .field label.gl-check{font-weight:400;display:flex;
align-items:center;gap:7px;font-size:13.5px;white-space:nowrap;
text-transform:none;letter-spacing:0;color:var(--text)}
.gl-grade .field label.gl-check input[type="checkbox"]{margin:0;width:auto;
min-width:0;flex:0 0 auto}
.gl-rodape{flex:0 0 auto;display:flex;justify-content:flex-end;gap:9px;
padding:13px 20px;border-top:1px solid var(--line2);background:#fff}
.gl-aviso{font-size:12.5px;color:var(--muted);line-height:1.6;
margin-bottom:11px}
.gl-dica{font-size:11.5px;color:var(--muted);margin-top:7px}
.gl-anexo{display:flex;align-items:center;gap:10px;padding:9px 10px;
border:1px solid var(--line2);border-radius:9px;margin-bottom:8px;
font-size:13px;background:#fff}
.gl-anexo b{flex:1;min-width:0;font-weight:600;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.gl-anexo .gl-tam{flex:0 0 auto;font-size:11.5px;color:var(--muted)}
.gl-anexo .gl-espera{flex:0 0 auto;font-size:11px;font-weight:700;
color:var(--amb);letter-spacing:.04em;text-transform:uppercase}
/* No celular a gaveta toma a tela toda: 92vw deixaria uma tira inutil de
lista atras, e nao ha lista para consultar enquanto se digita. */
@media (max-width:640px){
.gl-form{width:100vw}
.gl-grade{grid-template-columns:1fr}
}
/* Fase 19, 27/08/2026: a fileira de contas da Tesouraria.
Ela fica ENTRE o topo e o extrato, fora do cartao, porque ela NAVEGA
(troca a visao detalhada, banco por banco) e nao filtra o conteudo do
cartao. Dentro do cartao ela seria lida como parte do extrato. */
/* 27/08/2026: separados, como os botoes do topo, e arrastaveis. O gap e o
que ele pediu ("nao juntos um do outro"); o cursor grab avisa que da para
pegar antes de a pessoa tentar. */
.bancos-linha{display:flex;margin:0 0 12px;flex-wrap:wrap;max-width:100%;gap:8px}
.bancos-linha button{padding:7px 14px;border-radius:8px;font-size:12.5px;
font-weight:600;color:var(--muted);background:#fff;
border:1px solid var(--line);cursor:grab}
.bancos-linha button:hover{border-color:var(--azul);color:var(--azul)}
.bancos-linha button.active{background:var(--azul);color:#fff;border-color:var(--azul)}
.bancos-linha button.arrastando{opacity:.45;cursor:grabbing}
/* ---------- Gerenciar grupos, itens e locais (Fase 20, 27/08/2026) ----------
O link mora ABAIXO da lista, e nao dentro dela: a setinha do navegador so
aceita texto, e um