/* ========================================================= PAINEL FINANCEIRO PESSOAL — CSS ========================================================= */ :root{ --bg:#f5f7fa; --card:#ffffff; --text:#202938; --muted:#6b7280; --line:#e4e7ec; --dark:#20293a; --green:#00c050; --green-dark:#079447; --green-soft:#eaf9f0; --blue:#2563eb; --blue-soft:#eef4ff; --orange:#d97706; --orange-soft:#fff7e6; --red:#dc2626; --red-soft:#fff0f0; --purple:#7c3aed; --purple-soft:#f4efff; --yellow:#facc15; --yellow-soft:#fef9c3; --gray-soft:#f2f4f7; --shadow:0 12px 35px rgba(15,23,42,.08); --shadow-float:0 30px 70px rgba(8,20,50,.35); } *{box-sizing:border-box} /* Sem isto, o atributo `hidden` perde de qualquer classe do próprio CSS que declare `display` (ex.: `.lista-compacta{display:grid}`) — o elemento fica com `hidden` mas continua visível, porque o `display:none` do `hidden` só vem do estilo padrão do navegador, que uma regra qualquer daqui já vence. */ [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)} a{color:inherit} h1,h2,h3,h4{margin-top:0} .subtitle{color:var(--muted);line-height:1.5} .small,.meta{font-size:12px} .muted{color:var(--muted)} .shell{max-width:1400px;margin:auto;padding:24px} /* ---------- MOLDURA "FLUTUANTE" DE TELA GRANDE ---------- Em telas largas, o painel vira um cartão branco arredondado flutuando sobre um gradiente azul — a mesma ideia da referência que a Nathana trouxe. No mobile isso não aparece: a tela é pequena demais para uma margem "decorativa" comer espaço útil, então ali o conteúdo continua colado na borda, como já era. */ @media(min-width:1000px){ body{ background:linear-gradient(160deg,#0a2a68 0%,#154fb8 35%,#1f8fe0 70%,#38cfe6 100%); background-attachment:fixed; } .shell{ background:var(--bg); border-radius:32px; margin:28px auto; box-shadow:var(--shadow-float); } } .panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px} .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .flex-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px} .actions,.tabs{display:flex;gap:8px;flex-wrap:wrap} .nota-toggle{display:flex;gap:6px;flex-wrap:wrap} /* ---------- BARRA DE FILTROS ---------- */ /* Os filtros são o controle mais usado da tela — por isso são grandes. Campo baixo economiza pixel e cobra atenção; aqui o alvo é fácil de acertar no mouse e no dedo, e o valor escolhido se lê de longe. */ .filtros{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; background:#fff;border:1px solid var(--line);border-radius:16px; padding:14px 16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(15,23,42,.04); } /* O rótulo mora dentro do campo: ocupa metade da altura e fica mais limpo */ .filtro-campo{position:relative;display:flex;flex-direction:column;min-width:0;flex:1} .filtro-campo label{ position:absolute;top:9px;left:15px;z-index:1;pointer-events:none; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); } .filtro-campo select,.filtro-campo input,.filtro-campo .sel-trigger{ padding:28px 38px 10px 14px;font-size:15.5px;font-weight:700;background-color:#fff; border:2px solid var(--line);border-radius:13px;min-height:62px; appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:18px; } .filtro-campo input{background-image:none;padding-right:14px;cursor:text} .filtro-campo select:hover,.filtro-campo input:hover,.filtro-campo .sel-trigger:hover{border-color:#c7d2e0} .filtro-campo select:focus,.filtro-campo input:focus,.filtro-campo .sel-trigger:focus,.filtro-campo .sel-trigger.sel-open{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.14)} /* Campo com filtro aplicado fica visivelmente marcado */ .filtro-campo.ativo select,.filtro-campo.ativo input,.filtro-campo.ativo .sel-trigger{border-color:var(--blue);background-color:var(--blue-soft)} .filtro-campo.ativo label{color:var(--blue)} .filtro-busca{flex:1.4;min-width:190px} .filtro-acoes{display:flex;gap:10px;align-items:center;margin-left:auto} .filtro-acoes .btn,.filtro-acoes button{min-height:62px;border-radius:13px;font-size:14.5px;padding-left:20px;padding-right:20px} .filtro-acoes .checkbox-item{min-height:62px;border-radius:13px;font-size:13.5px;font-weight:700;white-space:nowrap;margin:0;padding:0 14px} .filtros-resultado{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:13.5px;color:var(--muted);margin:0 0 16px 2px; } .filtros-resultado strong{color:var(--text)} /* ---------- LISTA COMPACTA (substitui as linhas altas de tabela) ---------- */ .lista-compacta{display:grid;gap:8px} .item-linha{ display:grid; grid-template-columns:4px 1.7fr 1fr auto auto; align-items:center;gap:14px; background:#fff;border:1px solid var(--line);border-radius:12px; padding:11px 14px 11px 0;transition:.12s ease; } .item-linha:hover{border-color:#cbd5e1;box-shadow:0 3px 10px rgba(15,23,42,.06)} .item-barra{align-self:stretch;border-radius:12px 0 0 12px;background:var(--line)} .item-linha.status-pago .item-barra{background:var(--green)} .item-linha.status-pendente .item-barra{background:var(--yellow)} .item-linha.status-atrasado .item-barra{background:var(--red)} .item-principal{min-width:0} .item-titulo{font-weight:700;font-size:14px;display:block;margin-bottom:3px} .item-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--muted)} .item-meta .tag{margin:0;padding:3px 7px;font-size:10px} .item-valor{text-align:right;min-width:0} .item-valor-principal{font-size:15px;font-weight:700;display:block;white-space:nowrap} .item-valor-detalhe{font-size:11px;color:var(--muted);display:block;margin-top:2px;white-space:nowrap} .item-valor-detalhe.repasse{color:#6d28d9;font-weight:700} .item-valor-detalhe.liquido{color:var(--green-dark);font-weight:800;font-size:13px} .item-status{text-align:right} /* Menu de ações: 4 botões empilhados viram 1 só, e a linha encolhe */ .menu-acoes{position:relative} .menu-acoes>summary{ list-style:none;cursor:pointer;user-select:none; width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:var(--gray-soft);color:var(--muted);font-weight:900;font-size:15px; } .menu-acoes>summary::-webkit-details-marker{display:none} .menu-acoes>summary:hover{background:var(--blue-soft);color:var(--blue)} .menu-acoes[open]>summary{background:var(--blue);color:#fff} /* O menu de ações mexe com dinheiro (marcar pago, excluir...) — precisa ficar grande e no centro da tela, nunca espremido num cantinho perto do botão "⋯". Por isso é um modal de verdade (position:fixed, centralizado, com fundo escurecido atrás — injetado por ui.js), não mais um dropdown ancorado no botão. */ .menu-acoes-backdrop{ position:fixed;inset:0;z-index:58;background:rgba(15,23,42,.5); animation:menuAcoesFade .12s ease; } @keyframes menuAcoesFade{from{opacity:0}to{opacity:1}} .menu-acoes-conteudo{ position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60; width:min(460px,92vw);max-height:85vh;overflow-y:auto; background:#fff;border:1px solid var(--line);border-radius:18px; box-shadow:var(--shadow-float);padding:18px; } .menu-acoes-conteudo .btn, .menu-acoes-conteudo>form>button, .menu-acoes-conteudo>button{width:100%;justify-content:flex-start;margin-bottom:6px;min-height:44px;font-size:14.5px} .menu-acoes-conteudo form{width:100%} .menu-acoes-conteudo .field{margin:10px 0} .menu-acoes-conteudo details{margin-bottom:6px} .menu-acoes-conteudo details>summary{width:100%;justify-content:flex-start;min-height:44px;font-size:14.5px} .menu-acoes-titulo{ font-size:11.5px;font-weight:800;text-transform:uppercase;color:var(--muted); padding:10px 6px 5px;letter-spacing:.04em;border-top:1px solid var(--line);margin-top:6px; } .menu-acoes-titulo:first-child{border-top:0;margin-top:0;padding-top:0} /* Agrupamento por período dentro da lista */ .grupo-dia{ display:flex;align-items:center;gap:10px;margin:18px 0 8px; font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); } .grupo-dia::after{content:'';flex:1;height:1px;background:var(--line);order:2} .grupo-dia-total{color:var(--text);font-size:14px;order:3;font-weight:800} .grupo-dia>span:first-child{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)} .grupo-ponto{width:9px;height:9px;border-radius:50%;flex:none} .grupo-dia-qtd{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11.5px} /* Cabeçalho de cada categoria em Despesas: mais destacado que a linha fina de ".grupo-dia" — cor da própria categoria, total bem visível e um botão pra minimizar (útil quando tem muita categoria com lançamento no mês). */ .grupo-categoria{margin:18px 0 8px} .grupo-categoria-head{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:10px 14px;border-radius:12px;background:var(--gray-soft); } .grupo-categoria-cor .grupo-categoria-head{background:var(--cor-grupo-soft)} .grupo-categoria-nome{ display:flex;align-items:center;gap:8px;flex:1;min-width:160px; font-size:13px;font-weight:800;color:var(--text); } .grupo-categoria-total{font-size:17px;font-weight:800;color:var(--text)} .grupo-categoria-cor .grupo-categoria-total{color:var(--cor-grupo)} .grupo-categoria-conteudo{margin-top:8px} /* Botão de minimizar da categoria: só um círculo na cor da categoria com uma seta, não mais um botão de texto — ocupa menos espaço e a cor já entrega de qual categoria é, mesmo fechado. */ .btn-minimizar-grupo{ flex:none;width:28px;height:28px;border-radius:50%;padding:0; display:flex;align-items:center;justify-content:center; border:0;cursor:pointer;background:#fff;color:var(--cor-grupo, var(--muted)); box-shadow:0 0 0 1px rgba(15,23,42,.08) inset; } .btn-minimizar-grupo:hover{background:var(--cor-grupo, var(--muted));color:#fff} .btn-minimizar-seta{display:inline-block;font-size:13px;line-height:1;transition:transform .18s ease} .btn-minimizar-grupo:not(.btn-minimizar-grupo-aberto) .btn-minimizar-seta{transform:rotate(180deg)} @media(max-width:640px){ .grupo-categoria-head{padding:9px 12px} .grupo-categoria-nome{min-width:100%;order:1} .grupo-categoria-total{order:2} .btn-minimizar-grupo{order:3;margin-left:auto} } .lista-vazia{ text-align:center;border:1px dashed #ccd3dc;border-radius:14px; padding:34px 20px;color:var(--muted); } .lista-vazia strong{display:block;color:var(--text);margin-bottom:4px} @media(max-width:760px){ .item-linha{ grid-template-columns:4px 1fr auto; grid-template-areas:'barra principal acoes' 'barra valor acoes' 'barra status acoes'; row-gap:6px;padding:12px 12px 12px 0; } .item-barra{grid-area:barra} .item-principal{grid-area:principal} .item-valor{grid-area:valor;text-align:left} .item-status{grid-area:status;text-align:left} .menu-acoes{grid-area:acoes;align-self:start} .filtro-campo{min-width:100%;flex:auto} .filtro-acoes{width:100%;margin-left:0} .filtro-acoes .btn,.filtro-acoes button{flex:1} } /* ===== COMPUTADOR: um lançamento por linha ===== Nome nunca é cortado — ele ocupa o espaço que precisar. Contra o vão em branco no meio valem três coisas: os detalhes ficam colados no nome (a linha se enche de informação), o que ainda sobrar vira um pontilhado ligando o nome ao valor, e a lista tem largura máxima e fica centralizada, para o valor não fugir para o canto de um monitor gigante. */ @media(min-width:1000px){ .lista-compacta{ grid-template-columns:1fr; gap:7px;align-items:start; max-width:1140px;margin-left:auto;margin-right:auto; } .item-linha{ grid-template-columns:4px minmax(0,1fr) auto auto auto; align-items:center; row-gap:0;column-gap:14px;padding:10px 14px 10px 0; } /* Nome e detalhes lado a lado */ .item-principal{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0} /* flex:0 0 auto = o nome nunca encolhe e nunca ganha "...". Se for longuíssimo, quebra em duas linhas — melhor do que esconder. */ .item-titulo{ font-size:13.5px;margin-bottom:0; flex:0 0 auto;white-space:normal;overflow:visible;text-overflow:clip; } .item-meta{font-size:11px;flex:0 1 auto;min-width:0} /* O que sobra vira um pontilhado, como índice de livro: o olho atravessa a linha sem perder de vista a qual lançamento aquele valor pertence. */ .item-principal::after{ content:'';flex:1 1 40px;min-width:24px; align-self:center;height:0; border-bottom:1px dotted #d3d9e2; margin:0 2px; } /* Larguras fixas alinham os valores em coluna de uma linha para a outra */ .item-valor{text-align:right;white-space:nowrap;min-width:132px} .item-valor-principal{font-size:15px} .item-status{text-align:right;white-space:nowrap;min-width:88px} .menu-acoes>summary{width:30px;height:30px;font-size:14px} .lista-compacta .grupo-dia{margin:14px 0 2px} } /* Em monitor muito largo a lista continua com uma linha por lançamento e largura máxima: esticar até a borda só recriaria o vão em branco. */ /* ---------- RESUMO VISUAL (composição com barra) ---------- */ .resumo-visual{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px} .resumo-visual-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px} .resumo-visual-head h3{margin:0;font-size:15px} .resumo-visual-total{font-size:20px;white-space:nowrap} .resumo-barra{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--gray-soft);margin-bottom:14px} .resumo-barra-parte{display:block;height:100%;transition:width .3s ease} .resumo-barra-parte:hover{opacity:.85} .resumo-barra-vazia{flex:1;background:var(--gray-soft)} .resumo-linhas{display:grid;gap:9px} .resumo-linha{display:flex;align-items:center;gap:9px;font-size:13px} .resumo-linha-zero{opacity:.45} .resumo-ponto{width:10px;height:10px;border-radius:50%;flex:0 0 auto} .resumo-rotulo{flex:1;color:var(--muted)} .resumo-pct{font-size:11px;font-weight:800;color:var(--muted);min-width:32px;text-align:right} .resumo-linha strong{min-width:92px;text-align:right;white-space:nowrap} .resumo-link{margin-top:14px;width:100%} /* Prévia do parcelamento no formulário de despesa */ .previa-parcelas{ display:flex;align-items:center;gap:12px;margin:12px 0; background:var(--purple-soft);border:1px solid #ddd0ff;border-radius:12px;padding:12px 14px; } .previa-parcelas-icone{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:var(--purple);color:#fff;font-size:17px;font-weight:900; } .previa-parcelas strong{display:block;font-size:15px;color:#5b21b6} .previa-parcelas span{display:block;font-size:12px;color:#6d28d9;margin-top:2px} /* Sub-navegação de página (ex.: Lançamentos / Clientes dentro de Receitas) */ .subnav{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap} .subnav-item{ display:flex;align-items:center;gap:12px;flex:1;min-width:220px; background:#fff;border:2px solid var(--line);border-radius:16px;padding:16px 18px; text-decoration:none;color:var(--text);transition:.15s ease; } .subnav-item svg{width:26px;height:26px;flex:0 0 auto;color:var(--muted)} .subnav-item strong{display:block;font-size:15px} .subnav-item span{display:block;font-size:12px;color:var(--muted);margin-top:2px} .subnav-item:hover{border-color:var(--green);box-shadow:0 6px 16px rgba(0,192,80,.1)} .subnav-item.active{border-color:var(--green);background:var(--green-soft)} .subnav-item.active svg{color:var(--green-dark)} .subnav-item.active strong{color:var(--green-dark)} @media(max-width:600px){.subnav{flex-direction:column}} .form-highlight{border:1px solid rgba(37,99,235,.28);box-shadow:0 12px 35px rgba(37,99,235,.08)} /* Painel de página com acento colorido no topo (usado em despesas/receitas/metas) */ .panel-accent-red{border-top:4px solid var(--red)} .panel-accent-green{border-top:4px solid var(--green)} .panel-accent-purple{border-top:4px solid var(--purple)} .panel-accent-orange{border-top:4px solid var(--orange)} /* Formulário retrátil: escondido por padrão, abre com o botão "+ Nova..." */ .form-toggle-panel{display:none;margin-top:16px} .form-toggle-panel.open{display:block} /* ---------- TOPO / NAV ---------- */ .topbar{background:var(--dark);color:#fff;border-radius:18px;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px} .topbar strong{font-size:18px} .userbox{display:flex;gap:10px;align-items:center;font-size:13px} /* Avatar circular com a inicial do nome — o mesmo toque do ícone de perfil no canto superior direito da referência. */ .user-avatar{ width:34px;height:34px;border-radius:50%;flex:0 0 auto; display:grid;place-items:center; background:linear-gradient(135deg,#38cfe6,#2563eb); color:#fff;font-weight:800;font-size:14px; } .nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .nav a{ display:inline-flex;align-items:center;gap:10px; background:#fff;border:1px solid var(--line);padding:7px 16px 7px 7px; border-radius:999px;text-decoration:none;font-weight:700;color:var(--text); transition:.15s ease; } /* Ícone dentro de um círculo colorido cheio — o efeito que a Nathana apontou na referência (cada linha do menu com um círculo colorido antes do texto). O círculo fica sempre com a cor sólida do item; só troca para branco quando o item está ativo, senão o ícone desapareceria dentro do fundo colorido do próprio botão. */ .nav-icon-badge{ width:30px;height:30px;border-radius:50%;flex:0 0 auto; display:grid;place-items:center;color:#fff;transition:.15s ease; } .nav-icon{width:16px;height:16px;flex:0 0 auto} .nav a.nav-blue{color:#2f4a7a} .nav a.nav-blue .nav-icon-badge{background:var(--blue)} .nav a.nav-blue:hover{background:var(--blue-soft);border-color:var(--blue)} .nav a.nav-blue.active{background:var(--blue);border-color:var(--blue);color:#fff} .nav a.nav-blue.active .nav-icon-badge{background:#fff;color:var(--blue)} .nav a.nav-green{color:#0d6b3d} .nav a.nav-green .nav-icon-badge{background:var(--green)} .nav a.nav-green:hover{background:var(--green-soft);border-color:var(--green)} .nav a.nav-green.active{background:var(--green);border-color:var(--green);color:#fff} .nav a.nav-green.active .nav-icon-badge{background:#fff;color:var(--green)} .nav a.nav-red{color:#a3271f} .nav a.nav-red .nav-icon-badge{background:var(--red)} .nav a.nav-red:hover{background:var(--red-soft);border-color:var(--red)} .nav a.nav-red.active{background:var(--red);border-color:var(--red);color:#fff} .nav a.nav-red.active .nav-icon-badge{background:#fff;color:var(--red)} .nav a.nav-purple{color:#5b21b6} .nav a.nav-purple .nav-icon-badge{background:var(--purple)} .nav a.nav-purple:hover{background:var(--purple-soft);border-color:var(--purple)} .nav a.nav-purple.active{background:var(--purple);border-color:var(--purple);color:#fff} .nav a.nav-purple.active .nav-icon-badge{background:#fff;color:var(--purple)} .nav a.nav-orange{color:#8a5100} .nav a.nav-orange .nav-icon-badge{background:var(--orange)} .nav a.nav-orange:hover{background:var(--orange-soft);border-color:var(--orange)} .nav a.nav-orange.active{background:var(--orange);border-color:var(--orange);color:#fff} .nav a.nav-orange.active .nav-icon-badge{background:#fff;color:var(--orange)} /* ---------- BOTÕES ---------- Pílula (border-radius:999px) em vez de retângulo levemente arredondado — é o formato que a referência usa em toda ação principal ("Cadastrar agora", "Emitir 2ª via"...). Botão pequeno ganha um pouco mais de largura nas pontas para o texto não colar na curva. */ button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:.15s ease} .btn-primary{background:var(--blue);color:#fff} .btn-primary:hover{background:#1d4ed8} .btn-light{background:#edf0f3;color:#374151} .btn-danger{background:#fee2e2;color:#991b1b} .btn-small{padding:7px 14px;font-size:11px} .full{width:100%} /* Botões temáticos por seção — despesas (vermelho), receitas (verde), metas (roxo) */ .btn-expense{background:var(--red);color:#fff} .btn-expense:hover{background:#b91c1c} .btn-income{background:var(--green);color:#fff} .btn-income:hover{background:var(--green-dark)} .btn-goal{background:var(--purple);color:#fff} .btn-goal:hover{background:#6d28d9} .btn-close{background:transparent;color:var(--muted);border:1px solid var(--line)} .btn-fiscal{background:var(--orange);color:#fff} .btn-fiscal:hover{background:#b45f04} /* ---------- FORM ---------- */ .field{margin:12px 0} .field label,.label{display:block;font-size:11px;font-weight:700;color:#4b5563;margin-bottom:7px;text-transform:uppercase;letter-spacing:.02em} input,select,textarea,.sel-trigger{width:100%;padding:11px;border:1px solid #d7dde5;border-radius:10px;font:inherit;background:#fff;color:var(--text)} textarea{min-height:80px;resize:vertical} .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} input:focus,select:focus,textarea:focus,.sel-trigger:focus,.sel-trigger.sel-open{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .checkbox-item{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:9px} .checkbox-item input{width:auto} .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:12px 0 16px} /* ---------- ALERTAS ---------- */ .alert{padding:12px 14px;border-radius:10px;margin:14px 0} .alert-success{background:var(--green-soft);color:#08723b} .alert-error{background:var(--red-soft);color:#9f2020} .alert-warning{background:var(--orange-soft);color:#8a5200} /* ---------- TAGS ---------- */ .tag{display:inline-block;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:700;margin:0 4px 4px 0;background:var(--blue-soft);color:#1d4ed8} .tag-green{background:var(--green-soft);color:#08723b} .tag-red{background:var(--red-soft);color:#b91c1c} .tag-blue{background:var(--blue-soft);color:#1d4ed8} .tag-yellow{background:var(--yellow-soft);color:#854d0e} .tag-purple{background:var(--purple-soft);color:#6d28d9} .tag-orange{background:var(--orange-soft);color:#9a5700} .tag-muted{background:var(--gray-soft);color:#667085} /* ---------- TABELAS ---------- */ .table-wrap{overflow:auto} table{width:100%;border-collapse:collapse;min-width:800px} th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top} th{font-size:11px;text-transform:uppercase;color:var(--muted)} tr.row-atrasado td:first-child{border-left:4px solid var(--red)} tr.row-pago td:first-child{border-left:4px solid var(--green)} tr.row-pendente td:first-child{border-left:4px solid var(--yellow)} /* ---------- LINKS EM FORMATO DE BOTÃO (Acesso rápido, atalhos, etc.) ---------- */ .quick-links{display:grid;gap:9px} .quick-links a{ display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text); padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-weight:700;font-size:13px; background:#fff;transition:.15s ease; } .quick-links a:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.08)} .quick-link-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto} .quick-link-icon svg{width:17px;height:17px} .quick-links a .quick-link-arrow{margin-left:auto;color:var(--muted);width:15px;height:15px} .quick-link-green .quick-link-icon{background:var(--green-soft);color:#08723b} .quick-link-green:hover{border-color:var(--green)} .quick-link-red .quick-link-icon{background:var(--red-soft);color:#b91c1c} .quick-link-red:hover{border-color:var(--red)} .quick-link-purple .quick-link-icon{background:var(--purple-soft);color:#6d28d9} .quick-link-purple:hover{border-color:var(--purple)} .quick-link-orange .quick-link-icon{background:var(--orange-soft);color:#9a5700} .quick-link-orange:hover{border-color:var(--orange)} .quick-link-blue .quick-link-icon{background:var(--blue-soft);color:#1d4ed8} .quick-link-blue:hover{border-color:var(--blue)} /* ---------- LOGIN / 2FA ---------- */ .login-page{min-height:100vh;display:grid;place-items:center;padding:22px;background:var(--bg)} .login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)} .login-card h1{margin:0 0 8px;font-size:26px} .login-card .subtitle{margin:0 0 22px} .logo-mark{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#38cfe6,#2563eb);display:grid;place-items:center;color:#fff;font-weight:900;font-size:22px;margin-bottom:18px} .login-card .field label{text-transform:none;letter-spacing:0} .manual-key{font-family:monospace;font-size:16px;letter-spacing:1px;background:var(--gray-soft);padding:12px;border-radius:10px;word-break:break-all} .backup-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .backup-codes code{background:var(--gray-soft);padding:8px 10px;border-radius:8px;font-size:13px;text-align:center} /* ---------- DASHBOARD ---------- */ .dashboard-hero{background:linear-gradient(135deg,#20293a,#161d29);color:#fff;border-radius:20px;padding:25px 27px;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:16px;box-shadow:var(--shadow)} .dashboard-hero h1{margin:4px 0 7px;font-size:26px} .dashboard-hero p{margin:0;color:#cfd5dd} .eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#768296;margin-bottom:5px} .dashboard-hero .eyebrow{color:#8fc2ff} .dashboard-date{font-weight:700;color:#dbe1e8;white-space:nowrap} .dashboard-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px} .dash-card{display:flex;align-items:center;gap:13px;text-decoration:none;border-radius:17px;padding:17px;border:1px solid var(--line);box-shadow:0 7px 20px rgba(15,23,42,.05)} .dash-card small{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;margin-bottom:3px} .dash-card strong{display:block;font-size:25px;line-height:1;margin:2px 0 6px} .dash-card span{font-size:11px;line-height:1.35} .dash-icon{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:800;flex:0 0 auto} .dash-receita{background:var(--green-soft);color:#08723b}.dash-receita .dash-icon{background:#cdf1db} .dash-despesa{background:var(--red-soft);color:#9d2020}.dash-despesa .dash-icon{background:#ffd7d7} .dash-saldo{background:var(--blue-soft);color:#1d4ed8}.dash-saldo .dash-icon{background:#dbe7ff} .dash-pendente{background:var(--yellow-soft);color:#854d0e}.dash-pendente .dash-icon{background:#fde68a} .dash-repasse{background:var(--purple-soft);color:#6d28d9}.dash-repasse .dash-icon{background:#e5d9ff} /* ---------- BLOCO DE ALERTAS (topo do dashboard) ---------- */ .alerta-topo{border-left:5px solid var(--red);background:linear-gradient(180deg,#fffafa 0,#fff 120px)} .alerta-topo-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px} .alerta-topo-head h2{margin:2px 0 0;font-size:19px} .alerta-topo-icone{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:var(--red);color:#fff;font-size:24px;font-weight:900; } .alerta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .alerta-bloco{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff} .alerta-bloco-titulo{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px} .alerta-bloco-hoje{border-color:#ffd9a8;background:#fffdf7} .alerta-bloco-hoje .alerta-bloco-titulo{color:#9a5700} .alerta-bloco-vermelho{border-color:#ffd2d2;background:#fffafa} .alerta-bloco-vermelho .alerta-bloco-titulo{color:#b91c1c} .alerta-bloco-amarelo{border-color:#f3e3b3;background:#fffdf5} .alerta-bloco-amarelo .alerta-bloco-titulo{color:#a15c00} .alerta-bloco-roxo{border-color:#ddd0ff;background:#fdfbff} .alerta-bloco-roxo .alerta-bloco-titulo{color:#6d28d9} .alerta-linha{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; text-decoration:none;color:var(--text);font-size:13px; padding:8px 10px;border-radius:9px;margin-bottom:5px;background:#fff;border:1px solid var(--line); } .alerta-linha:hover{background:var(--gray-soft)} .alerta-linha-nome{flex:1;min-width:90px;font-weight:700} .alerta-linha strong{white-space:nowrap} .alerta-linha .meta{color:var(--muted)} /* ---------- CALENDÁRIO CUSTOMIZADO (datepicker.js) ---------- */ .dp-wrap{position:relative;display:inline-block;width:100%} .dp-wrap input[readonly]{ cursor:pointer;font-weight:700;color:var(--text); padding-left:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat 12px center/17px; transition:.15s ease; } .dp-wrap input[readonly]:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(37,99,235,.1)} .dp-wrap input[readonly]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .dp-popup{position:absolute;z-index:60;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px;min-width:260px} .dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .dp-header-label{font-weight:800;font-size:13px;text-transform:capitalize} .dp-nav-btn{background:var(--gray-soft);border:0;border-radius:50%;width:28px;height:28px;font-size:16px;cursor:pointer;color:var(--text)} .dp-nav-btn:hover{background:var(--blue-soft);color:var(--blue)} .dp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .dp-weekdays span{text-align:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dp-cell{border:0;background:none;border-radius:8px;padding:8px 0;font-size:13px;cursor:pointer;color:var(--text);text-align:center} .dp-cell:hover{background:var(--blue-soft);color:var(--blue)} .dp-cell.today{font-weight:800;color:var(--blue)} .dp-cell-empty{cursor:default} .dp-cell-empty:hover{background:none} /* "selecionado" sempre por cima de "hoje" — nunca texto e fundo na mesma cor */ .dp-cell.selected,.dp-cell.today.selected{background:var(--blue);color:#fff} .dp-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .dp-month-cell{border:1px solid var(--line);border-radius:10px;padding:12px 4px;font-size:12px;font-weight:700} .dp-month-cell.today{border-color:var(--blue);color:var(--blue)} .dp-month-cell.selected,.dp-month-cell.today.selected{background:var(--blue);color:#fff;border-color:var(--blue)} .dp-footer{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .dp-footer button{flex:1} /* ---------- SELECT CUSTOMIZADO (select.js) ---------- O