@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --finance-primary: #173b7a;
    --finance-primary-dark: #102754;
    --finance-accent: #0f766e;
    --finance-surface: #ffffff;
    --finance-bg: #eef3fb;
    --finance-border: #dde5f3;
    --finance-text: #14213d;
    --finance-muted: #627089;
    --finance-shadow: 0 18px 45px rgba(16, 39, 84, 0.10);
}

/* Investments module */
.inv-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.75rem 1.5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.inv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
    gap: 1.5rem;
    align-items: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1a3a5c 100%);
    border-radius: 1.25rem;
    padding: 2.25rem 2rem;
    color: #fff;
}

.inv-hero__copy .dashboard-section-label { color: #7dd3fc; }

.inv-hero__copy h1 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    margin: 0.4rem 0 0;
    max-width: 42rem;
    line-height: 1.3;
}

.inv-hero__copy p {
    margin: 0.65rem 0 0;
    color: #94a3b8;
    font-size: 0.87rem;
    max-width: 46rem;
}

.inv-hero__stat {
    background: rgba(255,255,255,0.07);
    border-radius: 0.875rem;
    padding: 1.35rem 1.5rem;
    text-align: center;
}

.inv-hero__stat small {
    display: block;
    color: #94a3b8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.inv-hero__stat em {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-style: normal;
    margin-top: 0.25rem;
}

.inv-hero__amount {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #f1f5f9;
    line-height: 1.1;
}

.inv-hero__amount.is-positive { color: #34d399; }
.inv-hero__amount.is-negative { color: #f87171; }

.inv-recovery-bar {
    margin: 0.85rem 0 0.3rem;
    height: 6px;
    background: rgba(255,255,255,0.12);
    border-radius: 99px;
    overflow: hidden;
}

.inv-recovery-bar div {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #059669);
    border-radius: 99px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.inv-rate-label {
    display: block;
    color: #7dd3fc;
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

.inv-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.inv-kpi {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.875rem;
    padding: 1.15rem 1.35rem;
}

.inv-kpi__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.inv-kpi__icon.is-blue { background: #e0f2fe; color: #0284c7; }
.inv-kpi__icon.is-green { background: #dcfce7; color: #16a34a; }
.inv-kpi__icon.is-purple { background: #ede9fe; color: #7c3aed; }

.inv-kpi small,
.inv-kpi strong,
.inv-kpi em { display: block; }

.inv-kpi small {
    color: #64748b;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.inv-kpi strong {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0.1rem 0;
}

.inv-kpi em {
    font-size: 0.7rem;
    font-style: normal;
    color: #94a3b8;
}

.inv-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.inv-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
}

.inv-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.inv-section__head .dashboard-section-label { margin-bottom: 0.15rem; }

.inv-section__head h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.inv-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.5rem;
    transition: background 0.15s;
}

.inv-link-btn:hover { background: #eff6ff; }

.inv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 2rem;
    color: #94a3b8;
    text-align: center;
}

.inv-empty i { font-size: 2.5rem; opacity: 0.4; }
.inv-empty p { font-size: 0.85rem; max-width: 36rem; margin: 0; }
.inv-empty strong { color: #475569; }

.inv-table { display: flex; flex-direction: column; }

.inv-table__head,
.inv-table__row {
    display: grid;
    grid-template-columns: 0.7fr 1.6fr 1fr 1fr 0.85fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
}

.inv-table__head {
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #f1f5f9;
}

.inv-table__row {
    border-bottom: 1px solid #f8fafc;
    font-size: 0.82rem;
    color: #334155;
}

.inv-table__row:last-child { border-bottom: none; }
.inv-table__row:hover { background: #fafafa; }

.inv-table__date { color: #64748b; font-size: 0.78rem; white-space: nowrap; }

.inv-table__desc {
    font-weight: 500;
    color: #0f172a;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-table__account,
.inv-table__cat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #64748b;
    font-size: 0.78rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-table__num { text-align: right; }

.inv-table__amount {
    font-weight: 700;
    font-size: 0.875rem;
}

.inv-table__amount.is-invest { color: #b45309; }
.inv-table__amount.is-recover { color: #16a34a; }

@media (max-width: 768px) {
    .inv-hero { grid-template-columns: 1fr; }
    .inv-kpis { grid-template-columns: 1fr; }
    .inv-table__head,
    .inv-table__row { grid-template-columns: 0.6fr 1fr 0.9fr; }
    .inv-table__head span:nth-child(4),
    .inv-table__row .inv-table__cat { display: none; }
}

/* Goals module */
.goals-page {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.goals-hero,
.goals-kpi-grid article,
.goals-section,
.goals-form-card {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.goals-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.55rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.goals-hero h1 {
    max-width: 48rem;
    margin: 0.35rem 0 0;
    color: #0f172a;
    font-size: clamp(1.9rem, 3vw, 3rem);
    letter-spacing: 0;
}

.goals-hero p {
    max-width: 50rem;
    margin: 0.65rem 0 0;
    color: #64748b;
    font-size: 1rem;
}

.goals-hero__score {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.goals-orbit {
    width: 9.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 56%, transparent 57%), conic-gradient(#2563eb calc(var(--progress) * 1%), #e2e8f0 0);
}

.goals-orbit strong,
.goals-orbit span,
.goals-hero__stats small,
.goals-hero__stats strong,
.goals-kpi-grid small,
.goals-kpi-grid strong,
.goals-kpi-grid em {
    display: block;
}

.goals-orbit strong {
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1;
}

.goals-orbit span,
.goals-hero__stats small,
.goals-kpi-grid small,
.goals-kpi-grid em {
    color: #64748b;
    font-size: 0.72rem;
}

.goals-hero__stats {
    display: grid;
    gap: 0.55rem;
}

.goals-hero__stats div {
    min-width: 0;
    padding: 0.72rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.75);
}

.goals-hero__stats strong {
    margin-top: 0.2rem;
    color: #0f172a;
    font-size: 1rem;
}

.goals-kpi-grid,
.goals-layout,
.goals-card-grid {
    display: grid;
    gap: 1rem;
}

.goals-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.goals-kpi-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 1rem;
}

.goals-kpi-grid article > span {
    width: 2.65rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    color: #2563eb;
    background: #eff6ff;
    font-size: 1.05rem;
}

.goals-kpi-grid strong {
    margin-top: 0.2rem;
    color: #0f172a;
    font-size: 1.05rem;
}

.goals-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.34fr);
    align-items: start;
}

.goals-main,
.goals-panel,
.goals-roadmap,
.goals-list,
.goals-form-card form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.goals-panel {
    position: sticky;
    top: 1rem;
}

.goals-section,
.goals-form-card {
    padding: 1.2rem;
}

.goals-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.goals-section__head h2 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: 1.18rem;
}

.goals-section__head a,
.goals-section__head small {
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.goals-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.goals-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.goal-suggestion {
    min-width: 0;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--goal-color) 24%, #e2e8f0);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--goal-color) 6%, #ffffff) 100%);
}

.goal-suggestion__top,
.goal-suggestion__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.goal-suggestion__top span {
    width: 2.7rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    color: var(--goal-color);
    background: color-mix(in srgb, var(--goal-color) 11%, #ffffff);
    font-size: 1.05rem;
}

.goal-suggestion__top em {
    width: fit-content;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    color: var(--goal-color);
    background: color-mix(in srgb, var(--goal-color) 10%, #ffffff);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 900;
}

.goal-suggestion h3 {
    margin: 0.85rem 0 0;
    color: #0f172a;
    font-size: 1.12rem;
}

.goal-suggestion p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.goal-suggestion__reason {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    margin-top: 0.85rem;
    padding: 0.7rem;
    border-radius: 0.8rem;
    color: #334155;
    background: #f8fafc;
    font-size: 0.78rem;
}

.goal-suggestion__reason i {
    color: var(--goal-color);
}

.goal-suggestion__meta {
    margin-top: 0.85rem;
}

.goal-suggestion__meta small,
.goal-suggestion__meta strong {
    display: block;
}

.goal-suggestion__meta small {
    color: #64748b;
    font-size: 0.7rem;
}

.goal-suggestion__meta strong {
    color: #0f172a;
    font-size: 0.92rem;
}

.goal-suggestion form {
    margin: 1rem 0 0;
}

.goal-suggestion button {
    width: 100%;
    min-height: 2.55rem;
    border: 0;
    border-radius: 0.82rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--goal-color), color-mix(in srgb, var(--goal-color) 70%, #0f766e));
    font-weight: 900;
}

.goal-card {
    min-width: 0;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--goal-color) 22%, #e2e8f0);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--goal-color) 7%, #ffffff) 100%);
}

.goal-card__top,
.goal-card__numbers,
.goal-card__meter,
.goal-row,
.goal-row__title,
.goal-row__actions,
.goals-form-row {
    display: flex;
    align-items: center;
}

.goal-card__top,
.goal-card__numbers,
.goal-row__title {
    justify-content: space-between;
}

.goal-card__top span,
.goal-row__icon {
    width: 2.7rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
    color: var(--goal-color);
    background: color-mix(in srgb, var(--goal-color) 11%, #ffffff);
    font-size: 1.05rem;
}

.goal-card__top em,
.goal-row__title em {
    width: fit-content;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    color: var(--goal-color);
    background: color-mix(in srgb, var(--goal-color) 10%, #ffffff);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 900;
}

.goal-card h3 {
    margin: 0.85rem 0 0;
    color: #0f172a;
    font-size: 1.15rem;
}

.goal-card p,
.goal-row p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.82rem;
}

.goal-card__meter {
    gap: 0.7rem;
    margin-top: 1rem;
}

.goal-card__meter div,
.goal-row__progress {
    height: 0.65rem;
    flex: 1;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.goal-card__meter span,
.goal-row__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--goal-color), color-mix(in srgb, var(--goal-color) 65%, #14b8a6));
}

.goal-card__meter strong,
.goal-card__numbers strong,
.goal-row__title strong,
.goals-roadmap strong {
    color: #0f172a;
}

.goal-card__meter strong {
    font-size: 0.86rem;
}

.goal-card__numbers {
    gap: 0.75rem;
    margin-top: 0.95rem;
}

.goal-card__numbers div {
    min-width: 0;
}

.goal-card__numbers small,
.goal-card__numbers strong,
.goals-roadmap strong,
.goals-roadmap small {
    display: block;
}

.goal-card__numbers small,
.goal-row small,
.goals-roadmap small {
    color: #64748b;
    font-size: 0.72rem;
}

.goal-card__numbers strong {
    font-size: 0.95rem;
}

.goal-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: var(--goal-color);
    font-size: 0.8rem;
    font-weight: 900;
    text-decoration: none;
}

.goals-roadmap article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.goals-roadmap article > span {
    width: 2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--goal-color);
    font-size: 0.78rem;
    font-weight: 900;
}

.goals-roadmap em {
    color: var(--goal-color);
    font-style: normal;
    font-weight: 900;
}

.goal-row {
    gap: 0.8rem;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
}

.goal-row__body {
    min-width: 0;
    flex: 1;
}

.goal-row__title {
    gap: 0.7rem;
}

.goal-row__progress {
    margin: 0.65rem 0 0.35rem;
}

.goal-row__actions {
    gap: 0.35rem;
}

.goal-row__actions form {
    margin: 0;
}

.goal-row__actions button {
    width: 2.2rem;
    aspect-ratio: 1;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    color: #2563eb;
    background: #ffffff;
}

.goals-empty {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.88rem;
}

.goals-form-card label span {
    display: block;
    margin-bottom: 0.32rem;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 900;
}

.goals-form-card .form-control,
.goals-form-card .form-select {
    min-height: 2.65rem;
    border-color: #dbe4f0;
    border-radius: 0.8rem;
    font-size: 0.88rem;
}

.goals-form-row {
    gap: 0.75rem;
}

.goals-form-row label {
    min-width: 0;
    flex: 1;
}

.goals-save-button {
    min-height: 2.8rem;
    border: 0;
    border-radius: 0.85rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    font-weight: 900;
}

@media (max-width: 1100px) {
    .goals-hero,
    .goals-layout {
        grid-template-columns: 1fr;
    }

    .goals-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    .goals-hero__score,
    .goals-kpi-grid,
    .goals-suggestion-grid,
    .goals-card-grid {
        grid-template-columns: 1fr;
    }

    .goals-hero,
    .goals-section,
    .goals-form-card {
        padding: 1rem;
    }

    .goal-row,
    .goal-row__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .goal-row__actions {
        width: 100%;
    }
}

.smart-decision-strip {
    padding: 1.2rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.smart-decision-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.smart-decision-strip__head h2 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: 1.18rem;
    font-weight: 950;
}

.smart-decision-strip__head a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 900;
    text-decoration: none;
}

.smart-decision-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.smart-decision-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
}

.smart-decision-grid article > span {
    width: 2.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    font-size: 1rem;
}

.smart-decision-grid .is-safe > span {
    color: #059669;
    background: #ecfdf5;
}

.smart-decision-grid .is-warning > span {
    color: #d97706;
    background: #fffbeb;
}

.smart-decision-grid .is-danger > span {
    color: #dc2626;
    background: #fef2f2;
}

.smart-decision-grid small,
.smart-decision-grid strong,
.smart-decision-grid em {
    display: block;
}

.smart-decision-grid small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.smart-decision-grid strong {
    margin-top: 0.28rem;
    color: #0f172a;
    font-size: 1.08rem;
}

.smart-decision-grid em {
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.76rem;
    font-style: normal;
    line-height: 1.35;
}

.smart-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.smart-next-actions span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: #0f766e;
    background: #ecfdf5;
    font-size: 0.78rem;
    font-weight: 850;
}

.smart-ai-report-modal .modal-content,
.smart-ai-report-modal {
    border: 0;
    border-radius: 1.1rem;
}

.smart-ai-report-help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.9rem;
    padding: 0.9rem;
    border-radius: 0.9rem;
    color: #1e3a8a;
    background: #eff6ff;
}

.smart-ai-report-help span {
    width: 2.2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: #dbeafe;
}

.smart-ai-report-help p {
    margin: 0;
    color: #334155;
    font-size: 0.9rem;
}

.smart-ai-report-text {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre;
}

@media (max-width: 1100px) {
    .smart-decision-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .smart-decision-strip__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .smart-decision-grid {
        grid-template-columns: 1fr;
    }
}

/* History intelligence module */
.history-intelligence {
    display: grid;
    gap: 1.15rem;
    margin-bottom: 1.5rem;
}

.history-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(37, 99, 235, 0.92)),
        radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.3), transparent 28%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.history-hero h1 {
    margin: 0.15rem 0 0.35rem;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    font-weight: 900;
    letter-spacing: 0;
}

.history-hero p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
}

.history-hero .dashboard-section-label {
    color: rgba(255, 255, 255, 0.72);
}

.history-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.history-hero__actions button,
.history-hero__actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.68rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-weight: 850;
    text-decoration: none;
}

.history-hero__actions button {
    cursor: pointer;
}

.history-kpi-grid,
.history-insight-grid {
    display: grid;
    gap: 1rem;
}

.history-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.history-insight-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.history-kpi-card,
.history-panel {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.history-kpi-card {
    display: grid;
    gap: 0.3rem;
    padding: 1rem;
}

.history-kpi-card span,
.history-kpi-card small,
.history-panel__header span,
.history-account-flow span,
.history-opportunity-list span,
.history-category-bars span {
    color: #64748b;
}

.history-kpi-card strong {
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
}

.history-kpi-card.is-positive strong,
.history-account-flow small.is-positive {
    color: #047857;
}

.history-kpi-card.is-negative strong,
.history-account-flow small.is-negative {
    color: #dc2626;
}

.history-panel {
    min-width: 0;
    padding: 1rem;
}

.history-panel--wide {
    min-height: 22rem;
}

.history-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.history-panel__header h2 {
    margin: 0.1rem 0 0;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 950;
}

.history-month-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    align-items: end;
    gap: 0.8rem;
    min-height: 17rem;
}

.history-month-bars__item {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    text-align: center;
}

.history-month-bars__bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 0.22rem;
    height: 11rem;
    padding: 0.45rem;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.history-month-bars__bars span {
    width: 1rem;
    min-height: 0.5rem;
    border-radius: 999px 999px 0.3rem 0.3rem;
}

.history-month-bars__bars .is-income {
    background: linear-gradient(180deg, #34d399, #047857);
}

.history-month-bars__bars .is-expense {
    background: linear-gradient(180deg, #fb7185, #dc2626);
}

.history-month-bars__item strong {
    color: #334155;
    font-size: 0.78rem;
}

.history-month-bars__item small {
    color: #64748b;
    font-size: 0.72rem;
}

.history-opportunity-list,
.history-account-flow,
.history-category-bars {
    display: grid;
    gap: 0.75rem;
}

.history-opportunity-list article,
.history-account-flow article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.78rem;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.history-opportunity-list strong,
.history-account-flow strong,
.history-category-bars strong {
    display: block;
    color: #0f172a;
    font-weight: 900;
}

.history-opportunity-list small,
.history-account-flow small {
    flex: 0 0 auto;
    color: #2563eb;
    font-weight: 950;
}

.history-category-bars article {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(130px, 1.1fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.history-category-bars__track {
    height: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.history-category-bars__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--bar-color, #2563eb);
}

.history-category-bars small {
    color: #0f172a;
    font-weight: 900;
    text-align: right;
}

.history-empty-mini {
    padding: 1rem;
    border-radius: 0.85rem;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.history-ai-intent {
    margin-bottom: 1rem;
}

.history-ai-intent label {
    display: block;
    margin-bottom: 0.4rem;
    color: #0f172a;
    font-weight: 900;
}

.history-ai-report-text {
    min-height: 24rem;
    border-radius: 0.95rem;
    background: #0f172a;
    color: #e2e8f0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .history-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-insight-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .history-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-hero__actions,
    .history-hero__actions button,
    .history-hero__actions a {
        width: 100%;
    }

    .history-kpi-grid,
    .history-category-bars article {
        grid-template-columns: 1fr;
    }

    .history-category-bars small {
        text-align: left;
    }
}

/* Budgets premium module */
.budgets-premium {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.budgets-hero,
.budgets-kpi-grid article,
.budgets-health-card,
.budgets-bars-card {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.budgets-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.45rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.budgets-hero h1 {
    max-width: 52rem;
    margin: 0.3rem 0 0;
    color: #0f172a;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    letter-spacing: 0;
}

.budgets-hero p {
    max-width: 54rem;
    margin: 0.55rem 0 0;
    color: #64748b;
}

.budgets-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.budgets-hero__actions button,
.budgets-hero__actions a {
    min-height: 2.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 0.9rem;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #0f766e);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
}

.budgets-hero__actions a {
    color: #2563eb;
    background: #eff6ff;
}

.budgets-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.budgets-kpi-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 1rem;
}

.budgets-kpi-grid article > span {
    width: 2.7rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.9rem;
}

.budgets-kpi-grid .is-blue {
    color: #2563eb;
    background: #eff6ff;
}

.budgets-kpi-grid .is-green {
    color: #059669;
    background: #ecfdf5;
}

.budgets-kpi-grid .is-orange {
    color: #d97706;
    background: #fffbeb;
}

.budgets-kpi-grid .is-purple {
    color: #7c3aed;
    background: #f5f3ff;
}

.budgets-kpi-grid small,
.budgets-kpi-grid strong,
.budgets-kpi-grid em {
    display: block;
}

.budgets-kpi-grid small {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 950;
    text-transform: uppercase;
}

.budgets-kpi-grid strong {
    margin-top: 0.25rem;
    color: #0f172a;
    font-size: 1.12rem;
}

.budgets-kpi-grid em {
    margin-top: 0.3rem;
    color: #64748b;
    font-size: 0.75rem;
    font-style: normal;
}

.budgets-visual-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1rem;
}

.budgets-health-card,
.budgets-bars-card {
    padding: 1.2rem;
}

.budgets-health-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.15rem;
    align-items: center;
}

.budgets-health-ring {
    width: 9rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 56%, transparent 57%), conic-gradient(#0f766e calc(var(--progress) * 1%), #e2e8f0 0);
}

.budgets-health-ring strong,
.budgets-health-ring span {
    display: block;
}

.budgets-health-ring strong {
    color: #0f172a;
    font-size: 1.6rem;
}

.budgets-health-ring span {
    color: #64748b;
    font-size: 0.72rem;
}

.budgets-health-card h2,
.budgets-card-head h2 {
    margin: 0.25rem 0 0;
    color: #0f172a;
    font-size: 1.18rem;
}

.budgets-health-card p {
    margin: 0.45rem 0 0;
    color: #64748b;
}

.budgets-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.budgets-action-chips span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.65rem;
    border-radius: 999px;
    color: #0f766e;
    background: #ecfdf5;
    font-size: 0.76rem;
    font-weight: 850;
}

.budgets-card-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.budgets-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.budgets-bars > div {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.budgets-bars > div > span {
    color: #0f172a;
    font-weight: 850;
}

.budgets-bars > div > strong {
    color: #2563eb;
    font-size: 0.88rem;
}

.budgets-bars > div > div {
    grid-column: 1 / -1;
    height: 0.65rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.budgets-bars > div > div span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
}

.budget-ai-needs {
    margin-bottom: 0.8rem;
}

.budget-ai-needs label {
    display: block;
    margin-bottom: 0.4rem;
    color: #0f172a;
    font-weight: 900;
}

.budget-ai-help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.9rem;
    padding: 0.9rem;
    border-radius: 0.9rem;
    background: #eff6ff;
}

.budget-ai-help span {
    width: 2.2rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    color: #2563eb;
    background: #dbeafe;
}

.budget-ai-help p {
    margin: 0;
    color: #334155;
    font-size: 0.9rem;
}

.budget-ai-report-text {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .budgets-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .budgets-kpi-grid,
    .budgets-visual-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .budgets-kpi-grid,
    .budgets-visual-grid,
    .budgets-health-card {
        grid-template-columns: 1fr;
    }

    .budgets-hero,
    .budgets-health-card,
    .budgets-bars-card {
        padding: 1rem;
    }
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--finance-text);
    background:
        radial-gradient(circle at top left, rgba(23, 59, 122, 0.12), transparent 18%),
        radial-gradient(circle at right 15%, rgba(15, 118, 110, 0.08), transparent 16%),
        linear-gradient(180deg, #f8fbff 0%, var(--finance-bg) 100%);
    min-height: 100vh;
}

body.smart-panel-open {
    overflow: hidden;
}

img,
svg,
canvas {
    max-width: 100%;
}

.card,
.rounded-4 {
    border-radius: 1rem !important;
}

.dashboard-shell {
    padding-bottom: 2rem;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table {
    min-width: 640px;
}

.table-responsive code {
    word-break: break-all;
}

.form-control,
.form-select,
.btn,
.form-check-input,
.form-control-color {
    min-height: 2.8rem;
}

textarea.form-control {
    min-height: 7rem;
}

.modal-dialog {
    margin: 1rem auto;
}

.modal-content {
    border-radius: 1.2rem;
}

.dashboard-navbar {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(221, 229, 243, 0.85);
}

.dashboard-navbar__toggler {
    border: 1px solid var(--finance-border);
    border-radius: 0.95rem;
    padding: 0.45rem 0.65rem;
}

.dashboard-navbar__toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 59, 122, 0.12);
}

.dashboard-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2820,33,61,0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dashboard-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.dashboard-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, var(--finance-primary), var(--finance-primary-dark));
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 16px 35px rgba(23, 59, 122, 0.22);
}

.dashboard-brand__text {
    color: var(--finance-text);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.dashboard-navbar .nav-link {
    color: var(--finance-muted);
    font-size: 0.94rem;
    font-weight: 700;
    padding: 0.7rem 1rem !important;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.dashboard-navbar .nav-link:hover,
.dashboard-navbar .nav-link:focus {
    color: var(--finance-primary);
    background: rgba(23, 59, 122, 0.07);
}

.dashboard-navbar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--finance-primary), #1e4d9d);
    box-shadow: 0 10px 25px rgba(23, 59, 122, 0.22);
    text-decoration: none;
}

.dashboard-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.dashboard-navbar__button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    border-radius: 999px;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, var(--finance-accent), #13948b);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 32px rgba(15, 118, 110, 0.22);
}

