/* Ângulo animável do anel RGB dos botões do Painel (conic-gradient girante). Precisa de @property pra interpolar o angle; sem suporte, o anel fica estático (fallback ok). */ @property --pd-ang{ syntax:''; inherits:false; initial-value:0deg; } :root{ --bg:#faf8f3; --panel:#ffffff; --ink:#1a1a1a; --muted:#6b7280; --brand:#c9a961; --brand-2:#b08e3e; --accent:#d4af37; --gold:#c9a961; --gold-dark:#8b6f2a; --gold-light:#e8d49a; --noir:#0a0a0a; --noir-2:#1a1a1a; --noir-3:#2a2418; --ok:#16a34a; --ok-bg:#dcfce7; --warn:#d97706; --warn-bg:#fef3c7; --bad:#dc2626; --bad-bg:#fee2e2; --gray:#e5e7eb; --gray-2:#f3f4f6; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05); --radius:10px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:#0a0a0a;color:var(--ink);font:14px/1.45 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;} a{color:var(--brand-2);text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px} button:hover{background:var(--brand-2)} button:disabled{opacity:.5;cursor:not-allowed} button.ghost{background:transparent;color:var(--brand);border:1px solid var(--gray)} button.ghost:hover{background:var(--gray-2)} button.btn-tiny{padding:3px 7px;font-size:11px;border-radius:5px} input,select,textarea{font:inherit;padding:7px 10px;border:1px solid var(--gray);border-radius:8px;background:#fff} /* A abertura/fechamento da barra NÃO anima propriedade de layout. Medido em 22/08/2026 com a folha do Painel em 30 linhas: animando grid-template-columns + width + padding, a mediana do quadro ia a 50ms e o p90 a 133ms (49% dos quadros acima de 20ms) — ~20fps, a "travadinha". Só o transform da barra: p90 cai pra 16,8ms. Cada quadro de grid-template-columns refaz o layout da PÁGINA INTEIRA, tabela e inputs junto; transform não sai do compositor. O tema neon foi medido e é inocente: tirá-lo não muda nada (16,7 vs 16,7). */ /* overflow-x:CLIP, nao hidden. `hidden` num eixo faz o OUTRO eixo virar `auto`: o .app virava contentor de rolagem, e o position:sticky da barra lateral passava a se medir por ele — que nunca rola, porque quem rola e a pagina. Resultado: a barra ficava cravada no topo do documento e, ao descer a pagina, terminava no meio da tela com o preto do body (#0a0a0a) embaixo — a "continuidade" que sumia. `clip` corta a barra recolhida (translateX(-100%)) do mesmo jeito, sem criar contentor de rolagem, entao o sticky volta a valer pela janela. */ .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;overflow-x:clip} .app.sidebar-collapsed{grid-template-columns:0 1fr} /* Largura/padding fixos no estado recolhido: a trilha do grid vai a 0 na hora, e sem isto a barra seria espremida a 0 antes de terminar de deslizar. Assim ela sai inteira, por cima, e some. */ .app.sidebar-collapsed .sidebar{transform:translateX(-100%);width:240px;padding:18px 14px;overflow:hidden;z-index:60} .sidebar{background:#0a0a0a;color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;transition:transform .2s ease;will-change:transform} .btn-toggle-sidebar{position:fixed;top:14px;left:14px;z-index:50;background:#0b1220;color:#ffd24a;border:2px solid #ffd24a;border-radius:8px;width:32px;height:32px;font-size:16px;line-height:1;padding:0;cursor:pointer;box-shadow:0 0 12px rgba(255,210,74,.5);text-shadow:0 0 8px rgba(255,210,74,.85);display:none;transition:box-shadow .25s ease,filter .15s ease} .btn-toggle-sidebar:hover{background:#141a2b;box-shadow:0 0 20px rgba(255,210,74,.85);filter:brightness(1.12) saturate(1.1)} .app.sidebar-collapsed .btn-toggle-sidebar{display:block} /* Menu recolhido: afasta o título do botão ☰ (fixo no canto) pra não sobrepor */ .app.sidebar-collapsed .topbar{padding-left:40px} .sidebar-close-btn{position:absolute;top:10px;right:10px;z-index:2;background:transparent;color:#9aa7b8;border:0;font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1} .sidebar-close-btn:hover{background:#3a2f1c;color:#fff} .sidebar .logo{display:flex;gap:10px;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:24px} .sidebar .logo .mark{width:120px;height:120px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden;padding:8px;box-sizing:border-box} .sidebar .logo .mark img{width:100%;height:100%;object-fit:contain;display:block} .sidebar nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#d1d5db;margin-bottom:3px;font-size:13.5px;cursor:pointer} .sidebar nav a:hover{background:#3a2f1c;color:#fff} .sidebar nav a.active{background:rgba(255,210,74,.12);color:#ffd24a;border:1px solid rgba(255,210,74,.9)} .sidebar .icon{width:16px;text-align:center;opacity:.85} /* Atalhos de importação movidos pro rodapé da sidebar — mesmo visual minimalista dos itens de menu */ #side-tools{margin-top:16px} .sidebar .side-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#d1d5db;margin-bottom:3px;font-size:13.5px;cursor:pointer;background:transparent;border:0;width:100%;text-align:left;text-decoration:none;font-family:inherit;box-sizing:border-box} .sidebar .side-item:hover{background:#3a2f1c;color:#fff} .sidebar .sub{margin-top:20px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9aa7b8;padding:0 10px 6px} .sidebar .unit-chip{font-size:12px;padding:7px 10px;color:#cbd5e1;border-radius:6px;display:flex;justify-content:space-between;cursor:pointer} .sidebar .unit-chip:hover{background:#3a2f1c;color:#fff} .sidebar{position:sticky;top:0;isolation:isolate} .sidebar .wing-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} .sidebar .wing-bg img{position:absolute;left:50%;top:50%;height:190px;width:auto;max-width:none;opacity:.28;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center center;filter:drop-shadow(0 0 14px rgba(201,169,97,.22))} .sidebar .logo,.sidebar nav{position:relative;z-index:1} .main{padding:22px 28px;min-width:0;background:var(--bg);min-height:100vh} .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap} .topbar h1{font-size:22px;margin:0;color:var(--brand)} .topbar .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .file-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px} .card{background:var(--panel);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--gray)} .card .label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .card .value{font-size:22px;font-weight:700;margin-top:6px} .card .hint{font-size:11.5px;color:var(--muted);margin-top:4px} .card.neg .value{color:var(--bad)} .panel{background:var(--panel);border-radius:var(--radius);border:1px solid var(--gray);box-shadow:var(--shadow);margin-bottom:18px} .panel-head{padding:14px 18px;border-bottom:1px solid var(--gray);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .panel-head h2{margin:0;font-size:15px;color:var(--brand)} .panel-body{padding:14px 18px} .panel-body.pad0{padding:0} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;padding:10px 12px;background:var(--brand);color:#fff;font-weight:600;border-bottom:1px solid var(--brand-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em} td{padding:10px 12px;border-bottom:1px solid var(--gray-2)} tr:hover td{background:#fafbfd} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums} td.ctr,th.ctr{text-align:center} .badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600} .badge.aberto{background:var(--bad-bg);color:var(--bad)} .badge.agendado{background:var(--warn-bg);color:var(--warn)} .badge.pago{background:var(--ok-bg);color:var(--ok)} .badge.cancelado{background:var(--gray);color:var(--muted)} .badge.atrasado{background:#7f1d1d;color:#fff} .cat-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;border:1px solid;letter-spacing:.04em;white-space:nowrap} /* === Previsão semanal === */ .prev-wrap{overflow-x:auto} .prev-table{font-size:13px;width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--gray);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)} .prev-table thead th{background:#1f4e78;color:#fff;font-size:11px;font-weight:700;padding:8px 8px;border-bottom:1px solid #163654;border-right:1px solid #163654;text-align:center;line-height:1.2;text-transform:uppercase;letter-spacing:.02em} .prev-table thead th:last-child{border-right:0} .prev-table th{background:#1f4e78;color:#fff;font-size:11px;font-weight:700;padding:8px 8px;border:1px solid #163654;text-align:center;line-height:1.2} .prev-table td{padding:8px 10px;border-bottom:1px solid var(--gray-2);border-right:1px solid var(--gray-2);font-size:13px;font-variant-numeric:tabular-nums;vertical-align:middle;text-align:center;font-weight:700;color:#000} .prev-table td:last-child{border-right:0} .prev-table tbody tr:last-child td{border-bottom:0} .prev-table td.pos{color:var(--ok)} .prev-table td.neg{color:var(--bad)} .prev-table td.ordinal{font-style:italic;color:#475569} .prev-table tr.prev-total td{background:#1f4e78;color:#fff !important;font-weight:700;border-color:#163654} .prev-table tr.prev-total td.pos{color:#fff !important} .prev-table tr.prev-total td.neg{color:#fff !important} .prev-table tr.prev-spacer td{background:#f3f4f6;height:6px;border:0} .prev-modo-bar{display:flex;gap:8px;align-items:center;margin-bottom:10px;padding:6px 0;border-bottom:1px solid var(--gray)} .section{display:none} .section.active{display:block} /* Esconde botões globais (importação geral) e quick-add bar nas abas NFS-e e Cadastros */ body.hide-global-actions .topbar .actions > button:not(#btn-connect-folder), body.hide-global-actions .topbar .actions > input[type=file]{display:none !important} /* Aba NFS-e: mantém só "Conectar pasta" e "🔧 NFS-e" visíveis na topbar */ body.hide-global-keep-nfse .topbar .actions > button:not(#btn-connect-folder):not(#btn-import-nfse), body.hide-global-keep-nfse .topbar .actions > input[type=file]:not(#nfse-topbar-input){display:none !important} /* Aba Funcionário: mantém só "Conectar pasta" e "Funcionário" visíveis na topbar */ body.hide-global-keep-pessoal .topbar .actions > button:not(#btn-connect-folder):not(#btn-import-pessoal), body.hide-global-keep-pessoal .topbar .actions > input[type=file]:not(#pessoal-pdf-input-topbar){display:none !important} /* Modo Cloud: esconde "Conectar pasta" e o banner de "pasta nao conectada" — não fazem sentido online */ body.cloud-mode #btn-connect-folder, body.cloud-mode #disconnected-banner{display:none !important} .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center} .filters label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px} .empty{padding:30px;text-align:center;color:var(--muted)} .pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--gray-2);font-size:11px;color:var(--muted);margin-left:6px} /* Painel do Dia */ .pd-controls{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .pd-controls h2{margin:0;font-size:18px;color:var(--brand)} .pd-table{background:#fff;border-radius:10px;border:1px solid var(--gray);overflow:hidden} .pd-table td,.pd-table th{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--gray-2)} .pd-row td{vertical-align:top} .pd-detail-row td{padding:0 12px 8px 28px;background:#fafbfd} .pd-detail-list{display:flex;flex-direction:column;gap:4px;padding:6px 0} .pd-bill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray);padding:6px 10px;border-radius:6px;font-size:12px} .pd-bill .num{min-width:90px;text-align:right} .pd-bill .badge{font-size:10px} .pd-bill.pd-rec{background:#f0fdf4;border-color:#86efac} .pd-bill.pd-tr{background:#faf5ff;border-color:#d8b4fe} .saldo-real-input{width:110px;text-align:right;font-variant-numeric:tabular-nums;border:2px solid #fbbf24;background:#fffbeb} .saldo-real-input.has-real{border-color:#16a34a;background:#f0fdf4} .saldo-real-input:focus{outline:0;border-color:var(--brand);background:#fff} .pd-totals td{background:#1f4e78;color:#fff;font-weight:700;border-bottom:0} /* Setup */ .setup-section{background:#fff;border-radius:10px;border:1px solid var(--gray);padding:16px 18px;margin-bottom:14px} .setup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .setup-head h2{margin:0;font-size:15px;color:var(--brand)} /* Modal */ .modal{display:none;position:fixed;inset:0;background:rgba(15,41,66,.6);z-index:200;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal-content{background:#fff;border-radius:14px;max-width:600px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)} .modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--gray)} .modal-head h2{margin:0;color:var(--brand);font-size:18px} .modal-head button{font-size:22px;width:34px;height:34px;border-radius:50%;padding:0} .modal-body{padding:18px 22px;display:flex;flex-direction:column;gap:12px} .modal-body label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:600} .modal-body input,.modal-body select,.modal-body textarea{font-size:14px;padding:9px 11px;border:1px solid var(--gray);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit} .modal-body input:focus,.modal-body select:focus,.modal-body textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} @media (max-width:520px){.form-row,.form-row-3{grid-template-columns:1fr}} .modal-foot{display:flex;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--gray-2);margin-top:8px} /* Approval-style daily table */ .approval-actions{margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* === Painel do Dia — design refinado: cream/gold, hierarquia tipográfica, stripe lateral pra banco === */ /* Fonte responsiva: cresce com a largura (preenche tela cheia) e encolhe em meia tela. calc(...vw) desconta aproximadamente a barra lateral. Fontes internas em em escalam junto. */ .approval-table{font-size:clamp(13.5px, calc(8px + 0.45vw), 19px);table-layout:fixed;width:100%;background:#fff;border-radius:10px;overflow:hidden;border:1px solid var(--gray);border-collapse:separate;border-spacing:0;box-shadow:0 1px 3px rgba(0,0,0,.04)} /* Header: gold do brand, peso médio, uppercase com letter-spacing */ .approval-table th{font-size:.8em;background:var(--brand);color:#fff;text-align:center;padding:11px 6px;border:0;border-bottom:1px solid var(--brand-2);font-weight:600;line-height:1.2;letter-spacing:.05em;text-transform:uppercase} /* Cell base: sem bordas verticais, separador horizontal sutil, peso default 500 */ .approval-table td{padding:8px 8px;border:0;border-bottom:1px solid var(--gray-2);font-size:1em;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;text-align:center;vertical-align:middle;font-weight:500;color:#1a1a1a} .only-print{display:none} /* AG (3ª coluna): centralizado, muted */ .approval-table td:nth-child(3){text-align:center;color:var(--muted);font-weight:400} /* Origem/destino: prosa, quebra em até 2 linhas, peso normal, cor secundária */ .approval-table td.origem{white-space:normal;font-size:.88em;line-height:1.35;color:#4b5563;font-weight:400;font-style:normal} /* Inputs ocupam toda a célula */ .approval-table td.cell-edit{padding:0} .approval-table td.cell-edit input.cell-input{width:100%;padding:8px 10px;font-size:1em;text-align:center} /* Numéricos: centralizados (mesmo padrão visual do resto) */ .approval-table td.num{text-align:center;padding-right:8px} .approval-table td.cell-edit input.cell-input, .approval-table td input.pag-edit-input, .approval-table td input.tr-input, .approval-table td.cell-edit .resg-cell input.cell-input{text-align:center !important} /* === Identificação de banco via STRIPE LATERAL na cell-unit (4px), em vez de pintar linha inteira === */ .approval-table tr.bank-sicoob td.cell-unit{box-shadow:inset 4px 0 0 #16a34a} .approval-table tr.bank-santander td.cell-unit{box-shadow:inset 4px 0 0 #dc2626} .approval-table tr.bank-other td.cell-unit{box-shadow:inset 4px 0 0 #d97706} /* Cores semânticas em TEXTOS (não em fundos) — mantém identidade do banco sem ruído visual */ .approval-table tr.bank-sicoob td.tr-val{color:#15803d;font-weight:600} .approval-table tr.bank-sicoob td:nth-child(2){color:#15803d;font-weight:600} .approval-table tr.bank-santander td.tr-val{color:#991b1b;font-weight:600} .approval-table tr.bank-santander td:nth-child(2){color:#991b1b;font-weight:600} .approval-table tr.bank-other td:nth-child(2){color:#92400e;font-weight:600} /* Valores positivos/negativos só com cor de texto */ .approval-table .num.pos{color:#0e7490;font-weight:600} .approval-table .num.neg{color:#dc2626;font-weight:600} /* Hover: tint cream sutil (sem :important; sobrescreve regra global mais abaixo) */ .approval-table tr.pd-row{cursor:pointer;transition:background .12s} /* Linha de totais: gold escuro, peso forte, separador acima */ .approval-table tr.pd-totals td{background:var(--brand-2);color:#fff;font-weight:700;font-size:1.07em;border:0;border-top:2px solid var(--brand);padding:11px 8px} @media print { /* Force browser to print background colors (Sicoob green, Santander red) */ *,*::before,*::after{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important} .sidebar,.topbar,.no-print,#fs-reconnect-banner{display:none !important} .pd-dia-status,details.pd-diax{display:none !important} /* selo de conciliação é só de tela, não imprime */ .main{padding:0} .app, .app.sidebar-collapsed{grid-template-columns:1fr !important} body{background:#fff} .pd-controls{display:none !important} .approval-actions{display:none} .approval-table{font-size:16px;width:100% !important;table-layout:auto !important;border-radius:10px !important;overflow:hidden !important;border:1px solid #d1d5db !important;border-collapse:separate !important;border-spacing:0 !important} .approval-table th{font-size:13px;padding:5px 6px;background:#c9a961 !important;color:#fff !important} .approval-table td{padding:4px 8px;font-size:16px;font-weight:700;color:#000;line-height:1.15} /* Anula widths do colgroup no print — colunas distribuem o espaço naturalmente */ .approval-table colgroup col{width:auto !important} /* Containers não limitam a largura no print — tabela usa a folha inteira */ section,#sec-painel,#painel-dia-content,.main{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important} html,body{width:100% !important} /* Tudo numa folha: margem segura (acima da faixa nao-imprimivel da impressora) + tabela inteira sem quebrar */ @page{size:landscape;margin:6mm} .pd-table,.approval-table{page-break-inside:avoid !important;break-inside:avoid !important;page-break-after:avoid !important;break-after:avoid !important} /* Anula :hover na impressão — re-aplica as cores do banco por cima do tint azul */ .approval-table tr:hover td, .approval-table tr.pd-row:hover td{filter:none !important} .approval-table tr.bank-sicoob:hover td:not(.cell-unit), .approval-table tr.bank-sicoob:hover > td:not(.cell-unit){background:#dcfce7 !important} .approval-table tr.bank-sicoob.pd-row-alt:hover td:not(.cell-unit), .approval-table tr.bank-sicoob.pd-row-alt:hover > td:not(.cell-unit){background:#c4f1d3 !important} .approval-table tr.bank-santander:hover td:not(.cell-unit), .approval-table tr.bank-santander:hover > td:not(.cell-unit){background:#fee2e2 !important} .approval-table tr.bank-santander.pd-row-alt:hover td:not(.cell-unit), .approval-table tr.bank-santander.pd-row-alt:hover > td:not(.cell-unit){background:#fcc8c8 !important} /* Bank colors — keep on print (NÃO aplicar na coluna UNIDADE pra preservar a cor da categoria) */ .approval-table tr.bank-sicoob td:not(.cell-unit){background:#dcfce7 !important} .approval-table tr.bank-sicoob.pd-row-alt td:not(.cell-unit){background:#c4f1d3 !important} .approval-table tr.bank-sicoob td.tr-val{color:#15803d !important;font-weight:600} .approval-table tr.bank-sicoob td:nth-child(2), .approval-table tr.bank-sicoob td:nth-child(3), .approval-table tr.bank-sicoob td:nth-child(4){color:#15803d !important;font-weight:700} .approval-table tr.bank-santander td:not(.cell-unit){background:#fee2e2 !important} .approval-table tr.bank-santander.pd-row-alt td:not(.cell-unit){background:#fcc8c8 !important} .approval-table tr.bank-santander td.tr-val{color:#991b1b !important;font-weight:600} .approval-table tr.bank-santander td:nth-child(2), .approval-table tr.bank-santander td:nth-child(3), .approval-table tr.bank-santander td:nth-child(4){color:#991b1b !important;font-weight:700} /* Coluna UNIDADE: mantém cor da categoria + texto branco */ .approval-table td.cell-unit{color:#fff !important;font-weight:700 !important} /* Esconde contas sem movimento (não-Sicoob) ao imprimir — Sicoob sempre aparece */ .approval-table tr.bank-santander.pd-empty, .approval-table tr.bank-other.pd-empty{display:none !important} .approval-table td.tr-rec{color:#1d4ed8 !important;font-weight:600} .approval-table td.tr-env{color:#dc2626 !important;font-weight:600} .approval-table tr.pd-totals{ display:table-row !important; page-break-inside:avoid !important; break-inside:avoid !important; } /* Importante: NÃO forçar display:table-cell em todas as células da linha TOTAL, senão a coluna col-apl volta a aparecer só na linha TOTAL, desalinhando-a. */ .approval-table tr.pd-totals td:not(.col-apl):not(.no-print){ background:#c9a961 !important; color:#fff !important; font-weight:700 !important; border:0 !important; border-top:1px solid #3a2f1c !important; border-bottom:1px solid #3a2f1c !important; } .approval-table.print-no-apl tr.pd-totals td.col-apl{display:none !important} .approval-table tr.pd-totals td:first-child{ border-left:1px solid #3a2f1c !important; border-bottom-left-radius:8px !important; } .approval-table tr.pd-totals td:last-child{ border-right:1px solid #3a2f1c !important; border-bottom-right-radius:8px !important; } /* Hide editable inputs' borders, show only the number — em bold pra alinhar com os outros td */ .cell-edit input.cell-input{border:0 !important;background:transparent !important;padding:0 !important;color:inherit !important;font-weight:700 !important;font-size:16px !important} /* Hide the "+" placeholders inside cells */ .approval-table td span[style*="color:#9ca3af"]{display:none !important} .pd-detail-row{display:none !important} .approval-table{table-layout:auto !important} /* Colapsa a coluna "+" (última do colgroup) — não reserva espaço algum no print */ .approval-table colgroup col:last-child{visibility:collapse !important} /* Troca "UNIDADE" pela data no print — data um pouco maior que os outros headers */ .screen-only{display:none !important} .only-print{display:inline !important;font-size:18px} /* Esconde APLICAÇÃO/RESGATE só quando nenhuma linha tem valor */ .approval-table.print-no-apl .col-apl{display:none !important} /* Força 1 página A4: evita quebra dentro das tabelas e comprime o conteúdo */ .approval-table, .approval-wrap, .pd-print-container{page-break-inside:avoid !important;break-inside:avoid !important} .approval-table tr{page-break-inside:avoid !important;break-inside:avoid !important} html, body{ margin:0 !important; padding:0 !important; overflow:visible !important; background:#fff !important; } .main{ padding:0 !important; margin:0 !important; transform-origin:top left !important; } body.print-scale-normal .main{zoom:1 !important} body.print-scale-medium .main{zoom:0.90 !important} body.print-scale-small .main{zoom:0.80 !important} body.print-scale-tiny .main{zoom:0.70 !important} @page{ size:A4 landscape; margin:6mm; } } .cell-edit input.cell-input{width:100%;border:0;background:transparent;text-align:right;padding:6px 8px;font-size:12px;font-variant-numeric:tabular-nums;border-radius:0} .cell-edit input.cell-input:focus{outline:2px solid var(--accent);background:#fff} .cell-edit{padding:0 !important} .cell-clickable{cursor:pointer} .cell-clickable:hover{background:rgba(255,255,255,.5)} /* Resgate (positivo) vs Aplicação (negativo) */ .cell-edit.resg-pos input.cell-input,.approval-table tr td.cell-edit.resg-pos input{color:#15803d;font-weight:600} .cell-edit.resg-neg input.cell-input,.approval-table tr td.cell-edit.resg-neg input{color:#991b1b;font-weight:600} /* Transferências: cores fixas (azul = recebida, vermelho = enviada) */ .approval-table td.tr-rec,.approval-table tr.bank-sicoob td.tr-rec,.approval-table tr.bank-santander td.tr-rec{color:#1d4ed8 !important;font-weight:600} .approval-table td.tr-env,.approval-table tr.bank-sicoob td.tr-env,.approval-table tr.bank-santander td.tr-env{color:#dc2626 !important;font-weight:600} .resg-cell{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .resg-cell input.cell-input{width:100%;text-align:right;border:0;background:transparent;padding:4px 8px 0} .resg-cell input.cell-input:focus{outline:2px solid var(--accent);background:#fff} .resg-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:0 8px 3px;line-height:1} .resg-tag.resg-pos{color:#15803d} .resg-tag.resg-neg{color:#991b1b} /* Bank-brand identity on BANCO/AG/CONTA cells */ .approval-table tr.bank-sicoob td:nth-child(2), .approval-table tr.bank-sicoob td:nth-child(3), .approval-table tr.bank-sicoob td:nth-child(4){color:#15803d;font-weight:700} .approval-table tr.bank-santander td:nth-child(2), .approval-table tr.bank-santander td:nth-child(3), .approval-table tr.bank-santander td:nth-child(4){color:#991b1b;font-weight:700} /* Bank-colored chips for Origem/Destino in the daily panel */ .bank-tag{display:inline-block;padding:2px 7px;margin:0 2px 1px 0;border-radius:4px;font-style:normal;font-size:12px;font-weight:600;line-height:1.4} .bank-tag.bank-tag-sicoob{background:#bbf7d0;color:#14532d;border:1px solid #86efac} .bank-tag.bank-tag-santander{background:#fecaca;color:#7f1d1d;border:1px solid #fca5a5} .bank-tag.bank-tag-other{background:#e5e7eb;color:#374151;border:1px solid #d1d5db} .approval-table td.cell-unit{font-weight:700;text-align:center;letter-spacing:.02em;font-size:.85em;text-shadow:0 1px 0 rgba(0,0,0,.15);cursor:help} /* Pagamentos */ .pag-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center} .pag-tab{padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600;background:#fff;border:1.5px solid #e5e7eb;color:#475569;cursor:pointer} .pag-tab.active{box-shadow:0 1px 3px rgba(0,0,0,.15)} .pag-summary{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--gray);border-radius:10px;padding:12px 16px;margin-bottom:12px;flex-wrap:wrap} .pag-summary .lbl{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600} .pag-summary .val{display:block;font-size:18px;font-weight:700;color:var(--ink);margin-top:2px} .pag-table{width:100%;background:#fff;border:1px solid var(--gray);border-radius:10px;overflow:hidden;font-size:12.5px} .pag-table th{background:var(--brand);color:#fff;padding:10px 10px;font-size:11px;text-align:left;border:0;border-bottom:1px solid var(--brand-2);text-transform:uppercase;letter-spacing:.04em;font-weight:600} .pag-table td{padding:7px 10px;border-bottom:1px solid var(--gray-2)} .pag-table tr:hover td{background:#f8fafc} .pag-tipo-tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.02em} /* Contas a pagar: programado (input) vs real (soma) */ /* Célula CONTAS A PAGAR — input único editável */ .approval-table td.pag-cell-simple{padding:0;position:relative} .pag-edit-input{width:100%;height:100%;border:0;background:transparent;text-align:right;padding:6px 8px;font-size:14px;font-variant-numeric:tabular-nums;color:#dc2626;font-weight:700;cursor:text} .pag-edit-input:hover{background:rgba(255,251,235,.5)} .pag-edit-input:focus{outline:2px solid var(--accent);background:#fff} .pag-edit-input.has-real{color:#dc2626;background:rgba(254,242,242,.55)} .pag-edit-input.has-real:focus{background:#fff} .pag-mini-diff{position:absolute;bottom:1px;right:8px;font-size:9.5px;font-weight:600;line-height:1;pointer-events:none} /* Zebra cream sutil nas linhas alternadas do Painel */ .approval-table tr.pd-row-alt > td:not(.cell-unit){background:#fdfcf6} /* Hover: tint gold-cream */ .approval-table tr.pd-row:hover > td:not(.cell-unit){background:#fdf6e3 !important} /* Saldo inicial em negrito */ .approval-table td.saldo-ini-cell input.cell-input{font-size:.96em;color:#0f172a} /* Transferências editáveis */ .tr-cell-edit{padding:0;position:relative} .tr-input{width:100%;height:100%;border:0;background:transparent;text-align:right;padding:6px 8px;font-size:14px;font-variant-numeric:tabular-nums;font-weight:600;color:#475569;cursor:text} .tr-input:hover{background:rgba(243,244,246,.5)} .tr-input:focus{outline:2px solid var(--accent);background:#fff;color:#0f172a} .tr-input.has-link{color:inherit;font-weight:700} .tr-input::placeholder{color:#dbe2eb;font-weight:400} /* Select de destino vazio: discreto, só a setinha */ .tr-target-select{width:100%;font-size:13px;padding:4px 6px;border:0;background:transparent;color:#94a3b8;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 4px center;padding-right:16px;cursor:pointer} .tr-target-select:hover{color:#475569;background-color:rgba(243,244,246,.5)} .tr-target-select:focus{outline:1px solid var(--accent);background-color:#fff;color:#475569} /* Quando há transferência, select fica normal */ .tr-target-select.has-link{color:#0f172a;background-image:url("data:image/svg+xml;utf8,")} .tr-row-edit{display:flex;align-items:center;gap:3px} .tr-row-edit .tr-target-select{flex:1} .tr-row-edit .tr-del{background:transparent;color:#991b1b;border:0;border-radius:4px;font-size:14px;padding:0 6px;cursor:pointer;font-weight:700;line-height:1;opacity:.5} .tr-row-edit .tr-del:hover{background:#fee2e2;opacity:1} /* Compacta transferências na impressão — tira "adicionar nova", botão ×, e chrome dos inputs */ @media print { /* Esconde linha vazia "+ adicionar transferência" (input sem valor + select sem destino) */ .tr-cell-edit input.tr-input:not(.has-link){display:none !important} td.origem > div > select.tr-target-select{display:none !important} /* Botão × de excluir transferência */ .tr-del{display:none !important} /* Compacta inputs e selects: tira borda, chrome, padding */ .tr-input,.tr-target-select{ padding:0 2px !important; height:auto !important; min-height:0 !important; line-height:1.15 !important; font-size:14px !important; border:0 !important; background-image:none !important; -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; } /* Chips de destino (linkados): mantém cor mas reduz altura */ .tr-chip{padding:1px 5px !important;background-image:none !important;padding-right:5px !important} /* Reduz gap entre linhas de transferências */ .tr-cell-edit > div,td.origem > div{gap:0 !important} .tr-row-edit{padding:0 !important;gap:0 !important} } /* Override de :hover na impressão — precisa estar no FIM do CSS pra vencer a cascata */ @media print { .approval-table tr.pd-row:hover > td:not(.cell-unit), .approval-table tr:hover td:not(.cell-unit){background:transparent !important;filter:none !important} .approval-table tr.bank-sicoob:hover > td:not(.cell-unit), .approval-table tr.bank-sicoob:hover td:not(.cell-unit){background:#dcfce7 !important} .approval-table tr.bank-sicoob.pd-row-alt:hover > td:not(.cell-unit), .approval-table tr.bank-sicoob.pd-row-alt:hover td:not(.cell-unit){background:#c4f1d3 !important} .approval-table tr.bank-santander:hover > td:not(.cell-unit), .approval-table tr.bank-santander:hover td:not(.cell-unit){background:#fee2e2 !important} .approval-table tr.bank-santander.pd-row-alt:hover > td:not(.cell-unit), .approval-table tr.bank-santander.pd-row-alt:hover td:not(.cell-unit){background:#fcc8c8 !important} .approval-table tr.bank-other:hover td:not(.cell-unit){background:#fef3c7 !important} } /* ============================================================ TEMA ESCURO — PILOTO (KPIs + topo), estilo Cockpit Bloco isolado no fim do arquivo: fácil de estender ou remover. Escopo: shell (.main), topbar e cards de KPI (.cards .card). ============================================================ */ :root{ --ck-bg:#0f1115; --ck-card:#171a21; --ck-line:#242833; --ck-txt:#e8eaf0; --ck-muted:#9aa0ad; --ck-honey:#f5a623; --ck-honey2:#ffcf5c; } /* Backdrop do Cockpit */ .main{background:var(--ck-bg);color:var(--ck-txt)} /* Topo: título em neon na cor do dia (temática gamer, igual aos botões do painel) */ .topbar h1{ background:none; -webkit-text-fill-color:var(--dow,#cbd5ff);color:var(--dow,#cbd5ff); text-shadow:0 0 7px var(--glow,rgba(120,180,255,.7)), 0 0 18px var(--glow,rgba(120,180,255,.7)); letter-spacing:.4px;font-weight:800; } /* Botões ghost e pill do topo adaptados pro escuro */ .topbar .actions button.ghost{ background:var(--ck-card);color:var(--ck-txt);border:1px solid var(--ck-line); transition:border-color .2s,background .2s,transform .12s cubic-bezier(.4,1.4,.5,1)} .topbar .actions button.ghost:hover{ border-color:var(--ck-honey);background:#1c2029;transform:translateY(-1px)} .topbar .file-pill{background:var(--ck-card);border:1px solid var(--ck-line);color:var(--ck-muted)} /* Selo de conciliação do dia (topo do painel) — verde neon quando todas as contas do dia estão pagas */ .pd-dia-status{padding:8px 14px;border-radius:10px;margin:0 0 12px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:8px;letter-spacing:.2px} .pd-dia-status.ok{color:#43d17a;background:rgba(67,209,122,.10);border:1.5px solid #43d17a;box-shadow:0 0 16px rgba(67,209,122,.35);text-shadow:0 0 8px rgba(67,209,122,.55)} .pd-dia-status.parcial{color:#d4a017;background:rgba(212,160,23,.10);border:1.5px solid rgba(212,160,23,.7)} /* Selo "faltam X" clicável → abre modal */ .pd-faltam-btn{cursor:pointer;transition:background .15s,box-shadow .15s} .pd-faltam-btn:hover{background:rgba(212,160,23,.20);box-shadow:0 0 14px rgba(212,160,23,.3)} .pd-faltam-hint{font-weight:600;opacity:.8;font-size:11px} /* Modal das contas que faltam */ .pf-overlay{position:fixed;inset:0;background:rgba(6,8,14,.62);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:clamp(12px,6vh,60px) 14px;overflow:auto;backdrop-filter:blur(2px)} .pf-modal{width:min(560px,100%);background:#0e1420;border:1px solid rgba(212,160,23,.35);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.55),0 0 40px rgba(212,160,23,.08);overflow:hidden;color:#e5e7eb} .pf-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(212,160,23,.08),transparent)} .pf-head h2{font-size:16px;margin:0;font-weight:800;color:#f0d488;display:flex;align-items:center;gap:8px} .pf-head .pf-date{font-size:12px;font-weight:600;color:#94a3b8} .pf-head .pf-count{background:#d4a017;color:#1a1200;font-weight:800;font-size:12px;min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center} .pf-head .pf-sp{flex:1} .pf-x{border:0;background:rgba(255,255,255,.06);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;color:#9aa7b8;display:inline-flex;align-items:center;justify-content:center} .pf-x:hover{background:rgba(255,255,255,.12);color:#fff} .pf-body{max-height:60vh;overflow:auto;padding:8px} .pf-grp{margin-bottom:8px} .pf-grp-h{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c9a961;background:rgba(201,169,97,.08);border-radius:8px;margin-bottom:2px} .pf-row{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.05)} .pf-row:last-child{border-bottom:0} .pf-row .pf-f{flex:1;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pf-row .pf-s{font-size:10px;font-weight:700;text-transform:uppercase;padding:2px 7px;border-radius:999px;color:#94a3b8;background:rgba(148,163,184,.12)} .pf-row .pf-s.agendado{color:#60a5fa;background:rgba(96,165,250,.14)} .pf-row .pf-s.aberto{color:#fbbf24;background:rgba(251,191,36,.14)} .pf-row b{color:#f87171;min-width:92px;text-align:right;font-variant-numeric:tabular-nums} .pf-empty{padding:24px;text-align:center;color:#43d17a;font-weight:700} .pf-foot{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#9aa7b8;background:rgba(0,0,0,.2)} .pf-foot b{color:#f87171;font-size:16px;font-variant-numeric:tabular-nums} /* Cards de KPI — escuros, com glow ambiente, sheen, faísca e hover elástico */ .cards .card{ position:relative;overflow:hidden; background:linear-gradient(180deg,#12151c 0%,var(--ck-card) 100%); border:1px solid var(--ck-line);border-radius:14px; box-shadow:0 0 0 1px rgba(245,166,35,.05); transition:border-color .25s,box-shadow .25s,transform .3s cubic-bezier(.4,1.4,.5,1); animation:ckGlow 4.5s ease-in-out infinite} .cards .card:hover{ transform:translateY(-3px); border-color:rgba(245,166,35,.4); box-shadow:0 0 0 1px rgba(245,166,35,.18),0 10px 30px -10px rgba(245,166,35,.5)} /* Reflexo diagonal (sheen) que varre o card */ .cards .card::after{ content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent); transform:skewX(-18deg);pointer-events:none; animation:ckSweep 7s ease-in-out infinite} /* Faísca no canto (como o pedSpark do Cockpit) */ .cards .card::before{ content:"✦";position:absolute;top:9px;right:12px;z-index:1; font-size:10px;color:var(--ck-honey2);text-shadow:0 0 6px rgba(255,207,92,.9); opacity:0;pointer-events:none;animation:ckTwinkle 3.4s ease-in-out infinite} /* Escalona as animações pra não piscarem tudo junto */ .cards .card:nth-child(2){animation-delay:.6s} .cards .card:nth-child(2)::before{animation-delay:.5s} .cards .card:nth-child(2)::after{animation-delay:1.2s} .cards .card:nth-child(3){animation-delay:1.2s} .cards .card:nth-child(3)::before{animation-delay:1.1s} .cards .card:nth-child(3)::after{animation-delay:2.4s} .cards .card:nth-child(4){animation-delay:1.8s} .cards .card:nth-child(4)::before{animation-delay:1.7s} .cards .card:nth-child(4)::after{animation-delay:3.6s} .cards .card:nth-child(5){animation-delay:2.4s} .cards .card:nth-child(5)::before{animation-delay:2.3s} .cards .card:nth-child(5)::after{animation-delay:4.8s} .cards .card .label{color:var(--ck-muted);position:relative;z-index:1} .cards .card .hint{color:var(--ck-muted);position:relative;z-index:1} /* Número em degradê dourado com shimmer que anda */ .cards .card .value{ position:relative;z-index:1; background:linear-gradient(90deg,var(--ck-honey) 0%,var(--ck-honey2) 30%,#fff6dd 50%,var(--ck-honey2) 70%,var(--ck-honey) 100%); background-size:220% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:ckShine 4.5s linear infinite} /* Preserva valores com cor semântica: .neg e os que têm color inline (verde/vermelho/âmbar) */ .cards .card.neg .value, .cards .card .value[style*="color"]{ background:none;-webkit-text-fill-color:currentColor;animation:none} .cards .card.neg .value{color:var(--bad)} /* Card de alerta (.neg) pulsa vermelho, como o pedPulse do Cockpit */ .cards .card.neg{animation:ckPulseBad 2.2s ease-in-out infinite} @keyframes ckShine{to{background-position:-220% center}} @keyframes ckGlow{ 0%,100%{box-shadow:0 0 0 1px rgba(245,166,35,.05)} 50%{box-shadow:0 0 0 1px rgba(245,166,35,.14),0 0 22px -8px rgba(245,166,35,.35)}} @keyframes ckSweep{ 0%{left:-70%} 55%,100%{left:140%}} @keyframes ckTwinkle{ 0%,100%{opacity:0;transform:scale(.5)} 45%{opacity:.95;transform:scale(1)}} @keyframes ckPulseBad{ 0%,100%{box-shadow:0 0 0 0 rgba(229,96,94,.0),0 0 0 1px rgba(229,96,94,.25)} 50%{box-shadow:0 0 22px -6px rgba(229,96,94,.55),0 0 0 1px rgba(229,96,94,.5)}} /* Acessibilidade: respeita quem desativa animações */ @media (prefers-reduced-motion:reduce){ .cards .card,.cards .card::before,.cards .card::after, .cards .card .value,.cards .card.neg{animation:none} } /* ============================================================ PAINEL DO DIA — TEMA "GAMER" / RGB NEON Escopo: só #sec-painel (aba Painel do Dia) e só @media screen. A impressão (bloco @media print acima) fica 100% intocada. ============================================================ */ @media screen { :root{ --neon-cyan:#22d3ee; --neon-mag:#e879f9; --neon-lime:#a3e635; --neon-gold:#ffd24a; --neon-red:#ff4d6d; --neon-blue:#5aa9ff; } /* Quando a aba Painel está ativa, o fundo do conteúdo vira preto (tira a moldura creme). :has é ignorado por navegadores antigos → cai de volta pro card escuro, sem quebrar. */ .main:has(#sec-painel.section.active){ background:#04050a; } /* Arena escura com brilho RGB "respirando" tipo LED. overflow:visible (NÃO hidden) — senão a arena vira scroll-container e quebra o position:sticky do cabeçalho. A fita RGB do topo é arredondada pra não vazar o canto. */ #sec-painel.section.active{ position:relative; overflow:visible; border-radius:16px; padding:16px 16px 22px; margin-top:4px; background: radial-gradient(1100px 380px at 12% -8%, rgba(34,211,238,.12), transparent 60%), radial-gradient(1000px 480px at 92% -4%, rgba(232,121,249,.12), transparent 55%), radial-gradient(900px 620px at 50% 118%, rgba(163,230,53,.09), transparent 60%), linear-gradient(180deg,#080b12,#05060b 60%,#04050a); border:1.5px solid #182136; /* Brilho FIXO na cor do dia (sem rainbow animado) */ box-shadow:0 0 34px var(--halo), inset 0 0 70px rgba(0,0,0,.65); transition:box-shadow .4s ease; } /* Cor do dia da semana (elemento do kanji), setada em .main[data-dow] pelo app.js. Fica no .main (ancestral comum) p/ título, cabeçalhos, arena E botões do topo herdarem. --dow = cor sólida | --glow = brilho forte (texto/borda) | --halo = brilho suave (arena) */ .main{ --dow:#cbd5ff; --glow:rgba(120,180,255,.85); --halo:rgba(120,180,255,.3) } .main[data-dow="0"]{ --dow:#ff8a3d; --glow:rgba(255,138,61,.9); --halo:rgba(255,138,61,.34) } /* 日 Sol */ .main[data-dow="1"]{ --dow:#c3d0f0; --glow:rgba(195,208,240,.9); --halo:rgba(195,208,240,.32) } /* 月 Lua */ .main[data-dow="2"]{ --dow:#ff4d4d; --glow:rgba(255,77,77,.9); --halo:rgba(255,77,77,.34) } /* 火 Fogo */ .main[data-dow="3"]{ --dow:#2f9bff; --glow:rgba(47,155,255,.9); --halo:rgba(47,155,255,.34) } /* 水 Água */ .main[data-dow="4"]{ --dow:#43d17a; --glow:rgba(67,209,122,.9); --halo:rgba(67,209,122,.34) } /* 木 Madeira */ .main[data-dow="5"]{ --dow:#ffd24a; --glow:rgba(255,210,74,.95); --halo:rgba(255,210,74,.36) } /* 金 Ouro */ .main[data-dow="6"]{ --dow:#cf9a5c; --glow:rgba(207,154,92,.9); --halo:rgba(207,154,92,.34) } /* 土 Terra */ /* Controles (nav de data + título) */ #sec-painel .pd-controls h2, #sec-painel #pd-title{ font-weight:700; background:none; -webkit-text-fill-color:currentColor; color:var(--dow,#cbd5ff); /* cor do dia herdada de #sec-painel[data-dow] */ /* Neon gamer: 3 camadas de glow na cor do dia (brilho justo + médio + bloom largo) */ filter: drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 11px var(--glow)) drop-shadow(0 0 24px var(--glow)); animation:pdTitleNeon 2.6s ease-in-out infinite; transition:color .3s ease; } /* Pulsação sutil do neon (respira), mantendo a cor única do dia */ @keyframes pdTitleNeon{ 0%,100%{ filter:drop-shadow(0 0 4px var(--glow)) drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 20px var(--glow)); } 50% { filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 34px var(--glow)); } } #sec-painel .pd-controls .ghost{ background:rgba(255,255,255,.03); color:var(--dow); border:1px solid #26324d } #sec-painel .pd-controls .ghost:hover{ border-color:var(--dow); color:var(--dow) } #sec-painel input[type=date]{ background:#0b1220; color:var(--dow); border:1px solid #26324d; color-scheme:dark } /* ===== TABELA ===== */ #sec-painel .approval-table{ background:#080b13; background:color-mix(in srgb, var(--dow) 5%, #080b13); /* fundo com tinta sutil do dia */ border:1px solid #1c2740; box-shadow:0 0 26px var(--halo), inset 0 0 44px rgba(0,0,0,.55); /* glow na cor do dia */ color:#dbe6ff; overflow:visible; /* precisa pro cabeçalho sticky funcionar (a versão light usa overflow:hidden) */ } #sec-painel .approval-table th{ background:#000; /* cabeçalho preto */ color:var(--dow,#a6f0ff); /* letras na cor do dia */ border-bottom:1px solid #223052; text-shadow:0 0 10px var(--glow), 0 0 22px var(--glow); /* glow na cor do dia */ letter-spacing:.07em; } /* Cabeçalho FIXO: acompanha o scroll (gruda no topo). Sticky no thead segura as 2 linhas juntas. */ #sec-painel .approval-table thead{ position:sticky; top:0; z-index:6 } /* Sombra do cabeçalho fixo (sem a linha neon embaixo — removida a pedido) */ #sec-painel .approval-table thead tr:last-child th{ box-shadow:0 6px 16px rgba(0,0,0,.55) } /* Botão "+" de cada linha (coluna .ctr): borda + glow na cor do dia */ #sec-painel .approval-table button.btn-tiny{ border:1px solid var(--dow); background:#0b1220; color:var(--dow); box-shadow:0 0 8px var(--halo); text-shadow:0 0 6px var(--glow), 0 0 12px var(--glow); /* neon gamer na cor do dia */ transition:box-shadow .2s ease, background .2s ease, color .2s ease; } #sec-painel .approval-table button.btn-tiny:hover{ background:#141a2b; background:color-mix(in srgb, var(--dow) 15%, #0b1220); color:var(--dow); box-shadow:0 0 12px var(--glow); text-shadow:0 0 8px var(--glow), 0 0 16px var(--glow); } #sec-painel .approval-table td{ background:transparent; color:#d7e3ff; border-bottom:1px solid rgba(255,255,255,.06); /* fallback */ border-bottom:1px solid color-mix(in srgb, var(--dow) 16%, transparent); /* divisor na cor do dia */ } #sec-painel .approval-table td:nth-child(3){ color:#7f8fb5 } #sec-painel .approval-table td.origem{ color:#9fb2d6 } /* Zebra + hover neon (id vence os !important claros da versão light) */ #sec-painel .approval-table tr.pd-row-alt > td:not(.cell-unit){ background:rgba(120,160,255,.045) } #sec-painel .approval-table tr.pd-row:hover > td:not(.cell-unit){ background:rgba(255,255,255,.05) !important; background:color-mix(in srgb, var(--dow) 12%, transparent) !important } /* ===== Célula UNIDADE = pílula ESCURA neon (igual aos chips de destino) ===== Tira o preenchimento sólido (inline) e usa a cor da categoria como TEXTO brilhante + contorno/glow. A listra LED do banco fica na lateral via a var --bankled (setada pelas classes bank-*), pra não brigar com o box-shadow. Casa a categoria pela cor sólida que o app.js manda inline (CAT_COLORS). */ #sec-painel .approval-table td.cell-unit{ --bankled:transparent; --catled:rgba(148,163,184,.5); /* anel — fallback cinza */ --catglow:rgba(148,163,184,.20); /* brilho externo */ background:rgba(148,163,184,.10) !important; color:#cbd5e1 !important; box-shadow:inset 4px 0 0 var(--bankled), inset 0 0 0 1px var(--catled), 0 0 15px var(--catglow); text-shadow:0 0 10px currentColor; filter:none; } /* Banco → cor da listra LED lateral (só define a variável) */ #sec-painel .approval-table tr.bank-sicoob td.cell-unit{ --bankled:#22ff9c } #sec-painel .approval-table tr.bank-santander td.cell-unit{ --bankled:#ff4d6d } #sec-painel .approval-table tr.bank-other td.cell-unit{ --bankled:#ffd24a } /* Categoria → tint de fundo + texto + anel/glow (match pela cor inline) */ #sec-painel .approval-table td.cell-unit[style*="3b82f6"]{ background:rgba(59,130,246,.13)!important; color:#8ab6ff!important; --catled:rgba(59,130,246,.6); --catglow:rgba(59,130,246,.28) } /* HOLDING */ #sec-painel .approval-table td.cell-unit[style*="fb7185"]{ background:rgba(251,113,133,.13)!important; color:#ff9db0!important; --catled:rgba(251,113,133,.6); --catglow:rgba(251,113,133,.28) } /* FÁBRICA */ #sec-painel .approval-table td.cell-unit[style*="f59e0b"]{ background:rgba(245,158,11,.13)!important; color:#ffcb5e!important; --catled:rgba(245,158,11,.6); --catglow:rgba(245,158,11,.28) } /* LOJA PRÓPRIA */ #sec-painel .approval-table td.cell-unit[style*="16a34a"]{ background:rgba(22,163,74,.15)!important; color:#57e08a!important; --catled:rgba(22,163,74,.65); --catglow:rgba(22,163,74,.30) } /* FRANQUEADORA */ #sec-painel .approval-table td.cell-unit[style*="f97316"]{ background:rgba(249,115,22,.13)!important; color:#ffa458!important; --catled:rgba(249,115,22,.6); --catglow:rgba(249,115,22,.28) } /* RESTAURANTE */ #sec-painel .approval-table td.cell-unit[style*="a855f7"]{ background:rgba(168,85,247,.14)!important; color:#cf95ff!important; --catled:rgba(168,85,247,.6); --catglow:rgba(168,85,247,.30) } /* TERCEIRIZADA */ #sec-painel .approval-table td.cell-unit[style*="ec4899"]{ background:rgba(236,72,153,.14)!important; color:#ff86c6!important; --catled:rgba(236,72,153,.6); --catglow:rgba(236,72,153,.30) } /* PET SHOP */ /* Números com glow — base neon claro pra TODO número (saldo inicial/parcial/final, aplicação…) */ #sec-painel .approval-table td.num, #sec-painel .approval-table td.num input.cell-input, #sec-painel .approval-table td.saldo-ini-cell input.cell-input, #sec-painel .approval-table td.cell-edit input.cell-input{ text-shadow:0 0 8px currentColor } /* Cores próprias (mais específicas) sobrepõem o glow base com o tom certo */ #sec-painel .approval-table .num.pos{ color:#3affd0; text-shadow:0 0 9px rgba(58,255,208,.6) } #sec-painel .approval-table .num.neg{ color:#ff5c7a; text-shadow:0 0 9px rgba(255,92,122,.6) } #sec-painel .approval-table td.tr-rec{ color:#5aa9ff !important; text-shadow:0 0 9px rgba(90,169,255,.5) } #sec-painel .approval-table td.tr-env{ color:#ff6b6b !important; text-shadow:0 0 9px rgba(255,107,107,.5) } /* Valores das transferências (inputs com cor inline verde/vermelha) — glow na própria cor */ #sec-painel .approval-table td.tr-cell-edit input.tr-input, #sec-painel .approval-table td.num input.tr-input{ text-shadow:0 0 8px currentColor } #sec-painel .approval-table tr.bank-sicoob td:nth-child(2), #sec-painel .approval-table tr.bank-sicoob td.tr-val{ color:#5cf2a6 !important } #sec-painel .approval-table tr.bank-santander td:nth-child(2), #sec-painel .approval-table tr.bank-santander td.tr-val{ color:#ff8095 !important } /* Linha de TOTAIS: sem LED strip (removido a pedido) — só preenchimento escuro + números dourados */ #sec-painel .approval-table tr.pd-totals td{ background:linear-gradient(180deg,#1b1405,#0d0a02); color:#ffd24a; text-shadow:0 0 12px rgba(255,210,74,.55); border-top:2px solid var(--dow); /* linha de cima do TOTAL na cor do dia */ border-bottom:2px solid var(--dow); /* linha de baixo do TOTAL na cor do dia */ } @media (prefers-reduced-motion:reduce){ #sec-painel .approval-table tr.pd-totals td{ animation:none } } /* ===== INPUTS na tabela escura ===== */ #sec-painel .approval-table input, #sec-painel .cell-edit input.cell-input, #sec-painel .tr-input{ color:#e5edff } #sec-painel .approval-table td.saldo-ini-cell input.cell-input{ color:#eaf1ff } #sec-painel .tr-input{ color:#bcd0ff } #sec-painel .tr-input::placeholder{ color:#33405c } /* Vermelho forte LIMPO, igual ao número do lado (sem glow, sem halo/fundo claro). !important porque a regra genérica de input (#sec-painel .cell-edit input.cell-input) tem especificidade maior e pintava o número de branco/azulado. */ #sec-painel .approval-table td.pag-cell-simple input.pag-edit-input{ color:#ff2544 !important; font-weight:800; text-shadow:0 0 8px rgba(255,37,68,.8), 0 0 16px rgba(255,37,68,.45) } #sec-painel .approval-table td.pag-cell-simple input.pag-edit-input.has-real{ color:#ff2544 !important; background:transparent } #sec-painel .approval-table td.pag-cell-simple input.pag-edit-input:focus{ background:rgba(255,37,68,.12); color:#ff2544 !important } #sec-painel .approval-table input:focus, #sec-painel .cell-edit input.cell-input:focus, #sec-painel .tr-input:focus, #sec-painel .pag-edit-input:focus{ outline:2px solid var(--dow); box-shadow:0 0 12px var(--glow); background:rgba(255,255,255,.06); background:color-mix(in srgb, var(--dow) 14%, transparent) } #sec-painel .cell-clickable:hover{ background:rgba(255,255,255,.05); background:color-mix(in srgb, var(--dow) 12%, transparent) } #sec-painel .pag-edit-input:hover, #sec-painel .tr-input:hover{ background:rgba(34,211,238,.06) } /* Saldo real (conferência): amarelo/verde neon */ #sec-painel .saldo-real-input{ border-color:#ffd24a; background:rgba(255,210,74,.07); color:#ffe9a8 } #sec-painel .saldo-real-input.has-real{ border-color:#3affd0; background:rgba(58,255,208,.07); color:#c8fff0 } /* Selects de destino */ #sec-painel .tr-target-select{ color:#7f9bd0 } #sec-painel .tr-target-select.has-link{ color:#e5edff } #sec-painel .tr-target-select option{ background:#0b1220; color:#e5edff } /* Chips de origem/destino (bancos) */ #sec-painel .bank-tag-sicoob{ background:rgba(34,255,156,.14); color:#8effc4; border:1px solid rgba(34,255,156,.5); box-shadow:0 0 9px rgba(34,255,156,.28) } #sec-painel .bank-tag-santander{ background:rgba(255,77,109,.14); color:#ffb0bd; border:1px solid rgba(255,77,109,.5); box-shadow:0 0 9px rgba(255,77,109,.28) } #sec-painel .bank-tag-other{ background:rgba(148,163,184,.14); color:#cbd5e1; border:1px solid rgba(148,163,184,.45) } /* Linhas de detalhe (setinha ▸ / folha / transferências) */ #sec-painel .pd-detail-row td{ background:#070b14 } #sec-painel .pd-bill{ background:#0d1424; border:1px solid #223052; color:#d7e3ff } #sec-painel .pd-bill.pd-rec{ background:rgba(34,255,156,.09); border-color:rgba(34,255,156,.4) } #sec-painel .pd-bill.pd-tr{ background:rgba(232,121,249,.09); border-color:rgba(232,121,249,.4) } /* Respeita quem desativa animações */ @media (prefers-reduced-motion:reduce){ #sec-painel #pd-title{ animation:none } } /* ===== Botões do Painel: borda RGB LED animada (igual à fita do topo) ===== Gradiente em border-box deslizando. Sem !important em background-position (senão a animação para). */ .main:has(#sec-painel.section.active) .topbar .actions button, #sec-painel .pd-controls .ghost, #sec-painel .pd-controls button, #sec-painel #pd-actions-slot button, #sec-painel input[type=date]{ border:2px solid var(--dow); /* borda na cor do dia (sem rainbow girando) */ border-radius:10px; background:#0b1220; color:var(--dow); /* letra na cor do dia (não mais branca) */ box-shadow:0 0 12px var(--halo); /* glow suave na cor do dia */ text-shadow:0 0 6px var(--glow), 0 0 14px var(--glow); /* neon gamer na mesma cor */ transition:box-shadow .3s ease, border-color .3s ease, filter .15s ease; } .main:has(#sec-painel.section.active) .topbar .actions button:hover, #sec-painel .pd-controls .ghost:hover, #sec-painel .pd-controls button:hover, #sec-painel #pd-actions-slot button:hover{ background:#141a2b; /* fallback */ background:color-mix(in srgb, var(--dow) 15%, #0b1220); /* tinta sutil do dia (sem fill "creme") */ border-color:var(--dow); box-shadow:0 0 18px var(--glow); /* glow forte na cor do dia */ filter:brightness(1.15) saturate(1.1); color:var(--dow); /* letra segue na cor do dia */ text-shadow:0 0 8px var(--glow), 0 0 18px var(--glow); /* neon mais forte no hover */ } /* input de data: cursor/relógio claro sobre o fundo escuro */ #sec-painel input[type=date]{ color-scheme:dark } /* Ícone do date-picker nativo recolorido na cor do dia (máscara SVG) + glow neon */ #sec-painel input[type=date]::-webkit-calendar-picker-indicator{ cursor:pointer; width:16px; height:16px; opacity:1; -webkit-appearance:none; appearance:none; background-color:var(--dow); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 0 3px var(--glow)); } @media (prefers-reduced-motion:reduce){ .main:has(#sec-painel.section.active) .topbar .actions button, #sec-painel .pd-controls .ghost, #sec-painel .pd-controls button, #sec-painel #pd-actions-slot button, #sec-painel input[type=date]{ animation:none } } /* ===== DESTINO (Transferência Enviada) com a MESMA cara da ORIGEM (Recebida): pílulas escuras com contorno neon, em vez do fundo sólido claro. Os chips do destino trazem a cor do banco INLINE (vinda do app.js), então caso pela cor inline de cada banco e sobrescrevo com !important — só na tela. A impressão (fora do @media screen) mantém as pílulas claras originais. */ #sec-painel .tr-chip{ color:#e7eeff !important; border-radius:6px !important; /* setinha clara (a original é escura e sumiria no fundo dark) */ background-image:url("data:image/svg+xml;utf8,") !important; } /* Sicoob (verde) — inline #bbf7d0 */ #sec-painel .tr-chip[style*="bbf7d0"]{ background-color:rgba(34,255,156,.14) !important; border:1px solid rgba(34,255,156,.55) !important; color:#8effc4 !important; box-shadow:0 0 9px rgba(34,255,156,.28) !important } /* Santander (vermelho) — inline #fecaca */ #sec-painel .tr-chip[style*="fecaca"]{ background-color:rgba(255,77,109,.14) !important; border:1px solid rgba(255,77,109,.55) !important; color:#ffb0bd !important; box-shadow:0 0 9px rgba(255,77,109,.28) !important } /* Outro banco (cinza) — inline #e5e7eb */ #sec-painel .tr-chip[style*="e5e7eb"]{ background-color:rgba(148,163,184,.14) !important; border:1px solid rgba(148,163,184,.5) !important; color:#cbd5e1 !important } /* Vinculado mas ainda não coberto (amarelo tracejado) — inline #fef9c3 */ #sec-painel .tr-chip[style*="fef9c3"]{ background-color:rgba(255,210,74,.12) !important; border:1px dashed rgba(255,210,74,.6) !important; color:#ffe08a !important } } /* ============================================================ BARRA LATERAL — TEMA "GAMER" / HUD NEON Mesma linguagem do Painel do Dia (vars --neon-* do bloco acima), na cor da marca. Só @media screen — a impressão nem vê a sidebar (.no-print). Glow em item com canto chanfrado usa filter:drop-shadow, não box-shadow: o clip-path corta a box-shadow, e o drop-shadow segue a silhueta. ============================================================ */ @media screen { .sidebar{ --sb-gold:#ffd24a; --sb-cyan:#22d3ee; /* Grade de HUD + brilho dourado no topo, tudo em background (não em ::before: a sidebar tem overflow:auto, e um pseudo absoluto sairia junto no scroll). */ background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 34px), radial-gradient(520px 240px at 50% -8%, rgba(255,210,74,.13), transparent 62%), radial-gradient(420px 340px at 50% 108%, rgba(34,211,238,.08), transparent 60%), linear-gradient(180deg,#0b0d14,#07080d 55%,#05060a); border-right:2px solid transparent; border-image:linear-gradient(180deg, rgba(255,210,74,0), var(--sb-gold) 22%, var(--sb-cyan) 55%, var(--sb-gold) 84%, rgba(255,210,74,0)) 1; box-shadow:inset -22px 0 40px rgba(0,0,0,.5), 8px 0 26px rgba(255,210,74,.06); } /* Logo: moldura acesa, respirando devagar */ .sidebar .logo .mark{ border:1.5px solid rgba(255,210,74,.55); box-shadow:0 0 22px rgba(255,210,74,.25), inset 0 0 20px rgba(255,210,74,.10); animation:sbLogo 6s ease-in-out infinite; } @keyframes sbLogo{ 0%,100%{ box-shadow:0 0 18px rgba(255,210,74,.22), inset 0 0 18px rgba(255,210,74,.08) } 50% { box-shadow:0 0 30px rgba(255,210,74,.42), inset 0 0 22px rgba(255,210,74,.14) } } /* Asa do fundo: pulsa junto, bem discreta */ .sidebar .wing-bg img{ animation:sbWing 7.5s ease-in-out infinite } @keyframes sbWing{ 0%,100%{ opacity:.24; filter:drop-shadow(0 0 12px rgba(201,169,97,.18)) } 50% { opacity:.34; filter:drop-shadow(0 0 22px rgba(255,210,74,.28)) } } /* ---- itens do menu: placa chanfrada de HUD ---- */ .sidebar nav a, .sidebar .side-item{ position:relative; z-index:1; border:1px solid transparent; border-radius:6px; padding:9px 12px; background:linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,0)); clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition:transform .16s ease, background .2s ease, color .2s ease, filter .25s ease, border-color .2s ease; } /* Barra indicadora que acende à esquerda */ .sidebar nav a::before, .sidebar .side-item::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:0; border-radius:0 2px 2px 0; background:var(--sb-gold); transition:height .18s ease; } .sidebar nav a:hover{ background:linear-gradient(90deg, rgba(255,210,74,.16), rgba(255,210,74,.02)); border-color:rgba(255,210,74,.38); color:#fff; transform:translateX(3px); filter:drop-shadow(0 0 8px rgba(255,210,74,.35)); text-shadow:0 0 9px rgba(255,210,74,.55); } .sidebar nav a:hover::before{ height:58% } /* Item ativo: SÓ O CONTORNO aceso, no mesmo idioma dos botões do topo — fundo escuro, borda e texto dourados, brilho respirando. A placa dourada cheia que estava aqui (fundo sólido com texto preto) era o único bloco maciço da tela e destoava de todo o resto (Danilo, 22/08/2026). O brilho é filter:drop-shadow, não box-shadow: o clip-path do chanfro cortaria a box-shadow. */ .sidebar nav a.active{ background:linear-gradient(90deg, rgba(255,210,74,.18), rgba(255,210,74,.03)); color:var(--sb-gold); font-weight:700; letter-spacing:.01em; border-color:rgba(255,210,74,.9); text-shadow:0 0 10px rgba(255,210,74,.8); animation:sbActive 3.4s ease-in-out infinite; } .sidebar nav a.active::before{ height:72%; background:var(--sb-gold) } .sidebar nav a.active::after{ content:'▸'; margin-left:auto; font-size:12px; opacity:.7; } @keyframes sbActive{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(255,210,74,.45)) } 50% { filter:drop-shadow(0 0 16px rgba(255,210,74,.75)) } } /* Ícones com um fio de brilho */ .sidebar .icon{ filter:drop-shadow(0 0 4px rgba(255,210,74,.30)); transition:filter .2s ease } .sidebar nav a:hover .icon, .sidebar .side-item:hover .icon{ filter:drop-shadow(0 0 8px rgba(255,210,74,.65)) } .sidebar nav a.active .icon{ filter:drop-shadow(0 0 7px rgba(255,210,74,.7)) } /* ---- portais externos (Hachibanco, RH): mesma placa, em ciano ---- */ #side-tools{ margin-top:18px; padding-top:14px; position:relative; } #side-tools::before{ content:''; position:absolute; top:0; left:6px; right:6px; height:1px; background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent); } .sidebar .side-item::before{ background:var(--sb-cyan) } .sidebar .side-item:hover{ background:linear-gradient(90deg, rgba(34,211,238,.16), rgba(34,211,238,.02)); border-color:rgba(34,211,238,.45); color:#e8fdff; transform:translateX(3px); filter:drop-shadow(0 0 8px rgba(34,211,238,.4)); text-shadow:0 0 9px rgba(34,211,238,.6); } .sidebar .side-item:hover::before{ height:58% } .sidebar .side-item:hover .icon{ filter:drop-shadow(0 0 8px rgba(34,211,238,.7)) } /* Botão de recolher: mesmo neon do ☰ que reabre */ .sidebar-close-btn{ color:rgba(255,210,74,.75); border:1px solid rgba(255,210,74,.28) !important; transition:color .2s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease; } .sidebar-close-btn:hover{ background:rgba(255,210,74,.10); color:#ffd24a; border-color:rgba(255,210,74,.7) !important; box-shadow:0 0 14px rgba(255,210,74,.45); text-shadow:0 0 8px rgba(255,210,74,.8); } /* Chips de unidade e rótulos de seção entram na mesma língua */ .sidebar .sub{ color:rgba(255,210,74,.65); text-shadow:0 0 8px rgba(255,210,74,.25) } .sidebar .unit-chip{ transition:background .2s ease, color .2s ease, transform .16s ease } .sidebar .unit-chip:hover{ background:rgba(255,210,74,.12); color:#fff; transform:translateX(2px) } /* Selo de versão/estado (#fs-status, injetado pelo CloudStorage): vira placa de HUD. Só forma e brilho — as cores por estado (on/sync/err/off) continuam as de lá. */ .sidebar #fs-status{ font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; letter-spacing:.08em; font-size:10.5px; border-radius:4px; clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); text-shadow:0 0 8px currentColor; } /* Barra de rolagem da sidebar, quando o menu cresce */ .sidebar{ scrollbar-width:thin; scrollbar-color:rgba(255,210,74,.5) transparent } .sidebar::-webkit-scrollbar{ width:8px } .sidebar::-webkit-scrollbar-track{ background:rgba(255,255,255,.03) } .sidebar::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#ffd24a,#a5813c); border-radius:8px; box-shadow:0 0 8px rgba(255,210,74,.35); } /* Quem pediu menos movimento fica só com o visual, sem as pulsações */ @media (prefers-reduced-motion: reduce){ .sidebar .logo .mark, .sidebar .wing-bg img, .sidebar nav a.active{ animation:none } } } /* ===== Previsão — resumo do mês, encadeamento, risco e edição ===== */ /* Cabeçalho: onde o caixa termina o mês e qual é a semana mais apertada. */ .prev-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px} .prev-card{background:#fff;border:1px solid var(--gray);border-left:3px solid #94a3b8;border-radius:8px;padding:10px 12px;box-shadow:var(--shadow)} .prev-card-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700} .prev-card-v{font-size:19px;font-weight:700;color:#1f2937;font-variant-numeric:tabular-nums;margin:3px 0 1px} .prev-card-s{font-size:10.5px;color:var(--muted)} .prev-card.pos{border-left-color:var(--ok)} .prev-card.pos .prev-card-v{color:var(--ok)} .prev-card.neg{border-left-color:var(--bad)} .prev-card.neg .prev-card-v{color:var(--bad)} .prev-card.alerta{border-left-color:#d97706;background:#fffbeb} .prev-card.alerta .prev-card-v{color:#b45309} .prev-chart{background:#fff;border:1px solid var(--gray);border-radius:8px;margin-bottom:14px;font-family:inherit} .prev-dica{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right;max-width:46ch;line-height:1.3} .prev-alerta{background:#fef2f2;border:1px solid #fecaca;border-left:3px solid var(--bad);border-radius:8px;padding:9px 12px;margin-bottom:12px;font-size:12.5px;color:#991b1b} .prev-alerta code{background:#fff;padding:1px 5px;border-radius:4px;font-size:11.5px} .prev-week-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 4px} .prev-abertura-nota{font-size:11px;color:var(--muted);font-style:italic} .prev-table .prev-th-period{font-size:18px;letter-spacing:0;text-transform:none} .prev-table td.prev-conta{text-align:left;color:#fff} .prev-table td.prev-pos{color:var(--ok);font-weight:700} .prev-table td.prev-neg{color:var(--bad);font-weight:700} .prev-table .prev-nulo{color:#cbd5e1} /* Semana que fecha no vermelho: a cor do número sozinha passava batido. */ .prev-table tr.prev-risco td{background:#fee2e2} .prev-table tr.prev-risco td.prev-conta{background:var(--bad) !important} /* Muita coluna estoura a largura da tela. A coluna da conta fica fixa no scroll horizontal — senão você rola pra direita e não sabe mais de quem é a linha. Isso exige trocar o overflow:hidden do .prev-table (que estava lá só pelo canto arredondado) por raio explícito nas quinas. */ .prev-table{overflow:visible} .prev-table thead tr th:first-child{border-top-left-radius:10px} .prev-table thead tr th:last-child{border-top-right-radius:10px} .prev-table tbody tr:last-child td:first-child{border-bottom-left-radius:10px} .prev-table tbody tr:last-child td:last-child{border-bottom-right-radius:10px} .prev-table th:first-child,.prev-table td:first-child{position:sticky;left:0;z-index:2} /* ===== Previsão reescrita (29/08/2026) ===== */ /* Cabeçalho de cada semana, fora da tabela: título, período e o botão de imprimir. */ .prev-week-head{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:13px;color:#334155} .prev-week-head b{font-size:14px} .prev-week-head span{color:var(--muted)} .prev-week-head .prev-abertura{font-size:11px;font-style:italic} .prev-week-head button{margin-left:auto} /* Saldo que nenhum extrato confirmou — a semana inteira é projeção pura. */ .prev-table td.prev-projetado{font-style:italic;color:#475569} .prev-table tr.prev-risco td.prev-projetado{color:#7f1d1d} /* Previsão sem unidade cadastrada — antes saía uma casca de tabela zerada. */ .prev-vazio{background:#fff;border:1px dashed var(--gray);border-radius:10px;padding:34px 20px;text-align:center} .prev-vazio-t{font-size:15px;font-weight:700;color:#475569;margin-bottom:5px} .prev-vazio-s{font-size:12.5px;color:var(--muted)} /* ============================================================ IMPRESSAO — anula o tema escuro do Cockpit. `.main{background:var(--ck-bg)}` (linha ~481) esta FORA de @media, entao valia no papel tambem; somado a `.main{min-height:100vh}` (linha ~64), a folha saia PRETA inteira com a tabela so no topo. Medido com Playwright em media=print: .main = rgb(15,17,21), min-height 800px. Precisa ficar no FIM do arquivo pra vencer a cascata (o @media print de cima vem antes da regra do Cockpit). ============================================================ */ @media print { .main{ background:#fff !important; color:#000 !important; min-height:0 !important } /* A tabela estica ate ocupar a folha inteira. E `height:100%` encadeado, NAO 100vh: vh em midia paginada nao acompanha a margem escolhida no dialogo de impressao, entao a tabela ficava maior que a area util e a linha TOTAL caia pra uma 2a folha (visto em 24/08/2026). Porcentagem se mede sobre a area util de verdade, qualquer que seja a margem. Contado em PDF: com 100vh davam 2 paginas; com 100% da 1 pagina com margem de 6mm e com a "Padrao" do Chrome, tanto no dia normal quanto num dia alto. NAO da pra aumentar a fonte junto: de 16px pra 17px o conteudo pula de 611px pra 783px (uma celula quebra de linha e sobe varias linhas de uma vez) e vaza pra 2a folha. */ html,body,.app,.main,#sec-painel,#painel-dia-content{ height:100% !important } /* -10px: com 100% cravado a linha TOTAL terminava a 1px do fim da area util e QUALQUER arredondamento (margem do dialogo, escala da impressora) cortava ela — foi o que aconteceu em 24/08/2026. Medido: 100% deixa 1px de sobra, -10px deixa 11px. */ .approval-table{ height:calc(100% - 10px) !important } .app{ min-height:0 !important } html,body{ min-height:0 !important } } /* ============================================================ IMPRESSAO — APERTO AUTOMATICO DA FOLHA DO PAINEL A folha tem que sair em UMA pagina. Quando nao sai, o Chrome quebra a tabela: a ultima unidade e o TOTAL vao pra 2a folha com o cabecalho repetido, e sobra um vao branco no fim da 1a (visto em 28/08/2026 — 20 contas, 22 linhas). Quem escolhe a classe e o render (PainelDia.render, `apertoPrint`), CONTANDO linhas — nao medindo pixel. Cada faixa aqui foi medida com scripts/print-painel-test.py, que imprime esta mesma tabela no Chromium em A4 paisagem e conta as paginas do PDF: 16px (padrao) 21 linhas · 14px 24 · 13px 30 · 12px 33 · 11px 42 Se mexer nos numeros abaixo, rode o script de novo — os cortes do app.js dependem deles. ============================================================ */ @media print { /* "✓ coberto" / "faltam X" / "aguardando origem" sao conferencia de TELA. No papel so somam uma linha em cada conta que recebe transferencia — e era o que sobrava pra estourar. */ .tr-progress{display:none !important} .approval-table.pd-print-14 td{font-size:14px !important;padding:2px 6px !important} .approval-table.pd-print-14 th{font-size:12px !important} .approval-table.pd-print-14 .cell-edit input.cell-input{font-size:14px !important} .approval-table.pd-print-14 .tr-input, .approval-table.pd-print-14 .tr-target-select{font-size:12px !important} .approval-table.pd-print-14 .bank-tag{font-size:11px !important} .approval-table.pd-print-13 td{font-size:13px !important;padding:1px 5px !important} .approval-table.pd-print-13 th{font-size:11px !important} .approval-table.pd-print-13 .cell-edit input.cell-input{font-size:13px !important} .approval-table.pd-print-13 .tr-input, .approval-table.pd-print-13 .tr-target-select{font-size:11px !important} .approval-table.pd-print-13 .bank-tag{font-size:10px !important} .approval-table.pd-print-12 td{font-size:12px !important;padding:1px 4px !important} .approval-table.pd-print-12 th{font-size:10px !important} .approval-table.pd-print-12 .cell-edit input.cell-input{font-size:12px !important} .approval-table.pd-print-12 .tr-input, .approval-table.pd-print-12 .tr-target-select{font-size:10px !important} .approval-table.pd-print-12 .bank-tag{font-size:9px !important} .approval-table.pd-print-11 td{font-size:11px !important;padding:0 4px !important} .approval-table.pd-print-11 th{font-size:9px !important} .approval-table.pd-print-11 .cell-edit input.cell-input{font-size:11px !important} .approval-table.pd-print-11 .tr-input, .approval-table.pd-print-11 .tr-target-select{font-size:9px !important} .approval-table.pd-print-11 .bank-tag{font-size:8px !important} } /* Dias muito grandes (mais contas do que o grupo tem hoje) — a folha continua em 1 pagina, so que apertada. Faixas medidas pelo mesmo scripts/print-painel-test.py. */ @media print { .approval-table.pd-print-10 td{font-size:10px !important;padding:0 3px !important} .approval-table.pd-print-10 th{font-size:8px !important;padding:2px 3px !important} .approval-table.pd-print-10 .cell-edit input.cell-input{font-size:10px !important} .approval-table.pd-print-10 .tr-input, .approval-table.pd-print-10 .tr-target-select{font-size:8px !important} .approval-table.pd-print-10 .bank-tag{font-size:7px !important;padding:0 3px !important} .approval-table.pd-print-9 td{font-size:9px !important;padding:0 2px !important;line-height:1.05 !important} .approval-table.pd-print-9 th{font-size:7px !important;padding:1px 2px !important} .approval-table.pd-print-9 .cell-edit input.cell-input{font-size:9px !important} .approval-table.pd-print-9 .tr-input, .approval-table.pd-print-9 .tr-target-select{font-size:7px !important} .approval-table.pd-print-9 .bank-tag{font-size:6px !important;padding:0 2px !important} }