/* Tokens de cor (18/08/2026) - tema claro/escuro. Todo o resto do arquivo usa var(--...) em vez de cor fixa, então o tema muda só trocando os valores aqui (ver btn-tema em app.js, que alterna html[data-theme]). Paleta clara é a mesma que o projeto já usava antes deste campo existir. */ :root { --cor-fundo: #f6f7f9; --cor-fundo-cartao: #ffffff; --cor-texto: #111826; --cor-texto-secundario: #48526a; --cor-texto-suave: #727d92; --cor-borda: #e4e7ee; --cor-borda-suave: #eef0f4; --cor-input-borda: #d3d8e2; --cor-primaria: #1b2a4a; --cor-primaria-hover: #2c3f66; --cor-primaria-texto: #ffffff; /* Cor de destaque - usada em TEXTO sobre fundo de cartão (legend, links, valores de card, botão secundário, foco de teclado), nunca como fundo. Redesenho (ago/2026): a identidade ganhou um acento esmeralda; este token passou de azul-marinho para o esmeralda escuro, legível nos dois temas. O fundo/shell continua no azul-marinho de --cor-primaria. */ --cor-destaque: #0c7d5e; /* Acento esmeralda - a cor de ação/positivo do redesenho. --cor-acento é o tom cheio (fundo de CTA), --cor-acento-forte o de hover/texto. */ --cor-acento: #0f9d76; --cor-acento-forte: #0c7d5e; --cor-acento-fundo: #e8f7f1; --cor-acento-borda: #cdece0; --cor-secundario-fundo: #eef2f8; --cor-secundario-fundo-hover: #e2e8f2; --cor-secundario-borda: #d5dbe6; --cor-sucesso-fundo: #e8f7f1; --cor-sucesso-texto: #0c7d5e; --cor-sucesso-borda: #cdece0; --cor-erro-fundo: #fdecec; --cor-erro-texto: #c0362c; --cor-erro-borda: #f2c7c3; --cor-aviso-fundo: #fdf4e4; --cor-aviso-texto: #b7791f; --cor-aviso-borda: #f3dcae; --cor-badge-producao-fundo: #fdecec; --cor-badge-producao-texto: #c0362c; --cor-badge-producao-borda: #f2c7c3; --cor-badge-homologacao-fundo: #fdf4e4; --cor-badge-homologacao-texto: #b7791f; --cor-badge-homologacao-borda: #f3dcae; --sombra-cartao: 0 1px 2px rgba(20, 33, 61, 0.06), 0 10px 24px -14px rgba(20, 33, 61, 0.12); --sombra-flutuante: 0 10px 28px -10px rgba(20, 33, 61, 0.2); --sombra-modal: 0 24px 56px -20px rgba(20, 33, 61, 0.34); --overlay-modal: rgba(17, 24, 38, 0.5); /* Tipografia do redesenho: Newsreader (títulos, editorial), IBM Plex Sans (interface) e IBM Plex Mono (chave de acesso, valores alinhados). As fontes vêm do Google Fonts no do index.html; os fallbacks têm métrica próxima pra não "pular" enquanto carregam. */ --fonte-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif; --fonte-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --raio-cartao: 12px; --raio-controle: 9px; --raio-campo: 8px; /* Largura máxima do conteúdo dentro de
(17/09/2026 - antes era um 1180px fixo, que sobrava muito espaço vazio nas laterais em monitor grande: 1920px de tela já deixava ~490px em branco, um ultrawide de 3440px deixava mais de 2000px). 1920px cobre folgado a esmagadora maioria das telas reais (notebook/desktop até Full HD) sem cortar nada, e ainda segura um teto sensato pra ultrawide/4K não esticar formulário e tabela a ponto de ficar difícil de ler. */ --largura-max-conteudo: 1920px; /* Barra lateral de navegação (redesenho 2/4) - azul-marinho mais fundo que o --cor-primaria; a shell é a única parte "escura" no tema claro. */ --cor-sidebar: #14213d; --cor-sidebar-texto: #c3cde0; --cor-sidebar-suave: #7683a6; --cor-sidebar-avatar: #3a5080; /* Chip "Transmitida" (azul info) - redesenho 3/4. */ --cor-chip-info-texto: #2f5bd0; --cor-chip-info-fundo: #eaf0fc; --cor-chip-info-borda: #d3e0f7; } /* Segue a preferência do sistema quando o usuário nunca escolheu um tema manualmente (sem atributo data-theme ainda - ver app.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cor-fundo: #10151f; --cor-fundo-cartao: #1a2130; --cor-texto: #e7e9ee; --cor-texto-secundario: #a9afbc; --cor-texto-suave: #8b91a0; --cor-borda: #313a4d; --cor-borda-suave: #2a3242; --cor-input-borda: #3a4459; --cor-primaria: #223159; --cor-primaria-hover: #2f4472; --cor-primaria-texto: #f2f4f8; --cor-destaque: #4fd0a6; --cor-acento: #17b98c; --cor-acento-forte: #4fd0a6; --cor-acento-fundo: #123a2c; --cor-acento-borda: #1f5744; --cor-sidebar: #171f30; --cor-sidebar-texto: #aeb9d4; --cor-sidebar-suave: #7683a6; --cor-sidebar-avatar: #2f4472; --cor-chip-info-texto: #9db8f2; --cor-chip-info-fundo: #1a2744; --cor-chip-info-borda: #2b3f6b; --cor-secundario-fundo: #232c3e; --cor-secundario-fundo-hover: #2b3549; --cor-secundario-borda: #3a4459; --cor-sucesso-fundo: #163524; --cor-sucesso-texto: #5fd3ab; --cor-sucesso-borda: #245c39; --cor-erro-fundo: #3a1b18; --cor-erro-texto: #ff9d92; --cor-erro-borda: #6b2b24; --cor-aviso-fundo: #3a2f0f; --cor-aviso-texto: #ffd166; --cor-aviso-borda: #6b551d; --cor-badge-producao-fundo: #3a1b18; --cor-badge-producao-texto: #ff9d92; --cor-badge-producao-borda: #6b2b24; --cor-badge-homologacao-fundo: #3a2f0f; --cor-badge-homologacao-texto: #ffd166; --cor-badge-homologacao-borda: #6b551d; --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -16px rgba(0, 0, 0, 0.5); --sombra-flutuante: 0 12px 30px -10px rgba(0, 0, 0, 0.6); --sombra-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.65); --overlay-modal: rgba(0, 0, 0, 0.65); } } /* Escolha manual do usuário (botão de tema) - sempre vence a preferência do sistema, nos dois sentidos (claro forçado ou escuro forçado). */ :root[data-theme="dark"] { --cor-fundo: #10151f; --cor-fundo-cartao: #1a2130; --cor-texto: #e7e9ee; --cor-texto-secundario: #a9afbc; --cor-texto-suave: #8b91a0; --cor-borda: #313a4d; --cor-borda-suave: #2a3242; --cor-input-borda: #3a4459; --cor-primaria: #223159; --cor-primaria-hover: #2f4472; --cor-primaria-texto: #f2f4f8; --cor-destaque: #4fd0a6; --cor-acento: #17b98c; --cor-acento-forte: #4fd0a6; --cor-acento-fundo: #123a2c; --cor-acento-borda: #1f5744; --cor-sidebar: #171f30; --cor-sidebar-texto: #aeb9d4; --cor-sidebar-suave: #7683a6; --cor-sidebar-avatar: #2f4472; --cor-chip-info-texto: #9db8f2; --cor-chip-info-fundo: #1a2744; --cor-chip-info-borda: #2b3f6b; --cor-secundario-fundo: #232c3e; --cor-secundario-fundo-hover: #2b3549; --cor-secundario-borda: #3a4459; --cor-sucesso-fundo: #163524; --cor-sucesso-texto: #5fd3ab; --cor-sucesso-borda: #245c39; --cor-erro-fundo: #3a1b18; --cor-erro-texto: #ff9d92; --cor-erro-borda: #6b2b24; --cor-aviso-fundo: #3a2f0f; --cor-aviso-texto: #ffd166; --cor-aviso-borda: #6b551d; --cor-badge-producao-fundo: #3a1b18; --cor-badge-producao-texto: #ff9d92; --cor-badge-producao-borda: #6b2b24; --cor-badge-homologacao-fundo: #3a2f0f; --cor-badge-homologacao-texto: #ffd166; --cor-badge-homologacao-borda: #6b551d; --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -16px rgba(0, 0, 0, 0.5); --sombra-flutuante: 0 12px 30px -10px rgba(0, 0, 0, 0.6); --sombra-modal: 0 28px 60px -20px rgba(0, 0, 0, 0.65); --overlay-modal: rgba(0, 0, 0, 0.65); } * { box-sizing: border-box; } body { font-family: var(--fonte-ui); margin: 0; background: var(--cor-fundo); color: var(--cor-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ Shell do app (redesenho 2/4) - barra lateral fixa de navegação + barra de topo fina, no lugar do
+ tira de abas. Os botões continuam sendo os mesmos [role="tab"] de antes (mesmos id/data-secao), só mudaram de lugar e de estilo - app.js não precisou de nada além de atualizar o título do topo. ============================================================ */ .app-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; } .barra-lateral { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--cor-sidebar); color: var(--cor-sidebar-texto); border-right: 1px solid rgba(0, 0, 0, 0.16); display: flex; flex-direction: column; gap: 18px; padding: 20px 14px; } .marca { display: flex; align-items: center; gap: 11px; padding: 4px 8px 2px; } .marca-icone { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--cor-acento); display: grid; place-items: center; } .marca-icone svg { width: 17px; height: 17px; } .marca-nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: 19px; color: #ffffff; letter-spacing: 0.2px; line-height: 1.1; } .marca-nome small { display: block; font-family: var(--fonte-ui); font-weight: 400; font-size: 10.5px; color: var(--cor-sidebar-suave); letter-spacing: 0.04em; margin-top: 2px; } .app-conteudo { display: flex; flex-direction: column; min-width: 0; } .topo { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--cor-fundo-cartao); border-bottom: 1px solid var(--cor-borda); } .topo-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; color: var(--cor-texto); } .topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; } .btn-icone { width: 34px; height: 34px; display: grid; place-items: center; font-size: 16px; line-height: 1; border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); background: var(--cor-fundo-cartao); color: var(--cor-texto-secundario); cursor: pointer; } .btn-icone:hover { background: var(--cor-secundario-fundo); } /* Títulos das seções e sub-seções em Newsreader - o tom editorial que diferencia o redesenho. A interface (labels, campos, botões) segue em IBM Plex Sans. */ section h2 { margin-top: 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 21px; letter-spacing: 0.2px; color: var(--cor-texto); } section h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px; color: var(--cor-texto); } .barra-lateral-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .usuario-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--cor-sidebar-avatar); display: grid; place-items: center; color: #ffffff; font-size: 11px; font-weight: 600; } .usuario-meta { min-width: 0; flex: 1; font-size: 12.5px; font-weight: 600; color: #e6ebf5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-sair { flex: none; font-size: 12px; font-weight: 600; color: var(--cor-sidebar-texto); background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--raio-campo); padding: 5px 10px; cursor: pointer; } .btn-sair:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Badge de ambiente (18/08/2026) - sempre visível no cabeçalho, pra nunca haver dúvida se o sistema está gravando os documentos como Homologação (teste) ou Produção - ver carregarBadgeAmbiente em app.js. */ /* Botão nativo, sem os resets de fundo/borda; o badge é agora um gatilho pra trocar de ambiente direto no cabeçalho (15/09/2026), sem precisar entrar em Empresas. */ .topo-ambiente-wrap { position: relative; } .badge-ambiente { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; } .topo-ambiente-lista { min-width: 160px; right: 0; left: auto; } .badge-ambiente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .badge-ambiente:empty { display: none; } .badge-ambiente.homologacao { background: var(--cor-badge-homologacao-fundo); color: var(--cor-badge-homologacao-texto); border-color: var(--cor-badge-homologacao-borda); } /* Seletor de empresa ativa no cabeçalho (15/09/2026) - "gatilho" pra trocar de empresa em qualquer aba, sem precisar rolar até Empresas. */ .topo-empresa { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid var(--cor-borda); } .topo-empresa-rot { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-suave); white-space: nowrap; } .topo-empresa-select-wrap { position: relative; } .topo-empresa-botao { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); background: var(--cor-fundo-cartao); color: var(--cor-texto); font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; max-width: 220px; } .topo-empresa-botao:hover { background: var(--cor-secundario-fundo); } .topo-empresa-botao span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topo-empresa-seta { flex: none; color: var(--cor-texto-suave); } .topo-empresa-lista { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; max-height: 320px; overflow-y: auto; background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 6px; z-index: 30; } .topo-empresa-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--raio-campo); background: none; text-align: left; cursor: pointer; color: var(--cor-texto); } .topo-empresa-item:hover { background: var(--cor-secundario-fundo); } .topo-empresa-item.ativo { background: var(--cor-acento-fundo); } .topo-empresa-item-nome { font-weight: 600; font-size: 0.85rem; } .topo-empresa-item-cnpj { font-size: 0.75rem; color: var(--cor-texto-suave); } .topo-empresa-vazio { margin: 0; padding: 10px; font-size: 0.82rem; color: var(--cor-texto-suave); } /* Antes era .secundario - promovido a .principal (17/09/2026, pedido do usuário) porque é um atalho de criação tão relevante quanto "+ Nova matriz"/"+ Emitir NF-e" (que já eram .principal), só que ficava discreto demais no cabeçalho. Mantém o tamanho compacto (não herda o padding/ margin-top do .principal padrão, que é grande demais pra caber ao lado do seletor de empresa). */ .topo-empresa-nova { padding: 5px 10px; font-size: 0.8rem; white-space: nowrap; margin-top: 0; } .topo-empresa-cnpj { font-family: var(--fonte-mono); font-size: 0.78rem; color: var(--cor-texto-secundario); white-space: nowrap; } @media (max-width: 980px) { .topo-empresa-rot, .topo-empresa-cnpj { display: none; } } /* Aviso de troca de empresa (15/09/2026) - flutua sobre o conteúdo, visível em QUALQUER aba (o seletor de empresa fica no cabeçalho, fora de qualquer seção) - sem isso, uma troca que falha (ex.: cadastro da empresa com campo inválido) não mostrava erro nenhum fora da aba Empresas. */ .topo-empresa-status { position: fixed; top: 64px; right: 24px; z-index: 60; max-width: 360px; padding: 10px 14px; border-radius: var(--raio-campo); font-size: 0.85rem; box-shadow: var(--sombra-cartao); border: 1px solid; } .topo-empresa-status.erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border-color: var(--cor-erro-borda); } .topo-empresa-status.sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); } .badge-ambiente.producao { background: var(--cor-badge-producao-fundo); color: var(--cor-badge-producao-texto); border-color: var(--cor-badge-producao-borda); } /* O botão de tema herda .btn-icone (topo). */ /* Tela de login/registro (16/08/2026) - ocupa a tela inteira até a sessão ser confirmada (ver verificarSessao em app.js); substituiu o antigo modal de API key compartilhada. */ .tela-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cor-fundo); padding: 24px; } .cartao-auth { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: 32px; max-width: 380px; width: 100%; box-shadow: var(--sombra-cartao); } .cartao-auth h1 { color: var(--cor-destaque); font-family: var(--fonte-titulo); font-weight: 600; font-size: 24px; margin: 0 0 24px; text-align: center; } .cartao-auth h2 { color: var(--cor-destaque); font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; margin: 0 0 12px; } .cartao-auth button.principal { width: 100%; } .troca-auth { text-align: center; font-size: 13px; color: var(--cor-texto-secundario); margin-top: 16px; } .troca-auth a { color: var(--cor-destaque); font-weight: 600; } .barra-lateral nav { display: flex; flex-direction: column; gap: 2px; } .nav-grupo { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cor-sidebar-suave); padding: 12px 10px 5px; } .nav-grupo:first-child { padding-top: 2px; } .barra-lateral nav [role="tab"] { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--raio-campo); background: transparent; color: var(--cor-sidebar-texto); font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; position: relative; } /* Contador de "Notas Rejeitadas" pendentes no menu lateral (17/09/2026) - só a quantidade que ainda precisa de ação (ver indicadoresNotasRejeitadas em notas-rejeitadas.ts) - some sozinho (hidden) quando chega a zero. */ .nav-badge { margin-left: auto; flex: none; background: var(--cor-erro-texto); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; } .nav-icone { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; } .barra-lateral nav [role="tab"]:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; } .barra-lateral nav [role="tab"].ativo { background: rgba(255, 255, 255, 0.09); color: #ffffff; font-weight: 600; } .barra-lateral nav [role="tab"].ativo::before { content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cor-acento); } main { padding: 28px 32px 44px; width: 100%; max-width: var(--largura-max-conteudo); } section { display: none; background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: 22px 24px; box-shadow: var(--sombra-cartao); } section.ativa { display: block; } fieldset { border: 1px solid var(--cor-borda); border-radius: var(--raio-controle); margin-bottom: 16px; padding: 14px 16px; } legend { font-weight: 600; color: var(--cor-destaque); } label { display: block; font-size: 13px; color: var(--cor-texto-secundario); margin-top: 8px; } input, select, textarea { width: 100%; padding: 8px 11px; margin-top: 2px; border: 1px solid var(--cor-input-borda); border-radius: var(--raio-campo); font-size: 14px; font-family: inherit; background: var(--cor-fundo-cartao); color: var(--cor-texto); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-acento); box-shadow: 0 0 0 3px rgba(15, 157, 118, 0.18); } .linha { display: flex; gap: 12px; flex-wrap: wrap; } .linha > div { flex: 1; min-width: 140px; } /* Campos de CNPJ/CPF (14/11 dígitos) - largura minima suficiente pra mostrar o numero inteiro sem rolar por dentro do input, mesmo dividindo a linha com outros campos. */ .campo-documento { min-width: 190px; font-variant-numeric: tabular-nums; } /* Coluna que combina o campo de documento com o botão "Buscar CNPJ" ao lado - precisa de espaço reservado pros dois juntos (input 190px + botão + gap), senão o flex space espreme o botão por baixo do campo. Seletor ".linha > .col-documento-busca" (2 classes) de propósito, pra ter mais especificidade que a regra ".linha > div" (1 classe + 1 tipo) e realmente sobrescrever o min-width/flex padrão da coluna. */ .linha > .col-documento-busca { /* input do CNPJ (190px) + gap + botão "Buscar CNPJ" (~110px) - com 280px o botão passava por baixo do campo seguinte (ex.: "Razão Social" na aba Emitir). 340px reserva os dois lado a lado com folga. */ min-width: 340px; flex-grow: 1.4; } /* Quando o CNPJ + "Buscar CNPJ" ficam sozinhos numa linha (aba Emitir), não deixa o bloco esticar pela largura toda do formulário. */ .col-documento-busca .linha-com-botao { max-width: 460px; } button.principal { background: var(--cor-primaria); color: var(--cor-primaria-texto); border: none; padding: 11px 22px; border-radius: var(--raio-controle); cursor: pointer; font-size: 14.5px; /* Negrito de verdade (700), acima do 600 do botão secundário (17/09/2026, pedido do usuário) - antes os dois tinham o mesmo peso e só se diferenciavam pela cor de fundo, então a ação principal de cada tela não se destacava o suficiente da secundária (ex.: "Salvar" vs "Cancelar"). */ font-weight: 700; margin-top: 16px; } button.principal:hover { background: var(--cor-primaria-hover); } button.secundario { background: var(--cor-secundario-fundo); color: var(--cor-destaque); border: 1px solid var(--cor-secundario-borda); padding: 8px 14px; border-radius: var(--raio-controle); cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 8px; } button.secundario:hover { background: var(--cor-secundario-fundo-hover); } /* "Excluir" nas tabelas (produtos, clientes, naturezas, matrizes) usava o mesmo .secundario neutro de "Editar" - sem diferença visual entre uma ação reversível e uma destrutiva (17/09/2026, pedido do usuário). Reaproveita os tokens de erro já usados nos avisos/validação do resto do app, em vez de inventar uma cor nova. Seletor por substring porque a ordem das classes varia entre os templates (`btn-excluir-x secundario` vs `secundario btn-excluir-x`). */ button[class*='btn-excluir-'].secundario { color: var(--cor-erro-texto); border-color: var(--cor-erro-borda); } button[class*='btn-excluir-'].secundario:hover { background: var(--cor-erro-fundo); } .item-linha, .pagamento-linha { border: 1px solid var(--cor-borda-suave); border-radius: 6px; padding: 10px; margin-bottom: 10px; position: relative; } /* Bloco recolhível "ICMS específico deste item" na linha de item (01/09/2026) - fechado por padrão pra não poluir quem usa só a Tributação geral. */ .item-icms-avancado { margin-top: 8px; border-top: 1px dashed var(--cor-borda-suave); padding-top: 4px; } .item-icms-avancado > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cor-texto-suave, inherit); padding: 4px 0; } .item-icms-avancado[open] > summary { margin-bottom: 6px; } .item-icms-avancado .aviso-inline { display: block; margin-top: 4px; color: var(--cor-texto-suave, inherit); font-size: 12px; line-height: 1.4; } .item-icms-avancado label > small { font-weight: 400; color: var(--cor-texto-suave, inherit); } .btn-remover-linha { position: absolute; top: 8px; right: 8px; background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border: 1px solid var(--cor-erro-borda); border-radius: 4px; cursor: pointer; font-size: 12px; padding: 2px 8px; } /* Dica curta abaixo de um campo (ex.: RNTRC do MDF-e, 02/09/2026). */ .campo-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--cor-texto-suave); } #resultado-emissao { margin-top: 16px; padding: 12px; border-radius: 6px; font-size: 14px; white-space: pre-wrap; } #resultado-emissao.sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border: 1px solid var(--cor-sucesso-borda); } #resultado-emissao.erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border: 1px solid var(--cor-erro-borda); } .links-arquivos { margin: 8px 0; display: flex; gap: 12px; flex-wrap: wrap; } .links-arquivos a { color: var(--cor-destaque); font-weight: 600; text-decoration: underline; } /* Bloco "Transmitir p/ SEFAZ agora" no cartão de sucesso da emissão da NF-e (27/08/2026) - separado dos links por uma linha, com o aviso de irreversibilidade logo abaixo do botão. */ .bloco-transmissao { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cor-sucesso-borda); } .bloco-transmissao #resultado-transmissao-sefaz { margin-top: 8px; font-size: 13px; } .bloco-transmissao #resultado-transmissao-sefaz.sucesso { color: var(--cor-sucesso-texto); } .bloco-transmissao #resultado-transmissao-sefaz.erro { color: var(--cor-erro-texto); } /* "+ Nova Nota Fiscal" no cartão de sucesso (28/08/2026) - zera o formulário e volta ao passo 1. Bloco próprio, separado do conteúdo acima. */ .btn-nova-nota { display: block; margin-top: 14px; } /* Bloco
recolhível genérico (28/08/2026, generalizado 11/09/2026) - usado pra conteúdo opcional/avançado que não precisa ficar sempre visível (lista de 27 UFs de ICMS, volume transportado etc.). Fechado por padrão. */ .bloco-recolhivel > summary { cursor: pointer; padding: 8px 0; font-weight: 600; color: var(--cor-texto-suave, inherit); } .bloco-recolhivel[open] > summary { margin-bottom: 8px; } /* Envolve as tabelas que podem ficar mais largas que a secao (ex.: coluna de chave de acesso, com 44 caracteres) - sem isso, o conteudo extra "vaza" para fora do cartao branco em vez de ficar dentro dele com rolagem horizontal propria. */ .tabela-scroll { overflow-x: auto; background: var(--cor-fundo-cartao); } table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 14px; } table th, table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cor-borda-suave); } /* Cabeçalho de tabela discreto e maiúsculo (redesenho 3/4). */ thead th { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-suave); border-bottom: 1px solid var(--cor-borda); } tbody tr:hover td { background: var(--cor-fundo); } /* Chip de situação (Notas Recentes) - ponto colorido + rótulo. */ .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .chip-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip-navy { color: var(--cor-primaria); background: var(--cor-secundario-fundo); border-color: var(--cor-secundario-borda); } .chip-info { color: var(--cor-chip-info-texto); background: var(--cor-chip-info-fundo); border-color: var(--cor-chip-info-borda); } .chip-ok { color: var(--cor-acento-forte); background: var(--cor-acento-fundo); border-color: var(--cor-acento-borda); } .chip-erro { color: var(--cor-erro-texto); background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); } .chip-neutro { color: var(--cor-texto-suave); background: var(--cor-secundario-fundo); border-color: var(--cor-borda); } /* "Rejeitada - pronta p/ retransmissão" (17/09/2026, Notas Rejeitadas) - diferente de "aguardando correção" (chip-erro): o dado está certo, só precisa reenviar o mesmo XML. */ .chip-aviso { color: var(--cor-aviso-texto); background: var(--cor-aviso-fundo); border-color: var(--cor-aviso-borda); } /* Células da linha de nota (Notas Recentes / busca no Relatório). */ .celula-data { white-space: nowrap; font-variant-numeric: tabular-nums; } .celula-tipo { font-weight: 600; color: var(--cor-texto); white-space: nowrap; } .celula-chave { font-family: var(--fonte-mono); font-size: 12px; letter-spacing: -0.2px; color: var(--cor-texto-secundario); white-space: nowrap; } .celula-doc a { font-weight: 600; color: var(--cor-destaque); margin-right: 12px; white-space: nowrap; } .celula-acoes { text-align: right; white-space: nowrap; } .col-acoes { text-align: right; } /* Notas Recentes: a tabela tem 7 colunas. Sem min-width: max-content ela se ajusta ao espaço; a chave de acesso agora vem resumida (começo…fim, valor inteiro no title - ver celulaChaveHtml), então não precisa mais quebrar caractere a caractere pra evitar rolagem horizontal. */ @media (min-width: 721px) { #secao-notas .tabela-scroll > table { min-width: 0; } body { overflow-x: clip; } /* Notas Recentes cabe na tela: a lista rola DENTRO da própria caixa, a janela não precisa rolar. Cabeçalho fixo ao rolar a lista. */ #secao-notas .tabela-scroll { max-height: calc(100vh - 230px); overflow-y: auto; } #secao-notas thead th { position: sticky; top: 0; background: var(--cor-fundo-cartao); z-index: 1; } #secao-notas td { padding-top: 7px; padding-bottom: 7px; } } /* Emitente / Destinatário (Notas Recentes) numa linha só - nome completo no title ao passar o mouse. Sem isso "GLEICIANE ROCHA CABRAL DE FREITAS LTDA" quebra em 4 linhas e estica a linha da tabela. */ .celula-parte { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; } .card { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); padding: 16px 18px; box-shadow: var(--sombra-cartao); } .card .rotulo { font-size: 12px; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: 8px; } .card .valor { display: block; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; letter-spacing: 0.3px; color: var(--cor-texto); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sugestoes-ncm { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); box-shadow: var(--sombra-flutuante); max-height: 220px; overflow-y: auto; } .sugestoes-ncm:empty { display: none; } .sugestoes-ncm div { padding: 6px 8px; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--cor-borda-suave); } .sugestoes-ncm div:hover { background: var(--cor-secundario-fundo); } .sugestoes-ncm .ncm-codigo { font-weight: bold; color: var(--cor-destaque); } /* Lista de produtos na linha de item (Emitir) - descrição completa em destaque, sem cortar; o NCM fica discreto ao lado. */ .sugestoes-ncm .sugestao-descricao { color: var(--cor-texto); } .sugestoes-ncm small { color: var(--cor-texto-suave); } #sugestoes-produto-flutuante div { font-size: 13px; line-height: 1.4; white-space: normal; } /* Variante flutuante: usada pela busca de produtos salvos nas linhas de item (Emitir), onde nao ha um ancestral com position:relative pronto - posicionada via JS (getBoundingClientRect do campo ativo) em vez de herdar a posicao de um container pai. */ .sugestoes-flutuante { position: fixed; top: 0; left: 0; display: none; } .linha-com-botao { display: flex; gap: 6px; align-items: flex-start; } .linha-com-botao input { flex: 1; } .linha-com-botao button { margin-top: 2px; white-space: nowrap; } #resultado-cliente, #resultado-produto, #resultado-busca-cnpj-nfe:not(:empty), #resultado-cancelamento:not(:empty), #resultado-certificado:not(:empty), #status-certificado:not(:empty), #resultado-configuracoes-emitente:not(:empty), #resultado-dados-cadastrais:not(:empty), #resultado-trocar-senha:not(:empty), #resultado-esqueci-senha:not(:empty), #resultado-redefinir-senha:not(:empty) { margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 14px; } #resultado-cliente.sucesso, #resultado-produto.sucesso, #resultado-busca-cnpj-nfe.sucesso, #resultado-cancelamento.sucesso, #resultado-certificado.sucesso, #status-certificado.sucesso, #resultado-configuracoes-emitente.sucesso, #resultado-dados-cadastrais.sucesso, #resultado-trocar-senha.sucesso, #resultado-esqueci-senha.sucesso, #resultado-redefinir-senha.sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border: 1px solid var(--cor-sucesso-borda); } #resultado-cliente.erro, #resultado-produto.erro, #resultado-busca-cnpj-nfe.erro, #resultado-cancelamento.erro, #resultado-certificado.erro, #status-certificado.erro, #aviso-certificado.erro, #resultado-configuracoes-emitente.erro, #resultado-dados-cadastrais.erro, #resultado-trocar-senha.erro, #resultado-esqueci-senha.erro, #resultado-redefinir-senha.erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border: 1px solid var(--cor-erro-borda); } .modal-overlay { position: fixed; inset: 0; background: var(--overlay-modal); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-caixa { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); padding: 22px; max-width: 420px; width: 90%; box-shadow: var(--sombra-modal); } .modal-caixa p { margin-top: 0; font-size: 14px; color: var(--cor-texto); } .modal-caixa .linha-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; } .aviso { background: var(--cor-aviso-fundo); border: 1px solid var(--cor-aviso-borda); color: var(--cor-aviso-texto); padding: 10px 14px; border-radius: var(--raio-campo); font-size: 13px; margin-bottom: 16px; } /* Separa sub-áreas dentro de uma mesma aba (16/08/2026) - Produtos e Tributação compartilham a aba "Produtos / Tributação"; Configurações (18/08/2026) reaproveita o mesmo padrão para Emitente/Numeração/Preferências. */ .divisoria-secao { border: none; border-top: 1px solid var(--cor-borda); margin: 32px 0; } /* Stepper do formulário de emissão (Emitente/Destinatário/Itens/Operação/ Revisão, 24/08/2026) - navegação puramente visual em cima do mesmo
de sempre (nomes de campo intactos); [data-passo] some/aparece via JS (ver mostrarPassoNfe em app.js). Nenhum campo perde `required` ao ficar oculto porque cada passo só é validado quando é a etapa ativa (validarPassoAtualNfe), então o navegador nunca tenta focar um campo `required` escondido de um passo anterior. */ [data-passo] { display: none; } [data-passo].passo-ativo { display: block; } /* Stepper (redesenho 3/4) - passou das "pílulas" numeradas para pontos ligados por um traço: etapa concluída vira um check esmeralda, a atual fica em azul-marinho, as próximas ficam apagadas. Só HTML + CSS - o mostrarPassoNfe continua só alternando .passo-atual / .passo-concluido. */ .stepper-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-bottom: 24px; } .stepper-item { display: inline-flex; align-items: center; gap: 9px; padding: 6px 6px; border: none; background: transparent; color: var(--cor-texto-suave); font-family: inherit; font-size: 13px; cursor: pointer; } .stepper-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--cor-input-borda); background: var(--cor-fundo-cartao); font-size: 12px; font-weight: 600; line-height: 1; color: var(--cor-texto-suave); } .stepper-item:not(:last-child)::after { content: ""; flex: none; width: 34px; height: 1.5px; margin: 0 6px; background: var(--cor-input-borda); } .stepper-item.passo-atual .stepper-num { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-primaria-texto); } .stepper-item.passo-atual .stepper-rot { color: var(--cor-texto); font-weight: 600; } .stepper-item.passo-concluido .stepper-num { background: var(--cor-acento); border-color: var(--cor-acento); font-size: 0; } .stepper-item.passo-concluido .stepper-num::before { content: "\2713"; font-size: 13px; font-weight: 700; color: #ffffff; } .stepper-item.passo-concluido .stepper-rot { color: var(--cor-texto-secundario); } .stepper-item.passo-concluido::after { background: var(--cor-acento); } .stepper-navegacao { display: flex; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cor-borda-suave); } /* Avançar etapa = ação positiva -> acento esmeralda (o "Voltar" fica discreto). Só cor; app.js continua alternando display/visibility. */ #nfe-passo-continuar { background: var(--cor-acento); color: #ffffff; border-color: var(--cor-acento); } #nfe-passo-continuar:hover { background: var(--cor-acento-forte); } /* Resumo da nota ao vivo (redesenho 4/4) - painel à direita do formulário de NF-e que acompanha o preenchimento. Abaixo de 1100px vai pro topo, em largura cheia. */ .nfe-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .nfe-passos { min-width: 0; } .nfe-resumo { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 16px 18px; } .resumo-titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; color: var(--cor-texto); } .resumo-linhas { margin: 2px 0 0; } .resumo-linha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--cor-texto-secundario); } .resumo-linha dt { margin: 0; } .resumo-linha dd { margin: 0; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; color: var(--cor-texto); } .resumo-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--cor-borda-suave); } .resumo-total span { font-size: 12.5px; font-weight: 600; color: var(--cor-texto-suave); } .resumo-total strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 22px; letter-spacing: 0.3px; color: var(--cor-texto); font-variant-numeric: tabular-nums; } .resumo-estado { margin: 0; font-size: 11.5px; color: var(--cor-texto-suave); min-height: 1.2em; } .resumo-partes { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--cor-borda-suave); } .resumo-parte { font-size: 12px; color: var(--cor-texto-secundario); } .resumo-parte b { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-suave); margin-bottom: 2px; } .resumo-previa { display: block; margin-top: 4px; padding: 9px 14px; text-align: center; text-decoration: none; font-size: 13px; font-weight: 600; border-radius: var(--raio-controle); background: var(--cor-secundario-fundo); color: var(--cor-destaque); border: 1px solid var(--cor-secundario-borda); cursor: pointer; } .resumo-previa:hover { background: var(--cor-secundario-fundo-hover); } .resumo-previa[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } @media (max-width: 1099px) { .nfe-corpo { grid-template-columns: 1fr; } .nfe-resumo { position: static; order: -1; } } .cartao-revisao { background: var(--cor-secundario-fundo); border: 1px solid var(--cor-secundario-borda); border-radius: var(--raio-cartao); padding: 16px 18px; margin: 16px 0; font-size: 14px; } .cartao-revisao table { width: 100%; border-collapse: collapse; margin-top: 8px; } .cartao-revisao th, .cartao-revisao td { text-align: left; padding: 4px 8px; font-size: 13px; } .cartao-revisao .linha-total { font-weight: 600; border-top: 1px solid var(--cor-secundario-borda); } /* ============================================================ Profissionalização do frontend - reconciliado com o stepper (feat/reconciliacao-frontend). Blocos abaixo NÃO existiam na base do stepper; a barra-resumo-emissao e a dica-cfop da branch wip foram descartadas (o stepper e o CFOP automático do backend já cobrem). ============================================================ */ /* --- Foco visível de teclado --- */ :focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; border-radius: 3px; } .barra-lateral nav [role="tab"]:focus-visible { outline-offset: -2px; } /* --- Estado vazio de tabela/lista --- */ .estado-vazio { padding: 28px 16px; text-align: center; color: var(--cor-texto-suave); font-size: 14px; } /* --- Cartão de resultado da emissão --- */ .resultado-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 17px; margin-bottom: 8px; } #resultado-emissao.sucesso .resultado-titulo::before { content: "\2713"; display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--cor-acento); color: #ffffff; font-size: 12px; font-weight: 700; } .resultado-chave-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .resultado-chave-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-secundario); } .resultado-chave-valor { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: 13px; word-break: break-all; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); padding: 4px 8px; } .resultado-chave-linha button { margin-top: 0; } .resultado-json { margin-top: 10px; font-size: 13px; } .resultado-json summary { cursor: pointer; color: var(--cor-destaque); font-weight: 600; } .resultado-json pre { margin: 8px 0 0; padding: 10px; background: var(--cor-fundo); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-campo); overflow-x: auto; font-size: 12px; font-family: var(--fonte-mono); } /* --- Validação inline dos formulários --- */ .campo-invalido { border-color: var(--cor-erro-texto) !important; outline: none; } .campo-invalido:focus-visible { outline: 2px solid var(--cor-erro-texto); outline-offset: 2px; } .mensagem-erro-campo { color: var(--cor-erro-texto); font-size: 12px; margin-top: 3px; } /* --- Filtro/paginação de listas --- */ .controles-lista { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; } .controles-lista input { flex: 1; min-width: 200px; width: auto; } .controles-lista .contagem-lista { font-size: 13px; color: var(--cor-texto-suave); white-space: nowrap; } /* Grade de filtros (Notas Emitidas, 15/09/2026) - Período/Tipo/Status numa linha estreita e Cliente numa coluna mais larga, cada um com rótulo em versalete acima do select (mesmo padrão de .dfe-filtros). */ .controles-lista-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; margin-bottom: 12px; } .campo-filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .campo-filtro-rot { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-suave); } .campo-filtro select, .campo-filtro input { width: 100%; } .campo-filtro-cliente { grid-column: span 2; } @media (max-width: 480px) { .campo-filtro-cliente { grid-column: span 1; } } .btn-mostrar-mais { display: block; margin: 12px auto 0; } /* --- Central DFe --- */ .dfe-intro { max-width: 70ch; color: var(--cor-texto-secundario); font-size: 14px; line-height: 1.55; margin: -4px 0 16px; } .dfe-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .dfe-status { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); background: var(--cor-fundo-sutil, var(--cor-chip-info-fundo)); font-size: 13px; color: var(--cor-texto-secundario); } .dfe-status:empty { display: none; } .dfe-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 12px; } .dfe-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cor-texto-suave); } .dfe-filtros select { width: auto; min-width: 170px; } .dfe-filtros .contagem-lista { margin-left: auto; font-size: 13px; color: var(--cor-texto-suave); white-space: nowrap; } .dfe-so-resumo { font-size: 12px; color: var(--cor-texto-suave); font-style: italic; } /* --- Central DFe: 3 sub-abas (28/08/2026) --- */ .dfe-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cor-borda); margin-bottom: 18px; } .dfe-subtab { width: auto; background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--cor-texto-suave); cursor: pointer; } .dfe-subtab:hover { color: var(--cor-texto); } .dfe-subtab.ativo { color: var(--cor-destaque); border-bottom-color: var(--cor-acento); } .dfe-painel { display: none; } .dfe-painel.ativo { display: block; } /* Toggle "Ver: só meu / tudo" - admin, multitenant fatia 6b. Aparece nas telas Notas Recentes / Relatório / Central DFe / Financeiro e liga o ?escopo=todos (honrado só p/ papel=admin). Some pra quem não é admin. */ .toggle-escopo { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-fundo-cartao); } .toggle-escopo-rotulo { padding: 0 6px 0 8px; font-size: 12px; font-weight: 600; color: var(--cor-texto-suave); } .toggle-escopo-opcao { width: auto; padding: 4px 12px; border: none; border-radius: 999px; background: none; font-size: 13px; font-weight: 600; color: var(--cor-texto-secundario); cursor: pointer; } .toggle-escopo-opcao:hover { color: var(--cor-texto); } .toggle-escopo-opcao.ativo { background: var(--cor-destaque); color: var(--cor-fundo-cartao); } .dfe-chips { display: inline-flex; gap: 6px; } .dfe-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--cor-sucesso-borda); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); } .dfe-chip.erro { border-color: var(--cor-erro-borda); background: var(--cor-erro-fundo); color: var(--cor-erro-texto); } /* Cabeçalho das abas de apuração + seletor de competência */ .dfe-apuracao-topo { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 12px; } .dfe-apuracao-topo h2 { margin: 0; } .dfe-competencia { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cor-texto-suave); } .dfe-competencia select { width: auto; min-width: 150px; } .dfe-competencia-label { font-size: 13px; color: var(--cor-texto-suave); text-transform: capitalize; padding-bottom: 6px; } .dfe-legenda { font-size: 12px; color: var(--cor-texto-suave); margin: 4px 0 10px; } .aviso-inline { font-size: 13px; color: var(--cor-aviso-texto); background: var(--cor-aviso-fundo); border: 1px solid var(--cor-aviso-borda); border-radius: var(--raio-campo); padding: 8px 12px; margin: 10px 0; } /* Layout de duas colunas (Naturezas de operação, 15/09/2026) - lista à esquerda (mais larga), formulário de cadastro num cartão à direita. Reaproveitável por qualquer cadastro futuro que queira esse formato. */ .duas-colunas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 18px; align-items: start; } .cartao-lateral { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 20px; } .cartao-lateral h3 { margin-top: 0; } .cartao-lateral form > div { margin-bottom: 14px; } @media (max-width: 860px) { .duas-colunas { grid-template-columns: 1fr; } } .aviso.aviso-info { background: var(--cor-chip-info-fundo); border-color: var(--cor-chip-info-borda); color: var(--cor-chip-info-texto); } /* Cards de apuração */ .cards-apuracao { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0 18px; } .card-apuracao { border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); background: var(--cor-fundo-cartao); padding: 14px 16px; } .card-apuracao-rotulo { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-suave); } .card-apuracao-valor { font-family: var(--fonte-mono); font-size: 20px; font-weight: 600; color: var(--cor-texto); margin: 4px 0; } .card-apuracao-detalhe { font-size: 12px; color: var(--cor-texto-suave); } .card-apuracao.card-positivo { border-color: var(--cor-acento-borda); background: var(--cor-acento-fundo); } .card-apuracao.card-positivo .card-apuracao-valor { color: var(--cor-acento-forte); } .card-apuracao.card-negativo { border-color: var(--cor-erro-borda); background: var(--cor-erro-fundo); } .card-apuracao.card-negativo .card-apuracao-valor { color: var(--cor-erro-texto); } /* Badges de linha */ .badge-doc, .badge-lado, .badge-neutro, .dfe-sit { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--cor-borda); } .badge-doc-nfe { background: var(--cor-acento-fundo); color: var(--cor-acento-forte); border-color: var(--cor-acento-borda); } .badge-doc-cte { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); border-color: var(--cor-aviso-borda); } .badge-lado-credito { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); } .badge-lado-debito { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border-color: var(--cor-erro-borda); } .badge-neutro { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); border-color: var(--cor-aviso-borda); font-weight: 500; } .dfe-sit-1 { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); border-color: var(--cor-sucesso-borda); } .dfe-sit-2, .dfe-sit-3 { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); border-color: var(--cor-erro-borda); } /* Ações por linha */ .btn-linha-acao { width: auto; display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: var(--raio-campo); border: 1px solid var(--cor-secundario-borda); background: var(--cor-secundario-fundo); color: var(--cor-texto); cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-linha-acao:hover { background: var(--cor-secundario-fundo-hover); } .btn-linha-acao.acao-ok { border-color: var(--cor-acento-borda); color: var(--cor-acento-forte); } .btn-linha-acao.acao-alerta { border-color: var(--cor-erro-borda); color: var(--cor-erro-texto); } .celula-acoes-dfe { display: flex; flex-wrap: wrap; gap: 4px; } .col-check { width: 34px; text-align: center; } .dfe-selecao-acoes { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--cor-texto-secundario); } .tabela-dfe-documentos td { vertical-align: top; } .tabela-dfe-documentos small { color: var(--cor-texto-suave); } .texto-erro, td.texto-erro { color: var(--cor-erro-texto); } /* --- Gráficos do Relatório --- */ .graficos-relatorio { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 16px; margin-bottom: 24px; } .grafico-card { margin: 0; padding: 16px 18px; background: var(--cor-fundo); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-campo); } .grafico-card figcaption { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; color: var(--cor-texto); margin-bottom: 8px; } .grafico-card svg { display: block; overflow: visible; } .dados-grafico { margin-top: 8px; font-size: 12px; color: var(--cor-texto-suave); } .dados-grafico summary { cursor: pointer; } .dados-grafico table { margin-top: 6px; font-size: 12px; } .dados-grafico th, .dados-grafico td { padding: 4px 8px; } /* --- Rótulo visível só para leitores de tela --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ Responsivo / mobile (27/08/2026). O ja foi adicionado no index.html; aqui vao os ajustes de layout pra telas estreitas (celular). ============================================================ */ @media (max-width: 720px) { body { overflow-x: hidden; } /* A shell empilha: a barra lateral vira uma faixa no topo com a marca e as abas rolando na horizontal; a barra de topo fica logo abaixo. */ .app-grid { grid-template-columns: minmax(0, 1fr); } .barra-lateral { position: static; height: auto; overflow: visible; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.16); gap: 10px; padding: 10px 12px; min-width: 0; } .marca { padding: 2px 4px; } .marca-nome { font-size: 17px; } .marca-nome small { display: none; } .barra-lateral nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; min-width: 0; -webkit-overflow-scrolling: touch; } .nav-grupo { display: none; } .barra-lateral nav [role="tab"] { width: auto; flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; } .barra-lateral nav [role="tab"].ativo::before { display: none; } .nav-icone { display: none; } .barra-lateral-usuario { margin-top: 0; padding: 0 4px; border-top: none; } .topo { padding: 0 14px; gap: 10px; } .topo-titulo { font-size: 15px; } main { padding: 14px 12px; } section { padding: 14px 12px; } /* Campos em coluna unica - some o lado-a-lado que espremia tudo. */ .linha { gap: 10px; } .linha > div, .linha > .col-documento-busca { min-width: 0; flex-basis: 100%; } .campo-documento { min-width: 0; } .linha-com-botao { flex-wrap: wrap; } .linha-com-botao button { width: 100%; } /* No celular o stepper mostra só os números ligados; o rótulo aparece apenas na etapa atual, pra caber na largura da tela. */ .stepper-item { padding: 4px 2px; font-size: 12px; gap: 6px; } .stepper-item:not(.passo-atual) .stepper-rot { display: none; } .stepper-item:not(:last-child)::after { width: 16px; margin: 0 3px; } .cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .graficos-relatorio { grid-template-columns: 1fr; } .controles-lista input { min-width: 0; } /* Toda tabela rola dentro de si mesma; a pagina nunca rola de lado. As que ja estao dentro de .tabela-scroll mantem o wrapper como container de rolagem. */ section table { display: block; overflow-x: auto; } .tabela-scroll > table { display: table; } .modal-caixa { width: 94%; padding: 16px; } } /* Aviso curto abaixo de um campo (ex.: data de emissão retroativa). */ .aviso-campo { display: block; margin-top: 3px; font-size: 12px; color: var(--cor-aviso-texto); } .aviso-campo:empty { display: none; } /* ===================== Painel inicial (30/08/2026) ===================== A home do app. Tudo escopado em #secao-painel para não colidir com o resto do styles.css; usa só os tokens --cor-* / --fonte-* / --raio-* / --sombra-* já definidos no topo do arquivo (tema claro/escuro seguem automaticamente). */ #secao-painel .painel-cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } #secao-painel .painel-titulo { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; } #secao-painel .painel-sub { margin: 4px 0 0; font-size: 0.85rem; color: var(--cor-texto-secundario); } #secao-painel .painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; } #secao-painel .painel-erro { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--raio-campo); background: var(--cor-erro-fundo); border: 1px solid var(--cor-erro-borda); color: var(--cor-erro-texto); font-size: 0.88rem; } #secao-painel .painel-indicadores-cab { margin-bottom: 10px; } #secao-painel .painel-secao-titulo { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-suave); } #secao-painel .painel-secao-titulo span { color: var(--cor-texto); text-transform: none; letter-spacing: 0; } #secao-painel .painel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } #secao-painel .painel-kpis-linha2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #secao-painel .painel-kpi-nota { font-size: 0.75rem; color: var(--cor-texto-suave); } #secao-painel .painel-kpi { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 16px 18px; } #secao-painel .painel-kpi-rot { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cor-texto-suave); } #secao-painel .painel-kpi-num { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; margin-top: 8px; font-variant-numeric: tabular-nums; } /* Indicadores da aba "Notas Rejeitadas" (17/09/2026) - classe própria (não #secao-painel .painel-kpi) pra não acoplar com o CSS do Painel, que já tem várias camadas/breakpoints sobre esse seletor; mesma linguagem visual (cartão + número grande), só que fixa em 4 colunas sempre. */ .rejeitadas-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 20px; } .rejeitadas-kpi { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 16px 18px; } .rejeitadas-kpi-rot { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cor-texto-suave); } .rejeitadas-kpi-num { font-family: var(--fonte-titulo); font-size: 1.7rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; margin-top: 8px; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .rejeitadas-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .rejeitadas-kpis { grid-template-columns: 1fr; } } #secao-painel .painel-kpi-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; font-size: 0.8rem; color: var(--cor-texto-secundario); } #secao-painel .painel-kpi-sub-suave { color: var(--cor-texto-suave); } #secao-painel .painel-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.75rem; padding: 2px 7px; border-radius: 999px; border: 1px solid; } #secao-painel .painel-delta-alta { color: var(--cor-sucesso-texto); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso-borda); } #secao-painel .painel-delta-baixa { color: var(--cor-erro-texto); background: var(--cor-erro-fundo); border-color: var(--cor-erro-borda); } #secao-painel .painel-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } #secao-painel .painel-cartao { background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); overflow: hidden; } #secao-painel .painel-cartao-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--cor-borda-suave); } #secao-painel .painel-cartao-cab h3 { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-texto-suave); } #secao-painel .painel-cartao-tag { margin-left: auto; font-size: 0.75rem; color: var(--cor-texto-suave); } #secao-painel .painel-cartao-cab button.link { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: 0.78rem; color: var(--cor-destaque); cursor: pointer; } #secao-painel .painel-cartao-cab button.link:hover { color: var(--cor-acento-forte); text-decoration: underline; } #secao-painel .painel-cartao-cab-acao { margin-left: auto; padding: 6px 12px; font-size: 0.78rem; } #secao-painel .painel-vazio { margin: 0; padding: 18px; font-size: 0.85rem; color: var(--cor-texto-suave); } #secao-painel .painel-ok { color: var(--cor-sucesso-texto); } #secao-painel .painel-pend-linha { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--cor-borda-suave); } #secao-painel .painel-pend-linha:first-child { border-top: 0; } #secao-painel .painel-pend-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--cor-chip-info-texto); background: var(--cor-chip-info-fundo); } #secao-painel .painel-pend-ico svg { width: 16px; height: 16px; } #secao-painel .painel-tom-aviso .painel-pend-ico { color: var(--cor-aviso-texto); background: var(--cor-aviso-fundo); } #secao-painel .painel-tom-erro .painel-pend-ico { color: var(--cor-erro-texto); background: var(--cor-erro-fundo); } #secao-painel .painel-pend-texto { flex: 1; min-width: 0; } #secao-painel .painel-pend-titulo { font-weight: 600; font-size: 0.85rem; } #secao-painel .painel-pend-detalhe { font-size: 0.8rem; color: var(--cor-texto-secundario); } #secao-painel .painel-pend-acao { white-space: nowrap; flex: 0 0 auto; } #secao-painel .painel-emissao { padding: 6px 18px 14px; } #secao-painel .painel-emissao-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--cor-borda-suave); font-size: 0.83rem; } #secao-painel .painel-emissao-linha:first-child { border-top: 0; } #secao-painel .painel-mono { font-family: var(--fonte-mono); font-size: 0.8rem; } #secao-painel .painel-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid; } #secao-painel .painel-badge-prod { color: var(--cor-badge-producao-texto); background: var(--cor-badge-producao-fundo); border-color: var(--cor-badge-producao-borda); } #secao-painel .painel-badge-hom { color: var(--cor-badge-homologacao-texto); background: var(--cor-badge-homologacao-fundo); border-color: var(--cor-badge-homologacao-borda); } #secao-painel .painel-nota-rodape { margin: 12px 0 0; font-size: 0.75rem; color: var(--cor-texto-suave); } #secao-painel .painel-grafico { padding: 16px 18px; } #secao-painel .painel-grafico svg { display: block; } #secao-painel .painel-grafico-legenda { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--fonte-mono); font-size: 0.72rem; color: var(--cor-texto-suave); } #secao-painel .painel-nota-linha { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--cor-borda-suave); font-size: 0.82rem; } #secao-painel .painel-nota-linha:first-child { border-top: 0; } #secao-painel .painel-nota-tipo { font-weight: 600; flex: 0 0 auto; } #secao-painel .painel-nota-chave { font-family: var(--fonte-mono); color: var(--cor-texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #secao-painel .painel-nota-data { margin-left: auto; flex: 0 0 auto; color: var(--cor-texto-suave); } #secao-painel .painel-curva { padding: 18px; } #secao-painel .painel-curva-barras { display: flex; align-items: flex-end; gap: 4px; height: 140px; } #secao-painel .painel-curva-coluna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } #secao-painel .painel-curva-barra { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--cor-acento); } #secao-painel .painel-curva-rotulo { font-size: 0.62rem; color: var(--cor-texto-suave); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } #secao-painel .painel-fornecedor-linha { justify-content: space-between; } #secao-painel .painel-fornecedor-nome { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #secao-painel .painel-fornecedor-total { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; } @media (max-width: 980px) { #secao-painel .painel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } #secao-painel .painel-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { #secao-painel .painel-kpis { grid-template-columns: 1fr; } #secao-painel .painel-nota-chave { display: none; } } /* =========================================================================== CAMADA DE POLIMENTO PROFISSIONAL - 10/09/2026 --------------------------------------------------------------------------- Camada ADITIVA no fim do arquivo. So refina o que ja existe (mesmos seletores, mesmos tokens --cor-* / --fonte-*), sem depender de nenhuma mudanca no index.html nem no app.js - e reversivel, basta apagar deste comentario ate o fim do arquivo. Objetivo: acabamento de produto de mercado (escala de espacamento e tipografia formais, rampa de elevacao coerente, foco de teclado unico, micro-interacoes discretas, graficos no padrao dataviz) preservando a identidade: shell azul-marinho, acento esmeralda, titulos em Newsreader. =========================================================================== */ :root { /* Escala de espacamento 8pt - as regras desta camada usam so estes valores */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Escala tipografica */ --txt-xs: 12px; --txt-sm: 13px; --txt-base: 14px; --txt-md: 16px; --txt-lg: 20px; --txt-xl: 25px; /* Rampa de elevacao - sombra coerente por nivel (1 repouso, 2 hover, 3 modal) */ --elev-1: 0 1px 2px rgba(20, 33, 61, 0.05), 0 1px 3px rgba(20, 33, 61, 0.08); --elev-2: 0 2px 4px -1px rgba(20, 33, 61, 0.08), 0 14px 28px -12px rgba(20, 33, 61, 0.16); --elev-3: 0 10px 24px -8px rgba(20, 33, 61, 0.18), 0 32px 56px -20px rgba(20, 33, 61, 0.26); /* Movimento */ --ease-suave: cubic-bezier(0.4, 0, 0.2, 1); --dur-rapida: 0.12s; --dur-media: 0.2s; /* Anel de foco de teclado - um so, reaproveitado em tudo */ --anel-foco: 0 0 0 3px rgba(15, 157, 118, 0.32); /* Tokens de grafico (dataviz): UM hue sequencial (esmeralda) para magnitude + eixos/rotulos discretos. Sem cor por ranking. */ --viz-primaria: var(--cor-acento); --viz-primaria-forte: var(--cor-acento-forte); --viz-grade: var(--cor-borda-suave); --viz-eixo: var(--cor-borda); --viz-rotulo: var(--cor-texto-suave); --viz-trilha: rgba(114, 125, 146, 0.16); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5); --elev-2: 0 2px 6px -1px rgba(0, 0, 0, 0.5), 0 16px 32px -14px rgba(0, 0, 0, 0.62); --elev-3: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 36px 64px -22px rgba(0, 0, 0, 0.7); --anel-foco: 0 0 0 3px rgba(23, 185, 140, 0.36); --viz-trilha: rgba(139, 145, 160, 0.2); } } :root[data-theme="dark"] { --elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.5); --elev-2: 0 2px 6px -1px rgba(0, 0, 0, 0.5), 0 16px 32px -14px rgba(0, 0, 0, 0.62); --elev-3: 0 12px 28px -8px rgba(0, 0, 0, 0.6), 0 36px 64px -22px rgba(0, 0, 0, 0.7); --anel-foco: 0 0 0 3px rgba(23, 185, 140, 0.36); --viz-trilha: rgba(139, 145, 160, 0.2); } /* ---------- Base: movimento, selecao, foco unico ---------- */ a, button, input, select, textarea, .chip, .card, .painel-kpi, .painel-cartao, section, .btn-linha-acao, .stepper-num { transition: background-color var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave), box-shadow var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave), transform var(--dur-rapida) var(--ease-suave); } ::selection { background: rgba(15, 157, 118, 0.22); } :focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; border-radius: 4px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="tab"]:focus-visible { outline: none; box-shadow: var(--anel-foco); } .barra-lateral nav [role="tab"]:focus-visible { box-shadow: inset var(--anel-foco); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ---------- Comandos (botoes) ---------- */ button.principal { box-shadow: var(--elev-1); letter-spacing: 0.01em; } button.principal:hover { box-shadow: var(--elev-2); } button.principal:active { transform: translateY(1px); box-shadow: var(--elev-1); } button.secundario:hover { box-shadow: var(--elev-1); } button.secundario:active { transform: translateY(1px); } button:disabled, button.principal:disabled, button.secundario:disabled, button.principal[disabled], button.secundario[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; } .btn-icone:hover { border-color: var(--cor-input-borda); box-shadow: var(--elev-1); } .btn-icone:active { transform: translateY(1px); } button.link, .link { text-underline-offset: 2px; } /* ---------- Barra lateral ---------- */ .barra-lateral { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12)), var(--cor-sidebar); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; } .barra-lateral::-webkit-scrollbar { width: 8px; } .barra-lateral::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; } .marca-icone { box-shadow: 0 6px 16px -6px rgba(15, 157, 118, 0.6); } /* Ícone com cor própria por item — leitura mais rápida da barra lateral. Cada botão define `color` no seu .nav-icone; esse mesmo valor pinta o traço (stroke: currentColor) E o quadradinho de fundo (via color-mix). O rótulo continua seguindo o estado (branco no hover/ativo); só o ícone guarda a identidade de cor. Tons claros o bastante pro shell escuro nos dois temas. */ .barra-lateral nav [role="tab"] .nav-icone { width: 26px; height: 26px; padding: 4px; border-radius: 7px; opacity: 1; background: color-mix(in srgb, currentColor 15%, transparent); transition: background-color var(--dur-media) var(--ease-suave), opacity var(--dur-media) var(--ease-suave); } .barra-lateral nav [role="tab"]:hover .nav-icone, .barra-lateral nav [role="tab"].ativo .nav-icone { opacity: 1; background: color-mix(in srgb, currentColor 26%, transparent); } #tab-painel .nav-icone { color: #34d399; } #tab-emitir .nav-icone { color: #38bdf8; } #tab-notas .nav-icone { color: #818cf8; } #tab-relatorio .nav-icone { color: #fbbf24; } #tab-dfe .nav-icone { color: #22d3ee; } #tab-financeiro .nav-icone { color: #4ade80; } #tab-clientes .nav-icone { color: #f472b6; } #tab-produtos .nav-icone { color: #fb923c; } #tab-naturezas .nav-icone { color: #c084fc; } #tab-matrizes .nav-icone { color: #38bdf8; } #tab-certificado .nav-icone { color: #a78bfa; } #tab-api .nav-icone { color: #2dd4bf; } #tab-empresas .nav-icone { color: #94a3b8; } .barra-lateral nav [role="tab"].ativo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .barra-lateral nav [role="tab"].ativo::before { box-shadow: 0 0 10px -1px var(--cor-acento); } /* ---------- Barra de topo ---------- */ .topo { box-shadow: 0 1px 0 var(--cor-borda), 0 6px 20px -16px rgba(20, 33, 61, 0.28); } /* ---------- Superficies / cartoes ---------- */ section { box-shadow: var(--elev-1); } .cards { gap: var(--sp-4); } .card { position: relative; overflow: hidden; box-shadow: var(--elev-1); } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor-acento); opacity: 0.85; } .card:hover { transform: translateY(-1px); box-shadow: var(--elev-2); border-color: var(--cor-input-borda); } .card .valor { font-size: clamp(18px, 2.6vw, 22px); } /* ---------- Painel: KPIs e cartoes ---------- */ #secao-painel .painel-kpis { gap: var(--sp-4); } #secao-painel .painel-kpi { position: relative; overflow: hidden; box-shadow: var(--elev-1); } #secao-painel .painel-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor-acento); opacity: 0.9; } #secao-painel .painel-kpi:hover { transform: translateY(-1px); box-shadow: var(--elev-2); border-color: var(--cor-input-borda); } #secao-painel .painel-kpi-num { /* Cabe "R$ 148.320,00" numa linha no grid de 4 colunas (~224px úteis) e ainda encolhe em telas pequenas; só quebra em valores absurdos. */ font-size: clamp(1.2rem, 0.9rem + 1.1vw, 1.55rem); overflow-wrap: break-word; letter-spacing: -0.015em; } #secao-painel .painel-cartao { box-shadow: var(--elev-1); } #secao-painel .painel-cartao:hover { box-shadow: var(--elev-2); } #secao-painel .painel-pend-linha, #secao-painel .painel-nota-linha { transition: background-color var(--dur-media) var(--ease-suave); } #secao-painel .painel-pend-linha:hover, #secao-painel .painel-nota-linha:hover { background: var(--cor-fundo); } /* ---------- Tabelas ---------- */ tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cor-fundo) 55%, var(--cor-fundo-cartao)); } tbody tr:hover td { background: var(--cor-fundo); } #secao-notas thead th { box-shadow: 0 1px 0 var(--cor-borda); } .tabela-scroll { scrollbar-width: thin; scrollbar-color: var(--cor-input-borda) transparent; border-radius: var(--raio-campo); } .tabela-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .tabela-scroll::-webkit-scrollbar-thumb { background: var(--cor-input-borda); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Filtro "mostrar a partir de" em Notas Recentes - só ajusta a visão (nada é apagado; a lista e a busca seguem trazendo todo o histórico do banco). A escolha fica salva em localStorage. */ .controle-data-notas { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cor-texto-secundario); white-space: nowrap; } .controle-data-notas label { margin: 0; } #filtro-data-notas { flex: none; width: auto; min-width: 0; margin: 0; } .controle-data-notas .secundario { margin-top: 0; padding: 7px 10px; } /* ---------- Campos ---------- */ input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: var(--cor-texto-suave); } input:focus, select:focus, textarea:focus { box-shadow: var(--anel-foco); } input::placeholder, textarea::placeholder { color: var(--cor-texto-suave); opacity: 0.85; } input:disabled, select:disabled, textarea:disabled { background: var(--cor-fundo); color: var(--cor-texto-suave); cursor: not-allowed; } /* ---------- Chips / badges: metrica consistente ---------- */ .chip, .badge-ambiente, #secao-painel .painel-badge, #secao-painel .painel-delta { line-height: 1.4; vertical-align: middle; } /* ---------- Stepper ---------- */ .stepper-item.passo-atual .stepper-num { box-shadow: var(--anel-foco); } /* ---------- Modal: desfoque de fundo + entrada suave ---------- */ .modal-overlay { backdrop-filter: blur(3px); animation: sf-fade-in var(--dur-media) var(--ease-suave); } .modal-caixa { box-shadow: var(--elev-3); animation: sf-modal-entra var(--dur-media) var(--ease-suave); } @keyframes sf-fade-in { from { opacity: 0; } } @keyframes sf-modal-entra { from { opacity: 0; transform: translateY(8px) scale(0.98); } } /* ---------- Graficos (dataviz) ---------- */ .grafico-card { background: var(--cor-fundo-cartao); border-color: var(--cor-borda); box-shadow: var(--elev-1); } .grafico-card svg text { font-family: var(--fonte-ui); } .viz-barra { transition: fill-opacity var(--dur-media) var(--ease-suave), filter var(--dur-media) var(--ease-suave); cursor: default; } .viz-barra:hover { fill-opacity: 1; filter: brightness(1.05) saturate(1.04); } #secao-painel .painel-grafico-legenda { border-top: 1px solid var(--cor-borda-suave); padding-top: var(--sp-2); } /* ---------- Responsivo: garante gutter e evita overflow ---------- */ @media (max-width: 720px) { main { padding: var(--sp-5) var(--sp-4) var(--sp-6); } } @media (max-width: 400px) { section { padding: var(--sp-4) var(--sp-3); } .painel-cabecalho .painel-acoes { width: 100%; } .painel-cabecalho .painel-acoes button { flex: 1; } }