.dashboard-navbar__button:hover,
.dashboard-navbar__button:focus {
    color: #fff;
    background: linear-gradient(135deg, #0c655e, #108d84);
}

.dashboard-profile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 0.7rem 0.45rem 0.45rem;
    border: 1px solid var(--finance-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
}

.dashboard-profile__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbe7ff, #edf4ff);
    color: var(--finance-primary);
    font-size: 0.85rem;
    font-weight: 800;
}

.dashboard-profile__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.dashboard-profile__meta strong {
    font-size: 0.9rem;
}

.dashboard-profile__meta span {
    color: var(--finance-muted);
    font-size: 0.75rem;
}

.dashboard-profile__chevron {
    color: var(--finance-muted);
    font-size: 0.8rem;
}

.dashboard-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.dashboard-eyebrow,
.dashboard-section-label {
    color: var(--finance-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-title,
.dashboard-section-title {
    margin: 0;
    color: var(--finance-text);
}

.dashboard-title {
    margin-top: 0.45rem;
    font-size: clamp(1.9rem, 3vw, 2.7rem);
    line-height: 1.02;
    font-weight: 800;
}

.dashboard-section-title {
    margin-top: 0.35rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.dashboard-subtitle {
    max-width: 46rem;
    margin: 0.7rem 0 0;
    color: var(--finance-muted);
    font-size: 1rem;
}

.dashboard-toolbar {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.period-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem;
    border-radius: 1.35rem;
    border: 1px solid var(--finance-border);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--finance-shadow);
}

.period-nav-btn {
    width: 2.7rem;
    height: 2.7rem;
    border: 0;
    border-radius: 0.95rem;
    background: #eef4ff;
    color: var(--finance-primary);
    font-size: 1.1rem;
    font-weight: 800;
}

.period-pill {
    min-width: 11rem;
    padding: 0 0.6rem;
}

.period-pill__label {
    display: block;
    color: var(--finance-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.period-pill strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1rem;
}

.dashboard-select {
    min-width: 12rem;
    border: 1px solid var(--finance-border);
    border-radius: 1rem;
    padding: 0.82rem 1rem;
    box-shadow: var(--finance-shadow);
}

.accounts-ribbon {
    padding: 1.4rem;
    border: 1px solid rgba(221, 229, 243, 0.9);
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--finance-shadow);
    margin-bottom: 1.5rem;
}

.accounts-ribbon__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.accounts-ribbon__add {
    color: var(--finance-primary);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.account-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 220px;
    padding: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--account-accent) 18%, #dbe4f3);
    border-radius: 1.45rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--account-surface) 100%);
    box-shadow: 0 16px 30px rgba(20, 33, 61, 0.07);
    text-decoration: none;
}

.account-card.is-inactive {
    opacity: 0.72;
}

.account-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    padding: 0 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--account-accent) 12%, #ffffff);
    color: var(--account-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.account-card__label {
    color: var(--finance-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-card__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
}

.account-card__balance {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
}

.account-card__balance.is-negative,
.movement-item__amount.is-negative {
    color: #b42318;
}

.account-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: auto;
    color: var(--finance-muted);
    font-size: 0.83rem;
    font-weight: 700;
}

.account-card--add {
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 1px dashed var(--finance-border);
    background: rgba(246, 249, 255, 0.95);
    color: var(--finance-primary);
    font-weight: 800;
}

.account-card--add__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #e6efff;
    font-size: 1.75rem;
    line-height: 1;
}

.dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(330px, 0.95fr);
    gap: 1.5rem;
}

.dashboard-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.widget-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.widget {
    padding: 1.35rem;
    border: 1px solid rgba(221, 229, 243, 0.9);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--finance-shadow);
}

.widget--hero {
    padding: 1.5rem;
}

.widget__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.widget__hint,
.widget__link {
    color: var(--finance-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.widget__link {
    text-decoration: none;
}

.trend-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: var(--finance-accent);
    font-size: 0.88rem;
    font-weight: 800;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.kpi-card {
    padding: 1.1rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid #e6edf8;
}

.kpi-card__label {
    display: block;
    color: var(--finance-muted);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.kpi-card__value {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.38rem;
    font-weight: 800;
    line-height: 1.1;
}

.kpi-card__meta {
    display: block;
    margin-top: 0.55rem;
    color: var(--finance-muted);
    font-size: 0.82rem;
}

.mini-bars {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.7rem;
    min-height: 180px;
    align-items: end;
}

.mini-bars__item {
    border-radius: 1rem 1rem 0.7rem 0.7rem;
    background: linear-gradient(180deg, rgba(23, 59, 122, 0.22), var(--finance-primary));
    box-shadow: inset 0 -6px 20px rgba(255, 255, 255, 0.15);
}

.expense-structure {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.expense-donut {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: var(--expense-chart);
}

.expense-donut::after {
    content: '';
    position: absolute;
    inset: 19px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #edf2fa;
}

.expense-donut__center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.expense-donut__center strong {
    font-size: 1rem;
}

.expense-donut__center span {
    color: var(--finance-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.expense-legend {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.expense-legend__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
}

.expense-legend__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
}

.sparkline-card {
    min-height: 210px;
}

.sparkline {
    width: 100%;
    height: 190px;
    overflow: visible;
}

.movement-list,
.budget-stack {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.movement-list--dense {
    gap: 0.35rem;
}

.movement-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid #edf2fa;
}

.movement-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.movement-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    font-size: 0.85rem;
    font-weight: 800;
}

.movement-item__icon.is-income {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.14);
}

.movement-item__icon.is-expense {
    color: #b42318;
    background: rgba(180, 35, 24, 0.12);
}

.movement-item__icon.is-transfer {
    color: #173b7a;
    background: rgba(23, 59, 122, 0.12);
}

.movement-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.movement-item__body strong {
    font-size: 0.92rem;
}

.movement-item__body span {
    color: var(--finance-muted);
    font-size: 0.79rem;
}

.movement-item__amount {
    font-size: 0.95rem;
    font-weight: 800;
}

.debt-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.debt-metric {
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border: 1px solid #e6edf8;
}

.debt-metric__label {
    display: block;
    color: var(--finance-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debt-metric__value {
    display: block;
    margin-top: 0.55rem;
    font-size: 1.18rem;
    font-weight: 800;
}

.debt-block {
    margin-top: 1rem;
}

.debt-block__title {
    margin-bottom: 0.75rem;
    color: var(--finance-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.debt-ranked-list,
.debt-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.debt-ranked-item,
.debt-alert {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: #f9fbff;
    border: 1px solid #e6edf8;
}

.debt-ranked-item strong,
.debt-alert strong {
    display: block;
    font-size: 0.9rem;
}

.debt-ranked-item span,
.debt-alert span {
    display: block;
    margin-top: 0.2rem;
    color: var(--finance-muted);
    font-size: 0.78rem;
}

.debt-alert.is-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}

.debt-alert.is-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

.debt-alert.is-safe {
    background: rgba(15, 118, 110, 0.06);
    border-color: rgba(15, 118, 110, 0.18);
}

.budget-card {
    padding: 1rem;
    border-radius: 1.2rem;
    background: #f9fbff;
    border: 1px solid #e6edf8;
}

.budget-card__head,
.budget-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.budget-card__meta {
    margin-top: 0.45rem;
    color: var(--finance-muted);
    font-size: 0.82rem;
}

.budget-progress {
    height: 0.6rem;
    margin: 0.85rem 0 0.7rem;
    background: #edf2fa;
}

.budget-card.is-safe .progress-bar {
    background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.budget-card.is-warning .progress-bar {
    background: linear-gradient(135deg, #c67b00, #f59e0b);
}

.budget-card.is-danger .progress-bar {
    background: linear-gradient(135deg, #b42318, #ef4444);
}

.empty-state {
    padding: 1rem;
    border: 1px dashed var(--finance-border);
    border-radius: 1rem;
    color: var(--finance-muted);
    text-align: center;
    background: rgba(246, 249, 255, 0.95);
}

.smart-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: #0f172a;
}

.smart-dashboard__header,
.smart-card,
.smart-kpi {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.smart-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 58%, #f5f3ff 100%);
}

.smart-dashboard__header h1 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.05;
    font-weight: 950;
}

.smart-dashboard__header p {
    max-width: 58rem;
    margin: 0.45rem 0 0;
    color: #64748b;
}

.smart-dashboard__filters,
.smart-period,
.smart-card__head,
.smart-legend,
.smart-segmented,
.smart-alert-list article,
.smart-activity-list article {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.smart-dashboard__filters {
    flex: 0 0 auto;
}

.smart-period {
    min-height: 3.25rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid #dbe4f0;
    border-radius: 0.95rem;
    background: #ffffff;
}

.smart-period span,
.smart-period strong {
    display: block;
}

.smart-period span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smart-period strong {
    color: #0f172a;
    font-size: 0.9rem;
    white-space: nowrap;
}

.smart-dashboard__filters button,
.smart-segmented button {
    border: 0;
    font-weight: 900;
}

.smart-dashboard__filters button {
    min-height: 3.25rem;
    padding: 0 1rem;
    border-radius: 0.95rem;
    color: #2563eb;
    background: #eff6ff;
}

.smart-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.smart-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.85rem;
    min-height: 8.2rem;
    padding: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: inherit;
    font: inherit;
    text-align: left;
}

.smart-kpi.is-clickable {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.smart-kpi.is-clickable:hover,
.smart-kpi.is-clickable:focus-visible {
    border-color: #bfdbfe;
    box-shadow: 0 20px 42px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
}

.smart-kpi.is-clickable:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.smart-kpi > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.9rem;
    font-size: 1.05rem;
}

.smart-kpi.is-blue > span {
    color: #2563eb;
    background: #eff6ff;
}

.smart-kpi.is-green > span {
    color: #059669;
    background: #ecfdf5;
}

.smart-kpi.is-teal > span {
    color: #0f766e;
    background: #f0fdfa;
}

.smart-kpi.is-red > span {
    color: #dc2626;
    background: #fef2f2;
}

.smart-kpi.is-purple > span {
    color: #7c3aed;
    background: #f5f3ff;
}

.smart-kpi small,
.smart-kpi strong,
.smart-kpi em {
    display: block;
}

.smart-kpi small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.smart-kpi strong {
    margin-top: 0.42rem;
    color: #0f172a;
    font-size: 1.22rem;
    line-height: 1.12;
    font-weight: 950;
}

.smart-kpi em {
    margin-top: 0.4rem;
    color: #64748b;
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 750;
}

.smart-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.65fr);
    gap: 1.15rem;
    align-items: start;
}

.smart-card {
    min-width: 0;
    padding: 1.25rem;
}

.smart-card__head {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.smart-card__head h2 {
    margin: 0.2rem 0 0;
    font-size: 1.16rem;
    font-weight: 950;
}

.smart-card__head small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.smart-card__head a {
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 900;
    text-decoration: none;
}

.smart-budget-card,
.smart-chart-card,
.smart-comparison-card,
.smart-accounts-card {
    grid-column: span 1;
}

.smart-budget-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
}

.smart-budget-table__head,
.smart-budget-row {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) repeat(4, minmax(110px, 0.8fr)) minmax(130px, 0.8fr);
    gap: 0.8rem;
    align-items: center;
}

.smart-budget-table__head {
    padding: 0.85rem 1rem;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.smart-budget-row {
    padding: 0.95rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.smart-budget-row strong {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
}

.smart-budget-category {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
}

.smart-budget-category span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    color: #2563eb;
    background: #eff6ff;
    font-weight: 950;
}

.smart-budget-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
}

.smart-budget-progress > div {
    height: 0.6rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.smart-budget-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #10b981;
}

.smart-budget-row.is-warning .smart-budget-progress span {
    background: #f59e0b;
}

.smart-budget-row.is-danger .smart-budget-progress span {
    background: #ef4444;
}

.smart-daily-list,
.smart-comparison-list,
.smart-stat-list,
.smart-alert-list,
.smart-activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.smart-daily-list div,
.smart-comparison-list article,
.smart-stat-list div,
.smart-account-grid article {
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.smart-daily-list div,
.smart-stat-list div {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
}

.smart-daily-list span,
.smart-stat-list span,
.smart-comparison-list span,
.smart-account-grid span,
.smart-activity-list small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.smart-daily-list strong,
.smart-stat-list strong,
.smart-comparison-list strong,
.smart-account-grid strong,
.smart-activity-list strong {
    color: #0f172a;
    font-weight: 950;
}

.smart-budget-mini-table {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.smart-budget-mini-table div,
.smart-budget-trend-table article,
.smart-budget-trend-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(82px, 0.8fr) minmax(88px, 0.8fr);
    gap: 0.5rem;
    align-items: center;
}

.smart-budget-mini-table div {
    padding: 0.55rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #ffffff;
}

.smart-budget-mini-table span,
.smart-budget-mini-table em,
.smart-budget-trend-table span,
.smart-budget-trend-table em {
    min-width: 0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.smart-budget-mini-table strong,
.smart-budget-trend-table strong {
    min-width: 0;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 950;
}

.smart-budget-mini-table .is-safe em,
.smart-budget-trend-table .is-safe em {
    color: #047857;
}

.smart-budget-mini-table .is-warning em,
.smart-budget-trend-table .is-warning em {
    color: #b45309;
}

.smart-budget-mini-table .is-danger em,
.smart-budget-trend-table .is-danger em {
    color: #dc2626;
}

.smart-budget-trend-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
}

.smart-budget-trend-head {
    grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(86px, 0.8fr));
    padding: 0.7rem 0.85rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.smart-budget-trend-table article {
    grid-template-columns: minmax(120px, 1.1fr) repeat(3, minmax(86px, 0.8fr));
    padding: 0.75rem 0.85rem;
    border-top: 1px solid #e2e8f0;
}

.smart-budget-trend-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.85rem;
}

.smart-budget-trend-cardlet {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.smart-budget-trend-cardlet::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: #10b981;
}

.smart-budget-trend-cardlet.is-warning::before {
    background: #f59e0b;
}

.smart-budget-trend-cardlet.is-danger::before {
    background: #ef4444;
}

.smart-budget-trend-cardlet__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
}

.smart-budget-trend-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #047857;
    border-radius: 0.7rem;
    background: #d1fae5;
    font-weight: 950;
}

.smart-budget-trend-cardlet.is-warning .smart-budget-trend-icon {
    color: #b45309;
    background: #fef3c7;
}

.smart-budget-trend-cardlet.is-danger .smart-budget-trend-icon {
    color: #dc2626;
    background: #fee2e2;
}

.smart-budget-trend-cardlet__top strong {
    display: block;
    min-width: 0;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 950;
}

.smart-budget-trend-cardlet__top span {
    display: block;
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.smart-budget-trend-cardlet__top em {
    padding: 0.28rem 0.5rem;
    color: #047857;
    border-radius: 999px;
    background: #ecfdf5;
    font-style: normal;
    font-weight: 950;
}

.smart-budget-trend-cardlet.is-warning .smart-budget-trend-cardlet__top em {
    color: #b45309;
    background: #fffbeb;
}

.smart-budget-trend-cardlet.is-danger .smart-budget-trend-cardlet__top em {
    color: #dc2626;
    background: #fef2f2;
}

.smart-budget-trend-meter {
    position: relative;
    height: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.smart-budget-trend-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
}

.smart-budget-trend-meter .is-projected {
    opacity: 0.32;
    background: #2563eb;
}

.smart-budget-trend-meter .is-spent {
    z-index: 1;
    background: #10b981;
}

.smart-budget-trend-cardlet.is-warning .smart-budget-trend-meter .is-spent {
    background: #f59e0b;
}

.smart-budget-trend-cardlet.is-danger .smart-budget-trend-meter .is-spent {
    background: #ef4444;
}

.smart-budget-trend-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.smart-budget-trend-values div {
    min-width: 0;
    padding: 0.6rem;
    border-radius: 0.6rem;
    background: #f8fafc;
}

.smart-budget-trend-values span {
    display: block;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
}

.smart-budget-trend-values strong {
    display: block;
    margin-top: 0.2rem;
    color: #0f172a;
    font-size: clamp(0.7rem, 1vw, 0.82rem);
    font-weight: 950;
}

.smart-line-chart,
.smart-projection-chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.smart-line-chart .grid,
.smart-projection-chart .grid {
    fill: none;
    stroke: #e2e8f0;
}

.smart-line-chart .area {
    fill: rgba(37, 99, 235, 0.1);
}

.smart-line-chart .line,
.smart-projection-chart .real,
.smart-projection-chart .projected {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}

.smart-line-chart .current,
.smart-projection-chart .real {
    stroke: #2563eb;
}

.smart-line-chart .previous {
    stroke: #10b981;
}

.smart-line-chart .year,
.smart-projection-chart .projected {
    stroke: #7c3aed;
    stroke-dasharray: 8 8;
}

.smart-projection-chart circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 3;
}

.smart-line-chart .labels text {
    fill: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.smart-legend {
    flex-wrap: wrap;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
}

.smart-legend span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}

.smart-legend .is-current {
    background: #2563eb;
}

.smart-legend .is-previous {
    background: #10b981;
}

.smart-legend .is-year {
    background: #7c3aed;
}

.smart-prediction-value {
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.smart-prediction-value span,
.smart-prediction-value em {
    display: block;
    color: #64748b;
    font-style: normal;
    font-weight: 800;
}

.smart-prediction-value strong {
    display: block;
    margin: 0.35rem 0;
    color: #2563eb;
    font-size: 2rem;
    line-height: 1;
    font-weight: 950;
}

.smart-segmented {
    padding: 0.25rem;
    border-radius: 0.85rem;
    background: #f1f5f9;
}

.smart-segmented button {
    min-height: 2.15rem;
    padding: 0 0.7rem;
    border-radius: 0.65rem;
    color: #64748b;
    background: transparent;
    font-size: 0.78rem;
}

.smart-segmented button.is-active {
    color: #ffffff;
    background: #2563eb;
}

.smart-comparison-list article {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.8rem;
}

.smart-comparison-list[data-comparison-panel="month"] article:nth-child(2) {
    display: none;
}

.smart-comparison-list small {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 750;
}

.smart-comparison-form {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.smart-comparison-form input,
.smart-comparison-form button {
    min-height: 2.25rem;
    border: 1px solid #dbe4f0;
    border-radius: 0.5rem;
    font: inherit;
}

.smart-comparison-form input {
    max-width: 9.2rem;
    padding: 0 0.55rem;
}

.smart-comparison-form button {
    padding: 0 0.75rem;
    color: #ffffff;
    background: #2563eb;
    font-weight: 850;
}

.smart-comparison-list em {
    font-style: normal;
    font-weight: 900;
}

.smart-comparison-list .is-negative em,
.smart-activity-list .is-negative,
.smart-account-grid .is-negative {
    color: #dc2626;
}

.smart-comparison-list .is-positive em {
    color: #059669;
}

.smart-alert-list article {
    align-items: flex-start;
    padding: 0.9rem;
    border-radius: 0.9rem;
}

.smart-alert-list article > span,
.smart-activity-list article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 0.8rem;
}

.smart-alert-list article strong,
.smart-alert-list article small {
    display: block;
}

.smart-alert-list article small {
    margin-top: 0.18rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.smart-alert-list .is-danger {
    background: #fef2f2;
}

.smart-alert-list .is-danger > span {
    color: #dc2626;
    background: #fee2e2;
}

.smart-alert-list .is-warning {
    background: #fff7ed;
}

.smart-alert-list .is-warning > span {
    color: #f97316;
    background: #ffedd5;
}

.smart-alert-list .is-safe {
    background: #ecfdf5;
}

.smart-alert-list .is-safe > span {
    color: #059669;
    background: #d1fae5;
}

.smart-account-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.smart-account-grid article {
    display: flex;
    min-height: 8.7rem;
    flex-direction: column;
    gap: 0.55rem;
}

.smart-account-grid article > strong {
    margin-top: auto;
    font-size: 1.05rem;
}

.smart-activity-list article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.smart-activity-list article:last-child {
    border-bottom: 0;
}

.smart-activity-list .is-out {
    color: #dc2626;
    background: #fef2f2;
}

.smart-activity-list .is-in {
    color: #059669;
    background: #ecfdf5;
}

.smart-activity-list em {
    color: #059669;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.smart-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(4px);
}

.smart-detail-overlay[hidden],
.smart-detail-panel[hidden] {
    display: none;
}

.smart-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1051;
    width: min(520px, calc(100vw - 1rem));
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 1.25rem;
    background: #ffffff;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    animation: smartPanelIn 0.22s ease-out;
}

@keyframes smartPanelIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.smart-detail-view {
    display: none;
}

.smart-detail-view.is-active {
    display: block;
}

.smart-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.smart-detail-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
}

.smart-detail-header p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.88rem;
}

.smart-detail-header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0.8rem;
    color: #64748b;
    background: #f8fafc;
}

.smart-detail-summary,
.smart-detail-budget-grid,
.smart-detail-comparison {
    display: grid;
    gap: 0.75rem;
}

.smart-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0;
}

.smart-detail-summary article,
.smart-detail-budget-list article,
.smart-detail-comparison div,
.smart-projection-detail,
.smart-scenario-list article {
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    background: #f8fafc;
}

.smart-detail-summary article {
    padding: 0.85rem;
}

.smart-detail-summary span,
.smart-detail-budget-grid span,
.smart-detail-comparison span,
.smart-projection-detail span,
.smart-scenario-list span {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
}

.smart-detail-summary strong,
.smart-detail-budget-grid strong,
.smart-detail-comparison strong,
.smart-projection-detail strong,
.smart-scenario-list strong {
    display: block;
    margin-top: 0.28rem;
    color: #0f172a;
    font-weight: 950;
}

.smart-detail-budget-list,
.smart-expense-breakdown,
.smart-scenario-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.smart-detail-budget-list article {
    padding: 1rem;
}

.smart-detail-budget-list article.is-safe {
    border-color: #bbf7d0;
}

.smart-detail-budget-list article.is-warning {
    border-color: #fed7aa;
    background: #fff7ed;
}

.smart-detail-budget-list article.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.smart-detail-budget-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: center;
}

.smart-detail-budget-top > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.82rem;
    color: #2563eb;
    background: #eff6ff;
    font-weight: 950;
}

.smart-detail-budget-top strong,
.smart-detail-budget-top small {
    display: block;
}

.smart-detail-budget-top small {
    color: #64748b;
    font-weight: 800;
}

.smart-detail-budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.9rem;
}

.smart-detail-progress {
    height: 0.65rem;
    margin-top: 0.9rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.smart-detail-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #10b981;
}

.smart-detail-budget-list article.is-warning .smart-detail-progress span {
    background: #f59e0b;
}

.smart-detail-budget-list article.is-danger .smart-detail-progress span {
    background: #ef4444;
}

.smart-detail-budget-list em {
    display: block;
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.smart-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.smart-detail-footer span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.smart-detail-footer a {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 0.84rem;
    font-weight: 950;
    text-decoration: none;
}

.smart-expense-breakdown article,
.smart-scenario-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem;
}

.smart-expense-breakdown article {
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
}

.smart-expense-breakdown span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.smart-detail-comparison {
    grid-template-columns: 1fr;
    margin-top: 1rem;
}

.smart-detail-comparison div,
.smart-scenario-list article {
    padding: 0.9rem;
}

.smart-projection-detail {
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.smart-projection-detail strong {
    color: #2563eb;
    font-size: 1.8rem;
    line-height: 1.05;
}

@media (max-width: 1399.98px) {
    .smart-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .smart-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .smart-main-grid {
        grid-template-columns: 1fr;
    }

    .smart-daily-card,
    .smart-prediction-card,
    .smart-stats-card,
    .smart-alerts-card,
    .smart-activity-card {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .smart-dashboard__header,
    .smart-dashboard__filters,
    .smart-card__head,
    .smart-comparison-list article,
    .smart-activity-list article {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .smart-kpi-grid,
    .smart-account-grid {
        grid-template-columns: 1fr;
    }

    .smart-dashboard__filters button,
    .smart-period,
    .smart-segmented {
        width: 100%;
    }

    .smart-segmented {
        display: grid;
        grid-template-columns: 1fr;
    }

    .smart-budget-table {
        border: 0;
        overflow: visible;
    }

    .smart-budget-table__head {
        display: none;
    }

    .smart-budget-row {
        grid-template-columns: 1fr;
        margin-bottom: 0.75rem;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        background: #ffffff;
    }

    .smart-line-chart {
        min-height: 220px;
    }

    .smart-detail-panel {
        width: 100vw;
        overflow-y: scroll;
        padding: 1rem;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    }

    .smart-detail-header,
    .smart-detail-footer,
    .smart-expense-breakdown article,
    .smart-scenario-list article {
        display: grid;
        grid-template-columns: 1fr;
    }

    .smart-detail-summary,
    .smart-detail-budget-grid {
        grid-template-columns: 1fr;
    }
}

.auth-page-shell {
    min-height: 100vh;
    display: grid;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(14, 116, 144, 0.82)),
        url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1600&q=80") center/cover;
}

.auth-shell {
    min-height: 72vh;
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.auth-card {
    width: min(100%, 440px);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.auth-brand > span {
    width: 3.35rem;
    height: 3.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.9rem;
    background: #0f766e;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 900;
}

.auth-brand h1 {
    margin: 0;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 900;
}

.auth-brand p,
.auth-card small {
    margin: 0;
    color: #64748b;
}

.auth-card form,
.admin-panel form {
    display: grid;
    gap: 0.9rem;
}

.auth-card label,
.admin-panel label {
    display: grid;
    gap: 0.35rem;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
}

.auth-card button,
.admin-panel button[type="submit"] {
    min-height: 2.85rem;
    border: 0;
    border-radius: 0.8rem;
    background: #0f766e;
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.24);
}

.auth-back {
    color: #0f766e;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

.dashboard-profile__link {
    width: 2.15rem;
    height: 2.15rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 0.7rem;
    color: #475569;
    background: #ffffff;
    text-decoration: none;
}

.admin-users {
    display: grid;
    gap: 1.25rem;
}

.admin-users__hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0f766e, #2563eb);
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.22);
}

.admin-users__hero h1 {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.7rem;
    font-weight: 900;
}

.admin-users__hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.admin-users__grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-panel {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.admin-panel h2 {
    margin-bottom: 1rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.admin-user-inline {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.2fr) minmax(120px, 0.8fr) minmax(100px, 0.7fr) minmax(150px, 1fr) 2.6rem;
    gap: 0.45rem;
    align-items: center;
    min-width: 820px;
}

.admin-user-inline .btn {
    width: 2.6rem;
    min-height: 2.4rem;
    border-radius: 0.7rem;
}

.admin-panel .admin-user-delete {
    width: 2.6rem;
    min-height: 2.4rem;
    border: 1px solid #fecaca;
    border-radius: 0.7rem;
    background: #fff1f2;
    color: #be123c;
    box-shadow: none;
}

.admin-users-table {
    min-width: 1040px;
}

.admin-users-table td:first-child {
    min-width: 190px;
}

.admin-user-delete-form {
    display: inline-grid;
    place-items: center;
    margin: 0;
}

@media (max-width: 1199.98px) {
    .admin-users__grid {
        grid-template-columns: 1fr;
    }

    .admin-users__hero {
        padding: 1.1rem;
    }

    .admin-users__hero h1 {
        font-size: 1.35rem;
    }
}

@media (max-width: 767.98px) {
    .auth-page-shell > .container-xxl {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .auth-shell {
        min-height: auto;
        padding: 1rem 0;
    }

    .auth-card {
        padding: 1.25rem;
        border-radius: 0.9rem;
    }

    .auth-brand {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .auth-brand > span {
        width: 2.85rem;
        height: 2.85rem;
        border-radius: 0.75rem;
    }

    .auth-brand h1 {
        font-size: 1.2rem;
    }

    .admin-users__hero {
        border-radius: 0.9rem;
    }

    .admin-panel {
        padding: 0.9rem;
        border-radius: 0.9rem;
    }

    .admin-users-table,
    .admin-user-inline {
        min-width: 0;
    }

    .admin-user-inline {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .admin-user-inline .btn,
    .admin-panel .admin-user-delete,
    .admin-user-delete-form {
        width: 100%;
    }

    .admin-users-table tbody tr {
        padding: 0.95rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.9rem;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .admin-users-table tbody {
        display: grid !important;
        gap: 0.85rem;
    }

    .admin-users-table td[data-label="Actualizar"],
    .admin-users-table td[data-label="Eliminar"] {
        padding-top: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-profile {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 2.15rem 2.15rem;
    }

    .dashboard-profile__meta {
        min-width: 0;
    }

    .dashboard-profile__meta strong,
    .dashboard-profile__meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.accounts-module {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.accounts-module__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.accounts-module__title {
    margin: 0.3rem 0 0;
    color: #111827;
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 800;
}

.accounts-module__subtitle {
    max-width: 42rem;
    margin: 0.55rem 0 0;
    color: #64748b;
}

.accounts-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.accounts-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem;
    border: 1px solid #dbe4f0;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.accounts-summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.75rem;
    font-weight: 800;
}

.accounts-summary-card span {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.accounts-summary-card strong {
    display: block;
    margin-top: 0.2rem;
    color: #111827;
    font-size: 1.65rem;
    line-height: 1;
}

.accounts-summary-card--info .accounts-summary-card__icon {
    color: #1e3a8a;
    background: #e8efff;
}

.accounts-summary-card--success .accounts-summary-card__icon {
    color: #059669;
    background: #dff8ee;
}

.accounts-summary-card--neutral .accounts-summary-card__icon {
    color: #64748b;
    background: #eef2f7;
}

.accounts-summary-card--credit .accounts-summary-card__icon {
    color: #1e3a8a;
    background: #e9edff;
}

.accounts-summary-card--danger .accounts-summary-card__icon {
    color: #dc2626;
    background: #fee2e2;
}

.accounts-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.45fr);
    gap: 1.25rem;
    align-items: start;
}

.accounts-panel {
    padding: 1.35rem;
    border: 1px solid rgba(221, 229, 243, 0.9);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--finance-shadow);
}

.accounts-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.accounts-panel__header h2 {
    margin: 0.2rem 0 0;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
}

.accounts-panel__count {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.account-form-section {
    padding: 1rem 0;
    border-top: 1px solid #e6edf8;
}

.account-form-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.account-form-section h3,
.account-credit-fields__title h3 {
    margin: 0 0 0.85rem;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 800;
}

.account-credit-fields {
    margin: 0.3rem 0;
    padding: 1rem;
    border: 1px solid rgba(30, 58, 138, 0.2);
    border-radius: 0.85rem;
    background: #f5f8ff;
}

.account-credit-fields__title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.account-credit-fields__title span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.account-switch {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.95rem;
    border: 1px solid #e6edf8;
    border-radius: 0.85rem;
    background: #f8fbff;
}

.account-switch label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
}

.account-switch span {
    color: #64748b;
    font-size: 0.82rem;
}

.accounts-save-button {
    min-width: 11rem;
    background: #1e3a8a;
    border-color: #1e3a8a;
    font-weight: 800;
}

.accounts-table-wrap {
    border: 1px solid #e6edf8;
    border-radius: 0.85rem;
    background: #ffffff;
}

.accounts-table {
    min-width: 900px;
}

.accounts-table thead th {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 1px solid #e6edf8;
}

.accounts-table tbody tr {
    border-color: #edf2fa;
}

.accounts-table tbody tr.is-credit-account {
    background: linear-gradient(90deg, rgba(30, 58, 138, 0.05), transparent 34%);
}

.accounts-table__name {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.accounts-table__name span {
    color: #111827;
    font-weight: 800;
}

.accounts-table__name small {
    color: #64748b;
    font-size: 0.78rem;
}

.account-badge,
.account-status-badge,
.account-currency-chip,
.account-payment-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.account-badge--credit {
    color: #1e3a8a;
    background: #e8efff;
}

.account-badge--success,
.account-status-badge.is-active {
    color: #059669;
    background: #dcfce7;
}

.account-badge--info {
    color: #1e3a8a;
    background: #dbeafe;
}

.account-badge--neutral,
.account-status-badge.is-inactive,
.account-currency-chip {
    color: #64748b;
    background: #eef2f7;
}

.account-balance {
    font-weight: 800;
}

.account-balance.is-negative {
    color: #dc2626;
}

.account-balance.is-positive {
    color: #111827;
}

.account-payment-chip.is-overdue {
    color: #dc2626;
    background: #fee2e2;
}

.account-payment-chip.is-soon {
    color: #9a5b00;
    background: #fef3c7;
}

.account-payment-chip.is-safe {
    color: #059669;
    background: #dcfce7;
}

.account-payment-chip.is-empty {
    color: #64748b;
    background: #eef2f7;
}

.accounts-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.accounts-actions form {
    margin: 0;
}

.account-detail-tile {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e6edf8;
    border-radius: 0.85rem;
    background: #f8fbff;
}

.account-detail-tile div {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.account-detail-tile strong {
    display: block;
    margin-top: 0.35rem;
    color: #111827;
    font-size: 1.05rem;
}

.account-detail-tile--credit {
    background: #f5f8ff;
    border-color: rgba(30, 58, 138, 0.22);
}

.account-balance-adjuster {
    padding: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 1rem;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
}

.account-balance-adjuster .accounts-premium-heading__icon {
    width: 2.35rem;
    height: 2.35rem;
}

.account-balance-adjuster .accounts-premium-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.account-monthly-movements {
    display: grid;
    gap: 1rem;
}

.account-month-group {
    overflow: hidden;
    border: 1px solid #e6edf8;
    border-radius: 0.5rem;
    background: #ffffff;
}

.account-month-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e6edf8;
    background: #f8fbff;
}

.account-month-group__head strong,
.account-month-group__head span {
    display: block;
}

.account-month-group__head span {
    color: #64748b;
    font-size: 0.82rem;
}

.account-month-group__totals {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-weight: 800;
}

.account-alert-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-alert {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem;
    border: 1px solid #e6edf8;
    border-radius: 0.95rem;
    background: #f8fbff;
}

.account-alert__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.8rem;
    font-weight: 800;
}

.account-alert__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.account-alert__body strong {
    color: #111827;
    font-size: 0.92rem;
}

.account-alert__body span {
    color: #64748b;
    font-size: 0.8rem;
}

.account-alert--danger {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(220, 38, 38, 0.07);
}

.account-alert--danger .account-alert__marker {
    color: #dc2626;
    background: #fee2e2;
}

.account-alert--warning {
    border-color: rgba(245, 158, 11, 0.28);
    background: rgba(245, 158, 11, 0.08);
}

.account-alert--warning .account-alert__marker {
    color: #9a5b00;
    background: #fef3c7;
}

.account-alert--info .account-alert__marker {
    color: #1e3a8a;
    background: #dbeafe;
}

.categories-module {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: #1f2937;
}

.categories-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.92), rgba(237, 233, 254, 0.76)),
        #ffffff;
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.08);
}

.categories-hero h1 {
    margin: 0.25rem 0 0;
    color: #1f2937;
    font-size: clamp(1.8rem, 2.8vw, 2.45rem);
    font-weight: 800;
}

.categories-hero p {
    max-width: 44rem;
    margin: 0.55rem 0 0;
    color: #6b7280;
}

.categories-hero__button,
.category-save-button {
    border: 0;
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
}

.categories-hero__button:hover,
.category-save-button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8, #7c3aed);
}

.category-summary-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.9rem;
}

.category-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-height: 6.8rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.07);
}

.category-summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    font-weight: 800;
}

.category-summary-card span:not(.category-summary-card__icon) {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.category-summary-card strong {
    display: block;
    margin-top: 0.22rem;
    color: #1f2937;
    font-size: 1.55rem;
    line-height: 1;
}

.category-summary-card--blue .category-summary-card__icon {
    color: #2563eb;
    background: #dbeafe;
}

.category-summary-card--green .category-summary-card__icon,
.category-summary-card--emerald .category-summary-card__icon {
    color: #10b981;
    background: #d1fae5;
}

.category-summary-card--purple .category-summary-card__icon {
    color: #8b5cf6;
    background: #ede9fe;
}

.category-summary-card--gray .category-summary-card__icon {
    color: #6b7280;
    background: #f3f4f6;
}

.category-summary-card--amber .category-summary-card__icon {
    color: #a16207;
    background: #fef3c7;
}

.category-summary-card--rose .category-summary-card__icon {
    color: #be185d;
    background: #fce7f3;
}

.categories-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.55fr);
    gap: 1.25rem;
    align-items: start;
}

.category-panel {
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.08);
}

.category-panel__header {
    margin-bottom: 1rem;
}

.category-panel__header h2 {
    margin: 0.25rem 0 0;
    color: #1f2937;
    font-size: 1.22rem;
    font-weight: 800;
}

.category-panel__header p {
    margin: 0.35rem 0 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.category-panel__header--split {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.category-preview {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--preview-color) 22%, #e5e7eb);
    border-radius: 0.95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--preview-color) 12%, #ffffff), #ffffff);
}

.category-preview__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: var(--preview-color);
    color: #ffffff;
    font-size: 1.25rem;
}

.category-preview strong {
    display: block;
    color: #1f2937;
    font-size: 1rem;
}

.category-preview span[data-preview-meta] {
    display: block;
    margin-top: 0.2rem;
    color: #6b7280;
    font-size: 0.84rem;
}

.category-form-section {
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
}

.category-form-section:first-of-type {
    border-top: 0;
}

.category-form-section h3 {
    margin: 0 0 0.85rem;
    color: #1f2937;
    font-size: 0.92rem;
    font-weight: 800;
}

.category-color-field {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.75rem;
    align-items: center;
}

.category-color-field .form-control-color {
    width: 4rem;
    padding: 0.25rem;
    border-radius: 0.85rem;
}

.category-color-field span {
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 800;
}

.category-emoji-bank {
    margin-top: 0.9rem;
}

.category-emoji-bank > span {
    display: block;
    margin-bottom: 0.55rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.category-emoji-bank > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.category-emoji-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.8rem;
    background: #ffffff;
    transition: all 0.18s ease;
}

.category-emoji-button:hover,
.category-emoji-button:focus {
    border-color: #8b5cf6;
    background: #ede9fe;
    transform: translateY(-1px);
}

.category-mode-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.category-mode-selector label {
    min-height: 6.7rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.18s ease;
}

.category-mode-selector label.is-selected {
    border-color: #8b5cf6;
    background: #ede9fe;
    box-shadow: 0 12px 24px rgba(139, 92, 246, 0.12);
}

.category-mode-selector input {
    margin-right: 0.4rem;
}

.category-mode-selector span {
    color: #1f2937;
    font-weight: 800;
}

.category-mode-selector small {
    display: block;
    margin-top: 0.45rem;
    color: #6b7280;
    line-height: 1.35;
}

.category-view-toggle {
    display: inline-flex;
    padding: 0.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.category-view-toggle button {
    border: 0;
    border-radius: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: transparent;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 800;
}

.category-view-toggle button.is-active {
    background: #2563eb;
    color: #ffffff;
}

.category-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(5, minmax(120px, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.category-table-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #ffffff;
}

.category-table {
    min-width: 980px;
}

.category-table thead th {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.category-table tbody tr {
    border-color: #eef2f7;
}

.category-table tbody tr:hover {
    background: #f8fafc;
}

.category-name-cell {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.75rem;
}

.category-name-cell.is-child {
    padding-left: 1.1rem;
}

.category-name-cell__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--category-color) 16%, #ffffff);
    color: #1f2937;
    border: 1px solid color-mix(in srgb, var(--category-color) 26%, #e5e7eb);
}

.category-name-cell strong {
    display: block;
    color: #1f2937;
    font-size: 0.93rem;
}

.category-parent-note {
    color: #6b7280;
    font-size: 0.82rem;
}

.category-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #6b7280;
    font-size: 0.82rem;
    font-weight: 800;
}

.category-color-chip i,
.category-color-dot {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(31, 41, 55, 0.1);
    border-radius: 50%;
}

.category-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.category-pill--income,
.category-pill--active {
    color: #047857;
    background: #d1fae5;
}

.category-pill--expense {
    color: #dc2626;
    background: #fee2e2;
}

.category-pill--both,
.category-pill--main {
    color: #2563eb;
    background: #dbeafe;
}

.category-pill--child {
    color: #7c3aed;
    background: #ede9fe;
}

.category-pill--inactive,
.category-pill--neutral {
    color: #6b7280;
    background: #f3f4f6;
}

.category-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.category-actions form {
    margin: 0;
}

.category-add-child {
    border-color: #8b5cf6;
    color: #7c3aed;
    background: #ede9fe;
    font-weight: 800;
}

.category-add-child:hover {
    color: #ffffff;
    background: #8b5cf6;
}

.category-tree {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-tree-card {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.category-tree-card__head,
.category-tree-child,
.category-tree-card__meta,
.category-tree-child__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.category-tree-card__meta {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0.9rem 0;
    color: #6b7280;
    font-size: 0.83rem;
    font-weight: 700;
}

.category-tree-children {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-left: 1rem;
    border-left: 2px solid #ede9fe;
}

.category-tree-child {
    padding: 0.75rem;
    border: 1px solid #eef2f7;
    border-radius: 0.85rem;
    background: #ffffff;
}

.category-tree-empty {
    padding: 0.8rem;
    border: 1px dashed #e5e7eb;
    border-radius: 0.85rem;
    color: #6b7280;
    background: #ffffff;
}

.category-detail-tile {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.category-detail-tile div {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.category-detail-tile strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2937;
    font-size: 1.05rem;
}

.movements-module {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: #1f2937;
}

.movements-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.9), rgba(204, 251, 241, 0.72)),
        #ffffff;
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.08);
}

.movements-hero h1 {
    margin: 0.25rem 0 0;
    color: #1f2937;
    font-size: clamp(1.8rem, 2.8vw, 2.45rem);
    font-weight: 800;
}

.movements-hero p {
    max-width: 48rem;
    margin: 0.55rem 0 0;
    color: #6b7280;
}

.movements-hero__button,
.movement-primary-button {
    border: 0;
    background: linear-gradient(135deg, #2563eb, #14b8a6);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.2);
}

.movements-hero__button:hover,
.movement-primary-button:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8, #0f9f91);
}

.movement-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.movement-summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: center;
    padding: 1.05rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(31, 41, 55, 0.07);
}

.movement-summary-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.8rem;
    font-weight: 800;
}

.movement-summary-card small {
    display: block;
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.movement-summary-card strong {
    display: block;
    margin-top: 0.25rem;
    color: #1f2937;
    font-size: 1.45rem;
    line-height: 1;
}

.movement-summary-card__date {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
}

.movement-summary-card--blue > span {
    color: #2563eb;
    background: #dbeafe;
}

.movement-summary-card--purple > span {
    color: #8b5cf6;
    background: #ede9fe;
}

.movement-summary-card--green > span {
    color: #10b981;
    background: #d1fae5;
}

.movement-summary-card--amber > span {
    color: #a16207;
    background: #fef3c7;
}

.movement-panel {
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(31, 41, 55, 0.08);
}

.movement-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.movement-panel__header h2 {
    margin: 0.25rem 0 0;
    color: #1f2937;
    font-size: 1.2rem;
    font-weight: 800;
}

.movement-panel__header p,
.movement-panel__hint {
    margin: 0.35rem 0 0;
    color: #6b7280;
    font-size: 0.88rem;
}

.movement-panel__header--split {
    align-items: center;
}

.movement-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.movement-account-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 12rem;
    padding: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--account-accent) 22%, #e5e7eb);
    border-radius: 1rem;
    background: linear-gradient(160deg, #ffffff 0%, var(--account-surface) 100%);
    box-shadow: 0 14px 28px rgba(31, 41, 55, 0.07);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.movement-account-card:hover,
.movement-account-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(31, 41, 55, 0.12);
}

.movement-account-card.is-selected {
    border-color: var(--account-accent);
    box-shadow: 0 20px 44px color-mix(in srgb, var(--account-accent) 22%, transparent);
}

.movement-account-card.is-selected::after {
    content: 'Seleccionada';
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: var(--account-accent);
    font-size: 0.75rem;
    font-weight: 800;
}

.movement-account-card.is-inactive {
    opacity: 0.68;
}

.movement-account-card__status {
    align-self: flex-start;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: #1f2937;
    font-size: 0.75rem;
    font-weight: 800;
}

.movement-account-card__type {
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.movement-account-card strong {
    color: #1f2937;
    font-size: 1.05rem;
}

.movement-account-card__balance {
    color: #1f2937;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.movement-account-card__balance.is-negative,
.movement-account-card__meta .is-alert {
    color: #ef4444;
}

.movement-account-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 700;
}

.movements-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.movement-form-card {
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #f8fafc;
}

.movement-help-box {
    padding: 0.9rem;
    border: 1px solid #dbeafe;
    border-radius: 0.85rem;
    color: #1f2937;
    background: #eff6ff;
    font-size: 0.86rem;
}

.movement-visual-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.movement-item-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #6b7280;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(31, 41, 55, 0.05);
}

.movement-item-card--income {
    border-left-color: #10b981;
}

.movement-item-card--expense {
    border-left-color: #ef4444;
}

.movement-item-card--transfer {
    border-left-color: #8b5cf6;
}

.movement-item-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    color: #1f2937;
    background: #f3f4f6;
    font-weight: 800;
}

.movement-item-card--income .movement-item-card__icon {
    color: #047857;
    background: #d1fae5;
}

.movement-item-card--expense .movement-item-card__icon {
    color: #dc2626;
    background: #fee2e2;
}

.movement-item-card--transfer .movement-item-card__icon {
    color: #7c3aed;
    background: #ede9fe;
}

.movement-item-card__body {
    min-width: 0;
}

.movement-item-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.movement-item-card__top strong {
    color: #1f2937;
    font-size: 0.95rem;
}

.movement-item-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 0.35rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.movement-item-card__notes {
    margin-top: 0.45rem;
    color: #6b7280;
    font-size: 0.8rem;
}

.movement-item-card__amount {
    text-align: right;
}

.movement-item-card__amount strong {
    display: block;
    color: #1f2937;
    font-size: 1rem;
    white-space: nowrap;
}

.movement-item-card__amount span {
    display: block;
    margin-top: 0.2rem;
    color: #6b7280;
    font-size: 0.78rem;
}

.movement-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.movement-type-pill--income {
    color: #047857;
    background: #d1fae5;
}

.movement-type-pill--expense {
    color: #dc2626;
    background: #fee2e2;
}

.movement-type-pill--transfer {
    color: #7c3aed;
    background: #ede9fe;
}

.movement-type-pill--neutral {
    color: #6b7280;
    background: #f3f4f6;
}

.selected-account-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.selected-account-summary article {
    padding: 0.95rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.selected-account-summary span {
    display: block;
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selected-account-summary strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2937;
    font-size: 1.12rem;
}

.movement-empty-state {
    padding: 1rem;
    border: 1px dashed #e5e7eb;
    border-radius: 0.95rem;
    color: #6b7280;
    text-align: center;
    background: #f8fafc;
}

.movement-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.movement-filter-actions {
    display: flex;
    gap: 0.5rem;
    grid-column: span 4;
}

.movement-transfer-table {
    border: 1px solid #e5e7eb;
    border-radius: 0.95rem;
    background: #ffffff;
}

.movement-transfer-table thead th {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

.movement-detail-tile {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    background: #f8fafc;
}

.movement-detail-tile span {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.movement-detail-tile strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2937;
}

.reference-transactions {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    color: #1f2937;
}

.reference-layout {
    display: grid;
    grid-template-columns: minmax(230px, 0.24fr) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
}

.reference-workspace {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.35rem;
}

.reference-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    min-height: calc(100vh - 7rem);
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.15rem;
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.reference-sidebar-brand,
.reference-sidebar-menu a,
.reference-sidebar-help a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}

.reference-sidebar-brand {
    color: #0f172a;
}

.reference-sidebar-brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 900;
}

.reference-sidebar-brand strong {
    font-size: 1.02rem;
    font-weight: 950;
}

.reference-sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.reference-sidebar-menu a,
.reference-sidebar-help a {
    min-height: 2.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 850;
}

.reference-sidebar-menu a:hover,
.reference-sidebar-help a:hover,
.reference-sidebar-menu a.is-active {
    color: #2563eb;
    background: #eff6ff;
}

.reference-sidebar-help {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: auto;
}

.reference-sync-card {
    padding: 1rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, #eff6ff, #f5f3ff);
    border: 1px solid #dbeafe;
}

.reference-sync-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    color: #2563eb;
    background: #ffffff;
}

.reference-sync-card strong,
.reference-sync-card p {
    display: block;
}

.reference-sync-card strong {
    margin-top: 0.75rem;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 950;
}

.reference-sync-card p {
    margin: 0.35rem 0 0.8rem;
    color: #64748b;
    font-size: 0.78rem;
}

.reference-sync-card button,
.reference-hero-action,
.reference-save-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0;
    font-weight: 900;
}

.reference-sync-card button {
    width: 100%;
    min-height: 2.35rem;
    border-radius: 0.75rem;
    color: #ffffff;
    background: #2563eb;
}

.reference-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.65rem;
    border: 1px solid rgba(219, 234, 254, 0.9);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 52%, #f5f3ff 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.reference-page-hero h1 {
    margin: 0.25rem 0 0;
    color: #0f172a;
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    line-height: 1.06;
    font-weight: 950;
}

.reference-page-hero p {
    max-width: 46rem;
    margin: 0.45rem 0 0;
    color: #64748b;
}

.reference-hero-action {
    min-height: 3rem;
    flex: 0 0 auto;
    padding: 0 1.05rem;
    border-radius: 0.9rem;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.2);
}

.reference-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}

.reference-card,
.reference-stat-card {
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.reference-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: center;
    min-height: 7.25rem;
    padding: 1.35rem;
}

.reference-stat-icon,
.reference-section-icon,
.reference-movement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.reference-stat-icon {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.2rem;
}

.reference-stat-icon.is-green,
.reference-section-icon.is-green,
.reference-movement-icon.is-income {
    color: #10b981;
    background: #ecfdf5;
}

.reference-stat-icon.is-blue,
.reference-section-icon.is-blue,
.reference-movement-icon.is-transfer {
    color: #2563eb;
    background: #eff6ff;
}

.reference-stat-icon.is-purple,
.reference-section-icon.is-purple {
    color: #8b5cf6;
    background: #f5f3ff;
}

.reference-stat-icon.is-orange {
    color: #f97316;
    background: #fff7ed;
}

.reference-section-icon.is-red,
.reference-movement-icon.is-expense {
    color: #ef4444;
    background: #fef2f2;
}

.reference-stat-card small {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reference-stat-card strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2937;
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
}

.reference-stat-card span:not(.reference-stat-icon) {
    display: block;
    margin-top: 0.45rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.reference-stat-card__date {
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
}

.reference-operation-bar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.reference-operation-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.reference-operation-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    min-height: 3.6rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 0.75rem 0.9rem;
    text-align: left;
    font-weight: 900;
    transition: all 0.2s ease;
}

.reference-operation-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.75);
    font-size: 1rem;
}

.reference-operation-btn span,
.reference-operation-btn strong,
.reference-operation-btn small {
    display: block;
}

.reference-operation-btn strong {
    line-height: 1.1;
}

.reference-operation-btn small {
    margin-top: 0.18rem;
    color: currentColor;
    font-size: 0.72rem;
    font-weight: 750;
    opacity: 0.72;
}

.reference-operation-btn[data-reference-mode="income"] {
    color: #047857;
    background: #ecfdf5;
}

.reference-operation-btn[data-reference-mode="expense"] {
    color: #dc2626;
    background: #fef2f2;
}

.reference-operation-btn[data-reference-mode="transfer"] {
    color: #2563eb;
    background: #eff6ff;
}

.reference-operation-btn.is-active[data-reference-mode="income"] {
    border-color: #10b981;
    background: #dff8ee;
    box-shadow: 0 12px 26px rgba(16, 185, 129, 0.15);
}

.reference-operation-btn.is-active[data-reference-mode="expense"] {
    border-color: #ef4444;
    background: #fee2e2;
    box-shadow: 0 12px 26px rgba(239, 68, 68, 0.14);
}

.reference-operation-btn.is-active[data-reference-mode="transfer"] {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    box-shadow: 0 12px 26px rgba(139, 92, 246, 0.15);
}

.reference-recurring-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
}

.reference-recurring-toggle .form-check-input {
    width: 3rem;
    height: 1.6rem;
}

.reference-recurring-toggle .form-check-input:checked {
    border-color: #10b981;
    background-color: #10b981;
}

.reference-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
    gap: 1.35rem;
}

.reference-form-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.35rem;
}

.reference-card {
    padding: 1.5rem;
}

.reference-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.reference-card-heading__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reference-section-icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1rem;
}

.reference-card-heading h2 {
    margin: 0;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 900;
}

.reference-card-heading a {
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.reference-transactions .form-label {
    color: #334155;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.reference-transactions .form-control,
.reference-transactions .form-select {
    min-height: 3rem;
    border-color: #e5e7eb;
    border-radius: 0.9rem;
    color: #1f2937;
    font-weight: 650;
    background-color: #ffffff;
}

.reference-transactions textarea.form-control {
    min-height: 7.4rem;
}

.reference-small-textarea {
    min-height: 3rem !important;
}

.reference-subheading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.reference-subheading span,
.reference-subheading small {
    display: block;
}

.reference-subheading span {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 950;
}

.reference-subheading small {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.reference-account-block {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 1.05rem;
    background: #f8fafc;
}

.reference-account-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.reference-account-options--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.reference-account-option {
    display: block;
    margin: 0;
    min-width: 0;
    cursor: pointer;
}

.reference-account-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reference-account-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-height: 5.2rem;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
}

.reference-account-option:hover .reference-account-card {
    border-color: #bfdbfe;
    transform: translateY(-1px);
}

.reference-account-option input:checked + .reference-account-card {
    border-color: #8b5cf6;
    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.14);
}

.reference-account-option input:focus-visible + .reference-account-card {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

.reference-account-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.85rem;
    font-size: 1.05rem;
}

.reference-account-card__icon.is-blue {
    color: #2563eb;
    background: #eff6ff;
}

.reference-account-card__icon.is-green {
    color: #059669;
    background: #ecfdf5;
}

.reference-account-card__icon.is-purple {
    color: #7c3aed;
    background: #f5f3ff;
}

.reference-account-card__icon.is-red {
    color: #dc2626;
    background: #fef2f2;
}

.reference-account-card__icon.is-orange {
    color: #d97706;
    background: #fff7ed;
}

.reference-account-card__body {
    min-width: 0;
}

.reference-account-card__body strong,
.reference-account-card__body small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-account-card__body strong {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.reference-account-card__body small {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.reference-account-card__balance {
    margin-top: 0.25rem !important;
    color: #1e40af;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
}

.reference-account-option input:checked + .reference-account-card .reference-account-card__balance {
    color: #6d28d9;
}

.reference-account-card__currency {
    padding: 0.22rem 0.46rem;
    border-radius: 999px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 0.68rem;
    font-weight: 950;
}

.reference-transfer-accounts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1rem;
}

.reference-swap-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.15rem;
    height: 3.15rem;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}

.reference-validation-message {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    color: #b91c1c;
    background: #fef2f2;
    font-size: 0.84rem;
    font-weight: 850;
}

.reference-recurrence-box {
    margin-top: 1.15rem;
    padding: 1.1rem;
    border: 1px solid #bfdbfe;
    border-radius: 1.1rem;
    background: #eff6ff;
}

.reference-recurrence-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    color: #1e3a8a;
    font-weight: 900;
}

.reference-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.4rem;
    margin-top: 1.25rem;
    border: 0;
    border-radius: 1rem;
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    transition: all 0.2s ease;
}

.reference-submit-btn:hover {
    transform: translateY(-1px);
    filter: brightness(0.97);
}

.reference-submit-btn.is-income {
    background: linear-gradient(135deg, #10b981, #059669);
}

.reference-submit-btn.is-expense {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.reference-submit-btn.is-transfer {
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
}

.reference-submit-btn.is-loading {
    cursor: wait;
    opacity: 0.82;
}

.reference-submit-btn.is-loading i {
    animation: referenceSpin 0.75s linear infinite;
}

.reference-submit-btn.is-success {
    background: linear-gradient(135deg, #10b981, #059669);
}

.reference-submit-btn.is-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

@keyframes referenceSpin {
    to {
        transform: rotate(360deg);
    }
}

.reference-preview-card {
    overflow: hidden;
}

.reference-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #eff6ff, #ffffff 50%, #f5f3ff);
}

.reference-preview-account,
.reference-preview-date,
.reference-preview-amount {
    min-width: 0;
}

.reference-preview-account span,
.reference-preview-date span,
.reference-preview-amount span,
.reference-preview-account small,
.reference-preview-date small {
    display: block;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
}

.reference-preview-account strong,
.reference-preview-date strong,
.reference-preview-amount strong {
    display: block;
    overflow: hidden;
    color: #0f172a;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-preview-amount {
    min-width: 8rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    text-align: center;
    color: #2563eb;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.reference-preview-amount strong {
    color: #2563eb;
    font-size: 1.12rem;
}

.reference-preview-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 50%;
    color: #7c3aed;
    background: #ffffff;
}

.reference-preview-date {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(219, 234, 254, 0.9);
}

.reference-save-filter {
    min-height: 2.35rem;
    padding: 0 0.8rem;
    border-radius: 0.8rem;
    color: #2563eb;
    background: #eff6ff;
    font-size: 0.78rem;
}

.reference-right-column,
.reference-movement-list {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.reference-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.reference-filter-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.1rem;
}

.reference-filter-actions .btn {
    min-height: 2.75rem;
    border-radius: 0.9rem;
    font-weight: 900;
}

.reference-movement-list {
    gap: 0.75rem;
}

.reference-movement-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem 0.9rem 0.9rem 1.05rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #ffffff;
}

.reference-movement-row::before {
    content: "";
    position: absolute;
    inset: 0.75rem auto 0.75rem 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #64748b;
}

.reference-movement-row.is-income::before {
    background: #10b981;
}

.reference-movement-row.is-expense::before {
    background: #ef4444;
}

.reference-movement-row.is-transfer::before {
    background: #2563eb;
}

.reference-movement-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.reference-movement-meta {
    min-width: 0;
}

.reference-movement-topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.reference-movement-date {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.reference-movement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
}

.reference-movement-badge.is-income {
    color: #047857;
    background: #ecfdf5;
}

.reference-movement-badge.is-expense {
    color: #dc2626;
    background: #fef2f2;
}

.reference-movement-badge.is-transfer {
    color: #2563eb;
    background: #eff6ff;
}

.reference-movement-account,
.reference-movement-category {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-movement-account {
    color: #1f2937;
    font-size: 0.88rem;
    font-weight: 900;
}

.reference-movement-category {
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

.reference-movement-amount {
    color: #1f2937;
    font-size: 0.94rem;
    font-weight: 950;
    white-space: nowrap;
}

.reference-movement-amount.is-income {
    color: #047857;
}

.reference-movement-amount.is-expense,
.reference-movement-amount.is-transfer {
    color: #dc2626;
}

.reference-transfer-history {
    margin-top: 0.05rem;
}

.reference-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 1.1rem;
}

.reference-modern-table {
    min-width: 900px;
    margin: 0;
}

.reference-modern-table thead th {
    padding: 1rem;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reference-modern-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}

.reference-modern-table tbody tr:last-child td {
    border-bottom: 0;
}

.reference-account-cell strong {
    display: block;
    color: #1f2937;
    font-size: 0.88rem;
}

.reference-account-cell span {
    display: block;
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 650;
}

.reference-eye-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    color: #2563eb;
    background: #ffffff;
    text-decoration: none;
}

.reference-table-footer-link {
    display: block;
    margin-top: 1.1rem;
    color: #2563eb;
    font-size: 0.88rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.reference-empty-state {
    padding: 1rem;
    border: 1px dashed #e5e7eb;
    border-radius: 1rem;
    color: #64748b;
    text-align: center;
    background: #f8fafc;
}

.reference-detail-tile {
    height: 100%;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.reference-detail-tile span {
    display: block;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reference-detail-tile strong {
    display: block;
    margin-top: 0.35rem;
    color: #1f2937;
}

.reference-transactions.is-transfer .reference-standard-fields,
.reference-transactions.is-transfer .reference-recurrence-box {
    display: none !important;
}

.reference-transactions:not(.is-transfer) .reference-transfer-fields {
    display: none !important;
}

.reference-transactions.is-recurrence-off .reference-recurrence-box {
    display: none !important;
}

.accounts-premium {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    color: #1f2937;
}

.accounts-premium-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.accounts-premium-card,
.accounts-premium-stat {
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.accounts-premium-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.85rem;
    min-height: 7.2rem;
    padding: 1rem;
}

.accounts-premium-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    font-size: 1.1rem;
}

.accounts-premium-stat--blue .accounts-premium-stat__icon,
.accounts-premium-heading__icon {
    color: #2563eb;
    background: #eff6ff;
}

.accounts-premium-stat--green .accounts-premium-stat__icon {
    color: #10b981;
    background: #ecfdf5;
}

.accounts-premium-stat--purple .accounts-premium-stat__icon {
    color: #8b5cf6;
    background: #f5f3ff;
}

.accounts-premium-stat--cyan .accounts-premium-stat__icon {
    color: #0ea5e9;
    background: #f0f9ff;
}

.accounts-premium-stat--orange .accounts-premium-stat__icon {
    color: #f97316;
    background: #fff7ed;
}

.accounts-premium-stat--red .accounts-premium-stat__icon {
    color: #ef4444;
    background: #fef2f2;
}

.accounts-premium-stat small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.accounts-premium-stat strong {
    display: block;
    margin-top: 0.3rem;
    color: #1f2937;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
}

.accounts-premium-stat span:not(.accounts-premium-stat__icon) {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.78rem;
}

.accounts-premium-layout {
    display: grid;
    grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.58fr);
    gap: 1.35rem;
    align-items: start;
}

.accounts-premium-card {
    padding: 1.35rem;
}

.accounts-premium-heading,
.accounts-premium-list-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.accounts-premium-list-head {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.accounts-premium-heading__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.accounts-premium-heading h1,
.accounts-premium-heading h2 {
    margin: 0;
    color: #1f2937;
    font-size: 1.25rem;
    font-weight: 900;
}

.accounts-premium-section {
    padding: 1.05rem 0;
    border-top: 1px solid #e5e7eb;
}

.accounts-premium-section:first-of-type {
    border-top: 0;
}

.accounts-premium-section h2 {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.9rem;
    color: #2563eb;
    font-size: 0.92rem;
    font-weight: 900;
}

.accounts-premium .form-label {
    color: #334155;
    font-size: 0.74rem;
    font-weight: 900;
}

.accounts-premium .form-control,
.accounts-premium .form-select,
.accounts-money-input .input-group-text,
.accounts-date-like .input-group-text {
    min-height: 3rem;
    border-color: #e5e7eb;
    border-radius: 0.9rem;
    color: #1f2937;
    font-weight: 650;
}

.accounts-money-input .input-group-text,
.accounts-date-like .input-group-text {
    color: #64748b;
    background: #f8fafc;
}

.accounts-money-input .input-group-text {
    border-radius: 0.9rem 0 0 0.9rem;
}

.accounts-money-input .form-control,
.accounts-date-like .form-control {
    border-radius: 0 0.9rem 0.9rem 0;
}

.accounts-overdraft-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 0.95rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #f8fafc;
}

.accounts-overdraft-row strong,
.accounts-overdraft-row span {
    display: block;
}

.accounts-overdraft-row strong {
    color: #1f2937;
    font-size: 0.9rem;
}

.accounts-overdraft-row span {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.78rem;
}

.accounts-overdraft-row .form-check-input {
    width: 3rem;
    height: 1.55rem;
}

.accounts-overdraft-row .form-check-input:checked {
    border-color: #10b981;
    background-color: #10b981;
}

.accounts-credit-soft {
    margin: 0.5rem 0;
    padding: 1rem;
    border: 1px solid #ddd6fe;
    border-radius: 1.15rem;
    background: #f5f3ff;
}

.accounts-premium-save {
    min-height: 3.35rem;
    border: 0;
    border-radius: 1rem;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
}

.accounts-premium-save:hover {
    color: #ffffff;
    background: #1d4ed8;
}

.accounts-premium-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(120px, 0.75fr)) auto;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.accounts-search {
    position: relative;
}

