/* ========================================================================== CAMADA DE APP — só o que o Bilbo Design System (bilbo-design-system.css) ainda não cobre: navegação, campos de formulário, badges de status de submission, texto de apoio e centralização do login. Não redefinir tokens/componentes do design system aqui. ========================================================================== */ /* Navegação (o design system ainda não define um padrão de nav — ver §9 do doc). */ .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;} .nav .btn{padding:7px 14px;font-size:13px;} /* Menu compacto (D3) — abaixo de 720px a nav vira dropdown escondido por padrão, revelado pelo botão .nav-toggle (definido no design system). Fica aqui, não lá, porque este arquivo carrega depois — uma regra .nav{} sem media query só é vencida por outra que também apareça depois na cascata. */ @media (max-width:720px){ .nav{ display:none;flex-basis:100%;flex-direction:column;align-items:stretch; gap:6px;margin-top:12px; } .nav.nav-aberta{display:flex;} .nav .btn{justify-content:flex-start;} .nav a[style*="margin-left:auto"]{margin-left:0 !important;} } /* Item ativo — borda/cor da marca pra sinalizar a página atual */ .nav .btn-secondary.active{color:var(--brand);border-color:var(--brand);background:#F5F4FE;} .brand{cursor:default;} header .brand[role=link]{cursor:pointer;} /* Indicador de etapas do fluxo (Fase 3) */ .etapas{ list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0; } .etapas .etapa{ display:inline-flex;align-items:center;gap:8px; font-size:12.5px;font-weight:600;color:var(--ink-tertiary); padding:6px 12px 6px 6px;border:1px solid var(--border);border-radius:999px; background:var(--surface); } .etapa-num{ width:20px;height:20px;flex-shrink:0;border-radius:50%; display:inline-flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;background:var(--bg);color:var(--ink-tertiary); } .etapa.feita{color:var(--positive);border-color:var(--positive-border);background:var(--positive-soft);} .etapa.feita .etapa-num{background:var(--positive);color:#fff;} .etapa.atual{color:var(--brand);border-color:var(--brand);background:#F5F4FE;} .etapa.atual .etapa-num{background:var(--brand);color:#fff;} /* Etapa opcional não visitada (desvio não tomado) — nem concluída nem pendente, então nem verde/✓ nem cinza-sólido de "ainda vou chegar lá". Borda tracejada + opacidade reduzida (mesmo recurso de .linha-inativa) marcam "não se aplica", e o traço no lugar do número evita que pareça uma etapa numerada esperando a vez. */ .etapa.desvio{color:var(--ink-tertiary);border-style:dashed;opacity:.6;} .etapa.desvio .etapa-num{background:var(--bg);color:var(--ink-tertiary);} /* Campos de formulário */ input[type=text],input[type=email],input[type=password],input[type=number],input[type=month],select,textarea{ font-family:inherit;font-size:14px;color:var(--ink); padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface); } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);} label{font-size:14px;color:var(--ink);} /* Seletor de período (mês) — alinhado ao padrão de altura/box dos botões. O controle nativo de input[type=month] renderia mais baixo e com layout próprio, destoando do "Enviar" ao lado no .field-row. appearance:none tira o visual nativo; o padding replica o do .btn (10px 18px → aqui 9px 14px pra compensar a borda) e o min-height casa a altura. */ input[type=month],input[type=date]{ appearance:none;-webkit-appearance:none; min-height:40px;padding:9px 14px;line-height:1.2;cursor:pointer; } input[type=month]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator{ cursor:pointer;opacity:.55; } input[type=month]:hover::-webkit-calendar-picker-indicator, input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9;} /* Estado de foco visível — acessibilidade por teclado (§ auditoria de UX) */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; } /* Checkbox na cor da marca */ input[type=checkbox]{ accent-color:var(--brand);width:16px;height:16px; vertical-align:-2px;margin-right:2px;cursor:pointer; } /* Upload de arquivo — botão discreto + nome do arquivo escolhido via JS (.file-name). color:transparent esconde o texto nativo do input ("Nenhum arquivo escolhido"/nome do arquivo) — o navegador trunca esse texto no MEIO quando estreito, sem CSS pra controlar. O .file-name ao lado é DOM de verdade, controlado por JS, e trunca no fim como qualquer texto normal. */ input[type=file]{ font-family:inherit;font-size:13px;color:transparent; padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--surface);cursor:pointer;max-width:180px; } input[type=file]::file-selector-button{ font-family:inherit;font-size:13px;font-weight:600;color:var(--ink); margin-right:10px;padding:6px 12px;border:1px solid var(--border); border-radius:var(--radius-sm);background:var(--bg);cursor:pointer; } .file-name{ font-size:12.5px;color:var(--ink-secondary); display:inline-block;max-width:220px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;vertical-align:middle; } .field-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;} /* Label empilhada acima do campo (formulários com rótulo visível) */ .campo-label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--ink-secondary);} .field-stack{display:flex;flex-direction:column;gap:10px;max-width:360px;} .form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 24px;} /* CTA de destaque — promove UM destino de página em vez de mais um item de lista de botões. Borda de marca (não de status) porque é navegação, não severidade; ver REGRA DE OURO do design system. Usado no hub do cliente pra deixar a Análise (fase 2) o destino óbvio da tela, não um link lateral. */ .cta-analise{ display:flex;align-items:center;justify-content:center; background:var(--surface);border:1px solid var(--brand);border-radius:var(--radius-md); box-shadow:var(--shadow-sm);padding:20px 24px;margin:0 0 12px; } .cta-analise .btn{font-size:15px;padding:11px 24px;} /* Texto de apoio */ .hint{font-size:13px;color:var(--ink-secondary);margin:0 0 10px;line-height:1.55;} .hint-muted{color:var(--ink-tertiary);font-size:12.5px;} /* Flash — confirmação de ação unificada (sucesso). Some sozinho após alguns segundos via animação CSS; reutilizado por _flash.html. */ .flash{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:600;border-radius:var(--radius-sm); padding:10px 14px;margin:0 0 16px; } .flash-ok{color:var(--positive);background:var(--positive-soft);border:1px solid var(--positive-border);} .flash-auto{animation:flash-fade 0s linear 5s forwards;} @keyframes flash-fade{to{opacity:0;visibility:hidden;}} /* Mensagem de erro (fundo soft, nunca crítico sólido atrás de texto — §8 do doc) */ .error{ color:var(--critical);font-size:13px; background:var(--critical-soft);border:1px solid var(--critical-border); border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 12px; } /* Badge de status (o design system não tem um badge de tabela — extensão de app, usando os tokens semânticos + fundo soft) */ .status-badge{ display:inline-flex;align-items:center;gap:5px; font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px; } .status-badge::before{content:"";width:6px;height:6px;border-radius:50%;} .status-badge.pendente{color:var(--attention);background:var(--attention-soft);} .status-badge.pendente::before{background:var(--attention);} .status-badge.pronto{color:var(--positive);background:var(--positive-soft);} .status-badge.pronto::before{background:var(--positive);} .status-badge.baixa{color:var(--critical);background:var(--critical-soft);} .status-badge.baixa::before{background:var(--critical);} .status-badge.inativa{color:var(--ink-tertiary);background:var(--bg);} .status-badge.inativa::before{background:var(--ink-tertiary);} .status-badge.cliente{color:var(--brand);background:#F5F4FE;} .status-badge.cliente::before{background:var(--brand);} /* Neutro — aguardando terceiro (ex.: cliente), nem pendência do BPO nem conclusão. Cinza de propósito: não é nem "precisa agir" nem "está pronto". */ .status-badge.neutro{color:var(--ink-secondary);background:#EEEFF2;} .status-badge.neutro::before{background:var(--ink-tertiary);} /* Paginação — lista de submissions do dashboard */ .paginacao{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;font-size:13px;} .paginacao-links{display:flex;gap:16px;} .paginacao-links a{color:var(--brand);font-weight:600;} /* Link secundário de tabela — ação real, só não é a principal da linha. Antes usava .muted (cinza apagado) e ficava com cara de link desabilitado mesmo sendo clicável; agora é um link normal, só mais discreto que o 1º. */ .link-secundario{color:var(--ink-secondary);font-weight:600;text-decoration:underline;} .link-secundario:hover{color:var(--ink);} /* ---- Fluxo de dois papéis (BPO ⇄ cliente) ---- */ /* Banners de estado no grid da auditoria */ .banner{ display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:13px;line-height:1.5;border-radius:var(--radius-md);padding:12px 16px;margin-bottom:16px; } .banner-espera{color:var(--attention);background:var(--attention-soft);border:1px solid var(--attention-border);} .banner-revisao{color:var(--brand);background:#F5F4FE;border:1px solid var(--brand);} /* Aviso informativo (ex.: período declarado difere das datas do extrato) */ .banner-aviso{color:var(--attention);background:var(--attention-soft);border:1px solid var(--attention-border);} .banner-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .link-cliente{ font-size:12.5px;color:var(--ink-secondary);background:var(--surface); border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px; width:260px;max-width:100%; } /* Linha classificada pelo cliente — destaque sutil na revisão do BPO (mesma especificidade da regra .confirmada, definida depois → vence) */ .table-card tbody tr.classificada-cliente td{background:#F5F4FE;} /* Linha marcada para voltar ao cliente — some da auditoria do BPO ao salvar */ .table-card tbody tr.linha-perguntar td{background:var(--attention-soft);} .table-card tbody tr.linha-perguntar .row-label{opacity:.6;text-decoration:line-through;} .perguntar-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;cursor:pointer;} .perguntar-label input{cursor:pointer;} /* Linha inativa do plano de contas — esmaece o conteúdo sem apagar os botões */ tr.linha-inativa .row-label, tr.linha-inativa .pill{opacity:.55;} /* Login — centralização vertical */ .login-wrap{max-width:380px;margin:72px auto 0;} .login-wrap .brand{justify-content:center;margin-bottom:20px;} /* Ajustes finos de tabela para grids interativos (auditoria) */ .table-card td .field-row{gap:6px;} .table-card td select{padding:6px 9px;font-size:12.5px;} .table-card td input[type=text]{padding:6px 9px;font-size:12.5px;} .table-card tbody tr.confirmada td{background:#FAFAFB;} /* Área de progresso da auditoria */ .progress-line{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-secondary);margin-bottom:16px;} /* Barra fixa de salvar em lote — sempre acessível ao rolar a lista de transações. */ .save-bar{ position:sticky;bottom:0;z-index:5; display:flex;align-items:center;justify-content:flex-end;gap:16px; margin-top:16px;padding:14px 16px; background:var(--surface);border:1px solid var(--border); border-radius:var(--radius-md);box-shadow:var(--shadow-md); } .save-status-dirty{color:var(--attention) !important;font-weight:600;} /* ---- Auditoria: grid de triagem (Fase 2) ---- */ /* Cabeçalho fixo ao rolar a lista. overflow:visible no card pra sticky colar na viewport (o card do design system usa overflow:hidden). padding-bottom reserva o espaço da save-bar (que vem logo depois no DOM, sticky) — sem isso ela gruda por cima da última linha enquanto ainda dá pra rolar. */ .audit-table{overflow:visible;padding-bottom:74px;} .audit-table thead th{position:sticky;top:0;background:var(--surface);z-index:2;} /* Coluna "Valor" — número + sinal não podem quebrar em duas linhas */ .audit-table td[data-label="Valor"]{white-space:nowrap;} .audit-table th:nth-child(4){min-width:110px;} /* Coluna do botão de expandir — estreita */ .expand-cell{width:34px;padding-left:14px;padding-right:0;} .expand-toggle{ width:22px;height:22px;line-height:1;padding:0; border:1px solid var(--border);border-radius:var(--radius-sm); background:var(--bg);color:var(--ink-secondary);font-size:14px;font-weight:700; cursor:pointer;display:inline-flex;align-items:center;justify-content:center; } .expand-toggle.aberto{background:var(--brand);color:#fff;border-color:var(--brand);} /* Linha de detalhe colapsável — nova linha + nota fora da linha principal */ .linha-detalhe td{background:#FAFAFB;border-bottom:1px solid var(--border);} .detalhe-inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:4px 0;} .detalhe-sugerida{font-size:12.5px;} .detalhe-campo{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-secondary);} .detalhe-campo input[type=text]{width:200px;} /* Barra de filtros de triagem */ .filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .filtro-btn{ display:inline-flex;align-items:center;gap:6px; font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-secondary); padding:6px 12px;border:1px solid var(--border);border-radius:999px; background:var(--surface);cursor:pointer; } .filtro-btn.active{color:var(--brand);border-color:var(--brand);background:#F5F4FE;} .filtro-count{ font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px; background:var(--bg);color:var(--ink-tertiary); } .filtro-btn.active .filtro-count{background:var(--brand);color:#fff;} /* Modal simples (overlay) */ .modal-overlay{ position:fixed;inset:0;z-index:50; display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(15,17,21,.45); } .modal-overlay[hidden]{display:none;} .modal-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md); box-shadow:var(--shadow-md);padding:24px;max-width:440px;width:100%; } .modal-card h3{font-size:17px;font-weight:700;margin:0 0 10px;letter-spacing:-0.01em;} .modal-card p{font-size:14px;line-height:1.6;color:var(--ink-secondary);margin:0 0 20px;} .modal-aviso{color:var(--attention);font-weight:600;} .modal-acoes{display:flex;justify-content:flex-end;gap:10px;} /* ========================================================================== ABAS DO CLIENTE (_abas_cliente.html) Cada aba é uma rota real, não um painel trocado no cliente. ========================================================================== */ .abas-cliente{ display:flex;gap:4px;flex-wrap:wrap; border-bottom:1px solid var(--border); margin:0 0 20px; } .abas-cliente .aba{ padding:9px 16px;font-size:14px;font-weight:600; color:var(--ink-secondary);text-decoration:none; border-bottom:2px solid transparent;margin-bottom:-1px; } .abas-cliente .aba:hover{color:var(--ink);} .abas-cliente .aba.ativa{color:var(--brand);border-bottom-color:var(--brand);} .abas-cliente .aba-count{ display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px; font-size:11.5px;font-weight:700; color:var(--attention);background:var(--attention-soft); } /* Linha de cliente clicável na carteira (clientes/carteira.html) */ .tbl-carteira .linha-cliente{cursor:pointer;} .tbl-carteira .linha-cliente:hover{background:var(--surface-2, #F7F8FA);} .tbl-carteira .col-acao{text-align:right;white-space:nowrap;} /* Barra de período (diagnostico/analise.html) — controle, não conteúdo: uma linha discreta no topo, para os números abrirem a tela. */ .barra-periodo{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding:10px 14px;margin:0 0 20px; background:var(--surface-2, #F7F8FA); border:1px solid var(--border);border-radius:10px; } .barra-periodo-label{font-size:13px;font-weight:600;color:var(--ink-secondary);} .barra-periodo select{ padding:5px 8px;font-size:13px;font-weight:600; border:1px solid var(--border);border-radius:7px;background:var(--surface); } .barra-periodo-presets{display:flex;gap:4px;margin-left:4px;} .barra-periodo-presets .filtro-btn{padding:4px 10px;font-size:12px;} .barra-periodo-info{margin-left:auto;font-size:12px;} @media (max-width:640px){ .barra-periodo-info{margin-left:0;width:100%;} } /* ========================================================================== GAVETA DE ENVIO (_gaveta_envio.html) Sobe sobre a tela, que continua visível atrás — o BPO não perde o contexto do cliente para enviar um arquivo. ========================================================================== */ .gaveta-fundo{position:fixed;inset:0;background:rgba(15,17,21,.35);z-index:40;} .gaveta{ position:fixed;top:0;right:0;bottom:0;width:410px;max-width:100%;z-index:41; background:var(--surface);border-left:1px solid var(--border); box-shadow:var(--shadow-md, 0 8px 32px rgba(15,17,21,.18)); padding:26px 28px 32px;display:flex;flex-direction:column;gap:16px;overflow-y:auto; } .gaveta[hidden],.gaveta-fundo[hidden]{display:none;} .gaveta-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;} .gaveta-fechar{ font-family:inherit;font-size:18px;line-height:1;color:var(--ink-tertiary, #8A9099); background:none;border:none;cursor:pointer;padding:2px 6px; } .gaveta-ponto{ width:7px;height:7px;border-radius:50%;background:var(--brand); display:inline-block;margin-right:6px; } .gaveta-envio{ display:flex;align-items:center;justify-content:space-between;gap:10px; font-size:13px;padding:5px 0; } @media (max-width:720px){ .gaveta{width:100%;} } /* Título de bloco com ação à direita (ex.: Envios deste cliente + botão) */ .bloco-topo{ display:flex;align-items:center;justify-content:space-between; gap:16px;flex-wrap:wrap;margin-bottom:14px; } /* ========================================================================== PLANO DE CONTAS agrupado (clientes/detalhe.html) Um
por conta: 273 linhas numa tabela plana não é navegação. ========================================================================== */ .plano-busca{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap;} .plano-busca input[type=search]{ flex:1;min-width:220px;max-width:420px;padding:8px 12px;font-size:14px; border:1px solid var(--border);border-radius:8px;background:var(--surface); } .plano-grupo{ border:1px solid var(--border);border-radius:10px; margin-bottom:8px;background:var(--surface); } .plano-grupo[hidden]{display:none;} .plano-grupo > summary{ cursor:pointer;padding:12px 16px;display:flex;align-items:center; gap:12px;flex-wrap:wrap;list-style:none; } .plano-grupo > summary::-webkit-details-marker{display:none;} .plano-grupo > summary::before{content:"▸";color:var(--ink-tertiary, #8A9099);font-size:12px;} .plano-grupo[open] > summary::before{content:"▾";} .plano-grupo > summary:hover{background:var(--surface-2, #F7F8FA);border-radius:10px;} .plano-grupo-nome{font-weight:600;font-size:14px;} .plano-grupo-meta{font-size:12.5px;margin-left:auto;} .plano-alerta{color:var(--attention);font-weight:600;} .plano-grupo .table-card{margin:0 12px 12px;} .plano-vazio{padding:18px 4px;font-size:14px;} /* Tipo de custo no plano de contas: