:root{ --navy:#0b1b36; --navy-2:#0d2b5e; --azul:#0f4f9c; --azul-claro:#3e9bff; --laranja:#ff8a00; --laranja-2:#d97400; --ciano:#25c8e6; --fundo:#f4f8fd; --papel:#ffffff; --borda:#e6edf7; --texto:#10203f; --fraco:#5b6b82; --ok:#0e7c4a; --ok-bg:#e2f3ea; --alerta:#b8701a; --alerta-bg:#fdf1de; --erro:#a8412e; --erro-bg:#fbe9e5; /* Profundidade em três degraus, e não uma sombra genérica em tudo: o que está pousado na página, o que se destaca dela e o que flutua por cima. */ --s1:0 1px 2px rgba(11,27,54,.05); --s2:0 8px 22px -14px rgba(11,27,54,.32); --s3:0 22px 48px -24px rgba(11,27,54,.45); --brilho:0 0 0 1px rgba(62,155,255,.32),0 14px 30px -16px rgba(23,99,214,.5); --grad-azul:linear-gradient(135deg,#1763d6 0%,#3e9bff 55%,var(--ciano) 100%); --grad-laranja:linear-gradient(135deg,var(--laranja) 0%,#ffb347 100%); --r-sm:8px; --r:12px; --r-lg:16px; /* uma curva só para tudo que se move: é o que faz a interface parecer uma peça só, e não seis animações escritas em dias diferentes */ --mola:cubic-bezier(.22,.61,.36,1); /* Uma cor por tipo de documento, definida AQUI e em mais lugar nenhum: a cor tem de seguir o documento em toda tela (cartão, contador, gráfico empilhado, monitor). A paleta foi validada para daltonismo entre vizinhos NA ORDEM de empilhar (cupom, NF-e de entrada, NF-e de saída, CT-e, NFS-e), só no modo claro, que é o único que existe. A cor NUNCA é o único sinal: o nome do tipo vai escrito em todo cartão, contador, coluna e legenda, e o texto fica na cor de texto, não na do tipo. */ --t-cupom:#2a78d6; --t-nfe-ent:#1baf7a; --t-nfe-sai:#eb6834; --t-cte:#4a3aa7; --t-nfse:#e87ba4; } *{box-sizing:border-box} /* O atributo hidden vale menos que qualquer classe que defina display, e .cards define display:grid. O efeito era o alternador do painel esconder a lista e não esconder os cards: quem clicava em "Lista" via as duas coisas. Esta linha faz hidden significar escondido em todo lugar, que é o que qualquer pessoa que escreve `el.hidden = true` espera. */ [hidden]{display:none !important} /* O fundo não é uma cor chapada: duas manchas muito fracas, fixas na janela, dão profundidade sem competir com nada. É gradiente, não imagem — não há arquivo para baixar numa internet de loja. */ body{margin:0;color:var(--texto);font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5; background: radial-gradient(58rem 38rem at 8% -12%,rgba(62,155,255,.10),transparent 62%), radial-gradient(44rem 32rem at 106% 4%,rgba(255,138,0,.07),transparent 64%), var(--fundo); background-attachment:fixed} a{color:var(--azul);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;margin:0;line-height:1.15;text-wrap:balance} h1{font-size:26px;font-weight:800;letter-spacing:-.01em} h2{font-size:18px;font-weight:700} h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fraco)} .barra{background:linear-gradient(115deg,#07142b 0%,var(--navy) 45%,#14315c 100%);color:#fff;padding:0 24px; position:sticky;top:0;z-index:50;box-shadow:var(--s2)} /* o fio de luz embaixo da barra usa as duas cores da marca; é o que separa a barra do conteúdo sem precisar de uma linha cinza */ .barra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(62,155,255,.6) 28%,rgba(255,138,0,.5) 72%,transparent)} .barra .in{max-width:1180px;margin:0 auto;height:60px;display:flex;align-items:center;gap:20px} .marca{font-family:Montserrat,system-ui,sans-serif;font-weight:800;letter-spacing:.02em; display:inline-flex;align-items:center;line-height:1;user-select:none;color:#fff;font-size:21px} .marca:hover{text-decoration:none} .marca .ii{display:inline-flex;gap:.13em;align-items:flex-end;margin:0 .15em;height:.72em;transform:translateY(.015em)} .marca .ii i{display:block;width:.185em;border-radius:.035em} .marca .ii i:first-child{height:100%;background:var(--laranja)} .marca .ii i:last-child{height:86%;background:var(--azul-claro)} .marca .prod{font-family:Montserrat,sans-serif;font-weight:700;font-size:.62em;letter-spacing:.18em; line-height:1;margin-left:.5em;color:rgba(232,238,246,.62)} /* white-label: o escritório vê a própria marca; a nossa vira assinatura */ .marca-esc{display:flex;align-items:center;gap:12px;text-decoration:none} .marca-esc:hover{text-decoration:none} .marca-esc img{height:34px;max-width:190px;object-fit:contain;display:block} .marca-esc .assinatura{font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:600; letter-spacing:.02em;color:#7f95b6;border-left:1px solid #33456a;padding-left:12px; display:flex;align-items:center;white-space:nowrap} .marca-esc .assinatura b{font-weight:700;margin-left:.35em;letter-spacing:.1em;font-size:9.5px} .marca-esc .ii{display:inline-flex;gap:.13em;align-items:flex-end;margin:0 .12em;height:.72em} .marca-esc .ii i{display:block;width:.19em;border-radius:.03em} .marca-esc .ii i:first-child{height:100%;background:var(--laranja)} .marca-esc .ii i:last-child{height:86%;background:var(--azul-claro)} /* prévia do tema: mostrar o resultado antes de salvar evita o escritório descobrir que escolheu uma cor ilegível depois de aplicá-la em tudo */ .previa{border:1px solid var(--borda);border-radius:10px;overflow:hidden;margin-top:6px} .previa-barra{background:var(--navy);padding:12px 16px;display:flex;align-items:center;min-height:56px} .previa-barra img{height:28px;max-width:170px;object-fit:contain} .previa-barra b{color:#fff;font-family:Montserrat,sans-serif;font-size:15px} .previa-corpo{padding:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--papel)} .previa-nota{font-size:12.5px;color:var(--fraco)} /* perfil do escritório */ .perfil{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start} .logo-caixa{border:1px dashed var(--borda);border-radius:12px;padding:20px;text-align:center;background:var(--fundo)} .logo-caixa img{max-width:100%;max-height:110px;object-fit:contain;display:block;margin:0 auto 14px} .logo-vazio{height:110px;display:flex;align-items:center;justify-content:center; color:var(--fraco);font-size:13px;margin-bottom:14px;line-height:1.4} input[type=file]{font-family:inherit;font-size:13px;width:100%} .campos{display:grid;grid-template-columns:1fr 1fr;gap:14px} .campos .largo{grid-column:1/-1} .opcoes{display:flex;flex-direction:column;gap:9px;margin-top:6px} .opcoes label{display:flex;align-items:flex-start;gap:9px;font-weight:400;color:var(--texto); font-size:14px;cursor:pointer;margin:0} .opcoes input{width:auto;margin:3px 0 0} .opcoes small{display:block;color:var(--fraco);font-size:12.5px} @media(max-width:820px){.perfil{grid-template-columns:1fr}.campos{grid-template-columns:1fr}} /* O que não foi contratado continua na lista, apagado e com cadeado. O escritório precisa saber que aquilo existe — e o clique é o pedido de demonstração, não uma parede. */ aside a.fechado{opacity:.5} aside a.fechado:hover{opacity:.85;text-decoration:none} /* As três quebras do movimento, lado a lado quando cabe e empilhadas quando não cabe. Abaixo de 900px uma coluna: comparar três coisas espremidas é pior que rolar. */ /* Os números à esquerda, de que o período é feito à direita. Abaixo de 1000px empilha: comparar duas colunas espremidas é pior que rolar. */ .notas-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:22px;align-items:start;margin-bottom:18px} .por-tipo{margin:0;padding:16px 18px;min-width:0;overflow:hidden} .por-tipo .rank{min-width:0} .por-tipo .rank b,.por-tipo .rank span{overflow-wrap:anywhere} .por-tipo h3{margin:0 0 12px;font-size:14px} .por-tipo small{display:block;margin-top:10px;color:var(--fraco);font-size:12px} @media (max-width:1000px){.notas-topo{grid-template-columns:1fr}} /* A carteira de um contador, para quem administra. Aberta por padrão: fechar tudo obrigaria a clicar para ver o que já se veio ver. */ .grupo-esc{margin-bottom:22px} .grupo-esc>summary{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;cursor:pointer; padding:12px 16px;background:var(--papel);border:1px solid var(--borda); border-radius:var(--r);box-shadow:var(--s1);list-style:none;margin-bottom:12px} .grupo-esc>summary::-webkit-details-marker{display:none} .grupo-esc>summary b{font-family:Montserrat,sans-serif;font-size:15.5px} .grupo-esc>summary:hover{border-color:var(--azul-claro)} .g-nums{color:var(--fraco);font-size:13px} .tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:26px} .barra nav{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:14px} .barra nav a{color:#c8d8ee} .barra nav .quem{color:#7f95b6;font-size:13px} /* Menu de sistema. Nove itens numa barra horizontal viraram fila e pararam de caber. Mais que isso: numa barra todos pesam igual, e não pesam — "Pendências" é o trabalho do dia e "Senha" é uma visita por ano. Na lateral cabe agrupar, cabe marcar onde a pessoa está, e cabe crescer sem espremer o resto. */ .pagina{display:grid;grid-template-columns:224px 1fr;min-height:calc(100vh - 60px);align-items:start} .menu{background:var(--papel);border-right:1px solid var(--borda);padding:18px 0 40px; position:sticky;top:0;align-self:stretch} .menu h4{font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#9aa8bd;margin:0;padding:16px 20px 7px} .menu h4:first-child{padding-top:2px} /* Grupos secundários recolhidos: o dia a dia (Operação) fica à vista e o resto abre num clique, sozinho quando a página aberta está dentro dele. É
para funcionar sem JavaScript. */ .menu details.grupo{margin:0} .menu details.grupo>summary{font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#9aa8bd;padding:16px 20px 7px;cursor:pointer; list-style:none;display:flex;align-items:center;justify-content:space-between} .menu details.grupo>summary::-webkit-details-marker{display:none} .menu details.grupo>summary::after{content:"+";font-size:14px;font-weight:600} .menu details.grupo[open]>summary::after{content:"\2212"} .menu details.grupo>summary:hover{color:var(--azul)} .menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 12px;color:var(--texto); font-size:14px;border-radius:10px;position:relative; transition:background .16s,color .16s,transform .16s var(--mola)} .menu a:hover{background:#eef4fc;text-decoration:none;transform:translateX(2px)} .menu a.on{background:linear-gradient(100deg,rgba(23,99,214,.11),rgba(62,155,255,.05));font-weight:600;color:var(--azul)} /* a marca do item ativo é uma barrinha com gradiente encostada na borda do menu, e não uma borda inteira: marca sem pesar */ .menu a.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px; border-radius:0 3px 3px 0;background:var(--grad-azul)} /* fora do menu o ícone acompanha o texto: SVG sem tamanho ocupa a largura toda */ .ic{width:1.1em;height:1.1em;vertical-align:-.15em} .menu a .ic{width:17px;height:17px;flex:0 0 17px;opacity:.75} .menu a.on .ic{opacity:1} .menu .marca-sel{display:block;padding:6px 20px 14px;color:var(--fraco);font-size:12px; border-bottom:1px solid var(--borda);margin-bottom:6px} .menu .marca-sel b{display:block;color:var(--texto);font-size:13.5px;font-family:Montserrat,sans-serif} /* o e-mail de quem entrou, na gaveta do celular: a barra de cima não tem lugar para ele abaixo de 700px (ver a barra no celular), e quem usa duas contas confere aqui em qual está (D16). No computador ele já está na barra. */ .menu .marca-sel .quem-menu{display:none;margin-top:4px;color:var(--fraco);font-size:12px; overflow-wrap:anywhere} .conteudo{min-width:0} .pagina-simples{display:block} /* O recuo do .env vira variável porque HAVIA DUAS CONTAS DA MESMA COISA: a tela de entrada se estica para fora do .env com margem negativa, e o número dela (-24px) estava fixo enquanto o recuo daqui virava 16px abaixo de 900px. Resultado: 8px de página rolando de lado no tablet — invisível para quem lê o CSS, medido em um segundo pela prova de layout. Uma variável, uma conta. */ .pagina-simples .env{max-width:1180px;margin:0 auto} /* A LARGURA ÚTIL ERA 1000px, E ESSE ERA O DEFEITO. Num monitor de 1920 sobravam 700px de papel de parede enquanto a tabela de oito colunas era espremida em 950: razão social virava quatro linhas, o CNPJ quebrava no meio do número, o valor quebrava, e a última coluna ficava cortada atrás de uma barra de rolagem dentro do cartão. O limite existe para texto corrido não virar linha de 200 caracteres; tabela precisa do contrário. 1480 cabe as oito colunas sem apertar e ainda deixa margem num monitor comum. */ .conteudo .env{--env-x:28px;max-width:1480px;margin:0} /* o botão só existe onde o menu vira gaveta */ .abre-menu{display:none;background:none;border:0;color:#c8d8ee;font-size:22px; cursor:pointer;padding:0 4px;line-height:1} @media(max-width:900px){ .pagina{grid-template-columns:1fr} .menu{position:fixed;top:60px;left:0;bottom:0;width:230px;z-index:40;overflow-y:auto; transform:translateX(-100%);transition:transform .18s;box-shadow:0 0 40px rgba(9,32,68,.18)} .menu.aberto{transform:none} .abre-menu{display:block} .conteudo .env{--env-x:16px;--env-t:18px;--env-b:48px} } .env{--env-x:24px;--env-t:26px;--env-b:64px; max-width:1180px;margin:0 auto;padding:var(--env-t) var(--env-x) var(--env-b)} .cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px} .cab .sub{color:var(--fraco);font-size:14px;margin-top:4px} /* Trilha de navegação (migalha) e o botão de voltar, desenhados pelo "topo" em toda tela interna. O voltar leva ao nível de cima e a trilha mostra o caminho inteiro, para ninguém depender do botão do navegador nem do menu lateral. A tela atual é texto, não link, e leva aria-current. */ .migalha{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 14px;font-size:13px;color:var(--fraco)} .migalha ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:0;padding:0;list-style:none} .migalha li{display:flex;align-items:center;gap:6px;min-width:0} .migalha li+li::before{content:"\203A";color:var(--fraco);opacity:.7} .migalha a{color:var(--azul);text-decoration:none;border-radius:4px;padding:2px 2px} .migalha a:hover{text-decoration:underline} .migalha a:focus-visible,.pular:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .migalha [aria-current]{color:var(--texto);font-weight:600;overflow-wrap:anywhere} .migalha-voltar{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px; border:1px solid var(--borda);border-radius:var(--r-sm);background:var(--papel); color:var(--texto) !important;font-weight:600;font-size:13px} .migalha-voltar:hover{border-color:var(--azul-claro);text-decoration:none !important} /* O atalho para pular o menu só aparece quando o teclado chega nele */ .pular{position:absolute;left:8px;top:-60px;z-index:100;padding:8px 14px;border-radius:var(--r-sm); background:var(--navy);color:#fff;font-weight:600;text-decoration:none} .pular:focus{top:8px} #conteudo:focus{outline:none} @media print{.migalha,.pular{display:none}} /* Conferência do Extrato Fronteiras (modal na tela da empresa). O do navegador já prende o foco, fecha com Esc e escurece o fundo. */ .fr-resumo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--fraco)} .fr-resumo b{color:var(--texto)} .fr-resumo .btn{margin-left:auto} dialog.dlg-fr{width:min(1180px,96vw);max-height:92vh;overflow:auto;padding:20px;border:1px solid var(--borda); border-radius:var(--r-lg);background:var(--papel);color:var(--texto);box-shadow:var(--s3)} dialog.dlg-fr::backdrop{background:rgba(11,27,54,.55)} .dlg-fr-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .dlg-fr-cab h2{margin:0} .dlg-fr-sub{color:var(--fraco);font-size:13px;margin:0 0 12px} /* Editar empresa (modal) e renomear caixa */ dialog.dlg-fr.dlg-ed{width:min(560px,96vw)} .ed-form{display:grid;gap:12px} .ed-dupla{display:flex;flex-wrap:wrap;gap:12px} .ed-dupla>div{flex:1 1 120px} .ed-busca{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .ed-dica{font-size:12px;color:var(--fraco)} .ed-acoes{display:flex;gap:8px;margin-top:4px} /* ===== Ações da linha e janela (13/10/2026) ===== * * POR QUE. A linha de tabela juntava botões, formulários e setinhas de abrir, * cada um com a sua frase de ajuda, empilhados na última coluna: a tela do * Runner da Origo virou uma parede de texto com rolagem lateral. A regra * agora é uma só, em todas as telas: a linha mostra o ESTADO; o que se FAZ com * ela fica no botão "Ações", e o que pede formulário ou texto longo abre numa * janela (``, que já prende o foco, fecha com Esc e escurece o fundo). * * O menu é `
` para funcionar sem JavaScript; com ele, a caixa abre em * posição fixa, porque a tabela rola de lado e cortaria um menu absoluto. */ details.acoes{position:relative;display:inline-block;text-align:left} details.acoes>summary{list-style:none;cursor:pointer;user-select:none} details.acoes>summary::-webkit-details-marker{display:none} details.acoes>summary::after{content:"▾";margin-left:6px;font-size:11px} .acoes-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;min-width:230px;max-width:min(330px,92vw); background:var(--papel);border:1px solid var(--borda);border-radius:var(--r);box-shadow:var(--s3);padding:6px; display:grid;gap:2px;white-space:normal} .acoes-menu form{margin:0} .acoes-menu .item{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px; border-radius:var(--r-sm);font:inherit;font-size:13.5px;font-weight:600;color:var(--texto);cursor:pointer; text-decoration:none;white-space:normal;line-height:1.35} .acoes-menu .item:hover,.acoes-menu .item:focus-visible{background:var(--fundo);outline:none} .acoes-menu .item small{display:block;margin-top:2px;color:var(--fraco);font-size:11.5px;font-weight:400} .acoes-menu .item.perigo{color:var(--erro)} .acoes-menu hr{border:0;border-top:1px solid var(--borda);margin:4px 2px} .acoes-menu .nota{margin:4px 10px 2px;font-size:11.5px;color:var(--fraco)} dialog.dlg{width:min(560px,96vw);max-height:92vh;overflow:auto;padding:20px;border:1px solid var(--borda); border-radius:var(--r-lg);background:var(--papel);color:var(--texto);box-shadow:var(--s3);text-align:left; white-space:normal;font-variant-numeric:normal} dialog.dlg.largo{width:min(900px,96vw)} dialog.dlg::backdrop{background:rgba(11,27,54,.55)} .dlg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .dlg-cab h2{margin:0;font-size:18px} .dlg p{line-height:1.5} .dlg-rodape{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px} /* classificar o dia ou o documento (envio e desfecho): a mesma janela */ .classif form{display:grid;gap:8px;white-space:normal} .classif p{margin:0;font-size:13px;color:var(--fraco)} .classif label{display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--texto); font-size:13px;cursor:pointer;margin:0} .classif label b{font-family:Montserrat,sans-serif;font-size:13px;display:block} .classif label small{display:block;color:var(--fraco);font-size:12px;line-height:1.4;margin-top:2px} .classif label input[type=radio]{margin:3px 0 0} .classif .obs{display:block;font-size:12.5px;color:var(--fraco)} .classif .obs input{margin-top:4px} /* "ver mais" de página (ver como tabela, histórico, log): um link, sem a seta de abrir, que poluía a tela */ details.mais>summary{list-style:none;cursor:pointer;color:var(--azul);font-size:13px;font-weight:600;display:inline-block} details.mais>summary::-webkit-details-marker{display:none} details.mais>summary:hover{text-decoration:underline} details.mais[open]>summary{margin-bottom:8px} /* o detalhe que antes abria dentro da linha: uma frase curta e o link */ .linha-nota{margin-top:4px;font-size:11.5px;color:var(--fraco)} .linha-nota button.link{background:none;border:0;padding:0;font:inherit;color:var(--azul);cursor:pointer;text-decoration:underline} .cx-pastas{white-space:pre-line;font-size:12px;line-height:1.45;overflow-wrap:anywhere} .cx-pastas-campo{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;width:100%;padding:8px 10px;border:1px solid var(--borda);border-radius:6px;resize:vertical;color:var(--texto);background:#fff} .link-btn{display:block;margin-top:4px;background:none;border:0;padding:0;font:inherit;font-size:11.5px;color:var(--azul);cursor:pointer;text-decoration:underline} .eq-menus{display:flex;flex-wrap:wrap;gap:8px} .eq-menus label{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:400} .fr-decide{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .fr-decide input[type=text]{flex:1 1 150px;min-width:120px;font-size:12px;padding:5px 8px} /* Os botões do cabeçalho QUEBRAM de linha. O rótulo deles não quebra no meio (`.btn{white-space:nowrap}`, e é certo: "Liberar" cortado ao meio não é botão), e dois rótulos longos lado a lado numa fila que não quebra somam mais que a largura de um celular — e o que transbordava não era o cabeçalho, era a PÁGINA: rolagem lateral em tudo, inclusive na tabela que já cabia. */ .cab .dir{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* `min-width:0` no título e na coluna dos botões: item de flex tem largura mínima igual ao seu conteúdo, e razão social sem espaço — "COMERCIALDEALIMENTOSLTDA" — é uma palavra só de 24 caracteres em 26px. Sem isto ela define a largura da página, e não o contrário. */ .cab>*{min-width:0} .cab h1,.cab .sub{overflow-wrap:anywhere} /* chave de acesso, CNPJ, caminho de pasta e e-mail: 44 caracteres sem espaço fora de tabela transbordam do mesmo jeito que dentro */ .mono{overflow-wrap:anywhere} .cartao{background:var(--papel);border:1px solid var(--borda);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:18px; box-shadow:var(--s1);transition:box-shadow .22s var(--mola),border-color .22s} .cartao:hover{box-shadow:var(--s2)} .cartao>h2{margin-bottom:14px} table{width:100%;border-collapse:collapse;font-size:14px} /* O cabeçalho PODE quebrar. Com `nowrap` ele fixava uma largura mínima para a tabela inteira — oito colunas de texto em caixa alta com espaçamento de letra somam setecentos pixels que ninguém pode reduzir —, e era daí que vinha boa parte do corte. Cabeçalho é de uma ou duas palavras: quebrar custa uma linha de altura e devolve a tabela para dentro do cartão. */ th{text-align:left;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fraco);padding:0 12px 9px;border-bottom:1px solid var(--borda)} td{padding:11px 12px;border-bottom:1px solid var(--borda);vertical-align:middle} /* Texto longo sem espaço — razão social grudada, e-mail, caminho de pasta — não pode empurrar a tabela para fora do cartão. `break-word`, e não `anywhere`: `anywhere` partia "COMERCIAL DE ALIMENTOS" no meio de uma palavra mesmo havendo espaço onde quebrar, e nome partido ao meio é o que o dono descreveu como "difícil de ler". */ td{overflow-wrap:break-word} /* CNPJ partido ao meio ("39.902.475/0" e "001-09" em linhas diferentes) não se lê nem se copia. Dentro da tabela o monoespaçado é identificador: ou cabe inteiro, ou a coluna é que está errada. */ td .mono{white-space:nowrap} /* E a pastilha faz o contrário: "nenhum caixa se comunicou nos últimos 7 dias" numa linha só empurra a tabela para fora do cartão e some do lado direito. Dentro da célula ela pode ocupar duas linhas. */ td .pill{white-space:normal} tr:last-child td{border-bottom:0} th:first-child,td:first-child{padding-left:0} th:last-child,td:last-child{padding-right:0} /* "R$ 24.878,49" quebrado em duas linhas não é número, é enigma. Vale para qualquer célula numérica: elas são curtas, e o que elas fazem com o espaço é alinhar. */ .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .rolar{overflow-x:auto} /* ===== Sanfona ===== * * POR QUE ELA EXISTE. A tela de configuração empilhava três blocos de * formulário, cada um com dois ou três parágrafos de explicação. Quem abre * essa tela quer fazer UMA coisa — trocar o certificado, ligar a consulta, * subir um XML — e tinha de rolar por tudo lendo o que não ia usar. * * A REGRA QUE FAZ ELA PRESTAR: o estado vai na linha FECHADA. Sanfona que só * esconde vira gaveta — a pessoa abre as três para descobrir onde está o que * procura, e aí perdeu duas vezes. Com "válido até 21/01/2027" e "última * consulta há 58 min" visíveis, a maioria das visitas termina sem abrir nada. * * É `
` de propósito: abre sem JavaScript, o Ctrl+F do navegador acha * o conteúdo fechado, e o leitor de tela anuncia expandido/recolhido sem que * a gente escreva uma linha de aria. */ .sanfona{border:1px solid var(--borda);border-radius:var(--r);background:var(--papel); margin:0 0 10px;overflow:hidden} .sanfona>summary{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap; padding:14px 16px;cursor:pointer;list-style:none;transition:background .15s} /* O NOME EM DESTAQUE. O contador varre a coluna de nomes para achar onde ir; se o nome tiver o mesmo peso do estado ao lado, ele lê as duas colunas em vez de uma. Tamanho de h2 e a cor do texto forte; o estado fica em cinza. */ .sanfona>summary .nome{font-family:Montserrat,sans-serif;font-size:16px;font-weight:800; letter-spacing:-.01em;color:var(--texto)} .sanfona>summary::-webkit-details-marker{display:none} .sanfona>summary::after{content:"▾";margin-left:auto;font-size:12px;color:var(--fraco); transition:transform .18s var(--mola)} .sanfona[open]>summary::after{transform:rotate(180deg)} .sanfona>summary:hover{background:var(--fundo)} .sanfona[open]>summary{border-bottom:1px solid var(--borda)} /* o estado, na linha fechada: é o que evita abrir para descobrir */ .sanfona>summary .estado{font-family:"Open Sans",sans-serif;font-weight:400; font-size:13px;color:var(--fraco)} /* A SETA DA PRÓXIMA SEÇÃO. Configurar é percorrer as seções em ordem. Sem a seta, terminar uma quer dizer fechá-la, procurar a seguinte na lista e abri-la — três gestos entre dois campos. Ela fica depois do ▾ (que é abrir/fechar, outra coisa) e diz no title para onde leva, para o clique não ser adivinhação. */ .sanfona>summary .prox{order:2;flex:0 0 auto;margin-left:10px;width:24px;height:24px;padding:0; border:1px solid var(--borda);border-radius:50%;background:transparent;color:var(--fraco); font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:border-color .15s,color .15s,transform .15s var(--mola)} .sanfona>summary .prox:hover{border-color:var(--azul);color:var(--azul);transform:translateX(2px)} .sanfona>summary::after{order:1} .sanfona .miolo{padding:14px 16px 16px} .sanfona .miolo>p:first-child{margin-top:0} /* ===== Lista padrão ===== Ordenar, filtrar por campo, paginar e exportar, em qualquer tabela que esteja dentro de .lista. O comportamento está em lista.html; aqui fica o que ele precisa para parecer uma peça só. */ .lista-topo{display:flex;gap:14px;align-items:flex-start;justify-content:space-between; flex-wrap:wrap;margin:0 0 12px} .lista-filtros{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0} /* Eram 11ch e cresciam para 18ch no foco: o nome da coluna não cabia em repouso ("Série/Núme…") e a barra inteira pulava a cada clique. Agora cada campo cabe um nome de coluna e não muda ao focar — pular no foco é o tipo de movimento que faz perder o lugar onde se estava. */ .lista-filtros .rot{font-size:11px;color:var(--fraco);text-transform:uppercase; letter-spacing:.05em;align-self:center;font-family:Montserrat,sans-serif;font-weight:700} .lista-filtros input{padding:6px 9px;border:1px solid var(--borda);border-radius:var(--r-sm); font:inherit;font-size:12.5px;background:var(--papel);color:var(--texto); flex:1 1 13ch;min-width:10ch;max-width:22ch} .lista-filtros input:focus{outline:2px solid var(--azul-claro);outline-offset:-1px} .lista-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .lista-acoes select{padding:6px 9px;border:1px solid var(--borda);border-radius:var(--r-sm); font:inherit;font-size:12.5px;background:var(--papel);color:var(--texto)} .lista-pe{display:flex;gap:14px;align-items:center;justify-content:center; margin-top:14px;font-size:12.5px;color:var(--fraco)} .lista-pe button[disabled]{opacity:.4;cursor:default} th.ordenavel{cursor:pointer;user-select:none} th.ordenavel:hover{color:var(--azul)} th.ordenavel::after{content:"";opacity:.25;margin-left:5px} th.ordenavel.asc::after{content:"▲";opacity:.8} th.ordenavel.desc::after{content:"▼";opacity:.8} /* A LINHA VIRA CARTÃO QUANDO A LISTA É ESTREITA, e não quando a JANELA é. * * Era `@media (max-width:760px)`, e essa é a pergunta errada — a mesma que já * tinha deixado o ranking transbordar duas vezes. Uma lista pode ser estreita * numa tela larga: a tabela de empresas dentro de um cartão, o batimento * dentro de uma aba, qualquer lista numa coluna. Nesses casos a media query * nunca dispara, a tabela rola de lado, e rolagem de lado é o mesmo que * esconder metade das colunas: a pessoa não descobre que elas existem. * * Com `@container`, a lista reflui pela PRÓPRIA largura, esteja onde estiver. * A media query fica logo abaixo como rede para navegador sem suporte. */ .lista{container-type:inline-size} @container (max-width:760px){ .lista .rolar{overflow-x:visible} .lista table,.lista thead,.lista tbody,.lista tr,.lista td{display:block;width:auto} .lista thead{position:absolute;left:-9999px} .lista tbody tr{border:1px solid var(--borda);border-radius:var(--r); padding:10px 12px;margin-bottom:10px;background:var(--papel);box-shadow:var(--s1)} .lista tbody td{display:flex;gap:12px;justify-content:space-between;align-items:baseline; border:0;padding:5px 0;text-align:left!important} .lista tbody td::before{content:attr(data-rot);color:var(--fraco);font-size:11.5px; text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto;max-width:45%} .lista tbody td:empty{display:none} /* Em cartão, largura de COLUNA não quer dizer nada — e o `min-width` posto no para a tabela caber (a composição do recebimento pede 230px) somava com o rótulo e jogava 216px de página para fora no celular. Aqui ela morre, o par rótulo/valor quebra em duas linhas quando não cabe, e a pastilha longa deixa de ser uma palavra só. */ .lista tbody td{flex-wrap:wrap;min-width:0!important} .lista tbody td>*{min-width:0;max-width:100%} .lista tbody td .pill{white-space:normal} /* Os filtros ocupam a linha inteira, em grade. Em coluna, e dividindo a linha com Excel e PDF, cada campo ficava com ~60px de largura e 13ch de ALTURA (o flex-basis vira altura numa coluna): caixas altas, uma em cima da outra, com o nome cortado. O dono viu no celular em 10/10/2026. */ .lista-filtros{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr))} .lista-filtros .rot{grid-column:1/-1} .lista-filtros input,.lista-filtros input:focus{width:100%;max-width:none;min-width:0} } @media (max-width:760px){ .lista .rolar{overflow-x:visible} .lista table,.lista thead,.lista tbody,.lista tr,.lista td{display:block;width:auto} .lista thead{position:absolute;left:-9999px} .lista tbody tr{border:1px solid var(--borda);border-radius:var(--r); padding:10px 12px;margin-bottom:10px;background:var(--papel);box-shadow:var(--s1)} .lista tbody td{display:flex;gap:12px;justify-content:space-between;align-items:baseline; border:0;padding:5px 0;text-align:left!important} .lista tbody td::before{content:attr(data-rot);color:var(--fraco);font-size:11.5px; text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto;max-width:45%} .lista tbody td:empty{display:none} /* Em cartão, largura de COLUNA não quer dizer nada — e o `min-width` posto no para a tabela caber (a composição do recebimento pede 230px) somava com o rótulo e jogava 216px de página para fora no celular. Aqui ela morre, o par rótulo/valor quebra em duas linhas quando não cabe, e a pastilha longa deixa de ser uma palavra só. */ .lista tbody td{flex-wrap:wrap;min-width:0!important} .lista tbody td>*{min-width:0;max-width:100%} .lista tbody td .pill{white-space:normal} .lista-filtros{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(130px,100%),1fr))} .lista-filtros .rot{grid-column:1/-1} .lista-filtros input,.lista-filtros input:focus{width:100%;max-width:none;min-width:0} } /* Impressão: a lista inteira, sem os controles nem o menu. É o "PDF" do botão — o navegador já sabe gerar um, e gerar do lado do servidor seria manter um segundo desenho da mesma tabela. */ @media print{ aside,.barra,.fbar,.lista-topo,.lista-pe,.abas,.nav-emp,.tipos-doc,.btn{display:none!important} .conteudo{margin:0;padding:0} .lista tbody tr[hidden]{display:table-row!important} /* No papel a carteira sai como tabela, mesmo que a tela esteja em cartões: página impressa de cartões não é relatório, e o "PDF" do botão tem de entregar a lista inteira e não a página que estava à vista. */ #vista-cards{display:none!important} #vista-lista{display:block!important} .cartao{box-shadow:none;border:0;padding:0} a[href]::after{content:""} } .pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;font-family:Montserrat,sans-serif} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.al{background:var(--alerta-bg);color:var(--alerta)} .pill.er{background:var(--erro-bg);color:var(--erro)} .pill.n{background:var(--borda);color:var(--fraco)} .btn{display:inline-block;font-family:Montserrat,sans-serif;font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:7px;border:1px solid var(--azul);background:var(--azul);color:#fff;cursor:pointer} .btn:hover{background:var(--navy-2);text-decoration:none} .btn.sec{background:var(--papel);color:var(--azul)} .btn.sec:hover{background:#eef4fb} .btn.laranja{background:var(--laranja);border-color:var(--laranja)} .btn.laranja:hover{background:var(--laranja-2)} .btn.mini{padding:5px 11px;font-size:12.5px} /* A zona de perigo do fim da Configuração da empresa (01.4-05, NOVA-14): desativar e excluir juntos, longe do resto. A margem de cima é maior que a dos cartões vizinhos para separar do que vem antes, e cada ação é um bloco separado do outro por um fio. */ .zona-perigo{border-color:var(--erro);margin-top:36px} .zona-perigo>h2{color:var(--erro)} .perigo-item{padding:14px 0;border-top:1px solid var(--borda)} .perigo-item:first-of-type{border-top:0} .perigo-item h3{margin:0 0 4px} .btn.perigo{background:var(--erro);border-color:var(--erro);color:#fff} .btn.perigo:hover{background:#8a3322;border-color:#8a3322} /* o rótulo do botão não quebra no meio nem some numa célula estreita: era isso que escondia "Liberar" e "Recusar" na fila de pedidos. Abaixo de 480px o `nowrap` inverte de lado: "Gerar novos códigos de recuperação" numa linha só mede 344px e leva a PÁGINA para fora da tela. Ali as listas já viraram cartão, então quebrar o rótulo não esconde mais nada. */ .btn{white-space:nowrap;max-width:100%} @media(max-width:480px){.btn{white-space:normal;overflow-wrap:break-word}} input[type=text],input[type=password],input[type=email],input[type=date]{ font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--borda);border-radius:7px;background:#fff;color:var(--texto);width:100%} /* Pedido de demonstração: telefone e número são `tel` e `number` (teclado certo no celular) e ficavam de fora da regra acima, com a aparência crua do navegador. Restrito ao formulário para não mexer na largura dos campos numéricos das outras telas. */ form.pedido-demo input[type=tel],form.pedido-demo input[type=number]{ font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--borda);border-radius:7px;background:#fff;color:var(--texto);width:100%} input:focus{outline:2px solid var(--azul-claro);outline-offset:0;border-color:var(--azul-claro)} label{display:block;font-size:12.5px;font-weight:600;color:var(--fraco);margin-bottom:5px} form.linha{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap} form.linha>div{flex:1;min-width:150px} /* Tela do lote de certificados. O nome do arquivo vem de fora e pode ser uma palavra só de 80 letras com sublinhados ("COMERCIO_DE_..._0001.pfx"): sem permissão para quebrar em qualquer ponto ele alarga a tabela e leva a página para o lado. O seletor de escritório tem opções do tamanho de uma razão social e, sem largura própria, faz o mesmo com o formulário. */ .lote-arquivo{overflow-wrap:anywhere} form.lote-envio>div{flex:1 1 180px;min-width:0} form.lote-envio>div:first-child{flex:2 1 240px} form.lote-envio select,form.lote-envio input{width:100%;max-width:100%;min-width:0} form.lote-envio textarea{width:100%;max-width:100%;min-width:0;box-sizing:border-box} .lote-senhas{-webkit-text-security:disc} .lote-filial{display:block;font-size:13px;margin:4px 0} /* A barra da situação da carteira: cada pedaço é uma situação, na largura do que ela pesa, com a legenda embaixo dizendo o número (a cor sozinha não basta para quem não distingue cor). */ .faixa-estado{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--borda);margin:4px 0 10px} .faixa-estado .seg{display:block;height:100%;min-width:3px} .seg.ok{background:var(--ok)}.seg.al{background:var(--alerta)}.seg.er{background:var(--erro)}.seg.n{background:#b7c2d3} .faixa-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--fraco)} .faixa-legenda li{display:flex;align-items:center;gap:6px} .faixa-legenda i.seg{display:inline-block;width:10px;height:10px;border-radius:3px} .faixa-legenda b{color:var(--texto);font-family:Montserrat,sans-serif} /* A visão geral do Dashboard (visao_geral.go): a rosca das empresas à esquerda e uma barra por processo à direita; no celular, uma embaixo da outra. */ .visao-geral .vg{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:24px;align-items:start} .visao-geral .vg-situacao{display:flex;flex-direction:column;align-items:center;gap:12px} .visao-geral .vg-leg{flex-direction:column;gap:6px} .visao-geral .vg-processos{display:grid;gap:14px;min-width:0} .visao-geral .vg-rot{font-weight:600;font-size:14px;color:var(--texto)} .visao-geral .vg-linha .faixa-estado{margin:6px 0 6px} @media(max-width:720px){.visao-geral .vg{grid-template-columns:minmax(0,1fr)}} /* a carteira à vista: a contagem, o que ela quer dizer e o botão do conserto em lote, numa linha só; o fio da esquerda diz o peso (vermelho para, laranja pede atenção, cinza informa) */ .consertos{display:grid;gap:8px} .conserto{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px; border:1px solid var(--borda);border-left:3px solid #b7c2d3;border-radius:8px;padding:10px 12px;background:var(--papel)} .conserto.er{border-left-color:var(--erro)}.conserto.al{border-left-color:var(--alerta)} .conserto>b{font-family:Montserrat,sans-serif;font-size:22px;font-weight:800;min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums} .conserto .tit{display:block;font-weight:600} .conserto .txt{display:block;font-size:12.5px;color:var(--fraco)} @media (max-width:560px){.conserto{grid-template-columns:auto minmax(0,1fr)}.conserto>form,.conserto>a{grid-column:1 / -1}} /* barras horizontais: o rótulo, a barra na proporção da maior e o número */ .barras-h{display:grid;gap:6px} .barra-h{display:grid;grid-template-columns:110px minmax(0,1fr) 3em;align-items:center;gap:10px;font-size:13px} .barra-h .rot{color:var(--fraco)} .barra-h .trilho{height:12px;background:var(--borda);border-radius:6px;overflow:hidden} .barra-h .trilho i{display:block;height:100%;border-radius:6px;min-width:2px} .barra-h b{font-family:Montserrat,sans-serif;text-align:right;font-variant-numeric:tabular-nums} /* as pendências por tipo: nome comprido, graves e demais na mesma barra; no celular o nome sobe para cima da barra */ .pend-tipos .barra-h{grid-template-columns:minmax(0,15em) minmax(0,1fr) 3em} .pend-tipos .trilho{display:flex} .pend-tipos .trilho i{border-radius:0} .pend-tipos .barra-h.on .rot{font-weight:700;color:var(--azul)} @media (max-width:640px){.pend-tipos .barra-h{grid-template-columns:minmax(0,1fr) 3em;row-gap:3px} .pend-tipos .rot{grid-column:1 / -1}} /* a dica: a frase curta que explica a tela onde a dúvida nasce */ .dica{font-size:13px;color:var(--fraco);background:var(--fundo,#f5f7fb);border-left:3px solid var(--azul-claro,#7aa7e0); padding:8px 12px;border-radius:0 6px 6px 0;margin:8px 0 12px} .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:14px} /* Duas famílias de indicador na mesma tela. Os três primeiros são a leitura do dia e ganham o tamanho — caber um valor de seis dígitos numa linha só faz parte do trabalho deles. O resto é vigilância: existe para estar certo, e só puxa o olho quando está errado. Sem essa divisão os seis pesam igual, e seis coisas com o mesmo peso não são uma leitura, são uma lista. */ .grade.destaques{grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))} .grade.destaques .kpi{padding:18px 20px} /* `cqi` é a largura do cartão, não da janela: "R$ 21.267.125,03" em 32px pede 270px, e o cartão tem 265px de área útil numa tela de notebook. Com a conta feita na largura do cartão, o valor encolhe só quando precisa. */ .grade.destaques .kpi b{font-size:clamp(21px,7.6cqi,32px);white-space:nowrap} /* auto-fill, e não auto-fit: com dois vigias numa tela larga, esticar cada um até a metade da página dá a eles um tamanho que a informação não tem */ .grade.mini{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))} .grade.mini .kpi{padding:13px 16px} .grade.mini .kpi b{font-size:21px} /* O cartão de indicador ganhou um fio de cor no topo. Ele não é enfeite: a cor diz o estado (azul normal, laranja o destaque, verde bom, vermelho ruim) antes de qualquer leitura, e é a mesma linguagem das pílulas. */ /* `container-type` para o número poder ceder pela largura DO CARTÃO, que é o que manda: a grade dá 305px numa tela de 1366 e 358px numa de 390, e é por isso que "cortar" nunca foi problema de celular — era de qualquer largura em que o valor não cabia. */ .kpi{position:relative;overflow:hidden;background:var(--papel);border:1px solid var(--borda); border-radius:var(--r);padding:16px 18px;box-shadow:var(--s1);container-type:inline-size} .kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tipo,var(--grad-azul));opacity:.9} .kpi b{display:block;font-family:Montserrat,sans-serif;font-size:clamp(20px,9cqi,29px);font-weight:800; letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums;max-width:100%} .kpi span{font-size:12.5px;color:var(--fraco)} .kpi.destaque{border-color:#f0d9b6;box-shadow:0 0 0 3px #fdf1de} .kpi.destaque::before{background:var(--grad-laranja)} .kpi.bom::before{background:linear-gradient(135deg,var(--ok),#3fbf85)} .kpi.ruim::before{background:linear-gradient(135deg,var(--erro),#e0705a)} /* O tipo do documento. Cada classe só define --tipo, e quem pinta é o componente (var(--tipo)). Variável de CSS HERDA: nunca ponha a classe de tipo num contêiner que tenha outros elementos de tipo dentro, ou todos pegam a cor dele. Sem tipo, o fio do cartão fica no azul de sempre. */ .t-cupom{--tipo:var(--t-cupom)} .t-nfe-ent{--tipo:var(--t-nfe-ent)} .t-nfe-sai{--tipo:var(--t-nfe-sai)} .t-cte{--tipo:var(--t-cte)} .t-nfse{--tipo:var(--t-nfse)} /* a situação do documento no sistema contábil (tela Chegada no contábil): o mesmo --tipo, com as cores de ok, erro e alerta; o que não tem resposta fica em cinza, mais claro quanto menos se sabe */ .s-conf{--tipo:var(--ok)} .s-rec{--tipo:var(--erro)} .s-agu{--tipo:var(--alerta)} .s-sem{--tipo:#8fa1b8} .s-ent{--tipo:#cdd8e6} /* o fio de quem tem tipo é um pouco mais grosso: é a cor que o identifica. CSS puro não seleciona "quem tem --tipo", então a lista é explícita. */ .kpi.t-cupom::before,.kpi.t-nfe-ent::before,.kpi.t-nfe-sai::before,.kpi.t-cte::before,.kpi.t-nfse::before{height:3px} /* GRUPO DE CARTÕES DE MESMA LARGURA (o Movimento da empresa, o painel do escritório, as notas do dia). Colunas fixas e iguais: 4, 2 ou 1 por fileira, nunca 3 mais 1 sobrando. `auto-fill`/`auto-fit` aqui é proibido: é ele que deixa um cartão sozinho na última fileira, que foi a queixa do dono. O contêiner é o .grupo-kpi (a própria grade não pode consultar a si mesma), e a largura que manda é a do bloco, não a da janela. */ .grupo-kpi{container-type:inline-size;margin-bottom:18px} .grupo-tit{margin:0 0 8px;font-family:Montserrat,sans-serif;font-size:12.5px;font-weight:600; color:var(--fraco);text-transform:uppercase;letter-spacing:.04em} .grade.grupo{grid-template-columns:repeat(2,minmax(0,1fr))} .grade.grupo .kpi{padding:14px 16px} /* `cqi` é a largura do cartão: "R$ 21.267.125,03" pede cerca de 8,4 vezes o tamanho da fonte, então 9cqi deixa o valor em ~76% da largura útil */ .grade.grupo .kpi b{font-size:clamp(17px,9cqi,28px);white-space:nowrap} .grade.grupo .kpi .faisca{width:calc(100% + 32px);margin:8px -16px -14px} @container (min-width:880px){.grade.grupo{grid-template-columns:repeat(4,minmax(0,1fr))}} @container (max-width:399px){.grade.grupo{grid-template-columns:minmax(0,1fr)}} /* rede para navegador sem container query: pela janela, mesmas três faixas */ @supports not (container-type:inline-size){ .grade.grupo{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:1280px){.grade.grupo{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:480px){.grade.grupo{grid-template-columns:minmax(0,1fr)}} } /* título do Movimento com o botão Análise fiscal ao lado */ .cab-mov{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px} .cab-mov h2{margin:0} /* a linha de texto em cima de um grupo de cartões: o total e o último documento */ .linha-resumo{margin:0 0 10px;font-size:13px;color:var(--fraco)} .linha-resumo b{color:var(--texto);font-family:Montserrat,sans-serif;font-weight:700} /* a linha de explicação embaixo de um gráfico ou grupo de cartões */ .nota-fraca{margin:10px 0 0;font-size:13px;color:var(--fraco)} /* Peças que o painel do escritório e o monitor de cobertura usam; todas pintam com var(--tipo) e o texto fica na cor de texto. */ .card-tipos{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0} .contador{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--texto); background:var(--fundo);border:1px solid var(--borda);border-radius:20px;padding:3px 10px; white-space:nowrap;cursor:pointer} .contador::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--tipo,var(--fraco))} .contador-vazio{font-size:11.5px;color:var(--fraco)} .grafico .seg{fill:var(--tipo)} .legenda-tipos{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--fraco);margin-top:12px} .legenda-tipos b{color:var(--texto);font-variant-numeric:tabular-nums} .legenda-tipos i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;background:var(--tipo)} .tipo-marca{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;background:var(--tipo)} /* o número que dá para clicar precisa parecer clicável */ .kpi.clic{display:block;color:inherit;transition:border-color .2s,box-shadow .2s var(--mola),transform .2s var(--mola)} .kpi.clic:hover{border-color:transparent;box-shadow:var(--brilho);transform:translateY(-3px);text-decoration:none} /* a fagulha vai no rodapé do cartão, sangrando nas laterais: ela é forma, não leitura, e encostar nas bordas é o que a faz parecer parte do cartão */ .kpi .faisca{display:block;width:calc(100% + 36px);height:30px;margin:8px -18px -16px} .kpi .faisca .tra{fill:none;stroke:#2f8ce8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:desenha 1.1s var(--mola) .2s forwards} .kpi.clic span{color:var(--azul)} .card-atalhos{display:flex;gap:8px;flex-wrap:wrap;padding-top:11px;margin-top:11px;border-top:1px solid var(--borda)} .card-atalhos span{font-size:11.5px;font-weight:600;color:var(--azul);background:#eef4fb; border:1px solid var(--borda);border-radius:20px;padding:3px 11px;cursor:pointer} .card-atalhos span:hover{background:var(--azul);color:#fff;border-color:var(--azul)} .kpi.bom b{color:var(--ok)} .kpi.ruim b{color:var(--erro)} .aviso{border-left:3px solid var(--alerta);background:var(--alerta-bg);color:#7a4a10;padding:11px 15px;border-radius:0 7px 7px 0;margin-bottom:16px;font-size:14px} .aviso.erro{border-color:var(--erro);background:var(--erro-bg);color:#7d2f20} .codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:19px;font-weight:600;letter-spacing:.16em;background:var(--navy);color:#fff;padding:7px 13px;border-radius:7px;display:inline-block} .mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--fraco)} /* Régua do mês. Um quadradinho por dia, na ordem do calendário. A cor diz o estado e o número dentro diz o dia, então não precisa de legenda para ler, só para conferir. Quadrado pequeno de propósito: o mês inteiro tem que caber numa olhada, senão vira mais uma coisa para rolar. */ .regua{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 12px} .rd{width:30px;height:30px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:700;font-family:Montserrat,sans-serif;font-variant-numeric:tabular-nums; border:1px solid var(--borda);background:var(--borda);color:var(--fraco)} .rd:hover{text-decoration:none;outline:2px solid var(--azul-claro);outline-offset:1px} .rd.fechado{background:var(--ok-bg);border-color:#bfe4d0;color:var(--ok)} .rd.pendente{background:var(--alerta-bg);border-color:#f0d5ab;color:var(--alerta)} .rd.sem-movimento{background:var(--papel);border-color:var(--borda);color:#aab6c6} .rd.faltando{background:var(--erro-bg);border-color:#eeb7ab;color:var(--erro)} /* hoje tem só a borda azul; o azul cheio é o dia aberto na tela (que, sem escolha, é hoje). Dois azuis cheios não diziam qual dia estava na tela. */ .rd.hoje{background:var(--papel);border:2px solid var(--azul);color:var(--azul)} .rd.futuro{background:transparent;border-style:dashed;color:#c3cddb} .rd.escolhido{background:var(--azul);border-color:var(--azul);color:#fff; box-shadow:0 0 0 2px var(--papel),0 0 0 4px var(--azul)} .regua-leg{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--fraco)} .regua-leg i{width:13px;height:13px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:5px} /* Curva de movimento por hora. Duas barras por hora, a do dia na frente e a média das semanas anteriores atrás: comparar é o ponto, e sobrepor é o que permite comparar sem o olho ir e voltar. */ .curva{display:flex;align-items:flex-end;gap:3px;height:120px;margin-bottom:8px} .ch{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:16px} .ch-barras{position:relative;width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center} .ch-barras i{position:absolute;bottom:0;display:block;border-radius:4px 4px 0 0; transform-origin:50% 100%;animation:cresce .5s var(--mola) both} .ch-base{width:100%;background:#e6eef8} .ch-hoje{width:52%;background:linear-gradient(180deg,#4da3ff,#1763d6)} .ch-hoje.pico{background:linear-gradient(180deg,var(--ciano),#1763d6);box-shadow:0 3px 10px -4px rgba(23,99,214,.7)} .ch span{font-size:10px;color:var(--fraco);margin-top:5px;font-variant-numeric:tabular-nums} .curva-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fraco);margin-bottom:4px} .curva-leg i{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px;margin-right:5px;position:static} /* comparação ao lado de um número: a régua que faltava */ .comp{font-size:12px;color:var(--fraco);display:block;margin-top:3px} .comp.bom{color:var(--ok)} .comp.ruim{color:var(--erro)} /* Busca na barra. Uma caixa só, que aceita o que a pessoa tem na mão e descobre sozinha o que é. A busca de dentro da tela de cupons continua existindo para quem já sabe onde procurar. */ .busca-barra{margin-right:6px} .busca-barra input{width:230px;max-width:38vw;font-family:inherit;font-size:13px; padding:6px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10);color:#fff} .busca-barra input::placeholder{color:rgba(255,255,255,.55)} .busca-barra input:focus{outline:2px solid var(--azul-claro);outline-offset:1px; background:rgba(255,255,255,.16)} @media (max-width:820px){.busca-barra input{width:150px}} /* ===== A barra de cima no celular ===== Era a origem da rolagem lateral de TODAS as telas, e por isso aparecia mesmo em página que caberia: marca (130px) + gaveta + busca (38vw) + e-mail de quem entrou + Sair, numa fila sem quebra e com folga de 20px, somam bem mais que 380px. O navegador então rolava o documento inteiro de lado, e a conta batia com o relato: "o nome quebra e sobra rolagem". O e-mail sai da barra — e vai para o alto da gaveta do menu (.quem-menu), onde quem usa duas contas confere em qual entrou —, a busca passa a ceder espaço em vez de exigir, e as folgas encolhem. Nada é escondido atrás de gesto: o que sai é repetição. */ @media (max-width:700px){ .barra{padding:0 12px} .barra .in{gap:10px} .barra nav{gap:12px;min-width:0;flex:1} .barra nav .quem{display:none} .menu .marca-sel .quem-menu{display:block} .busca-barra{margin-right:0;min-width:0;flex:1} .busca-barra input,.busca-barra input:focus{width:100%;max-width:none} .env,.pagina-simples .env{--env-x:16px;--env-t:18px;--env-b:48px} } /* Abaixo de 560px a busca ficava com 24px a 60px, ao lado da marca e da gaveta, e a 320px passava por baixo do sino (medido em 10/10/2026: busca em x=232..256, sino em x=244..278). A busca, o sino e o Sair descem para uma segunda linha da barra, e a busca fica com a largura que sobra. */ @media (max-width:560px){ .barra .in{height:auto;padding:10px 0;flex-wrap:wrap;row-gap:8px} .barra nav{flex:1 1 100%;margin-left:0} /* a gaveta do menu começa onde a barra, agora de duas linhas, termina */ .menu{top:var(--barra-h,104px)} } /* ===== O sino ===== Um link para a lista: sem JavaScript ele leva a /painel/notificacoes, e com JavaScript o clique abre a gaveta com as mais recentes. A pastilha com o número fica sobre o ícone e some quando não há aviso novo. O sino NÃO encolhe (flex:0 0 34px): na barra de 320px quem cede espaço é a busca, que já tem min-width:0. A gaveta nasce embaixo da barra, que é o elemento posicionado mais próximo, e a largura sai da janela e não de um número fixo: min(380px, 100vw - 16px) nunca passa da tela. */ .barra nav a.sino{position:relative;display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;flex:0 0 34px;border-radius:50%;color:#c8d8ee} .barra nav a.sino:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none} .barra nav a.sino:focus-visible{outline:2px solid var(--azul-claro);outline-offset:2px} .sino .ic{width:20px;height:20px;display:block} .sino-n{position:absolute;top:-1px;right:-2px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box; border-radius:8px;background:var(--laranja);color:#07142b;font:700 10px/16px Montserrat,system-ui,sans-serif; text-align:center;pointer-events:none} .sino-n[hidden],.sino-painel[hidden]{display:none} .barra nav .sino-painel{position:absolute;top:100%;right:8px;z-index:60;width:min(380px,calc(100vw - 16px)); max-height:70vh;overflow-y:auto;background:var(--papel);color:var(--texto); border:1px solid var(--borda);border-radius:12px;box-shadow:0 12px 40px rgba(9,32,68,.22);font-size:13.5px} /* O conteúdo da gaveta. Os links moram dentro do nav da barra, que pinta todo link de azul-claro para fundo escuro: aqui o fundo é papel, e a cor volta ao texto. A rolagem é da gaveta (max-height), nunca da página. */ .barra nav .sino-painel a{color:var(--texto)} .sino-itens{list-style:none;margin:0;padding:0} .barra nav .sino-painel a.sino-item{display:block;padding:10px 14px;border-bottom:1px solid var(--borda); overflow-wrap:anywhere} .barra nav .sino-painel a.sino-item:hover,.barra nav .sino-painel a.sino-item:focus-visible{ background:#eef4fc;text-decoration:none} .barra nav .sino-painel a:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-2px} .sino-item b{display:block;font-weight:500;line-height:1.3} .sino-item.nova{box-shadow:inset 3px 0 0 var(--azul)} .sino-item.nova b{font-weight:700} .sino-item span{display:block;color:var(--fraco);font-size:12px;margin-top:2px} .sino-vazio{margin:0;padding:18px 14px;color:var(--fraco)} .sino-rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 14px;position:sticky;bottom:0;background:var(--papel);border-top:1px solid var(--borda)} .sino-rodape form{margin:0} .barra nav .sino-painel .sino-rodape a{color:var(--azul);font-weight:600} /* a linha de um aviso na lista: a não lida se destaca pela barra e pelo peso */ .lista tr.nova td:first-child{box-shadow:inset 3px 0 0 var(--azul)} .lista tr.nova .aviso-titulo{font-weight:700} .aviso-titulo{overflow-wrap:anywhere} .aviso-texto{display:block;color:var(--fraco);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere} .vazio{color:var(--fraco);font-size:14px;padding:8px 0} /* Gráficos: marcas finas, grade recessiva, texto em tinta — nunca na cor da série. O preenchimento de cada forma vem do próprio SVG (gradiente com id único por desenho), então aqui só ficam geometria, movimento e estado. */ .grafico{width:100%;height:auto;display:block;overflow:visible} .grafico .grade{stroke:var(--borda);stroke-width:1} .grafico .eixo{fill:var(--fraco);font-size:10px;font-family:ui-monospace,Consolas,monospace} .grafico .barra{transform-box:fill-box;transform-origin:50% 100%; animation:cresce .55s var(--mola) both;animation-delay:var(--d,0s);transition:filter .15s} .grafico .barra.pico{filter:drop-shadow(0 3px 9px rgba(23,99,214,.45))} .grafico .barra.sob{filter:brightness(1.1) drop-shadow(0 3px 12px rgba(23,99,214,.5))} .grafico .area{animation:aparece .8s var(--mola) .12s both} .grafico .linha{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;animation:desenha 1.2s var(--mola) .1s forwards} /* a faixa de mouse cobre a coluna inteira: acertar a barra de um dia fraco com o ponteiro é trabalho, e trabalho aqui não tem por quê */ .grafico .hit{fill:transparent;cursor:pointer} .grafico .hit:hover{fill:rgba(62,155,255,.07)} .grafico .guia{stroke:var(--azul-claro);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .12s} .grafico .guia.on{opacity:.8} /* a etiqueta que segue o ponteiro. Fica fora do SVG, no fim do body, para não ser cortada pela caixa do gráfico */ .gtip{position:fixed;z-index:80;pointer-events:none;background:rgba(11,27,54,.96);color:#fff; font-size:12.5px;line-height:1.45;padding:7px 11px;border-radius:9px;box-shadow:var(--s3); max-width:250px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s var(--mola)} .gtip.on{opacity:1;transform:none} /* Rosca de composição: quanto do total é cada forma de pagamento. Um anel, não uma pizza — o furo no meio é onde mora o total, e um número no centro economiza a linha de texto que viria embaixo. */ .rosca-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .rosca{position:relative;width:152px;height:152px;flex:0 0 152px} .rosca svg{width:100%;height:100%;display:block;transform:rotate(-90deg)} .rosca .trilho{fill:none;stroke:var(--borda);stroke-width:5.4} .rosca .fat{fill:none;stroke-width:5.4;stroke-linecap:butt; stroke-dasharray:var(--dash) 100;stroke-dashoffset:var(--off); animation:gira .9s var(--mola) both;animation-delay:var(--d,0s);transition:stroke-width .15s} .rosca .fat:hover{stroke-width:7} .rosca-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;pointer-events:none} .rosca-centro b{font-family:Montserrat,sans-serif;font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .rosca-centro span{font-size:11px;color:var(--fraco)} .rosca-leg{flex:1;min-width:170px;display:flex;flex-direction:column;gap:8px;font-size:13.5px} .rosca-leg .l{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:10px;align-items:center; animation:entra .45s var(--mola) both;animation-delay:var(--d,0s)} .rosca-leg i{width:10px;height:10px;border-radius:3px} .rosca-leg .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rosca-leg .v{font-variant-numeric:tabular-nums;white-space:nowrap} .rosca-leg .v em{font-style:normal;color:var(--fraco);font-size:12px;margin-left:4px} /* O RANKING MEDE A SI MESMO, e este é o ponto. * * Ele transbordou duas vezes, e as duas por causa de largura FIXA: eram * 132+110+70 = 312px de colunas rígidas mais as folgas, dentro de colunas que * têm 260. Na primeira vez remendei com uma classe — `rk-estreito` — que * alguém tinha de lembrar de escrever, e na tela de Análise ninguém lembrou. * Remendo que depende de memória não é conserto: é a próxima ocorrência * marcada para depois. * * Duas mudanças resolvem de vez: * * 1. **Nenhuma coluna em px.** Só frações com `minmax(0,...)`, que nunca * ultrapassam o contêiner, por mais estreito que ele seja. * * 2. **@container, e não @media.** A pergunta certa nunca foi "a JANELA é * estreita?" — era "a COLUNA é estreita?". Numa tela de 1600px, a coluna * do meio da Análise tem 300, e a media query jamais dispararia. Agora o * ranking reflui pela própria largura, esteja onde estiver. * * Navegador sem @container ignora a regra e fica com a grade em frações: * apertada, nunca fora do cartão. */ .ranking{display:flex;flex-direction:column;gap:9px;container-type:inline-size} /* O nome ganhou espaço da barra: a barra informa por comprimento e uma proporção menor não muda a leitura, enquanto 87px de largura para razão social não identifica empresa nenhuma. Foi o relato: "o nome da empresa está difícil de ler". */ .rk{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.55fr); gap:10px;align-items:center;font-size:13.5px} .rk>*{min-width:0} /* Era uma linha com reticências, e razão social é justamente o que não cabe em uma linha: "COMERCIAL DE ALIMENTOS SANTA…" não identifica empresa nenhuma. Duas linhas identificam, e o `title` segue com o nome inteiro. */ .rk-nome{color:var(--texto);line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word} /* Em 620px o nome já está apertado: ele passa a ter a linha inteira, e valor e quantidade descem para a linha de baixo com a barra. */ @container (max-width:620px){ .rk{grid-template-columns:minmax(0,1fr) auto;row-gap:4px} .rk-nome{grid-column:1/-1;-webkit-line-clamp:2} .rk-barra{grid-column:1/-1;order:3} } @container (max-width:430px){ .rk{grid-template-columns:minmax(0,1fr) auto;row-gap:4px} .rk-barra{grid-column:1/-1;order:3} .rk-valor{text-align:right} .rk-qtd{grid-column:1/-1;order:4;text-align:left;margin-top:-2px} } /* `rk-estreito` continua valendo para quem quiser forçar a forma de duas linhas sem depender da medida — mas agora é escolha, não obrigação. */ .rk-estreito .rk{grid-template-columns:minmax(0,1fr) auto;row-gap:4px} .rk-estreito .rk-barra{grid-column:1/-1;order:3} .rk-estreito .rk-valor{text-align:right} .rk-estreito .rk-qtd{grid-column:1/-1;order:4;text-align:left;margin-top:-2px} .rk-barra{background:var(--borda);border-radius:6px;height:12px;overflow:hidden} .rk-barra i{display:block;height:100%;background:var(--grad-azul);border-radius:6px; transform-origin:left center;animation:enche .7s var(--mola) both;animation-delay:var(--d,0s)} .rk-valor{text-align:right;font-variant-numeric:tabular-nums;color:var(--texto)} .rk-qtd{text-align:right;font-variant-numeric:tabular-nums;color:var(--fraco);font-size:12.5px} .filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr));gap:10px;align-items:end} .filtros label{margin-bottom:4px} .filtros select,.filtros input{font-family:inherit;font-size:14px;padding:9px 11px; border:1px solid var(--borda);border-radius:7px;background:#fff;color:var(--texto);width:100%} .paginacao{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;font-size:14px;color:var(--fraco)} /* Ordenar por: links, e nao um