.accounts-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    color: #64748b;
    transform: translateY(-50%);
    z-index: 1;
}

.accounts-search .form-control {
    padding-left: 2.65rem;
}

.accounts-clear-filters {
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    background: #ffffff;
    color: #64748b;
    font-weight: 800;
    white-space: nowrap;
}

.accounts-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.accounts-premium-account {
    display: flex;
    flex-direction: column;
    min-height: 20.5rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--account-accent) 26%, #e5e7eb);
    border-radius: 1.15rem;
    background: linear-gradient(155deg, #ffffff 0%, var(--account-surface) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.accounts-premium-account__top,
.accounts-premium-account__meta,
.accounts-premium-actions,
.accounts-chip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.accounts-premium-account__top,
.accounts-premium-account__meta {
    justify-content: space-between;
}

.accounts-premium-account__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 0.95rem;
    background: var(--account-accent);
    color: #ffffff;
    font-size: 1.3rem;
}

.accounts-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.72);
    color: #64748b;
}

.accounts-card-menu {
    min-width: 12rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.accounts-card-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 750;
}

.accounts-card-menu form {
    margin: 0;
}

.accounts-premium-account__title {
    margin-top: 0.9rem;
}

.accounts-premium-account__title h3 {
    margin: 0;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 900;
}

.accounts-premium-account__title p {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
}

.accounts-chip-row {
    flex-wrap: wrap;
    margin: 0.85rem 0;
}

.accounts-type-chip,
.accounts-currency-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.accounts-type-chip.is-cash {
    color: #047857;
    background: #ecfdf5;
}

.accounts-type-chip.is-savings,
.accounts-type-chip.is-credit {
    color: #7c3aed;
    background: #f5f3ff;
}

.accounts-type-chip.is-neutral,
.accounts-currency-chip {
    color: #64748b;
    background: #f1f5f9;
}

.accounts-premium-balance {
    margin-top: auto;
    color: #1f2937;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.1;
}

.accounts-premium-balance.is-negative {
    color: #ef4444;
}

.accounts-credit-mini {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding: 0.7rem;
    border: 1px solid #ddd6fe;
    border-radius: 0.85rem;
    color: #6d28d9;
    background: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 800;
}

.accounts-premium-account__meta {
    margin-top: 0.9rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
}

.accounts-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.accounts-status-dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.accounts-status-dot.is-active::before {
    background: #10b981;
}

.accounts-status-dot.is-inactive::before {
    background: #f59e0b;
}

.accounts-premium-actions {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(229, 231, 235, 0.85);
}

.accounts-premium-actions form {
    margin: 0;
}

.accounts-premium-actions .dropdown {
    margin: 0;
}

.accounts-premium-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #2563eb;
}

.accounts-premium-empty {
    grid-column: 1 / -1;
    padding: 1.2rem;
    border: 1px dashed #e5e7eb;
    border-radius: 1rem;
    color: #64748b;
    text-align: center;
    background: #f8fafc;
}

.debts-dashboard {
    display: grid;
    grid-template-columns: 4.7rem minmax(0, 1fr);
    gap: 1.25rem;
    color: #111827;
}

.debts-sidebar,
.debts-card,
.debts-topbar,
.debts-kpi {
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

.debts-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    min-height: calc(100vh - 7rem);
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 0.8rem;
    border-radius: 1.25rem;
}

.debts-sidebar__brand,
.debts-sidebar__nav a,
.debts-sidebar__bottom a,
.debts-sidebar__bottom button,
.debts-topbar__brand button,
.debts-notification,
.debts-list-tools button,
.debts-close,
.debt-expanded-actions a,
.debt-expanded-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-decoration: none;
}

.debts-sidebar__brand {
    width: 3rem;
    flex-direction: column;
    gap: 0.35rem;
    color: #0f172a;
}

.debts-sidebar__brand span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 950;
}

.debts-sidebar__brand strong {
    font-size: 0.68rem;
    font-weight: 950;
}

.debts-sidebar__nav,
.debts-sidebar__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.debts-sidebar__nav a,
.debts-sidebar__bottom a,
.debts-sidebar__bottom button,
.debts-topbar__brand button,
.debts-notification,
.debts-list-tools button,
.debts-close,
.debt-expanded-actions a,
.debt-expanded-actions button {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: #64748b;
    background: #f8fafc;
}

.debts-sidebar__nav a:hover,
.debts-sidebar__nav a.is-active,
.debts-sidebar__bottom a:hover,
.debts-sidebar__bottom button:hover {
    color: #2563eb;
    background: #eff6ff;
}

.debts-sidebar__bottom {
    margin-top: auto;
}

.debts-workspace {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.2rem;
}

.debts-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.8rem;
    padding: 0.85rem 1rem;
    border-radius: 1.2rem;
}

.debts-topbar__brand,
.debts-topbar__actions,
.debts-profile,
.debts-list-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.debts-topbar__brand strong,
.debts-topbar__brand span,
.debts-profile strong,
.debts-profile small {
    display: block;
}

.debts-topbar__brand strong,
.debts-profile strong {
    color: #0f172a;
    font-weight: 950;
}

.debts-topbar__brand span,
.debts-profile small {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.debts-notification {
    position: relative;
}

.debts-notification span {
    position: absolute;
    top: 0.55rem;
    right: 0.62rem;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #ef4444;
}

.debts-profile {
    min-height: 3.05rem;
    padding: 0.35rem 0.6rem 0.35rem 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #ffffff;
}

.debts-profile > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    color: #2563eb;
    background: #eff6ff;
    font-size: 0.78rem;
    font-weight: 950;
}

.debts-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.debts-kpi {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.8rem;
    min-height: 6.9rem;
    padding: 1rem;
    border-radius: 1.15rem;
}

.debts-kpi > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.9rem;
    font-size: 1.08rem;
}

.debts-kpi .is-purple,
.debt-progress-ring {
    color: #7c3aed;
    background: #f5f3ff;
}

.debts-kpi .is-blue {
    color: #2563eb;
    background: #eff6ff;
}

.debts-kpi .is-orange {
    color: #f97316;
    background: #fff7ed;
}

.debts-kpi .is-green {
    color: #059669;
    background: #ecfdf5;
}

.debts-kpi .is-red {
    color: #dc2626;
    background: #fef2f2;
}

.debts-kpi small,
.debts-kpi strong,
.debts-kpi em {
    display: block;
}

.debts-kpi small {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.debts-kpi strong {
    margin-top: 0.28rem;
    color: #0f172a;
    font-size: 1.42rem;
    line-height: 1.05;
    font-weight: 950;
}

.debts-kpi em {
    margin-top: 0.28rem;
    color: #64748b;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 700;
}

.debts-main-grid {
    display: grid;
    grid-template-columns: minmax(290px, 0.68fr) minmax(520px, 1.38fr) minmax(390px, 0.9fr);
    gap: 1.15rem;
    align-items: start;
}

.debts-card {
    min-width: 0;
    padding: 1.25rem;
    border-radius: 1.2rem;
}

.debts-card__heading {
    margin-bottom: 1rem;
}

.debts-card__heading--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.debts-card__heading h1,
.debts-card__heading h2,
.debt-detail-section h3 {
    margin: 0;
    color: #0f172a;
    font-weight: 950;
}

.debts-card__heading h1,
.debts-card__heading h2 {
    font-size: 1.18rem;
}

.debts-form-grid,
.debt-payment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.debts-form-grid label,
.debt-payment-form label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

.debts-form-grid label > span,
.debt-payment-form label > span {
    color: #334155;
    font-size: 0.74rem;
    font-weight: 900;
}

.debts-form-grid .is-wide,
.debt-payment-form .is-wide {
    grid-column: 1 / -1;
}

.debts-dashboard .form-control,
.debts-dashboard .form-select {
    min-height: 2.75rem;
    border-color: #e2e8f0;
    border-radius: 0.82rem;
    color: #111827;
    font-weight: 650;
}

.debts-dashboard textarea.form-control {
    min-height: 6.5rem;
}

.debts-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    margin-top: 1rem;
    border: 0;
    border-radius: 0.9rem;
    color: #ffffff;
    background: #2563eb;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2);
}

.debts-cancel-link {
    display: block;
    margin-top: 0.75rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

.debts-info-box,
.debts-empty {
    margin-top: 1rem;
    padding: 0.95rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.9rem;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
}

.debts-list-tools {
    flex: 0 0 auto;
}

.debts-search {
    position: relative;
    min-width: 16rem;
}

.debts-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    color: #94a3b8;
    transform: translateY(-50%);
}

.debts-search .form-control {
    padding-left: 2.45rem;
}

.debts-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
}

.debts-table__head,
.debt-row__summary {
    display: grid;
    grid-template-columns: minmax(150px, 1.25fr) 0.72fr 0.8fr 0.78fr 1fr 0.72fr 0.85fr 4.4rem;
    gap: 0.75rem;
    align-items: center;
}

.debts-table__head {
    padding: 0.9rem 1rem;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.debt-row {
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.debt-row:first-child {
    border-top: 0;
}

.debt-row.is-selected {
    background: linear-gradient(135deg, #ffffff, #f8fbff);
}

.debt-row__summary {
    padding: 1rem;
    color: inherit;
    text-decoration: none;
}

.debt-row__summary strong,
.debt-row__summary small,
.debt-detail-hero span,
.debt-detail-metrics span {
    display: block;
}

.debt-row__summary strong {
    overflow: hidden;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debt-row__summary small {
    margin-top: 0.18rem;
    overflow: hidden;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debt-row__name {
    min-width: 0;
}

.debt-row__summary .is-paid strong,
.debt-detail-metrics .is-paid strong {
    color: #059669;
}

.debt-row__summary .is-pending strong,
.debt-detail-metrics .is-pending strong {
    color: #dc2626;
}

.debt-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 950;
}

.debt-status.is-active,
.debt-payment-table__row em {
    color: #047857;
    background: #ecfdf5;
}

.debt-status.is-paid {
    color: #2563eb;
    background: #eff6ff;
}

.debt-status.is-inactive {
    color: #64748b;
    background: #f1f5f9;
}

.debt-row__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}

.debt-row__actions span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    color: #64748b;
    background: #f8fafc;
}

.debt-row__expanded,
.debt-detail-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin: 0 1rem 1rem;
    padding: 1rem;
    border: 1px solid #dbeafe;
    border-radius: 1rem;
    background: #eff6ff;
}

.debt-progress-ring {
    --ring-size: 4.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ring-size);
    height: var(--ring-size);
    flex-direction: column;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 58%, transparent 59%),
        conic-gradient(#10b981 calc(var(--progress) * 1%), #e2e8f0 0);
}

.debt-progress-ring.is-large {
    --ring-size: 6.3rem;
}

.debt-progress-ring strong {
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 950;
}

.debt-progress-ring span {
    margin-top: 0.15rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
}

.debt-expanded-progress strong {
    display: block;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
}

.debt-expanded-progress small {
    display: block;
    margin-top: 0.4rem;
    color: #64748b;
    font-weight: 750;
}

.debt-progress-line {
    height: 0.68rem;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeafe;
}

.debt-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #10b981, #34d399);
}

.debt-expanded-actions {
    display: flex;
    gap: 0.4rem;
}

.debt-expanded-actions form {
    margin: 0;
}

.debt-expanded-actions a,
.debt-expanded-actions button {
    color: #2563eb;
    background: #ffffff;
}

.debts-detail-panel {
    position: sticky;
    top: 1rem;
}

.debt-detail-hero,
.debt-detail-metrics,
.debt-detail-chips,
.debt-detail-section__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.debt-detail-hero {
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.debt-detail-hero h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1.28rem;
    font-weight: 950;
}

.debt-detail-hero span {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
}

.debt-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.debt-detail-metrics div {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.debt-detail-metrics span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
}

