/*
    CSS compartilhado entre módulos do Finanças Pessoal.
    Estrutura no padrão do CristalIntra (Padronizacao.md); cores = identidade do site.
    Fonte base 14px, nada abaixo de 12px; layout em grid/flex, sem rolagem lateral.
*/

:root {
    --fp-roxo:        #667eea;
    --fp-roxo-escuro: #764ba2;
    --fp-bg:          #f3f4f8;
    --fp-borda:       #e2e5ee;
    --fp-texto:       #1f2937;
    --fp-texto-2:     #6b7280;
    --fp-receita:     #16a34a;
    --fp-despesa:     #dc2626;
    --fp-aporte:      #2563eb;
}

body {
    background: var(--fp-bg);
    color: var(--fp-texto);
    font-size: 14px;
}

/* Bootstrap usa 0.75em (10,5px) nos selos — mínimo legível do sistema é 12px */
.badge { font-size: 12px; }

/* ==================== Navegação ==================== */
.fp-navbar {
    background: linear-gradient(135deg, var(--fp-roxo) 0%, var(--fp-roxo-escuro) 100%);
}

.fp-navbar .nav-link { font-size: 14px; }
.fp-navbar .nav-link.disabled { color: rgba(255, 255, 255, 0.45); }

.fp-titulo { font-size: 1.5rem; font-weight: 700; color: var(--fp-texto); }
.fp-subtitulo { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.9rem; color: var(--fp-texto); }

.fp-btn-primario {
    background: linear-gradient(135deg, var(--fp-roxo) 0%, var(--fp-roxo-escuro) 100%);
    color: #fff;
    border: none;
}
.fp-btn-primario:hover, .fp-btn-primario:focus { color: #fff; filter: brightness(1.05); }

.fp-input-mes { width: auto; min-width: 150px; }

/* ==================== Cards de indicadores ==================== */
.fp-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.fp-card {
    background: #fff;
    border: 1px solid var(--fp-borda);
    border-left: 4px solid var(--fp-roxo);
    border-radius: 10px;
    padding: 14px 16px;
}
.fp-card-rotulo { color: var(--fp-texto-2); font-size: 13px; font-weight: 600; }
.fp-card-valor { font-size: 1.35rem; font-weight: 700; margin-top: 4px; white-space: nowrap; }

.fp-card-receita { border-left-color: var(--fp-receita); }
.fp-card-despesa { border-left-color: var(--fp-despesa); }
.fp-card-aporte  { border-left-color: var(--fp-aporte); }
.fp-card-neutro  { border-left-color: #9ca3af; }

.fp-positivo { color: var(--fp-receita); }
.fp-negativo { color: var(--fp-despesa); }

/* ==================== Painéis e tabelas ==================== */
.fp-painel {
    background: #fff;
    border: 1px solid var(--fp-borda);
    border-radius: 10px;
    padding: 16px;
}

.fp-tabela { font-size: 14px; }
.fp-tabela thead th { color: var(--fp-texto-2); font-size: 13px; font-weight: 600; border-bottom-width: 1px; }

.fp-tag-categoria {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #6b7280;
}

.fp-cartao {
    border: 1px solid var(--fp-borda);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.fp-cartao-nome { font-weight: 600; }
.fp-cartao-info { color: var(--fp-texto-2); font-size: 13px; }

/* ==================== Login ==================== */
/* Mesmas animações do login.php + modern-style.css do PHP: fundo em degradê com faixa
   diagonal, dois círculos flutuando (float 6s), partículas subindo (login.js),
   cartão subindo (slideUp), logo quicando (bounceIn) e formulário entrando (slideInLeft). */

.fp-login-fundo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.fp-login-fundo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23ffffff" fill-opacity="0.05" points="0,1000 1000,0 1000,1000"/></svg>');
    z-index: 1;
}

.fp-formas-flutuantes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.fp-formas-flutuantes::before,
.fp-formas-flutuantes::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: fpFlutuar 6s ease-in-out infinite;
}

.fp-formas-flutuantes::before { width: 200px; height: 200px; top: 20%; left: 10%; animation-delay: 0s; }
.fp-formas-flutuantes::after  { width: 150px; height: 150px; bottom: 20%; right: 10%; animation-delay: 3s; }

@keyframes fpFlutuar {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(180deg); }
}

/* Partículas criadas pelo login.js */
.fp-particula {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    animation-name: fpParticula;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes fpParticula {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.fp-login-cartao {
    width: 100%;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
    animation: fpSubir 0.6s ease-out;
}

@keyframes fpSubir {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fp-login-logo {
    width: 100px;
    margin: 0 auto 1rem;
    animation: fpQuicar 0.8s ease-out;
}

.fp-login-logo svg { filter: drop-shadow(0 15px 40px rgba(102, 126, 234, 0.5)); }

@keyframes fpQuicar {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.fp-login-titulo {
    font-size: 1.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fp-entrar-esquerda { animation: fpEntrarEsquerda 0.6s ease-out; }

@keyframes fpEntrarEsquerda {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Campo cresce ao receber foco (acesso.js põe scale(1.02) no bloco do campo) */
.fp-login-campo { transition: transform 0.3s ease; }

.fp-link-acesso { color: var(--fp-roxo); font-weight: 600; text-decoration: none; transition: color 0.2s ease; }
.fp-link-acesso:hover { color: var(--fp-roxo-escuro); text-decoration: underline; }
[data-bs-theme="dark"] .fp-link-acesso { color: #a5b4fc; }

@media (max-width: 575.98px) {
    .fp-card-valor { font-size: 1.15rem; }
    .fp-login-fundo { padding: 1rem; }
    .fp-login-cartao { padding: 2rem 1.25rem; }
}

/* ==================== Animações do painel (iguais ao PHP) ==================== */

/* Botões e campos: sobem levemente no hover/foco */
.btn { transition: all 0.3s ease; }
.fp-btn-primario:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45); }
.form-control { transition: all 0.3s ease; }
.form-control:focus { transform: translateY(-1px); border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }

/* Menu: item sobe no hover */
.fp-navbar .nav-link:not(.disabled) { border-radius: 6px; transition: all 0.3s ease; }
.fp-navbar .nav-link:not(.disabled):hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-1px); }

/* Cards de indicador e painéis: sobem 5px com sombra maior no hover (card-modern do PHP) */
.fp-card,
.fp-painel { transition: all 0.3s ease; }
.fp-card:hover,
.fp-painel:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* Cartões de crédito entram em sequência (cartao-card-modern) */
.fp-cartao { animation: fpSurgir 0.4s ease-out both; }
.fp-cartao:nth-child(1) { animation-delay: 0.05s; }
.fp-cartao:nth-child(2) { animation-delay: 0.1s; }
.fp-cartao:nth-child(3) { animation-delay: 0.15s; }
.fp-cartao:nth-child(4) { animation-delay: 0.2s; }

@keyframes fpSurgir {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Selo "Quitada" pulsa de leve */
.fp-selo-quitada { animation: fpPulsoSutil 2s ease-in-out infinite; }

@keyframes fpPulsoSutil {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 91, 20, 0.3); }
    50%      { box-shadow: 0 0 0 4px rgba(0, 91, 20, 0); }
}

/* ==================== Transações ==================== */
/* Cores do transacoes.php: receita #2D8A61, despesa #C84545, transferência #4FBBEA */
:root {
    --fp-trn-receita: #2D8A61;
    --fp-trn-despesa: #C84545;
    --fp-trn-transferir: #4FBBEA;
}

.fp-rotulo-mini {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fp-texto-2);
}

.fp-sem-elevar:hover { transform: none !important; box-shadow: none !important; }

/* Ações rápidas: 2 colunas no celular (Transferir ocupa a linha), 3 no desktop.
   active:scale(0.95) igual ao PHP (Tailwind active:scale-95). */
.fp-acoes-rapidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fp-acao-rapida {
    border: none;
    border-radius: 12px;
    color: #fff;
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.15s ease;
}
.fp-acao-rapida:active { transform: scale(0.95); }
.fp-acao-icone { background: rgba(255, 255, 255, 0.2); border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.fp-acao-receita { background: var(--fp-trn-receita); }
.fp-acao-receita:hover { background: #257351; }
.fp-acao-despesa { background: var(--fp-trn-despesa); }
.fp-acao-despesa:hover { background: #b03a3a; }
.fp-acao-transferir { background: var(--fp-trn-transferir); grid-column: span 2; flex-direction: row; gap: 10px; }
.fp-acao-transferir:hover { background: #3ba8d8; }
.fp-acao-transferir:active { transform: scale(0.98); }

@media (min-width: 768px) {
    .fp-acoes-rapidas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .fp-acao-rapida { flex-direction: row; padding: 16px; }
    .fp-acao-transferir { grid-column: span 1; }
}

.fp-btn-filtros { border-radius: 12px; font-weight: 600; background: #fff; }
.fp-btn-filtros:hover { background: #fff; color: var(--fp-texto); border-color: #bfdbfe; }

@media (max-width: 767.98px) { .fp-resumo-filtro { border-top: 1px solid var(--fp-borda); } }
@media (min-width: 768px) { .fp-resumo-filtro { border-top: 0 !important; } }

/* Chips de filtro ativo */
.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--fp-borda);
    background: #f3f4f6;
    color: #475569;
    animation: fpSurgir 0.3s ease-out both;
}
.fp-chip-conta { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.fp-chip-busca { background: #fefce8; color: #a16207; border-color: #fef9c3; }
.fp-chip button { border: none; background: none; padding: 0; color: inherit; line-height: 1; }
.fp-chip button:hover { opacity: 0.7; }

/* Totalizadores */
.fp-grid-totais-3, .fp-grid-totais-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) {
    .fp-grid-totais-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .fp-grid-totais-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.fp-tot { border-radius: 12px; padding: 14px 16px; border: 1px solid; }
.fp-tot-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fp-tot-icone { width: 22px; height: 22px; border-radius: 999px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.fp-tot-valor { font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.fp-tot-rodape { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.fp-tot-pct { color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }

.fp-tot-receita { background: rgba(45, 138, 97, 0.05); border-color: rgba(45, 138, 97, 0.2); }
.fp-tot-receita .fp-tot-icone { background: var(--fp-trn-receita); }
.fp-tot-receita .fp-tot-valor { color: var(--fp-trn-receita); }
.fp-tot-despesa { background: rgba(200, 69, 69, 0.05); border-color: rgba(200, 69, 69, 0.2); }
.fp-tot-despesa .fp-tot-icone, .fp-tot-despesa .fp-tot-pct { background: var(--fp-trn-despesa); }
.fp-tot-despesa .fp-tot-valor { color: var(--fp-trn-despesa); }
.fp-tot-aporte { background: rgba(37, 99, 235, 0.05); border-color: rgba(37, 99, 235, 0.2); }
.fp-tot-aporte .fp-tot-icone, .fp-tot-aporte .fp-tot-pct { background: #2563eb; }
.fp-tot-aporte .fp-tot-valor { color: #2563eb; }
.fp-tot-saldo-mes { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border-color: #e9d5ff; }
.fp-tot-saldo-mes .fp-tot-icone { background: #9333ea; }
.fp-tot-saldo-liq { background: #eff6ff; border-color: #bfdbfe; }
.fp-tot-saldo-liq .fp-tot-icone { background: #2563eb; }

.fp-icone-titulo { background: var(--fp-trn-receita); color: #fff; border-radius: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }

/* Itens da lista: borda azul clara no hover (transition-all do PHP) e entrada suave */
.fp-item-transacao {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    transition: all 0.3s ease;
    animation: fpSurgir 0.35s ease-out both;
}
.fp-item-transacao:hover { border-color: #dbeafe; }
.fp-item-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fp-item-selo { color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.fp-item-data { font-size: 12px; color: #94a3b8; font-weight: 500; }
.fp-item-valor { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.fp-item-descricao { font-size: 14px; font-weight: 700; color: #334155; line-height: 1.3; word-break: break-word; }
.fp-item-obs { font-size: 12px; color: #94a3b8; margin-top: 2px; word-break: break-word; }
.fp-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #94a3b8; border-top: 1px solid #f8fafc; padding-top: 8px; }
.fp-item-categoria { color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.fp-item-parcela { color: #9333ea; background: #faf5ff; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.fp-item-acoes { display: flex; gap: 8px; }
.fp-item-acoes .btn { flex: 1; font-size: 13px; font-weight: 500; border-radius: 8px; transition: all 0.2s ease; }
.fp-item-valor-desktop { display: none; }

.fp-cor-receita { color: var(--fp-trn-receita); }
.fp-cor-despesa { color: var(--fp-trn-despesa); }
.fp-cor-transferencia, .fp-cor-aporte { color: var(--fp-trn-transferir); }
.fp-bg-receita { background: var(--fp-trn-receita); }
.fp-bg-despesa { background: var(--fp-trn-despesa); }
.fp-bg-transferencia, .fp-bg-aporte { background: var(--fp-trn-transferir); }

@media (min-width: 768px) {
    .fp-item-transacao { grid-template-columns: 110px 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; }
    .fp-item-topo .fp-item-valor { display: none; }
    .fp-item-topo { flex-direction: column; }
    .fp-item-meta { border-top: 0; padding-top: 0; margin-top: 6px; }
    .fp-item-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
    .fp-item-valor-desktop { display: block; font-size: 1.25rem; min-width: 140px; text-align: right; }
    .fp-item-acoes .btn { flex: initial; }
}

/* Gaveta de filtros: desliza de baixo no celular e da direita no desktop (filter-drawer do PHP) */
.fp-gaveta.offcanvas-end { width: 400px; border-top-left-radius: 28px; border-bottom-left-radius: 28px; }
.fp-gaveta.offcanvas-bottom { height: 90vh; border-top-left-radius: 28px; border-top-right-radius: 28px; }
.fp-grid-atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fp-atalho {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.fp-atalho:hover { background: #fff; border-color: #bfdbfe; }
.fp-atalho.ativo { background: #2563eb; border-color: #2563eb; color: #fff; }
.fp-btn-aplicar { flex: 2; font-weight: 700; transition: all 0.2s ease; }
.fp-btn-aplicar:active { transform: scale(0.95); }

/* Modais */
.fp-modal-header { color: #fff; }
.fp-modal-receita { background: var(--fp-trn-receita); }
.fp-modal-despesa { background: var(--fp-trn-despesa); }
.fp-modal-transferir { background: var(--fp-trn-transferir); }
.fp-modal-editar { background: #2563eb; }
.fp-btn-salvar { color: #fff; font-weight: 600; }
.fp-btn-salvar:hover { color: #fff; filter: brightness(0.95); }
.fp-btn-salvar:active { transform: scale(0.97); }
.fp-btn-transferir { background: var(--fp-trn-transferir); }
.fp-btn-editar { background: #2563eb; }

.fp-alternador { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-alternador .btn { border: 1px solid var(--fp-borda); border-radius: 10px; font-size: 14px; transition: all 0.2s ease; }
.fp-alternador .btn-check:checked + .btn { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; font-weight: 600; }
.fp-bloco-parcelas { display: none; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 12px; animation: fpSurgir 0.25s ease-out both; }
.fp-bloco-parcelas.visivel { display: block; }

/* ==================== Contas e Categorias ==================== */
/* Animações do contas.php/categorias.php: card sobe 5px com sombra (hover-card) e o ícone
   cresce 10% (stats-icon) no hover; os cards entram em cascata. */

.fp-grid-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fp-grid-stats .fp-stat-acao { grid-column: 1 / -1; }
/* Grade de 4 (Categorias): no celular o botão ocupa a vaga ao lado de "Total", sem buraco */
.fp-grid-stats-4 .fp-stat-acao { grid-column: auto; padding: 10px; }
.fp-grid-stats-4 .fp-stat-acao .btn { font-size: 15px; padding: 10px 8px; }
@media (min-width: 768px) {
    .fp-grid-stats { grid-template-columns: repeat(var(--fp-stats-colunas, 3), minmax(0, 1fr)); gap: 16px; }
    .fp-grid-stats .fp-stat-acao { grid-column: auto; }
}

.fp-stat {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    min-width: 0;
}
.fp-stat:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.fp-stat-icone {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}
.fp-stat:hover .fp-stat-icone { transform: scale(1.1); }
.fp-stat-rotulo { font-size: 13px; color: var(--fp-texto-2); font-weight: 600; }
.fp-stat-valor { font-size: 1.3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-stat-acao { justify-content: center; }
.fp-stat-acao .btn { width: 100%; }

.fp-grid-cadastro { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }

.fp-cad-card {
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid var(--fp-cad-cor, #6c757d);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    /* backwards (não both): no fim a animação solta o transform, senão o hover não sobe */
    animation: fpSurgir 0.35s ease-out backwards;
    min-width: 0;
}
.fp-cad-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15); }
.fp-cad-icone {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    background: var(--fp-cad-cor, #6c757d);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.fp-cad-card:hover .fp-cad-icone { transform: scale(1.1); }
.fp-cad-nome { font-size: 1.05rem; font-weight: 700; margin: 0; word-break: break-word; }
.fp-cad-sub { font-size: 13px; color: var(--fp-texto-2); }
.fp-cad-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.fp-cad-bloco { border-top: 1px solid var(--fp-borda); margin-top: 12px; padding-top: 12px; }
.fp-cad-card .dropdown-menu { font-size: 14px; }
.fp-cad-inativa { opacity: 0.7; }

.min-w-0 { min-width: 0; }

.fp-vazio { text-align: center; padding: 40px 16px; color: var(--fp-texto-2); }
.fp-vazio i.fp-vazio-icone { font-size: 3.5rem; opacity: 0.4; display: block; margin-bottom: 12px; }

/* Seletor de cor: amostras do PHP + cor livre */
.fp-amostras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-amostra {
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    padding: 0;
}
.fp-amostra:hover { transform: scale(1.08); }
.fp-amostra.ativa { border-color: #fff; box-shadow: 0 0 0 3px var(--fp-texto); }
.fp-cor-livre { width: 48px; height: 38px; padding: 2px; }
.fp-icone-previa { width: 38px; height: 38px; border-radius: 8px; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.fp-abas .nav-link { font-weight: 600; color: var(--fp-texto-2); font-size: 14px; }
.fp-abas .nav-link.active { color: var(--fp-texto); }

/* ==================== Investimentos ==================== */
/* Mesmas animações do card-modern do PHP: cartões de resumo e o painel da lista sobem 5px
   com sombra maior no hover; ícone do resumo cresce 10%; linhas da tabela com hover. */

.fp-titulo-gradiente {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Valores em reais não cabem em 4 colunas no tablet: 2 colunas até 992px, 4 acima */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fp-grid-stats-inv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fp-grid-stats-inv .fp-stat { flex-direction: column; align-items: flex-start; }
@media (min-width: 576px) { .fp-grid-stats-inv .fp-stat { flex-direction: row; align-items: center; } }
.fp-stat-inv:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.fp-grad-primario { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.fp-grad-sucesso  { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: #fff; }
.fp-grad-alerta   { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: #fff; }
.fp-grad-info     { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #fff; }

.fp-tabela-inv { font-size: 14px; }
.fp-tabela-inv small { font-size: 12px; }
.fp-linha-inv { transition: background-color 0.2s ease; }
.fp-tabela-inv .btn { transition: all 0.3s ease; }
.fp-tabela-inv .btn:hover { transform: translateY(-2px); }

.fp-inv-cartao {
    border: 1px solid var(--fp-borda);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fpSurgir 0.35s ease-out backwards;
}
.fp-inv-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.fp-inv-grade strong { display: block; font-size: 15px; }
.fp-inv-acoes { display: flex; gap: 8px; }
.fp-inv-acoes .btn { flex: 1; }
.fp-modal-novo-inv { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
.fp-modal-novo-inv .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ==================== Painel — projeção, investimentos, gráfico e saúde ==================== */
/* Animações do home.php: card do mês sobe 2px com sombra no hover (0.2s); cards de projeção de
   investimentos sobem 2px (0.3s); painéis card-modern sobem 5px (fp-painel). Gráfico sem animação
   (o PHP desligou de propósito). */

.fp-banner-projecao {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: #fff;
    border-radius: 12px;
    padding: 20px 22px;
    transition: all 0.3s ease;
}
.fp-banner-projecao h2 { font-size: 1.4rem; font-weight: 700; }
.fp-banner-projecao p { color: rgba(255, 255, 255, 0.85); font-size: 14px; }

.fp-proj-rapido { padding: 14px 16px; border-radius: 12px; border: 1px solid; }
.fp-proj-rapido-verde { background: #d1fae5; border-color: #a7f3d0; }
.fp-proj-rapido-azul { background: #dbeafe; border-color: #93c5fd; }
.fp-proj-rapido-azul .fp-proj-rapido-valor { color: #2563eb; }
.fp-proj-rapido-rotulo { color: #6b7280; font-size: 13px; font-weight: 500; }
.fp-proj-rapido-valor { font-size: 1.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fp-grid-proj { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.fp-proj-mes {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: fpSurgir 0.35s ease-out backwards;
}
.fp-proj-mes:hover, .fp-proj-mes:focus-visible { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); outline: none; }
.fp-proj-mes-atual { border: 2px solid #3b82f6; }
.fp-proj-mes-nome { font-size: 1.1rem; font-weight: 600; color: #1f2937; }
.fp-selo-atual { background: #2563eb; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.fp-proj-mes-saldo { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.fp-proj-mes-var { font-size: 13px; font-weight: 500; white-space: nowrap; }
.fp-proj-mes-detalhes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 13px; font-weight: 500; align-items: start; }
.fp-proj-mes-detalhes > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fp-proj-mes-detalhes > div > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pct { color: #fff; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 4px; width: fit-content; margin: 0 auto; }
.fp-pct-vermelho { background: #ef4444; }
.fp-pct-azul { background: #2563eb; }

.fp-painel-sem-pad { padding: 0; overflow: hidden; }
.fp-cab-gradiente { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 16px 18px; }
.fp-cab-gradiente small { opacity: 0.8; font-size: 13px; }
.fp-proj-resumo { background: #f8f9fa; border-radius: 10px; padding: 12px; text-align: center; }
.fp-proj-resumo span { display: block; color: #6c757d; font-size: 13px; font-weight: 600; }
.fp-proj-resumo strong { font-size: 1.25rem; color: #1f2937; }

.fp-grid-proj-inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.fp-proj-inv {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.fp-proj-inv:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
.fp-proj-inv-atual { border: 2px solid #007bff; background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%); }
.fp-proj-inv-saldo { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.fp-proj-inv-itens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fp-proj-item { text-align: center; padding: 8px 4px; border-radius: 8px; background: #f8f9fa; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-proj-item small { font-size: 12px; color: #6c757d; line-height: 1.2; }
.fp-proj-item strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-proj-aporte { background: #fff3e0; color: #e65100; }
.fp-proj-rendimento { background: #e8f5e9; color: #2e7d32; }
.fp-proj-percentual { background: #e3f2fd; color: #1565c0; }
.fp-proj-crescimento { background: #e8f5e9; color: #2e7d32; }
.fp-proj-totais { background: #f8f9fa; border-radius: 12px; padding: 14px; }

.fp-grafico-container { position: relative; height: 380px; width: 100%; }
@media (min-width: 768px) { .fp-grafico-container { height: 460px; } }
@media (min-width: 1200px) { .fp-grafico-container { height: 520px; } }
.fp-grafico-legenda { background: #f8f9fa; border-radius: 8px; padding: 10px; font-size: 13px; color: #6c757d; }
.fp-grafico-legenda i { font-size: 1.3rem; display: block; margin-bottom: 4px; }
.fp-grafico-legenda small { font-size: 12px; }
.fp-filtro-grafico .btn { font-size: 13px; }
@media (max-width: 767.98px) { .fp-filtro-grafico { width: 100%; } }

.fp-cab-saude { color: #fff; padding: 14px 16px; background: #6c757d; }
.fp-cab-saude-success { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.fp-cab-saude-info { background: linear-gradient(135deg, #4facfe 0%, #00c6fb 100%); }
.fp-cab-saude-warning { background: linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%); }
.fp-cab-saude-danger { background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); }
.fp-gauge { position: relative; display: inline-block; }
.fp-gauge-texto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fp-gauge-texto span { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.fp-gauge-texto small { color: #6c757d; font-size: 13px; }
.fp-ind-titulo { font-size: 13px; font-weight: 600; }
.fp-progresso { height: 8px; }

.fp-alerta-success { background: #d1e7dd; color: #0f5132; }
.fp-alerta-info { background: #cff4fc; color: #055160; }
.fp-alerta-warning { background: #fff3cd; color: #664d03; }
.fp-alerta-danger { background: #f8d7da; color: #842029; }
.fp-alerta-secondary { background: #e2e3e5; color: #41464b; }
.accordion-button.fp-acordeao-success, .accordion-button.fp-acordeao-success:not(.collapsed) { background: #28a745; color: #fff; }
.accordion-button.fp-acordeao-info, .accordion-button.fp-acordeao-info:not(.collapsed) { background: #17a2b8; color: #fff; }
.accordion-button.fp-acordeao-warning, .accordion-button.fp-acordeao-warning:not(.collapsed) { background: #ffc107; color: #212529; }
.accordion-button.fp-acordeao-danger, .accordion-button.fp-acordeao-danger:not(.collapsed) { background: #dc3545; color: #fff; }
.accordion-button.fp-acordeao-secondary, .accordion-button.fp-acordeao-secondary:not(.collapsed) { background: #6c757d; color: #fff; }
.accordion-button[class*="fp-acordeao-"]::after { filter: brightness(0) invert(1); }
.accordion-button.fp-acordeao-warning::after { filter: none; }

/* ==================== Relatórios ==================== */
/* Mesmos efeitos do relatorios.php: linha da tabela destaca no hover; cabeçalho da tabela em caixa alta. */

.fp-filtro-relatorio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fp-filtro-relatorio .form-select { width: auto; min-width: 190px; }
.fp-datas-relatorio { display: none; gap: 6px; align-items: center; flex-wrap: wrap; animation: fpSurgir 0.25s ease-out both; }
.fp-datas-relatorio.visivel { display: flex; }
.fp-datas-relatorio .form-control { width: auto; min-width: 140px; }
@media (max-width: 575.98px) {
    .fp-filtro-relatorio, .fp-filtro-relatorio .form-select { width: 100%; }
    .fp-datas-relatorio .form-control { flex: 1; min-width: 0; }
}

.fp-rel-barra { height: 8px; background: #f0f0f0; }
.fp-rel-barra .progress-bar { transition: width 0.6s ease; }
.fp-rel-tabela thead th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
}
.fp-rel-tabela tbody tr { transition: background-color 0.2s ease; }
.fp-rel-tabela .badge { font-weight: 500; padding: 0.35rem 0.65rem; }
.fp-rel-lista { display: flex; flex-direction: column; gap: 8px; }
.fp-rel-item { border: 1px solid var(--fp-borda); border-radius: 10px; padding: 10px 12px; animation: fpSurgir 0.3s ease-out backwards; }

@media print {
    .fp-navbar, .fp-filtro-relatorio { display: none !important; }
    .fp-painel, .fp-stat { box-shadow: none !important; break-inside: avoid; }
}

/* ==================== Perfil e Configurações ==================== */
/* Igual ao perfil.php: cartão ganha sombra no hover (desktop) e a barra de força da senha
   cresce com transição de 0,3s. */

.fp-painel-perfil { transition: all 0.3s ease; }
.fp-painel-perfil:hover { transform: none; }
@media (min-width: 992px) { .fp-painel-perfil:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } }
.fp-avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.fp-perfil-stats { display: flex; flex-direction: column; gap: 8px; }
.fp-perfil-stats > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; border-bottom: 1px dashed var(--fp-borda); padding-bottom: 6px; }
.fp-perfil-stats > div:last-child { border-bottom: 0; }
.fp-perfil-stats span { color: var(--fp-texto-2); }

.fp-forca-barra { height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.fp-forca-preenchimento { height: 100%; width: 0; border-radius: 2px; transition: all 0.3s ease; }
.fp-forca-fraca { background: #dc3545; }
.fp-forca-razoavel { background: #fd7e14; }
.fp-forca-boa { background: #ffc107; }
.fp-forca-forte { background: #28a745; }

.fp-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.fp-tema {
    border: 2px solid var(--fp-borda);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    text-align: left;
    transition: all 0.2s ease;
}
.fp-tema:hover { border-color: #a5b4fc; transform: translateY(-2px); }
.fp-tema.ativo { border-color: var(--fp-roxo); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25); }
.fp-tema-previa { width: 100%; height: 60px; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid rgba(0, 0, 0, 0.1); }
.fp-tema-previa span { display: block; height: 10px; border-radius: 4px; }
.fp-tema-previa span:last-child { width: 60%; }
.fp-previa-claro { background: #f3f4f8; }
.fp-previa-claro span { background: #fff; box-shadow: 0 0 0 1px #e2e5ee; }
.fp-previa-escuro { background: #111827; }
.fp-previa-escuro span { background: #1f2937; }
.fp-previa-auto { background: linear-gradient(90deg, #f3f4f8 50%, #111827 50%); }
.fp-previa-auto span { background: linear-gradient(90deg, #fff 50%, #1f2937 50%); }

.fp-menu-usuario { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ==================== TEMA ESCURO (data-bs-theme="dark", ver tema.js) ==================== */
[data-bs-theme="dark"] {
    --fp-bg: #0f1420;
    --fp-borda: #2b3445;
    --fp-texto: #e5e7eb;
    --fp-texto-2: #9ca3af;
    --fp-superficie: #1a2131;
    --fp-superficie-2: #222b3d;
}
[data-bs-theme="dark"] .fp-painel,
[data-bs-theme="dark"] .fp-card,
[data-bs-theme="dark"] .fp-stat,
[data-bs-theme="dark"] .fp-cad-card,
[data-bs-theme="dark"] .fp-item-transacao,
[data-bs-theme="dark"] .fp-proj-mes,
[data-bs-theme="dark"] .fp-proj-inv,
[data-bs-theme="dark"] .fp-inv-cartao,
[data-bs-theme="dark"] .fp-rel-item,
[data-bs-theme="dark"] .fp-cartao,
[data-bs-theme="dark"] .fp-btn-filtros { background: var(--fp-superficie); border-color: var(--fp-borda); color: var(--fp-texto); }
[data-bs-theme="dark"] .fp-proj-inv-atual { background: linear-gradient(135deg, #1e2a4a 0%, var(--fp-superficie) 100%); }
[data-bs-theme="dark"] .fp-proj-resumo,
[data-bs-theme="dark"] .fp-proj-totais,
[data-bs-theme="dark"] .fp-grafico-legenda,
[data-bs-theme="dark"] .fp-atalho,
[data-bs-theme="dark"] .fp-chip,
[data-bs-theme="dark"] .fp-tabela-inv thead th,
[data-bs-theme="dark"] .fp-rel-tabela thead th { background: var(--fp-superficie-2); color: var(--fp-texto); border-color: var(--fp-borda); }
[data-bs-theme="dark"] .fp-proj-resumo strong,
[data-bs-theme="dark"] .fp-proj-mes-nome,
[data-bs-theme="dark"] .fp-item-descricao,
[data-bs-theme="dark"] .fp-titulo,
[data-bs-theme="dark"] .fp-subtitulo { color: var(--fp-texto); }
[data-bs-theme="dark"] .fp-titulo-gradiente { color: transparent; }
[data-bs-theme="dark"] .fp-proj-item { background: var(--fp-superficie-2); }
[data-bs-theme="dark"] .fp-proj-aporte { background: rgba(230, 81, 0, 0.18); color: #ffb74d; }
[data-bs-theme="dark"] .fp-proj-rendimento,
[data-bs-theme="dark"] .fp-proj-crescimento { background: rgba(46, 125, 50, 0.22); color: #81c784; }
[data-bs-theme="dark"] .fp-proj-percentual { background: rgba(21, 101, 192, 0.25); color: #90caf9; }
[data-bs-theme="dark"] .fp-proj-rapido-verde { background: rgba(5, 150, 105, 0.15); border-color: rgba(5, 150, 105, 0.4); }
[data-bs-theme="dark"] .fp-proj-rapido-azul { background: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.4); }
[data-bs-theme="dark"] .fp-proj-rapido-azul .fp-proj-rapido-valor { color: #93c5fd; }
[data-bs-theme="dark"] .fp-tot-saldo-mes { background: rgba(147, 51, 234, 0.14); border-color: rgba(147, 51, 234, 0.4); }
[data-bs-theme="dark"] .fp-tot-saldo-liq { background: rgba(37, 99, 235, 0.14); border-color: rgba(37, 99, 235, 0.4); }
[data-bs-theme="dark"] .fp-item-parcela { background: rgba(147, 51, 234, 0.2); color: #d8b4fe; }
[data-bs-theme="dark"] .fp-bloco-parcelas { background: rgba(37, 99, 235, 0.12); border-color: rgba(37, 99, 235, 0.4); }
[data-bs-theme="dark"] .fp-forca-barra,
[data-bs-theme="dark"] .fp-rel-barra { background: var(--fp-superficie-2); }
[data-bs-theme="dark"] .fp-login-cartao { background: rgba(26, 33, 49, 0.95); color: var(--fp-texto); border-color: rgba(255, 255, 255, 0.08); }
[data-bs-theme="dark"] .fp-sem-elevar[style*="background:#eff6ff"] { background: rgba(37, 99, 235, 0.12) !important; color: #bfdbfe !important; }
[data-bs-theme="dark"] .loading-overlay-conteudo { background: var(--fp-superficie); }
[data-bs-theme="dark"] .loading-overlay-texto { color: var(--fp-texto); }

/* ==================== PWA (instalar aplicativo) ==================== */
/* Mesmas animações do PHP: no login o botão surge com slideInUp (0,5s) e sobe no hover;
   nas telas internas o aviso desliza da direita (slideIn 0,3s, pwa.js do PHP). */

.fp-pwa-botao-login {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
}
[data-pwa-opcao]:not(.d-none) .fp-pwa-botao-login { animation: fpPwaSubir 0.5s ease-out; }
.fp-pwa-botao-login:hover, .fp-pwa-botao-login:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); }

@keyframes fpPwaSubir {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fp-pwa-aviso {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    max-width: 320px;
    width: calc(100% - 40px);
    padding: 20px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: fpPwaEntrarDireita 0.3s ease-out;
}
.fp-pwa-aviso button { border: none; border-radius: 8px; font-weight: 600; font-size: 14px; padding: 10px; flex: 1; transition: all 0.2s ease; }
.fp-pwa-instalar { background: #fff; color: #667eea; }
.fp-pwa-depois { background: rgba(255, 255, 255, 0.2); color: #fff; }
.fp-pwa-aviso button:active { transform: scale(0.97); }
.fp-pwa-aviso .fp-pwa-fechar { flex: 0 0 auto; background: none; color: #fff; font-size: 22px; line-height: 1; padding: 0 4px; opacity: 0.8; }

@keyframes fpPwaEntrarDireita {
    from { transform: translateX(400px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Aberto como aplicativo instalado: respeita o recorte da tela (notch) */
@media (display-mode: standalone) {
    .fp-navbar { padding-top: max(8px, env(safe-area-inset-top)); }
}

/* Escolha "somente esta / desta em diante / série" (SweetAlert): opções empilhadas, cabe no celular */
.swal2-radio { flex-direction: column; align-items: flex-start; gap: 8px; }
.swal2-radio label { margin: 0 !important; font-size: 15px; }

/* ==================== Loading padrão (overlay de tela cheia) ==================== */
/* Ver Padronizacao.md, seção 7.5 — usado via loading.js (Loading.show()/Loading.hide()) */

.loading-overlay-global {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(31, 41, 55, 0.45);
    align-items: center;
    justify-content: center;
}

.loading-overlay-global.ativo { display: flex; }

.loading-overlay-conteudo {
    background: #ffffff;
    border-radius: 10px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.loading-overlay-conteudo .spinner-border {
    color: var(--fp-roxo);
    width: 2.5rem;
    height: 2.5rem;
}

.loading-overlay-texto {
    margin-top: 12px;
    color: var(--fp-texto);
    font-weight: 600;
    font-size: 14px;
}

.loading-overlay-texto:empty { display: none; }

/* ==================== VER DETALHES (essencial à vista, resto a um clique) ==================== */
.fp-btn-detalhes {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px dashed var(--fp-borda); background: transparent; color: var(--fp-roxo);
    border-radius: 20px; padding: 4px 14px; font-size: 13px; font-weight: 600;
    transition: background .2s ease, border-color .2s ease;
}
.fp-btn-detalhes:hover { background: rgba(102, 126, 234, .08); border-color: var(--fp-roxo); }
[data-bs-theme="dark"] .fp-btn-detalhes { color: #a5b4fc; }
.fp-linha-detalhes { display: flex; justify-content: center; margin: 4px 0 16px; }

.fp-etiquetas { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-etiqueta { font-size: 13px; background: var(--bs-body-bg); border: 1px solid var(--fp-borda); border-radius: 20px; padding: 4px 12px; color: var(--fp-texto-2); }
.fp-etiqueta b { color: var(--fp-texto); }
[data-bs-theme="dark"] .fp-etiqueta b { color: inherit; }

/* Resumo embaixo do gráfico de projeção (substitui as 2 seções de 12 cartões) */
.fp-resumo-proj { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 991.98px) { .fp-resumo-proj { grid-template-columns: repeat(2, 1fr); } }
.fp-resumo-proj > div { background: var(--fp-bg); border: 1px solid var(--fp-borda); border-radius: 10px; padding: 8px 10px; text-align: center; }
[data-bs-theme="dark"] .fp-resumo-proj > div { background: rgba(255, 255, 255, .03); }
.fp-resumo-proj small { display: block; color: var(--fp-texto-2); font-size: 12px; }
.fp-resumo-proj strong { font-size: 14px; }

/* Grade de 4 indicadores (essencial) */
.fp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 991.98px) { .fp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fp-grid-4 .fp-card-valor { font-size: 1.05rem; } }
.fp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 575.98px) { .fp-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-grid-3 > :last-child { grid-column: span 2; } }

/* Formulários: campos opcionais recolhidos */
.fp-mais-opcoes { font-size: 13px; font-weight: 600; color: var(--fp-roxo); text-decoration: none; }
.fp-mais-opcoes .bi { transition: transform .2s ease; }
.fp-mais-opcoes[aria-expanded="true"] .bi { transform: rotate(180deg); }
[data-bs-theme="dark"] .fp-mais-opcoes { color: #a5b4fc; }

/* ==================== MENU LATERAL (celular/tablet) ==================== */
/* O botão fica à esquerda e o menu abre como gaveta pela esquerda; no computador fica em linha na barra. */
@media (max-width: 991.98px) {
    .fp-menu-lateral { background: linear-gradient(180deg, var(--fp-roxo) 0%, var(--fp-roxo-escuro) 100%); color: #fff; max-width: 82vw; }
    .fp-menu-lateral .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .18); }
    .fp-menu-lateral .nav-link { color: rgba(255, 255, 255, .9); font-size: 15px; padding: 10px 12px; }
    .fp-menu-lateral .nav-link.active { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 600; }
    .fp-menu-lateral .dropdown { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); }
    .fp-menu-lateral .dropdown .btn { width: 100%; text-align: left; }
    .fp-menu-lateral .dropdown-menu { position: static !important; transform: none !important; width: 100%; margin-top: 6px; }
}
.fp-btn-menu { border-color: rgba(255, 255, 255, .45); }

/* Painel: sem a saúde financeira aberta (fica em "Ver detalhes"), a projeção ocupa a largura toda */
@media (min-width: 992px) {
    #colProjecao:has(+ [data-detalhe][hidden]) { flex: 0 0 100%; max-width: 100%; }
}

.fp-resumo-proj.fp-resumo-proj-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* ==================== CONEXÕES BANCÁRIAS (MeuPluggy) ==================== */
.fp-passos { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.fp-conexao { border: 1px solid var(--fp-borda); border-radius: 12px; padding: 12px 14px; }
.fp-pluggy-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--fp-bg); }
[data-bs-theme="dark"] .fp-pluggy-conta { background: rgba(255, 255, 255, .04); }
.fp-pluggy-conta-nome { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.fp-pluggy-conta-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 360px; justify-content: flex-end; }
.fp-pluggy-conta-campos .form-select { flex: 1 1 170px; max-width: 240px; }
.fp-pluggy-conta-campos input[type="date"] { flex: 0 1 150px; }
@media (max-width: 575.98px) {
    .fp-pluggy-conta-campos { justify-content: stretch; }
    .fp-pluggy-conta-campos .form-select { max-width: none; }
}