/* ══ HERO CARD ══ */
.hero-card {
    background: linear-gradient(145deg, #1b5e35 0%, #0d2d18 45%, #000 100%);
    border-radius: 16px; padding: 38px 34px;
    color: white; position: relative; overflow: hidden;
    min-height: 210px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-circle-1 {
    position: absolute; top: -40px; right: -40px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(40,167,69,.07);
}
.hero-circle-2 {
    position: absolute; bottom: -60px; left: 35%;
    width: 250px; height: 250px; border-radius: 50%;
    background: rgba(40,167,69,.04);
}
.hero-title {
    font-size: 34px; font-weight: 800; line-height: 1.1;
    margin-bottom: 12px; position: relative;
}
.hero-desc {
    font-size: 14px; color: rgba(255,255,255,.6);
    line-height: 1.55; max-width: 300px; position: relative;
}

/* ══ BUDGET CARD ══ */
.budget-card {
    background: white; border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.budget-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px;
    font-size: 15px; font-weight: 600; color: #1F2937;
}
.budget-body { display: flex; gap: 20px; align-items: flex-start; }
.budget-stats { display: flex; flex-direction: column; gap: 10px; min-width: 115px; }
.budget-pct { font-size: 30px; font-weight: 800; color: #1F2937; line-height: 1; }
.budget-pct-lbl { font-size: 10px; color: #9CA3AF; margin-top: 2px; font-weight: 500; }
.budget-stat-row { display: flex; align-items: center; gap: 7px; }
.budget-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.budget-stat-val { font-size: 12px; font-weight: 700; color: #1F2937; }
.budget-stat-lbl { font-size: 10px; color: #9CA3AF; }

/* ══ METRIC CARDS ══ */
.metric-card {
    background: white; border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
}
.metric-card-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.metric-card-title.green { color: #10B981; }
.metric-card-title.red   { color: #EF4444; }
.metric-card-body  { display: flex; align-items: center; flex: 1; }
.metric-card-body .donut-wrap { margin: 0 auto; }
.metric-big-num    { font-family: 'DM Sans', sans-serif; font-size: 54px; font-weight: 700; color: #2B3674; line-height: 1; letter-spacing: -0.02em; }
.metric-sub        { font-size: 12px; color: #9CA3AF; margin-top: 4px; }

/* ══ ACTIVAS CARD ══ */
.activas-card {
    background: white; border-radius: 16px;
    padding: 28px 32px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
}
.activas-label { font-size: 15px; font-weight: 600; color: #6B7280; }
.activas-num   { font-size: 72px; font-weight: 800; color: #28A745; line-height: 1.1; }
.activas-sub   { font-size: 14px; color: #9CA3AF; margin-bottom: 12px; }
.activas-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, #28A745, #0a0a0a);
    border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 14px rgba(40,167,69,.35);
    transition: all .2s;
}
.activas-btn:hover { transform: scale(1.1); box-shadow: 0 6px 18px rgba(40,167,69,.45); }

/* ══ TABLE CARD ══ */
.table-card {
    background: white; border-radius: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    overflow: hidden;
}
.table-toolbar {
    padding: 14px 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #F3F4F6;
    gap: 10px; flex-wrap: wrap;
}
.tfilter-pills { display: flex; gap: 6px; }
.tpill {
    padding: 6px 14px; border: none; border-radius: 20px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all .2s; color: #6B7280; background: #F3F4F6;
}
.tpill.active-all    { background: #1F2937; color: white; box-shadow: 0 2px 8px rgba(31,41,55,.35); }
.tpill.active-good   { background: #10B981; color: white; box-shadow: 0 2px 8px rgba(16,185,129,.35); }
.tpill.active-bad    { background: #EF4444; color: white; box-shadow: 0 2px 8px rgba(239,68,68,.35); }
.table-toolbar-right { display: flex; align-items: center; gap: 10px; }
.table-count { font-size: 12px; color: #9CA3AF; }