/* ==================================================================== cores e aparência (v1.09.0) Tudo o que tem cor sai destas variáveis. A Aparência de cada usuário (menu da conta › Aparência) só troca variáveis, pelos atributos do — nada de um segundo CSS: data-tema claro (padrão, sem atributo) · escuro · contraste data-destaque azul (padrão) · verde · grafite · vinho — a cor da marca: botões, links, item ativo data-letra normal (padrão) · grande — tudo um pouco maior (zoom de 1,125) data-densidade confortavel (padrão) · compacta — listas e formulários com menos espaço Cor fixa nova no CSS quebra o tema escuro: use uma variável (ou crie uma aqui, nos três temas). */ :root { --fundo: #f5f6f8; --superficie: #ffffff; --borda: #e2e5ea; --texto: #1d2330; --suave: #626b7a; --primaria: #1f5d8c; --primaria-escura: #174a70; --acento: #e8f0f7; --sobre-primaria: #ffffff; --ok: #1d7a4a; --ok-fundo: #e5f4ec; --alerta: #9a5b00; --alerta-fundo: #fdf1dc; --sobre-alerta: #ffffff; --erro: #b3261e; --erro-fundo: #fbe9e8; --erro-borda: #f2c4c0; --erro-escuro: #8f1e17; --sobre-erro: #ffffff; --simples: #6b4fa0; --simples-fundo: #efeaf7; --presumido: #1f5d8c; --real: #1d7a4a; /* superfícies auxiliares: campo, linha sob o mouse, cabeçalho de tabela, chip neutro, caixa de explicação */ --campo: #ffffff; --campo-off: #f5f6f8; --hover: #f3f5f8; --linha-hover: #f8fafc; --cab-tabela: #fafbfc; --neutro: #eef1f5; --explica: #f6f8fb; /* linha de nota com pendência de cadastro (amarela) e nota cancelada (vermelho-claro) */ --pend-fundo: #fff6cf; --pend-hover: #ffefb0; --pend-borda: #e0b100; --pend-texto: #9a6c00; --canc-fundo: #fdecea; --canc-hover: #fbdcd8; --canc-borda: #e57373; --canc-texto: #7a2a24; /* o painel de cadastro que abre à direita: borda e sombra na cor da marca */ --painel-borda: color-mix(in srgb, var(--primaria) 55%, transparent); --painel-sombra: -10px 0 28px color-mix(in srgb, var(--primaria) 14%, transparent); --raio: 8px; --sombra: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06); --zoom-letra: 1; color-scheme: light; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 14px; color: var(--texto); } /* cor de destaque (tema claro) — todas com texto branco em contraste AA (>= 6:1) */ :root[data-destaque="verde"] { --primaria: #1d6b4f; --primaria-escura: #15533d; --acento: #e4f2ec; } :root[data-destaque="grafite"] { --primaria: #3e4a5b; --primaria-escura: #2e3846; --acento: #eceef2; } :root[data-destaque="vinho"] { --primaria: #8a2c3e; --primaria-escura: #6e2130; --acento: #f6e9ec; } /* tema escuro: fundo azul-noite, texto claro; a cor da marca fica clara e o texto em cima dela, escuro */ :root[data-tema="escuro"] { --fundo: #121820; --superficie: #1a222c; --borda: #2f3b49; --texto: #e6e9ee; --suave: #a3adbb; --primaria: #7db3e0; --primaria-escura: #a8cdee; --acento: #1b3144; --sobre-primaria: #0f1720; --ok: #6fd09b; --ok-fundo: #15301f; --alerta: #f0b65e; --alerta-fundo: #3a2a10; --sobre-alerta: #1f1400; --erro: #f28b82; --erro-fundo: #3b1a18; --erro-borda: #6b2b26; --erro-escuro: #ffb4ab; --sobre-erro: #2a0b08; --simples: #c1aaf0; --simples-fundo: #2e2547; --presumido: #7db3e0; --real: #6fd09b; --campo: #111821; --campo-off: #1f2731; --hover: #222c38; --linha-hover: #202a35; --cab-tabela: #1e2732; --neutro: #2a3441; --explica: #1e2732; --pend-fundo: #3a3210; --pend-hover: #4a4016; --pend-borda: #c9a227; --pend-texto: #f3d36b; --canc-fundo: #3b1a18; --canc-hover: #4a201d; --canc-borda: #c25b55; --canc-texto: #f6b5ae; --painel-borda: color-mix(in srgb, var(--primaria) 60%, transparent); --painel-sombra: -10px 0 30px rgba(0,0,0,.45); --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --cp-auto: #4ade80; --cp-auto-f: #12301e; --cp-auto-b: #1f5a36; --cp-man: #fbbf24; --cp-man-f: #352a0c; --cp-man-b: #6b5414; color-scheme: dark; } :root[data-tema="escuro"][data-destaque="verde"] { --primaria: #6fc6a0; --primaria-escura: #9adbbf; --acento: #173428; } :root[data-tema="escuro"][data-destaque="grafite"] { --primaria: #aab6c6; --primaria-escura: #cdd5df; --acento: #2a313b; } :root[data-tema="escuro"][data-destaque="vinho"] { --primaria: #e59aa8; --primaria-escura: #f0bcc6; --acento: #3d1f26; } /* alto contraste: fundo branco, texto preto, bordas escuras e a marca no tom mais fechado */ :root[data-tema="contraste"] { --fundo: #ffffff; --superficie: #ffffff; --borda: #4a4f57; --texto: #000000; --suave: #2b2f36; --primaria: #0a3d66; --primaria-escura: #062a47; --acento: #dfeaf5; --ok: #0b5e33; --ok-fundo: #dff3e7; --alerta: #6b3d00; --alerta-fundo: #fdeccc; --erro: #8c1812; --erro-fundo: #fbe3e1; --erro-borda: #8c1812; --erro-escuro: #5f0f0b; --campo: #ffffff; --campo-off: #e9ebee; --hover: #e6ebf1; --linha-hover: #eef2f7; --cab-tabela: #eef0f3; --neutro: #e3e6ea; --explica: #f2f4f7; --painel-borda: var(--primaria); --painel-sombra: -6px 0 0 rgba(0,0,0,.12); --sombra: 0 0 0 1px #4a4f57; } :root[data-tema="contraste"][data-destaque="verde"] { --primaria: #0b4d35; --primaria-escura: #073826; --acento: #dcefe6; } :root[data-tema="contraste"][data-destaque="grafite"] { --primaria: #1f2933; --primaria-escura: #11181f; --acento: #e3e6ea; } :root[data-tema="contraste"][data-destaque="vinho"] { --primaria: #6a1426; --primaria-escura: #4c0d1a; --acento: #f4e1e5; } :root[data-tema="contraste"] input, :root[data-tema="contraste"] select, :root[data-tema="contraste"] textarea { border-color: #4a4f57; } :root[data-tema="contraste"] :focus-visible { outline: 3px solid var(--primaria); outline-offset: 2px; } :root[data-tema="contraste"] .link, :root[data-tema="contraste"] .grupo a.ativo { text-decoration: underline; text-underline-offset: 2px; } :root[data-tema="contraste"] .tabela td, :root[data-tema="contraste"] .tabela th { border-bottom-color: #9aa0a8; } /* letra grande: tudo um pouco maior (o mesmo zoom que a fonte do Gestor já usa); a altura das faixas que ocupam a tela inteira divide pelo zoom para o pé do menu não sair da tela */ :root[data-letra="grande"] { --zoom-letra: 1.125; } :root[data-letra="grande"] body { zoom: 1.125; } * { box-sizing: border-box; } body { margin: 0; background: var(--fundo); } [hidden] { display: none !important; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } .sub { color: var(--suave); margin: 4px 0 0; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--campo); width: 100%; color: var(--texto); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); border-color: var(--primaria); } label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; color: var(--suave); font-size: 13px; } .primario { background: var(--primaria); color: var(--sobre-primaria); border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 600; } .primario:hover { background: var(--primaria-escura); } .link { background: none; border: 0; color: var(--primaria); padding: 6px 8px; } .perigo { color: var(--erro); } /* Excluir: o botão que não tem volta. Vermelho cheio, para não ser confundido com Editar ou Cancelar; e o passo de confirmação em âmbar, que é a cor do "pare e leia" em toda a tela. A mudança de cor é o que avisa que o próximo clique vale — o rótulo sozinho ("Confirmar") já foi lido como continuação, não como aviso. Os dois nomes de atributo existem porque duas telas escreveram o mesmo passo com nomes diferentes; a cor cobre as duas. */ .excluir { background: var(--erro); color: var(--sobre-erro); border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 600; } .excluir:hover { background: var(--erro-escuro); } .excluir[data-confirma="1"], .excluir[data-confirmar="1"] { background: var(--alerta-fundo); color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); } .excluir[data-confirma="1"]:hover, .excluir[data-confirmar="1"]:hover { background: var(--alerta-fundo); filter: brightness(.95); } /* dentro da linha de uma lista ele convive com *Editar*, que é link: menor, para o vermelho continuar sendo aviso e não peso. */ .lt-acoes .excluir { padding: 5px 12px; font-size: 13px; } .erro { color: var(--erro); min-height: 1em; margin: 4px 0; } .dica { color: var(--suave); font-size: 12px; margin: 4px 0; } /* dica do que falta fazer (bairro sem região, por exemplo) */ .dica.pendente-txt { color: var(--alerta); font-weight: 600; } .marca { font-weight: 700; letter-spacing: .3px; color: var(--primaria); font-size: 18px; } .marca span { font-weight: 400; color: var(--suave); } /* login */ .login { min-height: calc(100vh / var(--zoom-letra)); display: grid; place-items: center; padding: 16px; } .login-card { background: var(--superficie); padding: 32px; border-radius: 12px; box-shadow: var(--sombra); width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; } .login-card h1 { font-size: 20px; } /* layout */ .app { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 56px 1fr; min-height: calc(100vh / var(--zoom-letra)); } /* O menu Gestor usa a MESMA grade do sistema (menu lateral + conteúdo): desde a v0.23.0 ele tem quatro telas, e duas abas no topo já não davam conta. Quem aprendeu a se mexer num lado se mexe no outro sem reaprender. */ #tela-gestor .topo { position: sticky; top: 0; z-index: 3; height: 56px; } /* Matriz de direitos: uma linha por tela, uma coluna por ação. As colunas de ação são estreitas e centradas — o que se lê é a linha. */ .tabela.matriz th:not(:first-child), .tabela.matriz td:not(:first-child) { text-align: center; width: 1%; white-space: nowrap; } .tabela.matriz th { font-size: 11px; } /* No painel de perfis são seis ações e o espaço é estreito: apertar a célula faz as seis caberem sem cortar a última, que é o que empurrava *PDF* para fora e dava a impressão de tela quebrada. */ #matriz-permissoes .tabela.matriz th, #matriz-permissoes .tabela.matriz td { padding-left: 6px; padding-right: 6px; } #matriz-permissoes .tabela.matriz td:first-child { font-size: 13px; } /* Dentro do painel a matriz pode não caber: rola só ela, não a página. */ .rola-lado { overflow-x: auto; } /* Linha de telefone ou de e-mail: tudo lado a lado, como o Jota pediu. As larguras são proporcionais ao que cabe em cada campo — DDD são 2 dígitos, e um campo de 2 dígitos com 200px de largura mente sobre o que se espera. A linha **quebra** quando não cabe (painel estreito, celular). Por isso cada item tem um traço embaixo: sem ele, uma linha quebrada parece duas. */ .linha-item { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--borda); } .linha-item:last-child { border-bottom: 0; } .linha-item select, .linha-item input { min-width: 0; } .linha-item .c-tipo { width: 86px; flex: none; } .linha-item .c-ddd { width: 52px; flex: none; } .linha-item .c-numero { width: 106px; flex: none; } .linha-item .c-ramal { width: 64px; flex: none; } .linha-item .c-sit { width: 86px; flex: none; } .linha-item .c-email { flex: 1 1 180px; } .linha-item .link.perigo { padding: 2px 4px; flex: none; min-width: 0; } /* Campo de senha com o olho encostado nele, sem empurrar o layout. */ .senha-campo { display: flex; gap: 6px; align-items: center; } .senha-campo input { flex: 1; min-width: 0; } .senha-campo .olho { background: none; border: 1px solid var(--borda); border-radius: 6px; color: var(--suave); padding: 7px 9px; display: grid; place-items: center; } .senha-campo .olho[aria-pressed="true"] { color: var(--primaria); border-color: var(--primaria); } .senha-criada { border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin: 8px 0; } .troca-senha { border-left: 2px solid var(--borda); padding-left: 10px; margin: 8px 0; } /* Histórico dentro do painel do Gestor: mesma aparência do da empresa. */ .historico { list-style: none; margin: 0; padding: 0; } .historico li { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13px; } .historico li.vazio { color: var(--suave); border: 0; } .historico .quando { color: var(--suave); } .historico .mud { margin-left: 12px; color: var(--suave); } .historico del { color: var(--erro); text-decoration: line-through; } .historico ins { color: var(--primaria); text-decoration: none; } .topo { grid-column: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: var(--superficie); border-bottom: 1px solid var(--borda); } .topo-dir { display: flex; align-items: center; gap: 14px; } .escopo { background: var(--acento); color: var(--primaria); padding: 3px 10px; border-radius: 999px; font-size: 12px; } .menu { background: var(--superficie); border-right: 1px solid var(--borda); padding: 0 10px 12px; display: flex; flex-direction: column; grid-row: 1 / -1; grid-column: 1; position: sticky; top: 0; height: calc(100vh / var(--zoom-letra)); } .menu-itens { flex: 1; overflow-y: auto; min-height: 0; } .grupo .grupo { margin-left: 12px; } .grupo .grupo summary { font-weight: 500; } .menu-logo { height: 96px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--borda); margin: 0 -10px 12px; padding: 12px; } .menu-logo img { max-height: 72px; max-width: 180px; object-fit: contain; } .menu-logo .marca { font-size: 20px; } .grupo { margin-bottom: 4px; } .grupo summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-weight: 600; color: var(--texto); user-select: none; } .grupo summary::-webkit-details-marker { display: none; } .grupo summary:hover { background: var(--hover); } .grupo summary .seta { width: 16px; height: 16px; margin-left: auto; color: var(--suave); transition: transform .15s; } .grupo[open] summary .seta { transform: rotate(90deg); } .grupo a { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 22px; margin: 2px 0 2px 12px; border-left: 2px solid var(--borda); border-radius: 0 6px 6px 0; color: var(--texto); text-decoration: none; } .grupo a:hover { background: var(--hover); } .grupo a.ativo { background: var(--acento); color: var(--primaria); font-weight: 600; border-left-color: var(--primaria); } /* v1.16.0: o submenu (Tabelas) dentro de um grupo — a linha dele fica na altura dos itens, e os itens dele um degrau mais para dentro */ .grupo .grupo.subgrupo { margin: 2px 0 2px 12px; } .grupo .subgrupo > summary { padding: 7px 10px 7px 22px; border-left: 2px solid var(--borda); border-radius: 0 6px 6px 0; font-weight: 500; color: var(--suave); } .grupo .subgrupo > summary .ico { width: 16px; height: 16px; } .grupo .subgrupo > a { margin-left: 24px; } .ico { width: 18px; height: 18px; flex: none; } .menu-rodape { margin-top: auto; font-size: 11px; color: var(--suave); padding: 10px 10px 2px; text-align: center; } .menu-versao { font-size: 11px; color: var(--suave); padding: 0 10px 2px; text-align: center; font-variant-numeric: tabular-nums; } .menu-botao { display: none; background: none; border: 0; color: var(--texto); padding: 6px; margin-right: 8px; } .topo-titulo { font-weight: 600; color: var(--suave); } .menu-fundo { position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 19; } .conteudo { padding: 24px; min-width: 0; } .titulo-pag { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } /* caixa de filtros: abas (Dados da empresa / Endereço) + uma grade por aba */ .filtros-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 8px; } .filtros-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; } .abas-filtro { margin: -4px 0 12px; } .abas-filtro .aba { font-size: 13px; } .filtros-caixa label { font-size: 12px; } .filtros-caixa select, .filtros-caixa input { padding: 7px 8px; } .filtros-caixa select.ativo { border-color: var(--primaria); background: var(--acento); color: var(--primaria); font-weight: 600; } .filtros-caixa .linha-acoes { margin-bottom: 0; } #limpar-filtros { white-space: nowrap; padding-bottom: 9px; } .contador { color: var(--suave); font-size: 12px; margin: 0 2px 8px; } .f-busca { grid-column: span 2; } /* tabela */ .tabela-wrap { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; } .tabela { width: 100%; border-collapse: collapse; } .tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); background: var(--cab-tabela); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela tbody tr { cursor: pointer; } .tabela tbody tr:hover { background: var(--linha-hover); } .tabela tbody tr.sel { background: var(--acento); } .tabela tr.inativa td { color: var(--suave); } .mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, Consolas, monospace; font-size: 13px; } .vazio { color: var(--suave); padding: 12px 2px; } /* selos */ .selo { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .selo.SIMPLES { background: var(--simples-fundo); color: var(--simples); } .selo.PRESUMIDO { background: var(--acento); color: var(--presumido); } .selo.REAL { background: var(--ok-fundo); color: var(--real); } /* MEI é Simples, e o selo diz isso pela cor; Isento e Exterior são estados sem tributação a apurar, e ficam neutros — cor forte para eles sugeriria uma classificação fiscal que não existe. */ .selo.MEI { background: var(--simples-fundo); color: var(--simples); } .selo.ISENTO, .selo.EXTERIOR { background: var(--neutro); color: var(--suave); } .selo.pendente { background: var(--alerta-fundo); color: var(--alerta); } .selo.ativa { background: var(--ok-fundo); color: var(--ok); } .selo.inativa { background: var(--neutro); color: var(--suave); } /* Tipo de contato: numa lista de contatos, o tipo (Financeiro, Fiscal, Sócio) é o que faz procurar — quem abre a aba quer achar o contato certo, não o primeiro. Em cinza, junto do cargo, ele se perdia no meio da linha. */ .selo.tipo { background: var(--acento); color: var(--primaria-escura); } label.destaque { color: var(--primaria-escura); font-weight: 600; } label.destaque > select, label.destaque > input { border-color: var(--primaria); background: var(--acento); } .ativ { color: var(--suave); font-size: 12px; margin-left: 6px; } /* painel lateral */ /* O painel de cadastro que abre à direita (v1.09.0): borda esquerda na cor da marca, suave (55% de opacidade), o canto de cima arredondado e uma sombra leve puxada para a mesma cor — separa o cadastro da lista sem gritar. No celular, onde ele ocupa a tela, a borda vira só um fio no alto (ver @media 760px). */ .painel { position: fixed; top: 56px; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--superficie); border-left: 3px solid var(--painel-borda); border-top-left-radius: 10px; box-shadow: var(--painel-sombra); padding: 20px; overflow-y: auto; } .painel-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; } /* flex-wrap: com sete abas (o painel do cliente no Gestor) a barra não cabe em 520px e empurrava o painel inteiro para fora da tela. Quebrar em duas linhas é mais honesto do que esconder abas atrás de uma rolagem lateral. */ .abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; } .abas .aba { white-space: nowrap; } /* as duas portas da tela de login ocupam a largura do cartão, meio a meio */ .abas-login { margin: 4px 0 18px; } .abas-login .aba { flex: 1; text-align: center; font-size: 15px; padding: 10px 8px; } .aba { background: none; border: 0; padding: 8px 12px; color: var(--suave); border-bottom: 2px solid transparent; } .aba.ativa { color: var(--primaria); border-bottom-color: var(--primaria); font-weight: 600; } .linha-acoes { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; } .linha-tempo { list-style: none; margin: 8px 0 16px; padding: 0 0 0 16px; border-left: 2px solid var(--borda); } .linha-tempo li { position: relative; padding: 10px 12px; margin: 0 0 10px; background: var(--cab-tabela); border: 1px solid var(--borda); border-radius: var(--raio); } .linha-tempo li::before { content: ""; position: absolute; left: -23px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--borda); border: 2px solid var(--superficie); } .linha-tempo li.vigente { border-color: var(--primaria); background: var(--superficie); } .linha-tempo li.vigente::before { background: var(--primaria); } .lt-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .lt-periodo { font-weight: 600; } .lt-det { color: var(--suave); font-size: 13px; margin-top: 4px; } .lt-acoes { display: flex; gap: 2px; } .form { border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--superficie); } .grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .atividades { border: 1px solid var(--borda); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px 10px; margin: 0; } .atividades legend { color: var(--suave); font-size: 13px; font-weight: 500; padding: 0 4px; } .atividades label, label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-weight: 400; } .atividades input, label.check input { width: auto; } /* A caixa de marcar dentro de uma `.grade` alinha pelo RODAPÉ da célula, para ficar na mesma linha de base do campo ao lado. Solta no formulário, porém, `align-self: end` a jogava para a DIREITA — é o eixo transversal de uma coluna —, e era isso que deixava Cliente/Fornecedor/Transportadora encostados na margem direita, longe do rótulo a que pertencem. */ label.check { align-self: start; } .grade label.check { align-self: end; padding-bottom: 8px; } /* Aba que ainda não pode ser aberta: ela aparece, para a barra não mudar de tamanho quando o cadastro for gravado, mas não responde ao clique. */ .aba:disabled { opacity: .45; cursor: not-allowed; } .historico { list-style: none; padding: 0; margin: 0; } .historico li { border-bottom: 1px solid var(--borda); padding: 10px 0; font-size: 13px; } .historico .quando { color: var(--suave); } .historico .mud { margin-top: 4px; } .historico del { color: var(--erro); } .historico ins { color: var(--ok); text-decoration: none; } .aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--fundo); padding: 10px 18px; border-radius: 8px; box-shadow: var(--sombra); } /* ---- Documento e Localização nas listas (v0.51) --------------------------- Documento: raiz 1 em negrito (o grupo), raiz 2 em azul (o estabelecimento), dígito em cinza e Matriz/Filial embaixo. Localização: Cidade/UF em destaque e a cadeia País › Região › Macro › Micro embaixo; o botão da barra troca pelas seis colunas separadas, com rolagem para o lado. */ .lista-barra { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lista-barra .contador { margin-bottom: 8px; } .loc-botao { font-size: 12px; } .docum, .loc, .nome2 { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .doc-num { font-size: 13px; color: var(--texto); } .doc-num .r1 { font-weight: 700; } .doc-num .r2 { color: var(--primaria); font-weight: 600; } .doc-num .dv { color: var(--suave); } .doc-tipo, .nome2-sub, .loc-cadeia { font-size: 11px; color: var(--suave); font-weight: 400; } .loc b, .nome2 b { font-weight: 600; } /* v1.30.12 (W81): o selo da situação cadastral (Baixada, Inapta…) embaixo do nome e embaixo do campo na ficha */ .nome2 .selo-sitcad { align-self: flex-start; margin-top: 2px; font-size: 11px; } .cu-sitcad-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; } .cu-sitcad-aviso[hidden] { display: none; } .impc-sitcad { margin-top: 4px; } .loc-cadeia, .nome2-sub { max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .c-locs { display: none; } .loc-sep { overflow-x: auto; } .loc-sep .c-loc1 { display: none; } .loc-sep .c-locs { display: table-cell; } /* ---- Menu recolhido (v0.50; rótulos desde a v1.09.0) ------------------------ No computador o menu fecha numa faixa de 80 px: cada item mostra o ícone e, embaixo, um NOME CURTO (chave `menu.curto.`, até duas linhas, 10,5 px). O grupo vira um título pequeno (`menu.curto.g_`) entre dois fios, e é ele que abre e fecha o grupo. O caminho inteiro continua no `title` (passar o mouse) e o item ativo continua realçado. O pé do menu tem o botão que abre de novo. */ .rot-curto { display: none; } .menu-recolher { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 9px 10px; border: 0; border-top: 1px solid var(--borda); background: none; color: var(--suave); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .menu-recolher:hover { background: var(--hover); color: var(--primaria); } .menu-recolher + .menu-rodape { margin-top: 0; } @media (min-width: 761px) { .app.recolhido { grid-template-columns: 80px 1fr; } .app.recolhido .menu { padding: 0 5px 10px; } .app.recolhido .menu-itens { overflow-x: hidden; scrollbar-width: thin; } .app.recolhido .menu-logo { height: 64px; padding: 8px 0; margin: 0 -5px 6px; } .app.recolhido .menu-logo > * { display: none !important; } .app.recolhido .menu-logo::before { content: attr(data-iniciais); width: 40px; height: 40px; border-radius: 8px; background: var(--primaria); color: var(--sobre-primaria); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; } .app.recolhido .menu-rodape, .app.recolhido .menu .bloqueio, .app.recolhido .grupo summary > span:not(.rot-curto), .app.recolhido .grupo summary .seta, .app.recolhido .grupo summary > .ico, .app.recolhido .grupo a .rot, .app.recolhido .menu-recolher .rot, .app.recolhido .menu-versao .rot { display: none; } .app.recolhido .menu-versao { padding: 6px 0 0; font-size: 10px; } .app.recolhido .grupo { margin: 0; padding: 2px 0 4px; border-top: 1px solid var(--borda); } .app.recolhido .grupo:first-child { border-top: 0; } .app.recolhido .grupo .grupo { margin-left: 0; } /* v1.16.0: o submenu é mais um nível na mesma faixa — o título curto ("Tabelas") entre fios tracejados */ .app.recolhido .grupo .grupo.subgrupo { margin: 2px 0 0; padding: 0 0 2px; border-top: 1px dashed var(--borda); } .app.recolhido .grupo .subgrupo > summary { border-left: 0; border-radius: 6px; padding: 5px 2px 2px; } .app.recolhido .grupo .subgrupo > summary .rot-curto { font-weight: 600; font-style: italic; } .app.recolhido .grupo .subgrupo > a { margin-left: 0; } /* o título do grupo: texto pequeno, sem ícone; com o grupo fechado, um traço embaixo lembra que há itens */ .app.recolhido .grupo summary { justify-content: center; padding: 6px 2px 3px; color: var(--suave); } .app.recolhido .grupo summary .rot-curto { display: block; font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.15; text-align: center; overflow-wrap: break-word; hyphens: manual; max-width: 100%; } .app.recolhido .grupo:not([open]) summary .rot-curto::after { content: ""; display: block; width: 16px; height: 2px; margin: 3px auto 0; border-radius: 2px; background: currentColor; opacity: .5; } /* o item: ícone em cima, nome embaixo, centrados */ .app.recolhido .grupo a { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 2px 6px; margin: 1px 0; border-left: 0; border-radius: 6px; text-align: center; } .app.recolhido .grupo a .ico { width: 20px; height: 20px; } .app.recolhido .grupo a .rot-curto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; font-size: 10.5px; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; } .app.recolhido .grupo a.ativo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primaria) 35%, transparent); } .app.recolhido .menu-recolher { justify-content: center; padding: 9px 0; } .app.recolhido .menu-recolher .ico { transform: scaleX(-1); } } @media (max-width: 760px) { .app { grid-template-columns: 1fr; } .topo { grid-column: 1; } .menu { position: fixed; top: 0; bottom: 0; left: 0; width: 260px; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra); } .menu.aberto { transform: none; } .menu-botao { display: inline-flex; } .conteudo { padding: 16px; } .grade { grid-template-columns: 1fr; } .filtros-grade { grid-template-columns: 1fr 1fr; } .escopo { display: none; } } /* blocos do painel: raiz 1 e raiz 2 */ .bloco { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; } .bloco:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .bloco-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .bloco-topo h4 { font-size: 15px; } .nota { background: var(--alerta-fundo); color: var(--alerta); border-radius: 6px; padding: 8px 10px; font-size: 13px; } .chip { display: inline-block; background: var(--neutro); border-radius: 999px; padding: 1px 8px; margin: 2px 4px 0 0; font-size: 12px; color: var(--texto); } .chip.atual { background: var(--acento); color: var(--primaria); font-weight: 600; } .origem { font-size: 11px; color: var(--suave); margin-left: 4px; } .bloco-topo button { white-space: nowrap; flex: none; } .explica { background: var(--explica); border: 1px solid var(--borda); border-radius: 6px; padding: 10px 12px; font-size: 13px; color: var(--texto); } .explica ul { margin: 6px 0 0; padding-left: 18px; } .explica li { margin: 3px 0; color: var(--suave); } .explica b { color: var(--texto); } .erro:not(:empty) { background: var(--erro-fundo); border-radius: 6px; padding: 8px 10px; } /* A faixa do cadastro bloqueado: âmbar, não vermelha. Não é erro — é um estado do contrato, e o sistema continua servindo para consultar. */ /* os dias da semana do backup: sete caixas numa linha, que quebram sozinhas no celular em vez de virarem rolagem lateral */ .dias-semana { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 12px; } /* Sem `sticky`, de propósito. O cabeçalho da aplicação também é fixo no topo: duas faixas fixas no mesmo lugar se sobrepõem, e a de cima passa a interceptar cliques de botões que estão embaixo — o teste de navegação pegou exatamente isso. A faixa aparece na entrada, que é quando ela precisa ser lida, e sai da frente quando a pessoa rola a tela. */ .faixa-bloqueio { background: var(--alerta, #b26a00); color: var(--sobre-alerta); padding: 10px 16px; text-align: center; font-weight: 600; } .selo.demonstracao { background: #ece6f8; color: #4b2f96; } :root[data-tema="escuro"] .selo.demonstracao { background: #3a2d63; color: #e4dbff; } /* v0.99.0: cliente de demonstração — listrada, para não parecer aviso de erro nem de bloqueio */ .faixa-demonstracao { position: sticky; top: 0; z-index: 29; color: #fff; padding: 6px 16px; text-align: center; font-weight: 700; letter-spacing: .02em; background: repeating-linear-gradient(135deg, #5b3fa6 0 14px, #6b4fb8 14px 28px); } /* v1.30.10: a empresa padrão foi trocada em outra aba do navegador — a pessoa escolhe qual usar nesta aba */ .faixa-outra-aba { background: var(--alerta, #b26a00); color: var(--sobre-alerta); padding: 8px 16px; text-align: center; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; align-items: center; } .faixa-outra-aba[hidden] { display: none; } .faixa-outra-aba .link { color: inherit; text-decoration: underline; font-weight: 700; } .faixa-erro { position: sticky; top: 0; z-index: 30; background: var(--erro); color: var(--sobre-erro); padding: 10px 16px; text-align: center; font-weight: 600; } .tabela th[data-ordem] { cursor: pointer; user-select: none; } .tabela th[data-ordem]:hover { color: var(--primaria); } .tabela th[data-ordem]::after { content: ""; margin-left: 4px; } .tabela th.asc::after { content: "▲"; font-size: 9px; } .tabela th.desc::after { content: "▼"; font-size: 9px; } .selo.bloqueada { background: var(--erro-fundo); color: var(--erro); } .bloqueio { background: var(--erro-fundo); border: 1px solid var(--erro-borda); border-radius: 8px; padding: 12px 14px; margin: 10px 0; color: var(--texto); } .bloqueio strong { color: var(--erro); } .bloqueio p { margin: 6px 0 10px; font-size: 13px; color: var(--suave); } /* O aviso de que o cadastro vai nascer bloqueado, dentro do formulário: a mesma cor do bloqueio já existente, para ser lido como a mesma coisa. */ .bloqueio-aviso { background: var(--erro-fundo); border: 1px solid var(--erro-borda); border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 13px; color: var(--texto); } .lt-acoes { margin-top: 8px; gap: 8px; } .lt-acoes .link { border: 1px solid var(--borda); border-radius: 6px; padding: 5px 12px; background: var(--superficie); font-weight: 600; } .lt-acoes .link:hover { border-color: var(--primaria); } .lt-acoes .link.perigo { border-color: var(--erro-borda); } .lt-acoes .link.perigo:hover { background: var(--erro-fundo); } /* logo na lista */ .emp { display: flex; align-items: center; gap: 10px; } .av { width: 30px; height: 30px; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--borda); flex: none; } .av-txt { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--primaria); background: var(--acento); border-color: transparent; } .av-txt.grande { width: 96px; height: 96px; font-size: 28px; border-radius: 12px; } /* origem do dado */ .origem-selo { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .2px; background: var(--neutro); color: var(--suave); } .origem-selo.ODBC { background: #e6f0fa; color: #1f5d8c; } .origem-selo.PLANILHA { background: #eef7ee; color: #2d6a3e; } .origem-selo.MANUAL { background: #fff4e0; color: #8a5a00; } :root[data-tema="escuro"] .origem-selo.ODBC { background: #172e44; color: #9ccaf0; } :root[data-tema="escuro"] .origem-selo.PLANILHA { background: #163222; color: #8fd6a5; } :root[data-tema="escuro"] .origem-selo.MANUAL { background: #3a2a10; color: #f0c27a; } .contagem { color: var(--suave); font-weight: 400; } .sem-borda { border: 0; padding: 0; } .titulo-pag .primario { align-self: center; } /* documentos */ .upload { margin-bottom: 16px; } .soltar { border: 2px dashed var(--borda); border-radius: 8px; padding: 18px; text-align: center; cursor: pointer; color: var(--suave); font-weight: 400; display: block; } .soltar:hover, .soltar.sobre { border-color: var(--primaria); background: var(--acento); } .soltar input { position: absolute; width: 1px; height: 1px; opacity: 0; } .soltar u { color: var(--primaria); } .docs-topo { align-items: center; margin: 4px 0 8px; } .alterna { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; } .alterna button { border: 0; background: var(--superficie); padding: 5px 12px; font-size: 12px; color: var(--suave); } .alterna button.ativa { background: var(--acento); color: var(--primaria); font-weight: 600; } .docs { list-style: none; margin: 0; padding: 0; } .docs li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borda); } .docs li.vazio { display: block; color: var(--suave); } .doc-ico { flex: none; width: 38px; height: 46px; border-radius: 4px; background: var(--neutro); color: var(--suave); font-size: 10px; font-weight: 700; display: grid; place-items: center; } .doc-ico.pdf { background: var(--erro-fundo); color: var(--erro); } .doc-info { flex: 1; min-width: 0; } .doc-info a { color: var(--texto); font-weight: 600; text-decoration: none; word-break: break-word; } .doc-info a:hover { color: var(--primaria); text-decoration: underline; } .docs .lt-acoes { margin-top: 0; flex: none; } .docs .lt-acoes a.link { text-decoration: none; } /* Fichas do painel do Gestor: contato, administrador, vigência. São itens de uma lista, e cada um precisa de uma borda para se ler como um item só. */ .doc { padding: 10px 0; border-bottom: 1px solid var(--borda); } .doc[data-c] { cursor: pointer; margin: 0 -8px; padding: 10px 8px; border-radius: 6px; } .doc[data-c]:hover { background: var(--acento); } .doc-nome { font-weight: 600; } .doc-detalhe { font-size: 13px; color: var(--suave); } .doc .selo { margin-left: 6px; } .doc .link { padding: 0; font-size: 13px; } .docs p.vazio { color: var(--suave); padding: 10px 0; } /* logo no painel */ .logo-edit { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; } .logo-grande { width: 120px; min-height: 96px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 10px; background: #fff; padding: 8px; flex: none; text-align: center; } .logo-grande img { max-width: 100%; max-height: 90px; object-fit: contain; } .logo-grande small { color: var(--suave); font-size: 11px; } .botao-arquivo { display: inline-flex; flex-direction: row; cursor: pointer; color: var(--sobre-primaria); font-size: 14px; margin-right: 8px; } input:disabled, select:disabled, textarea:disabled { background: var(--campo-off); color: var(--suave); cursor: not-allowed; } /* ============ região: trilha (País › Estado › …) e bandeira ============ */ .trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 10px; font-size: 13px; } .trilha .link { padding: 4px 6px; font-weight: 600; } .trilha .sep { color: var(--suave); } .trilha .aqui { padding: 4px 6px; color: var(--suave); font-weight: 600; } .av.bandeira { object-fit: cover; } .av.av-foto { object-fit: cover; border-radius: 50%; } .topo .av-foto { width: 28px; height: 28px; } .logo-grande .av-foto { width: 96px; height: 96px; } .c-acoes { text-align: right; white-space: nowrap; } #tab-regiao tbody tr { cursor: pointer; } /* ================= idioma e celular ================= */ .idioma-sel { width: auto; padding: 5px 8px; font-size: 13px; border-color: transparent; background: transparent; color: var(--suave); } .idioma-sel:hover { border-color: var(--borda); } .idiomas { display: flex; justify-content: center; } .idiomas select { width: auto; border-color: transparent; color: var(--suave); text-align: center; } .filtros-botao { display: none; align-items: center; gap: 8px; width: 100%; justify-content: center; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 11px; margin-bottom: 10px; font-weight: 600; color: var(--texto); } .filtros-botao[aria-expanded="true"] { border-color: var(--primaria); color: var(--primaria); } /* O botão das listas só existe no celular (no computador os filtros ficam à vista). O do histórico vale nos dois: lá a lista é longa em qualquer tela. */ .filtros-botao.sempre { display: flex; } /* v0.61 (item 3): toda grade tem o botão Filtros, no computador também. A caixa recolhida mostra só a busca; o resto abre no botão, que traz a contagem do que está aplicado, com o Limpar ao lado. */ .filtros-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .filtros-barra .filtros-botao { display: inline-flex; width: auto; padding: 7px 14px; margin: 0; } .filtros-barra .filtros-limpar { padding: 6px 12px; } .filtros-caixa:not(.aberto) .abas, .filtros-caixa:not(.aberto) .linha-acoes, .filtros-caixa:not(.aberto) .filtros-grade > :not(.f-busca):not(:has(input[type=search])), .filtros-caixa:not(.aberto) .filtros-grade:not(:has(input[type=search])) { display: none; } .filtros-caixa:not(.aberto):not(:has(input[type=search])) { display: none; } @media (max-width: 760px) { /* respeita o recorte da tela (iPhone) */ .topo { padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); gap: 6px; } .conteudo { padding: 14px calc(14px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-right)); } .so-desktop, .topo-titulo { display: none; } .topo-dir { margin-left: auto; gap: 4px; } .idioma-sel { font-size: 12px; padding: 4px; max-width: 110px; } #sair { white-space: nowrap; } h2 { font-size: 19px; } .titulo-pag { gap: 10px; } .titulo-pag .primario { width: 100%; padding: 12px; } /* campos com 16px evitam o zoom automático do iOS ao tocar */ input, select, textarea, .soltar { font-size: 16px; } .primario, .link, .aba, .alterna button { min-height: 40px; } .filtros-barra .filtros-botao { flex: 1; justify-content: center; padding: 11px; } .filtros-grade { grid-template-columns: 1fr 1fr; } .f-busca { grid-column: 1 / -1; } #limpar-filtros { grid-column: 1 / -1; } /* a tabela vira uma lista de cartões */ .tabela-wrap { border: 0; background: none; overflow: visible; } .tabela thead { display: none; } .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; } .tabela tr { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; } .tabela tr.sel { border-color: var(--primaria); } .tabela td { border: 0; padding: 0; white-space: normal; } .c-codigo { grid-column: 1; } .c-situacao { grid-column: 2; grid-row: 1; justify-self: end; } .c-empresa { grid-column: 1 / -1; font-weight: 600; font-size: 15px; margin-top: 2px; } .c-cnpj, .c-mun, .c-origem, .c-regime { grid-column: 1 / -1; font-size: 13px; color: var(--suave); } /* nas listas sem coluna de código (usuários, perfis) o nome abre o cartão */ #tab-usuarios .c-empresa, #tab-perfis .c-empresa, #tab-regiao .c-empresa { grid-column: 1; grid-row: 1; margin-top: 0; } #tab-regiao .c-cnpj::before, #tab-regiao .c-mun::before, #tab-regiao .c-regime::before, #tab-regiao .c-origem::before { content: attr(data-r) ": "; } #tab-regiao .c-acoes { grid-column: 2; grid-row: 1; justify-self: end; } .trilha { font-size: 12px; } #tab-usuarios .c-regime::before, #tab-perfis .c-mun::before, #tab-perfis .c-origem::before, #tab-perfis .c-cnpj::before { content: attr(data-r) ": "; } .c-mun::before, .c-origem::before, .c-regime::before { content: attr(data-r) ": "; } .c-loc1 { grid-column: 1 / -1; font-size: 13px; color: var(--suave); } .loc-sep .c-loc1 { display: block; } .c-locs, .loc-sep .c-locs, .loc-botao { display: none !important; } .loc-cadeia, .nome2-sub { max-width: none; } .c-regime .ativ { margin-left: 4px; } .tabela td.vazio { text-align: center; } /* v0.82 (revisão, V2): rótulo só quando a coluna tem nome, e célula sem valor não vira linha solta */ .tabela td:not([data-r])::before, .tabela td[data-r=""]::before { content: none !important; } .tabela td[data-vazio] { display: none; } /* v0.82 (V8): dois selos de situação no cartão (homologação e situação) ficam um embaixo do outro */ .tabela td.c-situacao + td.c-situacao { grid-row: 2; } /* painel ocupa a tela toda */ /* z-index acima da faixa de demonstração/bloqueio (sticky, 29–30): em tela cheia ela cobria o título do painel */ .painel { z-index: 31; top: 0; width: 100vw; border-left: 0; border-top: 3px solid var(--painel-borda); border-radius: 0; box-shadow: none; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); } .painel-topo { position: sticky; top: 0; background: var(--superficie); padding: 14px 0 10px; z-index: 2; border-bottom: 1px solid var(--borda); } .painel-topo .fechar { font-size: 20px; padding: 4px 10px; } .abas { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .abas::-webkit-scrollbar { display: none; } .aba { white-space: nowrap; } .bloco-topo { flex-direction: column; align-items: stretch; } .bloco-topo button { width: 100%; } .logo-edit { flex-direction: column; } .botao-arquivo { width: 100%; justify-content: center; } .docs li { flex-wrap: wrap; } .docs .lt-acoes { width: 100%; justify-content: flex-end; } .aviso { left: 16px; right: 16px; transform: none; text-align: center; bottom: calc(20px + env(safe-area-inset-bottom)); } } /* telas bem estreitas */ @media (max-width: 400px) { .filtros-grade { grid-template-columns: 1fr; } .topo-titulo { font-size: 13px; } } /* Filtros do histórico: caixa discreta acima da lista, dentro do painel de 520px — por isso os campos vão em duas colunas e as datas lado a lado. */ .filtros-hist { background: var(--explica); border: 1px solid var(--borda, #e3e6ea); border-radius: 8px; padding: 10px 12px 4px; margin-bottom: 12px; } .filtros-hist { margin-top: 8px; } .filtros-hist .grade { gap: 10px; } .filtros-hist label { font-size: .82rem; } .filtros-hist [data-limpa-hist] { margin: 2px 0 8px; } /* Busca dentro de uma aba do painel: caixa simples no topo da lista, com a contagem do que sobrou ao lado. */ .busca-aba { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .busca-aba input { flex: 1 1 auto; } .busca-aba .origem { white-space: nowrap; } /* Documento com dígito errado: a borda avisa junto com o texto, porque em formulário longo a linha de aviso pode estar fora da vista. */ .campo-invalido { border-color: var(--perigo, #b3261e); } .campo-invalido:focus { outline-color: var(--perigo, #b3261e); } /* Cartões de número do painel do Gestor: o número grande e o rótulo embaixo. Sem gráfico de propósito — são dezenas de clientes, e número escrito responde mais rápido do que barra que se mede com o olho. */ .cartoes-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .cartao-num { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; } .cartao-num strong { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--primaria); } .cartao-num strong .origem { font-size: 1rem; font-weight: 400; } .cartao-num span { color: var(--suave); font-size: .86rem; } /* Cartão que filtra: clicar nele reorganiza o painel inteiro para aquele recorte, e clicar de novo desfaz. Só os que filtram viram botão — cartão que não faz nada com cara de clicável é promessa que a tela não cumpre. */ button.cartao-num { width: 100%; text-align: left; font: inherit; cursor: pointer; } button.cartao-num:hover { border-color: var(--primaria); } .cartao-num[aria-pressed="true"] { border-color: var(--primaria); background: var(--acento); } .cartao-num.B strong { color: var(--alerta); } .cartao-num.I strong { color: var(--suave); } /* a faixa que diz em que recorte o painel está, com a saída ao lado */ .recorte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--acento); border-radius: var(--raio); padding: 8px 12px; margin-bottom: 14px; } .recorte strong { color: var(--primaria-escura); } /* O cruzamento do endereço: País › Região › Macro › Micro › Município › Região da cidade. Lista de leitura, não formulário — sem caixa, sem marcador, e o rótulo em negrito para o olho achar a linha que procura. */ .cruzamento { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--suave); } .cruzamento b { color: var(--texto); font-weight: 600; } /* Dentro da lista de endereços ele é resumo, não ficha: uma linha só que quebra quando precisa, sem herdar o espaçamento e a régua que `.docs li` dá a cada item — seis linhas por endereço tornariam a lista ilegível, que é o oposto de mostrar o cruzamento nela. */ .doc .cruzamento { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; } .doc .cruzamento li { display: inline; padding: 0; border: 0; } /* Troca da marca, no canto onde ela aparece: discreto até passar o olho. Ocupa a linha inteira embaixo do nome, para não disputar espaço com ele. */ .marca-troca { display: block; width: 100%; margin-top: 6px; text-align: center; font-size: 12px; color: var(--suave); cursor: pointer; background: none; border: 0; } .marca-troca:hover { color: var(--primaria); text-decoration: underline; } /* Lista de escolher vários: parceiros a vincular a uma pessoa. Rola sozinha quando passa de uma tela, para o botão Vincular não fugir para baixo. */ .lista-escolha { max-height: 300px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 6px; padding: 6px 10px; display: grid; gap: 2px; } .lista-escolha label.check { padding: 2px 0; } /* Vínculo encerrado continua na lista, apagado: tirá-lo esconderia a resposta de "de quem era este parceiro em março?". */ tr.apagada td { opacity: .6; } /* Ação que não existe naquela tela: traço apagado, não caixa. Caixa que não faz nada é pior do que nenhuma — parece direito que se esqueceu de marcar. */ .tabela.matriz td.vazia { color: var(--suave); opacity: .4; } /* A matriz de direitos é uma tabela por grupo do menu; o bloco dá o respiro entre eles que a pilha de antes não tinha. */ #matriz-permissoes .bloco + .bloco { margin-top: 14px; } /* O que o parceiro é: um cartãozinho por tipo. Ler três cartões é mais rápido do que conferir três caixas marcadas entre outras tantas. */ .cartoes-tipo { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; } .cartao-tipo { display: flex; align-items: flex-start; gap: 10px; background: var(--acento); color: var(--primaria-escura); border-radius: 8px; padding: 8px 10px; font-size: 13px; min-width: 140px; } .cartao-tipo .origem { font-size: 11px; opacity: .8; } .cartao-tipo .fechar { color: inherit; font-size: 14px; line-height: 1; padding: 0 2px; } /* ---------------------------------------------------------- cadastros unificados (v0.60) */ .cu-secao { margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } form > .cu-secao:first-child, form > p.dica:first-child + .cu-secao { border-top: 0; padding-top: 0; margin-top: 4px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chips button { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 4px 12px; font-size: 13px; } .chips button.ativa { background: var(--acento); border-color: var(--primaria); color: var(--primaria); font-weight: 600; } .chips button:disabled { cursor: default; opacity: .75; } .chips button .contagem { color: var(--suave); font-weight: 400; margin-left: 2px; } .cu-filtro { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; } .cu-filtro > input[type=search] { flex: 1 1 200px; width: auto; } .cu-filtro > select { flex: 0 1 200px; width: auto; } .cu-filtro-hist { display: block; } .cu-filtro-hist .chips { margin-top: 6px; } .linha-tempo li.vigente { border-color: var(--primaria); box-shadow: inset 3px 0 0 var(--primaria); } .cu-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; } .cu-checks .check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-weight: 400; } .cu-checks .check input { width: auto; } .cu-versoes { margin-top: 6px; font-size: 13px; } .cu-versoes summary { cursor: pointer; color: var(--primaria); } .cu-versoes ul { margin: 6px 0 0; padding-left: 18px; color: var(--suave); } .cu-meta { margin-top: 8px; } .cu-class { margin: 4px 0 8px; } .cu-sit-atual { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cu-pend { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; align-self: center; border-radius: 50%; margin-left: 6px; vertical-align: middle; } .cu-pend.pend-erro { background: var(--erro); } .cu-pend.pend-aviso { background: #d98a00; } .cu-sujo-aviso { position: sticky; bottom: 0; margin: 12px 0 0; padding: 8px 12px; background: var(--alerta-fundo); color: var(--alerta); border-radius: 6px; font-weight: 600; font-size: 13px; } .cu-dialogo { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .cu-caixa { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; max-width: 420px; width: 100%; } .cu-caixa p { color: var(--suave); } .cu-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0 4px; } .cu-visao { flex-direction: row; align-items: center; gap: 8px; } .cu-visao select { width: auto; min-width: 180px; } .cu-lote { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin: 4px 0; background: var(--acento); border-radius: 6px; } .cu-lote .form { flex-basis: 100%; background: var(--superficie); } .c-sel { width: 36px; text-align: center; } .c-sel input { width: auto; } .c-class .chip { margin: 1px 0; } @media (max-width: 700px) { .cu-filtro > select, .cu-visao select { flex: 1 1 100%; width: 100%; } .cu-visao { flex-direction: column; align-items: stretch; width: 100%; } } .explica + .bloco-topo { margin-top: 12px; } .cu-docs > li { flex-wrap: wrap; } .cu-docs > li > .doc-info { flex: 1 1 calc(100% - 60px); min-width: 0; } .cu-docs > li > .lt-acoes { flex-basis: 100%; justify-content: flex-end; flex-wrap: wrap; } .cu-versoes li { display: list-item; padding: 2px 0; border: 0; background: none; margin: 0; } .cu-lote .form { padding: 12px; } /* v0.61 (item 4): faixa de "salvo" no alto do painel */ .cu-faixa { position: relative; border-radius: var(--raio); margin: 0 0 12px; padding: 4px 36px 4px 0; overflow: hidden; } .cu-faixa p { margin: 0; padding: 8px 12px; font-size: 13px; } .cu-faixa-ok { background: var(--ok-fundo); color: var(--ok); border-left: 4px solid var(--ok); } .cu-bloco-holding:not(:empty) { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 18px; } /* v1.22.0 */ .cu-bloco-holding .cu-faixa-aviso { padding: 8px 12px; border-radius: var(--raio); font-size: 13px; } .cu-faixa-aviso { background: var(--alerta-fundo); color: var(--alerta); border-left: 4px solid #d98a00; } .cu-faixa-fechar { position: absolute; top: 6px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--suave); padding: 2px 8px; } .cu-destaque { outline: 2px solid var(--primaria); outline-offset: 2px; transition: outline-color 1s; } /* v0.61: bloco "Na Receita Federal" e descrições de CNAE */ .cu-receita { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; align-items: baseline; } .cu-receita > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .cu-cnaes { margin: 2px 0 8px 16px; padding: 0; } .cu-cnaes li { margin: 2px 0; } /* v0.62: Produto */ .painel-largo { width: min(680px, 100vw); } .pr-homolog { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 10px; background: var(--acento); border-radius: var(--raio); } .pr-homolog .primario, .pr-homolog button { margin-left: auto; } .pr-trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin: 10px 0; font-weight: 600; } .pr-cascata { display: flex; flex-direction: column; } .pr-nivel { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; position: relative; } .pr-nivel:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0; width: 2px; background: var(--borda); } .pr-bola { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--superficie); border: 2px dashed #d98a00; color: var(--alerta); } .pr-nivel.feito .pr-bola { background: var(--primaria); color: var(--sobre-primaria); border: 0; } .pr-nivel.nao .pr-bola { border: 2px solid var(--borda); color: var(--suave); } .pr-nivel-linha { display: flex; gap: 8px; margin-top: 4px; } .pr-nivel-linha select, .pr-nivel-linha input { flex: 1; } .pr-falta { padding: 8px 12px; border-radius: var(--raio); font-size: 13px; } .pr-arvore, .pr-arvore ul { list-style: none; margin: 0; padding-left: 18px; } .pr-arvore { padding-left: 0; } .pr-no { border-left: 2px solid var(--borda); padding: 4px 0 4px 10px; margin: 4px 0; } .pr-no.inativa > .pr-no-linha { opacity: .55; } .pr-no-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pr-no-form { margin: 8px 0; } /* v1.31.9: + e − para recolher e expandir os nós da árvore */ .pr-no-tg { min-width: 26px; height: 26px; padding: 0 6px; line-height: 1; font-weight: 700; font-size: 1rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--superficie); color: var(--texto); cursor: pointer; } .pr-no-tg:hover { background: var(--hover); } .pr-no-tg:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; } .pr-no-tg-vazio { display: inline-block; width: 26px; } .pr-no-qtd { color: var(--suave); } .pr-arv-ferr { margin: 6px 0; flex-wrap: wrap; align-items: center; } .pr-arv-ate { display: inline-flex; gap: 6px; align-items: center; } /* v1.31.11: os níveis fixos da árvore (Tipo › Origem › Tipo do Item) — roxo do tema (as variáveis --simples mudam com o tema claro, escuro e alto contraste) */ .selo.fixo { background: var(--simples-fundo); color: var(--simples); } .pr-no.fixo { border-left-color: color-mix(in srgb, var(--simples) 45%, transparent); } .pr-no.fixo > .pr-no-linha > strong { color: var(--simples); } .pr-no-produtos { margin: 4px 0 4px 34px; padding: 0; list-style: none; font-size: 13px; } .pr-no-produtos li { margin: 2px 0; } .pr-ramo-campos { margin: 6px 0; } /* v1.31.11: Importar árvore (painel lateral em 3 passos) */ .aia-passos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .aia-passo { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--neutro); color: var(--suave); } .aia-passo.at { background: var(--primaria); color: var(--sobre-primaria); font-weight: 600; } .aia-passo.ok { background: var(--ok-fundo); color: var(--ok); } .aia-soltar { border: 2px dashed var(--borda); border-radius: 10px; padding: 22px; text-align: center; color: var(--suave); margin: 10px 0; } .aia-soltar.sobre { border-color: var(--primaria); background: var(--acento); } .aia-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; } .aia-cartao { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; } .aia-cartao b { display: block; font-size: 20px; } .aia-cartao span { font-size: 12px; color: var(--suave); } .aia-novos { margin: 6px 0 0; padding-left: 18px; font-size: 13px; } @media (max-width: 760px) { .aia-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* v1.31.11: Parâmetros › Itens › Finalidade do item — a tabela Tipo do Item × uso */ .fdi-cel { font-weight: 700; min-width: 32px; } .fdi-cel.sim { color: var(--ok); } .fdi-cel.nao { color: var(--erro); } .fdi-modos { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; } .fdi-modos label.fdi-modo { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: normal; } .fdi-modos label.fdi-modo input { width: auto; margin-top: 3px; flex: none; } /* v1.31.11: o item fora da finalidade — a faixa e a janela "Liberar item fora da finalidade" */ .fdi-bloqueio { margin: 8px 0; } .fdi-fundo { position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; } .fdi-modal { background: var(--superficie); color: var(--texto); border-radius: 10px; width: min(560px, 100%); box-shadow: 0 12px 36px rgba(16,24,40,.22); } .fdi-mcab { padding: 14px 18px; border-bottom: 1px solid var(--borda); font-weight: 600; } .fdi-mcorpo { padding: 14px 18px; } .fdi-mcorpo label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--suave); } .fdi-mcorpo textarea { width: 100%; min-height: 60px; } .fdi-mrod { padding: 12px 18px; border-top: 1px solid var(--borda); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } tr.clicavel { cursor: pointer; } /* caminho de volta ao cadastro que abriu a tela de classificações */ .cu-volta { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .cu-volta .link { font-weight: 600; } /* v0.62 (item 26): anexos do Simples, um por linha, na largura toda */ fieldset.anexos-simples { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px; } fieldset.anexos-simples .dica { margin: 4px 0 0; } /* código gerado pelo sistema (item 25): o campo fica, só leitura */ input.cu-auto { background: #eef4ff; color: #1d4ed8; border-color: #93b4f5; border-style: dashed; font-weight: 600; cursor: not-allowed; } :root[data-tema="escuro"] input.cu-auto { background: #172554; color: #bfdbfe; border-color: #3b5bab; } .cu-codigo-auto { margin: 4px 0 0; font-weight: normal; } /* v0.63 — Parâmetros: Vale para (cliente › raiz 1 › raiz 2) */ .param-escopo { margin: 0 0 12px; } .param-escopo label { max-width: 560px; } .param-escopo .dica { margin: 4px 0 0; } #form-param-raiz label.param-proprio { color: var(--primaria); font-weight: 600; } #form-param-raiz label.param-proprio select, #form-param-raiz label.param-proprio input { border-color: var(--primaria); } /* v0.64 — Simulador fiscal e tributação por operação */ .fs-tab td.num, .fs-tab th.num { text-align: right; white-space: nowrap; } .fs-tab td.fs-fund { font-size: .9em; color: var(--suave); } .fs-tab td.fs-fund .dica { display: block; margin-top: 2px; } .fs-tab tr.clicavel { cursor: pointer; } .fs-tab tr.clicavel:hover td { background: var(--fundo); } .fs-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .fs-pend { background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); padding: 8px 12px; margin: 8px 0; } .fs-pend ul { margin: 4px 0 0; padding-left: 18px; } .fs-movimento { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; margin: 8px 0; } .fs-movimento p { margin: 4px 0; } .fs-obs ul { margin: 4px 0 0; padding-left: 18px; } .fs-obs li { margin: 2px 0; } /* v1.24.0 — Tributação por operação: os impostos federais pelo regime */ .fs-fed td .dica { display: block; margin-top: 2px; } .fs-simulado { background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); padding: 6px 10px; font-weight: 600; } .fs-totais { text-align: right; margin: 8px 0; } .fs-fontes { margin: 8px 0; } .fs-fontes summary { cursor: pointer; font-weight: 600; color: var(--primaria); } .fs-fontes tr.fs-falta td { color: var(--alerta); } .linha-acoes.esquerda { justify-content: flex-start; gap: 12px; align-items: flex-end; } /* item 28 (v0.65): fora do Simples — escolher Real ou Presumido */ .cu-fora-simples { background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); padding: 10px 14px; margin: 10px 0; } .cu-fora-simples p { margin: 4px 0 8px; color: var(--texto); } /* item 3 (v0.65): IE na SEFAZ */ .cu-ie { border-radius: var(--raio); padding: 8px 12px; margin: 4px 0 10px; font-size: .95em; } .cu-ie .dica { display: block; margin-top: 2px; } .cu-ie.ok { background: var(--ok-fundo); color: var(--ok); } .cu-ie.aviso { background: var(--alerta-fundo); color: var(--alerta); } .cu-ie.erro { background: var(--erro-fundo); color: var(--erro); } .cu-ie.info { background: var(--fundo); color: var(--suave); } /* v1.10.0: "Buscar na SEFAZ" e o resultado da consulta automática, logo abaixo do campo da IE */ .cu-ie-auto { margin: -4px 0 8px; font-size: .9em; } .cu-ie-auto .erro { display: inline; } /* listas grandes (v0.65) */ tr.cu-mais td { text-align: center; color: var(--suave); padding: .6rem; cursor: default; } tr.cu-mais button { margin-left: .5rem; } /* Configuração › Integrações (v0.65) */ .integ-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .integ-cartao { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie); } .integ-cartao p { margin: 6px 0 0; } .integ-cartao.descartada { opacity: .8; } .integ-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .selo.integ-ativa { background: var(--ok-fundo); color: var(--ok); } .selo.integ-bat, .selo.integ-prevista { background: var(--acento); color: var(--primaria); } .selo.integ-analise { background: var(--alerta-fundo); color: var(--alerta); } .selo.integ-descartada { background: var(--erro-fundo); color: var(--erro); } .integ-grade { margin-top: 14px; } .integ-topo .selo { white-space: nowrap; } /* Produto › Tabela NCM (v0.66) */ table.tncm td.tncm-desc { white-space: normal; min-width: 320px; max-width: 640px; } table.tncm td.tncm-desc .dica { display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } table.tncm td { vertical-align: top; } table.tncm td .dica { display: block; } /* importação por planilha (v0.67) */ .acoes-titulo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .painel.painel-largo { width: min(860px, 100vw); } .imp-contagem { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .imp-contagem .selo { font-size: .95em; padding: 4px 10px; } .imp-tabela td { vertical-align: top; } .imp-tabela .erro-txt { color: var(--erro); } .imp-envio { border: 2px dashed var(--borda); border-radius: var(--raio); padding: 16px; text-align: center; margin: 12px 0; } .secundario, a.botao, label.botao { display: inline-block; background: var(--superficie); color: var(--primaria); border: 1px solid var(--primaria); border-radius: 6px; padding: 8px 14px; font-weight: 600; text-decoration: none; } .secundario:hover, a.botao:hover, label.botao:hover { background: var(--acento); } .cf-item { margin: 14px 0 20px; } .cf-dest { margin: 10px 0 16px; } .cf-item h4 { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 6px; } label.botao { cursor: pointer; font-size: inherit; } .cf-sit { white-space: normal; min-width: 280px; } .cf-sit .dica { display: block; } /* v0.75 — pendência dentro de uma aba (ex.: contabilista não informado) */ .cu-pendencia { background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); padding: 8px 12px; font-weight: 600; margin: 8px 0; } .selo.principal { background: var(--acento); color: var(--primaria-escura); } /* v0.76 — obrigações por regime */ .selo.obr-obrigada { background: var(--acento); color: var(--primaria-escura); } .sped-chip { display: block; width: fit-content; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borda); color: var(--suave); background: var(--superficie); } .sped-chip.OBRIGADA { color: var(--primaria-escura); background: var(--acento); border-color: transparent; } .sped-chip.DEPENDE { color: var(--alerta); background: var(--alerta-fundo); border-color: transparent; } .sped-chip.DISPENSADA { color: var(--ok); background: var(--ok-fundo); border-color: transparent; } .obr-manchete { border-radius: var(--raio); padding: 10px 14px; margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; background: var(--fundo); border: 1px solid var(--borda); } .obr-manchete span { color: var(--suave); font-size: 13px; } .obr-manchete.OBRIGADA { background: var(--acento); border-color: transparent; } .obr-manchete.DEPENDE { background: var(--alerta-fundo); border-color: transparent; } .obr-manchete.DISPENSADA { background: var(--ok-fundo); border-color: transparent; } .doc.obr-DISPENSADA .doc-nome { color: var(--suave); } .obr-tab td { white-space: normal; vertical-align: top; } /* v1.14.0 (A40) — pesquisas do IBGE na aba Obrigações */ .pia-painel { margin-top: 14px; padding-top: 6px; border-top: 1px dashed var(--borda); } .pia-painel .bloco-topo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; } .pia-ano select { margin-left: 6px; width: auto; } .pia-provavel { border-radius: var(--raio); padding: 10px 14px; margin: 8px 0; border: 1px solid var(--borda); background: var(--fundo); } .pia-provavel.sim { background: var(--acento); border-color: transparent; } .pia-provavel > div:first-child { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .pia-provavel > div:first-child span { color: var(--suave); font-size: 13px; } .pia-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 18px; margin-top: 8px; } .pia-numeros > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pia-pessoal { display: flex; gap: 8px; align-items: center; } .pia-pessoal input { width: 110px; } .pia-anexos { display: flex; flex-wrap: wrap; gap: 4px 16px; } .pia-hist { margin-top: 6px; font-size: 13px; } .pia-hist ul { margin: 4px 0 0; padding-left: 18px; } .pia-hist li { display: list-item; padding: 2px 0; } .pia-numeros .selo { align-self: flex-start; } .pia-card form [hidden] { display: none; } .painel-pia { margin: 8px 0 14px; } .pia-ed-tab input[type="number"] { width: 90px; } .pia-ed-tab input[data-c="limite_receita"] { width: 140px; } .pia-ed-tab textarea { min-width: 220px; } .obr-tab td:nth-child(4) { min-width: 260px; } .obr-tab td:nth-child(5) { min-width: 200px; } /* v0.77 — faturamento e limites do Simples */ .lim-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-top: 4px; } .lim-chip.ok { background: var(--ok-fundo); color: var(--ok); } .lim-chip.atencao { background: var(--alerta-fundo); color: var(--alerta); } .lim-chip.excedeu { background: var(--erro-fundo); color: var(--erro); } .lim-manchete { border-radius: var(--raio); padding: 10px 14px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; background: var(--fundo); border: 1px solid var(--borda); } .lim-manchete span { color: var(--suave); font-size: 13px; } .lim-manchete.ok { background: var(--ok-fundo); border-color: transparent; } .lim-manchete.atencao { background: var(--alerta-fundo); border-color: transparent; } .lim-manchete.excedeu { background: var(--erro-fundo); border-color: transparent; } .lim-barra { margin: 10px 0; } .lim-barra-topo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 4px; flex-wrap: wrap; } .lim-trilho { position: relative; height: 10px; border-radius: 999px; background: var(--borda); overflow: hidden; } .lim-cheio { height: 100%; border-radius: 999px; background: var(--ok); } .lim-barra.atencao .lim-cheio { background: #d08a00; } .lim-barra.excedeu .lim-cheio { background: var(--erro); } .lim-trilho i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--superficie); opacity: .9; } .lim-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 10px 0; } .lim-numeros div { display: flex; flex-direction: column; gap: 2px; } .lim-efeitos { margin: 6px 0 8px 18px; font-size: 13px; } .lim-comp { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; } .lim-tab input { width: 100%; min-width: 110px; } .lim-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; } .lim-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; } .lim-cartoes .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; } .lim-cartoes .cartao b { font-size: 24px; } .lim-cartoes .lim-excedeu b { color: var(--erro); } .lim-cartoes .lim-atencao b { color: var(--alerta); } .lim-cartoes .lim-ok b { color: var(--ok); } .aviso-txt { color: var(--alerta); } .lim-grade input { width: 100px; text-align: right; } .lim-grade td.lim-antes { color: var(--suave); text-align: center; background: var(--fundo); } /* v1.17.0: o período De–Até do faturamento e o mês antes da abertura no formulário da empresa */ .lim-periodo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0 10px; font-size: 13px; } .lim-periodo input[type="month"] { width: auto; } .lim-tab tr.lim-antes td { background: var(--fundo); color: var(--suave); } .lim-inicio { margin: 4px 0 8px; } /* v1.17.0: faturamento da empresa em grade ano × mês; a rolagem horizontal fica só dentro da grade */ .lim-valor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; font-size: 13px; } .lim-valor button { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); color: inherit; cursor: pointer; } .lim-valor button.ativo { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); } .lim-anos-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .lim-anos { border-collapse: collapse; font-size: 13px; min-width: 100%; } .lim-anos th, .lim-anos td { border-bottom: 1px solid var(--borda); padding: 4px; white-space: nowrap; text-align: right; } .lim-anos thead th { color: var(--suave); font-weight: 600; text-transform: lowercase; text-align: center; } .lim-anos tbody th { position: sticky; left: 0; background: var(--superficie); text-align: left; padding: 4px 8px; z-index: 1; } .lim-anos td.lim-fora { background: var(--fundo); color: var(--suave); text-align: center; min-width: 112px; } .lim-anos td.lim-cel { position: relative; min-width: 112px; } .lim-anos td.lim-cel.sel { box-shadow: inset 0 0 0 2px var(--primaria); } .lim-anos td.lim-cel input { width: 100%; min-width: 106px; text-align: right; padding: 6px 18px 6px 6px; } .lim-anos .lim-org { position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--primaria); opacity: .6; } .lim-anos .lim-obs { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 0 2px; font-size: 11px; color: var(--suave); opacity: .45; cursor: pointer; } .lim-anos .lim-obs.tem { opacity: 1; color: var(--primaria); } .lim-anos td.lim-total { font-weight: 700; min-width: 110px; padding-right: 8px; } .lim-obs-linha { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; } .lim-obs-linha input { flex: 1 1 14em; min-width: 0; width: auto; height: auto; } .lim-grade th, .lim-grade td { white-space: nowrap; } .lim-grade .lim-emp { white-space: normal; min-width: 200px; max-width: 260px; vertical-align: top; background: var(--superficie); } .lim-grade .lim-ano-c { position: sticky; left: 0; background: var(--superficie); z-index: 1; } .lim-grade td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* v0.79 — Movimentação › Notas fiscais (XML) */ .mov-faixa { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 8px 0 12px; } .mov-faixa select, .mov-faixa input { min-height: 36px; } .mov-mes { display: inline-flex; align-items: center; gap: 4px; } .mov-mes button { min-width: 32px; min-height: 36px; border: 1px solid var(--borda); background: var(--superficie); border-radius: var(--raio); cursor: pointer; } .mov-modo { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; } .mov-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; } .mov-cartao { text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; } .mov-cartao b { font-size: 24px; } .mov-cartao span { color: var(--suave); font-size: 13px; } .mov-cartao.sel { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--acento); } .mov-cartao.impede b { color: var(--erro); } .mov-cartao.risco b { color: var(--alerta); } .mov-soltar { display: flex; flex-direction: column; gap: 2px; border: 2px dashed var(--borda); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 12px; cursor: pointer; background: var(--superficie); } .mov-soltar b { color: var(--primaria); } .mov-soltar span { color: var(--suave); font-size: 13px; } .mov-soltar.sobre { border-color: var(--primaria); background: var(--acento); } .mov-envio { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 12px; background: var(--superficie); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .mov-envio details { flex-basis: 100%; font-size: 13px; } .mov-tab td.num, .mov-tab th.num { text-align: right; white-space: nowrap; } .mov-dl { display: grid; grid-template-columns: 170px 1fr; gap: 8px 12px; } .mov-dl dt { color: var(--suave); } .mov-dl dd { margin: 0; } .mov-ap { border-left: 4px solid var(--borda); padding: 8px 12px; margin: 8px 0; background: var(--fundo); border-radius: 0 var(--raio) var(--raio) 0; } .mov-ap.IMPEDE { border-color: var(--erro); } .mov-ap.RISCO { border-color: #d08a00; } .mov-ap.AVISO { border-color: var(--primaria); } .mov-ap p { margin: 4px 0 0; } .selo.erro { background: var(--erro-fundo); color: var(--erro); } .mov-faixa select { max-width: 360px; } /* v0.81: contadores pequenos no alto de uma lista */ .cartoes-mini { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; } /* v0.83.1: a porta da API no painel de importação */ .imp-api pre { background: var(--fundo, #f4f6f8); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px; overflow-x: auto; font-size: 12px; } .imp-api textarea { width: 100%; } /* v0.83.4: regras de ICMS — o fundamento longo não empurra a situação e as ações para fora da tela */ .rf-icms td.rf-fund { min-width: 260px; max-width: 420px; white-space: normal; } .rf-icms td.rf-fund .dica { display: block; font-size: 12px; } .rf-icms .rf-uso { white-space: nowrap; } .rf-icms td.rf-acoes { white-space: nowrap; } .link.perigo { color: var(--erro, #b3261e); } /* v0.83.6: excluir notas por período */ .mov-exc { border: 1px solid var(--borda, #e5e7eb); border-radius: 8px; padding: 12px 16px; margin: 8px 0 12px; } .mov-exc h4 { margin: 0 0 4px; } .mov-exc-resumo { margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: var(--alerta-fundo); } /* v0.83.7: Tabela CEST */ .tcest td.tcest-ncm { max-width: 320px; white-space: normal; font-size: 12px; } #tcest-conteudo select[data-tcest-seg] { max-width: 340px; } /* v0.83.10: automático (verde) × manual (amarelo), um símbolo dentro do campo */ :root { --cp-auto: #16a34a; --cp-auto-f: #ecfdf3; --cp-auto-b: #bbf7d0; --cp-man: #d97706; --cp-man-f: #fffbeb; --cp-man-b: #fde68a; } .cp-caixa { position: relative; display: block; } .cp-caixa > input, .cp-caixa > select { width: 100%; } .cp-caixa.cp-a > input, .cp-caixa.cp-a > select { border-left: 3px solid var(--cp-auto); padding-right: 36px; } .cp-caixa.cp-m > input, .cp-caixa.cp-m > select { border-left: 3px solid var(--cp-man); padding-right: 36px; } .cp-caixa.sel.cp-a > select, .cp-caixa.sel.cp-m > select, .cp-caixa.sel.cp-a > input, .cp-caixa.sel.cp-m > input { padding-right: 58px; } .cp-caixa.cp-v > input::placeholder { color: #9aa3af; font-style: italic; } .cp-ico { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; line-height: 0; } .cp-caixa.sel .cp-ico { right: 30px; } .cp-ico svg, .cp-pil svg { width: 12px; height: 12px; } .cp-ico.a { background: var(--cp-auto-f); color: var(--cp-auto); border: 1px solid var(--cp-auto-b); } .cp-ico.m { background: var(--cp-man-f); color: var(--cp-man); border: 1px solid var(--cp-man-b); } .cp-balao .cp-ico { position: static; transform: none; cursor: default; } .cp-ponto { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; border: 1.5px solid var(--superficie); } .cp-balao { position: absolute; z-index: 1000; width: 300px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(16,24,40,.16); padding: 12px 14px; font-size: 13px; } .cp-b-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 8px; } .cp-balao dl { display: grid; grid-template-columns: 104px 1fr; gap: 3px 8px; margin: 0 0 10px; } .cp-balao dt { color: var(--suave); } .cp-balao dd { margin: 0; } .cp-b-base { background: var(--fundo); border-radius: 6px; padding: 6px 8px; margin-bottom: 10px; } .cp-b-base b { font-family: ui-monospace, monospace; } .cp-b-acoes { display: flex; gap: 8px; } .cp-b-acoes button { padding: 6px 10px; font-size: 12.5px; } /* v1.19.0: a linha "Do NCM" (CEST, IPI, II, PIS/COFINS, unidade tributável) — o porquê ao passar o mouse */ .sncm:empty { display: none; } .sncm { margin: 4px 0 8px; line-height: 1.6; } .sncm-parte { border-bottom: 1px dotted var(--suave); cursor: help; white-space: nowrap; } .cp-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .cp-pil { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .cp-pil.a { background: var(--cp-auto-f); color: var(--cp-auto); } .cp-pil.m { background: var(--cp-man-f); color: var(--cp-man); } .cp-pil.v { background: var(--neutro); color: var(--suave); } .ab .cu-checks { margin: 6px 0; } .ab-lista { max-height: 320px; overflow: auto; margin: 8px 0; } .cp-b-base .dica { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* v0.83.12: primeiro passo do produto — o código de barras */ .gtin-passo { max-width: 620px; } .gtin-linha { display: flex; gap: 8px; margin: 8px 0 12px; } .gtin-linha input { flex: 1; font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: .5px; } .gtin-cartao { border: 1px solid var(--cp-auto-b, #bbf7d0); border-left: 4px solid var(--cp-auto, #16a34a); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; } .gtin-cartao > b { display: block; margin: 6px 0; } .gtin-selo { display: flex; align-items: center; gap: 6px; color: var(--cp-auto, #16a34a); font-weight: 600; font-size: 13px; } .gtin-selo .cp-ico { position: static; transform: none; } .gtin-sem { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--borda); } .gtin-sem [data-sem-form] { margin-top: 8px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .gtin-faixa { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .pc-acoes select{display:block;width:auto;min-width:0;padding:4px 8px;margin:0 0 4px} /* v0.83.13: Tabela TIPI (Ex), Natureza da receita e a escolha na aba Fiscal */ .ttipi .ttipi-ncm td{border-top:2px solid var(--borda)} .ttipi .ttipi-ex td{background:var(--fundo);font-size:.92em} .ttipi .ttipi-ex td:first-child{padding-left:28px} .tnat .tnat-grupo td{background:var(--fundo);font-size:.88em;text-transform:none;padding-top:10px} .campo-com-busca{display:flex;gap:6px;align-items:stretch} .campo-com-busca input{flex:1;min-width:0} .campo-com-busca button{white-space:nowrap;padding:4px 12px} .escolha-painel{border:1px solid var(--borda);border-radius:8px;padding:12px 14px;margin:8px 0 14px;background:var(--superficie);box-shadow:0 2px 10px rgba(0,0,0,.06)} .escolha-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px} .escolha-lista{list-style:none;margin:8px 0 0;padding:0;max-height:340px;overflow:auto} .escolha-lista li button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--borda);padding:8px 6px;cursor:pointer;color:inherit;font:inherit;line-height:1.35} .escolha-lista li button:hover,.escolha-lista li button:focus{background:var(--fundo)} .escolha-lista .dica{display:block} .escolha-painel label input{width:100%;margin-top:4px} .tnat td.tcest-ncm{max-width:240px;white-space:normal;font-size:12px} .tnat td.tcest-ncm .dica{font-family:inherit} .tnat td.tncm-desc{min-width:280px} /* v0.83.14: observações do produto e aviso da aba de observações na importação */ .obs-lista .obs-tipo{margin-top:14px} .obs-item{border:1px solid var(--borda);border-radius:8px;padding:10px 12px;margin:6px 0;background:var(--superficie)} .obs-item.inativa{opacity:.7} .obs-topo{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .obs-acoes{margin-left:auto;display:flex;gap:6px} .obs-texto{margin-top:6px;white-space:normal;line-height:1.45} .imp-obs{border:1px solid var(--borda);border-left:4px solid var(--primaria, #1f5d8c);border-radius:8px;padding:10px 14px;margin:14px 0;background:var(--superficie)} /* v0.83.15: fila de importação */ .imp-fila{border:1px solid var(--borda);border-radius:8px;padding:12px 16px;margin:10px 0;background:var(--superficie)} .imp-barra{height:10px;border-radius:6px;background:var(--fundo);overflow:hidden;margin:8px 0} .imp-barra span{display:block;height:100%;background:var(--primaria);transition:width .4s} /* v0.83.16: tabela de unidades de referência */ .uref td:nth-child(3){max-width:300px;white-space:normal;font-size:.93em} .uref td:nth-child(2){min-width:220px} .uref td:nth-child(4){min-width:150px} /* ============================================================ v0.84.0 — Vendas › Orçamento de venda Cliente (esquerda) e empresa (direita) em cartões fixos no alto, abas logo abaixo. Tabelas próprias (ov-tab) para controlar o cartão no celular. */ .ov-faixa { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 12px; } .ov-faixa > select { width: auto; min-width: 200px; } .ov-faixa > input[type=search] { flex: 1; min-width: 220px; width: auto; } .ov-faixa .primario { margin-left: auto; } .ov-periodo { flex-direction: row; align-items: center; gap: 6px; } .ov-periodo input { width: 150px; } .ov-cartoes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; } .ov-cartao { text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; } .ov-cartao b { display: block; font-size: 24px; line-height: 1.1; color: var(--primaria); } .ov-cartao span { color: var(--suave); font-size: 12.5px; } .ov-cartao.al b { color: var(--alerta); } .ov-cartao.ok b { color: var(--ok); } .ov-cartao.er b { color: var(--erro); } .ov-cartao.sel { border-color: var(--primaria); background: var(--acento); } .ov-cartao.ov-valor b { font-size: 19px; color: var(--texto); } .ov-tab { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .ov-tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); background: var(--cab-tabela); padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .ov-tab td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .ov-tab .num { text-align: right; font-variant-numeric: tabular-nums; } .ov-tab .nw { white-space: nowrap; } .ov-tab .mono, .ov-cab .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; } .ov-lst tbody tr, .ov-itab tbody tr.ov-it, .ov-rtab tbody tr { cursor: pointer; } .ov-lst tbody tr:hover, .ov-itab tr.ov-it:hover { background: var(--linha-hover); } .ov-tab tr.sel td { background: var(--acento); } .ov-ckc { width: 34px; padding-right: 0 !important; } .ov-ck { width: 18px; height: 18px; accent-color: var(--primaria); margin: 0; } .ov-volta { margin-bottom: 6px; } .ov-tit { font-size: 20px; } /* topo fixo */ .ov-fixo { position: sticky; top: 0; z-index: 6; background: var(--fundo); padding-top: 4px; margin: -4px 0 0; } .ov-cab { display: flex; align-items: flex-start; gap: 14px; } .ov-cab .ov-volta-l { padding: 0 0 2px; font-size: 13px; } .ov-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ov-cartoes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .ov-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 16px; min-width: 0; } .ov-card h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin-bottom: 4px; } .ov-card.ov-cli { border-left: 4px solid var(--primaria); } .ov-card.ov-emp { border-left: 4px solid #6b7a90; } .ov-nome { font-size: 16px; font-weight: 700; } .ov-lin { font-size: 12.5px; color: var(--suave); margin-top: 2px; } .ov-lin b { color: var(--texto); } .ov-regiao { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ov-abas { margin: 10px 0 0; } .ov-abas .aba { font-size: 14px; padding: 10px 14px; } .ov-corpo { margin-top: 12px; } .ov-painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; } .ov-painel h4, .ov-h4 { font-size: 14px; margin: 0 0 8px; } .ov-mt { margin-top: 14px; } .ov-grade4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ov-botoes { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .ov-res { display: flex; flex-direction: column; margin-top: 2px; } .ov-res button { text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-top: 0; padding: 8px 12px; display: flex; flex-direction: column; } .ov-res button:first-child { border-top: 1px solid var(--borda); border-radius: 6px 6px 0 0; } .ov-res button:last-child { border-radius: 0 0 6px 6px; } .ov-res button:hover { background: var(--acento); } .ov-res button b { color: var(--texto); } .ov-res button span { color: var(--suave); font-size: 12.5px; } .ov-transp { position: relative; } .ov-vends { display: grid; gap: 8px; } .ov-vend { display: flex; align-items: center; gap: 12px; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; } .ov-vend.sel { border-color: var(--primaria); background: var(--acento); } .ov-vend > div { flex: 1; } .ov-av { width: 32px; height: 32px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; } .ov-inline { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); } .ov-inline input { width: auto; } /* itens */ .ov-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .ov-barra .dica { flex: 1; min-width: 240px; } .ov-marcados { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--acento); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; } .ov-marcados select, .ov-marcados input { width: auto; } .ov-itab tr.ov-fl td { background: var(--acento); border-top: 2px solid var(--borda); } .ov-itab tr.ov-fl td:nth-child(2) { box-shadow: inset 3px 0 0 var(--primaria); } .ov-itab tr.ov-it td:nth-child(4) { padding-left: 22px; } .ov-itab td.mono div { color: var(--suave); font-size: 12px; } .ov-num { display: inline-flex; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--primaria); color: var(--sobre-primaria); font-size: 11.5px; font-weight: 700; align-items: center; justify-content: center; } .ov-num.ov-mob { display: none; margin-right: 6px; } .ov-mini { padding: 0; font-size: 12.5px; font-weight: 600; } .ov-auto { display: inline-block; font: 600 10px/1 "Segoe UI", system-ui, sans-serif; color: var(--ok); background: var(--ok-fundo); border-radius: 4px; padding: 2px 4px; margin-left: 4px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; } .ov-auto.man { color: var(--alerta); background: var(--alerta-fundo); } .ov-edita { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 8px 10px; align-items: end; background: var(--explica); border: 1px dashed var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .ov-dsc { display: flex; gap: 4px; } .ov-dsc select { width: 58px; flex: none; padding-left: 6px; padding-right: 2px; } .ov-fund { margin: 8px 0; font-size: 12.5px; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--primaria); border-radius: 8px; padding: 8px 12px; } .ov-fund.ok { border-left-color: var(--ok); } .ov-fund.pend { border-left-color: var(--alerta); background: var(--alerta-fundo); } .ov-fund .erro-txt { color: var(--alerta); font-weight: 600; margin-top: 2px; } .ov-cfop { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .ov-cfop input { width: 140px; } .ov-cfop input + input { flex: 1; min-width: 180px; } .ov-selos { margin: 6px 0; } .ov-nivel1 { margin: 10px 0 0; } .ov-nivel2 { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; } .ov-nivel2 button { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--suave); border: 1px solid var(--borda); background: var(--superficie); } .ov-nivel2 button.at { background: var(--primaria); color: var(--sobre-primaria); border-color: var(--primaria); } .ov-nivel2 button i { font-style: normal; font-weight: 400; opacity: .85; margin-left: 4px; } .ov-campos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 12px; } .ov-campos div { font-size: 12px; color: var(--suave); } .ov-campos b { display: block; font-size: 14px; color: var(--texto); margin-top: 2px; font-variant-numeric: tabular-nums; } .ov-campos .dest b { color: var(--primaria); font-size: 16px; } .ov-aviso { font-size: 12px; color: var(--alerta); background: var(--alerta-fundo); border-radius: 6px; padding: 6px 10px; display: inline-block; margin: 10px 0 0; } /* totais e histórico */ .ov-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ov-lt { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--borda); font-size: 13.5px; font-variant-numeric: tabular-nums; } .ov-lt.forte { font-weight: 700; border-bottom: 0; font-size: 15px; } .ov-esfera { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); margin-top: 8px; } .ov-hist { list-style: none; margin: 0; padding: 0; } .ov-hist li { padding: 8px 0; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; } /* janela Incluir itens */ .ov-travado { overflow: hidden; } .ov-fundo { position: fixed; inset: 0; background: rgba(20,32,48,.45); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; overflow: auto; overscroll-behavior: contain; } .ov-modal { background: var(--superficie); border-radius: 12px; width: min(1280px, 100%); box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; } .ov-mcab { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--borda); } .ov-mcab h3 { font-size: 17px; margin-right: auto; } .ov-contsel { background: var(--acento); color: var(--primaria); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 3px 10px; } .ov-fecha { font-size: 18px; color: var(--suave); } .ov-mcorpo { padding: 14px 20px; } .ov-mrod { display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--borda); background: var(--cab-tabela); border-radius: 0 0 12px 12px; } .ov-esp { flex: 1; } .ov-tipoop { display: grid; grid-template-columns: auto minmax(260px, 380px) 1fr; gap: 10px; align-items: end; background: var(--explica); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; } .ov-pn { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); font-size: 12px; font-weight: 700; align-items: center; justify-content: center; margin-bottom: 8px; } .ov-pn3 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .ov-pn3 .ov-pn { margin: 0; } .ov-pesq { display: grid; grid-template-columns: 2.4fr 1.4fr 1fr; gap: 8px 10px; align-items: end; } .ov-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0; } .ov-chips button { font-size: 12.5px; border: 1px solid var(--borda); border-radius: 999px; padding: 4px 11px; background: var(--superficie); color: var(--texto); } .ov-chips button.at { background: var(--primaria); color: var(--sobre-primaria); border-color: var(--primaria); } .ov-qi { width: 80px; text-align: right; padding: 6px 8px; } .ov-selbox { margin-top: 14px; border: 1px solid var(--borda); background: var(--explica); border-radius: 10px; padding: 12px; } .ov-selcab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ov-selcab h4 { font-size: 14px; } .ov-aplica { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; } .ov-aplica input { width: 150px; } .ov-stab td { padding: 6px 6px; vertical-align: top; } .ov-stab input, .ov-stab select { padding: 6px 7px; min-width: 0; } .ov-stab td:nth-child(2) { width: 170px; } .ov-stab td:nth-child(3) { width: 80px; } .ov-stab td:nth-child(4), .ov-stab td:nth-child(5) { width: 72px; } .ov-stab td:nth-child(6) { width: 96px; } .ov-stab td:nth-child(7) { width: 132px; } .ov-stab td:nth-child(8) { width: 140px; } .ov-cfro .dica { font-size: 11.5px; } .ov-tira { width: 34px; text-align: center; } @media (max-width: 1100px) { .ov-cartoes { grid-template-columns: repeat(3, 1fr); } .ov-edita { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-campos { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .ov-faixa > select, .ov-faixa > input[type=search], .ov-faixa .primario { width: 100%; margin-left: 0; } .ov-periodo { width: 100%; } .ov-periodo input { flex: 1; width: auto; } .ov-cartoes { grid-template-columns: 1fr 1fr; } .ov-cab { flex-direction: column; gap: 6px; } .ov-acoes { margin-left: 0; justify-content: flex-start; } .ov-acoes button { flex: 1 1 45%; min-height: 44px; } .ov-fixo { margin: -4px -14px 0; padding: 4px 14px 0; box-shadow: 0 4px 10px -8px rgba(0,0,0,.3); } .ov-cartoes2 { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; } .ov-fixo .ov-card { padding: 8px 12px; } .ov-fixo .ov-card h4 { font-size: 10.5px; margin: 0; } .ov-fixo .ov-nome { font-size: 14.5px; } .ov-fixo .ov-lin { display: none; } .ov-fixo .ov-regiao .selo:not(.pendente) { display: none; } .ov-fixo .ov-regiao { margin-top: 2px; } .ov-fixo .ov-card.ov-emp .ov-nome { font-size: 13px; font-weight: 600; } .ov-abas { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ov-abas .aba { flex: none; padding: 12px 14px; } .ov-painel { padding: 12px; } .ov-grade4, .ov-tot { grid-template-columns: 1fr 1fr; } .ov-tot { grid-template-columns: 1fr; } .ov-grade4 label { min-width: 0; } .ov-edita { grid-template-columns: 1fr 1fr; } .ov-edita .primario { grid-column: 1 / -1; } .ov-campos { grid-template-columns: 1fr 1fr; } .ov-nivel1 { flex-wrap: nowrap; overflow-x: auto; } .ov-barra > button { flex: 1 1 100%; min-height: 44px; } .ov-marcados select, .ov-marcados input, .ov-marcados button { flex: 1 1 45%; } /* tabelas viram cartões, com o nome do campo em cima do valor */ .ov-tab thead { display: none; } .ov-tab, .ov-tab tbody { display: block; border: 0; background: none; } .ov-tab tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 12px; position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .ov-tab td { display: block; border: 0; padding: 0; min-width: 0; } .ov-tab td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .ov-tab td.ov-full { grid-column: 1 / -1; order: -1; } .ov-tab td.ov-full2 { grid-column: span 3; } .ov-tab td.ov-esc { display: none; } .ov-tab .num { text-align: left; } .ov-tab tr.sel td { background: none; } .ov-tab tr.sel { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--acento); } .ov-lst tr { grid-template-columns: 1fr 1fr; } .ov-itab tr, .ov-rtab tr { padding-left: 46px; } .ov-tab td.ov-ckc { position: absolute; left: 12px; top: 12px; width: auto; } .ov-ck { width: 24px; height: 24px; } .ov-itab tr.ov-fl { background: var(--acento); border-left: 4px solid var(--primaria); margin-top: 14px; grid-template-columns: 1fr auto; } .ov-itab tr.ov-fl td { background: none; border: 0; padding: 0; box-shadow: none !important; } .ov-itab tr.ov-fl td.num { text-align: right; } .ov-num.ov-mob { display: inline-flex; } .ov-itab tr.ov-it { margin-left: 12px; } .ov-itab tr.ov-it td:nth-child(4) { padding-left: 0; } .ov-rtab td.ov-uv { grid-column: span 2; } .ov-qi { width: 100%; text-align: left; } .ov-stab tr { padding-left: 12px; } .ov-stab td { width: auto !important; } .ov-stab td.ov-dc { grid-column: span 2; } .ov-stab .ov-dsc select { width: 64px; } .ov-tira { position: absolute; right: 6px; top: 4px; } .ov-fundo { padding: 0; align-items: stretch; } .ov-modal { border-radius: 0; min-height: 100dvh; width: 100%; } .ov-mcab { position: sticky; top: 0; background: var(--superficie); z-index: 2; padding: 12px; } .ov-mcab h3 .dica { display: none; } .ov-mcorpo { padding: 12px; } .ov-tipoop { grid-template-columns: auto 1fr; } .ov-tipoop .dica { grid-column: 1 / -1; } .ov-pesq { grid-template-columns: 1fr 1fr; } .ov-pesq .ov-q { grid-column: 1 / -1; } .ov-aplica { margin-left: 0; width: 100%; } .ov-aplica input { flex: 1 1 40%; width: auto; } .ov-selbox { padding: 10px; margin: 14px -4px 0; } .ov-mrod { position: sticky; bottom: 0; z-index: 2; border-radius: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; box-shadow: 0 -6px 14px -10px rgba(0,0,0,.35); } .ov-mrod .ov-cancela, .ov-mrod .ov-esp { display: none; } .ov-mrod .dica { flex: 1; } .ov-mrod .primario { flex: 1; min-height: 44px; } } .ov-painel .ov-mt, .ov-painel h4.ov-mt { margin-top: 18px; } @media (max-width: 760px) { .ov-periodo { flex-wrap: wrap; } .ov-periodo span { flex: 1 1 100%; } .ov-periodo input { flex: 1 1 40%; min-width: 0; } .ov-itab td.ov-cfc { grid-column: 1 / -1; } .ov-itab td.ov-cfc div { display: inline; margin-left: 8px; } .ov-fundo { display: block; } .ov-modal { min-height: 100dvh; } } /* v0.84.4: tabelas oficiais de cBenef e cClassTrib — dispositivo e observação abaixo da descrição */ .tcb .tncm-desc .dica, .tcc .tncm-desc .dica { display: block; } .tcb .tncm-desc, .tcc .tncm-desc { white-space: normal; min-width: 260px; } .ref-ops td .dica { display: block; white-space: normal; } @media (max-width: 640px) { #tcb-conteudo .linha-acoes, #tcc-conteudo .linha-acoes { flex-wrap: wrap; } #tcb-conteudo .linha-acoes > label:not(.check), #tcc-conteudo .linha-acoes > label:not(.check) { flex: 1 1 40%; min-width: 0; } #tcb-conteudo .linha-acoes > label:not(.check) :is(select, input), #tcc-conteudo .linha-acoes > label:not(.check) :is(select, input) { width: 100%; } #tcb-conteudo .linha-acoes > label.check, #tcc-conteudo .linha-acoes > label.check { flex: 1 1 100%; } } .ref-ops td:nth-child(4) { min-width: 240px; white-space: normal; } @media (max-width: 640px) { .ref-ops td:nth-child(4) { min-width: 0; } } /* v0.84.5: código com a descrição num cartão (mouse ou toque) — o cartão é um elemento fixo no body, para não ser cortado pela rolagem da tabela */ .cod-dica { cursor: help; border-bottom: 1px dotted currentColor; outline: none; } .cartao-dica { position: fixed; z-index: 1000; max-width: 300px; padding: 8px 10px; border-radius: var(--raio); background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); box-shadow: 0 6px 18px rgba(16, 24, 40, .16); font-size: 13px; line-height: 1.4; pointer-events: none; } .ref-ops td:nth-child(4) { min-width: 0; } @media (max-width: 640px) { .ref-ops td[data-r]::before { content: attr(data-r) " "; color: var(--suave); font-size: 12px; } } /* v0.84.8: grupos de campos da regra de ICMS (diferimento, crédito presumido) */ fieldset.campos-grupo { border: 1px solid var(--borda, #d0d5dd); border-radius: 8px; padding: 8px 12px 4px; margin: 8px 0; min-width: 0; } fieldset.campos-grupo legend { font-weight: 600; font-size: .9em; padding: 0 4px; } fieldset.campos-grupo[hidden] { display: none; } .ov-lt.ov-info { color: var(--suave); font-style: italic; } /* v0.85.0: agenda fiscal (Painel › Agenda) */ .cu-faixa-erro { background: var(--erro-fundo); color: var(--erro); border-left: 4px solid var(--erro); } .ag-faixa p { margin: 0 0 10px; padding: 8px 12px; border-radius: 6px; font-size: 13px; } .ag-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; } .ag-nav { display: flex; align-items: center; gap: 2px; } .ag-nav .link { font-size: 15px; } .ag-periodo { margin: 0 0 0 8px; font-size: 17px; } .ag-vistas { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--borda); } .ag-filtros { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0; } .ag-chip { display: block; font-size: 11px; line-height: 1.3; padding: 1px 6px; margin-top: 2px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; border-left: 3px solid; } .ag-filtros .ag-chip, .ag-det .ag-chip { display: inline-block; margin: 0; } .ag-venc { background: var(--acento); color: var(--primaria); border-color: var(--primaria); } .ag-venc.ag-ok { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); } .ag-prazo { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); } .ag-pub { background: var(--neutro); color: var(--suave); border-color: var(--suave); } .ag-vig { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); } .ag-fim { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); } .ag-fer { background: var(--simples-fundo); color: var(--simples); border-color: var(--simples); } /* v1.06.0: licenças (validade e início do aviso) */ .ag-lic { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); border-left-style: dashed; } .ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .ag-dsem { font-size: 12px; color: var(--suave); text-align: center; text-transform: capitalize; padding: 4px 0; } .ag-cel { min-height: 92px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 4px; text-align: left; display: flex; flex-direction: column; align-items: stretch; min-width: 0; cursor: pointer; } .ag-cel:hover { border-color: var(--primaria); } .ag-num { font-size: 12px; font-weight: 600; color: var(--suave); } .ag-fora { opacity: .45; } .ag-naoutil { background: var(--neutro); } .ag-hoje { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); } .ag-hoje .ag-num { color: var(--primaria); } .ag-mais { font-size: 11px; color: var(--suave); margin-top: 2px; } .ag-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .ag-mes-mini > .link { padding: 4px 0; } .ag-mes-mini > .link b { text-transform: capitalize; } .ag-grade-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .ag-mini { position: relative; font-size: 11px; height: 28px; border: 1px solid transparent; border-radius: 4px; background: none; padding: 0; color: var(--texto); } .ag-mini.ag-naoutil { color: var(--suave); } .ag-mini:hover { border-color: var(--primaria); } .ag-mini i { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; } .ag-mini em { width: 5px; height: 5px; border-radius: 50%; border: 0; } .ag-mini em.ag-venc { background: var(--primaria); } .ag-mini em.ag-prazo { background: var(--erro); } .ag-mini em.ag-pub { background: var(--suave); } .ag-mini em.ag-vig { background: var(--ok); } .ag-mini em.ag-fim { background: var(--alerta); } .ag-mini em.ag-fer { background: var(--simples); } .ag-mini em.ag-lic { background: var(--alerta); outline: 1px dashed var(--alerta); } .ag-doc { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro); } /* v1.13.0: guia/boleto a pagar */ .ag-mini em.ag-doc { background: var(--erro); } .ag-pia { background: var(--acento); color: var(--primaria-escura); border-color: var(--primaria); border-left-style: double; } /* v1.14.0: IBGE */ .ag-mini em.ag-pia { background: var(--primaria-escura); outline: 1px solid var(--primaria); } /* v1.24.0: o vencimento do certificado digital e os avisos de 30 e 7 dias — azul do Presumido, borda pontilhada e a chave */ .ag-cert { background: color-mix(in srgb, var(--presumido) 12%, var(--superficie)); color: var(--presumido); border-color: var(--presumido); border-left-style: dotted; } .ag-chip.ag-cert::before { content: "\1F511\00A0"; } .ag-mini em.ag-cert { background: var(--presumido); outline: 1px dotted var(--presumido); } /* v1.30.0: prazos dos processos societários (web/societario.js) */ .ag-soc { background: color-mix(in srgb, var(--primaria) 10%, var(--superficie)); color: var(--primaria-escura); border-color: var(--primaria); border-left-style: solid; border-left-width: 4px; } .ag-mini em.ag-soc { background: var(--primaria); outline: 1px solid var(--primaria-escura); } /* v1.31.0: procuração e certificado da pessoa física */ .ag-pes { background: var(--simples-fundo); color: var(--simples); border-color: var(--simples); border-left-style: double; border-left-width: 4px; } .ag-mini em.ag-pes { background: var(--simples); outline: 1px solid var(--simples); } .ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .ag-col { background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; padding: 6px; min-height: 160px; min-width: 0; } .ag-col-tit { padding: 2px 0 4px; font-weight: 600; } .ag-empresas { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0; } .ag-dia-tit { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; } @media (max-width: 720px) { .ag-cel { min-height: 56px; } .ag-cel .ag-chip { font-size: 0; padding: 0; height: 5px; border-left-width: 0; } .ag-semana { grid-template-columns: 1fr; } .ag-col { min-height: 0; } } .ag-ano-sel { width: auto; margin-left: 8px; padding: 2px 6px; } /* v0.86.0: sugestões do XML no produto */ .sug-xml .sx-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0; } .sug-xml .sx-op { display: inline-flex; align-items: center; gap: 6px; background: var(--acento); border-radius: 6px; padding: 2px 8px; } /* v0.86.1: menu da conta — o nome de quem entrou abre o cadastro de usuários e o Sair */ .conta { position: relative; } .conta-botao { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid transparent; border-radius: 999px; padding: 3px 10px 3px 3px; color: var(--texto); font: inherit; cursor: pointer; } .conta-botao:hover, .conta-botao[aria-expanded="true"] { background: var(--acento); border-color: var(--borda); } .conta-botao .av-foto:not([hidden]) + .conta-ini { display: none; } .conta-ini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); font-size: 12px; font-weight: 700; flex: none; } .conta-ini.grande { width: 40px; height: 40px; font-size: 15px; } .conta-seta { color: var(--suave); } .conta-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 6px; z-index: 50; } .conta-cab { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; } .conta-cab div { display: flex; flex-direction: column; } .conta-cab .dica { margin: 0; font-size: 12px; } .conta-grupo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 8px 10px 4px; } .conta-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--texto); text-decoration: none; } .conta-menu a .ico { width: 18px; height: 18px; color: var(--suave); } .conta-menu a:hover, .conta-menu a.ativo { background: var(--acento); color: var(--primaria); } /* v1.16.0: o submenu Tabelas nos menus do alto (Empresa e Usuário) — recolhível, itens um degrau para dentro */ .conta-sub > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--suave); cursor: pointer; user-select: none; } .conta-sub > summary::-webkit-details-marker { display: none; } .conta-sub > summary:hover { background: var(--hover); color: var(--texto); } .conta-sub > summary .ico { width: 18px; height: 18px; } .conta-sub > summary .seta { width: 14px; height: 14px; margin-left: auto; transition: transform .15s; } .conta-sub[open] > summary .seta { transform: rotate(90deg); } .conta-sub > a { margin-left: 18px; } .conta-sair { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--borda); margin-top: 4px; padding: 10px; color: var(--erro); font: inherit; cursor: pointer; border-radius: 0 0 6px 6px; } .conta-sair:hover { background: var(--erro-fundo); } @media (max-width: 720px) { .conta-menu { position: fixed; left: 12px; right: 12px; top: 58px; min-width: 0; } } .conta-acao { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--borda); margin-top: 4px; padding: 10px; color: var(--texto); font: inherit; cursor: pointer; } .conta-acao:hover { background: var(--acento); color: var(--primaria); } .conta-acao + .conta-sair { margin-top: 0; } .erro.info { color: var(--primaria); background: var(--acento); } .emp-botao { padding: 4px 10px; } .emp-botao .ico { width: 18px; height: 18px; color: var(--primaria); } .conta-cab > .ico { width: 28px; height: 28px; color: var(--primaria); flex: none; } /* v0.87.0: empresa padrão no menu da empresa */ .conta-cab:has(.emp-cab) { display: block; } .emp-cab-linha { display: flex; align-items: center; gap: 10px; } .emp-cab-linha > .ico { width: 28px; height: 28px; color: var(--primaria); flex: none; } .emp-cab-linha div { display: flex; flex-direction: column; } .emp-padrao { margin-top: 10px; font-size: 12px; } .emp-padrao select { margin-top: 2px; } .emp-padrao .dica { font-weight: 400; font-size: 11px; } .emp-botao.com-padrao .escopo { font-weight: 600; color: var(--primaria); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conta-cab .emp-cab { display: block; } .conta-cab .emp-cab .emp-cab-linha { flex-direction: row; align-items: center; } .conta-cab .emp-cab .emp-cab-linha > div { display: flex; flex-direction: column; } /* v0.88.0: Gestão NF/XML — trava de cadastro (linha amarela), período, busca e links */ .mov-tab tr.mov-pend td { background: var(--pend-fundo); } .mov-tab tr.mov-pend td:first-child { box-shadow: inset 4px 0 0 var(--pend-borda); } .mov-tab tr.mov-pend:hover td { background: var(--pend-hover); } li.mov-pend { background: var(--pend-fundo); border-left: 4px solid var(--pend-borda); padding: 2px 6px; margin: 2px 0; list-style-position: inside; } .mov-cartao.pend { background: var(--pend-fundo); } .mov-cartao.pend b { color: var(--pend-texto); } .mov-pend-caixa { background: var(--pend-fundo); border-left: 4px solid var(--pend-borda); border-radius: var(--raio); padding: 10px 12px; margin: 0 0 12px; } .mov-pend-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; } .mov-pend-caixa .tabela-wrap { margin-top: 8px; background: var(--superficie); } .mov-vinc { display: inline-flex; gap: 4px; align-items: center; } .mov-vinc input { width: 200px; min-height: 30px; padding: 4px 8px; } /* v1.18.0: unidades do item da nota e do vínculo */ .mov-un-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; } .mov-un-acao input { width: 110px; min-height: 30px; padding: 4px 8px; } .mov-itens-un td { vertical-align: top; white-space: normal; padding: 9px 8px; } .mov-itens-un th { padding: 8px; white-space: normal; } .mov-itens-un td:nth-child(2) { min-width: 180px; } .mov-itens-un .mono, .mov-itens-un .selo { white-space: nowrap; } .dp-unidades { margin: 12px 0; padding-top: 8px; border-top: 1px solid var(--borda); } .dp-unidades details { margin: 8px 0; } .mov-busca input { width: 300px; } .mov-per-txt { padding: 0 8px; white-space: nowrap; } .mov-arqs { white-space: nowrap; } .mov-arqs .link { padding: 2px 6px; } .mov-arqs span.dica { padding: 2px 6px; text-decoration: line-through; } @media (max-width: 720px) { .mov-busca, .mov-busca input { width: 100%; } } /* notas canceladas: linha vermelho-claro (a cancelada não vale, mesmo com pendência) */ .mov-tab tr.mov-canc td { background: var(--canc-fundo); color: var(--canc-texto); } .mov-tab tr.mov-canc td:first-child { box-shadow: inset 4px 0 0 var(--canc-borda); } .mov-tab tr.mov-canc:hover td { background: var(--canc-hover); } /* v0.88.0: cartões — o valor das notas embaixo do rótulo; canceladas em vermelho claro */ .mov-cartao .mov-c-val { font-size: 13px; color: var(--texto); font-variant-numeric: tabular-nums; } .mov-cartao.canc { background: var(--canc-fundo); } .mov-cartao.canc b { color: var(--erro); } /* v0.88.2: ícones dos documentos da nota (NF = PDF/DANFE, XML = arquivo original) */ .mov-doc { min-width: 40px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 6px; border-radius: 6px; text-decoration: none; font-size: 10px; font-weight: 700; line-height: 1; } .mov-doc .ico { width: 22px; height: 22px; } .mov-doc.nf { color: var(--erro); } .mov-doc.xml { color: var(--primaria); } .mov-doc.nf:hover { background: var(--erro-fundo); } .mov-doc.xml:hover { background: var(--acento); } .mov-doc.sem { color: #b8bec8; cursor: not-allowed; } /* v0.89.0: a escolha da divisão regional ocupa a linha inteira, no topo da aba Região dos filtros */ /* e as linhas da aba Região seguem a ordem padrão: divisão e tipo · País, Região, UF · Macro · Micro · Município · Região do município e Bairro */ .filtros-grade .f-quebra { grid-column: 1 / -1; height: 0; margin: 0; padding: 0; } .filtros-grade .filtro-divisao { grid-column: span 2; } .filtros-grade .filtro-divisao select { font-weight: 600; } .cruz-junta span { display: inline-block; margin-right: 18px; } /* ===================== v0.90.0 · Rota › Comercial › Mapa de clientes (A42) */ .rm-filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 10px; } .rm-linha { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; } .rm-linha > label { flex: 1 1 150px; min-width: 130px; } .rm-linha .rm-busca { flex: 3 1 260px; } .rm-linha-fim { justify-content: space-between; align-items: center; } .rm-linha-fim label.check { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 8px; } .rm-linha-fim label.check input { width: auto; } .rm-caminho { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 12px 2px 8px; } .rm-caminho span { color: var(--suave); } .rm-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 14px; align-items: start; } .rm-mapa-caixa { position: relative; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .rm-mapa { height: 600px; z-index: 0; } .rm-mapa-rodape { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--suave); } .rm-mapa-rodape button { margin-left: auto; } .rm-leg { display: inline-flex; align-items: center; gap: 6px; } .rm-pt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #1f6fa8; border: 2px solid #fff; box-shadow: 0 0 0 1px #1f6fa8; } .rm-pt.trac { background: rgba(31,111,168,.35); border: 2px dashed #1f6fa8; box-shadow: none; } .rm-pt.alerta { background: #b5480b; box-shadow: 0 0 0 1px #b5480b; } .rm-ajuste { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 500; background: var(--superficie); border: 1px solid var(--primaria); border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; } .rm-ajuste span { color: var(--suave); } .rm-ajuste .rm-ajuste-bt { margin-left: auto; display: flex; gap: 8px; } .rm-ajuste .erro { flex-basis: 100%; margin: 0; } .rm-lado { display: grid; gap: 12px; } .rm-lista { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); max-height: 640px; overflow: auto; } .rm-lista h4 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); } .rm-lista ul { list-style: none; margin: 0; padding: 0; } .rm-lista li button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--borda); padding: 10px 12px; display: grid; gap: 2px; font: inherit; color: inherit; cursor: pointer; min-height: 44px; } .rm-lista li button:hover { background: var(--fundo); } .rm-lista li button.sel { background: var(--acento); box-shadow: inset 3px 0 0 var(--primaria); } .rm-lista li button > span { color: var(--suave); font-size: 12.5px; } .rm-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .rm-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; display: grid; gap: 10px; box-shadow: var(--sombra); } .rm-cartao header { display: flex; justify-content: space-between; gap: 8px; } .rm-cartao header h3 { margin: 0 0 4px; font-size: 16px; } .rm-cartao header p { margin: 0; } .rm-cartao header .link { font-size: 22px; line-height: 1; padding: 0 6px; min-width: 32px; min-height: 32px; } .rm-acoes { display: flex; flex-wrap: wrap; gap: 8px; } .rm-acoes a.botao, .rm-acoes button { padding: 8px 12px; border-radius: 6px; font-size: 13px; text-decoration: none; } .rm-acoes button:not(.primario) { background: var(--superficie); color: var(--primaria); border: 1px solid var(--primaria); } .rm-abas { margin: 0; } .rm-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rm-numeros > div { background: var(--fundo); border-radius: 6px; padding: 8px 10px; display: grid; gap: 2px; } .rm-numeros span { color: var(--suave); font-size: 12px; } .rm-numeros b { font-size: 15px; overflow-wrap: anywhere; } .rm-numeros small { color: var(--suave); } .rm-vendas, .rm-produtos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rm-vendas li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--borda); padding: 6px 0; } .rm-vendas li div { display: grid; gap: 2px; } .rm-vendas li span { color: var(--suave); font-size: 12.5px; } .rm-vendas button { background: var(--superficie); color: var(--primaria); border: 1px solid var(--primaria); border-radius: 6px; padding: 6px 10px; } .rm-produtos li { border-bottom: 1px solid var(--borda); padding: 6px 0; } .rm-produtos label.check { flex-direction: row; align-items: flex-start; gap: 8px; color: var(--texto); font-weight: 400; } .rm-produtos label.check input { width: auto; margin-top: 3px; } .rm-produtos span { display: grid; gap: 2px; } .rm-produtos small { color: var(--suave); } .rm-produtos .aviso-t { color: var(--alerta); font-weight: 600; } .geo-caixa { display: grid; gap: 8px; margin-top: 8px; } .geo-mapa { height: 220px; border-radius: 8px; border: 1px solid var(--borda); z-index: 0; } .geo-linha { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--suave); } @media (max-width: 900px) { .rm-corpo { grid-template-columns: 1fr; } .rm-mapa { height: 420px; } .rm-lista { max-height: none; } } .rm-niveis { display: grid; gap: 8px; } .filtros-caixa:not(.aberto) [data-rm-grupo="regiao"] { display: none; } .filtros-caixa:not(.aberto) [data-rm-grupo="parceiro"][hidden] { display: grid; } .filtros-caixa .rm-destacar { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; color: var(--texto); } .filtros-caixa .rm-destacar input { width: auto; } .filtros-caixa .rm-busca { grid-column: 1 / -1; } /* v0.90.2: Localização em colunas — os níveis um embaixo do outro, em três colunas */ .loc-pilha { display: grid; gap: 1px; min-width: 120px; } .loc-pilha > span { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; } /* v0.90.2: a aba Região dos filtros dividida em País · Macro e Micro região · Região municipal */ .filtros-grade .sub-abas { grid-column: 1 / -1; margin: 2px 0 0; } .filtros-grade .sub-abas .aba { font-size: 13px; padding: 6px 10px; } .sub-grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: end; } .sub-grade[hidden] { display: none; } @media (max-width: 760px) { .sub-grade { grid-template-columns: 1fr 1fr; } } .sub-grade .rm-sub { display: contents; } /* v0.90.4: formulário das telas simples no painel lateral (o próprio form vira o painel) */ form.cu-lateral-form { z-index: 40; margin: 0 !important; padding: 56px 20px 20px !important; box-sizing: border-box; border: 0; border-left: 3px solid var(--painel-borda); border-radius: 10px 0 0 0; max-width: none; } form.cu-lateral-form::before { content: attr(data-titulo-lateral); position: absolute; top: 20px; left: 20px; right: 56px; font-size: 1.17em; font-weight: 700; color: var(--texto); } form.cu-lateral-form > h4:first-child { display: none; } @media (max-width: 760px) { form.cu-lateral-form { border-left: 0; border-top: 3px solid var(--painel-borda); border-radius: 0; } } .cu-lateral-fecha { position: fixed; top: 70px; right: 16px; z-index: 41; font-size: 18px; } /* v0.90.4: de onde vem o parâmetro que está valendo (padrão do cliente × raiz × estabelecimento) */ .param-vale { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; vertical-align: middle; } .param-vale.padrao { background: var(--ok-fundo); color: var(--ok); } .param-vale.proprio { background: var(--alerta-fundo); color: var(--alerta); cursor: help; } #form-parametros > .sub-abas { margin-bottom: 12px; } .param-rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .param-rotulo .param-vale { margin-left: 2px; } /* v0.91.0: Gestor › Integrações — monitor */ .ig-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; } .ig-cartao { background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; } .ig-cartao.ig-verde { border-left-color: var(--ok); } .ig-cartao.ig-amarelo { border-left-color: var(--alerta); } .ig-cartao.ig-vermelho { border-left-color: var(--erro); } .ig-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .ig-det { font-size: 13px; color: var(--suave); line-height: 1.5; } .ig-teste { list-style: none; padding: 0; margin: 8px 0; } #abas-ig { margin-bottom: 12px; } .ig-erro { color: var(--erro); } .ig-q td { white-space: normal; } .ig-q .selo { white-space: normal; display: inline-block; } .ig-q td:nth-child(4) { max-width: 220px; overflow-wrap: anywhere; } /* v0.92.0: Empresa › Estrutura e equipes (A44) — a árvore por departamento: cada nível recua e ganha um traço à esquerda, como um organograma deitado; no celular o recuo diminui para a árvore não rolar para o lado */ #es-abas { margin-bottom: 8px; flex-wrap: wrap; } .es-barra { display: flex; justify-content: flex-end; margin: 0 0 8px; } .es-barra label { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); } .es-barra input { width: auto; } .es-arvore, .es-arvore ul { list-style: none; margin: 0; padding: 0; } .es-arvore ul { margin-left: 22px; padding-left: 14px; border-left: 2px solid var(--borda); } .es-arvore li { margin: 6px 0; } .es-no { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; cursor: pointer; } .es-no:hover { border-color: var(--primaria); } .es-no.orfao { border-left: 4px solid var(--alerta); } .es-nome { font-weight: 600; color: var(--texto); } .es-login { color: var(--suave); } .es-no .dica { margin: 0; } .es-dep-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .es-dep-topo h4 { font-size: 15px; margin: 0; } .es-dep .doc-ico { height: 32px; width: 32px; font-size: 13px; } .es-cad-topo { justify-content: flex-start; } .es-troca { justify-content: flex-start; } @media (max-width: 760px) { .es-arvore ul { margin-left: 8px; padding-left: 8px; } .es-barra { justify-content: flex-start; } } /* v0.93.0: Alçadas e Liberações (A44 fase 2) — o contador do alto some quando não há pedido esperando; no orçamento, o pedido de liberação aparece numa faixa logo abaixo do título, onde o vendedor olha antes de enviar */ .lib-botao { position: relative; display: inline-flex; align-items: center; gap: 6px; background: var(--alerta-fundo); color: var(--alerta); border: 1px solid transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; font-weight: 600; } .lib-botao:hover { border-color: var(--alerta); } .lib-botao .ico { width: 18px; height: 18px; } .lib-contador { font-size: 13px; } .al-evento h5.al-dep { margin: 14px 0 6px; font-size: 14px; } .al-tab td:last-child { text-align: right; white-space: nowrap; } .al-tab tr.al-fora td { color: var(--suave); } .al-tab tr.al-sem td { color: var(--suave); } .al-todas { margin: 10px 0 4px; } .lb-cartao { margin-bottom: 12px; } .lb-linha { margin: 4px 0; } .lb-itens { margin: 6px 0; padding-left: 18px; font-size: 13px; } .lb-acoes { justify-content: flex-end; } .ov-alcada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 4px; padding: 8px 12px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); } .ov-alcada.pendente { border-left: 4px solid var(--alerta); } .ov-alcada.recusada { border-left: 4px solid var(--erro); } .ov-alcada .selo { white-space: normal; } /* v0.93.0: Central de conversas e demandas (A44 fase 2b) — web/central.js */ .central-botao { position: relative; display: inline-flex; align-items: center; background: none; border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; color: var(--suave); cursor: pointer; } .central-botao:hover { background: var(--acento); border-color: var(--borda); color: var(--primaria); } .central-botao .ico { width: 22px; height: 22px; } .central-num { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--erro); color: var(--sobre-erro); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .central-num.em-linha { position: static; display: inline-block; vertical-align: middle; margin-left: 4px; } .ct-lista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .ct-lista li { padding: 10px 14px; border-bottom: 1px solid var(--borda); cursor: pointer; } .ct-lista li:last-child { border-bottom: 0; } .ct-lista li:hover, .ct-lista li:focus { background: var(--acento); outline: none; } .ct-lista li.nao-lida b { color: var(--primaria-escura); } .ct-lista-cab { display: flex; align-items: baseline; gap: 6px; } .ct-lista-cab .dica { margin-left: auto; white-space: nowrap; } .ct-previa { color: var(--texto); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* o texto do usuário é texto: quebra as linhas como ele escreveu, nunca vira HTML (a tela escapa) */ .ct-texto { white-space: pre-wrap; overflow-wrap: anywhere; } .ct-conversa { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 8px; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; } .ct-msg { max-width: 85%; align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; } .ct-msg.minha { align-self: flex-end; background: var(--acento); } .ct-msg-cab { font-size: 12px; margin-bottom: 2px; } .ct-evento { align-self: center; text-align: center; font-size: 12px; color: var(--suave); max-width: 90%; } .ct-evento .ct-texto { color: var(--texto); background: var(--ok-fundo); border-radius: 8px; padding: 4px 8px; margin-top: 2px; text-align: left; } .ct-responder textarea { width: 100%; } .ct-responder .linha-acoes { align-items: center; } .ct-filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; } .ct-filtros label { flex-direction: row; align-items: center; gap: 6px; } .ct-prio { font-size: 11px; font-weight: 600; color: var(--suave); } .ct-prio-ALTA { color: var(--alerta); } .ct-prio-URGENTE { color: var(--erro); } .ct-alerta { color: var(--erro); font-weight: 600; } tr.ct-vencida td:first-child { box-shadow: inset 3px 0 0 var(--alerta); } tr.ct-destacada { background: var(--erro-fundo); } tr.ct-destacada td:first-child { box-shadow: inset 3px 0 0 var(--erro); } .ct-cartao-alerta strong { color: var(--erro); } .ct-acoes { flex-wrap: wrap; } .ct-redistribuir { max-width: 320px; margin: 6px 0; } .ct-doc { background: var(--acento); border-radius: 8px; padding: 6px 10px; margin: 0; } .ct-pessoas { max-height: 220px; overflow-y: auto; } .ct-pessoas input[type=search] { margin-bottom: 6px; width: 100%; } .ct-chamar { margin-top: 8px; } @media (max-width: 760px) { .ct-msg { max-width: 100%; } .ct-dl { grid-template-columns: 1fr; } } /* v0.93.0: Movimentação › Fechamento (A45) — a grade empresas × meses com o cadeado. Fechado em cinza escuro (não se mexe), reaberto em âmbar (vale até a data, depois fecha sozinho), aberto quase apagado; a célula escolhida ganha o contorno da marca. No celular a grade rola para o lado dentro da própria caixa. */ #fec-abas { margin-bottom: 8px; flex-wrap: wrap; } .fec-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 8px; } .fec-barra select { width: auto; min-width: 220px; min-height: 36px; } .fec-barra .primario:disabled, .fec-barra .secundario:disabled { opacity: .45; cursor: not-allowed; } /* v1.15.0: tipos da operação do CFOP (Gestor › Regras fiscais › CFOP) */ .cf-tipo-acoes { white-space: nowrap; } .cf-tipo-acoes button:disabled { opacity: .45; cursor: not-allowed; } .cf-tipos { margin: 8px 0 16px; } .cf-tipo-dialogo .erro:empty { display: none; } @media (max-width: 640px) { .cf-barra { flex-wrap: wrap; } .cf-barra > label:not(.botao) { flex: 1 1 40%; min-width: 0; } .cf-barra > label:not(.botao) :is(select, input) { width: 100%; } } .fec-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; font-size: 12px; color: var(--suave); } .fec-legenda .fec-cel { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; } .fec-grade th.fec-mes { text-align: center; white-space: nowrap; padding: 4px 2px; } .fec-grade th.fec-mes .link { padding: 2px 4px; font-weight: 600; } .fec-grade th.fec-mes.sel .link { text-decoration: underline; } td.fec-cel { text-align: center; cursor: pointer; min-width: 58px; padding: 6px 2px; border-left: 1px solid var(--borda); line-height: 1.1; } .fec-cel .ico { width: 18px; height: 18px; vertical-align: middle; } .fec-cel.fec-fechado { background: var(--neutro); color: var(--texto); } .fec-cel.fec-reaberto { background: var(--alerta-fundo); color: var(--alerta); } .fec-cel.fec-aberto { color: #b9c0ca; } .fec-cel .fec-aberto { opacity: .55; } td.fec-cel:hover { outline: 1px solid var(--primaria); outline-offset: -1px; } td.fec-cel.sel { outline: 2px solid var(--primaria); outline-offset: -2px; box-shadow: inset 0 0 0 40px rgba(31, 93, 140, .07); } .fec-cel .fec-ate, .fec-cel .fec-notas { display: block; font-size: 11px; margin-top: 2px; } .fec-cel .fec-notas { color: var(--suave); } .fec-conf .doc-ico .ico { width: 16px; height: 16px; } .fec-conf-itens { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13px; } .fec-conf-itens li { margin: 3px 0; } .mov-fechado { display: flex; align-items: center; gap: 8px; } .mov-fechado .ico { width: 18px; height: 18px; flex: none; } .mov-cadeado .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--texto); } /* v0.94.0: extemporâneos — a saída de mês fechado é URGENTE (vermelho: afeta o imposto do mês); a entrada escriturada no mês do recebimento leva um selo âmbar (informação, não problema) */ .fec-urgente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 10px; padding: 10px 12px; background: var(--erro-fundo); color: var(--erro); border-left: 4px solid var(--erro); border-radius: 6px; } .fec-urgente b { font-weight: 700; } .fec-cont-urgente { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--erro); color: var(--sobre-erro); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; } .tabela tr.fec-ext-urgente td { background: var(--erro-fundo); } .tabela tr.fec-ext-urgente td:first-child { box-shadow: inset 4px 0 0 var(--erro); } .selo.extemporanea { background: var(--alerta-fundo); color: var(--alerta); white-space: normal; } @media (max-width: 760px) { /* a grade não vira cartões como as outras listas: empresa × mês só se lê como tabela — rola para o lado */ .tabela-wrap.fec-wrap { overflow-x: auto; border: 1px solid var(--borda); background: var(--superficie); } .tabela.fec-grade { display: table; } .tabela.fec-grade thead { display: table-header-group; } .tabela.fec-grade tbody { display: table-row-group; } .tabela.fec-grade tr { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; } .tabela.fec-grade td, .tabela.fec-grade th { display: table-cell; padding: 6px 4px; } td.fec-cel { min-width: 48px; } .fec-barra select { min-width: 0; width: 100%; } } /* v0.96.0: Financeiro (A36 F1) — listas por parcela, o título no painel lateral, o razão e o plano em árvore */ .fin-tab tr.clicavel:hover td { background: var(--fundo); } .fin-tab tr.fin-vencida td:first-child { box-shadow: inset 4px 0 0 var(--erro); } .fin-riscado td, li.fin-riscado { color: var(--suave); text-decoration: line-through; } .fin-riscado td .dica, .fin-riscado td button { text-decoration: none; } .fin-plano tr.fin-grupo td { font-weight: 600; background: var(--explica); } .fin-nivel { display: inline-block; padding-left: calc(var(--n, 0) * 18px); } .fin-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 12px; font-size: 14px; } .fin-dl dt { color: var(--suave); } .fin-dl dd { margin: 0; } .fin-razao { margin: 12px 0; } .fin-razao summary { cursor: pointer; color: var(--primaria); font-weight: 600; } .fin-lanc { border-left: 3px solid var(--borda); padding: 6px 0 6px 10px; margin: 8px 0; font-size: 13px; } .fin-lanc.fin-estorno { border-left-color: var(--alerta); } .fin-partidas td { padding: 3px 6px; } .fin-dc { width: 18px; font-weight: 700; color: var(--suave); } .fin-entra { color: var(--ok); } .fin-sai { color: var(--erro); } .fin-lista { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; } .fin-rateio input, .fin-rateio select { width: 100%; } .fin-copia { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 0; border-top: 0; padding-top: 0; } /* no painel lateral as tabelas do título encolhem e rolam para o lado em vez de cortar a última coluna */ .cu-lateral-form .fin-tab { display: block; overflow-x: auto; font-size: 13px; } .cu-lateral-form .fin-tab th, .cu-lateral-form .fin-tab td { padding: 6px 8px; } /* v0.96.0: Financeiro › Regras de integração das notas (A36, 13.2) */ .fin-tab tr.fin-fora td { color: var(--suave); } .fin-tab td { white-space: normal; } .fin-tab td.mono { white-space: nowrap; } .fin-tab td.dica { min-width: 180px; max-width: 460px; } .fin-todas { margin: 10px 0 4px; } .fin-desligado { border-left: 4px solid var(--alerta); } .fin-nota { margin-top: 14px; } .fin-nota h4 { margin-top: 0; } /* v0.96.0: a sugestão de compensar o adiantamento da nota cancelada (título e adiantamento) */ .fin-sugestao { margin: 10px 0; } .fin-sugestao h5 { margin: 0 0 4px; } /* v0.97.0: Gestor › Painel › Mapa dos processos — colunas por área, caixas por processo e setas em SVG por cima */ .mp-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .mp-cartao { display: flex; flex-direction: column; align-items: flex-start; min-width: 104px; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--mp-cor, var(--borda)); border-radius: var(--raio); font: inherit; color: var(--texto); text-align: left; } button.mp-cartao { cursor: pointer; } .mp-cartao b { font-size: 20px; line-height: 1.2; } .mp-cartao span { font-size: 12px; color: var(--suave); } .mp-cartao.ativo { background: var(--acento); box-shadow: inset 0 0 0 1px var(--primaria); } .mp-integra { --mp-cor: var(--ok); } .mp-s-FEITO { --mp-cor: var(--ok); --mp-fundo: var(--ok-fundo); } .mp-s-PARCIAL { --mp-cor: #2f7fb8; --mp-fundo: #e6f0f8; } .mp-s-ANDAMENTO { --mp-cor: var(--alerta); --mp-fundo: var(--alerta-fundo); } .mp-s-ESCOPO { --mp-cor: #6b4fa0; --mp-fundo: #efeaf7; } .mp-s-IDEIA { --mp-cor: #8a93a3; --mp-fundo: #f1f2f5; } .mp-lig-INTEGRADO { --mp-lig: var(--ok); } .mp-lig-PARCIAL { --mp-lig: #c97a00; } .mp-lig-PREVISTO { --mp-lig: #8a93a3; } .mp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 8px; font-size: 13px; } .mp-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; } .mp-legenda label, .mp-falta { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .mp-legenda svg { width: 34px; height: 8px; } .mp-legenda line { stroke: var(--mp-lig); stroke-width: 2.5; } .mp-legenda .mp-lig-PARCIAL line { stroke-dasharray: 6 4; } .mp-legenda .mp-lig-PREVISTO line { stroke-dasharray: 2 4; stroke-linecap: round; } .mp-quadro { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--cab-tabela); } .mp-colunas { position: relative; display: grid; grid-template-columns: repeat(var(--mp-n), minmax(190px, 1fr)); gap: 0 44px; padding: 12px 22px 18px; min-width: calc(var(--mp-n) * 234px); } .mp-coluna { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; } .mp-coluna h3 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .mp-caixa { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--mp-cor); border-radius: var(--raio); cursor: pointer; box-shadow: var(--sombra); } .mp-caixa:hover { border-color: var(--mp-cor); } .mp-caixa.ativa { outline: 2px solid var(--primaria); outline-offset: 1px; } .mp-caixa.mp-apagada { opacity: .35; } .mp-titulo { font-weight: 600; font-size: 13px; line-height: 1.3; } .mp-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; } .mp-selo { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--mp-cor); background: var(--mp-fundo); } .mp-ligs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; } .mp-n { color: var(--mp-lig); font-weight: 600; white-space: nowrap; } .mp-setas { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; } .mp-seta { fill: none; stroke: var(--mp-lig); stroke-width: 1.6; opacity: .75; pointer-events: stroke; } .mp-seta.mp-lig-PARCIAL { stroke-dasharray: 6 4; } .mp-seta.mp-lig-PREVISTO { stroke-dasharray: 2 4; stroke-linecap: round; opacity: .6; } .mp-seta.mp-foco { stroke-width: 2.6; opacity: 1; } .mp-seta.mp-fundo { opacity: .08; } .mp-setas marker path { fill: var(--mp-lig); } .mp-ponta-INTEGRADO { --mp-lig: var(--ok); } .mp-ponta-PARCIAL { --mp-lig: #c97a00; } .mp-ponta-PREVISTO { --mp-lig: #8a93a3; } .mp-lista { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .mp-lista li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; } .mp-rodape { margin-top: 8px; } .mp-barra label { flex-direction: row; margin: 0; font-weight: 400; color: var(--texto); white-space: nowrap; } .mp-barra input[type=checkbox] { width: auto; margin: 0; } .mp-colunas.mp-hover .mp-seta:not(.mp-foco) { opacity: .08; } .mp-seta { opacity: .5; } .mp-seta.mp-lig-PREVISTO { opacity: .4; } /* v0.98.0: Gestor › Painel › Estudos e pendências */ .pe-s-ANDAMENTO { --mp-cor: var(--alerta); --mp-fundo: var(--alerta-fundo); } .pe-s-PARCIAL { --mp-cor: #2f7fb8; --mp-fundo: #e6f0f8; } .pe-s-ESCOPO { --mp-cor: #6b4fa0; --mp-fundo: #efeaf7; } .pe-s-AGUARDANDO { --mp-cor: #b3261e; --mp-fundo: var(--erro-fundo); } .pe-s-IDEIA { --mp-cor: #8a93a3; --mp-fundo: #f1f2f5; } .pe-s-ADIADA { --mp-cor: #a0a7b4; --mp-fundo: #f4f5f7; } .pe-s-FEITO { --mp-cor: var(--ok); --mp-fundo: var(--ok-fundo); } .pe-alta { --mp-cor: var(--erro); } .pe-esc { --mp-cor: var(--primaria); } .pe-cont { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; font-size: 11px; background: var(--acento); color: var(--primaria); } .pe-selo { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--mp-cor); background: var(--mp-fundo); white-space: nowrap; } .pe-prio { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .03em; } .pe-p-ALTA { color: var(--sobre-erro); background: var(--erro); } .pe-p-MEDIA { color: var(--alerta); background: var(--alerta-fundo); } .pe-p-BAIXA { color: var(--suave); background: var(--neutro); } .pe-filtros { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 8px; } .pe-filtros label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; font-size: 13px; } .pe-filtros select, .pe-filtros input { width: auto; } .pe-h { margin: 18px 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .pe-agora { margin: 6px 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .pe-agora li { cursor: pointer; line-height: 1.5; } .pe-agora li .dica { display: block; } .pe-tag { display: inline-block; margin: 2px 4px 0 0; padding: 0 6px; border-radius: 4px; font-size: 11px; background: var(--neutro); color: var(--texto); } .pe-tag-trava { background: var(--erro-fundo); color: var(--erro); } .pe-tag-destrava { background: var(--ok-fundo); color: var(--ok); } .pe-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; } .pe-coluna { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; background: var(--cab-tabela); border: 1px solid var(--borda); border-radius: var(--raio); } .pe-coluna h3 { margin: 0 0 4px; font-size: 13px; display: flex; gap: 6px; align-items: center; } .pe-coluna details { display: flex; flex-direction: column; gap: 8px; } .pe-coluna details .pe-card { margin-top: 8px; } .pe-card { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 8px 10px; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--mp-cor); border-radius: var(--raio); cursor: pointer; box-shadow: var(--sombra); } .pe-card:hover { border-color: var(--mp-cor); } .pe-card-topo { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .pe-card-titulo { font-weight: 600; font-size: 13px; line-height: 1.3; } .pe-card-rodape { display: flex; flex-wrap: wrap; } .pe-decisoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .pe-decisao { padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .pe-decisao header { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 12px; } .pe-decisao p { margin: 6px 0 0; font-size: 13px; } .pe-pergunta { font-weight: 600; } .pe-opcoes { margin: 4px 0 0; padding-left: 18px; font-size: 13px; } .pe-obs { font-style: italic; } .pe-id { font-weight: 700; } .pe-tab td { vertical-align: top; white-space: normal; } .pe-esc-lista { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .pe-lista { padding-left: 18px; margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } /* v1.00.0 (A52): papéis do parceiro — o topo da aba do papel e os números do crédito */ .papel-topo .papel-codigo { font-weight: 700; font-size: 1.05rem; } .papel-credito { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 6px 0 8px; } .papel-credito > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .papel-credito b { font-size: 1.1rem; } /* v1.29.3: sub-abas dentro de cada aba de tipo (Principal · Limite · Condição · Forma) e as listas com vigência */ .tp-subabas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--neutro); border-radius: var(--raio); width: fit-content; max-width: 100%; margin: 0 0 14px; } .tp-subabas button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: none; color: var(--suave); padding: 6px 12px; border-radius: 6px; cursor: pointer; } .tp-subabas button[aria-selected="true"] { background: var(--superficie); color: var(--primaria); box-shadow: var(--sombra); } .tp-subabas button:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; } /* v1.29.8: sub-abas da aba Fiscal do produto (mesmo desenho das do parceiro) — o ponto da pendência e o da alteração não salva */ .pfs-subabas button { display: inline-flex; align-items: center; gap: 2px; } .pfs-subabas .cu-pend { margin-left: 4px; } .pfs-sujo { color: var(--alerta); font-size: 12px; line-height: 1; margin-left: 4px; } .pfs-avisos:empty { display: none; } .pfs-avisos { margin: 0 0 10px; } .pfs-cest { display: block; font-variant-numeric: tabular-nums; } .pfs-cest-seg { display: block; font-weight: 600; padding: 7px 0; } /* v1.29.14: o segmento do CEST, campo próprio antes do CEST */ .tp-corpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .tp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tp-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); min-width: 0; } .tp-kpis b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .tp-kpis small { color: var(--suave); font-size: 12px; } .tp-barra { height: 8px; background: var(--neutro); border-radius: 4px; overflow: hidden; margin-top: 6px; } .tp-barra i { display: block; height: 100%; width: 0; background: var(--primaria); } .tp-barra i.alto { background: var(--alerta); } .tp-form { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie); } .tp-form h4 { margin: 0 0 8px; } .tp-larga { grid-column: 1 / -1; } .tp-check { align-self: end; } .tp-bloco { display: block; } .tp-acoes { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; } .tp-hist summary { cursor: pointer; font-weight: 600; margin: 4px 0; } /* v1.29.5: "Alterar número" na sub-aba Principal */ .tp-numero { margin: 6px 0 10px; } .tp-numero-form { margin: 6px 0; } .tp-principal .grade input[readonly] { background: var(--campo-off); } /* as listas com vigência são cartões em qualquer largura: o painel do parceiro é estreito (520 px) */ .tp-vig thead { display: none; } .tp-vig, .tp-vig tbody, .tp-vig tr, .tp-vig td { display: block; } .tp-vig tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--borda); } .tp-vig tr:last-child { border-bottom: 0; } .tp-vig td { grid-column: 1 / -1; border: 0; padding: 0; white-space: normal; text-align: left; min-width: 0; overflow-wrap: anywhere; font-size: 13px; } .tp-vig td.tp-c-val { grid-column: 1; grid-row: 1; font-size: 14px; } .tp-vig td.tp-c-selo { grid-column: 2; grid-row: 1; justify-self: end; } .tp-vig td.tp-c-vig { grid-row: 2; color: var(--suave); } .tp-vig td.tp-c-acoes:empty { display: none; } .tp-vig td[data-r]:not(.tp-c-val):not(.tp-c-vig)::before { content: attr(data-r) ": "; color: var(--suave); } .tp-vig td.vazio { text-align: center; color: var(--suave); } .tp-vig tr.tp-atual { background: var(--acento); box-shadow: inset 3px 0 0 var(--primaria); } @media (max-width: 760px) { .tp-kpis { grid-template-columns: 1fr; } .tp-vig tr { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 8px; background: var(--superficie); } .tp-vig tr.tp-atual { border-color: var(--primaria); background: var(--acento); } } /* v1.29.4: a aba única "Tipos de parceiro" — a escolha do tipo (com o código) no alto; no celular rola de lado, a página não */ .tp-escolha { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; max-width: 100%; min-width: 0; } .tp-escolha .tp-tipo { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto); cursor: pointer; white-space: nowrap; } .tp-escolha .tp-tipo .mono { color: var(--suave); font-size: 12px; } .tp-escolha .tp-tipo[aria-selected="true"] { border-color: var(--primaria); background: var(--acento); color: var(--primaria); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primaria); } .tp-escolha .tp-tipo:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; } @media (max-width: 760px) { .tp-escolha { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .tp-escolha .tp-tipo { scroll-snap-align: start; } } .ov-credito { flex-wrap: wrap; } /* v1.29.6: na grade de parceiros, os tipos um embaixo do outro (um por linha na célula) */ .tipos-pilha { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; } .tipos-pilha .selo { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tipos-pilha .pf-fin-vazia { font-size: 12px; color: var(--suave); white-space: nowrap; } /* v1.31.24: finalidade em branco */ /* v1.29.6: a sub-aba Frete — o padrão de hoje e os dois blocos (modalidade, transportadoras) */ .tp-frete-hoje { margin: 0; padding: 8px 12px; background: var(--neutro); border-radius: var(--raio); overflow-wrap: anywhere; } .tp-frete-tit { margin: 10px 0 0; } #numeracao-tipos-parceiro select { min-width: 16em; } #numeracao-tipos-parceiro input[type=number] { max-width: 9em; } /* v1.15.1: a máscara do código cabe inteira no campo */ @media (min-width: 761px) { #numeracao-tipos-parceiro input[name=mascara] { min-width: 12ch; } } @media (max-width: 760px) { #numeracao-tipos-parceiro input[name=mascara] { min-width: 0; max-width: 100%; } } /* v1.00.0: feriados por esfera — nacional (roxo), estadual (laranja), municipal (azul) */ .fer-selo { font-weight: 600; white-space: normal; } .fer-NACIONAL { background: #f3eefa; color: var(--simples); } .fer-ESTADUAL { background: var(--alerta-fundo); color: var(--alerta); } .fer-MUNICIPAL { background: var(--acento); color: var(--primaria); } .ag-fer.ag-fer-ESTADUAL { background: var(--alerta-fundo); color: var(--alerta); border-color: var(--alerta); } .ag-fer.ag-fer-MUNICIPAL { background: var(--acento); color: var(--primaria); border-color: var(--primaria); } /* esfera · lugar · nome do feriado em todas as visões da agenda; filtro por UF e município */ .ag-cel .ag-chip.ag-fer, .ag-col .ag-chip.ag-fer { white-space: normal; overflow-wrap: anywhere; } .ag-cel .ag-chip.ag-fer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .ag-chip.ag-a-conferir { border-left-style: dashed; } .ag-conf { font-size: 10px; font-style: italic; font-weight: 600; opacity: .85; } .ag-fer-qtd { opacity: .8; } .ag-mini em.ag-fer.ag-fer-ESTADUAL { background: var(--alerta); } .ag-mini em.ag-fer.ag-fer-MUNICIPAL { background: var(--primaria); } .ag-fer-lista { list-style: none; margin: 6px 0 0; padding: 0; font-size: 11px; line-height: 1.35; } .ag-fer-lista li { margin: 3px 0; overflow-wrap: anywhere; } .ag-fer-lista .link { font-size: 11px; padding: 0; font-variant-numeric: tabular-nums; } .ag-fer-lista .selo { font-size: 10px; padding: 0 5px; } .ag-fer-mes { display: none; } .ag-fer-mes h4 { margin: 12px 0 2px; font-size: 13px; } .ag-lugar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .ag-lugar select { width: auto; max-width: 14em; padding: 2px 6px; font-size: 12px; } @media (max-width: 720px) { .ag-fer-mes { display: block; } .ag-fer-mes .ag-fer-lista { font-size: 13px; } .ag-cel .ag-chip.ag-fer { display: block; } .ag-cel .ag-chip .ag-conf { font-size: 0; } .ag-lugar select { max-width: 100%; } } .mov-fer .selo, .ov-fer .selo { margin-top: 3px; font-size: 11px; } .agf-filtros { align-items: flex-end; gap: 8px 14px; flex-wrap: wrap; } .agf-filtros select { width: auto; } :root[data-tema="escuro"] .fer-NACIONAL { background: #3a2d63; color: #e4dbff; } :root[data-tema="escuro"] .fer-ESTADUAL, :root[data-tema="escuro"] .ag-fer.ag-fer-ESTADUAL { background: #4a3410; color: #fde3b0; } :root[data-tema="escuro"] .fer-MUNICIPAL, :root[data-tema="escuro"] .ag-fer.ag-fer-MUNICIPAL { background: #172554; color: #bfdbfe; } #ag-fer-form select { min-width: 7.5em; width: auto; } /* v1.03.0 — Financeiro: o painel do título em abas, o cabeçalho do parceiro, o seletor de parceiro pela raiz do CNPJ */ .fin-abas { margin: 12px 0 10px; flex-shrink: 0; } .fin-abas .aba { font-size: 13px; padding: 8px 10px; } .fin-cab-parc { display: flex; gap: 12px; align-items: center; margin: 6px 0 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .av.fin-av-grande, .av-txt.fin-av-grande { width: 52px; height: 52px; font-size: 16px; border-radius: 10px; } /* v1.04.0 — o logo do banco: pequeno e do mesmo tamanho em toda lista, painel e seletor */ .av.fin-banco-av { width: 28px; height: 28px; font-size: 10px; border-radius: 6px; padding: 2px; box-sizing: border-box; } .av-txt.fin-banco-av { padding: 0; } .fin-conta-logo { display: inline-flex; align-items: center; gap: 8px; } .fin-conta-logo > span:last-child { overflow-wrap: break-word; } /* na coluna estreita (aba Baixas do título) o nome desce para baixo do logo em vez de alargar a tabela */ td .fin-conta-logo { flex-wrap: wrap; row-gap: 4px; } .fin-conta-sel { display: flex; align-items: center; gap: 8px; } .fin-conta-sel select { flex: 1; min-width: 0; } .fin-conta-sel [data-fin-conta-av]:empty { display: none; } .fin-parc-item { display: flex; gap: 10px; align-items: flex-start; min-width: 0; } .fin-parc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fin-parc-txt b { overflow-wrap: anywhere; } .fin-parc-l2 { font-size: 12.5px; color: var(--suave); } .fin-parc-l2 .doc-tipo { font-size: 12px; margin-left: 2px; } .fin-parc-l3 { display: flex; flex-wrap: wrap; gap: 4px; } .fin-papel { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--acento); color: var(--primaria-escura); } .fin-papel-tit { font-weight: 600; } .fin-resumo { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--suave); margin: 0 0 8px; } .fin-resumo b { color: var(--texto); } .fin-trava { border-left: 3px solid var(--alerta); padding-left: 8px; } .fin-aviso { background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); padding: 8px 10px; font-size: 13px; } .fin-travas { margin-top: 10px; } .fin-travas h5 { margin: 0 0 4px; } .fin-fecha { color: var(--ok); font-weight: 600; } .fin-hist { list-style: none; margin: 0; padding: 0; } .fin-hist > li { border-left: 3px solid var(--borda); padding: 6px 0 8px 10px; margin: 0 0 6px; font-size: 13px; } .fin-hist > li.fin-hist-alterado { border-left-color: var(--primaria); } .fin-hist > li.fin-hist-cancelado, .fin-hist > li.fin-hist-baixa_estornada, .fin-hist > li.fin-hist-compensacao_estornada { border-left-color: var(--alerta); } .fin-hist > li.fin-hist-baixa { border-left-color: var(--ok); } .fin-parc { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; } .fin-rot { font-size: 13px; font-weight: 600; } .fin-parc-esc { padding: 8px 10px; border: 1px dashed var(--borda); border-radius: var(--raio); } .fin-parc-res { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; } .fin-parc-res button { text-align: left; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-top: 0; padding: 8px 10px; } .fin-parc-res > :first-child { border-top: 1px solid var(--borda); border-radius: 6px 6px 0 0; } .fin-parc-res button:hover, .fin-parc-res button:focus { background: var(--acento); } .fin-parc-res button.fin-no-grupo { padding-left: 22px; } .fin-parc-grupo { font-size: 12px; font-weight: 600; color: var(--primaria); background: var(--fundo); border: 1px solid var(--borda); border-top: 0; padding: 4px 10px; } .fin-parc-res > .fin-parc-grupo:first-child { border-top: 1px solid var(--borda); } .fin-gerador { align-items: end; } .fin-parc-tab input { width: 100%; min-width: 0; } .fin-parc-tab td:first-child { width: 32px; } .fin-exporta { margin: 0 0 8px; } .fin-transf-dica { margin: 0 0 8px; } p.erro[data-fin-soma], .dica.erro { color: var(--erro); } @media (max-width: 640px) { .fin-cab-parc { align-items: flex-start; } .fin-abas { flex-wrap: nowrap; overflow-x: auto; } } .fin-parcelas td, .fin-parcelas th { white-space: nowrap; } .fin-parcelas .fin-baixar { display: block; padding: 4px 0 0; font-weight: 600; } /* v1.03.0: Estoque (A34 fase 1) — web/estoque.js */ .est-tab tr.est-problema td { background: var(--alerta-fundo); } .est-tab tr.est-estornado td { color: var(--suave); text-decoration: line-through; text-decoration-color: var(--borda); } .est-tab .dica.erro { color: var(--erro); } .est-controle { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 4px 0 12px; } .est-busca-item label { margin: 0; } .est-planilha .linha-acoes { justify-content: flex-start; gap: 10px; } .est-pend { margin: 6px 0 0 18px; font-size: 13px; } /* v1.05.0: Compras (A53) — os itens do pedido no painel lateral, um bloco por item */ .cmp-item .cmp-item-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .cmp-item input[type=search] { margin-bottom: 4px; } /* v1.06.0: modo de acesso — a empresa fixada no login, o aviso da recuperação e o link de acesso do Gestor */ .empresa-fixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--acento); } .empresa-fixa strong { flex: 1 1 auto; font-size: 15px; } .empresa-fixa .link { padding: 0; } .aviso-caixa { background: var(--alerta-fundo); color: var(--alerta); border-radius: 6px; padding: 8px 10px; margin: 0; } .acesso-link { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; } .acesso-link code { word-break: break-all; background: var(--fundo); padding: 4px 6px; border-radius: 4px; } .acesso-link img { width: 160px; height: 160px; background: #fff; border: 1px solid var(--borda); border-radius: 6px; } /* v1.06.0: dicionário de campos (A26) — o aviso de tamanho nos cadastros e a tela do Gestor */ .dic-conta { align-self: flex-end; font-size: 11px; font-weight: 500; color: var(--suave); } /* v1.07.0: vermelho = acima da trava (não grava); amarelo = entre o aviso e a trava (sai abreviado) ou abaixo do mínimo */ .dic-conta.passou, .dic-conta.aviso { align-self: stretch; border-radius: 6px; padding: 4px 8px; font-size: 12px; white-space: normal; } .dic-conta.passou { color: var(--erro); background: var(--erro-fundo); font-weight: 600; } .dic-conta.aviso { color: var(--alerta); background: var(--alerta-fundo); } input.dic-passou { border-color: var(--erro); box-shadow: 0 0 0 1px var(--erro); } input.dic-aviso { border-color: var(--alerta); } .dic-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; } .dic-filtros input[type=search] { max-width: 320px; } .dic-tab td { white-space: normal; vertical-align: top; } .dic-destinos { display: flex; flex-wrap: wrap; gap: 4px; } .dic-dest { display: inline-block; background: var(--neutro); border-radius: 999px; padding: 2px 9px; font-size: 12px; } .dic-dest.fora { opacity: .7; font-style: italic; } .dic-dest.abrevia { background: var(--alerta-fundo); } .dic-dest.inativo { opacity: .55; text-decoration: line-through; } .dic-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; } .dic-cartoes { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .dic-cartao { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; color: var(--texto); } .dic-cartao:hover { border-color: var(--primaria); } .dic-cartao.inativo { opacity: .6; } .dic-cartao .selo { margin-left: 4px; } /* v1.08.0 (A43, M1): segundo fator — o código no login, o cadastro (QR, chave, códigos de recuperação) e Minha conta */ .fa2-entrada { font-size: 22px; letter-spacing: 4px; text-align: center; font-variant-numeric: tabular-nums; } .fa2-cadastro-card { max-width: 440px; } .fa2-lista { margin: 0 0 8px 18px; padding: 0; display: grid; gap: 4px; } .fa2-form { display: flex; flex-direction: column; gap: 10px; } .fa2-qr { width: 200px; height: 200px; align-self: center; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--borda); } .fa2-chave { word-break: break-all; font-size: 15px; letter-spacing: 1px; margin: 0; user-select: all; } .fa2-lista-codigos { list-style: none; padding: 0; margin: 6px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 15px; user-select: all; } .fa2-conta { max-width: 520px; } .fa2-alertas { padding: 10px 12px; margin: 8px 0 12px; border-radius: 6px; display: grid; gap: 6px; } .fa2-alerta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .painel-seguranca { margin-bottom: 12px; } @media (max-width: 480px) { .fa2-lista-codigos { grid-template-columns: 1fr; } .fa2-qr { width: 180px; height: 180px; } } /* ======================================================= v1.09.0: Aparência (menu da conta › Aparência) O painel é o mesmo .painel dos cadastros. Cada escolha é um botão com uma amostra desenhada só com CSS (sem imagem): o tema em miniatura, a bolinha da cor, o "Aa" do tamanho e as linhas da densidade. */ .apar-grupo { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; } .apar-grupo legend { font-weight: 600; color: var(--texto); padding: 0; margin-bottom: 8px; } .apar-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .apar-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; min-height: 40px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; font-size: 13px; text-align: center; } .apar-op:hover { border-color: var(--primaria); } .apar-op.ativa { border-color: var(--primaria); box-shadow: inset 0 0 0 1px var(--primaria); background: var(--acento); color: var(--primaria-escura); font-weight: 600; } .apar-amostra { display: block; width: 52px; height: 32px; border-radius: 6px; border: 1px solid var(--borda); } /* tema: o fundo, uma "barra" de menu e um botão */ .apar-am-tema-claro { background: linear-gradient(90deg, #ffffff 0 30%, #f5f6f8 30%); box-shadow: inset 20px -8px 0 -14px #1f5d8c; } .apar-am-tema-escuro { background: linear-gradient(90deg, #1a222c 0 30%, #121820 30%); border-color: #2f3b49; box-shadow: inset 20px -8px 0 -14px #7db3e0; } .apar-am-tema-contraste { background: #fff; border: 2px solid #000; box-shadow: inset 20px -8px 0 -14px #0a3d66; } /* destaque: a bolinha da cor (o tom do tema claro, que é o que o nome descreve) */ .apar-destaque .apar-amostra { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borda); } .apar-am-destaque-azul { background: #1f5d8c; } .apar-am-destaque-verde { background: #1d6b4f; } .apar-am-destaque-grafite { background: #3e4a5b; } .apar-am-destaque-vinho { background: #8a2c3e; } /* letra: Aa pequeno e grande */ .apar-letra .apar-amostra { border: 0; height: auto; width: auto; font-weight: 700; line-height: 1; color: var(--texto); } .apar-am-letra-normal::before { content: "Aa"; font-size: 15px; } .apar-am-letra-grande::before { content: "Aa"; font-size: 21px; } /* densidade: linhas mais soltas ou mais juntas */ .apar-densidade .apar-amostra { width: 44px; height: 30px; border: 0; } .apar-am-densidade-confortavel { background: repeating-linear-gradient(180deg, var(--suave) 0 2px, transparent 2px 10px); opacity: .6; } .apar-am-densidade-compacta { background: repeating-linear-gradient(180deg, var(--suave) 0 2px, transparent 2px 6px); opacity: .6; } /* v1.30.11: trabalhar com abas — com e sem a barra de abas no alto */ .apar-abas .apar-amostra { width: 52px; height: 30px; background-color: var(--fundo); } .apar-am-abas-sim { background: linear-gradient(var(--primaria), var(--primaria)) 4px 5px / 14px 7px no-repeat, linear-gradient(var(--borda), var(--borda)) 20px 5px / 12px 7px no-repeat, linear-gradient(var(--borda), var(--borda)) 34px 5px / 12px 7px no-repeat, var(--fundo); } .apar-am-abas-nao { background: linear-gradient(var(--borda), var(--borda)) 4px 5px / 42px 2px no-repeat, var(--fundo); } .apar-previa { border: 1px dashed var(--borda); border-radius: var(--raio); padding: 12px; margin: 4px 0 12px; background: var(--fundo); } .apar-previa h4 { font-size: 14px; } .apar-previa .dica { margin: 2px 0 10px; } .apar-previa-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; } .apar-previa .tabela tbody tr { cursor: default; } .apar-estado { margin: 0 0 0 8px; align-self: center; } /* o item Aparência no menu da conta: com ícone, como os itens de cima */ .conta-acao.conta-aparencia { gap: 10px; } .conta-acao.conta-aparencia .ico { width: 18px; height: 18px; color: var(--suave); } .conta-acao.conta-aparencia:hover .ico { color: var(--primaria); } @media (max-width: 760px) { .apar-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apar-previa .tabela tr { grid-template-columns: auto 1fr auto; } } /* ======================================================= v1.09.0: densidade compacta Menos espaço nas listas, nos formulários, nos painéis e no menu aberto — sem mudar o tamanho da letra. As regras de tabela valem só no computador: no celular a lista já é cartão (e o cartão tem as suas). */ :root[data-densidade="compacta"] input, :root[data-densidade="compacta"] select, :root[data-densidade="compacta"] textarea { padding: 5px 8px; } :root[data-densidade="compacta"] label { gap: 2px; } :root[data-densidade="compacta"] .form { padding: 12px; gap: 8px; } :root[data-densidade="compacta"] .grade { gap: 8px; } :root[data-densidade="compacta"] .titulo-pag { margin-bottom: 10px; } :root[data-densidade="compacta"] .filtros-caixa { padding: 8px 10px; } :root[data-densidade="compacta"] .filtros-grade { gap: 8px; } :root[data-densidade="compacta"] .abas { margin-bottom: 10px; } :root[data-densidade="compacta"] .aba { padding: 6px 10px; } :root[data-densidade="compacta"] .docs li { padding: 6px 0; } :root[data-densidade="compacta"] .doc { padding: 6px 0; } :root[data-densidade="compacta"] .bloco { padding-top: 10px; margin-top: 10px; } :root[data-densidade="compacta"] .primario, :root[data-densidade="compacta"] .excluir { padding: 7px 14px; } :root[data-densidade="compacta"] .app:not(.recolhido) .grupo a { padding: 5px 10px 5px 22px; margin: 1px 0 1px 12px; } :root[data-densidade="compacta"] .app:not(.recolhido) .grupo summary { padding: 6px 10px; } :root[data-densidade="compacta"] .app:not(.recolhido) .grupo .subgrupo > summary { padding: 5px 10px 5px 22px; } :root[data-densidade="compacta"] .app:not(.recolhido) .grupo .subgrupo > a { margin-left: 24px; } :root[data-densidade="compacta"] .linha-tempo li { padding: 7px 10px; margin-bottom: 6px; } @media (min-width: 761px) { :root[data-densidade="compacta"] .conteudo { padding: 16px 20px; } :root[data-densidade="compacta"] .painel { padding: 14px 16px; } :root[data-densidade="compacta"] .tabela th { padding: 6px 10px; } :root[data-densidade="compacta"] .tabela td { padding: 5px 10px; } :root[data-densidade="compacta"] .ov-tab td, :root[data-densidade="compacta"] .ov-tab th { padding: 5px 8px; } } @media (max-width: 760px) { :root[data-densidade="compacta"] .tabela tr { padding: 8px 10px; margin-bottom: 6px; } } /* ======================================================= v1.12.0: Financeiro — o título por dentro (protótipo) A grade com os filtros recolhidos (Empresa em todas as abas; Parceiro/Documento e Datas), as abas da grade (Títulos · Pré-cadastros · Previsões), as colunas "Nº NF / série" e "Nº documento e parcela" (001/010) e, no título, as abas Observações, Anexos (o pré-cadastro lido do boleto/DANFE), Nota fiscal e Comprador/Vendedor. */ .fin-visoes { margin-left: auto; } .fin-visoes .cu-barra { margin: 0; align-items: center; } .fin-visoes .cu-visao { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; } .fin-visoes .cu-visao select { width: auto; min-width: 140px; padding: 5px 8px; } .fin-f-fixo { grid-template-columns: minmax(220px, 340px); margin-bottom: 10px; } .filtros-grade .fin-f-largo { grid-column: span 2; } .fin-f-datas { display: grid; grid-template-columns: max-content minmax(140px, 190px) minmax(140px, 190px); gap: 8px 10px; align-items: center; } .fin-f-datas .fin-f-rot { font-size: 13px; font-weight: 600; color: var(--texto); padding-right: 8px; } .fin-f-datas .fin-f-cab { font-size: 12px; color: var(--suave); } .fin-f-datas input.ativo, .filtros-caixa input.ativo { border-color: var(--primaria); background: var(--acento); } .filtros-caixa:not(.aberto) .fin-f-datas { display: none; } .fin-grade-abas { margin: 4px 0 10px; } .fin-grade-abas:empty { display: none; } .contagem.fin-cont-pend { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--alerta-fundo); color: var(--alerta); font-weight: 700; font-size: 12px; text-align: center; } .fin-grade td.fg-nf, .fin-grade td.fg-doc .mono { white-space: nowrap; } .fin-parc-num { display: inline-block; font-size: 12px; padding: 0 6px; border-radius: 4px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); } .fin-parc-tab td:first-child { width: 76px; white-space: nowrap; } .fin-grade-nf { grid-template-columns: 2fr 1fr 2fr; } .fin-linha { overflow-wrap: anywhere; font-size: 13px; letter-spacing: .2px; } /* v1.29.11: a forma de pagamento e o boleto de cada parcela */ .fin-por-forma { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 6px 0 8px; font-size: 13px; } .fin-pf { white-space: nowrap; } .fin-linha-curta { font-size: 12px; white-space: nowrap; } .fin-forma-real { color: var(--pend-texto); } .fin-forma-troca { font-size: 12px; } .fin-parc-bol input { min-width: 15ch; } .fin-parc-bol [data-p-conf] { margin-top: 2px; font-size: 12px; } .fin-bol-form .selo { white-space: normal; } .fin-chave { overflow-wrap: anywhere; font-size: 12.5px; } .fin-aviso.fin-aviso-ok { background: var(--ok-fundo); color: var(--ok); } .fin-lido { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-top: 10px; background: var(--superficie); } .fin-lido h5 { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .fin-avisos { margin: 6px 0; padding: 8px 10px 8px 26px; background: var(--alerta-fundo); color: var(--alerta); border-radius: var(--raio); font-size: 13px; } .fin-avisos li + li { margin-top: 3px; } .fin-soltar { margin: 8px 0; } .fin-obs, .fin-anexos, .fin-resp, .fin-lista-notas, .fin-imp-lista { list-style: none; margin: 0 0 10px; padding: 0; } .fin-obs > li, .fin-anexos > li { border-left: 3px solid var(--borda); padding: 6px 0 8px 10px; margin-bottom: 6px; font-size: 13.5px; } .fin-obs-l1, .fin-anexo-l1 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fin-obs-l1 .link, .fin-anexo-l1 .link { margin-left: auto; } .fin-obs-texto { margin: 4px 0 2px; white-space: pre-wrap; } .fin-anexo-nome { font-weight: 600; overflow-wrap: anywhere; } .fin-obs-nova h5, .fin-vincula h5 { margin: 0 0 6px; } .fin-resp > li { padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; } .fin-resp-principal { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--superficie); } .fin-resp-principal h5 { margin: 0 0 4px; } .fin-resp-nome { font-size: 16px; margin: 0 0 4px; } .fin-pedido h5 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; } .fin-itens { font-size: 13px; margin: 6px 0 4px; } .fin-itens td, .fin-itens th { padding: 5px 8px; } .fin-totais { grid-template-columns: max-content max-content; } .fin-totais dd { text-align: right; } .fin-busca-nota input { width: 100%; } .fin-nres { margin-top: 6px; } .fin-lista-notas > li { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; } .fin-lista-notas .dica { overflow-wrap: anywhere; } .fin-preparado { border: 1px dashed var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie); } .fin-preparado h5 { margin: 0 0 6px; } .fin-prev-cab { margin: 0 0 10px; } .fin-prev-cab p { margin: 4px 0 0; } .fin-prev tr.fin-prev-itens td { background: var(--fundo); padding: 4px 10px 10px; } .fin-rasc .fin-arq { overflow-wrap: anywhere; max-width: 260px; } .fin-rasc-dica { margin: 0 0 8px; } .fin-imp-lista > li { padding: 6px 0; border-bottom: 1px solid var(--borda); font-size: 13px; overflow-wrap: anywhere; } .fin-prev td .selo, .fin-rasc td .selo { white-space: nowrap; } @media (max-width: 760px) { #pag-fin-pagar .acoes-titulo, #pag-fin-receber .acoes-titulo { display: flex; flex-direction: column-reverse; gap: 8px; width: 100%; } #pag-fin-pagar .acoes-titulo .secundario, #pag-fin-receber .acoes-titulo .secundario { width: 100%; padding: 11px; } .fin-visoes .cu-barra { flex-wrap: nowrap; width: 100%; } .fin-visoes .cu-visao { flex: 1; font-size: 0; gap: 0; } .fin-visoes .cu-visao select { width: 100%; font-size: 16px; } .fin-visoes { margin-left: 0; width: 100%; } .filtros-barra:has(.fin-visoes) { flex-wrap: wrap; } .filtros-grade .fin-f-largo { grid-column: 1 / -1; } .fin-f-fixo { grid-template-columns: 1fr; } .fin-f-datas { grid-template-columns: 1fr 1fr; } .fin-f-datas .fin-f-rot { grid-column: 1 / -1; margin-top: 4px; } .fin-f-datas .fin-f-cab, .fin-f-datas > span:first-child { display: none; } .fin-grade-abas { flex-wrap: nowrap; overflow-x: auto; } .fin-grade tr { grid-template-columns: 1fr auto; } .fin-grade td.fg-parc { grid-column: 1 / -1; grid-row: 1; font-size: 15px; } .fin-grade td.fg-venc { grid-column: 1; } .fin-grade td.fg-val { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 700; } .fin-grade td.fg-nf, .fin-grade td.fg-doc { grid-column: 1 / -1; } .fin-grade td.fg-nf::before, .fin-grade td.fg-doc::before, .fin-grade td.fg-sal::before, .fin-grade td.fg-ent::before { content: attr(data-r) ": "; color: var(--suave); font-size: 12px; font-family: inherit; } .fin-grade td.fg-nf .dica { display: inline; margin-left: 6px; } .fin-grade td.fg-cat { display: none; } .fin-grade td.fg-ent { grid-column: 1; font-size: 13px; } .fin-grade td.fg-sal { grid-column: 1; font-size: 13px; } .fin-grade td.fg-sit { grid-column: 2; grid-row: 3 / span 2; justify-self: end; align-self: end; text-align: right; } .fin-grade-nf { grid-template-columns: 1fr 1fr; } .fin-grade-nf > :first-child { grid-column: 1 / -1; } .fin-lista-notas > li { flex-direction: column; align-items: flex-start; } } /* v1.12.0 (ajuste aprovado): parceiro novo no pré-cadastro — avisa e só cadastra na confirmação */ .fin-parc-novo { border: 1px solid var(--pend-borda); background: var(--pend-fundo); border-radius: var(--raio); padding: 10px 12px; margin: 8px 0 12px; } .fin-parc-novo h5 { margin: 0 0 4px; color: var(--pend-texto); } .fin-parc-novo p { margin: 4px 0; } .fin-pn-form { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--pend-borda); } .fin-pn-form .fin-fonte { margin: 2px 0 0; font-size: 11px; vertical-align: middle; display: inline-block; width: auto; align-self: flex-start; justify-self: start; } .fin-pn-form .fin-pn-end { margin: 2px 0 8px 24px; } .fin-a-cadastrar { white-space: nowrap; } @media (max-width: 760px) { .fin-parc-novo .linha-acoes { flex-direction: column; align-items: stretch; } .fin-pn-form .fin-pn-end { margin-left: 0; } } /* v1.13.0 (A54): Gestão de Documentos — abas, filtros, envio (arrastar / Tirar foto), lista e o documento */ .doc-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .doc-abas .selo { font-size: 10px; padding: 1px 6px; margin-left: 4px; } .doc-filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 14px; } .doc-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); min-width: 130px; } .doc-filtros .doc-f-parc { flex: 1 1 200px; } .doc-filtros input, .doc-filtros select { font-size: 14px; } .doc-cartoes .cartao-num { padding: 10px 14px; } .doc-cartoes .cartao-num strong { font-size: 1.5rem; } .doc-c-val { display: block; font-size: 12px !important; color: var(--texto) !important; font-variant-numeric: tabular-nums; } .cartao-num.c-erro { border-color: var(--erro); background: var(--erro-fundo); } .cartao-num.c-erro strong { color: var(--erro); } .cartao-num.c-alerta { border-color: var(--alerta); background: var(--alerta-fundo); } .cartao-num.c-alerta strong { color: var(--alerta); } .doc-envio { margin-bottom: 14px; } .doc-envio-linha { display: flex; gap: 10px; align-items: stretch; } .doc-envio-linha .doc-soltar { flex: 1; margin: 0; } .doc-foto { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 112px; padding: 10px 14px; cursor: pointer; text-align: center; border-radius: var(--raio); } .doc-foto svg { width: 26px; height: 26px; } .doc-envio-campos { margin-bottom: 8px; } .doc-tab td { vertical-align: top; } .doc-nome-arq { font-size: 12px; color: var(--suave); margin-top: 3px; word-break: break-all; } .doc-arq { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; } .doc-previa { max-width: 100%; max-height: 220px; border: 1px solid var(--borda); border-radius: var(--raio); object-fit: contain; background: var(--neutro); } .doc-pre .grade, .doc-baixa .grade { margin-top: 6px; } .doc-parc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; } .doc-candidatos { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; } .doc-candidatos li { border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; display: grid; gap: 4px; } .doc-candidatos li button { justify-self: start; } .doc-total { font-size: 1.3rem !important; } .fin-comprovante { margin-top: 10px; } .fin-comprovante .doc-envio-linha .mov-soltar { padding: 10px; } @media (max-width: 760px) { /* no celular, o botão Tirar foto vem logo depois das abas (antes dos filtros) */ .doc-pagina { display: flex; flex-direction: column; } .doc-pagina > .doc-abas-cx { order: -2; } .doc-pagina > .doc-envio, .doc-pagina > [data-doc-res] { order: -1; } .doc-filtros label { min-width: 0; flex: 1 1 45%; } .doc-envio-linha { flex-direction: column-reverse; } .doc-foto { flex-direction: row; justify-content: center; min-height: 52px; font-size: 16px; font-weight: 600; } .doc-cartoes { grid-template-columns: repeat(2, 1fr); } } /* v1.13.0 (A54, desenho aprovado): a grade única — filtros fechados, chips de tipo, colunas de arquivo com contagem */ .doc-fbarra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; } .doc-fbotao { display: inline-flex; align-items: center; gap: 6px; } .doc-fbotao svg { width: 16px; height: 16px; } .doc-fbotao.aberto { border-color: var(--primaria); background: var(--acento); } .doc-total-txt { margin-left: auto; } .doc-fcaixa { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 12px; background: var(--superficie); } .doc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .doc-chips .dica { margin-right: 4px; } .chip-f { border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--texto); cursor: pointer; } .chip-f.sel { background: var(--primaria); border-color: var(--primaria); color: #fff; } [data-doc-corpo].carregando { opacity: .55; transition: opacity .15s; } /* compacta: as 9 colunas de dados e as 7 de arquivo cabem na tela de 1366 px sem rolar de lado */ .doc-grade th, .doc-grade td { white-space: nowrap; padding: 8px 5px; font-size: 13px; } .doc-grade th { font-size: 11px; letter-spacing: .2px; white-space: normal; line-height: 1.25; vertical-align: bottom; } .doc-grade th:first-child, .doc-grade td:first-child { padding-left: 12px; } .doc-grade td.doc-c-parc { white-space: normal; min-width: 108px; max-width: 190px; } .doc-grade td.doc-c-doc { white-space: normal; min-width: 100px; max-width: 160px; } .doc-grade td.doc-c-emp { white-space: normal; max-width: 110px; } .doc-grade .selo { font-size: 10.5px; padding-left: 6px; padding-right: 6px; } .doc-grade .doc-nome-arq { overflow-wrap: break-word; word-break: normal; font-size: 12px; font-weight: 400; } .doc-arqh { text-align: center; padding-left: 3px !important; padding-right: 3px !important; vertical-align: bottom; } .doc-arqh svg { width: 16px; height: 16px; display: block; margin: 0 auto 2px; } .doc-arqh-t { display: block; font-size: 10px; line-height: 1.15; white-space: normal; max-width: 56px; margin: 0 auto; text-transform: none; letter-spacing: 0; } .doc-arqh-t .selo { display: block; width: max-content; margin: 2px auto 0; font-size: 9px; padding: 0 4px; text-transform: none; } .doc-arqc { text-align: center; padding-left: 3px !important; padding-right: 3px !important; } .doc-arqb { position: relative; background: var(--acento); border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; color: var(--primaria); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; } .doc-arqb:hover, .doc-arqb:focus-visible { border-color: var(--primaria); } .doc-arqb svg { width: 18px; height: 18px; } .doc-arqn { position: absolute; top: -6px; right: -7px; background: var(--primaria); color: #fff; border-radius: 999px; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; font-weight: 700; } .doc-sigla { font-size: 10px; font-weight: 700; } .doc-papel { font-size: 12px; color: var(--suave); } .doc-pop { position: absolute; z-index: 30; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px 12px; min-width: 260px; max-width: 360px; } .doc-pop ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .doc-pop li { display: grid; } #doc-grade { position: relative; } .doc-paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 12px 0; } .doc-arq-lista { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 10px; } .doc-arq-lista ul { list-style: none; padding: 0 0 0 26px; margin: 4px 0 0; display: grid; gap: 4px; } .doc-arq-g { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .doc-arq-g svg { width: 18px; height: 18px; color: var(--primaria); } .doc-grade td.doc-quebra { display: none; } @media (max-width: 760px) { /* no celular a grade vira cartões: o documento e o valor no alto; a situação, a empresa e o tipo do parceiro; o parceiro; NF, entrada e vencimento numa linha; e os ícones dos arquivos numa linha */ .doc-grade thead { display: none; } .doc-grade, .doc-grade tbody { display: block; } .tabela.doc-grade tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 10px; background: var(--superficie); } .tabela.doc-grade td { display: block; border: 0 !important; padding: 0 !important; white-space: normal; width: auto; max-width: none; min-width: 0; font-size: 13px; } .tabela.doc-grade td.doc-c-doc { order: -2; flex: 1 0 55%; font-size: 15px; } .tabela.doc-grade td.doc-c-valor { order: -1; margin-left: auto; font-weight: 700; font-size: 15px; } .tabela.doc-grade td.doc-c-emp { color: var(--suave); } .tabela.doc-grade td.doc-c-parc { flex-basis: 100%; font-weight: 600; font-size: 14px; } .tabela.doc-grade td.doc-c-dado::before { content: attr(data-r) " "; color: var(--suave); font-size: 11.5px; } .tabela.doc-grade td.doc-quebra { display: block; flex-basis: 100%; height: 0; } .tabela.doc-grade td.doc-arqc { margin-top: 2px; } .tabela.doc-grade td.doc-arqc.vazio-c { display: none; } .doc-total-txt { margin-left: 0; width: 100%; } } #doc-grade .doc-envio-emp { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); flex-wrap: wrap; margin: 0; } .doc-envio-emp select { width: auto; min-width: 220px; } /* v1.16.0 (A64) — cliente do Gestor × empresa principal: o que vem do cadastro do cliente no escritório */ .cu-nota-cliente { margin: 0 0 12px; padding: 8px 12px; border: 1px dashed var(--primaria); border-radius: var(--raio); background: var(--acento); color: var(--primaria-escura); } .lt-acoes .cu-do-cliente { font-size: 12px; } /* a aba Conferir com a empresa: cada diferença com os dois valores lado a lado; o marcado é o que fica */ .conf-estado { padding: 8px 12px; border-radius: var(--raio); margin: 8px 0 14px; } .conf-estado.aguarda { background: var(--alerta-fundo); color: var(--alerta); } .conf-estado.ok { background: var(--ok-fundo); color: var(--ok); } .conf-vazio { padding: 16px; text-align: center; color: var(--suave); background: var(--explica); border-radius: var(--raio); } .conf-lista { display: grid; gap: 10px; } .conf-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-items: stretch; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); } .conf-linha.travada { background: var(--campo-off); } .conf-campo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .conf-campo .dica { margin: 0; font-size: 12px; } .conf-op { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; min-width: 0; } .conf-op input { grid-row: 1 / span 3; margin-top: 3px; } .conf-op:has(input:checked) { border-color: var(--primaria); background: var(--acento); box-shadow: inset 0 0 0 1px var(--primaria); } .conf-op.desligada { cursor: default; opacity: .75; } .conf-lado { font-size: 12px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; } .conf-valor { overflow-wrap: anywhere; font-weight: 600; } .conf-quando { font-size: 12px; color: var(--suave); } .conf-op .selo { justify-self: start; grid-column: 2; } .conf-so, .conf-pend { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; } .conf-pend li { padding: 6px 10px; border-radius: var(--raio); background: var(--alerta-fundo); color: var(--alerta); } @media (max-width: 760px) { .conf-linha { grid-template-columns: 1fr; } } /* v1.16.0: Gestor › Operacional › Cobertura SPED (web/cobertura_sped.js). Cada situação tem a sua cor: atende (verde), gerado (azul), no XML (petróleo), parcial (âmbar), previsto (roxo), falta (vermelho), não se aplica (cinza). */ .cs-st-A { --cs-cor: var(--ok); --cs-fundo: var(--ok-fundo); } .cs-st-G { --cs-cor: var(--primaria); --cs-fundo: var(--acento); } .cs-st-X { --cs-cor: #0f7280; --cs-fundo: #e0f2f4; } .cs-st-P { --cs-cor: var(--alerta); --cs-fundo: var(--alerta-fundo); } .cs-st-V { --cs-cor: var(--simples); --cs-fundo: var(--simples-fundo); } .cs-st-F { --cs-cor: var(--erro); --cs-fundo: var(--erro-fundo); } .cs-st-N { --cs-cor: var(--suave); --cs-fundo: var(--neutro); } :root[data-tema="escuro"] .cs-st-X { --cs-cor: #5cc3cf; --cs-fundo: #12302f; } .cs-carimbo { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .cs-carimbo .selo { background: var(--acento); color: var(--primaria); } .cs-selo { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--cs-cor); background: var(--cs-fundo); } .cs-barra { display: flex; height: 8px; width: 100%; border-radius: 4px; overflow: hidden; background: var(--neutro); } .cs-barra span { display: block; height: 100%; background: var(--cs-cor); } .cs-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .cs-cartao { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; box-shadow: var(--sombra); min-width: 0; } .cs-cartao:hover { border-color: var(--primaria); } .cs-cartao.ativo { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--acento); } .cs-cartao-nome { font-weight: 700; font-size: 14px; } .cs-cartao-quem { line-height: 1.3; } .cs-pct b { font-size: 26px; line-height: 1; } .cs-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--suave); } .cs-nums b { color: var(--texto); } .cs-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 2px; font-size: 12px; } .cs-legenda > span { display: inline-flex; align-items: center; gap: 6px; } .cs-filtros { margin-top: 10px; } .cs-qtd { margin: 0 0 8px; } .cs-ob { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); margin-bottom: 10px; } .cs-ob > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style-position: inside; } .cs-ob-pct { color: var(--primaria); } .cs-ob-barra { flex: 1 1 160px; min-width: 120px; max-width: 360px; } .cs-bl { border-top: 1px solid var(--borda); } .cs-bl > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 14px 8px 26px; cursor: pointer; background: var(--cab-tabela); } .cs-bl-nome { font-weight: 600; } .cs-bl-barra { flex: 0 1 160px; min-width: 80px; margin-left: auto; } .cs-cod { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .cs-regs { display: flex; flex-direction: column; } .cs-reg { display: grid; grid-template-columns: 120px 1fr auto; gap: 4px 12px; align-items: start; padding: 8px 14px 8px 26px; border-top: 1px solid var(--borda); } .cs-reg.cs-so-campos .cs-reg-nome { color: var(--suave); } .cs-reg-texto { min-width: 0; } .cs-reg-nome { font-size: 13.5px; } .cs-det { font-size: 12.5px; color: var(--suave); line-height: 1.4; margin-top: 2px; } .cs-det b { color: var(--texto); font-weight: 600; } .cs-campos { margin-top: 6px; } .cs-campos > summary { cursor: pointer; font-size: 12.5px; color: var(--primaria); } .cs-tab td { vertical-align: top; white-space: normal; } .cs-tab code { white-space: nowrap; } .cs-chips { display: flex; flex-wrap: wrap; gap: 4px; } .cs-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--acento); border: 1px solid var(--borda); } .cs-chip-contabil { background: var(--simples-fundo); } .cs-chip-sel { border-color: var(--primaria); font-weight: 600; } @media (max-width: 760px) { .cs-cartoes { grid-template-columns: 1fr 1fr; } .cs-pct b { font-size: 22px; } .cs-reg { grid-template-columns: 1fr auto; padding-left: 14px; } .cs-reg .cs-reg-texto { grid-column: 1 / -1; grid-row: 2; } .cs-bl > summary { padding-left: 14px; } .cs-bl-barra, .cs-ob-barra { flex-basis: 100%; max-width: none; margin-left: 0; } .cs-tab thead { display: none; } .cs-tab, .cs-tab tbody { display: block; border: 0; background: none; } .cs-tab tr { display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; } .cs-tab td { display: block; border: 0; padding: 2px 0; } .cs-tab td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } } @media (max-width: 420px) { .cs-cartoes { grid-template-columns: 1fr; } } /* v1.16.1: IE, IM e Suframa debaixo do documento nas grades */ .doc-inscs { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 2px; } .doc-insc { font-size: 11px; color: var(--suave); white-space: nowrap; } /* v1.16.1: o aviso do painel de cadastro fica preso no alto enquanto se rola o formulário — antes era preciso subir a tela para ler o que o sistema disse ao salvar. */ .painel > .cu-faixa { position: sticky; top: -20px; z-index: 6; background: var(--superficie); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } @media (max-width: 760px) { .painel > .cu-faixa { top: 58px; } } /* no celular, logo abaixo do topo (que também fica preso) */ :root[data-densidade="compacta"] .painel > .cu-faixa { top: -14px; } /* v1.20.0: o cadastro do item assistido — perguntas à esquerda, o que o sistema já sabe à direita */ .painel.painel-largo.painel-assistido { width: min(1180px, 100vw); } .as-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .as-layout { grid-template-columns: 1fr; } } .as-passos { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .as-passo { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: var(--neutro); color: var(--suave); } .as-passo.ativo { background: var(--primaria); color: var(--sobre-primaria); } .as-passo.feito { background: var(--ok-fundo); color: var(--ok); } .as-perg { margin: 12px 0; } .as-perg > b { display: block; margin-bottom: 6px; } .as-perg .dica { margin-top: 4px; } .as-opcoes { display: flex; flex-wrap: wrap; gap: 6px; } .as-op { border: 1px solid var(--borda); background: var(--campo); color: var(--texto); border-radius: 18px; padding: 6px 12px; cursor: pointer; font: inherit; } .as-op:hover { background: var(--hover); } .as-op.sel { border-color: var(--primaria); background: var(--acento); color: var(--primaria); font-weight: 600; } .as-busca { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow: auto; } .as-achado { text-align: left; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--campo); color: var(--texto); cursor: pointer; font: inherit; } .as-achado:hover { background: var(--acento); } .as-achado .dica { display: block; margin: 2px 0 0; } .as-escolhido, .as-pronto { margin-top: 8px; } .as-sem { margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--borda); } .as-cartao { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-bottom: 12px; background: var(--superficie); } .as-cartao > h4 { margin: 0 0 8px; font-size: 14px; } .as-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .as-campo { border: 1px solid var(--borda); border-radius: 6px; padding: 6px 8px; position: relative; min-width: 0; } .as-campo label { display: block; font-size: 11px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; padding-right: 64px; } .as-campo .v { font-weight: 600; min-height: 20px; overflow-wrap: anywhere; } .as-campo .as-o { position: absolute; top: 5px; right: 6px; } .as-o { display: inline-block; font-size: 10.5px; border-radius: 8px; padding: 0 6px; font-weight: 600; } .as-o-gs1 { background: var(--acento); color: var(--primaria); } .as-o-resposta { background: var(--alerta-fundo); color: var(--alerta); } .as-o-tabela { background: var(--ok-fundo); color: var(--ok); } .as-o-empresa { background: var(--simples-fundo); color: var(--simples); } .as-o-falta { background: var(--neutro); color: var(--suave); } .as-legenda { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--suave); margin-top: 8px; } .as-venda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .as-venda label { flex: 1 1 160px; font-size: 12px; } .as-rolagem { overflow-x: auto; } .as-aliq { width: 100%; border-collapse: collapse; font-size: 13px; } .as-aliq th { text-align: left; font-size: 11px; color: var(--suave); text-transform: uppercase; border-bottom: 1px solid var(--borda); padding: 4px; } .as-aliq td { padding: 5px 4px; border-bottom: 1px solid var(--borda); vertical-align: top; } .as-aliq td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .as-aliq td.obs { font-size: 12px; color: var(--suave); } .as-aliq tr.tot td { font-weight: 700; color: var(--texto); border-top: 2px solid var(--borda); } .as-conf { display: inline-block; font-size: 11px; border-radius: 10px; padding: 0 8px; font-weight: 600; background: var(--alerta-fundo); color: var(--alerta); } .as-pend { margin: 0; padding-left: 18px; } .as-pend li { margin: 3px 0; } /* v1.20.1: Tabela do Simples */ .tsn td.num, .tsn th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* v1.23.0: Painel do Limite do Simples (web/painel_simples.js) — protótipo prototipos/painel-simples, nas cores do sistema */ .ps-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 12px; min-width: 0; } .ps-card > h4 { margin: 0 0 8px; font-size: 14px; } .ps-topo { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; } .ps-controles { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; } .ps-ctl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); min-width: 0; } .ps-ctl select, .ps-ctl input { width: auto; max-width: 100%; } .ps-ctl input[type="search"] { width: 210px; } .ps-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--suave); } .ps-legenda i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--ok); } .ps-legenda i.atencao { background: var(--alerta); } .ps-legenda i.excedeu { background: var(--erro); } .ps-legenda i.excedeu2 { background: var(--erro-escuro); } .ps-legenda i.real { background: var(--primaria); } .ps-legenda i.acum { background: var(--texto); } .ps-legenda i.proj, .ps-proj, .ps-tt-b i.proj { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--primaria) 45%, transparent) 0 4px, transparent 4px 7px); } .ps-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 12px; } .ps-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ps-cartao b { font-size: 22px; font-weight: 600; } .ps-cartao small { color: var(--suave); font-size: 12px; } .ps-rotulo { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--suave); font-weight: 600; } .ps-h { font-size: 15px; margin: 4px 0 8px; } .ps-cor.ok { color: var(--ok); } .ps-cor.atencao { color: var(--alerta); } .ps-cor.excedeu { color: var(--erro); } .ps-cor.excedeu2 { color: var(--erro-escuro); } .ps-selo { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; } .ps-selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ps-selo.ok { color: var(--ok); background: var(--ok-fundo); } .ps-selo.atencao { color: var(--alerta); background: var(--alerta-fundo); } .ps-selo.excedeu { color: var(--erro); background: var(--erro-fundo); } .ps-selo.excedeu2 { color: var(--erro-escuro); background: var(--erro-fundo); box-shadow: inset 0 0 0 1px var(--erro-borda); } .ps-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); } .ps-tab { width: 100%; border-collapse: collapse; font-size: 13px; } .ps-tab th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); font-weight: 600; background: var(--cab-tabela); text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .ps-tab td { padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; } .ps-tab td.num, .ps-tab th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ps-tab th.ps-c { text-align: center; } .ps-tab .ps-g { border-left: 1px solid var(--borda); } .ps-tab td.ps-neg { color: var(--erro); } .ps-tab tr.clicavel:hover td { background: var(--linha-hover); } .ps-tab tr.clicavel:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; } .ps-tab tr.ps-sub td { border-bottom-style: dashed; } .ps-tab tr.ps-grupo td { border-top: 2px solid var(--borda); } .ps-tab td.ps-emp { min-width: 200px; max-width: 280px; white-space: normal; } .ps-link-est { display: block; font-size: 12px; padding: 4px 0 0; } .ps-mk { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--neutro); color: var(--suave); white-space: nowrap; } .ps-mk.exportacao { background: var(--acento); color: var(--primaria); } .ps-mk[data-ps-tt] { cursor: help; } .ps-mk[data-ps-tt]:hover, .ps-mk[data-ps-tt]:focus-visible { outline: 1px solid var(--primaria); } .ps-mg { display: flex; flex-direction: column; gap: 3px; min-width: 150px; } .ps-mg-txt { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--suave); font-variant-numeric: tabular-nums; } .ps-trilho { position: relative; height: 12px; background: var(--neutro); border-radius: 4px; overflow: hidden; } .ps-trilho.grosso { height: 24px; border-radius: 5px; } .ps-trilho .ps-real { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ok); } .ps-trilho .ps-real.atencao { background: var(--alerta); } .ps-trilho .ps-real.excedeu { background: var(--erro); } .ps-trilho .ps-real.excedeu2 { background: var(--erro-escuro); } .ps-trilho .ps-proj { position: absolute; top: 0; bottom: 0; } .ps-trilho i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--texto); opacity: .5; } .ps-trilho i.b { background: var(--erro); opacity: .9; } .ps-est-lin > td { background: var(--fundo); padding: 8px 10px; } .ps-est-lin .ps-wrap { display: inline-block; vertical-align: top; } .ps-tab.ps-est-tab { width: auto; } .ps-part { display: inline-block; width: 90px; height: 8px; background: var(--neutro); border-radius: 4px; position: relative; overflow: hidden; vertical-align: middle; } .ps-part i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primaria); border-radius: 4px; } .ps-tt { position: absolute; z-index: 400; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 10px 12px; width: 330px; max-width: calc(100vw - 16px); font-size: 12px; pointer-events: none; } .ps-tt table { width: 100%; border-collapse: collapse; font-size: 12px; } .ps-tt td { padding: 2px 4px; } .ps-tt td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ps-tt-cab { margin-bottom: 6px; color: var(--suave); } .ps-tt-cab b { color: var(--texto); } .ps-tt-b { display: inline-block; width: 100px; height: 8px; background: var(--neutro); border-radius: 3px; position: relative; overflow: hidden; vertical-align: middle; } .ps-tt-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .ps-tt-b i.real { background: var(--primaria); } .ps-tt-pe { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 6px; color: var(--suave); } .ps-tt-pe.col { flex-direction: column; } .ps-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; } .ps-seg button { border: 0; border-radius: 0; background: var(--superficie); color: var(--suave); padding: 6px 12px; font-size: 13px; cursor: pointer; } .ps-seg button[aria-pressed="true"] { background: var(--primaria); color: var(--sobre-primaria); font-weight: 600; } .ps-situ { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } /* no painel lateral da empresa a largura é a do painel, não a da tela: as colunas se ajeitam pelo espaço */ .ps-grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 12px; } .ps-regua { display: flex; flex-direction: column; gap: 6px; } .ps-regua-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; } .ps-regua-cab .ps-dir { text-align: right; } .ps-grande { font-size: 16px; } .ps-escala { position: relative; height: 16px; font-size: 11px; color: var(--suave); } .ps-escala span { position: absolute; transform: translateX(-50%); white-space: nowrap; } /* v1.24.0: em largura estreita (celular, 390px) o "3,60 mi" e o "+20% 4,32 mi" se sobrepunham — o rótulo dos +20% desce para uma segunda linha e encosta à esquerda do traço (não passa da borda do cartão) */ .ps-regua { container-type: inline-size; container-name: ps-regua; } @container ps-regua (max-width: 560px) { .ps-escala { height: 30px; } .ps-escala .ps-esc-20 { top: 14px; transform: translateX(-100%); } } .ps-kpis-linha { display: flex; flex-wrap: wrap; gap: 6px 18px; } .ps-kpis-linha span { display: flex; flex-direction: column; } .ps-kpis-linha small { color: var(--suave); font-size: 12px; } .ps-frases { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; } .ps-frases li { border-left: 4px solid var(--ok); padding: 6px 10px; background: var(--fundo); border-radius: 0 6px 6px 0; } .ps-frases li.atencao { border-color: var(--alerta); } .ps-frases li.excedeu { border-color: var(--erro); } .ps-frases li.excedeu2 { border-color: var(--erro-escuro); } .ps-frases small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; } .ps-graf svg { display: block; width: 100%; min-width: 560px; height: auto; } .ps-graf svg text { fill: var(--suave); font-size: 11px; } .ps-graf .ps-g-grade { stroke: var(--borda); } .ps-graf .ps-g-sub { stroke: var(--alerta); stroke-width: 1.5; } .ps-graf .ps-g-sub-t { fill: var(--alerta); } .ps-graf .ps-g-lim { stroke: var(--erro); stroke-width: 1.5; } .ps-graf .ps-g-lim-t { fill: var(--erro); } .ps-graf .tracejada { stroke-dasharray: 5 4; } .ps-graf .ps-g-real { fill: var(--primaria); } .ps-graf .ps-g-proj { fill: color-mix(in srgb, var(--primaria) 40%, transparent); } .ps-graf .ps-g-acum { fill: none; stroke: var(--texto); stroke-width: 2.2; } .ps-graf .ps-g-ponto { fill: var(--texto); } .ps-graf text.ps-g-fim { fill: var(--texto); font-weight: 600; } .ps-sim-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: flex-end; } .ps-sim-topo h4 { margin: 0; } .ps-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px; } .ps-mes { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); } .ps-mes input { width: 100%; text-align: right; } .ps-mes.real input { background: var(--campo-off); color: var(--suave); } @media (prefers-reduced-motion: no-preference) { .ps-trilho .ps-real, .ps-trilho .ps-proj { transition: width .35s ease; } } /* v1.23.2: Regras usadas do Painel › Limite do Simples */ .ps-aviso-regra { border-color: var(--alerta); background: var(--fundo); } .ps-aviso-regra b { color: var(--alerta); } /* v1.25.0: Painel › Faturamento — os dois quadros (Simples e Presumido), as marcas empilhadas (uma linha por marca) e a venda de ativo imobilizado à parte (fora da receita bruta) */ .ps-quadro > .ps-wrap { border: 0; } .ps-secao-tit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; } .ps-secao-tit .ps-h { margin: 0; } .ps-tab td.ps-marca { white-space: nowrap; font-size: 12px; } .ps-tab td.ps-marca .mono { font-weight: 500; } .ps-tab tr.ps-mk-lin td { border-bottom-style: dotted; } .ps-tab tr.ps-mk-ult td { border-bottom-style: solid; } .ps-tab tr.ps-ativo-lin td { font-style: italic; } .ps-mk.total { background: var(--acento); color: var(--texto); } .ps-tt-sub { margin: 6px 0 0; } .ps-ativo { color: var(--suave); font-style: italic; } /* v1.25.1: devolução de venda (negativa) na composição do Presumido */ .ps-neg { color: var(--erro); } .ps-tab tr.ps-devol-lin td { border-bottom-style: dotted; } @media (max-width: 640px) { .ps-tab td.ps-marca { white-space: normal; min-width: 130px; } } /* v1.24.0: grade de produtos — a miniatura, as colunas novas e o seletor de colunas */ #tab-itens th.c-img, #tab-itens td.c-img { width: 48px; padding-right: 0; } .pr-mini { width: 40px; height: 40px; display: block; } .pr-sem-img { display: block; width: 40px; height: 40px; border: 1px dashed var(--borda); border-radius: 6px; } .pr-herdada { color: var(--suave); opacity: .75; } #tab-itens th.num, #tab-itens td.num { text-align: right; white-space: nowrap; } .pr-colunas { position: relative; font-size: 13px; margin-bottom: 8px; } .pr-colunas > summary { cursor: pointer; color: var(--primaria); list-style: none; user-select: none; } .pr-colunas > summary::-webkit-details-marker { display: none; } .pr-colunas > summary::after { content: " ▾"; font-size: 10px; } .pr-colunas-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 6px; min-width: 210px; max-width: calc(100vw - 32px); padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .pr-colunas-lista label { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-weight: 400; } .pr-colunas-lista .link { justify-self: start; margin-top: 4px; } @media (max-width: 760px) { /* no cartão: a miniatura numa linha própria; os números à esquerda como o resto */ #tab-itens td.c-img { grid-column: 1 / -1; width: auto; } #tab-itens td.num { text-align: left; } } /* v1.25.0: grade de produtos — código, referência e GTIN empilhados; "Unidade" mesclada no cabeçalho */ #tab-itens td.pr-pilha { line-height: 1.35; } #tab-itens td.pr-pilha .pr-sub { display: block; font-size: 12px; color: var(--suave); } #tab-itens th.pr-grupo-th { text-align: center; border-bottom: 1px solid var(--borda); } /* v1.27.0: Vendas › Funil de vendas (web/funil.js) — faixa de filtros, colunas por etapa, cartões, painel e ficha */ .fv-faixa { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 12px; } .fv-faixa label { min-width: 170px; } .fv-faixa .fv-busca { flex: 1; min-width: 200px; } .fv-faixa .primario { margin-left: auto; } .fv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .fv-kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fv-kpi span { color: var(--suave); font-size: 12px; } .fv-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; color: var(--texto); overflow-wrap: anywhere; } .fv-kpi small { color: var(--suave); font-size: 12px; } .fv-kpi.fv-alerta b { color: var(--erro); } .fv-rolo { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .fv-funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; min-height: 200px; } .fv-coluna { background: var(--neutro); border: 1px solid var(--borda); border-radius: var(--raio); display: flex; flex-direction: column; min-width: 0; } .fv-coluna.fv-alvo { outline: 2px dashed var(--primaria); outline-offset: -2px; background: var(--acento); } .fv-col-cab { padding: 10px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; } .fv-col-t { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .fv-col-t h4 { font-size: 14px; } .fv-col-v { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; } .fv-col-corpo { padding: 8px; display: flex; flex-direction: column; gap: 8px; } .fv-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); } .fv-cartao[draggable="true"] { cursor: grab; } .fv-cartao.fv-arrastando { opacity: .5; } .fv-cartao-abre { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px; } .fv-cartao-abre:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; border-radius: var(--raio); } .fv-nome { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; } .fv-sub { color: var(--suave); font-size: 12.5px; overflow-wrap: anywhere; } .fv-prox { font-size: 12px; color: var(--suave); } .fv-prox.fv-atr, .fv-atr { color: var(--erro); font-weight: 600; } .fv-prox.fv-sem, .fv-sem { color: var(--alerta); font-weight: 600; } .fv-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--texto); } .fv-marcas { display: flex; align-items: center; gap: 6px; } .fv-mk { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--alerta); color: var(--alerta); } .fv-ini { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acento); color: var(--primaria-escura); font-size: 11px; font-weight: 700; } .fv-mover { display: none; padding: 0 10px 10px; } .fv-fechadas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .fv-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 10px; } .fv-caixa h4, .fv-caixa h5 { font-size: 14px; } .fv-fech-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .fv-fech { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 4px; border-top: 1px solid var(--borda); color: var(--texto); } .fv-fech small { display: block; } .fv-fech b { font-variant-numeric: tabular-nums; white-space: nowrap; } .fv-fech:hover, .fv-fech:focus-visible { background: var(--linha-hover); } .fv-tab-wrap { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; } .fv-tab { width: 100%; border-collapse: collapse; } .fv-tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); background: var(--cab-tabela); padding: 9px 10px; border-bottom: 1px solid var(--borda); white-space: nowrap; } .fv-tab td { padding: 9px 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; } .fv-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .fv-tab tbody tr[data-fv-abre], .fv-tab tbody tr[data-fv-orc] { cursor: pointer; } .fv-tab tbody tr[data-fv-abre]:hover, .fv-tab tbody tr[data-fv-orc]:hover { background: var(--linha-hover); } .fv-tab tr.fv-fixa td { color: var(--suave); } .fv-tab input { min-width: 0; } .fv-num { width: 80px; text-align: right; } .fv-ordem { white-space: nowrap; } .fv-ordem .link { padding: 2px 6px; } .fv-acoes { white-space: nowrap; } .fv-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fv-barras { display: flex; flex-direction: column; gap: 6px; } .fv-bl { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 8px; align-items: center; font-size: 13px; } .fv-trilho { height: 10px; background: var(--neutro); border-radius: 999px; overflow: hidden; } .fv-trilho i { display: block; height: 100%; width: 0; background: var(--primaria); border-radius: 999px; } .fv-trilho i.fv-perda { background: var(--erro); } .fv-val { font-variant-numeric: tabular-nums; color: var(--suave); } .fv-conv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .fv-et { display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: var(--raio); background: var(--neutro); min-width: 72px; } .fv-et b { font-size: 17px; font-variant-numeric: tabular-nums; } .fv-et-ok { background: var(--ok-fundo); color: var(--ok); } .fv-seta { display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: var(--suave); } .fv-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; } .fv-linha.fv-entre { justify-content: space-between; align-items: center; } .fv-nova-etapa { margin-top: 6px; } .fv-nova-etapa label { min-width: 120px; } .fv-det summary { cursor: pointer; color: var(--primaria); font-size: 13px; } .fv-hist-lista { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--suave); } .fv-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .fv-itens li { display: flex; gap: 6px; align-items: center; } .fv-itens li input { flex: 1; min-width: 0; } .fv-itens li.fv-inativo input, .fv-itens li.fv-inativo span { color: var(--suave); text-decoration: line-through; } .fv-aviso { background: var(--explica); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; } .fv-confirma { background: var(--alerta-fundo); border-radius: var(--raio); padding: 10px; display: flex; flex-direction: column; gap: 8px; } .fv-confirma p { margin: 0; color: var(--texto); } /* a ficha */ .fv-ficha-corpo { display: flex; flex-direction: column; gap: 10px; } .fv-fase { display: flex; gap: 4px; margin: 4px 0 10px; } .fv-fase span { flex: 1; height: 6px; border-radius: 999px; background: var(--neutro); } .fv-fase span.f { background: var(--primaria); } .fv-fechada-faixa { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--raio); font-weight: 600; } .fv-fechada-faixa.fv-ok { background: var(--ok-fundo); color: var(--ok); } .fv-fechada-faixa.fv-perda { background: var(--erro-fundo); color: var(--erro); } .fv-acoes-ficha { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; } .fv-acoes-ficha .fv-mover-ficha { flex-direction: row; align-items: center; gap: 6px; } .fv-acoes-ficha .fv-mover-ficha select { width: auto; } .fv-acoes-ficha button:disabled, .fv-linha button:disabled { opacity: .45; cursor: not-allowed; } .fv-btn-ok { background: var(--ok); color: var(--superficie); border: 0; border-radius: 6px; padding: 9px 16px; font-weight: 600; } .fv-btn-ok:hover { filter: brightness(.95); } .fv-alerta-caixa { background: var(--alerta-fundo); border-radius: var(--raio); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .fv-alerta-caixa p { margin: 0; color: var(--texto); } .fv-dl { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; } .fv-dl dt { color: var(--suave); } .fv-dl dd { margin: 0; overflow-wrap: anywhere; } .fv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fv-form .fv-larga { grid-column: 1 / -1; } .fv-form textarea { min-height: 70px; resize: vertical; } .fv-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fv-tempo li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; } .fv-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--neutro); font-size: 11px; font-weight: 700; color: var(--suave); } .fv-tempo li.fv-feita .fv-ic { background: var(--ok-fundo); color: var(--ok); } .fv-tempo li.fv-atr .fv-ic { background: var(--erro-fundo); color: var(--erro); } .fv-tempo li.fv-atr .fv-tx { font-weight: 400; color: var(--texto); } .fv-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .fv-peq { padding: 4px 10px; font-size: 12.5px; } .fv-res { display: flex; flex-direction: column; gap: 4px; } .fv-res button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 6px; background: var(--campo); color: var(--texto); } .fv-res button span { color: var(--suave); font-size: 12.5px; } .fv-res button:hover, .fv-res button:focus-visible { border-color: var(--primaria); background: var(--acento); } .fv-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; align-self: flex-start; margin-bottom: 10px; max-width: 100%; } .fv-seg button { border: 0; background: var(--superficie); color: var(--texto); padding: 8px 14px; } .fv-seg button.sel { background: var(--primaria); color: var(--sobre-primaria); font-weight: 600; } .fv-seg button:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 900px) { .fv-kpis { grid-template-columns: 1fr 1fr; } .fv-grade2, .fv-fechadas { grid-template-columns: 1fr; } } @media (max-width: 760px) { .fv-faixa label, .fv-faixa .fv-busca { min-width: 0; flex: 1 1 100%; } .fv-faixa .primario { width: 100%; margin-left: 0; } .fv-funil { grid-auto-columns: minmax(250px, 82vw); } .fv-mover { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .fv-cartao[draggable="true"] { cursor: default; } .fv-form { grid-template-columns: 1fr; } .fv-dl { grid-template-columns: 1fr; gap: 2px; } .fv-dl dd { margin-bottom: 6px; } .fv-bl { grid-template-columns: 1fr auto; } .fv-bl .fv-trilho { grid-column: 1 / -1; grid-row: 2; } /* as tabelas viram cartões */ .fv-tab-wrap { border: 0; background: none; overflow: visible; } .fv-tab thead { display: none; } .fv-tab, .fv-tab tbody, .fv-tab tr, .fv-tab td { display: block; } .fv-tab tr { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 8px; padding: 10px; } .fv-tab tr[hidden] { display: none; } .fv-tab td { border: 0; padding: 2px 0; text-align: left !important; white-space: normal; } .fv-tab td[data-r]::before { content: attr(data-r) ": "; color: var(--suave); font-size: 12px; } .fv-tab td.fv-l-tit { font-size: 15px; } .fv-num { width: 100%; text-align: left; } .fv-cfg-et td[data-r]::before { display: block; margin-bottom: 2px; } .fv-acoes-ficha > * { flex: 1 1 auto; } .fv-acoes-ficha .fv-mover-ficha { flex: 1 1 100%; } .fv-acoes-ficha .fv-mover-ficha select { flex: 1; } } /* ============================================================ v1.28.0: Agenda do funil, metas, visitas na Rota */ .fv-grade3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .fv-ag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .fv-ag-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; border-top: 1px solid var(--borda); padding-top: 6px; min-width: 0; } .fv-ag-abre { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px; flex: 1 1 180px; min-width: 0; color: var(--texto); } .fv-ag-abre:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: 4px; } .fv-ag-hora { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; color: var(--suave); } .fv-ag-item.fv-atr .fv-ag-hora, .fv-ag-item.fv-atr b { color: var(--erro); } .fv-ag-item.fv-feita .fv-tx > span, .fv-ag-item.fv-feita b { text-decoration: line-through; color: var(--suave); } .fv-ag-prox { flex: 1 1 100%; } .fv-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .fv-dia { background: var(--neutro); border-radius: var(--raio); padding: 6px; min-width: 0; } .fv-dia h5 { font-size: 12.5px; margin: 0 0 4px; } .fv-dia .fv-ag-abre { grid-template-columns: 1fr; } .fv-dia-hoje { outline: 2px solid var(--primaria); outline-offset: -2px; } .fv-meta { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--borda); } .fv-meta-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; } .fv-meta-cab span { font-variant-numeric: tabular-nums; color: var(--suave); } .fv-meta-total { font-weight: 600; } .fv-meta-trilho { position: relative; overflow: visible; } .fv-meta-trilho i.fv-ok-barra { background: var(--ok); } .fv-meta-trilho em { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--texto); opacity: .55; } .fv-metas input { width: 100%; min-width: 80px; } .fv-larga-l { flex: 1 1 260px; } .ag-comercial { margin-top: 14px; border-top: 1px solid var(--borda); padding-top: 10px; } .ag-com-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ag-com-lista li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; overflow-wrap: anywhere; } .ag-com-lista li.ag-com-feita > span:not(.selo) { text-decoration: line-through; color: var(--suave); } .ag-com-lista li.ag-com-atr button { color: var(--erro); } #rm-conteudo .filtros-barra { flex-wrap: wrap; } .rm-vis-barra { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .rm-vis-barra label.check { flex-direction: row; align-items: center; gap: 6px; } .rm-vis-barra input[type=date] { width: auto; } .rm-lista li.rm-vis { border-bottom: 1px solid var(--borda); padding: 10px 12px; display: grid; gap: 6px; } .rm-vis-linha { display: flex; gap: 8px; align-items: flex-start; } .rm-vis-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #0b4f7c; color: #fff; font-size: 12px; font-weight: 700; } .rm-vis-tx { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .rm-vis-tx > span { color: var(--suave); font-size: 12.5px; } .rm-vis-feita .rm-vis-tx b { text-decoration: line-through; color: var(--suave); } .rm-lista li.rm-vis .rm-acoes button { width: auto; text-align: center; border: 1px solid var(--primaria); border-radius: 6px; padding: 6px 10px; } .rm-lista li.rm-vis .rm-acoes button.primario { background: var(--primaria); color: var(--sobre-primaria); } .rm-vis-dica, .rm-lista .vazio { padding: 0 12px; } .rm-vis-form { display: grid; gap: 8px; border-top: 1px solid var(--borda); padding-top: 8px; } .rm-vis-onde { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; } .rm-vis-onde label.check { flex-direction: row; align-items: flex-start; gap: 6px; } .rm-vis-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rm-vis-larga { grid-column: 1 / -1; } @media (max-width: 900px) { .fv-grade3 { grid-template-columns: 1fr; } .fv-semana { grid-template-columns: 1fr; } } @media (max-width: 760px) { .fv-metas td { display: inline-block !important; width: 48%; vertical-align: top; } .fv-metas td.fv-l-tit { display: block !important; width: 100%; } .fv-metas input { min-width: 0; } .rm-vis-barra { margin-left: 0; flex: 1 1 100%; justify-content: space-between; } .rm-vis-barra input[type=date] { min-width: 0; max-width: 170px; } .rm-vis-campos { grid-template-columns: 1fr; } } /* ============================================================ v1.29.0: Vendas › Pedidos de venda (web/pedido_venda.js) */ .pv-fluxo { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; margin: 4px 0 10px; } .pv-fluxo span { padding: 3px 9px; border-radius: 999px; background: var(--neutro); color: var(--suave); font-weight: 600; } .pv-fluxo span.f { background: var(--acento); color: var(--primaria); } .pv-fluxo span.a { background: var(--primaria); color: var(--superficie); } .pv-fluxo i { color: var(--suave); font-style: normal; } .pv-filtros label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); min-width: 0; } .pv-filtros .pv-largo, .pv-incluir .pv-largo { flex: 1 1 200px; } .pv-ver { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--suave); } .pv-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; } .pv-seg button { border: 0; border-radius: 0; background: var(--superficie); color: var(--suave); padding: 7px 12px; font-size: 13px; } .pv-seg button[aria-pressed="true"] { background: var(--primaria); color: var(--superficie); font-weight: 600; } .pv-sit .ov-cartao span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .pv-lst .pv-ab { width: 34px; } .pv-abre { width: 26px; height: 26px; padding: 0; border: 1px solid var(--borda); border-radius: 5px; background: var(--superficie); color: var(--texto); line-height: 1; } .pv-subitens > td { background: var(--cab-tabela); padding: 6px 10px 10px 40px !important; } .pv-sub { font-size: 12.5px; } .pv-casa td { font-weight: 600; } .pv-lst mark, .pv-sub mark { background: var(--alerta-fundo); color: inherit; border-radius: 3px; padding: 0 2px; } .pv-falta, .pv-atrasado { color: var(--erro); font-weight: 600; } .pv-falta .dica, .pv-atrasado .dica { color: var(--erro); } .pv-barra { display: inline-block; width: 70px; height: 7px; background: var(--neutro); border-radius: 4px; overflow: hidden; vertical-align: middle; } .pv-barra i { display: block; height: 100%; background: var(--primaria); } .pv-dl { display: grid; grid-template-columns: 170px 1fr; gap: 4px 12px; font-size: 13px; margin: 10px 0 0; } .pv-dl dt { color: var(--suave); } .pv-dl dd { margin: 0; min-width: 0; } .pv-libs { list-style: none; margin: 0; padding: 0; } .pv-lib { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--borda); } .pv-lib:last-child { border-bottom: 0; } .pv-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--neutro); color: var(--suave); } .pv-lib.ok .pv-ic { background: var(--ok-fundo); color: var(--ok); } .pv-lib.at .pv-ic { background: var(--alerta-fundo); color: var(--alerta); } .pv-lib.bad .pv-ic { background: var(--erro-fundo); color: var(--erro); } .pv-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .pv-pacoes { display: flex; gap: 6px; flex-wrap: wrap; } .pv-lib-det { padding: 0 0 10px 38px; } .pv-confirma { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--alerta); background: var(--alerta-fundo); border-radius: var(--raio); padding: 10px 12px; margin-top: 6px; } .pv-confirma .linha-acoes { margin: 0; } .pv-grade2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pv-grade2 .bloco { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin: 0; background: var(--superficie); min-width: 0; } .pv-bl { display: grid; grid-template-columns: 120px 1fr 110px; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; } .pv-trilho { height: 16px; background: var(--neutro); border-radius: 4px; overflow: hidden; } .pv-trilho i { display: block; height: 100%; background: var(--primaria); border-radius: 4px; } .pv-incluir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .pv-inc input { width: 100%; min-width: 70px; } .pv-nota-itens { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pv-itab .pendente-txt { color: var(--alerta); font-weight: 600; } .pv-acoes-it { white-space: nowrap; } .pv-edita { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pv-avisos ul { margin: 6px 0; padding-left: 18px; } /* v1.29.1: Configuração › Quem libera */ .pv-quem { list-style: none; margin: 0 0 8px; padding: 0; } .pv-quem li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; } .pv-quem-conf { flex-basis: 100%; } .pv-quem-conf:empty { display: none; } .pv-quem-inc { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; } .pv-quem-inc label { flex: 1 1 140px; min-width: 0; } @media (max-width: 760px) { .pv-grade2 { grid-template-columns: 1fr; } .pv-dl { grid-template-columns: 1fr; } .pv-dl dd { margin-bottom: 6px; } .pv-bl { grid-template-columns: 84px 1fr 84px; } .pv-lib { grid-template-columns: 28px 1fr; } .pv-lib .pv-pacoes { grid-column: 2; } .pv-filtros label, .pv-filtros .pv-ver, .pv-filtros .primario { width: 100%; margin-left: 0; } .pv-seg { width: 100%; } .pv-seg button { flex: 1; min-height: 40px; } .pv-subitens > td { padding: 6px !important; } .pv-edita { grid-template-columns: 1fr 1fr; } .pv-lst .pv-ab { position: absolute; right: 10px; top: 10px; } .pv-acoes-it { white-space: normal; } } /* v1.29.2: "Enquadramento na ST" — o campo na linha do NCM e do CEST (com o mesmo jeito de rótulo dos campos) e o painel da decisão logo abaixo */ .est-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 500; color: var(--suave); font-size: 13px; min-width: 0; } .est-valor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 36px; color: var(--texto); } .est-motivo { font-weight: 400; overflow-wrap: anywhere; } .est-painel { margin-top: 8px; } [data-est-cest]:empty { display: none; } /* v1.29.6: Produto › Tabelas — o cadastro de cada nível da classificação e das marcas (web/produto_tabelas.js) */ .pt-barra { flex-wrap: wrap; } .pt-barra input[type=search] { min-width: 220px; } .pt-lista td.pt-nome { white-space: normal; } .pt-lista td.pt-acoes { text-align: right; } .pt-form { margin: 8px 0 12px; } @media (max-width: 760px) { .pt-barra > label, .pt-barra input, .pt-barra select, .pt-barra button { width: 100%; min-width: 0; } .pt-lista td.pt-nome { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; } .pt-lista td.pt-sit { grid-column: 2; grid-row: 1; justify-self: end; } .pt-lista td[data-r] { grid-column: 1 / -1; font-size: 13px; color: var(--suave); text-align: left; } .pt-lista td[data-r]::before { content: attr(data-r) ": "; } .pt-lista td[data-r]:empty { display: none; } .pt-lista td.pt-acoes { grid-column: 1 / -1; text-align: left; } .pt-lista td.pt-acoes:empty { display: none; } } /* v1.29.7: cadastro simples dos valores de cada nível e a Árvore que os escolhe (web/produto_tabelas.js, web/produto.js) */ .pt-onde { margin: 4px 0 0; padding-left: 18px; } .pt-onde li { overflow-wrap: anywhere; } .pt-vai-arvore { margin-top: 10px; } [data-arv-repetidos] ul { margin: 4px 0 0; padding-left: 18px; } [data-arv-repetidos] li { overflow-wrap: anywhere; } .pr-no-form select { max-width: 100%; } .cu-pg-nova { grid-column: 1 / -1; margin: 6px 0 4px; border: 1px dashed var(--borda); border-radius: var(--raio); padding: 10px 12px; } .cu-pg-nova h4 { margin: 0 0 6px; } /* v1.29.11: Parceiro › tipo › Pagamento (as formas liberadas com as condições dentro) e Tabelas › Formas de pagamento */ .tpp-formas { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .tpp-forma { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--superficie); min-width: 0; } .tpp-forma.tpp-enc { opacity: .7; } .tpp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 12px; margin-bottom: 6px; } .tpp-cab h4 { margin: 0 0 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .tpp-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; } .tpp-lib { margin-top: 8px; align-items: end; } .fin-chips { display: flex; flex-wrap: wrap; gap: 4px; } .fin-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--borda); border-radius: 999px; font-size: 12px; background: var(--superficie); overflow-wrap: anywhere; } .fin-chip.risc { text-decoration: line-through; color: var(--suave); } .fin-chip small { color: var(--suave); } tr.fin-enc td { color: var(--suave); } .fin-vinculos { margin-top: 10px; } .fin-vinc-add { align-items: end; margin-top: 8px; } /* v1.29.12: Enquadramento na ST — o segmento do CEST, o documento técnico e o formulário que abre por "+ Adicionar" */ .est-segmento { margin: 6px 0 10px; overflow-wrap: anywhere; } .est-doc { overflow-wrap: anywhere; } .est-doc .cu-versoes { margin-top: 2px; } .est-topo { margin-top: 8px; } [data-docs-tec] { margin-top: 18px; } [data-docs-tec] .doc-detalhe { overflow-wrap: anywhere; } /* v1.29.13: o quadro Pagamento do documento em linhas (forma → condição → valor) */ .cu-pq { margin: 10px 0; } .cu-pq h4 { margin: 0 0 4px; } .cu-pq-linha { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) 32px; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px dashed var(--borda); } .cu-pq-linha label { min-width: 0; } .cu-pq-linha select, .cu-pq-linha input { width: 100%; min-width: 0; } .cu-pq-linha input[readonly] { background: var(--cab-tabela); } .cu-pq-tira { align-self: center; text-align: center; } .cu-pq-tot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; } @media (max-width: 760px) { .cu-pq-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cu-pq-linha label:nth-child(3) { grid-column: 1 / 2; } } /* ==================================================================== v1.29.14: treinamento dentro do sistema (web/treinamento.js) — só no cliente de demonstração. O roxo do treinamento é variável nos três temas. */ :root { --trn: #6a4bc4; --trn-fundo: #ece6fb; --trn-sobre: #ffffff; --trn-sombra: rgba(16,24,40,.55); --trn-pele: #f2c9a5; --trn-cabelo: #5a3b2a; } :root[data-tema="escuro"] { --trn: #b09cf0; --trn-fundo: #2a2442; --trn-sobre: #160f2b; --trn-sombra: rgba(0,0,0,.65); --trn-pele: #e0b48f; --trn-cabelo: #3d2a1f; } :root[data-tema="contraste"] { --trn: #4b2a9e; --trn-fundo: #e9e2fb; --trn-sobre: #ffffff; --trn-sombra: rgba(0,0,0,.7); } .trn-botao { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--trn); color: var(--trn); background: var(--superficie); border-radius: 18px; padding: 4px 12px 4px 5px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; } .trn-botao:hover { background: var(--trn-fundo); } .trn-q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--trn); color: var(--trn-sobre); font-size: 12px; } .trn-botao-painel { display: none; padding: 4px; margin-left: auto; } .selo.trn-selo { background: var(--trn-fundo); color: var(--trn); } .trn-painel { position: fixed; top: 56px; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 910; background: var(--superficie); border-left: 3px solid var(--trn); border-top-left-radius: 10px; box-shadow: -10px 0 28px var(--trn-sombra); display: flex; flex-direction: column; } .trn-painel.trn-esq { right: auto; left: 0; border-left: 0; border-right: 3px solid var(--trn); border-radius: 0 10px 0 0; } .trn-cab { padding: 12px 16px 6px; background: var(--trn-fundo); border-bottom: 1px solid var(--borda); } .trn-cab h3 { margin: 4px 0 2px; color: var(--trn); } .trn-cab .sub { margin: 0; } .trn-lin { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .trn-fecha { font-size: 18px; color: var(--suave); } .trn-aviso-idioma { margin: 6px 0 0; font-size: 12px; color: var(--alerta); } .trn-abas { display: flex; gap: 2px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; } .trn-abas button { border: 0; background: none; padding: 6px 9px; font-size: 13px; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; } .trn-abas button.ativa { color: var(--trn); border-color: var(--trn); font-weight: 600; } .trn-corpo { padding: 12px 16px; overflow-y: auto; flex: 1; } .trn-passos { list-style: none; margin: 0; padding: 0; } .trn-passo { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--borda); } .trn-n { width: 24px; height: 24px; border-radius: 50%; background: var(--trn); color: var(--trn-sobre); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .trn-mini { color: var(--trn); font-size: 12px; font-weight: 600; padding: 2px 4px 2px 0; } .trn-dica { border-left: 3px solid var(--trn); background: var(--trn-fundo); padding: 8px 12px; border-radius: 0 8px 8px 0; font-size: 13px; margin: 10px 0; } .trn-ensinar { border: 1px dashed var(--trn); border-radius: 8px; padding: 10px 12px; } .trn-ensinar ul { margin: 6px 0 0; padding-left: 18px; } .trn-exe { list-style: none; padding: 0; margin: 0; } .trn-exe li { margin: 6px 0; } .trn-tabela tr.trn-alvo td { background: var(--alerta-fundo); } .trn-cobertas { display: flex; flex-wrap: wrap; gap: 4px; } .trn-rodape { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); display: grid; gap: 6px; } .trn-acoes { display: flex; flex-wrap: wrap; gap: 6px; } .trn-acoes button { padding: 5px 10px; font-size: 13px; } .trn-acoes .ativo { background: var(--trn); color: var(--trn-sobre); border-color: var(--trn); } .trn-lin2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; } .trn-voz { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; } .trn-voz select { max-width: 210px; padding: 3px 6px; font-size: 12px; } .trn-realce { outline: 3px solid var(--trn) !important; outline-offset: 3px; border-radius: 6px; animation: trn-pulsa 1.2s ease-in-out 3; } @keyframes trn-pulsa { 50% { outline-color: transparent; } } /* o foco do tour: o recorte iluminado em volta do campo; a sombra enorme escurece o resto da tela */ .trn-foco { position: fixed; z-index: 900; pointer-events: none; border-radius: 8px; outline: 3px solid var(--trn); outline-offset: 0; box-shadow: 0 0 0 200vmax var(--trn-sombra); transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; } .trn-foco.trn-foco-vazio { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; outline: 0; } .trn-tour { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); z-index: 920; background: var(--superficie); border: 2px solid var(--trn); border-radius: 12px; box-shadow: 0 8px 28px var(--trn-sombra); padding: 10px 14px; } .trn-fala { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; } .trn-rosto { width: 54px; height: 54px; flex: 0 0 auto; } .trn-r-fundo { fill: var(--trn-fundo); stroke: var(--trn); stroke-width: 1.5; } .trn-r-roupa { fill: var(--trn); } .trn-r-pele { fill: var(--trn-pele); } .trn-r-cabelo { fill: var(--trn-cabelo); } .trn-r-olhos { fill: #2b2233; transform-box: fill-box; transform-origin: center; animation: trn-pisca 4.5s infinite; } .trn-r-bochecha { stroke: #e79a8c; stroke-width: 1.6; stroke-linecap: round; fill: none; } .trn-r-boca { fill: #8c3b3b; transform-box: fill-box; transform-origin: center; } .trn-r-fone { fill: none; stroke: #2b2233; stroke-width: 1.8; stroke-linecap: round; } .trn-r-fone-c { fill: #2b2233; } .trn-falando .trn-r-boca { animation: trn-boca .22s ease-in-out infinite alternate; } @keyframes trn-boca { from { transform: scaleY(.6); } to { transform: scaleY(2.4); } } @keyframes trn-pisca { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } } .trn-legenda { margin: 0; font-size: 15px; line-height: 1.45; flex: 1; min-height: 44px; } .trn-palavra { border-radius: 4px; transition: background .12s; } .trn-palavra.trn-atual { background: var(--trn); color: var(--trn-sobre); } .trn-ctl { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 13px; } .trn-ctl label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; } .trn-ctl select { width: auto; padding: 3px 6px; } .trn-nota { margin: 6px 0 0; font-size: 12px; } .trn-tour-lin { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .trn-bolha { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); z-index: 920; background: var(--superficie); border: 2px solid var(--trn); border-radius: 12px; box-shadow: 0 8px 28px var(--trn-sombra); padding: 8px 12px; } .trn-bolha .trn-fala { margin: 0; } .trn-cursor { position: fixed; z-index: 940; pointer-events: none; transform: translate(-4px, -2px); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition: left .8s cubic-bezier(.4,0,.2,1), top .8s cubic-bezier(.4,0,.2,1); } .trn-cursor-seta { fill: #ffffff; stroke: #16211d; stroke-width: 1.6; stroke-linejoin: round; } .trn-onda { position: fixed; z-index: 930; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 3px solid var(--trn); pointer-events: none; animation: trn-onda .7s ease-out forwards; } @keyframes trn-onda { to { transform: scale(3.2); opacity: 0; } } .trn-faixa { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 915; background: var(--trn); color: var(--trn-sobre); padding: 8px 14px; border-radius: 8px; font-size: 13px; max-width: calc(100vw - 32px); } .trn-faixa .link { color: var(--trn-sobre); text-decoration: underline; } body.trn-explorando .painel input, body.trn-explorando .painel select, body.trn-explorando .painel button, body.trn-explorando .topo button { cursor: help; } /* campo desabilitado não recebe o clique: no "Clique e ouça" o clique passa para o rótulo, que a treinadora explica */ body.trn-explorando .painel :disabled { pointer-events: none; } .trn-como { color: var(--trn); font-weight: 700; text-decoration: underline; padding: 0 4px; } .trn-convite { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 905; width: min(720px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--trn-fundo); border: 1px solid var(--trn); border-radius: 10px; padding: 10px 14px; box-shadow: var(--sombra); } .trn-convite > div { flex: 1; min-width: 200px; } .trn-convite-bt { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .trn-central-topo { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: end; } .trn-barra { height: 8px; border-radius: 4px; background: var(--neutro); overflow: hidden; margin: 6px 0; } .trn-barra i { display: block; height: 100%; width: 0; background: var(--trn); } .trn-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; } .trn-mod { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; background: var(--superficie); display: flex; flex-direction: column; gap: 6px; } .trn-mod h3 { margin: 0; } .trn-mod.trn-off { opacity: .6; } .trn-dir { text-align: right; } @media (min-width: 761px) { body.trn-cad-aberto .trn-tour, body.trn-cad-aberto .trn-bolha { left: calc((100vw - 520px) / 2); width: min(560px, calc(100vw - 560px)); } } @media (min-width: 1300px) { body.trn-cad-aberto.trn-com-painel .trn-bolha { left: calc(420px + (100vw - 940px) / 2); width: min(480px, calc(100vw - 960px)); } } @media (max-width: 760px) { .trn-botao .trn-rot { display: none; } .trn-botao { padding: 4px; } .trn-botao-painel { display: inline-flex; } .trn-painel, .trn-painel.trn-esq { top: auto; left: 0; right: 0; bottom: 0; width: 100vw; height: 82vh; border: 0; border-top: 3px solid var(--trn); border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px var(--trn-sombra); } .trn-painel.trn-recolhido { height: auto; } .trn-painel.trn-recolhido .trn-corpo, .trn-painel.trn-recolhido .trn-rodape, .trn-painel.trn-recolhido .trn-abas, .trn-painel.trn-recolhido .trn-cab .sub { display: none; } .trn-tour { bottom: 8px; width: calc(100vw - 16px); padding: 8px 10px; } .trn-ctl { gap: 6px 10px; font-size: 12px; } .trn-nota { display: none; } .trn-rosto { width: 42px; height: 42px; } .trn-legenda { font-size: 14px; } .trn-central-topo { grid-template-columns: 1fr; } .trn-faixa, .trn-convite { top: 8px; } } /* v1.29.14: cabeçalho fixo nos painéis de cadastro de Parceiro, Empresa e Cliente (Gestor). v1.29.15: só os DADOS ficam presos — o título (razão social, código, tipos/CNPJ: o bloco .painel-topo). As abas voltam a rolar com o formulário, como antes da 1.29.14 (no computador e no celular). As alturas vêm do JS (cuCabecalhoFixo, em cadastro.js): --cab-pad (o recuo do alto do painel) e --cab-topo (a altura do título); a faixa de aviso (.cu-faixa) fica logo abaixo do título. No celular o título fica compacto (uma linha cada, com reticências). */ @media (min-width: 761px) { .painel.cab-fixo > .painel-topo { position: sticky; top: calc(-1 * var(--cab-pad, 20px)); z-index: 7; background: var(--superficie); margin-top: calc(-1 * var(--cab-pad, 20px)); padding-top: var(--cab-pad, 20px); padding-bottom: 6px; margin-bottom: 6px; } .painel.cab-fixo > .cu-faixa { top: calc(var(--cab-topo, 64px) - var(--cab-pad, 20px)); } :root[data-densidade="compacta"] .painel.cab-fixo > .cu-faixa { top: calc(var(--cab-topo, 64px) - var(--cab-pad, 14px)); } } @media (max-width: 760px) { .painel.cab-fixo > .painel-topo { padding: 8px 0 6px; } .painel.cab-fixo > .painel-topo > div:first-child { min-width: 0; } .painel.cab-fixo > .painel-topo h3 { font-size: 16px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .painel.cab-fixo > .painel-topo .sub { font-size: 12px; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .painel.cab-fixo > .cu-faixa { top: var(--cab-topo, 52px); } } /* v1.29.15: as abas dos painéis de cadastro numa linha só (cuAbasLinha, em cadastro.js; a "proposta B" de prototipos/abas-fixas). A barra .abas vira um trilho que rola para o lado, com ‹ › nas pontas, esmaecido do lado que tem mais abas e o "Todas ▾" com a lista de todas. Quando tudo cabe (.cabe), setas e "Todas" somem. Não é sticky: rola com o formulário (só o título do painel fica preso). No celular as setas somem e o dedo rola. */ .abas-linha { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--borda); margin-bottom: 16px; } .abas-linha > .abas { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 0; margin-bottom: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .abas-linha > .abas::-webkit-scrollbar { display: none; } .abas-linha > .abas > .aba { flex: none; } .abas-linha.tem-antes > .abas { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); mask-image: linear-gradient(90deg, transparent 0, #000 22px); } .abas-linha.tem-depois > .abas { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); } .abas-linha.tem-antes.tem-depois > .abas { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } .abas-seta { flex: none; width: 28px; padding: 0; border: 0; background: none; color: var(--primaria); font-size: 20px; line-height: 1; cursor: pointer; } .abas-seta:disabled { color: var(--borda); cursor: default; } .abas-todas { flex: none; border: 0; border-left: 1px solid var(--borda); background: none; color: var(--primaria); font-size: 13px; padding: 0 10px; white-space: nowrap; cursor: pointer; } .abas-seta:focus-visible, .abas-todas:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; } .abas-linha.cabe > .abas-seta, .abas-linha.cabe > .abas-todas { display: none; } .abas-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 9; width: min(360px, 100%); max-height: 60vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 6px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: var(--sombra); } .abas-lista button { display: flex; align-items: center; gap: 4px; text-align: left; border: 0; background: none; color: var(--texto); font-size: 13px; padding: 7px 8px; border-radius: 6px; cursor: pointer; } .abas-lista button:hover:not(:disabled), .abas-lista button:focus-visible { background: var(--neutro); } .abas-lista button.ativa { color: var(--primaria); font-weight: 600; background: var(--neutro); } .abas-lista button:disabled { opacity: .45; cursor: not-allowed; } .abas-lista .contagem { margin-left: 2px; } :root[data-densidade="compacta"] .abas-linha { margin-bottom: 10px; } @media (max-width: 760px) { .abas-linha > .abas-seta { display: none; } .abas-linha > .abas { -webkit-mask-image: none; mask-image: none; } .abas-lista { grid-template-columns: 1fr; width: min(280px, 100%); } .abas-lista button { min-height: 40px; } } /* v1.29.14: o endereço da consulta do CNPJ depois de "Atualizar dados do CNPJ" e a IE sugerida — para conferir */ .cu-end-cnpj { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--borda); } .cu-end-cnpj.aviso { background: var(--alerta-fundo); } .cu-end-cnpj p { margin: 2px 0; } .cu-ie-sugerida { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--alerta-fundo); } .cu-ie-sugerida .dica { flex-basis: 100%; } /* ------------------------------------------------------------ v1.30.0: Gestor › Societário (web/societario.js) */ .soc-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 12px; } .soc-filtros label { display: flex; flex-direction: column; gap: 2px; } .soc-filtros label.check { flex-direction: row; align-items: center; } .soc-prazos, .soc-tempo, .soc-socios, .soc-anexos, .soc-versoes { list-style: none; padding: 0; margin: 0 0 8px; } .soc-prazos li, .soc-tempo li { padding: 6px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; } .soc-prazos li.soc-atrasado b { color: var(--erro); } .soc-passos, .soc-previa { padding-left: 22px; margin: 0 0 12px; } .soc-passo { padding: 10px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; } .soc-passo-topo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .soc-passo.soc-p-DEFERIDO .soc-passo-topo b, .soc-passo.soc-p-DISPENSADO .soc-passo-topo b { color: var(--suave); } .soc-passo.soc-inativo { opacity: .55; } .soc-nota { color: var(--alerta); font-size: .9rem; } .soc-form-passo { margin-top: 8px; background: var(--fundo); padding: 10px; border-radius: var(--raio); } .soc-anexo-form { flex-wrap: wrap; } .soc-checks { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .soc-checks legend { font-weight: 600; margin-bottom: 4px; } .soc-socio { border-bottom: 1px dashed var(--borda); padding-bottom: 8px; margin-bottom: 8px; } .soc-socio .soc-cpf-nota { grid-column: 1 / -1; margin: 0; } .soc-legal summary { cursor: pointer; color: var(--suave); font-size: .9rem; } @media (max-width: 700px) { .soc-filtros label:not(.check) { flex: 1 1 140px; } .soc-tab-proc td, .soc-tab-cob td, .soc-tab-mod td, .soc-tab-taxa td { white-space: normal; } } /* v1.30.1: Análise de contratos */ .soc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 10px; } .soc-dl dt { font-weight: 600; color: var(--suave); } .soc-dl dd { margin: 0; overflow-wrap: anywhere; } .soca-achados { list-style: none; padding: 0; margin: 0 0 12px; } .soca-achado { border-left: 4px solid var(--borda); padding-left: 10px; } .soca-achado.soca-CRITICA { border-left-color: var(--erro); } .soca-achado.soca-ALTA { border-left-color: var(--alerta); } .soca-acoes { flex-wrap: wrap; margin-top: 4px; } .soc-subabas { margin-bottom: 8px; } .soc-tab-an tbody tr, .soc-tab-hist tbody tr { cursor: pointer; } .soc-tab-par td { white-space: normal; min-width: 90px; } @media (max-width: 700px) { .soc-dl { grid-template-columns: 1fr; } .soc-tab-an td, .soc-tab-hist td, .soc-tab-par td { white-space: normal; } } /* v1.30.2: contrato em PDF — documentos, conferência campo a campo (editor | evidência) e agente societário */ .socl-docs { list-style: none; padding: 0; margin: 0 0 8px; } .socl-doc { padding: 8px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; } .socl-avisos li { padding: 2px 0; border: 0; color: var(--alerta); font-size: .9rem; } .socl-envio { flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; } .socl-envio label { display: flex; flex-direction: column; gap: 2px; } .socl-contador { position: sticky; top: 0; z-index: 1; background: var(--superficie); padding: 6px 0; margin: 4px 0; } .socl-campo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 10px 16px; padding: 10px; margin: 0 0 10px; border: 1px solid var(--borda); border-left: 4px solid var(--alerta); border-radius: var(--raio); } .socl-campo.socl-feito { border-left-color: var(--ok); } .socl-campo h5 { margin: 0 0 6px; font-size: .95rem; } .socl-ed { min-width: 0; } .socl-ok { margin-top: 8px; font-weight: 600; } .socl-ev { min-width: 0; background: var(--fundo); border-radius: var(--raio); padding: 8px 10px; font-size: .9rem; overflow-wrap: anywhere; } .socl-ev blockquote, .socl-socio-ev blockquote { margin: 6px 0; padding-left: 8px; border-left: 3px solid var(--borda); color: var(--texto); } .socl-ev p { margin: 4px 0 0; } .socl-ev-topo { display: flex; flex-wrap: wrap; gap: 4px; } .socl-socio-ev { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: .9rem; } .socl-socio-ev details { flex-basis: 100%; } .socl-clausulas { padding-left: 22px; margin: 0 0 10px; } .socl-clausulas summary { cursor: pointer; } .socl-texto { white-space: pre-wrap; overflow-wrap: anywhere; } /* v1.30.7: legendas de Natureza jurídica e Porte declarado (societario.js socCampoLeg) — o quadro abre sob o rótulo, na largura do campo (no celular, a largura da tela), sem rolar a página para o lado */ .soc-leg-campo { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .soc-leg-rot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .soc-leg-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; min-height: 28px; font-size: 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--primaria-escura); cursor: pointer; } .soc-leg-btn[aria-expanded="true"] { background: var(--acento); border-color: var(--primaria); } .soc-leg-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-weight: 700; background: var(--primaria); color: var(--sobre-primaria); font-size: 12px; } .soc-leg-curta { margin: 0; font-size: 12.5px; color: var(--suave); overflow-wrap: anywhere; } .soc-leg-curta:empty { display: none; } .soc-leg-quadro { position: absolute; z-index: 30; top: 32px; left: 0; right: 0; max-height: min(70vh, 560px); overflow: auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: 10px 12px; font-size: 13.5px; } .soc-leg-quadro:focus { outline: 2px solid var(--primaria); outline-offset: 1px; } .soc-leg-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: -10px; background: var(--superficie); padding: 2px 0 6px; } .soc-leg-topo h5 { margin: 0; font-size: 14px; } .soc-leg-fecha { font-size: 22px; line-height: 1; padding: 0 6px; min-width: 32px; min-height: 32px; } .soc-leg-lista, .soc-leg-notas { list-style: none; padding: 0; margin: 0; } .soc-leg-item { padding: 8px 0; border-top: 1px solid var(--borda); overflow-wrap: anywhere; } .soc-leg-item p { margin: 3px 0 0; } .soc-leg-item.soc-leg-atual { background: var(--acento); margin: 0 -12px; padding: 8px 12px; } .soc-leg-notas { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--borda); } .soc-leg-notas li { padding: 3px 0 3px 12px; position: relative; color: var(--suave); } .soc-leg-notas li::before { content: "•"; position: absolute; left: 0; } @media (max-width: 700px) { .soc-leg-quadro { position: fixed; z-index: 2000; top: auto; bottom: 0; left: 0; right: 0; max-height: 75vh; border-radius: var(--raio) var(--raio) 0 0; } } @media (max-width: 700px) { .socl-campo { grid-template-columns: 1fr; padding: 8px; } .socl-envio label { flex: 1 1 100%; } .socl-envio input[type="file"] { max-width: 100%; } } /* v1.30.4: importação de parceiros só pelo CNPJ e o tipo — atalho no painel e a conferência do endereço em lote */ /* v1.30.9: as três entradas do ⚙ Planilha de Parceiro de negócio (completa, pelo CNPJ e o tipo, Renumerar) — uma linha de explicação em cada; a aberta fica marcada. No celular, uma embaixo da outra */ .imp-entradas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0 0 14px; } .imp-entrada { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-width: 0; border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio); padding: 9px 12px; background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit; white-space: normal; } .imp-entrada:hover { border-left-color: var(--primaria); } .imp-entrada.atual { border-color: var(--primaria); border-left-color: var(--primaria); box-shadow: 0 0 0 2px var(--acento); cursor: default; } .imp-entrada .dica { margin: 0; font-weight: 400; } @media (max-width: 520px) { .imp-entradas { grid-template-columns: 1fr; } } .impc-dica-renumera { margin: 6px 0; } /* v1.30.14 (W83): o campo "Consultas por minuto" ao lado do envio e o ritmo com os botões no andamento */ .impc-envio { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 8px 0; } .impc-envio .impc-ritmo { flex: 0 1 230px; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .impc-envio .impc-ritmo input { width: 100%; max-width: 120px; } .impc-envio .impc-ritmo .dica { font-size: 12px; } .impc-envio .mov-soltar { flex: 1 1 280px; min-width: 0; } .impc-ritmo-andamento p { margin: 4px 0; overflow-wrap: anywhere; } .impc-ritmo-andamento .impc-agora { color: var(--alerta); font-weight: 600; } .impc-ritmo-botoes { gap: 8px; flex-wrap: wrap; } @media (max-width: 600px) { .impc-envio .impc-ritmo, .impc-envio .mov-soltar { flex: 1 1 100%; } } .impc-dica-renumera .link { padding: 0; font-weight: 600; } .impc-conf { display: grid; gap: 10px; } .impc-end { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--superficie); } .impc-end.a-conferir { border-left: 4px solid #d98a00; } .impc-end-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .impc-end-topo input[type="checkbox"], .impc-conf + .linha-acoes input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; } .impc-end-nome { flex: 1 1 220px; display: flex; flex-direction: column; } .impc-end-campos { display: grid; grid-template-columns: 1fr 2fr 1.1fr 1.3fr 1.4fr 1.2fr 1.6fr .6fr; gap: 8px; margin-top: 8px; } .impc-end-campos label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--suave); min-width: 0; } .impc-end-campos label b { color: var(--texto); font-weight: 500; font-size: 14px; } .impc-end-campos input { width: 100%; min-width: 0; padding: 5px 6px; } .impc-c-uf input { text-transform: uppercase; } .impc-end-campos label.falta input[type="text"] { border-color: #d98a00; box-shadow: 0 0 0 2px var(--alerta-fundo); } .impc-end-campos label.falta > span:first-child { color: var(--alerta); font-weight: 600; } .impc-sn { display: flex; gap: 4px; align-items: center; font-size: 12px; color: var(--texto); } .impc-sn input[type="checkbox"] { width: auto; margin: 0; } .impc-falta { padding: 6px 10px; border-radius: var(--raio); margin: 8px 0 0; } .end-conferir p { margin: 0 0 4px; } .end-conferir-num { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0; } .end-conferir-num input[type="checkbox"] { width: auto; } .end-conferir { padding: 8px 12px; border-radius: var(--raio); margin: 6px 0; } @media (max-width: 900px) { .impc-end-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .impc-c-endereco, .impc-c-municipio { grid-column: span 2; } } @media (max-width: 520px) { .impc-end-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .impc-c-endereco { grid-column: span 2; } .impc-c-municipio { grid-column: span 1; } } .impc-end [data-impc-confirma]:disabled, .end-conferir [data-end-conferir]:disabled { opacity: .45; cursor: not-allowed; } .impc-sn { white-space: nowrap; } /* v1.30.7 (W71): o resultado da importação pelo CNPJ — CNPJ e código em coluna própria, busca e filtro; no celular a tabela vira cartões (sem rolagem lateral). A linha em âmbar (impc-dif) ficou só no Renumerar parceiros (v1.30.9) */ .impc-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 10px 0 4px; } .impc-filtros .campo { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; } .impc-busca { flex: 2 1 260px; } .impc-res { flex: 1 1 200px; } .impc-busca input, .impc-res select { width: 100%; min-width: 0; } .impc-exporta { display: flex; gap: 8px; flex-wrap: wrap; } .impc-tab td { white-space: normal; padding: 9px 8px; overflow-wrap: anywhere; } .impc-tab th { padding: 9px 8px; } .impc-tab .impc-cnpj { white-space: nowrap; overflow-wrap: normal; } .impc-tab .impc-nome { min-width: 140px; } .impc-tab td .dica.mono { font-size: 11.5px; white-space: nowrap; } .impc-tab .link.mono { padding: 0; font-weight: 600; } .impc-tab tr.impc-dif td { background: var(--alerta-fundo); } .impc-tab tr.impc-dif td:first-child { box-shadow: inset 4px 0 0 #d98a00; } .impc-end-nome .link.mono { padding: 0; } @media (max-width: 700px) { .impc-tab-wrap { border: 0; background: none; overflow: visible; } .impc-tab thead { display: none; } .impc-tab, .impc-tab tbody, .impc-tab tr, .impc-tab td { display: block; width: 100%; } .impc-tab tr { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 8px; padding: 8px 10px; } .impc-tab tr.impc-dif { border-left: 4px solid #d98a00; background: var(--alerta-fundo); } .impc-tab tr.impc-dif td, .impc-tab tr.impc-dif td:first-child { background: none; box-shadow: none; } .impc-tab td { border: 0; padding: 2px 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; } .impc-tab td[data-r]::before { content: attr(data-r) ": "; color: var(--suave); font-size: 12px; font-family: inherit; } .impc-tab td .dica { margin: 0; } .impc-tab td .dica.mono { display: inline-block; margin-left: 10px; } .impc-tab td.num { font-weight: 600; } .impc-tab td.vazio::before { content: none; } .impc-exporta { width: 100%; } .impc-exporta .botao { flex: 1 1 auto; text-align: center; } } /* v1.30.9: desfazer a importação pelo CNPJ — a prévia com a confirmação, a seleção de vários lotes e a linha desfeita */ .impc-hist-topo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; } .impc-hist-topo .sec { margin-bottom: 4px; } .impc-hist .impc-sel { width: 34px; text-align: center; } .impc-hist .impc-sel input { width: auto; margin: 0; } .impc-hist-acoes { white-space: nowrap; } .impc-hist-acoes .excluir { margin-left: 6px; padding: 4px 10px; } .impc-desfaz { border: 1px solid var(--borda); border-left: 4px solid #c0392b; border-radius: var(--raio); padding: 10px 14px; margin: 8px 0 12px; background: var(--superficie); max-width: 760px; } .impc-desfaz .sec { margin-top: 0; } .impc-desfaz-conta { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; } .impc-desfaz-conta b { display: inline-block; min-width: 2.5em; text-align: right; margin-right: 6px; } .impc-desfaz-lista { margin: 4px 0 8px; padding-left: 18px; max-height: 220px; overflow: auto; overflow-wrap: anywhere; } .impc-desfaz details { margin: 4px 0; } .impc-desfeito-linha { margin-top: 4px; } @media (max-width: 700px) { .impc-hist thead { display: none; } .impc-hist, .impc-hist tbody, .impc-hist tr, .impc-hist td { display: block; width: 100%; } .impc-hist tr { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 8px; padding: 8px 10px; background: var(--superficie); position: relative; } .impc-hist td { border: 0; padding: 2px 0; white-space: normal; overflow-wrap: anywhere; } .impc-hist td[data-r]::before { content: attr(data-r) ": "; color: var(--suave); font-size: 12px; } .impc-hist td.impc-sel { position: absolute; right: 10px; top: 8px; width: auto; } .impc-hist td.impc-sel:empty { display: none; } .impc-hist-acoes { white-space: normal; display: flex !important; gap: 8px; flex-wrap: wrap; padding-top: 6px !important; } .impc-hist-acoes .excluir { margin-left: 0; } .impc-hist td.vazio::before { content: none; } .impc-hist-topo [data-impc-desfaz-varios] { width: 100%; } } /* v1.30.8: Renumerar parceiros — os contadores são o filtro; o motivo; a tabela vira cartões no celular (impc-tab) */ .rnp-intro { border: 1px solid var(--borda); border-left: 4px solid var(--primaria); border-radius: var(--raio); padding: 10px 14px; margin: 0 0 12px; background: var(--superficie); } .rnp-intro p { margin: 0 0 6px; } .rnp-intro ul { margin: 0; padding-left: 18px; } .rnp-contagem { align-items: center; } .rnp-chip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--borda); border-radius: 999px; padding: 4px 10px; background: var(--superficie); color: var(--texto); cursor: pointer; min-height: 32px; } .rnp-chip.ativo { border-color: var(--primaria); box-shadow: 0 0 0 2px var(--acento); } .rnp-chip .selo { font-size: .9em; padding: 2px 8px; } .rnp-motivo { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 4px; max-width: 640px; } .rnp-motivo input { width: 100%; min-width: 0; } .rnp-desfaz { margin: 12px 0; } .rnp-desfaz summary { cursor: pointer; font-weight: 600; } @media (max-width: 700px) { .rnp-chip { flex: 1 1 auto; justify-content: space-between; } .rnp-motivo { max-width: 100%; } } /* v1.30.10 (W77): reiniciar a numeração e renumerar em sequência (Parâmetros › Parceiro de negócio) */ .nr-painel { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 12px 14px; margin: 12px 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } .nr-linha { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 8px 0; } .nr-linha label { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .nr-linha input[type=number] { width: 9em; max-width: 100%; } .nr-previa { margin: 8px 0; padding-left: 18px; } .nr-previa li { margin: 4px 0; } .nr-chips { margin-top: 6px; } .nr-chips .selo { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; } .nr-aviso { padding: 8px 12px; border-radius: var(--raio); font-size: 13px; margin: 10px 0; } .nr-confirma { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 640px; } .nr-confirma label { display: flex; flex-direction: column; gap: 4px; } .nr-confirma input { width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 700px) { .nr-painel { padding: 10px; } .nr-linha { flex-direction: column; align-items: stretch; } .nr-linha input[type=number], .nr-linha select { width: 100%; } .nr-confirma { max-width: 100%; } } /* ==================================================================== v1.30.11: abas dentro do sistema (proposta B) A barra fica entre o topo e a tela (web/abas.js monta). Cada aba é um botão role=tab; a ativa tem o fundo da tela e o fio da cor da marca em cima. As fixadas ficam num grupo à esquerda, fora da rolagem, com fundo sólido. No celular (até 760px) a barra vira o seletor "Telas abertas (n) ▾". Cores só pelas variáveis (os três temas). */ .app.com-abas { grid-template-rows: 56px auto 1fr; } .ab-barra { grid-column: 2; background: var(--neutro); border-bottom: 1px solid var(--borda); min-width: 0; position: relative; z-index: 2; } /* no sistema o topo rola junto: a barra fica acima do conteúdo (a lista "Abas ▾" cobre os cabeçalhos presos das telas); no Gestor o topo é preso (z-index 3) e a barra passa por baixo dele ao rolar */ #tela-app > .ab-barra { z-index: 15; } .ab-desk { display: flex; align-items: flex-end; height: 42px; padding: 0 6px 0 8px; gap: 2px; } .ab-tl { display: flex; align-items: flex-end; flex: 1; min-width: 0; height: 100%; } .ab-fixas { display: flex; align-items: flex-end; gap: 2px; flex: none; height: 100%; padding: 6px 8px 0 0; margin-right: 6px; background: var(--neutro); border-right: 1px solid var(--borda); position: relative; z-index: 2; } .ab-tl.rolada .ab-fixas { box-shadow: 6px 0 8px -6px rgba(0,0,0,.35); } .ab-trilho { display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; height: 100%; padding-top: 6px; } .ab-trilho::-webkit-scrollbar { display: none; } .ab-trilho.transborda { mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent 100%); } .ab-aba { display: flex; align-items: center; flex: none; position: relative; height: 36px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--suave); max-width: 260px; scroll-margin-inline: 24px; } .ab-aba:hover { background: var(--hover); } .ab-aba.ativa { background: var(--fundo); border-color: var(--borda); color: var(--primaria); box-shadow: inset 0 3px 0 var(--primaria); margin-bottom: -1px; height: 37px; z-index: 1; } .ab-b { display: flex; align-items: center; gap: 7px; border: 0; background: none; height: 100%; padding: 0 6px 0 12px; min-width: 0; border-radius: 8px 8px 0 0; color: inherit; font: inherit; font-size: 13px; } .ab-b:focus-visible { outline: 2px solid var(--primaria); outline-offset: -2px; } .ab-aba.ativa .ab-b { font-weight: 600; } .ab-b .ico { width: 16px; height: 16px; } .ab-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ab-ponto { color: var(--alerta); font-size: 12px; line-height: 1; display: none; } .ab-aba.suja .ab-ponto, .ab-it .ab-ponto, .ab-quadro li .ab-ponto, .ab-btn-cel .ab-ponto { display: inline; } .ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ab-x, .ab-atualiza { border: 0; background: none; width: 22px; height: 22px; border-radius: 5px; flex: none; color: var(--suave); font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0; } .ab-x { margin-right: 6px; } .ab-atualiza { font-size: 14px; margin-right: 2px; } .ab-x:hover, .ab-atualiza:hover { background: var(--neutro); color: var(--texto); } .ab-aba.fixada .ab-b { padding: 0 10px; gap: 3px; } .ab-aba.fixada .ab-rot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ab-alfinete { width: 11px; height: 11px; color: var(--suave); align-self: flex-start; margin-top: 7px; } .ab-aba.fixada.ativa .ab-alfinete { color: var(--primaria); } .ab-aba.arrastando { opacity: .45; } .ab-aba.drop-antes { box-shadow: inset 3px 0 0 var(--primaria); } .ab-aba.drop-depois { box-shadow: inset -3px 0 0 var(--primaria); } .ab-seta { border: 0; background: none; color: var(--primaria); width: 26px; height: 32px; font-size: 20px; line-height: 1; padding: 0; border-radius: 6px; align-self: center; flex: none; } .ab-seta:disabled { color: var(--borda); cursor: default; } .ab-seta:not(:disabled):hover { background: var(--hover); } .ab-btn { border: 1px solid transparent; background: none; color: var(--primaria); border-radius: 6px; padding: 5px 9px; font-size: 13px; font-weight: 600; white-space: nowrap; align-self: center; flex: none; } .ab-btn:hover, .ab-btn[aria-expanded="true"] { background: var(--superficie); border-color: var(--borda); } .ab-btn .ab-cont { color: var(--suave); font-weight: 400; } .ab-pop { position: absolute; right: 8px; top: 40px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 6px; z-index: 40; } .ab-pop-lista { width: 340px; max-height: 60vh; overflow: auto; } .ab-pop-tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); padding: 6px 10px 4px; } .ab-it { display: flex; align-items: center; gap: 4px; border-radius: 6px; } .ab-it:hover { background: var(--hover); } .ab-it.on { background: var(--acento); } .ab-it > button:first-child { flex: 1; display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 7px 8px; min-width: 0; color: var(--texto); font: inherit; } .ab-it.on > button:first-child { color: var(--primaria); font-weight: 600; } .ab-it .ab-rot { flex: 1; } .ab-alf { font-size: 11px; color: var(--suave); } .ab-pop-rodape { border-top: 1px solid var(--borda); margin-top: 4px; padding: 6px 8px 2px; font-size: 12px; color: var(--suave); } .ab-pop-rodape p { margin: 2px 0; } .ab-pop-atalhos { width: 400px; padding: 12px 14px; font-size: 13px; } .ab-pop-atalhos h3 { font-size: 14px; margin-bottom: 6px; } .ab-pop-atalhos table { border-collapse: collapse; width: 100%; } .ab-pop-atalhos td { padding: 4px 0; vertical-align: top; border-bottom: 1px solid var(--borda); } .ab-pop-atalhos td:first-child { white-space: nowrap; padding-right: 12px; } .ab-pop-atalhos kbd { font: 12px ui-monospace, Consolas, monospace; background: var(--superficie); border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; } .ab-aviso { margin: 8px 0 0; background: var(--alerta-fundo); color: var(--alerta); border-radius: 6px; padding: 7px 9px; } .ab-cel { display: none; } .ab-faixa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--acento); border-top: 1px solid var(--borda); padding: 8px 16px; font-size: 13px; } .ab-faixa-txt { flex: 1; min-width: 220px; } .ab-faixa-txt small { display: block; color: var(--suave); } .ab-menu-dica { font-size: 11.5px; color: var(--suave); padding: 8px 10px 0; border-top: 1px solid var(--borda); margin: 6px 0 0; line-height: 1.35; } .app.recolhido .ab-menu-dica { display: none; } /* o painel da direita começa abaixo da barra (no celular ele ocupa a tela inteira, como sempre) */ @media (min-width: 761px) { .app.com-abas .painel { top: calc(56px + var(--ab-alt, 43px)); } } /* menu de contexto e o quadro Salvar / Descartar / Cancelar */ .ab-ctx { position: fixed; min-width: 240px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 5px; z-index: 90; } .ab-ctx [role="menuitem"] { display: flex; justify-content: space-between; gap: 16px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 5px; color: var(--texto); font: inherit; } .ab-ctx [role="menuitem"]:hover, .ab-ctx [role="menuitem"]:focus { background: var(--acento); color: var(--primaria); outline: 0; } .ab-ctx [role="menuitem"][aria-disabled="true"] { color: var(--suave); opacity: .55; cursor: default; background: none; } .ab-atl { color: var(--suave); font-size: 12px; } .ab-ctx hr { border: 0; border-top: 1px solid var(--borda); margin: 4px 2px; } .ab-quadro-fundo { position: fixed; inset: 0; background: rgba(16,24,40,.45); display: grid; place-items: center; z-index: 100; padding: 16px; } .ab-quadro { background: var(--superficie); color: var(--texto); border-radius: 12px; box-shadow: var(--sombra); width: min(480px, 100%); padding: 20px 22px; max-height: calc(100dvh - 32px); overflow: auto; border-top: 4px solid var(--alerta); } .ab-quadro.info { border-top-color: var(--primaria); } .ab-quadro h3 { font-size: 17px; margin-bottom: 8px; } .ab-quadro p { margin: 6px 0; } .ab-quadro ul { margin: 8px 0; padding-left: 0; list-style: none; } .ab-quadro li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--fundo); margin-bottom: 4px; } .ab-quadro li .ab-rot { flex: 1; } .ab-quadro li .secundario { padding: 4px 10px; font-size: 13px; } .ab-quadro-botoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; } .ab-descartar { background: var(--superficie); color: var(--erro); border: 1px solid var(--erro); border-radius: 6px; padding: 8px 14px; font-weight: 600; } .ab-descartar:hover { background: var(--erro-fundo); } @media (max-width: 760px) { .ab-barra { grid-column: 1; } .ab-desk { display: none; } .ab-cel { display: flex; align-items: center; gap: 8px; padding: 6px 10px; } .ab-btn-cel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: 7px 10px; text-align: left; color: var(--texto); font: inherit; min-height: 40px; } .ab-atual { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--primaria); } .ab-atual .ab-rot { flex: 1; } .ab-qts { color: var(--suave); font-size: 12.5px; white-space: nowrap; } .ab-pop-lista { position: fixed; left: 8px; right: 8px; width: auto; } .ab-it .ab-x { width: 40px; height: 40px; font-size: 20px; } .ab-pop-atalhos { display: none; } .ab-ctx { max-width: calc(100vw - 16px); } .ab-faixa { padding: 8px 12px; } } @media (prefers-reduced-motion: reduce) { .ab-trilho { scroll-behavior: auto; } } /* v1.30.12: Gestor › Zerar lançamentos (implantação) — web/zerar_empresa.js */ .zr-passo { margin-bottom: 18px; } .zr-bloco { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; min-width: 0; } .zr-bloco legend { font-weight: 600; padding: 0 4px; } .zr-grupo { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; } .zr-grupo .selo { margin-left: 4px; } .zr-aviso { background: var(--erro-fundo); color: var(--erro); border: 1px solid var(--erro-borda, var(--erro)); border-radius: 8px; padding: 10px 12px; margin: 10px 0; } .zr-aviso ul { margin: 6px 0 0; padding-left: 18px; } .zr-feito { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; } .zr-lista { margin: 8px 0; padding-left: 18px; } .zr-empresa { margin: 8px 0; overflow-wrap: anywhere; } .zr-detalhe { margin: 8px 0; } .zr-hist td { vertical-align: top; overflow-wrap: anywhere; } @media (max-width: 700px) { .zr-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zr-grupo { gap: 6px; } } /* v1.30.13 (W82): o cliente bloqueado para vendas pela situação cadastral (Baixada, Inapta, Suspensa, Nula) — na busca do cliente aparece desabilitado, com o selo e o motivo; quem pode, libera com motivo. A faixa no orçamento/pedido. */ .ov-res .sitcad-bloq { text-align: left; background: var(--campo-off); border: 1px solid var(--borda); border-top: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; cursor: not-allowed; } .ov-res .sitcad-bloq:first-child { border-top: 1px solid var(--borda); border-radius: 6px 6px 0 0; } .ov-res .sitcad-bloq:last-child { border-radius: 0 0 6px 6px; } .ov-res .sitcad-bloq > b { color: var(--suave); } .ov-res .sitcad-bloq > span { color: var(--suave); font-size: 12.5px; } .ov-res .sitcad-bloq > button.link { display: inline; border: 0; padding: 0; background: none; align-self: flex-start; cursor: pointer; } .sitcad-motivo { color: var(--erro); font-weight: 600; } .sitcad-libera { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; margin-top: 6px; cursor: default; } .sitcad-libera label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; font-size: 12.5px; } .sitcad-libera input { width: 100%; } .sitcad-libera .erro { flex-basis: 100%; margin: 0; } .sitcad-faixa { background: var(--erro-fundo); color: var(--erro-escuro); border-left: 4px solid var(--erro); padding: 8px 12px; border-radius: var(--raio); margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; } .sitcad-faixa.liberada { background: var(--alerta-fundo); color: var(--alerta); border-left-color: #d98a00; } .sitcad-faixa .dica { color: inherit; opacity: .9; } .ov-res .sitcad-libera button { display: inline-block; border-radius: 6px; padding: 7px 14px; font-weight: 600; } .ov-res .sitcad-libera button.primario { background: var(--primaria); color: var(--sobre-primaria); border: 0; } .ov-res .sitcad-libera button.primario:hover { background: var(--primaria-escura); } .ov-res .sitcad-libera button.secundario { background: var(--superficie); color: var(--primaria); border: 1px solid var(--primaria); } /* ============================================================ v1.30.15: Parceiro de negócio › Mapa — filtros de região (protótipo aprovado: prototipos/mapa-filtros-regiao). Barra sempre à vista no computador; no celular, o botão "Filtros (n)" abre o painel em tela cheia, e o mapa e a lista ficam em abas. */ .rmf-barra, .rmf-painel-cab, .rmf-painel-pe, .rmf-abas-cel { display: none; } /* v1.30.16: os filtros em abas, no desenho do filtro da lista de parceiros (.filtros-caixa + .abas.abas-filtro) */ .rmf-area { margin-bottom: 8px; min-width: 0; } .rmf-pf[hidden] { display: none; } .rmf-rv { max-width: 440px; } .rmf-pf[data-rmf-pf="regional"] .rmf-cab .dica { flex: 0 1 auto; min-width: 0; } .rmf-compras { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 28px; } .rmf-compras-it { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; } .rmf-compras-it[hidden] { display: none; } .rmf-compras-it .dica { flex-basis: 100%; margin: 0; } .rmf-compras label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--texto); font-size: 13px; } .rmf-compras label.check input { width: auto; margin: 0; } .rmf-compras input[type=date] { width: auto; } .rmf-cab { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 10px; } .rmf-cab .dica { margin: 0; flex: 1; min-width: 200px; } .rmf-cab .rmf-cad { margin-left: auto; font-size: 12.5px; } .rmf-divisao { flex-direction: row !important; align-items: center; gap: 8px; font-size: 12.5px; margin-left: auto; } .rmf-divisao select { width: auto; padding: 5px 8px; } .rmf-cascata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 26px; } /* seleção múltipla com busca */ .rmf-ms { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .rmf-cascata .rmf-ms:not(:nth-child(4n)):not(:last-child)::after { content: "›"; position: absolute; right: -18px; top: 25px; color: var(--suave); font-size: 18px; line-height: 1; } .rmf-ms-rot { font-size: 12px; color: var(--suave); font-weight: 500; display: flex; align-items: center; gap: 6px; min-height: 18px; } .rmf-ms-rot.sr, .rmf-ms .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rmf-passo { width: 18px; height: 18px; border-radius: 50%; background: var(--neutro); color: var(--suave); font-size: 11px; display: grid; place-items: center; font-weight: 700; flex: none; } .rmf-ms.ativo .rmf-passo { background: var(--primaria); color: var(--sobre-primaria); } .rmf-ms-botao { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--campo); color: var(--texto); text-align: left; min-width: 0; min-height: 36px; font: inherit; cursor: pointer; } .rmf-ms-botao .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rmf-ms-botao .n { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; } .rmf-ms-botao svg { flex: none; color: var(--suave); } .rmf-ms-botao:hover:not(:disabled) { border-color: var(--primaria); } .rmf-ms.ativo .rmf-ms-botao { border-color: var(--primaria); background: var(--acento); color: var(--primaria); font-weight: 600; } .rmf-ms.ativo .rmf-ms-botao .n { color: var(--primaria); } .rmf-ms-botao:disabled { background: var(--campo-off); color: var(--suave); cursor: not-allowed; font-style: italic; } .rmf-pop { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 600; width: max(100%, 290px); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--painel-sombra, var(--sombra)); padding: 8px; } .rmf-cascata .rmf-ms:nth-child(4n) .rmf-pop { left: auto; right: 0; } .rmf-ms-acoes { display: flex; justify-content: space-between; gap: 6px; margin-top: 4px; } .rmf-ms-acoes .link { font-size: 12.5px; padding: 4px 6px; } .rmf-ms-lista { max-height: 264px; overflow: auto; list-style: none; margin: 4px 0 0; padding: 0; } .rmf-op { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; color: var(--texto) !important; font-weight: 400 !important; font-size: 13px !important; cursor: pointer; flex-direction: row !important; } .rmf-op:hover { background: var(--hover); } .rmf-op input { width: 16px; height: 16px; margin: 0; } .rmf-op small { display: block; color: var(--suave); font-size: 11.5px; } .rmf-op:has(input:checked) { background: var(--acento); } .rmf-n { font-variant-numeric: tabular-nums; font-size: 12px; background: var(--neutro); color: var(--suave); border-radius: 999px; padding: 1px 8px; font-weight: 600; } .rmf-vazio { color: var(--suave); font-size: 12.5px; padding: 6px; margin: 0; } /* chips e resumo */ .rmf-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; } .rmf-ativos:empty { display: none; } .rmf-ativos .rot { font-size: 12px; color: var(--suave); margin-right: 2px; } .rmf-ativos .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--primaria); background: var(--acento); color: var(--primaria); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12.5px; max-width: 100%; } .rmf-ativos .chip b { font-weight: 600; color: var(--suave); } .rmf-ativos .chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rmf-ativos .chip button { border: 0; background: none; color: inherit; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; flex: none; cursor: pointer; } .rmf-ativos .chip button:hover { background: var(--hover); } .rmf-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; min-height: 38px; } .rmf-resumo.carregando { opacity: .6; } .rmf-resumo .caminho { font-weight: 600; overflow-wrap: anywhere; } .rmf-resumo .nums { color: var(--suave); } .rmf-resumo .rmf-trunc { color: var(--alerta); font-size: 12.5px; flex-basis: 100%; } /* a lista com Agrupar por */ .rmf-lista-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 2; } .rmf-lista-cab h4 { margin: 0; flex: 1; white-space: nowrap; font-size: 14px; padding: 0; border: 0; position: static; } .rmf-lista-cab label { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; } .rmf-lista-cab select { width: auto; padding: 5px 8px; } .rmf-grp { border-bottom: 1px solid var(--borda); } .rmf-grp summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--neutro); cursor: pointer; font-weight: 600; font-size: 13px; } .rmf-grp summary::-webkit-details-marker { display: none; } .rmf-grp summary .seta { transition: transform .15s; color: var(--suave); flex: none; } .rmf-grp[open] summary .seta { transform: rotate(90deg); } .rmf-grp summary .nome { flex: 1; min-width: 0; overflow-wrap: anywhere; } .rmf-grp summary .sub-n { font-weight: 400; color: var(--suave); font-size: 12px; } .rmf-grp summary .tot { font-variant-numeric: tabular-nums; background: var(--superficie); border-radius: 999px; padding: 1px 8px; font-size: 12px; } .rm-lista .rmf-mais { width: auto !important; border: 0 !important; color: var(--primaria); padding: 8px 12px !important; } .rmf-fora-lista { color: var(--suave); font-size: 12px; padding: 6px 12px; } .rm-mapa-rodape [data-rmf-fora] { margin-left: 0; font-size: 12.5px; } @media (max-width: 1180px) { .rmf-cascata { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rmf-cascata .rmf-ms:nth-child(2n)::after { display: none; } .rmf-cascata .rmf-ms:nth-child(4n+1)::after, .rmf-cascata .rmf-ms:nth-child(4n+3)::after { display: block; } .rmf-cascata .rmf-ms:nth-child(2n) .rmf-pop { left: auto; right: 0; } } @media (max-width: 760px) { .rmf-barra { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .rmf-abrir { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 8px; padding: 10px; font-weight: 600; } .rmf-qtd { color: var(--primaria); } .rmf-area { position: fixed; inset: 0; z-index: 1200; background: var(--fundo); overflow-y: auto; overflow-x: hidden; padding: 0 12px 90px; margin: 0; display: none; border: 0; border-radius: 0; } .rmf-area.painel-aberto { display: block; } /* as quatro abas em duas linhas de duas (sem rolar para o lado), cada uma com o traço de baixo */ .rmf-area .rmf-abas-f { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; overflow: visible; border-bottom: 0; margin: 8px 0 12px; } .rmf-area .rmf-abas-f .aba { text-align: center; border-bottom: 1px solid var(--borda); white-space: normal; } .rmf-area .rmf-abas-f .aba.ativa { border-bottom: 2px solid var(--primaria); } .rmf-compras { grid-template-columns: minmax(0, 1fr); } .rmf-painel-cab { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 12px 0 8px; border-bottom: 1px solid var(--borda); } .rmf-painel-cab h3 { flex: 1; font-size: 16px; margin: 0; } .rmf-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--suave); padding: 4px 10px; min-width: 40px; min-height: 40px; } .rmf-painel-pe { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: var(--superficie); border-top: 1px solid var(--borda); z-index: 6; } .rmf-painel-pe button { flex: 1; padding: 11px; border-radius: 8px; font-weight: 600; } .rmf-painel-pe .rmf-sec { background: var(--superficie); color: var(--primaria); border: 1px solid var(--borda); } .rmf-cascata { grid-template-columns: minmax(0, 1fr); } .rmf-cascata .rmf-ms::after { display: none !important; } .rmf-divisao { margin-left: 0; width: 100%; flex-wrap: wrap; } .rmf-divisao select { flex: 1; min-width: 0; } .rmf-pop { position: static; width: auto; box-shadow: none; margin-top: 6px; } .rmf-ms-lista { max-height: 240px; } .rmf-abas-cel { display: flex; border-bottom: 1px solid var(--borda); margin-bottom: 10px; } .rmf-abas-cel button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px; color: var(--suave); font-weight: 600; } .rmf-abas-cel button[aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); } .rm-corpo [data-rmf-painel][data-oculto="1"] { display: none; } .rm-corpo { grid-template-columns: minmax(0, 1fr); } .rm-mapa { height: 62vh; min-height: 340px; } .rm-lista { max-height: none; } body.rmf-trava { overflow: hidden; } } /* Regional de vendas (Tabelas): a composição dentro do painel lateral */ .regv-comp { border-top: 1px solid var(--borda); margin-top: 12px; padding-top: 10px; } .regv-novo { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; align-items: end; margin-bottom: 10px; } #regv-form textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; } /* v1.30.16 (W87): o andamento de cada lote na lista de importações anteriores (vários ao mesmo tempo) */ .impc-hist-anda { margin-top: 6px; min-width: 0; } .impc-hist-anda .imp-barra { margin: 4px 0; max-width: 320px; } .impc-hist-anda .dica, .impc-dividindo { display: block; overflow-wrap: anywhere; } /* ============================================================ v1.31.0 — Pessoa física (Gestor › Clientes) O roxo da pessoa física é o mesmo token do Simples (--simples / --simples-fundo), que já tem as versões dos temas. */ .selo.pf-selo, .selo.PF { background: var(--simples-fundo); color: var(--simples); } .selo.PJ { background: var(--acento); color: var(--primaria-escura); } .pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pf-segmentado { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; background: var(--superficie); margin: 0 0 10px; max-width: 100%; } .pf-segmentado button { border: 0; background: none; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--suave); border-right: 1px solid var(--borda); white-space: nowrap; cursor: pointer; } .pf-segmentado button:last-child { border-right: 0; } .pf-segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--primaria); font-weight: 600; } .pf-segmentado .contagem { font-size: 11px; font-weight: 700; margin-left: 4px; opacity: .8; } .pf-acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .pf-pessoa-linha { margin: 0 0 10px; } .pf-pessoa-linha select { max-width: 100%; } .pf-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; margin: 0 0 8px; } .pf-campos div { min-width: 0; } .pf-campos dt { font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; } .pf-campos dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; } .pf-bloco-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pf-bloco-cab .cu-secao { margin-bottom: 4px; } .pf-lt-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pf-mun { display: flex; gap: 6px; min-width: 0; } .pf-mun select:first-child { flex: 0 0 5.5em; } .pf-mun select { min-width: 0; } .pf-det { margin: 8px 0; } .pf-det > summary { cursor: pointer; color: var(--primaria); font-weight: 600; } .pf-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 12px; min-width: 0; } .pf-cartao.destaque { border-color: var(--primaria); border-left-width: 4px; } .pf-cartao h5 { margin: 10px 0 4px; font-size: 13px; color: var(--suave); } .pf-duas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; } .pf-passos { margin: 6px 0 0; padding-left: 22px; } .pf-passos li { margin: 4px 0; } .pf-avisos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .pf-aviso-d { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 12px; min-width: 92px; font-size: 12px; background: var(--cab-tabela); } .pf-aviso-d b { font-size: 15px; } .pf-aviso-d.feito { border-color: var(--ok); background: var(--ok-fundo); color: var(--ok); } .pf-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .pf-pessoa-c { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; background: var(--cab-tabela); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .pf-pessoa-c.pf-encerrada { opacity: .7; } .pf-topo-c { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .pf-pessoa-c dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 13px; } .pf-pessoa-c dt { color: var(--suave); } .pf-pessoa-c dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .pf-lgpd { font-size: 12.5px; border-left: 3px solid var(--simples); background: var(--simples-fundo); padding: 8px 10px; border-radius: 0 6px 6px 0; margin: 10px 0 0; } .pf-regimes { margin: 8px 0 0; font-size: 13px; } .pf-regimes summary { cursor: pointer; color: var(--primaria); font-weight: 500; } .pf-regimes dl { margin: 8px 0 0; display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 6px 12px; } .pf-regimes dt { font-weight: 600; } .pf-regimes dd { margin: 0; } .pf-regimes .atual { color: var(--primaria); } .pf-vinc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pf-vinc li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--cab-tabela); } .pf-vinc li > div { flex: 1; min-width: 0; } .pf-vinc small { display: block; color: var(--suave); font-size: 12px; } .pf-v-ico { color: var(--primaria); } .pf-faixa-ok { background: var(--ok-fundo); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: var(--raio); padding: 8px 12px; margin: 0 0 8px; } .form.caixa { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie); margin: 8px 0; } .soc-pf-socio { background: var(--simples-fundo); border-radius: var(--raio); padding: 6px 8px; } @media (max-width: 760px) { .pf-duas { grid-template-columns: minmax(0, 1fr); } .pf-campos { grid-template-columns: 1fr 1fr; } .pf-regimes dl { grid-template-columns: 1fr; } .pf-segmentado { display: flex; width: 100%; } .pf-segmentado button { flex: 1; padding: 7px 4px; white-space: normal; } .tabela.pf-resp thead { display: none; } .tabela.pf-resp, .tabela.pf-resp tbody { display: block; } .tabela.pf-resp tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; margin-bottom: 8px; } .tabela.pf-resp td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; } .tabela.pf-resp td.pf-cel-cheia { grid-column: 1 / -1; } .tabela.pf-resp td[data-r]::before { content: attr(data-r); display: block; font-size: 11px; color: var(--suave); text-transform: uppercase; } } /* ===================================================================== v1.31.1 — IRPF (pasta da declaração) e o Meu ambiente da pessoa física (web/irpf.js, web/meu_ambiente.js; protótipo aprovado, telas 4 e 5) */ .ag-irpf { background: var(--acento); color: var(--primaria); border-color: var(--primaria); border-left-style: double; border-left-width: 4px; } .ag-mini em.ag-irpf { background: var(--primaria); outline: 1px solid var(--primaria); } .irpf-ano { display: flex; flex-direction: column; font-size: 12px; color: var(--suave); min-width: 190px; } .irpf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .irpf-chip { border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; color: var(--suave); } .irpf-chip[aria-pressed="true"] { border-color: var(--primaria); background: var(--acento); color: var(--primaria); font-weight: 600; } .irpf-chip b { margin-left: 4px; } .irpf-cartao { display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; margin: 0 0 14px; min-width: 0; } .irpf-cartao.destaque { border-left: 4px solid var(--primaria); } .irpf-cartao.irpf-conferir { border-left: 4px solid var(--alerta); } .irpf-cartao h3 { margin: 0 0 8px; font-size: 1rem; } .irpf-cartao > summary { cursor: pointer; } .irpf-cab-topo { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin-bottom: 6px; } .irpf-cab-topo h3 { margin: 0; } .irpf-trilho { display: flex; flex-wrap: wrap; margin: 6px 0 4px; list-style: none; padding: 0; } .irpf-trilho li { padding: 6px 14px 6px 22px; font-size: 12.5px; color: var(--suave); background: var(--neutro); margin: 0 2px 4px 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); } .irpf-trilho li:first-child { padding-left: 12px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); } .irpf-trilho li.feito { background: var(--ok-fundo); color: var(--ok); } .irpf-trilho li.atual { background: var(--primaria); color: var(--sobre-primaria); font-weight: 600; } .irpf-trilho li.ramo { background: var(--alerta); color: var(--sobre-alerta); } .irpf-mudar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 6px 0 10px; } .irpf-mudar label { min-width: 180px; flex: 1; } .irpf-mudar .erro { flex-basis: 100%; margin: 0; } .irpf-cab-pasta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; margin: 8px 0; } .irpf-cab-pasta dt { font-size: 11.5px; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; } .irpf-cab-pasta dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; } .irpf-cab-pasta dd small { display: block; font-weight: 400; color: var(--suave); } .irpf-cab-pasta .cinza dd { color: var(--suave); font-weight: 400; } .irpf-criterios { margin-top: 8px; font-size: 13px; } .irpf-criterios summary { cursor: pointer; color: var(--primaria); font-weight: 500; } .irpf-lista-simples { margin: 6px 0; padding-left: 18px; } .irpf-duas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; } .irpf-barra { height: 8px; border-radius: 4px; background: var(--neutro); overflow: hidden; margin: 6px 0 2px; } .irpf-barra i { display: block; height: 100%; background: var(--ok); } .irpf-grupo h4 { margin: 12px 0 4px; font-size: .9rem; } .irpf-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--borda); } .irpf-item .t { min-width: 0; overflow-wrap: anywhere; } .irpf-item small { display: block; color: var(--suave); font-size: 12px; } .irpf-item select { padding: 5px 8px; font-size: 13px; width: 100%; } .irpf-item select.irpf-s-PEDIDO { border-color: var(--alerta); color: var(--alerta); } .irpf-item select.irpf-s-RECEBIDO { border-color: var(--primaria); color: var(--primaria); } .irpf-item select.irpf-s-CONFERIDO { border-color: var(--ok); color: var(--ok); } .irpf-mais { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 10px; } .irpf-mais label { flex: 1; min-width: 180px; } .irpf-mais .erro { flex-basis: 100%; margin: 0; } .irpf-parametro { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--cab-tabela); margin: 6px 0 10px; } .irpf-parametro .rot { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); } .irpf-parametro fieldset, .irpf-quem fieldset { border: 0; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; } .irpf-parametro legend, .irpf-quem legend { font-weight: 600; font-size: 13px; padding: 0; } .irpf-aprov { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .irpf-aprov li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; } .irpf-honor { border: 1px dashed var(--borda); border-radius: 8px; padding: 8px 12px; color: var(--suave); background: var(--neutro); font-size: 13px; margin-top: 12px; } .irpf-agenda { list-style: none; margin: 0; padding: 0; } .irpf-agenda li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; } .irpf-agenda li:last-child { border-bottom: 0; } .irpf-agenda li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; } .irpf-agenda .data { flex: none; width: 86px; font-weight: 600; font-variant-numeric: tabular-nums; } .irpf-agenda small { display: block; color: var(--suave); } .irpf-arquivos { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; } .irpf-anexa { position: relative; margin-left: 8px; cursor: pointer; } .irpf-anexa input { position: absolute; width: 1px; height: 1px; opacity: 0; } .irpf-anexa:focus-within { outline: 2px solid var(--primaria); outline-offset: 2px; } .irpf-msgs { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .irpf-msgs li { border-radius: 10px; padding: 8px 10px; font-size: 13px; max-width: 92%; overflow-wrap: anywhere; white-space: pre-wrap; } .irpf-msgs li small { display: block; color: var(--suave); font-size: 11.5px; white-space: normal; } .irpf-msgs li.esc { background: var(--acento); align-self: flex-start; } .irpf-msgs li.pes { background: var(--neutro); align-self: flex-end; } .irpf-conversa { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 8px; } .irpf-param-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; } .irpf-param-grade dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; margin: 6px 0; } .irpf-param-grade dt { font-size: 11.5px; color: var(--suave); } .irpf-param-grade dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } .irpf-quem { border-top: 1px solid var(--borda); margin-top: 16px; padding-top: 4px; } .irpf-barras { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 640px; } .irpf-barras li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 13px; } .irpf-barras .b { height: 12px; border-radius: 3px; background: var(--neutro); overflow: hidden; } .irpf-barras .b i { display: block; height: 100%; background: var(--simples); } .irpf-barras .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .irpf-duas, .irpf-param-grade { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .irpf-item { grid-template-columns: minmax(0, 1fr); } .irpf-barras li { grid-template-columns: 120px minmax(0, 1fr) 30px; } .irpf-ano { min-width: 0; width: 100%; } .irpf-agenda .data { width: 74px; } } /* o Meu ambiente: celular primeiro (abas embaixo, botões grandes) */ .conteudo.meu-pagina { max-width: 560px; margin: 0 auto; padding-bottom: 76px; } .meu-topo { background: var(--primaria); color: var(--sobre-primaria); padding: 14px 16px 12px; border-radius: 12px 12px 0 0; } .meu-topo small { opacity: .85; } .meu-ola { font-size: 17px; font-weight: 600; } .meu-corpo { padding: 14px 0 20px; min-width: 0; } .meu-nav { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--painel-sombra); padding-bottom: env(safe-area-inset-bottom); } .meu-nav button { border: 0; background: none; padding: 8px 2px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--suave); min-height: 56px; } .meu-nav button[aria-selected="true"] { color: var(--primaria); font-weight: 600; box-shadow: inset 0 3px 0 var(--primaria); } .meu-ico { font-size: 18px; line-height: 1; } .meu-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 12px; min-width: 0; } .meu-cartao h3 { font-size: 15px; margin: 0 0 6px; } .meu-cartao label { display: block; margin-top: 10px; } .meu-cartao label.check { display: flex; margin-top: 4px; } .meu-cartao fieldset { border: 0; padding: 0; margin: 0; } .meu-alerta { border-color: var(--alerta); } .meu-aceite { border-color: var(--primaria); background: var(--acento); } .meu-lista { list-style: none; margin: 0; padding: 0; } .meu-lista li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); } .meu-lista li:last-child { border-bottom: 0; } .meu-lista li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; } .meu-lista small { display: block; color: var(--suave); font-size: 12px; } .meu-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--primaria); color: var(--primaria); background: none; border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 13px; white-space: nowrap; min-height: 40px; text-decoration: none; margin: 6px 6px 0 0; } .meu-grande { width: 100%; padding: 12px; font-size: 15px; border-radius: 10px; min-height: 48px; margin: 0 0 12px; } .meu-envio { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed var(--primaria); border-radius: 12px; padding: 18px 12px; text-align: center; color: var(--primaria); background: var(--acento); cursor: pointer; font-weight: 600; margin: 0 !important; } .meu-envio small { font-weight: 400; overflow-wrap: anywhere; } .meu-envio input { position: absolute; width: 1px; height: 1px; opacity: 0; } .meu-envio:focus-within { outline: 2px solid var(--primaria); outline-offset: 2px; } .meu-gcap { border-left: 4px solid var(--alerta); background: var(--alerta-fundo); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: 13px; margin-top: 10px; } .meu-gcap ul { margin: 6px 0 0; padding-left: 18px; } .meu-docs-ev { margin: 4px 0 0; padding-left: 18px; font-size: 13px; } .meu-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; } .meu-passos summary { cursor: pointer; color: var(--primaria); font-weight: 600; min-height: 40px; display: flex; align-items: center; } /* v1.31.2 — IRPF fase 3: os quadros, o comparativo, os informes e o relatório (web/irpf_quadros.js) */ .iq-secao { margin-top: 4px; } .iq-secao > .abas { margin: -4px 0 12px; flex-wrap: wrap; } .iq-topo { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; } .iq-quadro { border-top: 1px solid var(--borda); padding-top: 10px; margin-top: 12px; min-width: 0; } .iq-quadro h4 { margin: 0 0 6px; font-size: .95rem; } .iq-quadro h4 .dica { font-weight: 400; margin-left: 6px; } .iq-tabela td { vertical-align: top; } .iq-tabela td small, .iq-valor small { display: block; color: var(--suave); font-size: 12px; overflow-wrap: anywhere; } .iq-tabela tr.inativa td { color: var(--suave); text-decoration: line-through; text-decoration-thickness: 1px; } .iq-tabela tr.inativa td small, .iq-tabela tr.inativa td .selo { text-decoration: none; } .iq-valor { white-space: nowrap; font-variant-numeric: tabular-nums; } .iq-dois { display: inline-block; margin-right: 12px; } .iq-acoes { display: flex; flex-wrap: wrap; gap: 4px 10px; } .iq-ok { color: var(--ok) !important; } .iq-alertas { border: 1px solid var(--alerta); background: var(--alerta-fundo); border-radius: var(--raio); padding: 10px 12px; margin: 0 0 10px; font-size: 13px; } .iq-alertas.ok { border-color: var(--ok); background: var(--ok-fundo); } .iq-alertas ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .iq-alertas li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .iq-form { margin: 8px 0 12px; } .iq-form #iq-subtipo, .iq-form #iq-valores { display: contents; } .iq-dois-modelos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0; } .iq-modelo { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; min-width: 0; } .iq-modelo.recomendado { border: 2px solid var(--ok); background: var(--ok-fundo); } .iq-modelo h4 { margin: 0; } .iq-memoria { margin: 8px 0 10px; } .iq-memoria > div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--borda); font-size: 13px; } .iq-memoria dt small { display: block; color: var(--suave); font-size: 11.5px; } .iq-memoria dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .iq-memoria .forte { font-weight: 600; } .iq-resumo { font-weight: 600; margin: 8px 0; } .iq-alerta { color: var(--erro); font-weight: 700; } .iq-aviso { color: var(--alerta); font-weight: 600; } .iq-sub { margin: 18px 0 4px; font-size: 1.05rem; } .iq-relatorio { border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; background: var(--superficie); } .iq-relatorio header h3 { margin: 0 0 4px; } .iq-ficha { border-top: 1px solid var(--borda); padding: 8px 0; break-inside: avoid; } .iq-ficha h4 { margin: 0 0 6px; font-size: .95rem; } .iq-ficha ul { margin: 0; padding-left: 18px; } .meu-acoes { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 760px) { .iq-dois-modelos { grid-template-columns: minmax(0, 1fr); } .iq-valor { white-space: normal; } .tabela.pf-resp.iq-tabela tfoot { display: block; } .tabela.pf-resp.iq-tabela tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr); } .tabela.pf-resp.iq-tabela tfoot th { display: block; padding: 0; border: 0; } .tabela.pf-resp.iq-tabela td[colspan] { grid-column: 1 / -1; } .iq-relatorio .tabela { display: block; overflow-x: auto; } } @media print { body.iq-imprime * { visibility: hidden; } body.iq-imprime #irpf-relatorio, body.iq-imprime #irpf-relatorio * { visibility: visible; } body.iq-imprime #irpf-relatorio { position: absolute; left: 0; top: 0; width: 100%; border: 0; padding: 0; } } .meu-passos ol { margin: 4px 0 0; padding-left: 20px; font-size: 13px; } .meu-transm { border-top: 1px solid var(--borda); margin-top: 8px; padding-top: 8px; } .meu-transm small { display: block; color: var(--suave); } @media (max-width: 760px) { .conteudo.meu-pagina { padding-bottom: 8px; } .meu-topo { border-radius: 10px 10px 0 0; } .meu-nav { border-radius: 10px; } } /* v1.31.3 — IRPF fase 4: conferência, mensais, declaração e malha (web/irpf_fase4.js) */ .i4-conf-topo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 4px; } .i4-resumo { display: flex; flex-wrap: wrap; gap: 6px; } .i4-bloqueio label { display: flex; margin-top: 4px; } .i4-achados { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .i4-achado { border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: var(--raio); padding: 8px 12px; background: var(--superficie); min-width: 0; } .i4-achado.i4-g-ALTA { border-left-color: var(--erro); } .i4-achado.i4-g-MEDIA { border-left-color: var(--alerta); } .i4-achado-topo { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .i4-achado-txt { margin: 6px 0 4px; overflow-wrap: anywhere; } .i4-achado .i4-fund { margin: 0 0 4px; font-size: 12px; } .i4-achado .iq-acoes button { padding: 2px 0; } .i4-outros { margin-top: 10px; } .i4-outros summary { cursor: pointer; color: var(--primaria); font-weight: 500; } .i4-destaque { outline: 2px solid var(--alerta); outline-offset: 2px; } .i4-tabela td { vertical-align: top; white-space: normal; } .i4-tabela td small { display: block; color: var(--suave); font-size: 12px; overflow-wrap: anywhere; } .i4-tabela .iq-acoes { flex-direction: column; align-items: flex-start; gap: 2px; } .i4-vendas { list-style: none; margin: 8px 0; padding: 0; } .i4-gcap-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; } .i4-gcap-grade h5, .i4-conferencia-pdf h5, .iq-form h5 { margin: 8px 0 4px; font-size: .9rem; } .i4-verif { list-style: none; padding-left: 0; } .i4-verif li { padding: 2px 0; } .i4-rv { border: 1px solid var(--borda); border-radius: var(--raio); padding: 6px 10px 8px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 16px; } .i4-rv legend { font-weight: 600; font-size: 13px; padding: 0 4px; } .i4-rv .grade { flex-basis: 100%; } .i4-ler { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 6px 0; } .i4-ler label:first-child { min-width: 200px; } .i4-campos input, .i4-campos select { width: 100%; min-width: 0; } .i4-trecho { font-family: monospace; font-size: 11.5px; overflow-wrap: anywhere; } .i4-pacote { border: 1px dashed var(--borda); border-radius: var(--raio); padding: 8px 12px; margin-top: 10px; font-size: 13px; } @media (max-width: 760px) { .i4-gcap-grade { grid-template-columns: minmax(0, 1fr); } .i4-achado .iq-acoes { gap: 2px 12px; } } /* v1.31.4 — IRPF fase 5: tributação mínima, exterior, rural, espólio e residência (web/irpf_fase5.js) */ .i5-tabela td { vertical-align: top; } .i5-tabela td small { display: block; color: var(--suave); font-size: 12px; overflow-wrap: anywhere; font-weight: normal; } .i5-tabela input { width: 9.5em; max-width: 100%; } .i5-tabela .iq-valor { white-space: nowrap; } .i5-resumo { margin: 8px 0; } .i5-resumo .forte dd { font-weight: 700; } .i5-empresas { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 10px; } .i5-empresas .grade output { display: block; padding: 6px 0; font-variant-numeric: tabular-nums; } .i5-nova-emp { align-items: end; margin-bottom: 10px; } .i5-nova-emp button { justify-self: start; } .i5-fora, .i5-lanc { margin: 6px 0 12px; } .i5-a-conferir li { font-size: 12.5px; } .iq-memoria .cinza { color: var(--suave); } /* v1.31.12: 🔍 Pesquisar nos vínculos (Fornecedor × produto, Cliente × produto) */ .pesq-abre{align-self:flex-start;padding:2px 6px;font-size:12px} .pesq-caixa{border:1px solid var(--borda);border-radius:8px;padding:10px;margin:6px 0 10px;background:var(--superficie)} .pesq-barra{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pesq-barra input[type=search]{flex:1;min-width:180px} .pesq-tabela tr[data-n]{cursor:pointer} .pesq-tabela tr[data-n]:hover,.pesq-tabela tr[data-n]:focus{background:var(--hover);outline:none} .pesq-caixa .tabela-wrap{max-height:280px;overflow-y:auto} /* v1.31.13: título da coluna Código · Referência · Código de barras um embaixo do outro (pedido do dono) */ #tab-itens th.th-pilha span, #tab-parceiros th.th-pilha span { display: block; line-height: 1.3; } #tab-itens th.th-pilha span + span, #tab-parceiros th.th-pilha span + span { font-weight: 500; font-size: 12px; color: var(--suave); } /* v1.31.20: marcar linhas da Gestão de Documentos para retirar */ .doc-grade th.doc-marca, .doc-grade td.doc-marca { width: 28px; text-align: center; } .doc-grade th.doc-marca .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .doc-marcadas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; } /* v1.31.22: o quadro de conferência do destinatário */ .qd { margin: 6px 0 16px; } .qd h4 { margin: 0 0 6px; } .qd-conclusao { margin: 4px 0 8px; } .qd-tab td, .qd-tab th { font-size: 13px; } .mov-ap-conf { color: var(--suave); } /* v1.31.24: Produto › Duplicar — o quadro da cópia, abaixo dos botões */ .dup-item { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--borda, #d0d7de); border-radius: 8px; } /* v1.31.26: Gestor › Parceiros de negócio — os quadros de números e o mapa por cidade */ .gp-quebras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; } .gp-quebra { border: 1px solid var(--borda, #d0d7de); border-radius: 8px; padding: 10px 12px; } .gp-quebra h4 { margin: 0 0 6px; font-size: 13px; } .gp-quebra ul { list-style: none; margin: 0; padding: 0; } .gp-quebra li { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; } .gp-quebra li span:first-child { flex: 1; } .gp-mapa { height: 460px; border-radius: 8px; border: 1px solid var(--borda, #d0d7de); margin: 8px 0; } .gp-mapa-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .gp-legenda { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; } .gp-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; } @media (max-width: 600px) { .gp-mapa { height: 320px; } } /* v1.31.27: Gestor › Bancos — vários logos de uma vez */ .acoes-cabeca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .gbc-lote-res { border: 1px solid var(--borda, #d0d7de); border-radius: 8px; padding: 8px 12px; margin: 8px 0; } .gbc-lote-res ul { margin: 4px 0 8px 18px; padding: 0; font-size: 13px; } /* v1.31.28: Gestão NF/XML › Recupera XML — a faixa nas Entradas e os painéis (configurar, resumos, histórico) */ .rec-faixa { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 12px; margin: 8px 0; border: 1px solid var(--borda, #d0d7de); border-radius: 8px; font-size: 13px; } .rec-faixa .rec-titulo { font-weight: 600; } .rec-faixa .rec-acoes { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rec-faixa > p { flex-basis: 100%; margin: 0; } .rec-config { border: 1px solid var(--borda, #d0d7de); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; } .rec-tab input[type=date] { max-width: 150px; } .rec-chave { font-size: 11px; word-break: break-all; } /* v1.31.38: a imagem dos grupos e subgrupos do plano financeiro */ .fin-ico { width: 18px; height: 18px; vertical-align: -4px; } .fin-ico.nat-RECEITA { color: #1a7f37; } .fin-ico.nat-DESPESA { color: #b42318; } .fin-ico.nat-OUTRO { color: #1d4ed8; } .fin-ico.nat-ADIANTAMENTO { color: #b54708; } .fin-ico.nat-TRANSFERENCIA { color: #6b7280; } .fin-icones { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--painel-borda, #ddd); border-radius: var(--raio, 6px); padding: 8px; margin: 8px 0; } .fin-icones legend { padding: 0 4px; font-size: .9em; } .fin-ico-op { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; } .fin-ico-op input { position: absolute; opacity: 0; pointer-events: none; } .fin-ico-op:has(input:checked) { border-color: var(--primaria, #1d4ed8); background: var(--explica, #f3f6fb); } .fin-ico-op:has(input:focus-visible) { outline: 2px solid var(--primaria, #1d4ed8); } .fin-ico-op .fin-ico { width: 22px; height: 22px; } .fin-ico-op .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-tema="escuro"] .fin-ico.nat-RECEITA { color: #4ade80; } :root[data-tema="escuro"] .fin-ico.nat-DESPESA { color: #f87171; } :root[data-tema="escuro"] .fin-ico.nat-OUTRO { color: #93c5fd; } :root[data-tema="escuro"] .fin-ico.nat-ADIANTAMENTO { color: #fbbf24; } :root[data-tema="escuro"] .fin-ico.nat-TRANSFERENCIA { color: #9ca3af; } :root[data-tema="contraste"] .fin-ico { color: currentColor; } .fin-dobra { border: 0; background: none; padding: 0 2px; margin-right: 2px; cursor: pointer; color: inherit; vertical-align: -3px; } .fin-dobra .seta { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s; } .fin-dobra.fechado .seta { transform: rotate(0deg); } .fin-dobra-vazio { display: inline-block; width: 18px; } .fin-dobras-barra { margin: 4px 0; gap: 12px; }