/* ===================================================================== FIN-UI — fundação visual dos financeiros (Parte 1) Ordem do arquivo: 1. Tokens (claro, escuro, marca) 2. Ponte com o CSS antigo 3. Base tipográfica 4. Moldura: sidebar, topbar, gaveta 5. Tela de carregamento 6. Ilha clara das telas ainda não migradas 7. Impressão A Parte 2 acrescenta o kit de componentes no fim, na seção reservada. ===================================================================== */ /* ===================================================================== 1. TOKENS ===================================================================== */ :root { /* Neutros com um fio da cor da marca (09/09/2026). Eram cinzas puros e a tela inteira lia como branco sobre branco: fundo #f7f7f7, cartões brancos, filetes cinza. Agora o fundo, a superfície secundária e os filetes carregam a matiz do accent — pouco o bastante para o branco dos cartões continuar sendo o primeiro plano, e o suficiente para a página ter a cor da casa. O E-commerce tem os seus, mais abaixo. */ --bg: #eef4f3; --surface: #ffffff; --surface2: #e4eeec; --line: #d6e3e1; --line2: #c3d4d1; --ink: #1b1b1b; --ink2: #5c5c5c; --ink3: #909090; --accent: #0e756e; --accent-ink: #0a5d58; --accent-soft: rgba(14, 117, 110, .09); --pos: #22794a; --pos-soft: rgba(34, 121, 74, .10); --neg: #bb4a40; --neg-soft: rgba(187, 74, 64, .10); --warn: #a06616; --warn-soft: rgba(160, 102, 22, .12); --fin-sidebar-w: 230px; --fin-topbar-h: 56px; --fin-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fin-font-num: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } :root[data-theme="dark"] { --bg: #151515; --surface: #1e1e1e; --surface2: #262626; --line: #2e2e2e; --line2: #3c3c3c; --ink: #ededed; --ink2: #a8a8a8; --ink3: #767676; --accent: #35a89f; --accent-ink: #4dc0b7; --accent-soft: rgba(53, 168, 159, .14); --pos: #4fae7c; --pos-soft: rgba(79, 174, 124, .14); --neg: #d97b70; --neg-soft: rgba(217, 123, 112, .14); --warn: #c99245; --warn-soft: rgba(201, 146, 69, .16); } /* Marca. O accent é a ÚNICA coisa que separa as duas instalações — o resto da paleta é neutro de propósito, para que a mesma folha sirva às duas. Vive no , e não no , porque a ponte da seção 2 declara `--bezerra-primary: var(--accent)` em :root: a substituição usa o valor de --accent DAQUELE elemento, então um accent trocado só no body chegaria tarde demais e as telas antigas do E-commerce sairiam com o verde. */ :root[data-brand="ecommerce"] { --accent: #2a63b8; --accent-ink: #1e4f99; --accent-soft: rgba(42, 99, 184, .10); /* Os neutros seguem a matiz azul (ver o comentário em :root). */ --bg: #eef2f8; --surface2: #e4eaf4; --line: #d5deea; --line2: #c2cede; } :root[data-theme="dark"][data-brand="ecommerce"] { --accent: #5e93d8; --accent-ink: #7aa8e2; --accent-soft: rgba(94, 147, 216, .16); } /* --- Barra lateral na cor da marca (09/09/2026) ------------------------- A barra deixou de ser branca: é um painel na cor de cada financeiro, com texto claro por cima. O fundo NÃO reaproveita --accent porque no tema escuro o accent fica claro (#35a89f) justamente para servir de texto e filete sobre fundo escuro — texto branco em cima dele não tem contraste. Por isso a barra tem um tom próprio por marca e por tema, sempre fundo para texto branco. Tudo o mais na barra é branco com opacidade, o que vale igual para as duas marcas e os dois temas. */ :root { --fsb-bg: #0b5f59; /* Bezerra, claro */ --fsb-ink: #ffffff; --fsb-ink2: rgba(255, 255, 255, .80); /* itens do menu */ --fsb-ink3: rgba(255, 255, 255, .55); /* grupos, legendas */ --fsb-hover: rgba(255, 255, 255, .09); --fsb-active: rgba(255, 255, 255, .17); --fsb-line: rgba(255, 255, 255, .14); --fsb-neg: #ffb4ab; /* "sair" em hover */ } :root[data-theme="dark"] { --fsb-bg: #0a4a45; } :root[data-brand="ecommerce"] { --fsb-bg: #1f4f96; } :root[data-theme="dark"][data-brand="ecommerce"] { --fsb-bg: #183d74; } /* ===================================================================== 2. PONTE COM O CSS ANTIGO Cinco telas ainda leem `--bezerra-primary` e os `--sb-*` que viviam no header. Apagar essas variáveis agora deixaria essas telas sem cor até a vez delas chegar, então elas continuam existindo — apontando para os tokens novos. Some sozinho quando a última tela migrar. ===================================================================== */ :root { /* Apelidos dos tokens de superfície e texto. Existem para telas que já tinham a própria paleta em variáveis locais com ESTES MESMOS nomes (`--ink`, `--surface`, `--bg`…) — o Dashboard é o caso. Lá dentro, `--ink: var(--ink)` seria uma referência a si mesma e invalidaria a variável; `--ink: var(--fin-ink)` funciona porque o apelido é resolvido aqui, no :root, contra o token de verdade. */ --fin-bg: var(--bg); --fin-surface: var(--surface); --fin-surface2: var(--surface2); --fin-line: var(--line); --fin-line2: var(--line2); --fin-ink: var(--ink); --fin-ink2: var(--ink2); --fin-ink3: var(--ink3); --bezerra-primary: var(--accent); --bezerra-dark: var(--accent-ink); --sb-width: var(--fin-sidebar-w); --sb-mobile-h: var(--fin-topbar-h); --sb-ink: var(--ink); --sb-ink-2: var(--ink2); --sb-muted: var(--ink2); --sb-muted-2: var(--ink3); --sb-surface: var(--surface); --sb-divider: var(--line); --sb-divider-2: var(--surface2); --sb-brand-50: var(--accent-soft); --sb-brand-100: var(--accent-soft); --sb-brand-700: var(--accent-ink); } /* ===================================================================== 3. BASE ===================================================================== */ body.fin-ui { background: var(--bg); color: var(--ink); font-family: var(--fin-font); /* Números de larguras iguais: colunas de dinheiro alinham sem esforço, e é a tela inteira que é feita de números. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } body.fin-ui.logged-in { padding-top: 0 !important; padding-left: var(--fin-sidebar-w) !important; } @media (max-width: 991.98px) { body.fin-ui.logged-in { padding-left: 0 !important; padding-top: var(--fin-topbar-h) !important; } } /* ===================================================================== 4. MOLDURA ===================================================================== */ .fin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--fin-sidebar-w); background: var(--fsb-bg); color: var(--fsb-ink); display: flex; flex-direction: column; z-index: 1040; font-family: var(--fin-font); box-sizing: border-box; } /* --- Marca --- */ .fin-sidebar .fin-brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 16px; text-decoration: none; color: var(--fsb-ink); } .fin-sidebar .fin-brand:hover { text-decoration: none; color: var(--fsb-ink); } /* Sobre o painel colorido o selo inverte: fundo branco, letra na cor da barra — é o único ponto da barra que não é branco-sobre-cor. */ .fin-sidebar .fin-brand-mark { width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--fsb-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; } .fin-sidebar .fin-brand-text { min-width: 0; } .fin-sidebar .fin-brand-text strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-sidebar .fin-brand-text span { display: block; font-size: 10.5px; color: var(--fsb-ink3); letter-spacing: .04em; text-transform: uppercase; } /* --- Navegação --- */ .fin-nav { flex: 1; overflow-y: auto; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 1px; } .fin-nav-group { padding: 14px 11px 4px; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--fsb-ink3); } .fin-nav-group:first-child { padding-top: 8px; } .fin-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 7px; font-size: 13px; color: var(--fsb-ink2); text-decoration: none; transition: background .15s ease, color .15s ease; } .fin-nav a:hover { background: var(--fsb-hover); color: var(--fsb-ink); text-decoration: none; } .fin-nav a .bi { font-size: 14px; flex-shrink: 0; } /* O item ativo é um degrau de branco mais forte, não uma cor nova: sobre o painel da marca, o accent-soft de antes sumia. */ .fin-nav a.is-active { background: var(--fsb-active); color: var(--fsb-ink); font-weight: 600; } /* --- Rodapé: usuário, tema e sair --- */ .fin-sidebar-foot { border-top: 1px solid var(--fsb-line); padding: 12px 14px; display: flex; align-items: center; gap: 10px; } .fin-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fsb-active); color: var(--fsb-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .fin-user { flex: 1; min-width: 0; } .fin-user strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fin-user span { font-size: 11px; color: var(--fsb-ink3); } .fin-icon-btn { background: none; border: none; color: var(--ink3); font-size: 15px; padding: 6px; border-radius: 6px; line-height: 1; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s ease, color .15s ease; } .fin-icon-btn:hover { background: var(--surface2); color: var(--ink); text-decoration: none; } .fin-icon-btn.fin-sair:hover { color: var(--neg); } /* Dentro da barra e da topbar os botões de ícone são brancos — a regra genérica acima continua valendo para quem os usar fora da moldura. */ .fin-sidebar .fin-icon-btn, .fin-topbar .fin-icon-btn { color: var(--fsb-ink2); } .fin-sidebar .fin-icon-btn:hover, .fin-topbar .fin-icon-btn:hover { background: var(--fsb-hover); color: var(--fsb-ink); } .fin-sidebar .fin-icon-btn.fin-sair:hover { color: var(--fsb-neg); } /* O ícone do tema mostra o que ACONTECE ao clicar, não o estado atual: no claro, oferece a lua; no escuro, oferece o sol. */ .fin-tema .bi-moon-stars { display: inline-block; } .fin-tema .bi-sun { display: none; } :root[data-theme="dark"] .fin-tema .bi-moon-stars { display: none; } :root[data-theme="dark"] .fin-tema .bi-sun { display: inline-block; } /* --- Topbar e gaveta (celular) --- */ .fin-topbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--fin-topbar-h); /* Mesma cor da barra: no celular a gaveta desliza por baixo dela, e uma topbar branca sobre um painel colorido pareceria de outro sistema. */ background: var(--fsb-bg); border-bottom: 1px solid var(--fsb-line); align-items: center; gap: 10px; padding: 0 12px; z-index: 1041; } .fin-topbar .fin-topbar-title { font-weight: 600; font-size: 14px; color: var(--fsb-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .fin-topbar .fin-topbar-title:hover { color: var(--fsb-ink); text-decoration: none; } .fin-topbar .fin-icon-btn { font-size: 20px; } .fin-backdrop { display: none; position: fixed; top: var(--fin-topbar-h); right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); z-index: 1039; } .fin-backdrop.show { display: block; } @media (max-width: 991.98px) { /* A gaveta começa ABAIXO da topbar. Cobrindo-a, os primeiros 56px do painel — justamente a marca — ficariam escondidos atrás da barra, e o botão de fechar sumiria junto. */ .fin-sidebar { top: var(--fin-topbar-h); transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .25); } .fin-sidebar.open { transform: translateX(0); } .fin-sidebar .fin-brand { padding-top: 14px; } .fin-topbar { display: flex; } } /* ===================================================================== 5. TELA DE CARREGAMENTO ===================================================================== */ #loading-screen { position: fixed; inset: 0; background: var(--bg); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; } #loading-screen.hide { opacity: 0; pointer-events: none; } #loading-screen .loading-content { text-align: center; } #loading-screen .mascot-wrapper { position: relative; width: 132px; height: 132px; /* Folga generosa embaixo: o anel gira e sua caixa de layout é a do quadrado ROTACIONADO (~1,41× o lado). Com margem curta, a borda chegava a encostar no "Carregando...". */ margin: 0 auto 32px; display: flex; align-items: center; justify-content: center; } #loading-screen .mascot-loading { position: relative; z-index: 1; display: block; max-height: 84px; max-width: 84px; width: auto; height: auto; /* O tema arredonda e dá fundo branco a imagens; no tema escuro o mascote virava uma bolha branca dentro do anel. */ background: transparent; border-radius: 0; box-shadow: none; } #loading-screen .loading-ring { position: absolute; inset: 0; border: 3px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: fin-ring-spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { #loading-screen .loading-ring { animation: none; border-top-color: var(--accent-soft); } } @keyframes fin-ring-spin { to { transform: rotate(360deg); } } /* Gira qualquer ícone — o Bootstrap Icons não traz animação própria, ao contrário do Font Awesome, que tinha `fa-spin`. Mora aqui por causa da keyframe logo acima. */ .fin-spin { display: inline-block; animation: fin-ring-spin .9s linear infinite; } @media (prefers-reduced-motion: reduce) { .fin-spin { animation: none; } } #loading-screen h4 { margin: 0; font-family: var(--fin-font); font-size: 15px; font-weight: 500; color: var(--ink2); } #loading-screen .loading-dots { display: flex; justify-content: center; gap: 6px; margin-top: .75rem; } #loading-screen .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; animation: fin-dot-bounce 1.4s infinite ease-in-out both; } #loading-screen .loading-dots span:nth-child(1) { animation-delay: -.32s; } #loading-screen .loading-dots span:nth-child(2) { animation-delay: -.16s; } @keyframes fin-dot-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } } /* ===================================================================== 6. ILHA CLARA — telas ainda não migradas No tema escuro, uma tela que ainda tem #fff e #333 chumbados no HTML herdaria o texto claro do body e ficaria texto claro sobre cartão branco. Enquanto ela não é refeita, o miolo permanece claro: a moldura escurece, o conteúdo não. Sai da regra quando o template entra em BDA_FIN_TELAS_MIGRADAS (ver lib/fin-ui.php). ===================================================================== */ :root[data-theme="dark"] body.fin-legacy > main, :root[data-theme="dark"] body.fin-legacy > .container-full, :root[data-theme="dark"] body.fin-legacy > .modal, :root[data-theme="dark"] body.fin-legacy > .modal-backdrop { color-scheme: light; background: #f6f7f9; color: #1b1b1b; } :root[data-theme="dark"] body.fin-legacy { background: #f6f7f9; } /* ===================================================================== 7. IMPRESSÃO A sidebar é position:fixed e o Edge a desenha por cima do papel (o Chrome descarta elementos fixos, e por isso o defeito só aparecia num deles). ===================================================================== */ @media print { /* O PAPEL É SEMPRE CLARO. O tema escuro vale para a tela, não para a folha: quem estivesse com ele ligado imprimia texto claro sobre branco — cinza pálido no melhor caso, invisível no pior. Em vez de caçar cor por cor em cada layout de impressão, os tokens inteiros voltam à paleta clara aqui, e tudo o que é escrito com var() se acerta sozinho. Os tokens de acento e de sinal viram tinta preta: cor sai chapada em impressora monocromática, e num relatório o que distingue entrada de saída é a coluna Tipo, não o matiz. */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --surface2: #f5f5f5; --line: #e0e0e0; --line2: #cccccc; --ink: #1b1b1b; --ink2: #444444; --ink3: #666666; --accent: #1b1b1b; --accent-ink: #1b1b1b; --accent-soft: #f0f0f0; --pos: #1b1b1b; --pos-soft: #f5f5f5; --neg: #1b1b1b; --neg-soft: #f5f5f5; --warn: #1b1b1b; --warn-soft: #f5f5f5; } .fin-sidebar, .fin-topbar, .fin-backdrop, #loading-screen { display: none !important; visibility: hidden !important; } body.fin-ui { padding-left: 0 !important; padding-top: 0 !important; background: #fff !important; color: #1b1b1b !important; } /* --- Cabeçalho padrão do relatório --------------------------------- Nome da empresa e data na mesma linha, título abaixo, filete grosso fechando o bloco. Mora aqui porque é o mesmo em Extrato, Contas, Faturamento e Cobrança — antes cada tela trazia o seu, e eles já tinham divergido em tamanho e alinhamento. A marcação esperada é: .print-header > .print-header-top > .print-empresa · .print-emissao · .print-titulo · .print-meta ------------------------------------------------------------------ */ .print-header { display: block !important; margin: 0 0 10pt 0 !important; page-break-after: avoid !important; page-break-inside: avoid !important; } .print-header-top { border-bottom: 1.5pt solid #1b1b1b !important; padding-bottom: 7pt !important; display: grid !important; grid-template-columns: 1fr auto !important; } .print-header-top .print-empresa { font-size: 12pt !important; font-weight: 700 !important; color: #1b1b1b !important; } .print-header-top .print-emissao { font-size: 8pt !important; color: #666 !important; text-align: right !important; align-self: baseline !important; } .print-header-top .print-titulo { grid-column: 1 / -1 !important; font-size: 14pt !important; font-weight: 600 !important; margin-top: 3pt !important; color: #1b1b1b !important; } .print-header-top .print-meta { grid-column: 1 / -1 !important; font-size: 8.5pt !important; color: #555 !important; margin-top: 2pt !important; line-height: 1.35 !important; } .print-header i { display: none !important; } /* Vale para todas as telas: o que leva `no-print` não vai ao papel. Fica aqui, e não em cada tela, porque cada uma que reescrevia o reset de contêiner (`.fin-card { display: block !important }`) ressuscitava o que tinha acabado de esconder — mesma especificidade, e a regra de baixo vencia. */ .no-print, .fin-card.no-print, .fin-page-head.no-print { display: none !important; } } /* ===================================================================== 8. COMPONENTES Tudo aqui é prefixado com `fin-` e não toca em classe do Bootstrap: as telas ainda não migradas continuam usando `.btn`, `.card` e `.table` do Bootstrap sem interferência. A exceção é o modal, que segue sendo o do Bootstrap (pelo comportamento) e só é repintado quando a `.modal` também carrega a classe `.fin-modal`. ===================================================================== */ /* --- Reset das telas migradas ------------------------------------------ O tema declara `h1..h6 { color: var(--dark) }` e `section { padding: 80px 0 }` em y-blocks.css. No claro isso passava despercebido; no escuro o título da página saía cinza-escuro sobre fundo escuro, quase invisível. Só vale dentro de `fin-v2`, para não mexer nas telas que ainda não migraram. */ body.fin-v2 h1, body.fin-v2 h2, body.fin-v2 h3, body.fin-v2 h4, body.fin-v2 h5, body.fin-v2 h6 { color: var(--ink); font-weight: 600; padding-top: 0; } body.fin-v2 section { padding: 0; } body.fin-v2 label { margin-bottom: 0; } /* --- Página e cabeçalho ------------------------------------------------ */ .fin-page { padding: 26px 34px 40px; max-width: 1420px; /* Centralizada na área que sobra ao lado da barra lateral (o body leva padding-left: --fin-sidebar-w). Sem as margens automáticas a página encostava à esquerda e toda a folga aparecia de um lado só — em tela larga o conteúdo ficava visivelmente descentralizado. */ margin-left: auto; margin-right: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; } .fin-page.fin-page-estreita { max-width: 1080px; } .fin-page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fin-page-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; /* O título da página é o primeiro lugar onde a marca aparece no miolo. Especificidade acima do reset `body.fin-v2 h1` da seção 8. */ color: var(--accent-ink); } body.fin-v2 .fin-page-head h1 { color: var(--accent-ink); } .fin-page-sub { font-size: 13px; color: var(--ink3); margin-top: 2px; } .fin-page-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* --- Botões ------------------------------------------------------------ */ .fin-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fin-font); font-size: 13px; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .fin-btn:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; } .fin-btn:disabled, .fin-btn.is-disabled { opacity: .55; cursor: not-allowed; } .fin-btn-primary { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; } .fin-btn-primary:hover { background: var(--accent-ink); border-color: transparent; color: #fff; } .fin-btn-perigo { color: var(--neg); border-color: var(--line2); } .fin-btn-perigo:hover { border-color: var(--neg); background: var(--neg-soft); color: var(--neg); } .fin-btn-sm { padding: 6px 10px; font-size: 12px; } /* Botão só de ícone, quadrado — voltar, fechar, editar, excluir. */ .fin-btn-quadrado { width: 32px; height: 32px; padding: 0; flex-shrink: 0; } /* Ação dentro de linha de tabela: discreta até o ponteiro chegar. */ .fin-acao { border: none; background: none; color: var(--ink3); padding: 5px; border-radius: 6px; font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none; display: inline-flex; transition: background .15s ease, color .15s ease; } .fin-acao:hover { background: var(--surface2); color: var(--ink); text-decoration: none; } .fin-acao-perigo:hover { background: var(--neg-soft); color: var(--neg); } /* --- Abas -------------------------------------------------------------- */ .fin-tabs { display: flex; gap: 2px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; overflow-x: auto; align-self: flex-start; max-width: 100%; /* A barra de rolagem some, mas o gesto continua: no celular a fila de abas é mais larga que a tela e arrasta com o dedo. */ scrollbar-width: none; } .fin-tabs::-webkit-scrollbar { display: none; } .fin-tab { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink2); font-family: var(--fin-font); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; } .fin-tab:hover { color: var(--ink); } /* `.active` acompanha o Bootstrap, que é quem troca as abas: assim o comportamento continua sendo o dele e só a pintura é nossa. */ .fin-tab.is-active, .fin-tab.active { border-color: transparent; background: var(--accent); color: #fff; } /* --- Contador ---------------------------------------------------------- */ .fin-count { font-size: 10.5px; font-weight: 600; background: var(--accent-soft); border: 1px solid transparent; color: var(--accent-ink); padding: 1px 7px; border-radius: 999px; line-height: 1.5; } .fin-tab.is-active .fin-count, .fin-tab.active .fin-count { background: rgba(255, 255, 255, .22); color: #fff; } /* --- Cartão ------------------------------------------------------------ */ .fin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } .fin-card-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; flex-wrap: wrap; /* Faixa SÓLIDA na cor da marca no alto de cada cartão (09/09/2026, a pedido: a versão tingida não se destacava do cabeçalho da tabela). --fsb-bg, o tom da barra lateral, porque no tema escuro o accent é claro demais para levar texto branco. */ background: var(--fsb-bg); color: #fff; border-radius: 9px 9px 0 0; } .fin-card-title { font-size: 14px; font-weight: 600; color: #fff; } /* O que vive dentro da faixa vira branco em opacidades — contagem, rótulo, selo de nível. O botão primário inverte (branco com letra na cor), senão some no fundo da mesma cor. */ .fin-card-head .fin-count, .fin-bloco-head .fin-count { background: rgba(255, 255, 255, .2); border-color: transparent; color: #fff; } .fin-card-head label, .fin-card-head .fin-page-sub, .fin-bloco-head label { color: rgba(255, 255, 255, .8); } .fin-card-head .fin-tag-nivel, .fin-bloco-head .fin-tag-nivel { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; } .fin-card-head .fin-btn-primary, .fin-bloco-head .fin-btn-primary { background: #fff; color: var(--fsb-bg); } .fin-card-head .fin-btn-primary:hover, .fin-bloco-head .fin-btn-primary:hover { background: rgba(255, 255, 255, .88); color: var(--fsb-bg); } .fin-card-head .fin-btn { margin-left: auto; } .fin-card-body { padding: 18px; } /* --- Tabela ------------------------------------------------------------ */ .fin-table-wrap { overflow-x: auto; } /* Tabela de muitas colunas: abaixo desta largura as colunas se esmagam e o documento quebra no meio. Prefere-se rolar na horizontal a ler picado. */ .fin-table-larga { min-width: 1080px; } .fin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .fin-table thead th { text-align: left; padding: 8px 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--fsb-bg); border-top: 1px solid var(--line); white-space: nowrap; } /* Tabela colada num cabeçalho de cartão: duas faixas sólidas empilhadas pesariam, então a da tabela volta ao tom suave — o cartão já tem a sua. */ .fin-card-head ~ .fin-table-wrap .fin-table thead th, .fin-card-head ~ .fin-table thead th, .fin-card-head ~ .fin-table-wrap .fin-table thead th.fin-td-num, .fin-card-head ~ .fin-table-wrap .fin-table thead th.fin-td-acoes { color: var(--accent-ink); background: var(--accent-soft); } /* Na faixa sólida, as colunas de número e de ações herdam o branco: a regra `.fin-table .fin-td-num { color: var(--ink) }` do corpo ganharia do `th`. */ .fin-table thead th.fin-td-num, .fin-table thead th.fin-td-acoes { color: #fff; } /* No papel a faixa vira cinza-claro com texto preto — tinta e legibilidade. */ @media print { .fin-card-head, .fin-bloco-head, .fin-table thead th { background: #eee !important; color: #000 !important; } .fin-card-title, .fin-bloco-titulo { color: #000 !important; } } .fin-table tbody td { padding: 9px 10px; border-top: 1px solid var(--line); color: var(--ink2); vertical-align: middle; } .fin-table tbody tr:hover { background: var(--surface2); } /* Primeira e última células respiram junto com a borda do cartão. */ .fin-table th:first-child, .fin-table td:first-child { padding-left: 18px; } .fin-table th:last-child, .fin-table td:last-child { padding-right: 18px; } .fin-table .fin-td-nome { color: var(--ink); font-weight: 600; } .fin-table .fin-vazio { color: var(--ink3); } /* Número e ações encolhem até o conteúdo e ficam colados à direita; a folga sobra para a coluna de texto. Sem isto, uma tabela de poucas colunas distribui tudo por igual e o número fica boiando longe das ações, sem relação visível com a linha. */ .fin-table .fin-td-num, .fin-table .fin-td-acoes { width: 1%; white-space: nowrap; text-align: right; } .fin-table .fin-td-num { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* --- Cartões de lista (celular) ---------------------------------------- */ .fin-lista-cards { display: none; flex-direction: column; gap: 10px; padding: 14px 14px 18px; } .fin-item { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .fin-item-topo { display: flex; align-items: flex-start; gap: 10px; } .fin-item-nome { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; } .fin-item-desc { font-size: 12px; color: var(--ink2); line-height: 1.45; } .fin-item-meta { font-size: 11.5px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 4px 12px; } .fin-item-acoes { display: flex; gap: 8px; } .fin-item-acoes .fin-btn { flex: 1; } @media (max-width: 991.98px) { .fin-page { padding: 18px 14px 32px; } .fin-table-wrap { display: none; } .fin-lista-cards { display: flex; } } /* --- Estado vazio ------------------------------------------------------ */ .fin-empty { padding: 42px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; border-top: 1px solid var(--line); } .fin-empty .bi { font-size: 26px; color: var(--accent); } .fin-empty p { margin: 0; font-size: 13px; color: var(--ink2); } /* --- Faixa de mensagem -------------------------------------------------- */ .fin-alert { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line); border-left: 3px solid var(--ink3); background: var(--surface); font-size: 13px; line-height: 1.5; } .fin-alert .bi { font-size: 15px; flex-shrink: 0; margin-top: 1px; } .fin-alert-ok { background: var(--pos-soft); border-color: var(--pos); border-left-color: var(--pos); } .fin-alert-ok .bi { color: var(--pos); } .fin-alert-err { background: var(--neg-soft); border-color: var(--neg); border-left-color: var(--neg); } .fin-alert-err .bi { color: var(--neg); } .fin-alert-aviso { background: var(--warn-soft); border-color: var(--warn); border-left-color: var(--warn); } .fin-alert-aviso .bi { color: var(--warn); } .fin-alert .fin-alert-fechar { margin-left: auto; } /* --- Campos ------------------------------------------------------------- */ .fin-field { display: flex; flex-direction: column; gap: 5px; } .fin-field > label { font-size: 12px; font-weight: 600; color: var(--ink); margin: 0; } .fin-req { color: var(--neg); } .fin-opc { color: var(--ink3); font-weight: 400; } .fin-help { font-size: 11.5px; color: var(--ink3); line-height: 1.45; } .fin-input, .fin-select, .fin-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fin-font); font-size: 13px; line-height: 1.4; } .fin-textarea { resize: vertical; } .fin-input::placeholder, .fin-textarea::placeholder { color: var(--ink3); } .fin-input:focus, .fin-select:focus, .fin-textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } /* Campo com um acessório colado: o "R$" antes do valor, o "+" depois do seletor de cliente. O acessório não encolhe; o campo fica com o resto. */ .fin-linha-campo { display: flex; gap: 6px; align-items: stretch; } .fin-linha-campo > .fin-input, .fin-linha-campo > .fin-select, .fin-linha-campo > .select2-container { flex: 1 1 auto; min-width: 0; } .fin-linha-campo > .fin-btn { flex: 0 0 auto; } /* Só o acessório de ÍCONE vira quadrado. Sem o `-quadrado` no seletor, a largura fixa pegava também um botão com texto — o "Pesquisar" do Extrato saiu com 36px e o rótulo transbordando. */ .fin-linha-campo > .fin-btn-quadrado { width: 36px; height: auto; padding: 0; } .fin-prefixo { display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface2); color: var(--ink3); font-size: 12.5px; flex-shrink: 0; } .fin-select { /* A seta padrão do sistema não respeita o tema escuro em nenhum dos navegadores usados aqui; desenhada em SVG, ela acompanha o token. */ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23909090' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; } /* --- Modal (Bootstrap repintado) ---------------------------------------- */ .fin-modal .modal-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); } .fin-modal .modal-header { align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .fin-modal .modal-title { font-size: 15px; font-weight: 600; margin: 0; } .fin-modal .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .fin-modal .modal-footer { gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); } .fin-modal-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } /* O X do Bootstrap é uma imagem preta fixa: no escuro somem os traços. */ .fin-modal .btn-close { filter: none; opacity: .55; } :root[data-theme="dark"] .fin-modal .btn-close { filter: invert(1) grayscale(1); opacity: .7; } /* O véu padrão do Bootstrap é claro demais para separar o modal de uma tela cheia de números — a leitura continua puxando para o fundo. */ body.fin-v2 .modal-backdrop.show { opacity: .42; } @media (max-width: 575.98px) { .fin-modal .modal-footer { flex-direction: column-reverse; } .fin-modal .modal-footer .fin-btn { width: 100%; } } /* --- Busca com ícone ---------------------------------------------------- */ .fin-search { position: relative; flex: 1; min-width: 240px; } .fin-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink3); font-size: 13px; pointer-events: none; } .fin-search .fin-input { padding-left: 36px; } /* --- Controle segmentado ------------------------------------------------ Filtro por papel, alternador PJ/PF: poucas opções, todas visíveis, e a escolhida some do fundo em vez de ganhar um contorno a mais. */ .fin-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .fin-seg::-webkit-scrollbar { display: none; } .fin-seg > a { text-decoration: none; } .fin-seg > a, .fin-seg > button, .fin-seg > label { padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--ink2); font-family: var(--fin-font); font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; cursor: pointer; margin: 0; } .fin-seg > a:hover, .fin-seg > button:hover, .fin-seg > label:hover { color: var(--ink); text-decoration: none; } /* Também aceita : em Contas o status é navegação (muda a URL), não um controle de formulário. */ .fin-seg > a.active, .fin-seg > a.is-active, .fin-seg > button.active, .fin-seg > button.is-active, .fin-seg > .btn-check:checked + label { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } /* --- Selos de identidade ------------------------------------------------ Os três marcam de onde o cadastro vem e como ele paga. Ficam colados ao nome, e não numa coluna própria, porque é o nome que a pessoa procura. */ .badge-bda, .fin-selo { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; background: #43566e; color: #fff; vertical-align: middle; } .badge-score { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle; } .badge-score.score-a { background: var(--pos-soft); color: var(--pos); } .badge-score.score-b { background: rgba(120, 150, 80, .18); color: #6a8544; } .badge-score.score-c { background: var(--warn-soft); color: var(--warn); } .badge-score.score-d { background: var(--neg-soft); color: var(--neg); } .badge-score.score-novo { background: var(--surface2); border: 1px solid var(--line); color: var(--ink3); font-size: 10px; font-weight: 600; } :root[data-theme="dark"] .badge-score.score-b { background: rgba(150, 180, 110, .16); color: #a8c47a; } /* Papel (cliente / credor). O helper bda_papel_badge() escreve as cores em estilo inline porque também serve telas antigas; aqui elas são trocadas pelos tokens — só dentro das telas migradas, por isso o !important. */ .bda-papel-chip { vertical-align: middle; } body.fin-v2 .bda-papel-chip { padding: 2px 8px !important; border-radius: 999px !important; border: none !important; font-size: 11px !important; font-weight: 500 !important; } body.fin-v2 .bda-papel-chip[style*="13,110,253"] { background: var(--pos-soft) !important; color: var(--pos) !important; } body.fin-v2 .bda-papel-chip[style*="253,126,20"] { background: var(--neg-soft) !important; color: var(--neg) !important; } /* Pessoa física / jurídica: informação de apoio, sem cor própria. */ .fin-tipo-pessoa { font-size: 12px; color: var(--ink2); } /* --- Nome com selos numa célula ---------------------------------------- */ .fin-nome-linha { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--ink); font-weight: 600; } .fin-nome-sub { font-size: 11px; color: var(--ink3); margin-top: 2px; } /* --- Seção numerada dentro de modal ------------------------------------- */ .fin-secao { display: flex; flex-direction: column; gap: 8px; } .fin-secao-titulo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); } .fin-grid { display: grid; gap: 10px; } .fin-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .fin-col-2 { grid-column: span 2; } .fin-col-3 { grid-column: span 3; } .fin-col-full { grid-column: 1 / -1; } @media (max-width: 575.98px) { .fin-grid-2, .fin-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fin-col-3, .fin-col-full { grid-column: 1 / -1; } } /* Modal largo, com cabeçalho e rodapé fixos enquanto o corpo rola — o formulário de cliente tem seis seções e não cabe numa tela. */ .fin-modal .modal-dialog.fin-modal-lg { max-width: 660px; } .fin-modal .modal-header { position: sticky; top: 0; background: var(--surface); z-index: 2; border-radius: 14px 14px 0 0; } .fin-modal .modal-footer { position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 14px 14px; } .fin-modal .modal-body { gap: 18px; } /* Caixa de papel (cliente travado / credor livre) no modal. */ .fin-papel-box { border: 1px solid var(--line2); border-radius: 9px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; } .fin-papel-box.is-travado { background: var(--surface2); border-color: var(--line); opacity: .75; } .fin-papel-box label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0; cursor: pointer; } .fin-papel-box.is-travado label { cursor: default; } .fin-papel-box .fin-help { margin-left: 0; } /* ===================================================================== DOCUMENTO × PARCELA As telas de criação têm dois níveis de campo, e confundi-los foi o que levou pessoas a digitar a mesma data seis vezes: documento — vale para o lançamento/nota inteiro (nº da nota, emissão, lançamento, status, descrição, categoria, conta, caixa, cliente). Aparece UMA vez. parcela — varia linha a linha (código, vencimento, valor, comprovantes). O filete da borda esquerda é o que os separa: contínuo para documento, segmentado para parcela — o próprio traço mostra que o bloco é repartido. ===================================================================== */ .fin-bloco { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .fin-bloco-doc { border-left: 3px solid var(--accent); } .fin-bloco-parcela { /* Filete tracejado desenhado com gradiente: `border-style: dashed` não deixa escolher o tamanho do traço, e o resultado ficava pontilhado demais para ler como "repartido". */ background: repeating-linear-gradient(180deg, var(--ink3) 0 9px, rgba(0, 0, 0, 0) 9px 15px) left top / 3px 100% no-repeat border-box, var(--surface) padding-box padding-box; border-left: 3px solid transparent; } /* Cabeçalho do bloco como faixa da marca, sangrando até as bordas: as margens negativas desfazem o padding do .fin-bloco só nele. É a mesma régua do .fin-card-head — Novo Lançamento e Nova Fatura são feitos de blocos, e ficavam como pilhas de cartões brancos. */ .fin-bloco-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -18px -20px 0; padding: 12px 20px; background: var(--fsb-bg); color: #fff; border-radius: 9px 9px 0 0; } .fin-bloco-titulo { font-size: 15px; font-weight: 600; color: #fff; } .fin-tag-nivel { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 9px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-ink); } .fin-tag-nivel.parcela { background: var(--surface2); border: 1px solid var(--line2); color: var(--ink2); } /* Ao lado de um título, e não no fim da linha: o `margin-left:auto` acima existe para empurrar o selo para a direita do bloco. */ .fin-tag-nivel.fin-tag-junto { margin-left: 0; } /* Caixa das datas comuns: destacada porque é o campo que antes se repetia em cada parcela, e agora é o único do seu tipo na tela. */ .fin-caixa-doc { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; background: var(--accent-soft); border-radius: 9px; padding: 13px 15px; } .fin-caixa-doc .fin-field { gap: 4px; } .fin-caixa-doc .fin-input { width: 150px; } .fin-caixa-doc .fin-nota { flex: 1; min-width: 230px; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink2); line-height: 1.45; padding-bottom: 4px; } .fin-caixa-doc .fin-nota .bi { color: var(--accent-ink); margin-top: 2px; flex-shrink: 0; } /* --- Campo gerado pelo sistema ----------------------------------------- Resultado, não entrada: fundo accent leve, sem moldura de campo, texto em mono. NÃO deve parecer desabilitado — o valor é conferido contra a nota em papel, então continua legível e selecionável. */ .fin-gerado { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: none; border-radius: 7px; background: var(--accent-soft); color: var(--ink); font-family: var(--fin-font-num); font-size: 13px; font-weight: 500; cursor: default; width: 100%; box-sizing: border-box; } .fin-gerado::before { content: "\F46B"; /* bi-lightning-charge-fill */ font-family: "bootstrap-icons"; font-size: 10px; color: var(--accent-ink); font-weight: normal; } .fin-gerado.vazio { color: var(--ink3); } .fin-gerado:focus { outline: none; } .fin-tag-gerado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); font-size: 9px; letter-spacing: .06em; } /* --- Faixa de eco ------------------------------------------------------- Gruda no topo da lista de parcelas. Na décima linha a pessoa continua vendo qual data e qual conta valem — como contexto, nunca como campo. */ .fin-eco { position: sticky; top: 8px; z-index: 2; background: var(--accent-soft); border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink2); } .fin-eco-rotulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-ink); } .fin-eco b { color: var(--ink); font-weight: 600; } .fin-eco a { margin-left: auto; font-size: 11.5px; font-weight: 600; } .fin-eco .fin-eco-vazio { color: var(--ink3); font-style: italic; } /* --- Tabela editável de parcelas --------------------------------------- Com três campos por parcela e até 30 parcelas, uma pilha de cartões vira uma rolagem sem fim. Em tabela, vencimento e valor viram duas colunas que se percorrem de cima a baixo. */ .fin-parcelas { border: 1px solid var(--line); border-radius: 9px; overflow-x: auto; background: var(--surface); } .fin-parcelas-linha { display: grid; grid-template-columns: 78px minmax(140px, 1fr) 200px 172px 140px; min-width: 760px; align-items: center; } .fin-parcelas-head { background: var(--surface2); color: var(--ink3); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; align-items: stretch; } .fin-parcelas-head > div { padding: 9px 12px; display: flex; align-items: center; gap: 7px; } .fin-parcelas-head > div:first-child { padding-left: 14px; } .fin-parcelas-head > div:last-child { padding-right: 14px; } .fin-parcelas-head > div + div { border-left: 1px solid var(--line); } /* Vale para qualquer linha que não seja o cabeçalho, esteja ela dentro de um corpo ou solta na tabela — em Nova Fatura a linha do ICMS-ST é estática e fica ao lado do container que o JS preenche. */ .fin-parcelas-linha:not(.fin-parcelas-head) { border-top: 1px solid var(--line); } .fin-parcelas-linha:not(.fin-parcelas-head) > div { padding: 8px 12px; } .fin-parcelas-linha:not(.fin-parcelas-head) > div:first-child { padding-left: 14px; } .fin-parcelas-linha:not(.fin-parcelas-head) > div:last-child { padding-right: 14px; } .fin-parcelas-linha:not(.fin-parcelas-head) > div + div { border-left: 1px solid var(--line); } /* A parcela de ICMS-ST é a 01 e não entra na divisão do total: precisa se distinguir das demais à primeira vista. */ .fin-parcela-icms { background: var(--warn-soft); } .fin-parcela-icms > div:first-child { border-left: 3px solid var(--warn); } .fin-parcela-icms .fin-parcela-n span { color: var(--warn); font-weight: 700; letter-spacing: .04em; } /* Valor fixado à mão: não é recalculado enquanto houver outra parcela para absorver a diferença. */ .fin-parcelas .parcela-manual { border-color: var(--accent); background: var(--accent-soft); } .fin-parcela-n { display: flex; flex-direction: column; gap: 2px; } .fin-parcela-n strong { font-family: var(--fin-font-num); font-size: 13px; font-weight: 500; } .fin-parcela-n span { font-size: 9.5px; color: var(--ink3); } .fin-parcelas .fin-input { padding: 9px 11px; } .fin-parcelas .fin-valor { text-align: right; font-weight: 600; } .fin-parcelas-total { display: grid; grid-template-columns: 78px minmax(140px, 1fr) 200px 172px 140px; min-width: 760px; align-items: center; border-top: 1px solid var(--line2); background: var(--surface2); } .fin-parcelas-total > .rotulo { grid-column: span 3; padding: 11px 14px; font-size: 12px; color: var(--ink2); } .fin-parcelas-total > .valor { padding: 11px 12px; border-left: 1px solid var(--line); text-align: right; font-size: 14.5px; font-weight: 600; } /* Botão discreto no cabeçalho da coluna de vencimento. */ .fin-btn-mini { margin-left: auto; padding: 3px 7px; border: 1px solid var(--line2); border-radius: 5px; background: var(--surface); color: var(--ink2); font-family: var(--fin-font); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .fin-btn-mini:hover { border-color: var(--accent); color: var(--accent-ink); } /* Anexar: o real fica invisível dentro do rótulo, que é o que se vê. O contorno tracejado diz "ainda não tem nada aqui". */ .fin-anexar { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px dashed var(--line2); border-radius: 7px; background: none; color: var(--ink3); font-size: 11.5px; font-weight: 500; cursor: pointer; margin: 0; } .fin-anexar:hover { border-color: var(--accent); color: var(--accent-ink); } .fin-anexar input[type="file"] { display: none; } .fin-anexar.tem-arquivo { border-style: solid; border-color: var(--accent); color: var(--accent-ink); } /* Cartões de parcela — variação para tela estreita. */ .fin-parcelas-cards { display: none; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .fin-parcela-card { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); } .fin-parcela-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; } .fin-parcela-card-head .fin-gerado { margin-left: auto; width: auto; padding: 5px 9px; font-size: 12px; } @media (max-width: 767.98px) { .fin-parcelas { display: none; } .fin-parcelas-cards { display: grid; } .fin-caixa-doc .fin-input { width: 100%; } /* Nova Fatura mantém a tabela no celular e rola na horizontal: lá as linhas têm código gerado e a de ICMS-ST é estática, então espelhá-las em cartões duplicaria campos que o servidor lê por nome. */ .fin-parcelas.fin-parcelas-sempre { display: block; } } /* --- Opções visuais (tipo, status) -------------------------------------- */ .fin-opcoes { display: flex; gap: 8px; flex-wrap: wrap; } .fin-opcoes.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .fin-opcao { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--line2); border-radius: 9px; background: var(--surface); color: var(--ink2); font-family: var(--fin-font); font-size: 12.5px; font-weight: 500; cursor: pointer; margin: 0; } .fin-opcao:hover { border-color: var(--ink3); } .fin-opcao input { position: absolute; opacity: 0; pointer-events: none; } .fin-opcao.grande { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 15px; text-align: left; } .fin-opcao.grande .titulo { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; } .fin-opcao.grande .sub { font-size: 11px; color: var(--ink3); font-weight: 400; } /* O `:has()` deixa o rótulo inteiro reagir ao rádio que vive dentro dele — sem ele seria preciso um clique em JS só para pintar a seleção. */ .fin-opcao:has(input:checked), .fin-opcao.selected { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .fin-opcao:has(input:focus-visible) { outline: 2px solid var(--accent-soft); } /* Entrada e saída carregam cor de sinal SEMPRE, escolhidas ou não — é o sentido do lançamento, não o estado do botão. Vai por `data-tipo` porque as classes `entrada`/`saida` são ligadas e desligadas pelo JS a cada clique; ancorar a cor nelas apagaria o sinal das opções não escolhidas. */ .fin-opcao[data-tipo="entrada"] { color: var(--pos); } .fin-opcao[data-tipo="saida"] { color: var(--neg); } /* Fatura não escolhe tipo: é sempre entrada. Mostra escolhido e não recebe clique — em vez de sumir, que esconderia a regra de quem está lendo. */ .fin-opcao.is-travado { pointer-events: none; opacity: .9; cursor: default; } /* --- Arquivos anexados -------------------------------------------------- */ .fin-arquivos { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; } .fin-arquivo { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--surface); font-size: 12.5px; } .fin-arquivo > .bi { font-size: 15px; color: var(--ink3); flex-shrink: 0; } .fin-arquivo .fin-arquivo-nome { flex: 1; min-width: 0; color: var(--ink2); overflow-wrap: anywhere; } /* No celular o nome ganha a linha inteira e os botões descem para a seguinte, alinhados à direita e com alvo de toque de verdade. */ @media (max-width: 575.98px) { .fin-arquivo { flex-wrap: wrap; row-gap: 6px; } .fin-arquivo .fin-arquivo-nome { flex: 1 0 100%; } .fin-arquivo .fin-acao { min-width: 42px; min-height: 36px; margin-left: auto; } .fin-arquivo .fin-acao + .fin-acao { margin-left: 0; } } /* --- Interruptor (o switch do Bootstrap, repintado) --------------------- */ .fin-switches { display: flex; flex-wrap: wrap; gap: 14px 30px; } body.fin-v2 .fin-switch { display: flex; align-items: center; gap: 10px; padding-left: 0; margin: 0; min-height: 0; } body.fin-v2 .fin-switch .form-check-input { float: none; margin: 0; width: 38px; height: 21px; flex-shrink: 0; background-color: var(--surface2); border-color: var(--line2); cursor: pointer; /* O botão do switch vem do Bootstrap como SVG cinza-escuro translúcido: no tema escuro ele sumia dentro do trilho. Aqui é opaco nos dois. */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23909090'/%3e%3c/svg%3e"); } body.fin-v2 .fin-switch .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } body.fin-v2 .fin-switch .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } body.fin-v2 .fin-switch .form-check-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; } /* --- Fichas de leitura -------------------------------------------------- */ .fin-chips { display: flex; flex-wrap: wrap; gap: 8px; } .fin-chip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); font-size: 12px; color: var(--ink2); } .fin-chip b { color: var(--ink); font-weight: 600; } .fin-chip a { font-weight: 600; } /* Cartão de consulta: fundo rebaixado para dizer, sem legenda, que ali não se edita nada. */ .fin-card-quieto { background: var(--surface2); } /* --- select2 ----------------------------------------------------------- Mora aqui, e não em cada tela, porque o select2 desenha o menu FORA do nosso HTML — ele é anexado ao . Três telas já o usam; enquanto cada uma trazia sua cópia, uma cor corrigida numa não chegava às outras. Escopado em body.fin-v2 para não repintar as telas ainda no visual antigo. -------------------------------------------------------------------- */ body.fin-v2 .select2-container--default .select2-selection--single { height: auto; padding: 4px 2px; border: 1px solid var(--line2); border-radius: 8px; background: var(--surface); } body.fin-v2 .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); font-size: 13px; line-height: 1.5; } body.fin-v2 .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ink3); } body.fin-v2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } body.fin-v2 .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--accent); } body.fin-v2 .select2-dropdown { background: var(--surface); border-color: var(--line2); border-radius: 8px; } body.fin-v2 .select2-container--default .select2-results__option { color: var(--ink); font-size: 13px; } body.fin-v2 .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--accent-soft); color: var(--accent-ink); } body.fin-v2 .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--surface2); color: var(--ink); } body.fin-v2 .select2-search--dropdown .select2-search__field { border: 1px solid var(--line2); border-radius: 7px; background: var(--surface); color: var(--ink); padding: 7px 9px; } /* --- Barra de ações grudada no rodapé ----------------------------------- */ .fin-actionbar { background: var(--surface); border: 1.5px solid var(--line2); border-radius: 10px; padding: 15px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: sticky; bottom: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); } .fin-actionbar .fin-total-rotulo { font-size: 11.5px; color: var(--ink3); } .fin-actionbar .fin-total-valor { font-size: 18px; font-weight: 600; } .fin-actionbar .fin-actionbar-botoes { margin-left: auto; display: flex; gap: 8px; } :root[data-theme="dark"] .fin-actionbar { box-shadow: 0 4px 20px rgba(0, 0, 0, .5); } /* --- Utilitários -------------------------------------------------------- */ .fin-mono { font-family: var(--fin-font-num); } .fin-nowrap { white-space: nowrap; } .fin-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }