#page-financeiro #card-fin-receitas,
#page-financeiro #card-fin-despesas,
#page-financeiro #card-fin-saldo,
#page-financeiro #card-fin-areceber {
    padding: 18px 20px !important;
    border-radius: 18px !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.20);
}
#page-financeiro #card-fin-receitas { background: linear-gradient(150deg, rgba(16,185,129,.16), rgba(16,185,129,.05)) !important; border: 1px solid rgba(16,185,129,.34) !important; }
#page-financeiro #card-fin-despesas { background: linear-gradient(150deg, rgba(239,68,68,.16),  rgba(239,68,68,.05))  !important; border: 1px solid rgba(239,68,68,.34)  !important; }
#page-financeiro #card-fin-saldo    { background: linear-gradient(150deg, rgba(59,130,246,.16), rgba(59,130,246,.05)) !important; border: 1px solid rgba(59,130,246,.34) !important; }
#page-financeiro #card-fin-areceber { background: linear-gradient(150deg, rgba(245,158,11,.16), rgba(245,158,11,.05)) !important; border: 1px solid rgba(245,158,11,.34) !important; }


#page-financeiro #card-fin-receitas::before,
#page-financeiro #card-fin-despesas::before,
#page-financeiro #card-fin-saldo::before,
#page-financeiro #card-fin-areceber::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
#page-financeiro #card-fin-receitas::before { background: #10b981; }
#page-financeiro #card-fin-despesas::before { background: #ef4444; }
#page-financeiro #card-fin-saldo::before    { background: #3b82f6; }
#page-financeiro #card-fin-areceber::before { background: #f59e0b; }

#page-financeiro #card-fin-receitas:hover,
#page-financeiro #card-fin-despesas:hover,
#page-financeiro #card-fin-saldo:hover,
#page-financeiro #card-fin-areceber:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
}


#page-financeiro [id^="card-fin-"] > div:first-child {
    letter-spacing: .04em !important;
    opacity: .92;
}
#page-financeiro #fin-receitas,
#page-financeiro #fin-despesas,
#page-financeiro #fin-saldo,
#page-financeiro #fin-areceber {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.15 !important;
}


#page-financeiro .sec-recolhivel {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(148,163,184,.16) !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
#page-financeiro .sec-recolhe-cab h3 {
    font-family: 'Outfit', system-ui, sans-serif;
    letter-spacing: .01em;
}


#page-financeiro #tab-btn-lancamentos,
#page-financeiro #tab-btn-analise,
#page-financeiro #tab-btn-extrato,
#page-financeiro #tab-btn-conciliacao {
    font-size: .95rem !important;
    padding: 9px 18px !important;
    border-radius: 11px !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}


#page-financeiro #fin-mes,
#page-financeiro #fin-ano {
    border-radius: 11px !important;
    font-weight: 600;
}
#page-financeiro .select-busca-campo {
    max-width: 160px;                 
    border-radius: 10px !important;
}
#page-financeiro #search-financeiro {
    border-radius: 12px !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
#page-financeiro #search-financeiro:focus {
    border-color: rgba(0,212,255,.55) !important;
    box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}


body.tema-claro #page-financeiro .sec-recolhivel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
body.tema-claro #page-financeiro #card-fin-receitas { background: linear-gradient(150deg, rgba(16,185,129,.14), rgba(16,185,129,.04)) !important; }
body.tema-claro #page-financeiro #card-fin-despesas { background: linear-gradient(150deg, rgba(239,68,68,.14),  rgba(239,68,68,.04))  !important; }
body.tema-claro #page-financeiro #card-fin-saldo    { background: linear-gradient(150deg, rgba(59,130,246,.14), rgba(59,130,246,.04)) !important; }
body.tema-claro #page-financeiro #card-fin-areceber { background: linear-gradient(150deg, rgba(245,158,11,.14), rgba(245,158,11,.04)) !important; }
body.tema-claro #page-financeiro [id^="card-fin-"]:hover {
    box-shadow: 0 10px 26px rgba(15,23,42,.12);
}