.debt-detail-metrics strong {
    display: block;
    margin-top: 0.3rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debt-detail-progress {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 1rem 0 0;
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}

.debt-detail-progress > div > strong {
    display: block;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 950;
}

.debt-detail-chips {
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.debt-detail-chips span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    color: #2563eb;
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
}

.debt-detail-section {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid #e2e8f0;
}

.debt-detail-section__head {
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.debt-detail-section h3 {
    font-size: 1rem;
}

.debt-detail-section__head .form-select {
    width: auto;
    min-height: 2.35rem;
    font-size: 0.8rem;
}

.debt-payment-table {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
}

.debt-payment-table__head,
.debt-payment-table__row {
    display: grid;
    grid-template-columns: 0.7fr 0.8fr 0.85fr 0.85fr 0.9fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
}

.debt-payment-table__head {
    color: #64748b;
    background: #f8fafc;
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.debt-payment-table__row {
    border-top: 1px solid #e2e8f0;
    font-size: 0.78rem;
}

.debt-payment-table__row strong {
    color: #059669;
}

.debt-payment-table__row em {
    width: fit-content;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-style: normal;
    font-weight: 900;
}

.debt-chart {
    padding: 0.7rem 0.4rem 0.2rem;
}

.debt-chart svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.debt-chart__grid {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 1;
}

.debt-chart__area {
    fill: url(#debtChartFill);
}

.debt-chart__line {
    fill: none;
    stroke: #7c3aed;
    stroke-width: 4;
    stroke-linecap: round;
}

.debt-chart__points circle {
    fill: #ffffff;
    stroke: #2563eb;
    stroke-width: 3;
}

.debt-chart__labels text {
    fill: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.debt-chart__legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
}

.debt-chart__legend span {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #7c3aed;
}

.debt-payment-form-card h3 {
    margin-bottom: 0.85rem;
}

@media (max-width: 1399.98px) {
    .accounts-premium-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .accounts-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debts-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .debts-main-grid {
        grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
    }

    .debts-detail-panel {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 1199.98px) {
    .accounts-premium-layout {
        grid-template-columns: 1fr;
    }

    .debts-dashboard {
        grid-template-columns: 1fr;
    }

    .debts-sidebar {
        position: static;
        min-height: 0;
        flex-direction: row;
        justify-content: space-between;
    }

    .debts-sidebar__brand,
    .debts-sidebar__nav,
    .debts-sidebar__bottom {
        flex-direction: row;
    }

    .debts-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .accounts-premium-summary,
    .accounts-card-grid,
    .debts-kpis,
    .debts-form-grid,
    .debt-payment-form,
    .debt-detail-metrics {
        grid-template-columns: 1fr;
    }

    .accounts-premium-filters {
        grid-template-columns: 1fr;
    }

    .accounts-premium-card,
    .accounts-premium-stat,
    .accounts-premium-account {
        border-radius: 1rem;
    }

    .accounts-overdraft-row,
    .accounts-premium-account__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .accounts-premium-actions {
        flex-wrap: wrap;
    }

    .debts-topbar,
    .debts-card__heading--split,
    .debts-topbar__actions,
    .debts-list-tools,
    .debt-detail-hero,
    .debt-detail-progress,
    .debt-row__expanded,
    .debt-detail-section__head {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .debts-profile {
        border-radius: 1rem;
    }

    .debts-search {
        min-width: 0;
        width: 100%;
    }

    .debts-list-tools button {
        width: 100%;
    }

    .debts-table {
        border: 0;
        overflow: visible;
    }

    .debts-table__head {
        display: none;
    }

    .debt-row {
        margin-bottom: 0.8rem;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
    }

    .debt-row__summary {
        grid-template-columns: 1fr;
    }

    .debt-row__actions {
        justify-content: flex-start;
    }

    .debt-row__expanded {
        margin: 0 0.8rem 0.8rem;
    }

    .debt-payment-table {
        border: 0;
        overflow: visible;
    }

    .debt-payment-table__head {
        display: none;
    }

    .debt-payment-table__row {
        grid-template-columns: 1fr;
        margin-bottom: 0.65rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.85rem;
    }
}

.ai-entry-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 247, 255, 0.92) 100%);
}

.ai-entry-textarea {
    min-height: 8rem;
    resize: vertical;
}

.ai-preview {
    border-top-color: #e6edf8 !important;
}

.table td,
.table th {
    vertical-align: middle;
}

@media (max-width: 1199.98px) {
    .dashboard-navbar .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid var(--finance-border);
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--finance-shadow);
    }

    .dashboard-navbar .navbar-nav {
        gap: 0.35rem;
    }

    .dashboard-navbar .nav-link {
        width: 100%;
    }

    .dashboard-navbar__actions {
        margin-top: 1rem;
        justify-content: flex-start;
        width: 100%;
    }

    .accounts-grid,
    .accounts-summary-grid,
    .category-summary-grid,
    .movement-summary-grid,
    .reference-stats-grid,
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debt-metrics {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-main-grid,
    .accounts-workspace,
    .categories-layout,
    .movements-workspace,
    .reference-layout,
    .reference-main-grid,
    .widget-row {
        grid-template-columns: 1fr;
    }

    .reference-sidebar {
        position: static;
        min-height: 0;
    }

    .reference-sidebar-menu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .reference-sidebar-help {
        display: grid;
        grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
        align-items: stretch;
    }

    .reference-account-options--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-transfer-accounts {
        grid-template-columns: 1fr;
    }

    .reference-swap-button {
        justify-self: center;
        transform: rotate(90deg);
    }

    .category-filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .movement-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .movement-filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .dashboard-shell {
        padding-bottom: 1.5rem;
    }

    .card .card-body {
        padding: 1rem;
    }

    .card .card-body > .d-flex.justify-content-between.align-items-center,
    .card .card-body > .d-flex.justify-content-between.align-items-lg-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    form .d-flex.gap-2,
    form .d-flex.justify-content-between,
    .col-12.d-flex.gap-2 {
        flex-direction: column;
        align-items: stretch !important;
    }

    form .d-flex.gap-2 > .btn,
    form .d-flex.gap-2 > a,
    .col-12.d-flex.gap-2 > .btn,
    .col-12.d-flex.gap-2 > a {
        width: 100%;
    }

    .dashboard-topbar,
    .accounts-module__header,
    .categories-hero,
    .movements-hero,
    .movement-panel__header,
    .reference-operation-bar,
    .reference-card-heading,
    .category-panel__header--split,
    .accounts-ribbon__header,
    .dashboard-toolbar,
    .expense-structure {
        grid-template-columns: 1fr;
        display: grid;
        align-items: stretch;
    }

    .dashboard-profile {
        width: 100%;
        justify-content: flex-start;
        border-radius: 1.1rem;
    }

    .dashboard-navbar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .accounts-grid,
    .accounts-summary-grid,
    .category-summary-grid,
    .movement-summary-grid,
    .reference-stats-grid,
    .kpi-grid,
    .debt-metrics {
        grid-template-columns: 1fr;
    }

    .account-card {
        min-height: 0;
    }

    .account-card__meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .budget-card__head,
    .budget-card__foot,
    .debt-ranked-item,
    .debt-alert {
        grid-template-columns: 1fr;
        display: grid;
        gap: 0.35rem;
    }

    .period-switcher {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-select {
        width: 100%;
        min-width: 0;
    }

    .expense-donut {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }

    .sparkline-card {
        min-height: 170px;
    }

    .sparkline {
        height: 150px;
    }

    .table-responsive .table {
        min-width: 100%;
    }

    .table-responsive .table.table-mobile-ready thead {
        display: none;
    }

    .table-responsive .table.table-mobile-ready tbody,
    .table-responsive .table.table-mobile-ready tr,
    .table-responsive .table.table-mobile-ready td {
        display: block;
        width: 100%;
    }

    .table-responsive .table.table-mobile-ready tbody tr {
        padding: 0.85rem 0;
        border-bottom: 1px solid #edf2fa;
    }

    .table-responsive .table.table-mobile-ready tbody tr:last-child {
        border-bottom: 0;
    }

    .table-responsive .table.table-mobile-ready td {
        border: 0;
        padding: 0.4rem 0;
        text-align: left !important;
    }

    .table-responsive .table.table-mobile-ready td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        color: var(--finance-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .table-responsive .table.table-mobile-ready td.text-end {
        padding-top: 0.6rem;
    }

    .table-responsive .table.table-mobile-ready td.text-end > a,
    .table-responsive .table.table-mobile-ready td.text-end > form {
        display: block;
        width: 100%;
        margin: 0 0 0.45rem 0 !important;
    }

    .table-responsive .table.table-mobile-ready td.text-end .btn,
    .table-responsive .table.table-mobile-ready td.text-end form .btn {
        width: 100%;
    }

    .table-responsive .table.table-mobile-ready td .d-flex {
        flex-wrap: wrap;
    }

    .accounts-actions {
        justify-content: stretch;
    }

    .accounts-actions .btn,
    .accounts-actions form {
        width: 100%;
    }

    .category-mode-selector,
    .category-filters {
        grid-template-columns: 1fr;
    }

    .category-view-toggle {
        width: 100%;
    }

    .category-view-toggle button {
        flex: 1;
    }

    .category-actions {
        justify-content: stretch;
    }

    .category-actions .btn,
    .category-actions .dropdown,
    .category-actions .dropdown > button {
        width: 100%;
    }

    .category-tree-card__head,
    .category-tree-child,
    .category-tree-child__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .category-tree-children {
        padding-left: 0.5rem;
    }

    .movement-account-grid,
    .selected-account-summary,
    .movement-filter-grid {
        grid-template-columns: 1fr;
    }

    .movement-filter-actions {
        grid-column: span 1;
        flex-direction: column;
    }

    .movement-filter-actions .btn {
        width: 100%;
    }

    .movement-item-card {
        grid-template-columns: auto 1fr;
        align-items: start;
    }

    .movement-item-card__amount {
        grid-column: 1 / -1;
        text-align: left;
        padding-left: 3.45rem;
    }

    .movement-item-card__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .reference-operation-buttons,
    .reference-account-options,
    .reference-account-options--compact,
    .reference-filter-grid {
        grid-template-columns: 1fr;
    }

    .reference-page-hero {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 1.25rem;
    }

    .reference-hero-action {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   BANNER PRINCIPAL — 3 FILAS DE KPIs
   ═══════════════════════════════════════════════════════════ */

.banner-row {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.banner-row__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #f8fafc;
}

.banner-row__label span {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
}

.banner-row--critical {
    border-top: 3px solid #2563eb;
}

.banner-row--critical .banner-row__label {
    color: #1d4ed8;
    background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
}

.banner-row--pressure {
    border-top: 3px solid #dc2626;
}

.banner-row--pressure .banner-row__label {
    color: #b91c1c;
    background: linear-gradient(90deg, #fef2f2 0%, #f8fafc 100%);
}

.banner-row--ops {
    border-top: 3px solid #0f766e;
}

.banner-row--ops .banner-row__label {
    color: #0f766e;
    background: linear-gradient(90deg, #f0fdfa 0%, #f8fafc 100%);
}

.banner-row__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
}

.banner-row__grid .bkpi:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

/* ── BKPI: tarjeta individual del banner ── */

.bkpi {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 1rem 1.1rem;
    min-height: 9rem;
    transition: background 0.18s ease;
}

.bkpi:hover {
    background: #f8fafc;
}

.bkpi--highlight {
    background: linear-gradient(145deg, #eff6ff 0%, #f5f3ff 100%);
}

.bkpi--highlight:hover {
    background: linear-gradient(145deg, #dbeafe 0%, #ede9fe 100%);
}

.bkpi__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}

.bkpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
}

/* Colores de icono según variante */
.bkpi--green .bkpi__icon   { color: #059669; background: #ecfdf5; }
.bkpi--yellow .bkpi__icon  { color: #b45309; background: #fffbeb; }
.bkpi--red .bkpi__icon     { color: #dc2626; background: #fef2f2; }
.bkpi--blue .bkpi__icon    { color: #2563eb; background: #eff6ff; }
.bkpi--warning .bkpi__icon { color: #d97706; background: #fffbeb; }
.bkpi--sem-green .bkpi__icon { color: #059669; background: #ecfdf5; }
.bkpi--sem-yellow .bkpi__icon { color: #b45309; background: #fffbeb; }
.bkpi--sem-red .bkpi__icon  { color: #dc2626; background: #fef2f2; }

/* Semáforo circular */
.bkpi__sem {
    font-size: 0.55rem;
}

.bkpi__sem.sem-green  { color: #10b981; }
.bkpi__sem.sem-yellow { color: #f59e0b; }
.bkpi__sem.sem-red    { color: #ef4444; }

.bkpi__label {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bkpi__value {
    color: #0f172a;
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1.1;
}

.bkpi__value--big {
    font-size: 1.35rem;
    color: #1d4ed8;
}

.bkpi__sub {
    color: #94a3b8;
    font-size: 0.69rem;
    font-style: normal;
    line-height: 1.3;
}

/* Badge de estado */
.bkpi__badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.2rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 900;
}

.bkpi__badge--sem-green  { color: #065f46; background: #d1fae5; }
.bkpi__badge--sem-yellow { color: #78350f; background: #fef3c7; }
.bkpi__badge--sem-red    { color: #7f1d1d; background: #fee2e2; }

/* Fórmula visual (liquidez - colchon - urgente) */
.bkpi__formula {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.65rem;
    color: #94a3b8;
    font-weight: 700;
}

.bkpi__op {
    color: #cbd5e1;
    font-weight: 900;
}

/* Diferencia gasto vs límite */
.bkpi__diff {
    margin-top: 0.25rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    width: fit-content;
}

.bkpi__diff--danger { color: #7f1d1d; background: #fee2e2; }
.bkpi__diff--safe   { color: #065f46; background: #d1fae5; }

/* Comparación gasto/límite */
.bkpi__compare {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.3rem;
}

.bkpi__compare div {
    display: flex;
    flex-direction: column;
}

.bkpi__compare span {
    color: #94a3b8;
    font-size: 0.63rem;
    font-weight: 750;
}

.bkpi__compare strong {
    font-size: 0.85rem;
    font-weight: 900;
    color: #0f172a;
}

/* Barra de progreso del colchón */
.bkpi__meter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.bkpi__meter-bar {
    flex: 1;
    height: 0.45rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.bkpi__meter-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.bkpi__meter > span {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

/* Fila de detalle en bkpi */
.bkpi__detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.7rem;
}

.bkpi__detail-row span { color: #94a3b8; font-weight: 700; }
.bkpi__detail-row strong { color: #0f172a; font-weight: 900; }

/* ── FILA 3: GRID OPERATIVO ── */

.banner-ops-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.banner-ops-card {
    padding: 1.25rem;
}

.banner-ops-card:not(:last-child) {
    border-right: 1px solid #e2e8f0;
}

.banner-ops-rate {
    display: inline-flex;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 900;
}

.banner-ops-rate.is-green  { color: #065f46; background: #d1fae5; }
.banner-ops-rate.is-yellow { color: #78350f; background: #fef3c7; }
.banner-ops-rate.is-red    { color: #7f1d1d; background: #fee2e2; }

/* Inventario */
.banner-inv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.banner-inv-grid div {
    display: flex;
    flex-direction: column;
    padding: 0.65rem;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.banner-inv-grid span {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 750;
}

.banner-inv-grid strong {
    margin-top: 0.2rem;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.banner-inv-meter {
    margin-top: 0.85rem;
}

.banner-inv-meter__bar {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.banner-inv-meter__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #0f766e);
    transition: width 0.4s ease;
}

.banner-inv-meter small {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.68rem;
}

/* Negocio vs Personal */
.banner-biz-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.banner-biz-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.banner-biz-col__label {
    color: #334155;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.banner-biz-col div {
    display: flex;
    flex-direction: column;
}

.banner-biz-col span {
    color: #94a3b8;
    font-size: 0.66rem;
    font-weight: 700;
}

.banner-biz-col strong {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 950;
}

/* Lista de deudas próximas */
.banner-debt-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.banner-debt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 0.75rem;
    border-left: 3px solid;
}

.banner-debt-row.is-danger  { background: #fef2f2; border-left-color: #ef4444; }
.banner-debt-row.is-warning { background: #fffbeb; border-left-color: #f59e0b; }
.banner-debt-row.is-safe    { background: #f0fdf4; border-left-color: #10b981; }

.banner-debt-row div { min-width: 0; }

.banner-debt-row strong {
    display: block;
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.banner-debt-row small {
    color: #64748b;
    font-size: 0.68rem;
}

.banner-debt-row > strong {
    flex-shrink: 0;
    font-size: 0.88rem;
    color: #0f172a;
}

.banner-debt-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.85rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    background: #f1f5f9;
    font-size: 0.75rem;
}

.banner-debt-total span { color: #64748b; font-weight: 700; }
.banner-debt-total strong { font-size: 1rem; font-weight: 950; }

/* Colores de texto semáforo globales */
.color-safe   { color: #059669 !important; }
.color-danger { color: #dc2626 !important; }
.color-yellow { color: #b45309 !important; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .banner-row__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .banner-row__grid .bkpi:nth-child(3) {
        border-right: none;
    }
    .banner-row__grid .bkpi:nth-child(4),
    .banner-row__grid .bkpi:nth-child(5),
    .banner-row__grid .bkpi:nth-child(6) {
        border-top: 1px solid #e2e8f0;
    }
    .banner-ops-grid {
        grid-template-columns: 1fr;
    }
    .banner-ops-card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

@media (max-width: 768px) {
    .banner-row__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .banner-row__grid .bkpi:nth-child(2n) {
        border-right: none;
    }
    .banner-row__grid .bkpi:nth-child(n+3) {
        border-top: 1px solid #e2e8f0;
    }
    .banner-biz-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   BKPI CLICKABLE + PANEL DE DETALLE DE INGRESOS
   ══════════════════════════════════════════════════════════ */

.bkpi--clickable {
    cursor: pointer;
    border: 0;
    text-align: left;
    font: inherit;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.bkpi--clickable:hover,
.bkpi--clickable:focus-visible {
    background: #dbeafe;
    box-shadow: 0 0 0 2px #93c5fd inset;
}

.bkpi__detail-hint {
    font-size: 0.6rem;
    color: #93c5fd;
    vertical-align: middle;
}

/* Panel de detalle de ingresos */
.income-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

.income-detail-day {
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    overflow: hidden;
}

.income-detail-day.is-today {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.income-detail-day__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 900;
    color: #334155;
}

.income-detail-day.is-today .income-detail-day__head {
    background: #eff6ff;
    color: #1d4ed8;
}

.income-detail-day__head strong {
    color: #059669;
    font-size: 0.88rem;
}

.income-detail-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 0.78rem;
}

.income-detail-row:last-child {
    border-bottom: 0;
}

.income-detail-row > i {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.income-detail-row div {
    flex: 1;
    min-width: 0;
}

.income-detail-row strong {
    display: block;
    color: #0f172a;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.income-detail-row small {
    color: #94a3b8;
    font-size: 0.68rem;
}

.income-detail-row em {
    flex-shrink: 0;
    color: #059669;
    font-style: normal;
    font-weight: 950;
    font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════════
   RITMO REAL DIARIO
   ══════════════════════════════════════════════════════════ */

.daily-rhythm {
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    overflow: hidden;
    border-top: 3px solid #7c3aed;
}

.daily-rhythm__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(90deg, #faf5ff 0%, #f8fafc 100%);
}

.daily-rhythm__head h2 {
    margin: 0.2rem 0 0;
    font-size: 1.15rem;
    font-weight: 950;
    color: #0f172a;
}

.daily-rhythm__head p {
    margin: 0.35rem 0 0;
    color: #64748b;
    font-size: 0.8rem;
}

.daily-rhythm__totals {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.daily-rhythm__totals div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.daily-rhythm__totals span {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 750;
}

.daily-rhythm__totals strong {
    font-size: 1rem;
    font-weight: 950;
}

/* Tabla */
.daily-rhythm__table {
    display: flex;
    flex-direction: column;
}

.daily-rhythm__table-head {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 1fr 180px;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.daily-rhythm__row {
    display: grid;
    grid-template-columns: 90px 1fr 1fr 1fr 180px;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s ease;
}

.daily-rhythm__row:last-child {
    border-bottom: 0;
}

.daily-rhythm__row:hover {
    background: #fafbff;
}

.daily-rhythm__row.is-today {
    background: linear-gradient(90deg, #eff6ff 0%, #fafbff 100%);
    border-left: 3px solid #3b82f6;
}

.daily-rhythm__row.is-empty {
    opacity: 0.45;
}

.daily-rhythm__date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 900;
    color: #334155;
}

.daily-rhythm__today-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

.daily-rhythm__date em {
    font-style: normal;
    font-size: 0.65rem;
    font-weight: 900;
    color: #3b82f6;
    background: #eff6ff;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

/* Columnas de monto */
.daily-rhythm__amount {
    display: flex;
    flex-direction: column;
}

.daily-rhythm__amount strong {
    font-size: 0.9rem;
    font-weight: 950;
}

.daily-rhythm__amount small {
    font-size: 0.65rem;
    color: #94a3b8;
}

.daily-rhythm__amount--income strong { color: #059669; }
.daily-rhythm__amount--expense strong { color: #dc2626; }

.daily-rhythm__zero {
    color: #cbd5e1;
    font-size: 0.82rem;
}

/* Columna neto */
.daily-rhythm__net {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.daily-rhythm__net strong {
    font-weight: 950;
}

.daily-rhythm__net small {
    font-size: 0.65rem;
    color: #94a3b8;
}

.daily-rhythm__net.is-positive i,
.daily-rhythm__net.is-positive strong { color: #059669; }
.daily-rhythm__net.is-negative i,
.daily-rhythm__net.is-negative strong { color: #dc2626; }
.daily-rhythm__net.is-zero i,
.daily-rhythm__net.is-zero strong { color: #94a3b8; }

/* Barras visuales */
.daily-rhythm__bars {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.daily-rhythm__bar-wrap {
    height: 0.55rem;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.daily-rhythm__bar {
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.daily-rhythm__bar--income {
    background: linear-gradient(90deg, #10b981, #059669);
}

.daily-rhythm__bar--expense {
    background: linear-gradient(90deg, #f87171, #dc2626);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .daily-rhythm__table-head,
    .daily-rhythm__row {
        grid-template-columns: 80px 1fr 1fr 1fr;
    }
    .daily-rhythm__table-head span:last-child,
    .daily-rhythm__bars {
        display: none;
    }
}

@media (max-width: 768px) {
    .daily-rhythm__head {
        flex-direction: column;
        gap: 0.85rem;
    }
    .daily-rhythm__totals {
        gap: 0.85rem;
    }
    .daily-rhythm__totals div {
        align-items: flex-start;
    }
    .daily-rhythm__table-head,
    .daily-rhythm__row {
        grid-template-columns: 70px 1fr 1fr 1fr;
    }
    .reference-sidebar-menu,
    .reference-sidebar-help {
        grid-template-columns: 1fr;
    }
}

    .reference-subheading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .reference-preview {
        grid-template-columns: 1fr;
    }

    .reference-preview-amount {
        width: 100%;
    }

    .reference-preview-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .reference-filter-actions {
        flex-direction: column;
    }

    .reference-filter-actions .btn {
        width: 100%;
    }

    .reference-movement-row {
        grid-template-columns: auto 1fr;
    }

    .reference-movement-amount {
        grid-column: 1 / -1;
        padding-left: 3.3rem;
    }

    .reference-movement-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .pagination .page-link {
        border-radius: 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .dashboard-brand__text {
        font-size: 0.95rem;
    }

    .dashboard-title {
        font-size: 1.65rem;
    }

    .dashboard-subtitle {
        font-size: 0.92rem;
    }

    .accounts-ribbon,
    .widget {
        padding: 1rem;
        border-radius: 1.2rem;
    }

    .mini-bars {
        min-height: 140px;
        gap: 0.45rem;
    }

    .movement-item {
        grid-template-columns: auto 1fr;
    }

    .movement-item__amount {
        grid-column: 1 / -1;
        padding-left: 3.35rem;
    }
}

/* Premium reference view for Categorias */
.categories-reference {
    gap: 1.35rem;
}

.categories-reference .categories-hero {
    min-height: 130px;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 1.7rem 2rem;
    border: 1px solid rgba(219, 234, 254, 0.9);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(237, 233, 254, 0.95) 58%, rgba(236, 253, 245, 0.72) 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.categories-reference .categories-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 auto;
    border-radius: 1rem;
    background: #ffffff;
    color: #2563eb;
    font-size: 1.45rem;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.categories-reference .categories-hero__copy {
    flex: 1;
}

.categories-reference .dashboard-section-label {
    color: #1e3a8a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.categories-reference .categories-hero h1 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: clamp(2rem, 3vw, 2.55rem);
    line-height: 1.06;
    font-weight: 900;
}

.categories-reference .categories-hero p {
    max-width: 46rem;
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 1rem;
}

.categories-reference .categories-hero__button,
.categories-reference .category-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 15px 30px rgba(124, 58, 237, 0.22);
}

.categories-reference .categories-hero__button {
    min-height: 3rem;
    padding: 0.8rem 1.1rem;
    white-space: nowrap;
}

.categories-reference .category-save-button {
    min-height: 3rem;
    width: 100%;
}

.categories-reference .category-summary-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1rem;
}

.categories-reference .category-summary-card {
    min-height: 5.75rem;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.categories-reference .category-summary-card__icon {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.9rem;
    font-size: 1.08rem;
}

.categories-reference .category-summary-card span:not(.category-summary-card__icon) {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.1;
}

.categories-reference .category-summary-card strong {
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.1;
}

.categories-reference .categories-layout {
    grid-template-columns: minmax(360px, 0.58fr) minmax(0, 1.22fr);
    gap: 1.5rem;
    align-items: start;
}

.categories-reference .category-panel {
    padding: 1.45rem;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.065);
}

.categories-reference .category-panel__header {
    margin-bottom: 1rem;
}

.categories-reference .category-panel__header h2 {
    margin: 0.25rem 0 0;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 900;
}

.categories-reference .category-panel__header p {
    color: #64748b;
}

.categories-reference .category-preview {
    padding: 0.95rem;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.92));
}

.categories-reference .category-preview__emoji,
.categories-reference .category-name-cell__emoji {
    border-radius: 0.9rem;
}

.categories-reference .category-preview__emoji {
    width: 3rem;
    height: 3rem;
    background: #dbeafe;
    color: #2563eb;
}

.categories-reference .category-preview strong {
    color: #0f172a;
}

.categories-reference .category-preview__meta {
    position: relative;
    padding-left: 0.85rem;
}

.categories-reference .category-preview__meta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 50%;
    background: #10b981;
}

.categories-reference .category-form-section {
    padding: 1.05rem 0;
    border-top: 1px solid #eef2f7;
}

.categories-reference .category-form-section h3 {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 900;
}

.categories-reference .form-label {
    color: #334155;
    font-size: 0.76rem;
    font-weight: 850;
}

.categories-reference .form-control,
.categories-reference .form-select {
    min-height: 2.65rem;
    border-color: #e5e7eb;
    border-radius: 0.82rem;
    color: #0f172a;
    font-weight: 650;
}

.categories-reference .form-control:focus,
.categories-reference .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
}

.categories-reference .category-color-field {
    grid-template-columns: 3.4rem 1fr;
    min-height: 2.65rem;
    padding: 0.35rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.82rem;
}

.categories-reference .category-color-field .form-control-color {
    width: 2.7rem;
    min-height: 2rem;
    border: 0;
    border-radius: 0.65rem;
}

.categories-reference .category-color-field span {
    align-self: center;
    color: #475569;
}

.categories-reference .category-emoji-bank > span {
    color: #64748b;
    letter-spacing: 0.1em;
}

.categories-reference .category-emoji-button {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.75rem;
    background: #ffffff;
}

.categories-reference .category-hierarchy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.categories-reference .category-mode-selector {
    display: inline-flex;
    width: 100%;
    gap: 0;
    padding: 0.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    background: #f8fafc;
}

.categories-reference .category-mode-selector label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    flex: 1;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 0.68rem;
    background: transparent;
    color: #64748b;
    box-shadow: none;
    cursor: pointer;
}

.categories-reference .category-mode-selector label.is-selected {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.categories-reference .category-mode-selector input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.categories-reference .category-mode-selector span {
    color: inherit;
    font-size: 0.84rem;
    font-weight: 900;
}

.categories-reference .category-panel__header--split {
    align-items: flex-start;
}

.categories-reference .category-view-toggle {
    border-radius: 0.9rem;
    background: #f8fafc;
}

.categories-reference .category-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.7rem;
    font-weight: 850;
}

.categories-reference .category-filters {
    grid-template-columns: minmax(210px, 1.55fr) repeat(5, minmax(112px, 1fr));
    gap: 0.72rem;
    margin-bottom: 1rem;
}

.categories-reference .category-search {
    position: relative;
}

.categories-reference .category-search i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    color: #94a3b8;
    transform: translateY(-50%);
}

.categories-reference .category-search .form-control {
    padding-left: 2.5rem;
}

.categories-reference .category-table-wrap {
    border-radius: 1rem;
    overflow: hidden;
}

.categories-reference .category-table {
    min-width: 1120px;
}

.categories-reference .category-table thead th {
    padding: 0.9rem 1rem;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.categories-reference .category-table tbody td {
    padding: 0.95rem 1rem;
    border-color: #eef2f7;
}

.categories-reference .category-name-cell {
    grid-template-columns: auto auto 1fr;
    gap: 0.55rem;
}

.categories-reference .category-name-cell.is-child {
    padding-left: 0.4rem;
}

.categories-reference .category-expand {
    color: #94a3b8;
    font-size: 1.05rem;
    font-weight: 900;
}

.categories-reference .category-name-cell__emoji {
    width: 2.65rem;
    height: 2.65rem;
}

.categories-reference .category-name-cell strong,
.categories-reference .category-parent-title {
    color: #0f172a;
    font-weight: 900;
}

.categories-reference .category-id-badge {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #2563eb;
    font-size: 0.68rem;
    font-weight: 900;
}

.categories-reference .category-parent-note {
    display: block;
    margin-top: 0.12rem;
    color: #64748b;
    font-size: 0.78rem;
}

.categories-reference .category-pill {
    gap: 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
}

.categories-reference .category-pill--active::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #10b981;
}

.categories-reference .category-actions {
    flex-wrap: nowrap;
}

.categories-reference .category-actions .btn {
    min-height: 2.15rem;
    border-radius: 0.72rem;
    font-size: 0.78rem;
    font-weight: 850;
}

.categories-reference .category-action-view {
    border-color: #dbeafe;
    color: #334155;
    background: #ffffff;
}

.categories-reference .category-action-edit {
    border-color: #bfdbfe;
    color: #2563eb;
    background: #ffffff;
}

.categories-reference .category-add-child {
    border-color: #ddd6fe;
    color: #7c3aed;
    background: #f5f3ff;
}

.categories-reference .category-action-more {
    width: 2.15rem;
    padding: 0;
    border-color: #e5e7eb;
    color: #64748b;
    background: #ffffff;
}

.categories-reference .category-table-footer {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(130px, auto);
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 750;
}

.categories-reference .category-table-footer .page-link {
    min-width: 2rem;
    border: 0;
    border-radius: 0.65rem;
    color: #64748b;
    text-align: center;
}

.categories-reference .category-table-footer .page-item.active .page-link {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 9px 20px rgba(37, 99, 235, 0.2);
}

.categories-reference .category-table-footer .form-select {
    min-height: 2.25rem;
}

.categories-reference .category-tree-card {
    border-radius: 1rem;
}

.categories-reference .category-mobile-list {
    display: none;
}

@media (max-width: 1399.98px) {
    .categories-reference .category-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .categories-reference .categories-layout,
    .categories-reference .category-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .categories-reference .categories-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.85rem;
        min-height: 0;
        padding: 1rem;
        border-radius: 1rem;
    }

    .categories-reference .categories-hero__icon {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.8rem;
        font-size: 1.15rem;
    }

    .categories-reference .categories-hero h1 {
        font-size: 1.45rem;
        line-height: 1.12;
    }

    .categories-reference .categories-hero p {
        font-size: 0.88rem;
    }

    .categories-reference .categories-hero__button {
        width: 100%;
        min-height: 2.75rem;
    }

    .categories-reference .category-summary-grid {
        display: flex;
        gap: 0.7rem;
        margin-right: -1rem;
        overflow-x: auto;
        padding: 0 1rem 0.25rem 0;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .categories-reference .category-summary-grid::-webkit-scrollbar {
        display: none;
    }

    .categories-reference .category-summary-card {
        flex: 0 0 9.5rem;
        scroll-snap-align: start;
    }

    .categories-reference .category-summary-grid {
        grid-template-columns: none;
        gap: 0.7rem;
    }

    .categories-reference .category-summary-card {
        min-height: 4.8rem;
        padding: 0.75rem;
        border-radius: 0.85rem;
    }

    .categories-reference .category-summary-card__icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.7rem;
    }

    .categories-reference .category-summary-card span:not(.category-summary-card__icon) {
        font-size: 0.66rem;
    }

    .categories-reference .category-summary-card strong {
        font-size: 1.2rem;
    }

    .categories-reference .category-panel {
        padding: 0.9rem;
        border-radius: 0.95rem;
    }

    .categories-reference .category-preview {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.75rem;
    }

    .categories-reference .category-preview__emoji {
        width: 2.55rem;
        height: 2.55rem;
    }

    .categories-reference .category-preview__meta {
        display: block;
        padding-left: 0;
        font-size: 0.76rem;
    }

    .categories-reference .category-preview__meta::before {
        display: none;
    }

    .categories-reference .category-form-section {
        padding: 0.85rem 0;
    }

    .categories-reference .category-emoji-bank > div {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .categories-reference .category-emoji-button {
        width: 100%;
        min-height: 2.35rem;
    }

    .categories-reference .category-mode-selector {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .categories-reference .category-mode-selector label {
        min-width: 0;
        min-height: 2.6rem;
    }

    .categories-reference .category-panel__header--split,
    .categories-reference .category-table-footer {
        grid-template-columns: 1fr;
        display: grid;
        gap: 0.75rem;
    }

    .categories-reference .category-view-toggle,
    .categories-reference .category-table-footer .form-select {
        width: 100%;
    }

    .categories-reference .category-view-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0.25rem;
    }

    .categories-reference .category-view-toggle button {
        justify-content: center;
        min-width: 0;
        min-height: 2.55rem;
        padding: 0.45rem 0.35rem;
        font-size: 0.78rem;
    }

    .categories-reference .category-filters {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }

    .categories-reference .category-search .form-control,
    .categories-reference .category-filters .form-select {
        min-height: 2.75rem;
    }

    .categories-reference .category-table-wrap {
        display: none;
    }

    .categories-reference .category-mobile-list {
        display: grid;
        gap: 0.85rem;
    }

    .categories-reference .category-mobile-card,
    .categories-reference .category-mobile-empty {
        min-width: 0;
        padding: 0.9rem;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .categories-reference .category-mobile-card__head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.7rem;
        align-items: center;
    }

    .categories-reference .category-mobile-card__head strong,
    .categories-reference .category-mobile-card__head small {
        display: block;
        min-width: 0;
    }

    .categories-reference .category-mobile-card__head strong {
        overflow: hidden;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .categories-reference .category-mobile-card__head small,
    .categories-reference .category-mobile-empty {
        color: #64748b;
        font-size: 0.78rem;
        font-weight: 760;
    }

    .categories-reference .category-mobile-card__chips,
    .categories-reference .category-mobile-card__stats,
    .categories-reference .category-mobile-card__actions {
        display: grid;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .categories-reference .category-mobile-card__chips {
        grid-template-columns: repeat(2, minmax(0, max-content));
        align-items: center;
    }

    .categories-reference .category-mobile-card__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.6rem;
        border-radius: 0.8rem;
        background: #f8fafc;
    }

    .categories-reference .category-mobile-card__stats span {
        display: grid;
        gap: 0.1rem;
        min-width: 0;
        color: #64748b;
        font-size: 0.68rem;
        font-weight: 800;
    }

    .categories-reference .category-mobile-card__stats strong {
        color: #0f172a;
        font-size: 0.95rem;
        font-weight: 950;
    }

    .categories-reference .category-mobile-card__stats i {
        width: 1.1rem;
        height: 1.1rem;
        display: block;
        border-radius: 0.35rem;
    }

    .categories-reference .category-mobile-card__stats span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .categories-reference .category-mobile-card__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .categories-reference .category-mobile-card__actions .btn {
        min-height: 2.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        font-size: 0.78rem;
        font-weight: 900;
    }

    .categories-reference .category-mobile-card__actions .category-add-child {
        grid-column: 1 / -1;
    }

    .categories-reference .category-name-cell {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .categories-reference .category-expand {
        display: none;
    }

    .categories-reference .category-name-cell.is-child {
        padding-left: 0;
    }

    .categories-reference .category-name-cell__emoji {
        width: 2.4rem;
        height: 2.4rem;
    }

    .categories-reference .category-color-chip {
        width: fit-content;
    }

    .categories-reference .category-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        width: 100%;
    }

    .categories-reference .category-actions .btn,
    .categories-reference .category-actions .dropdown,
    .categories-reference .category-actions .dropdown > button {
        width: 100%;
        min-height: 2.45rem;
    }

    .categories-reference .category-actions .category-add-child {
        grid-column: 1 / -1;
    }

    .categories-reference .category-action-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .categories-reference .category-table-footer nav {
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }

    .categories-reference .category-table-footer .pagination {
        justify-content: flex-start;
        min-width: max-content;
    }

    .categories-reference .category-tree {
        gap: 0.8rem;
    }

    .categories-reference .category-tree-card {
        padding: 0.85rem;
    }

    .categories-reference .category-tree-card__head,
    .categories-reference .category-tree-child,
    .categories-reference .category-tree-child__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        align-items: stretch;
    }

    .categories-reference .category-tree-card__head .category-add-child,
    .categories-reference .category-tree-child__actions .btn {
        width: 100%;
    }

    .categories-reference .category-tree-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .categories-reference .category-tree-children {
        margin-left: 0;
        padding-left: 0.7rem;
    }
}

@media (max-width: 420px) {
    .categories-reference .category-view-toggle,
    .categories-reference .category-mode-selector,
    .categories-reference .category-actions,
    .categories-reference .category-mobile-card__actions,
    .categories-reference .category-mobile-card__stats {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   MEJORAS DE DISEÑO RESPONSIVO Y VIBRANCIA VISUAL
   ============================================================= */

/* Fondo con gradiente sutil para más profundidad */
body {
    background-image:
        radial-gradient(ellipse at 10% 50%, rgba(23, 59, 122, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 90% 10%, rgba(15, 118, 110, 0.04) 0%, transparent 50%);
}

/* --- Iconos KPI vibrantes con gradiente (smart-kpi) --- */
.smart-kpi.is-blue > span {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.30);
}

.smart-kpi.is-green > span {
    color: #fff;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.30);
}

.smart-kpi.is-teal > span {
    color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.30);
}

.smart-kpi.is-red > span {
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #f87171);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.28);
}

.smart-kpi.is-purple > span {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.28);
}

/* --- Iconos KPI vibrantes para presupuestos --- */
.budgets-kpi-grid .is-blue {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

.budgets-kpi-grid .is-green {
    color: #fff;
    background: linear-gradient(135deg, #059669, #10b981);
    box-shadow: 0 6px 14px rgba(5, 150, 105, 0.25);
}

.budgets-kpi-grid .is-orange {
    color: #fff;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 6px 14px rgba(217, 119, 6, 0.25);
}

.budgets-kpi-grid .is-purple {
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 6px 14px rgba(124, 58, 237, 0.25);
}

/* --- Iconos KPI vibrantes para metas --- */
.goals-kpi-grid article > span {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

/* --- Navbar activa más vibrante --- */
.dashboard-navbar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #173b7a, #2563eb) !important;
    box-shadow: 0 8px 22px rgba(23, 59, 122, 0.30) !important;
}

/* --- Botón "Nuevo registro" más vibrante --- */
.dashboard-navbar__button {
    background: linear-gradient(135deg, #0f766e, #059669);
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.28);
}

/* =============================================================
   NAVEGACIÓN INFERIOR MÓVIL (BOTTOM NAV)
   ============================================================= */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(221, 229, 243, 0.9);
    box-shadow: 0 -6px 24px rgba(16, 39, 84, 0.10);
}

.mobile-bottom-nav__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 3.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-bottom-nav__item a,
.mobile-bottom-nav__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    height: 100%;
    width: 100%;
    padding: 0;
    text-decoration: none;
    color: #8299b8;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: color 0.18s ease;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.mobile-bottom-nav__item a i,
.mobile-bottom-nav__more i {
    font-size: 1.28rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.mobile-bottom-nav__item a:active i,
.mobile-bottom-nav__more:active i {
    transform: scale(0.88);
}

.mobile-bottom-nav__item a.is-active {
    color: #173b7a;
}

.mobile-bottom-nav__item a.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #173b7a, #2563eb);
}

/* Botón de acción central (+ Nuevo) */
.mobile-bottom-nav__add-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mobile-bottom-nav__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #173b7a, #2563eb);
    box-shadow: 0 8px 20px rgba(23, 59, 122, 0.32);
    font-size: 1.4rem;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav__add:active {
    transform: scale(0.9);
    box-shadow: 0 4px 12px rgba(23, 59, 122, 0.22);
}

/* =============================================================
   OVERLAY MENÚ MÓVIL COMPLETO
   ============================================================= */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(10, 18, 40, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.18);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-menu-overlay.is-open .mobile-menu-sheet {
    transform: translateY(0);
}

.mobile-menu-sheet__handle {
    width: 2.5rem;
    height: 4px;
    border-radius: 999px;
    background: #dde5f3;
    margin: 0 auto 1.1rem;
}

.mobile-menu-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #eef3fb;
}

.mobile-menu-sheet__header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.mobile-menu-sheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 0.65rem;
    background: #f1f5f9;
    color: #627089;
    cursor: pointer;
    font-size: 0.95rem;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-sheet__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
}

.mobile-menu-sheet__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 5.5rem;
    padding: 0.85rem 0.5rem;
    border: 1px solid #e8eef5;
    border-radius: 1.1rem;
    text-decoration: none;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-sheet__link:active {
    background: #f1f5f9;
}

.mobile-menu-sheet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.85rem;
    font-size: 1.22rem;
    background: #f1f5f9;
    color: #627089;
    transition: background 0.18s ease, color 0.18s ease;
}

.mobile-menu-sheet__link.is-active {
    border-color: rgba(23, 59, 122, 0.22);
    background: rgba(23, 59, 122, 0.04);
    color: #173b7a;
}

.mobile-menu-sheet__link.is-active .mobile-menu-sheet__icon {
    color: #fff;
    background: linear-gradient(135deg, #173b7a, #2563eb);
    box-shadow: 0 6px 14px rgba(23, 59, 122, 0.22);
}

/* =============================================================
   BREAKPOINTS RESPONSIVOS FALTANTES
   ============================================================= */

@media (max-width: 1199.98px) {
    /* Mostrar bottom nav */
    .mobile-bottom-nav {
        display: block;
    }

    /* Espacio para el bottom nav */
    .dashboard-shell {
        padding-bottom: 5.5rem;
    }

    /* Smart dashboard header */
    .smart-dashboard__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .smart-dashboard__filters {
        width: 100%;
        flex-wrap: wrap;
    }

    /* Goals responsivo */
    .goals-hero {
        grid-template-columns: 1fr;
    }

    .goals-layout {
        grid-template-columns: 1fr;
    }

    .goals-panel {
        position: static;
        min-height: 0;
    }

    .goals-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Presupuestos responsivo */
    .budgets-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    /* Smart KPI - 2 columnas en lugar de 1 */
    .smart-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Goals en móvil */
    .goals-card-grid,
    .goals-suggestion-grid {
        grid-template-columns: 1fr;
    }

    .goals-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Topbar deudas */
    .debts-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .debts-topbar__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    /* Smart KPI más compacto */
    .smart-kpi {
        min-height: 6.5rem;
        padding: 0.85rem;
        gap: 0.65rem;
    }

    .smart-kpi strong {
        font-size: 1.05rem;
    }

    .smart-kpi small {
        font-size: 0.64rem;
    }

    .smart-kpi em {
        font-size: 0.69rem;
    }

    /* KPI grids a 1 columna en pantallas muy pequeñas */
    .goals-kpi-grid {
        grid-template-columns: 1fr;
    }

    .budgets-kpi-grid {
        grid-template-columns: 1fr;
    }

    /* History KPI a 1 columna */
    .history-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   MEJORAS DE ACCESIBILIDAD TÁCTIL
   ============================================================= */

@media (max-width: 1199.98px) {
    /* Targets táctiles mínimos de 44px */
    .btn {
        min-height: 2.75rem;
    }

    .form-control,
    .form-select {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .nav-link {
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* Modales más anchos en móvil */
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* ════════════════════════════════════════════
   DASHBOARD EXCLUSION TOGGLE
   ════════════════════════════════════════════ */

/* Toggle button on income/inventory rows */
.exclude-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted, #999);
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
    margin-left: .25rem;
}
.exclude-toggle:hover {
    background: rgba(0,0,0,.06);
    color: var(--color-text, #222);
}
.exclude-toggle.is-excluded {
    color: #f59e0b;
}
.exclude-toggle:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Excluded row visual state */
.income-detail-row.is-excluded {
    opacity: .45;
}
.income-detail-row.is-excluded strong,
.income-detail-row.is-excluded em {
    text-decoration: line-through;
    color: var(--color-text-muted, #999);
}

/* Clickable inventory buttons in banner-inv-grid */
.banner-inv-btn {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: none;
    border: none;
    padding: .5rem .6rem;
    border-radius: .5rem;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
    width: 100%;
}
.banner-inv-btn:hover {
    background: rgba(var(--color-primary-rgb, 99,102,241), .07);
}
.banner-inv-btn span {
    font-size: .72rem;
    color: var(--color-text-muted, #888);
    display: flex;
    align-items: center;
    gap: .2rem;
}
.banner-inv-btn span i {
    font-size: .6rem;
    opacity: .6;
}
.banner-inv-btn strong {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
}

/* color-yellow utility */
.color-yellow {
    color: #d97706;
}

/* ════════════════════════════════════════════
   MODO CONTENCIÓN BANNER
   ════════════════════════════════════════════ */
.contencion-banner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border: 1.5px solid #fca5a5;
    border-left: 4px solid #ef4444;
    border-radius: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.contencion-banner__icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    color: #ef4444;
    line-height: 1;
}
.contencion-banner__body {
    flex: 1;
    min-width: 0;
}
.contencion-banner__body strong {
    display: block;
    font-size: .95rem;
    font-weight: 900;
    color: #b91c1c;
    margin-bottom: .2rem;
}
.contencion-banner__body p {
    font-size: .8rem;
    color: #7f1d1d;
    margin: 0 0 .6rem;
}
.contencion-banner__calc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: #6b7280;
}
.contencion-banner__calc em {
    font-weight: 700;
    font-style: normal;
    color: #1f2937;
}
.contencion-banner__op {
    color: #9ca3af;
    font-weight: 600;
}
.contencion-banner__result {
    font-weight: 700;
    color: #b91c1c;
}
.contencion-banner__result strong {
    display: inline;
    font-size: .85rem;
    color: #b91c1c;
}
.contencion-banner__actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex-shrink: 0;
    max-width: 280px;
}
.contencion-banner__actions span {
    font-size: .72rem;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: .35rem;
}
.contencion-banner__actions span i {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: .8rem;
}
.contencion-banner__actions span i.bi-x-circle-fill { color: #ef4444; }
.contencion-banner__actions span i.bi-check-circle-fill { color: #10b981; }
.contencion-banner__actions span i.bi-arrow-right-circle-fill { color: #3b82f6; }

@media (max-width: 768px) {
    .contencion-banner { flex-direction: column; }
    .contencion-banner__actions { max-width: 100%; }
}

/* ════════════════════════════════════════════
   PROJECTION BREAKDOWN (KPI F)
   ════════════════════════════════════════════ */
.bkpi__proj-breakdown {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px dashed rgba(0,0,0,.1);
}
.bkpi__proj-breakdown div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .68rem;
    color: #6b7280;
}
.bkpi__proj-breakdown div strong {
    font-size: .72rem;
    font-weight: 700;
}
.bkpi__proj-total {
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: .2rem;
    margin-top: .1rem;
}
.bkpi__proj-total span,
.bkpi__proj-total strong {
    font-weight: 900 !important;
    font-size: .78rem !important;
    color: #111 !important;
}

/* ════════════════════════════════════════════
   BUDGET TYPE BADGES
   ════════════════════════════════════════════ */
.budget-type-badge {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: 999px;
    margin-left: .3rem;
    vertical-align: middle;
}
.btype--esencial    { background: #dcfce7; color: #166534; }
.btype--controlable { background: #fef3c7; color: #92400e; }
.btype--nogasto     { background: #e0e7ff; color: #3730a3; }
.btype--recuperable { background: #f3e8ff; color: #6b21a8; }

.smart-budget-category div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/* ════════════════════════════════════════════
   DAILY CONTENCION ALERT (inside card)
   ════════════════════════════════════════════ */
.daily-contencion-alert {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    background: #fef2f2;
    border-radius: .5rem;
    padding: .65rem .8rem;
    margin-bottom: .75rem;
    border: 1px solid #fca5a5;
}
.daily-contencion-alert i {
    font-size: 1.1rem;
    color: #ef4444;
    flex-shrink: 0;
}
.daily-contencion-alert strong {
    display: block;
    font-size: .8rem;
    font-weight: 800;
    color: #b91c1c;
    margin-bottom: .2rem;
}
.daily-contencion-alert p {
    font-size: .72rem;
    color: #7f1d1d;
    margin: 0;
}
.smart-budget-mini-table div.is-blocked {
    opacity: .55;
    text-decoration: none;
}
.smart-budget-mini-table div.is-blocked strong {
    color: #9ca3af;
}

/* ════════════════════════════════════════════
   DEBT CONTEXT NOTE (below debt map)
   ════════════════════════════════════════════ */
.debt-context-note {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: .6rem;
    padding: .75rem 1rem;
    margin-top: .75rem;
    font-size: .78rem;
    color: #1e40af;
}
.debt-context-note i {
    flex-shrink: 0;
    font-size: .95rem;
    margin-top: .1rem;
}

/* ════════════════════════════════════════════
   DEBT PRIORITY TAGS
   ════════════════════════════════════════════ */
.banner-debt-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2rem;
}
.debt-priority-tag {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: 999px;
}
.dprio--urgente { background: #fee2e2; color: #991b1b; }
.dprio--alta    { background: #fef3c7; color: #92400e; }
.dprio--media   { background: #e0e7ff; color: #3730a3; }
.dprio--baja    { background: #f3f4f6; color: #6b7280; }

/* ════════════════════════════════════════════
   PRÓXIMOS 7 DÍAS SECTION
   ════════════════════════════════════════════ */
.week-ahead {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.week-ahead__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.week-ahead__head > div h2 {
    font-size: 1.05rem;
    font-weight: 800;
    margin: .1rem 0 .2rem;
}
.week-ahead__head > div p {
    font-size: .78rem;
    color: #64748b;
    margin: 0;
}
.week-ahead__head a {
    font-size: .75rem;
    color: #6366f1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.week-ahead__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.week-ahead__stat {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .75rem 1rem;
    border-radius: .65rem;
    border: 1px solid #e2e8f0;
}
.week-ahead__stat > i {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: .1rem;
}
.week-ahead__stat div { flex: 1; min-width: 0; }
.week-ahead__stat span { display: block; font-size: .7rem; color: #64748b; margin-bottom: .15rem; }
.week-ahead__stat strong { display: block; font-size: .95rem; font-weight: 800; margin-bottom: .1rem; }
.week-ahead__stat em { font-style: normal; font-size: .65rem; color: #94a3b8; }
.week-ahead__stat.is-danger  { background: #fef2f2; border-color: #fca5a5; }
.week-ahead__stat.is-danger > i { color: #ef4444; }
.week-ahead__stat.is-danger strong { color: #b91c1c; }
.week-ahead__stat.is-safe    { background: #f0fdf4; border-color: #bbf7d0; }
.week-ahead__stat.is-safe > i { color: #10b981; }
.week-ahead__stat.is-safe strong { color: #065f46; }
.week-ahead__stat.is-warning { background: #fffbeb; border-color: #fde68a; }
.week-ahead__stat.is-warning > i { color: #f59e0b; }
.week-ahead__stat.is-warning strong { color: #92400e; }
.week-ahead__stat.is-neutral { background: #f8fafc; border-color: #e2e8f0; }
.week-ahead__stat.is-neutral > i { color: #64748b; }

.week-ahead__debts { margin-top: .5rem; }
.week-ahead__debts-title {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: #b91c1c;
    margin-bottom: .4rem;
}
.week-ahead__debts-title i { margin-right: .3rem; }
.week-ahead__debt-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .75rem;
    border-radius: .45rem;
    margin-bottom: .3rem;
    font-size: .78rem;
}
.week-ahead__debt-row.is-danger { background: #fef2f2; }
.week-ahead__debt-row span { flex: 1; font-weight: 600; color: #1f2937; }
.week-ahead__debt-row em { font-style: normal; font-size: .68rem; color: #6b7280; white-space: nowrap; }
.week-ahead__debt-row strong { font-size: .82rem; font-weight: 800; color: #b91c1c; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   RITMO REAL — FILAS EXPANDIBLES CON DETALLE DE MOVIMIENTOS
   ════════════════════════════════════════════════════════════ */

/* Quita marcador nativo del <details> */
.daily-rhythm__details-wrap {
    display: block;
}

.daily-rhythm__details-wrap > summary.daily-rhythm__row {
    display: grid;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.daily-rhythm__details-wrap > summary::-webkit-details-marker {
    display: none;
}

/* Fila expandible: hover más pronunciado */
.daily-rhythm__row.is-expandable:hover {
    background: #f0f6ff;
}

/* Icono chevron que rota al abrir */
.daily-rhythm__expand-hint {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.daily-rhythm__details-wrap[open] .daily-rhythm__expand-hint {
    transform: rotate(180deg);
}

/* Contenedor del detalle de movimientos */
.daily-rhythm__mov-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1.25rem 0.85rem;
    animation: drDetailIn 0.18s ease-out;
}

@keyframes drDetailIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Grupo ingreso / gasto */
.drm-group {
    margin-bottom: 0.6rem;
}

.drm-group:last-child {
    margin-bottom: 0;
}

.drm-group__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-bottom: 0.35rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px dashed #e2e8f0;
}

.drm-group--income .drm-group__label    { color: #059669; }
.drm-group--expense .drm-group__label   { color: #dc2626; }
.drm-group--inventory .drm-group__label { color: #b45309; }

.drm-item__amount--inventory { color: #b45309; }

/* Item individual de movimiento */
.drm-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.78rem;
}

.drm-item:last-child {
    border-bottom: 0;
}

.drm-item.is-excluded {
    opacity: 0.45;
}

.drm-item__info {
    flex: 1;
    min-width: 0;
}

.drm-item__info strong {
    display: block;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drm-item__info small {
    color: #94a3b8;
    font-size: 0.68rem;
}

.drm-item__amount {
    flex-shrink: 0;
    font-style: normal;
    font-weight: 900;
    font-size: 0.82rem;
}

.drm-item__amount--income  { color: #059669; }
.drm-item__amount--expense { color: #dc2626; }

/* ════════════════════════════════════════════════════════════
   CORRECCIONES RESPONSIVAS — BANER COLAPSADO + PANEL INGRESOS
   ════════════════════════════════════════════════════════════ */

/* Nav colapsado en móvil: enlaces con fondo visible, no "puro texto" */
@media (max-width: 1199.98px) {
    .dashboard-navbar .nav-link:not(.active) {
        background: #f1f5f9;
        color: var(--finance-text);
    }

    .dashboard-navbar .nav-link:not(.active):hover,
    .dashboard-navbar .nav-link:not(.active):focus {
        background: #eff6ff;
        color: var(--finance-primary);
    }

    /* Indicador visual del enlace activo en modo colapsado */
    .dashboard-navbar .nav-link.active {
        box-shadow: 0 6px 18px rgba(23, 59, 122, 0.35) !important;
    }

    /* Perfil de usuario ocupa ancho completo en colapsado */
    .dashboard-profile {
        width: 100%;
    }
}

/* Banner-row — columna única en pantallas muy pequeñas (< 480 px) */
@media (max-width: 479.98px) {
    .banner-row__grid {
        grid-template-columns: 1fr;
    }

    /* Resetear bordes que vienen del breakpoint de 768 px */
    .banner-row__grid .bkpi:nth-child(2n) {
        border-right: none;
    }

    .banner-row__grid .bkpi:nth-child(n+3) {
        border-top: none;
    }

    /* Estilos para columna única */
    .banner-row__grid .bkpi {
        min-height: 0;
        border-right: none;
    }

    .banner-row__grid .bkpi:not(:last-child) {
        border-bottom: 1px solid #e2e8f0;
    }

    /* Grid operativo y de negocios también a 1 columna */
    .banner-ops-grid,
    .banner-biz-grid {
        grid-template-columns: 1fr;
    }

    .banner-ops-card:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* Panel de ingresos en móvil: padding inferior para que el último item no quede oculto */
@media (max-width: 1199.98px) {
    .smart-detail-panel .income-detail-list:last-child,
    .smart-detail-panel .smart-detail-footer:last-child {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .week-ahead__grid { grid-template-columns: 1fr 1fr; }
    .week-ahead__head { flex-direction: column; gap: .5rem; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════
   TRANSFER FORM — account name always visible
   ══════════════════════════════════════════════════════════ */

/* Force 1-column so each card is wide enough to show account name */
.reference-transfer-accounts .reference-account-options {
    grid-template-columns: 1fr;
}

/* Ensure account name body never collapses in any grid context */
.reference-account-card__body {
    min-width: 60px;
}

/* ══════════════════════════════════════════════════════════
   DEBT MODULE — delete button, payment history, extend form
   ══════════════════════════════════════════════════════════ */

.debt-action-danger {
    background: none;
    border: none;
    padding: 0.3rem 0.4rem;
    border-radius: 0.4rem;
    color: #dc2626;
    cursor: pointer;
    transition: background 0.15s;
}
.debt-action-danger:hover { background: #fef2f2; }

/* Payment history row — extension style */
.debt-payment-table__row.is-extension {
    background: #fff7ed;
}

.debt-payment-type {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
}
.debt-payment-type.is-pay  { color: #059669; background: #ecfdf5; }
.debt-payment-type.is-ext  { color: #d97706; background: #fff7ed; }

.debt-payment-delete {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    border-radius: 0.4rem;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.15s, background 0.15s;
}
.debt-payment-delete:hover { color: #dc2626; background: #fef2f2; }

/* Payment/Extend tabs */
.debt-forms-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}
.debt-forms-tabs button {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.debt-forms-tabs button.is-active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.debt-forms-tabs button:hover:not(.is-active) { background: #f8fafc; }

.debt-extend-hint {
    font-size: 0.82rem;
    color: #d97706;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.6rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
}
.debt-extend-hint i { margin-right: 0.3rem; }

.debts-primary-button--extend {
    background: linear-gradient(135deg, #d97706, #b45309);
    border-color: #b45309;
}

/* Direction toggle in debt form */
.debts-direction-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.debts-direction-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.85rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.65rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.debts-direction-option i {
    font-size: 1.3rem;
    color: #64748b;
}

.debts-direction-option span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.debts-direction-option small {
    font-size: 0.7rem;
    color: #94a3b8;
}

.debts-direction-option.is-selected,
.debts-direction-option:has(input:checked) {
    border-color: #2563eb;
    background: #eff6ff;
}

.debts-direction-option.is-selected i,
.debts-direction-option:has(input:checked) i { color: #2563eb; }

/* Debt list section labels */
.debt-list-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #fef2f2;
    color: #b91c1c;
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
}

.debt-list-section-label.is-lent {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

/* Direction badge in detail panel */
.debt-direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

.debt-direction-badge.is-owe {
    background: #fef2f2;
    color: #b91c1c;
}

.debt-direction-badge.is-lent {
    background: #f0fdf4;
    color: #15803d;
}

/* ================================================================
   CAPA DE INTERACTIVIDAD — toasts, animaciones y micro-interacciones
   ================================================================ */

/* ── Toasts flotantes ───────────────────────────────────────── */
.app-toast-stack {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}

.app-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-left: 4px solid var(--finance-primary);
    border-radius: 0.75rem;
    box-shadow: 0 14px 38px rgba(16, 39, 84, 0.18);
    font-size: 0.875rem;
    color: var(--finance-text);
    overflow: hidden;
    pointer-events: auto;
    animation: app-toast-in 0.32s cubic-bezier(0.21, 1.02, 0.73, 1) both;
}

.app-toast.is-leaving {
    animation: app-toast-out 0.25s ease-in forwards;
}

.app-toast--success { border-left-color: #15803d; }
.app-toast--success .app-toast__icon { color: #15803d; }
.app-toast--danger { border-left-color: #b91c1c; }
.app-toast--danger .app-toast__icon { color: #b91c1c; }
.app-toast--warning { border-left-color: #b45309; }
.app-toast--warning .app-toast__icon { color: #b45309; }
.app-toast--info { border-left-color: var(--finance-primary); }
.app-toast--info .app-toast__icon { color: var(--finance-primary); }

.app-toast__icon {
    font-size: 1.05rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.app-toast__message {
    flex: 1;
    line-height: 1.4;
    font-weight: 500;
}

.app-toast__close {
    border: 0;
    background: transparent;
    color: var(--finance-muted);
    padding: 0.1rem 0.2rem;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: color 0.15s ease, background 0.15s ease;
}

.app-toast__close:hover {
    color: var(--finance-text);
    background: var(--finance-bg);
}

.app-toast__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.22;
    transform-origin: left;
    animation-name: app-toast-progress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes app-toast-in {
    from { opacity: 0; transform: translateX(28px) scale(0.97); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes app-toast-out {
    to { opacity: 0; transform: translateX(32px) scale(0.96); }
}

@keyframes app-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ── Aparición progresiva al hacer scroll ───────────────────── */
.anim-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.9, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.anim-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

/* ── Micro-interacciones en tarjetas KPI y botones ──────────── */
.bkpi {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
    .bkpi--clickable:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(16, 39, 84, 0.14);
    }

    .card {
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .card:hover {
        box-shadow: 0 14px 30px rgba(16, 39, 84, 0.10);
    }
}

.bkpi--clickable:active {
    transform: translateY(-1px) scale(0.99);
}

.bkpi__value {
    font-variant-numeric: tabular-nums;
}

/* ── Feedback al enviar formularios ─────────────────────────── */
button.is-submitting,
input.is-submitting {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

button.is-submitting > i.bi {
    animation: app-spin 0.9s linear infinite;
}

@keyframes app-spin {
    to { transform: rotate(360deg); }
}

/* ── Accesibilidad y detalles globales ──────────────────────── */
:focus-visible {
    outline: 2px solid var(--finance-primary);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .anim-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .app-toast,
    .app-toast.is-leaving {
        animation: none;
    }

    .bkpi,
    .card {
        transition: none;
    }
}

/* ================================================================
   HISTORIAL Y TRANSFERENCIAS — chips de filtros y atajos
   ================================================================ */
.history-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.history-presets__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--finance-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.2rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--finance-border);
    border-radius: 99px;
    background: var(--finance-surface);
    color: var(--finance-text);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.filter-chip:hover {
    border-color: var(--finance-primary);
    color: var(--finance-primary);
    transform: translateY(-1px);
}

.filter-chip.is-active {
    background: var(--finance-primary);
    border-color: var(--finance-primary);
    color: #fff;
}

.quick-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.quick-amounts .filter-chip {
    padding: 0.22rem 0.65rem;
    font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .filter-chip {
        transition: none;
    }
}

/* ================================================================
   PLANEACIÓN FINANCIERA — flujo proyectado, patrimonio y plan de deudas
   ================================================================ */
.planner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.planner-panel {
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: 1rem;
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.planner-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.planner-panel__head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--finance-text);
}

.planner-panel__head h3 i {
    color: var(--finance-primary);
    margin-right: 0.3rem;
}

.planner-panel__head small {
    color: var(--finance-muted);
    font-size: 0.76rem;
}

.planner-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.6rem 0.75rem;
    border-radius: 0.65rem;
}

.planner-alert i { flex-shrink: 0; margin-top: 0.1rem; }
.planner-alert--danger { background: #fef2f2; color: #991b1b; }
.planner-alert--warning { background: #fffbeb; color: #92400e; }
.planner-alert--safe { background: #f0fdf4; color: #166534; }

.cashflow-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 88px;
    padding: 0.25rem 0;
}

.cashflow-bars__item {
    flex: 1;
    min-width: 3px;
    background: linear-gradient(180deg, #34d399, #0f766e);
    border-radius: 2px 2px 0 0;
    transition: opacity 0.15s ease;
}

.cashflow-bars__item.is-negative {
    background: linear-gradient(180deg, #f87171, #b91c1c);
}

.cashflow-bars__item:hover { opacity: 0.75; }

.planner-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
}

.planner-stats--compact { grid-template-columns: repeat(3, 1fr); }

.planner-stats div { display: flex; flex-direction: column; }
.planner-stats span { font-size: 0.72rem; color: var(--finance-muted); }
.planner-stats strong { font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.planner-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px dashed var(--finance-border);
    padding-top: 0.7rem;
}

.planner-events li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.planner-events__date {
    flex-shrink: 0;
    background: var(--finance-bg);
    border-radius: 0.4rem;
    padding: 0.12rem 0.45rem;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--finance-primary);
}

.planner-events__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--finance-text);
}

.planner-events li strong { font-variant-numeric: tabular-nums; font-size: 0.8rem; }

.planner-empty {
    font-size: 0.8rem;
    color: var(--finance-muted);
    background: var(--finance-bg);
    border-radius: 0.65rem;
    padding: 0.75rem 0.9rem;
    margin: 0;
}

.planner-footnote {
    font-size: 0.7rem;
    color: var(--finance-muted);
    margin: 0;
}

.planner-delta {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    white-space: nowrap;
}

.planner-delta.is-positive { background: #f0fdf4; color: #15803d; }
.planner-delta.is-negative { background: #fef2f2; color: #b91c1c; }

.networth-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.networth-rows__item {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
}

.networth-rows__label { color: var(--finance-muted); font-weight: 600; font-size: 0.74rem; }

.networth-rows__track {
    height: 8px;
    background: var(--finance-bg);
    border-radius: 99px;
    overflow: hidden;
}

.networth-rows__track span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #173b7a, #0f766e);
}

.networth-rows__track span.is-negative {
    background: linear-gradient(90deg, #f87171, #b91c1c);
}

.networth-rows__item strong { font-variant-numeric: tabular-nums; font-size: 0.78rem; }

.debt-plan {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.debt-plan__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--finance-border);
    border-radius: 0.7rem;
    background: #fbfcfe;
}

.debt-plan__order {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--finance-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.debt-plan__body { flex: 1; min-width: 0; }
.debt-plan__body strong { display: block; font-size: 0.85rem; }
.debt-plan__body small { color: var(--finance-muted); font-size: 0.73rem; }

.debt-plan__eta {
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--finance-accent);
    background: #f0fdfa;
    border-radius: 0.45rem;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

/* ================================================================
   ALERTAS DE TARJETAS DE CRÉDITO
   ================================================================ */
.cc-alerts {
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: 1rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cc-alerts__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--finance-text);
}

.cc-alerts__head i { color: var(--finance-primary); font-size: 1rem; }

.cc-alerts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.7rem;
}

.cc-alert {
    border: 1px solid var(--finance-border);
    border-left-width: 4px;
    border-radius: 0.7rem;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #fbfcfe;
}

.cc-alert.is-danger { border-left-color: #dc2626; background: #fef7f7; }
.cc-alert.is-warning { border-left-color: #d97706; background: #fffdf5; }
.cc-alert.is-info { border-left-color: var(--finance-primary); }

.cc-alert__main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cc-alert__main strong { font-size: 0.88rem; }

.cc-alert__due {
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.cc-alert.is-danger .cc-alert__due { color: #b91c1c; }
.cc-alert.is-warning .cc-alert__due { color: #b45309; }
.cc-alert.is-info .cc-alert__due { color: var(--finance-primary); }

.cc-alert__amounts {
    display: flex;
    gap: 1rem;
    font-size: 0.76rem;
    color: var(--finance-muted);
    flex-wrap: wrap;
}

.cc-alert__amounts strong { color: var(--finance-text); font-variant-numeric: tabular-nums; }

.cc-alert__closing {
    font-size: 0.7rem;
    color: var(--finance-muted);
    border-top: 1px dashed var(--finance-border);
    padding-top: 0.35rem;
}

/* ================================================================
   CAPA RESPONSIVA GLOBAL — huecos detectados en auditoría móvil
   ================================================================ */

/* Tablas de transferencias (reference-table-wrap) se apilan en móvil
   igual que las table-responsive */
@media (max-width: 767.98px) {
    .reference-table-wrap .table.table-mobile-ready thead {
        display: none;
    }

    .reference-table-wrap .table.table-mobile-ready tbody,
    .reference-table-wrap .table.table-mobile-ready tr,
    .reference-table-wrap .table.table-mobile-ready td {
        display: block;
        width: 100%;
    }

    .reference-table-wrap .table.table-mobile-ready tbody tr {
        padding: 0.85rem 0.9rem;
        border-bottom: 1px solid #edf2fa;
    }

    .reference-table-wrap .table.table-mobile-ready tbody tr:last-child {
        border-bottom: 0;
    }

    .reference-table-wrap .table.table-mobile-ready td {
        border: 0;
        padding: 0.4rem 0;
        text-align: left !important;
        white-space: normal !important;
    }

    .reference-table-wrap .table.table-mobile-ready td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        color: var(--finance-muted);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .reference-table-wrap .table.table-mobile-ready td.text-end .btn,
    .reference-table-wrap .table.table-mobile-ready td.text-end form {
        display: inline-block;
        margin-bottom: 0.35rem;
    }
}

/* KPIs del banner: una sola columna en teléfonos pequeños */
@media (max-width: 480px) {
    .banner-row__grid {
        grid-template-columns: 1fr;
    }

    .banner-row__grid .bkpi {
        border-right: none !important;
        border-top: 1px solid #e2e8f0;
    }

    .banner-row__grid .bkpi:first-child {
        border-top: none;
    }
}

/* Planeación financiera y alertas de tarjetas en móvil */
@media (max-width: 575.98px) {
    .planner-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .planner-panel {
        padding: 0.9rem 0.95rem;
    }

    .cashflow-bars {
        height: 64px;
    }

    .debt-plan__item {
        flex-wrap: wrap;
    }

    .debt-plan__eta {
        margin-left: calc(26px + 0.65rem);
    }

    .networth-rows__item {
        grid-template-columns: 44px 1fr auto;
        gap: 0.45rem;
    }

    .cc-alerts {
        padding: 0.85rem 0.9rem;
    }

    .cc-alerts__grid {
        grid-template-columns: 1fr;
    }

    .planner-stats {
        gap: 0.45rem 0.75rem;
    }

    .history-presets {
        gap: 0.35rem;
    }
}

/* Objetivos táctiles cómodos en pantallas touch */
@media (pointer: coarse) {
    .filter-chip {
        padding: 0.45rem 0.95rem;
        min-height: 36px;
    }

    .quick-amounts .filter-chip {
        padding: 0.32rem 0.75rem;
        min-height: 32px;
    }

    .app-toast__close {
        padding: 0.35rem 0.5rem;
    }

    .planner-events li {
        padding: 0.18rem 0;
    }

    .exclude-toggle,
    .reference-eye-btn {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Toasts en móvil: ancho completo arriba, sin tapar la navegación inferior */
@media (max-width: 480px) {
    .app-toast-stack {
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }
}

/* Texto largo de montos nunca rompe el layout */
.bkpi__value,
.planner-stats strong,
.cc-alert__amounts strong,
.networth-rows__item strong {
    overflow-wrap: anywhere;
}

/* ================================================================
   PLAN INTELIGENTE DE PRESUPUESTOS
   ================================================================ */
.budget-plan {
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.budget-plan__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.budget-plan__head h2 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0.25rem 0 0;
}

.budget-plan__detail {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--finance-muted);
    max-width: 46rem;
}

.budget-plan__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
}

.budget-plan__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
}

.budget-plan__badge.is-safe { background: #f0fdf4; color: #166534; }
.budget-plan__badge.is-warning { background: #fffbeb; color: #92400e; }
.budget-plan__badge.is-danger { background: #fef2f2; color: #991b1b; }

.budget-plan__apply {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    background: var(--finance-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 1.1rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}

.budget-plan__apply:hover {
    background: var(--finance-primary-dark);
    transform: translateY(-1px);
}

.budget-plan__aligned {
    font-size: 0.8rem;
    font-weight: 600;
    color: #166534;
}

.budget-plan__table-wrap {
    overflow-x: auto;
}

.budget-plan__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.budget-plan__table th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--finance-muted);
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--finance-border);
}

.budget-plan__table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid #f1f5fb;
    font-variant-numeric: tabular-nums;
}

.budget-plan__tag {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #eef4ff;
    color: var(--finance-primary);
    border-radius: 99px;
    padding: 0.1rem 0.45rem;
}

.budget-plan__action {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 99px;
}

.budget-plan__action.is-create { background: #eef4ff; color: var(--finance-primary); }
.budget-plan__action.is-increase { background: #fffbeb; color: #b45309; }
.budget-plan__action.is-decrease { background: #f0fdf4; color: #15803d; }
.budget-plan__action.is-keep { background: var(--finance-bg); color: var(--finance-muted); }

.budget-plan__footnote {
    margin: 0;
    font-size: 0.72rem;
    color: var(--finance-muted);
}

@media (max-width: 575.98px) {
    .budget-plan { padding: 1rem; }
    .budget-plan__side { align-items: flex-start; }

    .budget-plan__table thead { display: none; }

    .budget-plan__table tr {
        display: block;
        border-bottom: 1px solid var(--finance-border);
        padding: 0.6rem 0;
    }

    .budget-plan__table td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        border: 0;
        padding: 0.2rem 0;
    }

    .budget-plan__table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--finance-muted);
    }
}

/* ================================================================
   DEUDAS — modernización: sin sidebar, form colapsable, filtros
   ================================================================ */
.debts-dashboard--full {
    grid-template-columns: minmax(0, 1fr);
}

.debts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.debts-toolbar h1 {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0.2rem 0 0;
    color: #111827;
}

.debts-new-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.debts-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.35rem 0 0.85rem;
}

/* Con el formulario oculto, lista y detalle aprovechan todo el ancho
   (solo en la zona de 3 columnas; en pantallas menores ya se apila) */
@media (min-width: 1400px) {
    .debts-main-grid.is-form-hidden {
        grid-template-columns: minmax(0, 1.55fr) minmax(390px, 0.95fr);
    }
}

.debt-chart__line {
    stroke: #7c3aed;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.debt-chart__points circle {
    fill: #7c3aed;
    cursor: help;
}

@media (max-width: 575.98px) {
    .debts-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .debts-new-button {
        justify-content: center;
    }
}