:root {

    --background: #faf9f7;
    --surface: #ffffff;
    --surface-soft: #f5f3f0;

    --border: #e6e2dd;

    --text: #29262d;
    --muted: #85808a;
    --muted-light: #aaa5ad;

    --purple: #7446bd;
    --purple-soft: #f0e9fb;

    --green: #11945f;
    --green-soft: #e8f6ef;

    --red: #e53d48;
    --red-soft: #fbecee;

    --yellow: #c49a3a;

    --sidebar-width: 275px;

    --radius: 20px;

    --shadow:
        0 10px 30px rgba(36, 30, 40, .045);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    overflow-x: hidden;

    max-width: 100vw;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


/* =========================================
   APP
========================================= */

.app {
    min-height: 100vh;
}


/* =========================================
   SIDEBAR
========================================= */

.sidebar {

    position: fixed;

    inset:
        0
        auto
        0
        0;

    width: var(--sidebar-width);

    background: #fbfaf8;

    border-right:
        1px solid var(--border);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px 16px;

    z-index: 20;
}


.brand {

    padding:
        0
        10px
        34px;
}

.sidebar-brand-logo {
    height: 36px;
    width: auto;
    max-width: 175px;
    object-fit: contain;
    display: block;
    margin-bottom: 6px;
}


.brand h2 {

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 28px;

    font-weight: 700;

    letter-spacing: -.03em;
}


.brand p {

    margin:
        4px
        0
        0;

    color: var(--muted);

    font-size: 14px;
}


.nav {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.nav-item {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 13px;

    border: 0;

    background: transparent;

    color: #625e67;

    padding:
        11px
        13px;

    border-radius: 14px;

    text-align: left;

    font-size: 15px;

    transition:
        background .2s ease,
        color .2s ease;
}


.nav-item:hover {

    background: #f2efeb;

    color: var(--text);
}


.nav-item.active {

    background: var(--purple-soft);

    color: #65409d;

    font-weight: 600;
}


.nav-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

.nav-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}


.sidebar-bottom {

    display: flex;

    flex-direction: column;

    gap: 13px;
}


.new-button {

    width: 100%;

    border: 0;

    border-radius: 12px;

    background: var(--purple);

    color: white;

    padding:
        13px
        15px;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 6px 15px rgba(116,70,189,.2);

    transition: .2s ease;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;
}

.new-button svg {
    display: block;
    flex-shrink: 0;
}


.new-button:hover {

    transform: translateY(-1px);

    background: #683daf;
}


.logout-button {

    border: 0;

    background: transparent;

    color: #85808a;

    text-align: left;

    padding:
        0
        13px;

    font-size: 13px;
}


/* =========================================
   MAIN
========================================= */

.main {

    margin-left: var(--sidebar-width);

    padding:
        32px
        52px
        70px;

    max-width: 1500px;
}


.section {

    display: none;

    max-width: 1185px;

    margin: 0 auto;
}


.section.active {

    display: block;
}


/* =========================================
   HEADER
========================================= */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 32px;

    gap: 30px;
}


.section-label {

    margin:
        0
        0
        7px;

    color: #928d97;

    font-size: 11px;

    letter-spacing: .13em;

    font-weight: 500;
}


.page-header h1 {

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 34px;

    line-height: 1.1;

    letter-spacing: -.03em;

    font-weight: 800;
}


.month-label {

    margin:
        7px
        0
        0;

    color: var(--muted);

    font-size: 16px;
}


.period-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 9px 14px;
    box-shadow: 0 1px 3px rgba(20, 10, 35, 0.03);
}

.period-cal-icon,
.period-arrow-icon {
    flex-shrink: 0;
    color: #6b7280;
    pointer-events: none;
}

.period-filter-wrap select.period-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 0 4px 0 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e1e24;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    min-width: auto;
}


/* =========================================
   BALANCE
========================================= */

.balance-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 30px 36px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.balance-info {
    min-width: 0;
}

.balance-bars-graphic {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 60px;
    padding-left: 20px;
    flex-shrink: 0;
}

.balance-bars-graphic .bar {
    width: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
}

.balance-bars-graphic .bar-1 { height: 14px; opacity: 0.25; }
.balance-bars-graphic .bar-2 { height: 22px; opacity: 0.35; }
.balance-bars-graphic .bar-3 { height: 30px; opacity: 0.45; }
.balance-bars-graphic .bar-4 { height: 38px; opacity: 0.6; }
.balance-bars-graphic .bar-5 { height: 46px; opacity: 0.75; }
.balance-bars-graphic .bar-6 { height: 53px; opacity: 0.9; }
.balance-bars-graphic .bar-7 { height: 60px; opacity: 1; }

.balance-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.balance-header-row .section-label {
    margin: 0;
}

.page-header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-header-title-row h1 {
    margin: 0;
}

.balance-privacy-btn {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.balance-privacy-btn svg {
    pointer-events: none;
    flex-shrink: 0;
}

.balance-privacy-btn:hover {
    color: var(--purple);
    background: rgba(116, 70, 189, 0.08);
}

.balance-privacy-btn:active {
    transform: scale(0.92);
}


.balance-number {

    margin-top: 4px;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 50px;

    font-weight: 800;

    letter-spacing: -.04em;

    line-height: 1.1;

    font-variant-numeric: tabular-nums;
}


.balance-description {

    margin:
        5px
        0
        0;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================
   STATS
========================================= */

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-bottom: 14px;
}


.stat-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 20px;

    padding:
        24px;

    box-shadow: var(--shadow);
}


.stat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #908b94;

    font-size: 11px;

    letter-spacing: .1em;
}


.stat-card strong {

    display: block;

    margin-top: 14px;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 26px;

    font-weight: 800;

    letter-spacing: -.03em;

    font-variant-numeric: tabular-nums;
}


.stat-card small {

    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}


.stat-indicator {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    border-radius: 50%;

    font-size: 14px;
}


.stat-indicator.income {

    background: var(--green-soft);

    color: var(--green);
}


.stat-indicator.expense {

    background: var(--red-soft);

    color: var(--red);
}


.stat-indicator.result {

    background: var(--purple-soft);

    color: var(--purple);
}


.neutral {

    color: var(--text);
}


/* =========================================
   CARDS
========================================= */

.card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 27px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    min-width: 0;
}


.card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.card-header h2 {

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: -.02em;
}


.card-header select {

    border:
        1px solid var(--border);

    background: white;

    border-radius: 9px;

    padding:
        7px
        10px;

    color: var(--muted);

    font-size: 12px;
}

/* Card header layout */
.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.chart-card-header h2 {
    line-height: 1.15;
}

.chart-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

/* Month Switcher: < Setiembre 2026 > */
.chart-month-switcher {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.chart-nav-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    background: #f8fafc;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.chart-nav-btn:hover {
    background: #ede9fe;
    color: #6e35eb;
    border-color: #ddd6fe;
}

.chart-nav-btn:active {
    transform: scale(0.92);
}

.chart-month-switcher strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    min-width: 120px;
    text-align: center;
    letter-spacing: -0.01em;
}

/* Period Dropdown: Mes ⌄ */
.chart-period-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 140px;
    max-width: 170px;
}

.chart-period-pill select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px 32px 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chart-period-pill select:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

.chart-period-chevron {
    position: absolute;
    right: 12px;
    pointer-events: none;
    color: #475569;
}

/* Chart Canvas & SVG */
.chart-content {
    min-height: 230px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.chart-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-grid-line {
    stroke: #f1edfa;
    stroke-dasharray: 4 4;
    stroke-width: 1.2;
}

.chart-axis-v-line {
    stroke: #cbd5e1;
    stroke-width: 1.2;
}

.chart-axis-label-y {
    fill: #94a3b8;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.chart-axis-label-x {
    fill: #94a3b8;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
}

.chart-bar {
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}

.chart-bar:hover {
    filter: brightness(1.12);
}

.chart-svg.has-selection .chart-bar:not(.is-selected) {
    opacity: 0.35;
    filter: grayscale(0.2);
}

.chart-bar.is-selected {
    opacity: 1 !important;
    filter: drop-shadow(0 2px 7px rgba(124, 58, 237, 0.45));
}

.chart-hitbox {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.chart-hitbox:hover ~ .chart-bar:not(.is-selected) {
    opacity: 0.92;
    filter: brightness(1.1);
}

.chart-hitbox:hover ~ .chart-axis-label-x:not(.is-selected) {
    fill: #7c3aed;
    font-weight: 700;
}

.chart-custom-range {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 9px;
    margin: -8px 0 16px;
}

.chart-custom-range label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
}

.chart-custom-range input {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--text);
}

/* =========================================
   MODAL DETALLE DIARIO DE EVOLUCIÓN
========================================= */

.modal.chart-day-modal {
    width: min(100%, 460px);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 24px 70px rgba(116, 70, 189, 0.16);
    border: 1px solid #f1edfa;
}

.chart-day-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.chart-day-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chart-day-nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.chart-day-nav-arrow:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.chart-day-nav-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f8fafc;
}

.chart-day-modal-date-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chart-day-modal-weekday {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.chart-day-modal-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hero Box del Día */
.chart-day-hero-box {
    background: linear-gradient(135deg, #fbf9ff 0%, #f5effe 100%);
    border: 1px solid #ede5fc;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.chart-day-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.chart-day-hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #7c3aed;
    text-transform: uppercase;
}

.chart-day-hero-amount {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Badges contextuales */
.chart-day-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    white-space: nowrap;
}

.chart-day-badge svg {
    display: block;
    flex-shrink: 0;
}

.chart-day-badge.peak {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fee2e2;
}

.chart-day-badge.zero {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #d1fae5;
}

.chart-day-badge.above {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #ffedd5;
}

.chart-day-badge.below {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #dcfce7;
}

/* Transacciones */
.chart-day-tx-section {
    display: flex;
    flex-direction: column;
}

.chart-day-tx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.chart-day-tx-count {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chart-day-tx-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.chart-day-tx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.chart-day-tx-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.chart-day-tx-cat-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 2.5px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-day-tx-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-day-tx-val {
    font-size: 13.5px;
    font-weight: 700;
    color: #ef4444;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.chart-day-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
}

.chart-day-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ecfdf5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.chart-day-empty-state strong {
    font-size: 13.5px;
    color: #0f172a;
    margin-bottom: 4px;
}

.chart-day-empty-state p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
}

/* Summary Footer */
.chart-summary-container {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 22px;
    margin-top: 18px;
    border-top: 1px solid #f1edfa;
}

.chart-summary-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.chart-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chart-summary-amount {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.chart-summary-divider {
    width: 1px;
    height: 44px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.chart-summary-peak-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chart-peak-badge {
    font-size: 12px;
    font-weight: 700;
    color: #7c3aed;
    background: #f3e8ff;
    padding: 4px 11px;
    border-radius: 9999px;
    line-height: 1.2;
    white-space: nowrap;
}

.chart-label-long {
    display: inline;
}

.chart-summary-sub {
    display: none;
}

@media (max-width: 600px) {
    .chart-label-long {
        display: none;
    }

    .chart-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .chart-controls {
        align-items: stretch;
        width: 100%;
    }

    .chart-month-switcher {
        justify-content: space-between;
        width: 100%;
    }

    .chart-period-pill {
        max-width: 100%;
        width: 100%;
    }

    .chart-custom-range {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .chart-summary-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 4px;
        padding: 12px 6px;
        margin-top: 14px;
        background: #f8fafc;
        border-radius: 14px;
        border: 1px solid #f1f5f9;
    }

    .chart-summary-divider {
        display: none;
    }

    .chart-summary-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        min-width: 0;
    }

    .chart-summary-label {
        font-size: 9.5px;
        font-weight: 700;
        color: #64748b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
        height: 14px;
        line-height: 14px;
    }

    .chart-summary-amount {
        font-size: clamp(12px, 3.3vw, 13.5px);
        font-weight: 800;
        line-height: 1.15;
        white-space: nowrap;
        font-family: inherit;
        font-variant-numeric: tabular-nums;
        height: 16px;
    }

    .chart-summary-peak-row {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: center;
        min-width: 0;
        width: 100%;
    }

    .chart-summary-sub {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 9.5px;
        font-weight: 600;
        color: #64748b;
        background: #edf2f7;
        padding: 2px 7px;
        border-radius: 9999px;
        line-height: 1.2;
        height: 18px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .chart-peak-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 9.5px;
        font-weight: 700;
        color: #7c3aed;
        background: #f3e8ff;
        padding: 2px 7px;
        border-radius: 9999px;
        line-height: 1.2;
        height: 18px;
        box-sizing: border-box;
        white-space: nowrap;
    }

    .modal.chart-day-modal {
        padding: 20px 18px;
        border-radius: 20px;
    }

    .chart-day-modal-title {
        font-size: 14.5px;
    }

    .chart-day-hero-amount {
        font-size: 24px;
    }
}


/* =========================================
   EMPTY CHART
========================================= */

.chart-empty {

    min-height: 220px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--muted);
}


.chart-empty strong {

    color: var(--text);

    font-size: 13px;

    margin-top: 4px;
}


.chart-empty span {

    max-width: 350px;

    margin-top: 5px;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================
   DASHBOARD GRID
========================================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 14px;
}


/* =========================================
   RESUMEN EJECUTIVO (OVERVIEW CARDS)
========================================= */

.home-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0;
}

.overview-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 148px;
    box-sizing: border-box;
    min-width: 0;
}

.overview-card.wide {
    grid-column: span 2;
}

.overview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.overview-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #10b981;
    background: #ecfdf5;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    text-transform: uppercase;
}

.overview-tag.tag-purple {
    color: #7446bd;
    background: #f3e8ff;
}

.overview-amount {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 4px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.overview-amount.text-green {
    color: #10b981;
}

.overview-amount.text-purple {
    color: #7446bd;
}

.overview-amount.text-danger {
    color: #ef4444;
}

.overview-hint {
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 10px;
    line-height: 1.4;
}

.overview-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: #7446bd;
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.15s ease, color 0.15s ease;
    width: fit-content;
    -webkit-tap-highlight-color: transparent;
}

.overview-action-btn:hover {
    color: #581c87;
    gap: 7px;
}

/* Gastos fijos del mes card */
.overview-card.fixed-month-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 148px;
}

.fixed-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    cursor: pointer;
}

.fixed-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fixed-card-icon {
    color: #7446bd;
    display: flex;
    align-items: center;
}

.fixed-card-header .section-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #85808a;
    letter-spacing: 0.08em;
    margin: 0;
}

.fixed-card-arrow {
    font-size: 18px;
    color: #85808a;
    font-weight: 600;
    transition: transform 0.15s ease, color 0.15s ease;
}

.fixed-card-header:hover .fixed-card-arrow {
    transform: translateX(3px);
    color: #7446bd;
}

.fixed-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fixed-card-top-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fixed-donut-container {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    max-width: 52px;
    max-height: 52px;
    flex-shrink: 0;
    position: relative;
}

.fixed-donut {
    width: 52px;
    height: 52px;
    display: block;
}

.donut-percent {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 8px;
    font-weight: 800;
    fill: #1e1e24;
    text-anchor: middle;
    dominant-baseline: central;
}

.fixed-amounts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fixed-amounts strong {
    font-size: 17px;
    font-weight: 800;
    color: #1e1e24;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.fixed-amounts span {
    font-size: 11.5px;
    color: #85808a;
    margin-top: 2px;
}

.fixed-categories-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
    border-top: 1px solid #f0edf5;
    padding-top: 10px;
}

.fixed-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    min-width: 0;
}

.fixed-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fixed-cat-name {
    color: #4b4654;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.fixed-cat-pct {
    color: #7446bd;
    font-weight: 700;
    flex-shrink: 0;
}

/* Peak cards */
.overview-card.peak .section-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #85808a;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.overview-card.peak h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.overview-card.peak strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.overview-card.peak p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .home-overview { grid-template-columns: repeat(2, 1fr); }
    .overview-card.wide { grid-column: span 2; }
}


/* =========================================
   CATEGORY EMPTY
========================================= */

.category-empty {

    min-height: 215px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--muted);
}


.category-empty strong {

    color: var(--text);

    font-size: 13px;

    margin-top: 4px;
}


.category-empty span {

    max-width: 330px;

    margin-top: 5px;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================
   EMPTY CIRCLE
========================================= */

.empty-circle {

    width: 52px;

    height: 52px;

    border-radius: 16px;

    background: var(--surface-soft);

    color: #8c8790;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-bottom: 10px;
}


/* =========================================
   MOVEMENTS
========================================= */

.link-button {
    border: 0;
    background: transparent;
    color: var(--purple);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.link-button:hover {
    background: var(--purple-soft);
    opacity: 0.9;
}

.movement-list {
    width: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.recent-movements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

@media (max-width: 720px) {
    .recent-movements-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.recent-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
}

.recent-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.recent-column-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.recent-column-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recent-column-dot.expense {
    background: var(--red);
}

.recent-column-dot.income {
    background: var(--green);
}

.recent-column-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.recent-column-count {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.recent-column-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

.recent-column-list .movement-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    min-width: 0;
}

.recent-column-list .movement-row:last-child {
    border-bottom: none;
    padding-bottom: 2px;
}

.recent-column-list .movement-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.recent-column-list .movement-icon-container {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.recent-column-list .movement-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 13px;
    flex-shrink: 0;
}

.recent-column-list .movement-icon svg {
    width: 15px;
    height: 15px;
}

.recent-column-list .movement-type-indicator {
    width: 13px;
    height: 13px;
    bottom: -2px;
    right: -2px;
}

.recent-column-list .movement-type-indicator svg {
    width: 7px;
    height: 7px;
}

.recent-column-list .movement-info > div {
    min-width: 0;
    flex: 1;
}

.recent-column-list .movement-info strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.recent-column-list .movement-info span {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.recent-column-list .movement-right {
    text-align: right;
    flex-shrink: 0;
}

.recent-column-list .movement-right > strong {
    font-size: 13px;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.recent-empty-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 12px;
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
}


.empty-state {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--muted);
}


.empty-state strong {

    color: var(--text);

    font-size: 13px;
}


.empty-state h2 {

    margin:
        8px
        0
        0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 20px;

    font-weight: 700;
}


.empty-state p {

    margin:
        7px
        0
        18px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   INSIGHT
========================================= */

.insight {

    display: flex;

    gap: 15px;

    align-items: flex-start;

    background: var(--purple-soft);

    border:
        1px solid #e4d9f5;

    border-radius: 20px;

    padding: 24px;

    margin-top: 14px;
}


.insight-icon {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    background: white;

    color: var(--purple);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.insight h3 {

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 17px;

    font-weight: 700;
}


.insight p:last-child {

    margin:
        6px
        0
        0;

    color: #777084;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================
   BUTTONS
========================================= */

.primary-button {

    border: 0;

    background: var(--purple);

    color: white;

    border-radius: 12px;

    padding:
        12px
        17px;

    font-size: 13px;

    font-weight: 600;

    box-shadow:
        0 5px 14px rgba(116,70,189,.18);

    transition: .2s ease;
}


.primary-button:hover {

    transform: translateY(-1px);

    background: #683daf;
}


.cancel-button {

    border: 0;

    background: var(--surface-soft);

    color: var(--text);

    border-radius: 11px;

    padding:
        11px
        15px;

    font-size: 12px;
}


/* =========================================
   TOOLBAR
========================================= */

.toolbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-bottom: 16px;
}

.movement-period-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    color: var(--text);
    padding: 9px 38px 9px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.movement-period-filter:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(116, 70, 189, 0.08);
}

.movement-period-filter::-ms-expand {
    display: none;
}

.feature-page {
    display: grid;
    gap: 18px;
}

.feature-form, .feature-list, .goal-card, .settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
}

.feature-form { display: grid; gap: 14px; }
.feature-form-grid, .fixed-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-form label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.feature-form input, .feature-form select, .settings-panel select, .settings-panel textarea { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface); }
.settings-panel textarea { resize: vertical; font: inherit; line-height: 1.45; }
.settings-panel small { color: var(--muted); font-weight: 400; }
.feature-list { display: grid; gap: 10px; }
.feature-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.feature-row:last-child { border-bottom: 0; }
.feature-row span, .goal-card small { color: var(--muted); display: block; margin-top: 4px; }
.feature-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.compact-button { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); padding: 8px 10px; }
.compact-button.done { background: var(--green-soft); color: var(--green); border-color: transparent; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.goal-progress { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); margin: 14px 0 10px; }
.goal-progress > div { height: 100%; background: var(--purple); border-radius: inherit; }
.settings-panel { max-width: 600px; display: grid; gap: 16px; }
.settings-panel label { display: grid; gap: 8px; font-weight: 600; }
.feature-empty { color: var(--muted); text-align: center; padding: 24px; }

.fixed-coverage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--purple-soft);
}

.fixed-coverage.covered { background: var(--green-soft); }
.fixed-coverage.shortfall { background: var(--red-soft); }
.fixed-coverage p { margin: 4px 0 0; color: var(--muted); }
.fixed-coverage strong { font-size: 24px; }
.fixed-coverage.covered strong { color: var(--green); }
.fixed-coverage.shortfall strong { color: var(--red); }

@media (max-width: 700px) {
    .feature-form-grid, .fixed-summary { grid-template-columns: 1fr; }
    .feature-row { align-items: flex-start; flex-direction: column; }
    .fixed-coverage { align-items: flex-start; flex-direction: column; }
}

/* =========================================
   ALERTAS Y NOTIFICACIONES DE PAGO
========================================= */

/* ========================================================
   NOTIFICATION CARD / ALERTA DE COMPROMISOS (media_1790393022891.png)
   ======================================================== */

.notification-card {
    background: #ffffff;
    border: 1.5px solid #ffe4e6;
    border-left: 6px solid #ef3852;
    border-radius: 22px;
    padding: 24px 28px 24px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.notification-card-today {
    border-color: #ffe4e6;
    border-left-color: #ef3852;
}

.notification-card-overdue {
    border-color: #fed7aa;
    border-left-color: #f97316;
}

.notification-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.notification-close-btn:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.05);
}

.notification-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.notification-icon-box {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    background: #fff0f3;
    color: #ef3852;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-card-overdue .notification-icon-box {
    background: #fff7ed;
    color: #f97316;
}

.notification-main-content {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}

.notification-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: #ef3852;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
}

.notification-card-overdue .notification-tag {
    color: #ea580c;
}

.notification-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin: 4px 0 0 0;
    word-break: break-word;
}

.notification-lead {
    font-size: 14.5px;
    font-weight: 500;
    color: #64748b;
    margin: 14px 0 8px 0;
    line-height: 1.4;
}

.notification-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.notification-item-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 15px;
    line-height: 1.45;
}

.notification-bullet {
    color: #ef3852;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.notification-card-overdue .notification-bullet {
    color: #f97316;
}

.notification-item-text {
    color: #0f172a;
}

.notification-item-text strong {
    font-weight: 700;
    color: #0f172a;
}

.notification-item-amount {
    font-weight: 500;
    color: #64748b;
    margin-left: 4px;
}

.notification-actions {
    display: flex;
    align-items: center;
}

.notification-action-btn {
    background: #fff0f3;
    color: #ef3852;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.notification-card-overdue .notification-action-btn {
    background: #fff7ed;
    color: #ea580c;
}

.notification-action-btn:hover {
    background: #ffe4e8;
    color: #e11d48;
}

.notification-card-overdue .notification-action-btn:hover {
    background: #ffedd5;
    color: #c2410c;
}

.notification-action-btn:active {
    transform: scale(0.98);
}

@media (max-width: 600px) {
    .notification-card {
        padding: 18px 16px 18px 14px;
        border-radius: 18px;
        border-left-width: 5px;
        margin-bottom: 18px;
    }

    .notification-inner {
        gap: 12px;
    }

    .notification-title {
        font-size: 20px;
    }

    .notification-icon-box {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
    }

    .notification-main-content {
        padding-right: 14px;
    }

    .notification-item-row {
        font-size: 14px;
    }

    .notification-action-btn {
        width: 100%;
        justify-content: center;
        padding: 11px 16px;
        font-size: 14px;
    }
}

/* =========================================
   BADGES DE ESTADO Y SUBTEXTOS
========================================= */

.feature-info-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.feature-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-today {
    background: #fdf2f2;
    color: #c9353f;
    border: 1px solid #f9d8d8;
    font-weight: 600;
}

.badge-upcoming {
    background: var(--surface-soft);
    color: var(--muted);
    border: 1px solid transparent;
}

.badge-overdue {
    background: #fdf6ec;
    color: #a16207;
    border: 1px solid #f6e3c6;
    font-weight: 500;
}

.badge-paid {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid transparent;
}

.badge-pending {
    background: var(--surface-soft);
    color: var(--muted);
    border: 1px solid transparent;
}

.row-due-today {
    border-left: 2px solid var(--red);
    padding-left: 12px !important;
}

.compact-button.delete {
    color: var(--muted);
}

.compact-button.delete:hover {
    color: var(--red);
    border-color: var(--red);
}

/* =========================================
   CHIPS DE CLIENTES FRECUENTES
========================================= */

.client-quick-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface-soft);
    border-radius: 12px;
    margin-top: -4px;
    margin-bottom: 4px;
}

.chips-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.chips-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.client-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.client-chip:hover {
    background: var(--purple-soft);
    color: var(--purple);
    border-color: var(--purple);
    transform: translateY(-1px);
}


.search {

    display: flex;

    align-items: center;

    gap: 8px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 11px;

    padding:
        0
        12px;

    width: 320px;
}


.search input {

    width: 100%;

    border: 0;

    outline: 0;

    padding:
        11px
        0;

    font-size: 12px;
}


.filters {

    display: flex;

    gap: 5px;
}


.filter {

    border:
        1px solid var(--border);

    background: white;

    color: var(--muted);

    border-radius: 9px;

    padding:
        9px
        13px;

    font-size: 11px;
}


.filter.active {

    background: var(--text);

    color: white;

    border-color: var(--text);
}


/* =========================================
   EMPTY PAGE
========================================= */

.empty-page {

    min-height: 370px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;
}


.empty-page h2 {

    margin: 5px 0 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 20px;

    font-weight: 700;
}


.empty-page p {

    max-width: 430px;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    margin:
        7px
        0;
}


/* =========================================
   FIXED SUMMARY
========================================= */

.fixed-summary {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-bottom: 14px;
}


.fixed-summary > div {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 18px;

    padding: 22px;
}


.fixed-summary span {

    display: block;

    color: var(--muted);

    font-size: 11px;
}


.fixed-summary strong {

    display: block;

    margin-top: 12px;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 19px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


/* =========================================
   SETTINGS
========================================= */

.settings-card {

    background: white;

    border:
        1px solid var(--border);

    border-radius: 20px;

    overflow: hidden;
}


.setting {

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        18px
        23px;

    border-bottom:
        1px solid var(--border);
}


.setting:last-child {

    border-bottom: 0;
}


.setting strong {

    display: block;

    font-size: 13px;
}


.setting span {

    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}


.setting button {

    border: 0;

    background: transparent;

    color: var(--purple);

    font-size: 11px;

    font-weight: 600;
}


/* =========================================
   MODAL
========================================= */

.modal-overlay {

    position: fixed;

    inset: 0;

    background: rgba(34,30,36,.4);

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    z-index: 100001;
}


.modal-overlay.open,
.modal-overlay.active {

    display: flex;
}


.modal {

    width: min(100%, 520px);

    max-height: 92vh;

    overflow-y: auto;

    background: white;

    border-radius: 22px;

    padding: 29px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.16);
}


.modal-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 23px;
}


.modal-header h2 {

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    font-size: 24px;

    font-weight: 700;
}


.close-button {

    width: 32px;
    height: 32px;

    border: 0;

    border-radius: 50%;

    background: var(--surface-soft);

    color: #77717b;

    font-size: 20px;
}


.type-selector {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 5px;

    padding: 4px;

    background: var(--surface-soft);

    border-radius: 11px;

    margin-bottom: 20px;
}


.type-button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.type-button svg {
    display: block;
    flex-shrink: 0;
}

.type-button.active {
    background: white;
    color: var(--text);
    box-shadow: 0 2px 7px rgba(0,0,0,.05);
}

.type-button.active[data-type="expense"] {
    color: #ef4444;
    box-shadow: 0 2px 7px rgba(239, 68, 68, 0.12);
}

.type-button.active[data-type="income"] {
    color: #10b981;
    box-shadow: 0 2px 7px rgba(16, 185, 129, 0.12);
}


.modal label {

    display: block;

    margin-bottom: 15px;

    color: #57525b;

    font-size: 11px;

    font-weight: 600;
}


.modal input,
.modal select,
.modal textarea {

    display: block;

    width: 100%;

    margin-top: 7px;

    padding:
        11px
        12px;

    border:
        1px solid var(--border);

    border-radius: 10px;

    outline: none;

    color: var(--text);

    background: white;

    font-size: 13px;
}


.modal input:focus,
.modal select:focus,
.modal textarea:focus {

    border-color: var(--purple);

    box-shadow:
        0 0 0 3px var(--purple-soft);
}

.modal select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 36px;
    cursor: pointer;
}

.modal select::-ms-expand {
    display: none;
}


.form-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.amount-input {

    display: flex;

    align-items: center;

    border:
        1px solid var(--border);

    border-radius: 10px;

    margin-top: 7px;

    padding-left: 12px;
}


.amount-input span {

    color: var(--muted);

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 13px;

    font-weight: 600;
}


.amount-input input {

    border: 0;

    box-shadow: none;

    margin-top: 0;
}


.optional {

    float: right;

    color: var(--muted-light);

    font-weight: 400;
}


.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 23px;
}


/* =========================================
   MOBILE HEADER, TABBAR & DRAWER BASE
========================================= */

.mobile-header {
    display: none;
}

.mobile-tabbar,
.mobile-drawer-overlay,
.mobile-quick-actions {
    display: none !important;
}

.mobile-nav {
    display: none;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    :root {
        --sidebar-width: 230px;
    }

    .main {
        padding-left: 30px;
        padding-right: 30px;
    }

}


@media (max-width: 760px) {

    .sidebar {
        display: none !important;
    }

    /* Mobile Header (media_1790376286829.png) */
    .mobile-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 8px;
        background: #ffffff;
        border-bottom: none;
        z-index: 900;
        box-sizing: border-box;
    }

    .mobile-header-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .mobile-header-logo-img {
        height: 34px;
        width: auto;
        max-width: 145px;
        object-fit: contain;
        display: block;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-bell-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #1e1e24;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bell-btn svg {
        width: 22px;
        height: 22px;
        stroke: #1e1e24;
    }

    .bell-dot {
        position: absolute;
        top: 5px;
        right: 7px;
        width: 8px;
        height: 8px;
        background: #7c3aed;
        border-radius: 50%;
        border: 2px solid #ffffff;
    }

    .mobile-user-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .mobile-user-chip {
        display: flex;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .user-chip-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f3e8ff;
        color: #6d28d9;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: -0.2px;
    }

    .user-chip-avatar.sm {
        width: 32px;
        height: 32px;
        font-size: 11.5px;
        flex-shrink: 0;
    }

    .mobile-user-chip svg {
        color: #6b7280;
        stroke: #6b7280;
        transition: transform 0.15s ease;
    }

    .mobile-user-chip[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .mobile-user-dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 220px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
        display: none;
        flex-direction: column;
        padding: 8px;
        z-index: 1000;
    }

    .mobile-user-dropdown.show {
        display: flex;
        animation: fadeInMenu 0.15s ease-out;
    }

    .mobile-user-dropdown-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 8px 10px 8px;
    }

    .mobile-user-dropdown-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }

    .mobile-user-dropdown-info strong {
        font-size: 13.5px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .mobile-user-dropdown-info span {
        font-size: 11.5px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .mobile-user-dropdown-divider {
        height: 1px;
        background: #f1f5f9;
        margin: 4px 0 6px 0;
    }

    .mobile-user-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        text-align: left;
        width: 100%;
        transition: background 0.12s ease, color 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-user-dropdown-item.logout {
        color: #ef4444;
    }

    .mobile-user-dropdown-item.logout svg {
        stroke: #ef4444;
    }

    .mobile-user-dropdown-item.logout:hover,
    .mobile-user-dropdown-item.logout:active {
        background: #fef2f2;
    }

    /* Container & Layout Centering */
    .main {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        padding-top: 6px;
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 10px) + 24px);
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .section {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Stack cards in single column on mobile */
    .dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .dashboard-grid > .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Safari iOS Auto-Zoom Preventer */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Page Header */
    .page-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .page-header .section-label {
        display: none;
    }

    .page-header h1 {
        font-size: 26px;
        font-weight: 800;
        color: #1e1e24;
        margin: 0;
        letter-spacing: -0.5px;
    }

    .page-header .month-label {
        font-size: 13px;
        color: #85808a;
        margin: 2px 0 0;
        font-weight: 500;
    }

    .period-filter-wrap {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
        border: 1px solid #e7e5ec;
        border-radius: 14px;
        padding: 8px 12px;
        box-shadow: 0 1px 3px rgba(25, 15, 45, 0.04);
        cursor: pointer;
    }

    .period-cal-icon {
        flex-shrink: 0;
        color: #4b4654;
        pointer-events: none;
    }

    .period-arrow-icon {
        flex-shrink: 0;
        color: #4b4654;
        pointer-events: none;
    }

    .period-filter-wrap select.period-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font-size: 13.5px !important;
        font-weight: 600;
        color: #1e1e24;
        cursor: pointer;
        outline: none;
        font-family: inherit;
        box-shadow: none;
    }

    /* Balance Hero Card */
    .balance-card {
        background: linear-gradient(135deg, #f8f5fe 0%, #efe8fb 100%);
        border: 1px solid #e2d7f8;
        border-radius: 20px;
        padding: 18px 16px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 16px rgba(116, 70, 189, 0.05);
        box-sizing: border-box;
    }

    .balance-info {
        flex: 1;
        min-width: 0;
    }

    .balance-info .section-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: #7446bd;
        margin: 0 0 4px;
    }

    .balance-number {
        font-size: clamp(24px, 6.2vw, 30px);
        font-weight: 800;
        color: #1e1e24;
        letter-spacing: -0.5px;
        margin: 0 0 4px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .balance-description {
        font-size: 11.5px;
        color: #85808a;
        line-height: 1.35;
        margin: 0;
    }

    .balance-bars-graphic {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 50px;
        flex-shrink: 0;
        margin-left: 12px;
    }

    .balance-bars-graphic .bar {
        width: 5.5px;
        border-radius: 3px;
        background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
    }

    .balance-bars-graphic .bar-1 { height: 12px; opacity: 0.25; }
    .balance-bars-graphic .bar-2 { height: 18px; opacity: 0.35; }
    .balance-bars-graphic .bar-3 { height: 24px; opacity: 0.45; }
    .balance-bars-graphic .bar-4 { height: 32px; opacity: 0.6; }
    .balance-bars-graphic .bar-5 { height: 40px; opacity: 0.75; }
    .balance-bars-graphic .bar-6 { height: 45px; opacity: 0.9; }
    .balance-bars-graphic .bar-7 { height: 50px; opacity: 1; }

    /* Botón de Acción Rápida: Nuevo Movimiento */
    .mobile-quick-actions {
        display: block;
        width: 100%;
        margin-bottom: 12px;
    }

    .mobile-quick-add-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, #7446bd 0%, #5d33a6 100%);
        color: #ffffff;
        border: none;
        border-radius: 14px;
        padding: 12px 18px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(116, 70, 189, 0.28);
        transition: transform 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-quick-add-btn:active {
        transform: scale(0.98);
    }

    .quick-add-icon {
        font-size: 18px;
        line-height: 1;
        font-weight: 800;
    }

    /* 2-column stats grid */
    .stats-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .stats-grid .stat-card:nth-child(3) {
        display: none;
    }

    .stat-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #ece9f2;
        padding: 13px 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        box-sizing: border-box;
    }

    .stat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .stat-header span:first-child {
        font-size: 10.5px;
        font-weight: 700;
        color: #85808a;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .stat-indicator.income {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ecfdf5;
        color: #10b981;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }

    .stat-indicator.expense {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fef2f2;
        color: #ef4444;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }

    .stat-card strong {
        font-size: clamp(14px, 3.8vw, 16.5px);
        font-weight: 700;
        color: #1e1e24;
        margin: 3px 0 2px;
        letter-spacing: -0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    .stat-card small {
        font-size: 10.5px;
        color: #9a95a0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Executive cards grid */
    .home-overview {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    .home-overview .overview-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #ece9f2;
        padding: 13px 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 114px;
        box-sizing: border-box;
        min-width: 0;
    }

    .home-overview .overview-card.spendable-card {
        grid-column: span 1 !important;
    }

    .home-overview .overview-card.receivable-card {
        grid-column: span 1 !important;
    }

    .overview-card-header {
        margin-bottom: 4px;
    }

    .overview-tag {
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #10b981;
        background: #ecfdf5;
        padding: 2px 6px;
        border-radius: 5px;
        display: inline-block;
        white-space: nowrap;
    }

    .overview-tag.tag-purple {
        color: #7446bd;
        background: #f3e8ff;
    }

    .overview-amount {
        font-size: clamp(14px, 3.8vw, 16.5px);
        font-weight: 700;
        margin: 3px 0 2px;
        letter-spacing: -0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    .overview-amount.text-green {
        color: #10b981;
    }

    .overview-amount.text-purple {
        color: #7446bd;
    }

    .overview-amount.text-danger {
        color: #ef4444;
    }

    .overview-hint {
        font-size: 10.5px;
        color: #85808a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0 6px;
    }

    .overview-action-btn {
        background: none;
        border: none;
        padding: 0;
        color: #7446bd;
        font-weight: 700;
        font-size: 11px;
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    /* Gastos fijos del mes card */
    .home-overview .overview-card.fixed-month-card {
        grid-column: 1 / -1;
        width: 100%;
        display: block;
        padding: 16px 14px;
        min-height: auto;
        border-radius: 18px;
    }

    .fixed-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        cursor: pointer;
    }

    .fixed-card-title-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .fixed-card-icon {
        color: #7446bd;
        display: flex;
        align-items: center;
    }

    .fixed-card-header .section-label {
        font-size: 11px;
        font-weight: 700;
        color: #85808a;
        letter-spacing: 0.05em;
        margin: 0;
    }

    .fixed-card-arrow {
        font-size: 18px;
        color: #85808a;
        font-weight: 600;
    }

    .fixed-card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .fixed-card-top-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .fixed-donut-container {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .fixed-donut {
        width: 100%;
        height: 100%;
    }

    .donut-percent {
        font-family: "DM Sans", -apple-system, sans-serif;
        font-size: 8px;
        font-weight: 800;
        fill: #1e1e24;
        text-anchor: middle;
    }

    .fixed-amounts {
        display: flex;
        flex-direction: column;
    }

    .fixed-amounts strong {
        font-size: 15.5px;
        font-weight: 700;
        color: #1e1e24;
        font-variant-numeric: tabular-nums;
    }

    .fixed-amounts span {
        font-size: 11px;
        color: #85808a;
    }

    .fixed-categories-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 10px;
        border-top: 1px solid #f0edf5;
        padding-top: 10px;
        border-left: none;
        padding-left: 0;
    }

    .fixed-cat-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        min-width: 0;
    }

    .fixed-cat-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .fixed-cat-name {
        color: #4b4654;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    .fixed-cat-pct {
        color: #7446bd;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Ocultar picos históricos en móvil para mantener vista ejecutiva limpia */
    .overview-card.peak {
        display: none;
    }

    /* =========================================
       BARRA DE NAVEGACIÓN INFERIOR MÓVIL (TABBAR)
    ========================================= */
    .mobile-tabbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 6px env(safe-area-inset-bottom, 0px) !important;
        background: #ffffff !important;
        border-top: 1px solid #ebe7f2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        z-index: 99999 !important;
        box-shadow: 0 -4px 24px rgba(20, 10, 40, 0.06) !important;
        box-sizing: border-box !important;
        user-select: none;
    }

    .tab-item {
        background: transparent;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #85808a;
        cursor: pointer;
        padding: 6px 12px;
        border-radius: 14px;
        transition: all 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 58px;
        box-sizing: border-box;
    }

    .tab-item:active {
        opacity: 0.75;
    }

    .tab-item.active {
        background: #f4eefd;
        color: #6e35eb;
    }

    .tab-item.active .tab-icon {
        color: #6e35eb;
        stroke: #6e35eb;
    }

    .tab-item.active .tab-label {
        color: #6e35eb;
        font-weight: 700;
    }

    .tab-icon {
        color: #85808a;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.15s ease, stroke 0.15s ease;
    }

    .tab-label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.2px;
        color: inherit;
        line-height: 1.2;
    }

    /* Botón central elevado con cúpula arqueada */
    .tab-center-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 100%;
        padding-bottom: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
    }

    .tab-dome-svg {
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 22px;
        pointer-events: none;
        z-index: 1;
        filter: drop-shadow(0 -3px 3px rgba(25, 15, 45, 0.04));
    }

    .tab-add-btn {
        position: relative;
        z-index: 2;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #6e35eb;
        color: #ffffff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: -20px;
        margin-bottom: 0;
        box-shadow: 0 6px 18px rgba(110, 53, 235, 0.38);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
        flex-shrink: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .tab-center-wrap:active .tab-add-btn,
    .tab-add-btn:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(110, 53, 235, 0.3);
    }

    .drawer-arrow {
        font-size: 18px;
        color: #a39eb0;
        font-weight: 600;
        margin-left: auto;
    }

    /* Mobile Drawer */
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        z-index: 100000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .mobile-drawer-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-drawer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        border-radius: 24px 24px 0 0;
        padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 12px));
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
    }

    .mobile-drawer-overlay.active .mobile-drawer {
        transform: translateY(0);
    }

    .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .drawer-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #1e1e24;
    }

    .drawer-close {
        background: #f4f1fa;
        border: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
        color: #4b4654;
    }

    .drawer-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .drawer-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        border-radius: 14px;
        background: #f9f8fc;
        border: 1px solid #ece9f2;
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .drawer-item:hover {
        background: #f1edfa;
        border-color: #7446bd;
    }

    .drawer-item.logout {
        background: #fef2f2;
        border-color: #fee2e2;
        margin-top: 6px;
    }

    .drawer-item.logout strong {
        color: #ef4444;
    }

    .drawer-icon {
        font-size: 20px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .drawer-item-text {
        display: flex;
        flex-direction: column;
    }

    .drawer-item-text strong {
        font-size: 14px;
        font-weight: 700;
        color: #1e1e24;
    }

    .drawer-item-text span {
        font-size: 11px;
        color: #85808a;
    }

    /* Toolbar & Filters */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .search {
        width: 100%;
    }

    .filters {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .filter {
        flex: 1;
        min-width: 0;
    }

    .fixed-summary {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .card {

        padding: 20px;
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }


    .modal {

        padding: 22px;
    }

}
/* =========================================
   MOVIMIENTOS DINÁMICOS
========================================= */

.movements-table {
    width: 100%;
}


.movement-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        15px
        0;

    border-bottom:
        1px solid var(--border);
}


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


.movement-info {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.movement-icon-container {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.movement-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.15s ease;
    border: 1px solid transparent;
}

.movement-icon-container .movement-icon {
    width: 100%;
    height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.movement-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.movement-type-indicator {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.movement-type-indicator.income {
    background: #ecfdf5;
    border: 1.5px solid #ffffff;
}

.movement-type-indicator.expense {
    background: #fef2f2;
    border: 1.5px solid #ffffff;
}

.movement-details {
    min-width: 0;
    flex: 1;
}

.movement-desc {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.movement-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.3;
}

.movement-meta-cat {
    color: var(--text-secondary, #475569);
    font-weight: 500;
    white-space: nowrap;
}

.movement-meta-method {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f1f5f9;
    color: #475569;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.movement-meta-method svg {
    display: block;
}

.movement-meta-dot {
    color: #cbd5e1;
    font-weight: 700;
    user-select: none;
}

.movement-meta-date {
    color: var(--muted, #64748b);
    white-space: nowrap;
}

.movement-income {
    color: var(--green);
}

.movement-expense {
    color: var(--red);
}

.movement-expense.is-tc {
    color: #7c3aed !important;
}

.movement-icon.movement-income {
    background: #ecfdf5;
    color: #10b981;
    border-color: #d1fae5;
}

.movement-icon.movement-expense {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fee2e2;
}

.movement-icon.movement-expense.movement-tc {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ede9fe;
}

.movement-tc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 6px;
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.recent-feed-expense.is-tc {
    color: #7c3aed !important;
}

.movement-info strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movement-info span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}


.movement-right {

    text-align: right;

    flex-shrink: 0;
}


.movement-right > strong {

    display: block;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 13.5px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


.movement-actions {

    display: flex;

    justify-content: flex-end;

    gap: 8px;

    margin-top: 5px;
}


.movement-actions button {

    border: 0;

    background: transparent;

    color: var(--muted);

    padding: 0;

    font-size: 10px;
}


.movement-actions button:hover {

    color: var(--purple);
}


.positive {
    color: var(--green) !important;
}


.negative {
    color: var(--red) !important;
}


.category-list {

    width: 100%;
}


.category-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        11px
        0;

    border-bottom:
        1px solid var(--border);
}


.category-row:last-child {
    border-bottom: 0;
}


.category-row div {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.category-row div strong {

    font-size: 12px;
}


.category-row div span {

    color: var(--muted);

    font-size: 10px;
}


.category-row > strong {

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


@media (max-width: 600px) {

    .movement-row {

        align-items: flex-start;

    }


    .movement-info {

        min-width: 0;

    }


    .movement-info > div:last-child {

        min-width: 0;

    }


    .movement-right > strong {

        font-size: 11px;

    }

}


/* =========================================
   DEUDAS Y PRÉSTAMOS EN CUOTAS
========================================= */

.badge-installment {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--purple-soft, rgba(124, 58, 237, 0.08));
    color: var(--purple, #7c3aed);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.badge-installment.completed {
    background: var(--green-soft, rgba(16, 185, 129, 0.1));
    color: var(--green, #10b981);
}

.installment-remain-text {
    color: var(--purple, #7c3aed);
    font-weight: 500;
}

.installment-remain-text.completed {
    color: var(--green, #10b981);
    font-weight: 600;
}

.installment-progress-track {
    width: 100%;
    max-width: 260px;
    height: 4px;
    background: var(--border, #e5e5eb);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

.installment-progress-fill {
    height: 100%;
    background: var(--purple, #7c3aed);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.installment-progress-fill.completed {
    background: var(--green, #10b981);
}

.installment-toggle-container {
    margin: 12px 0 16px;
    padding: 14px 16px;
    background: var(--surface-soft, #fafafc);
    border: 1px dashed var(--border, #e5e5eb);
    border-radius: 12px;
}

.installment-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #111);
    user-select: none;
}

.installment-toggle-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--purple, #7c3aed);
    cursor: pointer;
}

.installment-fields-box {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #e5e5eb);
}

.installment-hint {
    margin: 8px 0 0;
    font-size: 11.5px;
    color: var(--muted, #666);
    line-height: 1.4;
}

.installment-hint strong {
    color: var(--purple, #7c3aed);
}

.stat-card-installments strong {
    color: var(--purple, #7c3aed);
}

.stat-card-subtext {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted, #666);
}

.compact-button.edit {
    border: 1px solid var(--border, #e5e5eb);
    background: transparent;
    color: var(--text, #111);
}

.compact-button.edit:hover {
    background: var(--surface-soft, #fafafc);
    border-color: var(--purple, #7c3aed);
    color: var(--purple, #7c3aed);
}

/* ========================================================
   DISEÑO MÓVIL PULIDO: CATEGORÍAS & MOVIMIENTOS RECIENTES
   (media_1790360824030.png)
   ======================================================== */

/* Categorías limpias ("¿En qué se fue?") */
.category-card-header {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.header-chevron {
    font-size: 22px;
    font-weight: 400;
    color: #a39eb0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.category-clean-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.category-clean-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 12px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.category-clean-row:active {
    background-color: var(--surface-soft, rgba(0, 0, 0, 0.03));
}

.category-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.category-name-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1e1e24);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-amount-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text, #1e1e24);
    font-feature-settings: "tnum";
    white-space: nowrap;
}

.category-bar-track {
    width: 100%;
    height: 6px;
    background: #f1edfa;
    border-radius: 999px;
    overflow: hidden;
}

.category-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.category-stat-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    flex-shrink: 0;
}

.category-pct-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #85808a);
    min-width: 32px;
    text-align: right;
}

.category-chevron {
    font-size: 18px;
    font-weight: 600;
    color: #c4c0cb;
    line-height: 1;
}

/* Movimientos recientes - Móvil vs Desktop */
.card-header.mobile-recent-header,
.mobile-recent-header {
    display: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mobile-recent-feed {
    display: none;
    flex-direction: column;
    width: 100%;
}

.recent-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.recent-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.recent-feed-item:active {
    background: #f7f5fb;
}

.recent-feed-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recent-feed-badge.badge-income {
    background: #ecfdf5;
}

.recent-feed-badge.badge-expense {
    background: #fef2f2;
}

.recent-feed-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recent-feed-desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1e1e24);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-feed-meta {
    font-size: 12px;
    color: var(--muted, #85808a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-feed-amount {
    font-size: 14px;
    font-weight: 700;
    font-feature-settings: "tnum";
    white-space: nowrap;
    text-align: right;
}

.recent-feed-income {
    color: #10b981;
}

.recent-feed-expense {
    color: var(--text, #1e1e24);
}

.recent-feed-view-all-btn {
    width: 100%;
    padding: 13px 18px;
    margin-top: 14px;
    background: #f2eefa;
    color: #6e35eb;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.recent-feed-view-all-btn:active {
    background: #e7e0f7;
    transform: scale(0.99);
}

/* Reglas responsivas para móvil vs desktop */
@media (max-width: 768px) {
    .desktop-movements-header {
        display: none !important;
    }

    .desktop-only-recent {
        display: none !important;
    }

    .card-header.mobile-recent-header,
    .mobile-recent-header {
        display: flex;
    }

    .mobile-recent-feed {
        display: flex;
    }
}

/* =========================================
   SECCIÓN POR COBRAR (media_1790380310812.png)
========================================= */

.cobros-page-container {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.cobros-page-header {
    margin-bottom: 22px;
}

.cobros-page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0 0 6px 0;
}

.cobros-page-header p {
    font-size: 14px;
    color: #7c6fa0;
    margin: 0;
    line-height: 1.4;
}

/* SUMMARY CARDS */
.cobros-summary-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.cobro-summary-card {
    background: #ffffff;
    border: 1px solid #f1f1f5;
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cobro-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.cobro-summary-card:active {
    transform: scale(0.99);
}

.cobro-summary-card.active-filter {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.cobro-hero-card {
    background: #f8f5fe;
    border-color: #ede9fe;
    padding: 20px 22px;
    border-radius: 20px;
}

.cobros-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cobro-card-green {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.cobro-card-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cobro-card-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cobro-summary-label {
    font-size: 11px;
    font-weight: 700;
    color: #7c6fa0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 3px;
    line-height: 1.2;
}

.cobro-card-green .cobro-summary-label {
    color: #64748b;
}

.cobro-summary-amount {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.cobro-summary-subtext {
    font-size: 13px;
    color: #8b7ca6;
    margin-top: 3px;
}

.cobro-summary-count {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
}

.cobro-summary-amount-sm {
    font-size: 21px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cobro-card-arrow {
    font-size: 22px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
    margin-left: 8px;
}

.cobro-card-arrow.green {
    color: #10b981;
}

/* DOCUMENT ICONS WITH s/ */
.cobro-doc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cobro-doc-purple {
    background: #f5f0ff;
    color: #7c3aed;
}

.cobro-doc-gray {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.cobro-doc-green {
    background: #ecfdf5;
    color: #10b981;
}

/* SECTION HEADER */
.cobros-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.cobros-section-header h2 {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
}

.cobros-add-btn {
    background: #6e35eb;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cobros-add-btn:hover {
    background: #5b21b6;
}

.cobros-add-btn:active {
    transform: scale(0.97);
}

.cobros-add-btn .add-plus {
    font-size: 15px;
    line-height: 1;
}

/* LIST OF COBRO ITEMS */
.cobros-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cobro-item-card {
    background: #ffffff;
    border: 1px solid #f1f1f5;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease;
}

.cobro-item-card:hover {
    border-color: #e2e8f0;
}

.cobro-item-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.cobro-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cobro-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
    letter-spacing: -0.01em;
    word-break: break-word;
}

.cobro-item-subtext {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 7px 0;
    font-weight: 500;
    word-break: break-word;
}

.cobro-item-amount {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.cobro-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* BADGES */
.cobro-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.cobro-badge-pending {
    background: #f3e8ff;
    color: #7c3aed;
}

.cobro-badge-upcoming {
    background: #fff7ed;
    color: #ea580c;
}

.cobro-badge-overdue {
    background: #fef2f2;
    color: #ef4444;
}

.cobro-badge-paid {
    background: #ecfdf5;
    color: #10b981;
}

.cobro-badge-clock {
    margin-right: 4px;
}

/* 3-DOTS MENU */
.cobro-menu-wrap {
    position: relative;
    display: inline-block;
}

.cobro-menu-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.cobro-menu-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.cobro-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    min-width: 190px;
    z-index: 100;
    display: none;
    flex-direction: column;
    padding: 6px;
}

.cobro-dropdown-menu.show {
    display: flex;
    animation: fadeInMenu 0.15s ease-out;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cobro-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease, color 0.12s ease;
}

.cobro-dropdown-item:hover {
    background: #f8fafc;
}

.cobro-dropdown-item.primary-action {
    color: #6e35eb;
}

.cobro-dropdown-item.primary-action:hover {
    background: #f5f0ff;
    color: #5b21b6;
}

.cobro-dropdown-item.delete-action {
    color: #ef4444;
}

.cobro-dropdown-item.delete-action:hover {
    background: #fef2f2;
}

.cobro-dropdown-item.disabled {
    color: #94a3b8;
    cursor: default;
}

.cobros-empty-box {
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cobros-empty-icon {
    font-size: 32px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.cobros-empty-box strong {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.cobros-empty-box span {
    font-size: 13px;
    color: #64748b;
    max-width: 320px;
}

@media (max-width: 600px) {
    .cobros-summary-section {
        gap: 10px;
    }

    .cobro-hero-card {
        padding: 18px;
    }

    .cobro-summary-amount {
        font-size: 24px;
    }

    .cobro-summary-count {
        font-size: 22px;
    }

    .cobro-summary-amount-sm {
        font-size: 18px;
    }

    .cobros-subgrid {
        gap: 10px;
    }

    .cobro-item-card {
        padding: 14px 16px;
    }
}

/* ========================================================
   GASTOS FIJOS Y DEUDAS (media_1790390983011.png)
   ======================================================== */

.fijos-page-container {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 90px;
}



/* 2x2 STATS GRID */
.fijos-2x2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.fijos-stat-card {
    background: #ffffff;
    border: 1px solid #f1f1f5;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
}

.fijos-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.fijos-stat-card:active {
    transform: scale(0.99);
}

.fijos-stat-card.active-filter {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.fijo-card-green {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.fijo-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.fijo-card-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fijo-stat-label {
    font-size: 11px;
    font-weight: 700;
    color: #7c6fa0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fijo-card-green .fijo-stat-label {
    color: #64748b;
}

.fijo-stat-amount {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fijo-stat-amount.green {
    color: #10b981;
}

.fijo-stat-amount.orange {
    color: #ea580c;
}

.fijo-stat-subtext {
    font-size: 12px;
    color: #8b7ca6;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fijo-card-arrow {
    font-size: 20px;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1;
    margin-left: 6px;
    flex-shrink: 0;
}

.fijo-card-arrow.green {
    color: #10b981;
}

.fijo-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fijo-icon-purple {
    background: #f5f0ff;
    color: #7c3aed;
}

.fijo-icon-green {
    background: #ecfdf5;
    color: #10b981;
}

.fijo-icon-orange {
    background: #fff7ed;
    color: #ea580c;
}

/* CAPACITY CARD */
.fijos-capacity-card {
    background: #eefbf3;
    border: 1px solid #d1fae5;
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: border-color 0.15s ease;
}

.fijos-capacity-card.shortfall {
    background: #fef2f2;
    border-color: #fee2e2;
}

.fijos-capacity-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fijos-capacity-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #059669;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fijos-capacity-card.shortfall .fijos-capacity-badge {
    color: #dc2626;
}

.fijos-capacity-title {
    font-size: 16.5px;
    font-weight: 800;
    color: #065f46;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.fijos-capacity-card.shortfall .fijos-capacity-title {
    color: #991b1b;
}

.fijos-capacity-subtext {
    font-size: 13px;
    color: #047857;
    margin: 0;
    line-height: 1.35;
}

.fijos-capacity-card.shortfall .fijos-capacity-subtext {
    color: #b91c1c;
}

.fijos-capacity-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.fijos-capacity-amount-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.fijos-capacity-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #059669;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fijos-capacity-card.shortfall .fijos-capacity-label {
    color: #dc2626;
}

.fijos-capacity-amount {
    font-size: 22px;
    font-weight: 800;
    color: #059669;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.fijos-capacity-card.shortfall .fijos-capacity-amount {
    color: #dc2626;
}

.fijos-capacity-arrow {
    font-size: 22px;
    font-weight: 600;
    color: #059669;
    line-height: 1;
}

.fijos-capacity-card.shortfall .fijos-capacity-arrow {
    color: #dc2626;
}

/* LIST OF FIJO ITEMS */
.fijos-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fijo-item-card {
    background: #ffffff;
    border: 1px solid #f1f1f5;
    border-radius: 18px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease;
    position: relative;
}

.fijo-item-card:hover {
    border-color: #e2e8f0;
}

.fijo-item-card.fijo-card-due-accent {
    border-left: 4.5px solid #ef4444;
}

.fijo-item-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.fijo-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f5f0ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fijo-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.fijo-item-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.fijo-item-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
    word-break: break-word;
}

.fijo-item-subtext {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 6px 0;
    font-weight: 500;
    word-break: break-word;
}

.fijo-item-amount {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-top: 4px;
}

.fijo-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.fijo-progress-track {
    width: 100%;
    max-width: 320px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 9999px;
    overflow: hidden;
    margin: 6px 0 4px 0;
}

.fijo-progress-fill {
    height: 100%;
    background: #7c3aed;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.fijo-progress-fill.completed {
    background: #10b981;
}

.fijo-installment-subtext {
    font-size: 12px;
    color: #8b7ca6;
    font-weight: 500;
    margin-bottom: 4px;
    display: inline-block;
}

/* BADGES */
.fijo-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.fijo-badge-paid {
    background: #ecfdf5;
    color: #10b981;
}

.fijo-badge-installment {
    background: #f3e8ff;
    color: #7c3aed;
}

.fijo-badge-installment.completed {
    background: #ecfdf5;
    color: #059669;
}

.fijo-badge-today {
    background: #ffe4e6;
    color: #e11d48;
}

.fijo-badge-overdue {
    background: #fee2e2;
    color: #dc2626;
}

.fijo-badge-upcoming {
    background: #fff7ed;
    color: #ea580c;
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .fijos-2x2-grid {
        gap: 10px;
    }

    .fijos-stat-card {
        padding: 12px 10px;
        border-radius: 16px;
    }

    .fijo-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .fijo-stat-label {
        font-size: 9.5px;
    }

    .fijo-stat-amount {
        font-size: 17px;
    }

    .fijo-stat-subtext {
        font-size: 11px;
    }

    .fijo-card-arrow {
        font-size: 16px;
        margin-left: 3px;
    }

    .fijos-capacity-card {
        padding: 14px 16px;
    }

    .fijos-capacity-title {
        font-size: 15px;
    }

    .fijos-capacity-amount {
        font-size: 19px;
    }

    .fijo-item-card {
        padding: 14px 16px;
    }
}

/* ========================================================
   NOTIFICACIONES: BADGE Y POPOVER DE LA CAMPANITA
   ======================================================== */

.bell-badge-count {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 10px;
    border: 1.5px solid #ffffff;
}

.bell-badge-count.mobile {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0 3px;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

.bell-badge-count.desktop {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* ========================================================
   TOPBAR ESCRITORIO (Campanita y Avatar JA)
   ======================================================== */
.desktop-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 100;
}

@media (max-width: 900px) {
    .desktop-topbar {
        display: none !important;
    }
}

.desktop-topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.desktop-bell-btn {
    position: relative;
    background: transparent;
    border: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e1e24;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, transform 0.15s ease;
}

.desktop-bell-btn:hover {
    background: #f3f0f8;
    color: #7446bd;
}

.desktop-bell-btn svg {
    width: 22px;
    height: 22px;
    stroke: #1e1e24;
}

/* ========================================================
   ESTILOS GLOBALES DE AVATAR (Móvil y Escritorio)
   ======================================================== */
.user-chip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3e8ff;
    color: #6d28d9;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}

.user-chip-avatar.sm {
    width: 32px;
    height: 32px;
    font-size: 11.5px;
    flex-shrink: 0;
}

.desktop-user-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.desktop-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.desktop-user-chip:hover {
    opacity: 0.85;
}

.desktop-user-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.desktop-user-chip svg {
    color: #6b7280;
    stroke: #6b7280;
    transition: transform 0.15s ease;
}

.desktop-user-chip[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.desktop-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    display: none;
    flex-direction: column;
    padding: 8px;
    z-index: 1000;
}

.desktop-user-dropdown.show {
    display: flex;
    animation: fadeInMenu 0.15s ease-out;
}

.desktop-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 10px 8px;
}

.desktop-user-dropdown-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.desktop-user-dropdown-info strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.desktop-user-dropdown-info span {
    font-size: 11.5px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.desktop-user-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0 6px 0;
}

.desktop-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.desktop-user-dropdown-item.logout {
    color: #dc2626;
}

.desktop-user-dropdown-item.logout:hover {
    background: #fef2f2;
}

.desktop-user-dropdown-item svg {
    stroke: currentColor;
    flex-shrink: 0;
}

/* Sección de Correo en Dropdown de Usuario */
.user-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.user-dropdown-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    padding: 2px 10px 4px 10px;
}

.user-dropdown-email-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    margin: 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-dropdown-email-box.connected {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.user-dropdown-email-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-dropdown-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #15803d;
}

.status-dot-green {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.user-dropdown-config-btn {
    background: transparent;
    border: none;
    color: #6d28d9;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.user-dropdown-config-btn:hover {
    background: #ede9fe;
}

.user-dropdown-email-address {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    word-break: break-all;
}

.desktop-user-dropdown-item.email-connect,
.mobile-user-dropdown-item.email-connect {
    color: #4b5563;
    font-weight: 600;
}

.desktop-user-dropdown-item.email-connect:hover,
.mobile-user-dropdown-item.email-connect:hover {
    background: #f3f0f8;
    color: #7446bd;
}

.desktop-user-dropdown-item.sim-link,
.mobile-user-dropdown-item.sim-link {
    font-size: 11.5px;
    color: #94a3b8;
    padding: 4px 10px;
}

.desktop-user-dropdown-item.sim-link:hover,
.mobile-user-dropdown-item.sim-link:hover {
    color: #64748b;
    background: #f8fafc;
}

/* Tarjeta de Notificación de Gasto Bancario Pendiente */
.notif-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #7c3aed;
    margin: 6px 2px 4px 2px;
}

.notif-item-card.pending-review {
    border-color: #ddd6fe;
    background: #faf8ff;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.06);
}

.notif-item-card.pending-review:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.notif-item-tag.pending-tag {
    background: #ede9fe;
    color: #6d28d9;
    font-weight: 700;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.notif-review-action {
    color: #7c3aed;
    font-weight: 700;
    font-size: 11px;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.notif-item-card.pending-review:hover .notif-review-action {
    transform: translateX(2px);
}

.bell-badge-count.has-pending-bank {
    background: #7c3aed !important;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.6) !important;
    animation: bellBadgePulse 2s infinite ease-in-out;
}

@keyframes bellBadgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.notification-popover-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.notification-popover-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.notification-popover {
    position: fixed;
    top: 70px;
    right: 32px;
    width: min(92vw, 390px);
    max-height: 80vh;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid #ebe8e4;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification-popover.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notif-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0eee9;
    background: #faf9f6;
}

.notif-popover-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-popover-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f3e8ff;
    color: #7446bd;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-popover-title-row h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e1e24;
}

.notif-popover-sub {
    font-size: 11.5px;
    color: #85808a;
    display: block;
}

.notif-popover-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: #f0eee9;
    color: #666;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-popover-close:hover {
    background: #e2dfd9;
    color: #111;
}

.notif-popover-body {
    padding: 14px 18px;
    overflow-y: auto;
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-empty-state {
    text-align: center;
    padding: 28px 16px;
    color: #85808a;
}

.notif-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.notif-empty-state strong {
    display: block;
    font-size: 15px;
    color: #1e1e24;
    margin-bottom: 4px;
}

.notif-empty-state p {
    font-size: 12.5px;
    margin: 0;
}

.notif-item-card {
    background: #ffffff;
    border: 1.5px solid #ece9e3;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.notif-item-card.overdue {
    border-color: #fecaca;
    background: #fffafa;
}

.notif-item-card.today {
    border-color: #ddd6fe;
    background: #faf8ff;
}

.notif-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notif-item-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
}

.notif-item-badge.overdue {
    background: #fee2e2;
    color: #dc2626;
}

.notif-item-badge.today {
    background: #ede9fe;
    color: #7446bd;
}

.notif-item-amount {
    font-size: 14px;
    font-weight: 700;
    color: #1e1e24;
}

.notif-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #29262d;
    margin: 0;
}

.notif-item-subtext {
    font-size: 11px;
    color: #85808a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-item-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.notif-pay-action-btn {
    border: none;
    background: #7446bd;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.notif-pay-action-btn:hover {
    opacity: 0.9;
}

.notif-popover-footer {
    padding: 12px 18px;
    background: #faf9f6;
    border-top: 1px solid #f0eee9;
    text-align: center;
}

.notif-popover-action-btn {
    background: none;
    border: none;
    color: #7446bd;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
}

.notif-popover-action-btn:hover {
    text-decoration: underline;
}

@media (max-width: 820px) {
    .notification-popover {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 26px 26px 0 0;
        transform: translateY(100%);
    }

    .notification-popover.active {
        transform: translateY(0);
    }
}

/* ========================================================
   SELECTOR DE TIPO DE COMPROMISO EN MODALES
   ======================================================== */

.commitment-type-legend {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #85808a;
    margin-bottom: 10px;
}

.commitment-type-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.modal label.commitment-type-card,
label.commitment-type-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 1.5px solid #e7e4df !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
    user-select: none;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.modal label.commitment-type-card input[type="radio"],
.commitment-type-card input[type="radio"] {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    accent-color: #7446bd !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.commitment-type-card .type-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.commitment-type-card .type-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #1e1e24;
    line-height: 1.25;
}

.commitment-type-card .type-card-top strong {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.25;
}

.commitment-type-card .type-card-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #f3e8ff;
    color: #7446bd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.commitment-type-card .type-card-icon svg {
    width: 13.5px;
    height: 13.5px;
    stroke: currentColor;
}

.commitment-type-card .type-card-desc {
    display: block;
    font-size: 11.5px;
    color: #85808a;
    line-height: 1.35;
    margin: 0;
}

.modal label.commitment-type-card:hover,
.commitment-type-card:hover {
    border-color: #c4b5fd !important;
    background: #faf8ff !important;
}

.modal label.commitment-type-card.active,
.commitment-type-card.active {
    border-color: #7446bd !important;
    background: #fbf9ff !important;
    box-shadow: 0 4px 14px rgba(116, 70, 189, 0.08) !important;
}

.commitment-type-card.active .type-card-icon {
    background: #7446bd;
    color: #ffffff;
}

.commitment-type-card.active .type-card-top strong {
    color: #52249e;
}

/* PILLS DISTINTIVAS EN GASTOS FIJOS */
.fijo-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.2px;
}

.fijo-type-pill svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.fijo-type-pill.pill-monthly {
    background: #ede9fe;
    color: #52249e;
}

.fijo-type-pill.pill-installments {
    background: #fef3c7;
    color: #92400e;
}

.fijo-type-pill.pill-single {
    background: #fee2e2;
    color: #991b1b;
}

/* ========================================================
   TOAST DE ALERTA RETROACTIVA DE SALDO
   ======================================================== */

.rollover-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-40px);
    background: #ffffff;
    border: 1.5px solid #7446bd;
    border-radius: 18px;
    box-shadow: 0 16px 45px rgba(116, 70, 189, 0.24);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: min(92vw, 440px);
    box-sizing: border-box;
}

.rollover-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.rollover-toast-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.rollover-toast-content {
    flex: 1;
}

.rollover-toast-content strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e1e24;
    margin-bottom: 2px;
}

.rollover-toast-content p {
    margin: 0;
    font-size: 12px;
    color: #55515b;
    line-height: 1.35;
}

.rollover-toast-close {
    background: none;
    border: none;
    color: #948e9b;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rollover-toast-close:hover {
    color: #111;
}

/* ========================================================
   MODERN SETTINGS WITH CHIPS (CONFIGURACIÓN)
   ======================================================== */

.settings-page-container {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.settings-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.settings-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.settings-card-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.settings-card-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.settings-title-with-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-card-title-group h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.settings-card-title-group p {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.settings-count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 9px;
    background: var(--surface-soft);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.settings-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-select-group {
    max-width: 340px;
}

.settings-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 11px 44px 11px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(116, 70, 189, 0.08);
}

.settings-select::-ms-expand {
    display: none;
}

.settings-add-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.settings-add-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.settings-add-input:focus {
    background: var(--surface);
    border-color: var(--purple);
}

.settings-add-btn {
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.settings-add-btn:hover {
    background: var(--purple-soft);
    color: var(--purple);
    border-color: var(--purple);
}

.settings-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 40px;
}

.settings-chips-empty {
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
    padding: 10px 0;
}

.settings-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s, transform 0.1s;
    user-select: none;
}

.settings-chip:hover {
    border-color: #cbd5e1;
}

.settings-chip.is-protected {
    background: var(--surface-soft);
    border-color: var(--border);
}

.settings-chip-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.settings-chip-icon svg {
    width: 14px;
    height: 14px;
}

.settings-chip-icon.payment-icon,
.settings-chip-icon.client-icon {
    background: var(--surface-soft);
    color: var(--muted);
    border: 1px solid var(--border);
}

.settings-chip-label {
    font-weight: 500;
    line-height: 1.2;
}

.settings-chip-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: var(--muted);
    opacity: 0.75;
    margin-left: 2px;
}

.settings-chip-lock svg {
    display: block;
    width: 12px;
    height: 12px;
}

.settings-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.settings-chip-remove:hover {
    background-color: var(--red-soft);
    color: var(--red);
}

.settings-actions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0 40px 0;
    flex-wrap: wrap;
}

.settings-restore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.settings-restore-btn:hover {
    color: var(--text);
    border-color: var(--text);
    background: var(--surface-soft);
}

.settings-save-btn {
    padding: 12px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .settings-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-header-actions {
        display: none;
    }
    .settings-actions-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
    }
    .settings-actions-footer button {
        width: 100%;
        justify-content: center;
    }
    .settings-add-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-add-btn {
        width: 100%;
    }
}


/* ========================================================
   SECCIÓN TARJETAS DE CRÉDITO (Anticipación & Cuotas)
   ======================================================== */

.tarjetas-page-container {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 90px;
}

.tarjetas-page-header {
    margin-bottom: 22px;
}

.tarjetas-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.tarjetas-header-row h1 {
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.tarjetas-page-header p {
    font-size: 14px;
    color: #7c6fa0;
    margin: 0;
    line-height: 1.4;
}

/* Impacto y Compromisos Futuros */
.tarjetas-overview-card {
    background: #ffffff;
    border: 1px solid #f1f0f5;
    border-radius: 20px;
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.tarjetas-impact-badge-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f4f8;
    margin-bottom: 16px;
}

.tarjetas-impact-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #ede9fe;
    color: #7446bd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tarjetas-impact-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.45;
}

.tarjetas-impact-text strong {
    color: #7446bd;
    font-weight: 700;
}

/* Mini Bar Chart de Compromisos Futuros */
.tarjetas-commitments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.tarjetas-commitments-title {
    font-size: 11px;
    font-weight: 700;
    color: #928d97;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tarjetas-commitments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.tarjetas-commitments-col {
    background: #f8f7fb;
    border: 1px solid #f1f0f5;
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.tarjetas-commitments-month {
    font-size: 11px;
    font-weight: 700;
    color: #7446bd;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tarjetas-commitments-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: #1e1e24;
}

.tarjetas-commitments-bar-track {
    width: 100%;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}

.tarjetas-commitments-bar-fill {
    height: 100%;
    background: #7446bd;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* LISTA DE TARJETAS */
.tarjetas-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.credit-card-item {
    background: #ffffff;
    border: 1px solid #eae6f4;
    border-radius: 20px;
    padding: 22px 24px;
    cursor: default;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: visible;
    box-shadow: 0 2px 10px rgba(116, 70, 189, 0.03);
}

.credit-card-item:hover {
    border-color: #d6ceef;
}

.credit-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

/* Menú de 3 puntitos en la tarjeta */
.credit-card-actions-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-dots-btn {
    background: #faf9fd;
    border: 1px solid #ece8f6;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #7c6fa0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.card-dots-btn:hover {
    background: #f2effc;
    color: #632de9;
    border-color: #d8cff8;
}

.card-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #ffffff;
    border: 1px solid #dcd7f5;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(116, 70, 189, 0.16);
    padding: 6px;
    display: none;
    flex-direction: column;
    min-width: 170px;
    z-index: 1000;
}

.card-dropdown-menu.show {
    display: flex;
}

.card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #373347;
    cursor: pointer;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.12s ease, color 0.12s ease;
}

.card-dropdown-item:hover {
    background: #f5f2fe;
    color: #632de9;
}

.card-dropdown-item.danger {
    color: #e11d48;
}

.card-dropdown-item.danger:hover {
    background: #fff1f2;
    color: #be123c;
}

/* Tabs selector de tarjetas */
.card-selector-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.card-tab-pill {
    background: #ffffff;
    border: 1px solid #e5e0f5;
    color: #6b5c90;
    border-radius: 12px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.card-tab-pill.active {
    background: #7446bd;
    color: #ffffff;
    border-color: #7446bd;
    box-shadow: 0 2px 8px rgba(116, 70, 189, 0.2);
}

.card-hero-register-btn {
    width: 100%;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 14px;
    margin: 16px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(116, 70, 189, 0.12);
}

.credit-card-brand-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Logos y Tipografía Bancaria */
.bank-logo-bcp {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.bcp-angle {
    color: #ff6000;
    font-weight: 900;
    font-size: 18px;
}

.bcp-name {
    color: #002a8f;
    font-weight: 900;
}

.bank-logo-generic {
    font-weight: 800;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 6px;
}

.credit-card-name-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #4b5563;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.credit-card-digits {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: #8c839f;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.credit-card-item .header-chevron {
    font-size: 20px;
    color: #9ca3af;
    font-weight: 300;
    line-height: 1;
}

/* Barra de Límite Lineal */
.credit-card-limit-bar {
    width: 100%;
    height: 6px;
    background: #f1effa;
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0 10px 0;
}

.credit-card-limit-bar-fill {
    height: 100%;
    background: #7446bd;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Etiquetas de Saldo y Disponible */
.credit-card-limit-labels {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.credit-card-limit-labels .used-block {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.credit-card-limit-labels .used-val {
    font-size: 15px;
    font-weight: 700;
    color: #1a1622;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.credit-card-limit-labels .used-total {
    font-size: 13px;
    font-weight: 400;
    color: #7c6fa0;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.credit-card-limit-labels .available-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.credit-card-limit-labels .available-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: #8c839f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

.credit-card-limit-labels .available-val {
    font-size: 18px;
    font-weight: 800;
    color: #1a1622;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Próximo Pago y Cobertura (Fila Inferior) */
.credit-card-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 16px;
    border-top: 1px solid #f4f2f8;
    flex-wrap: wrap;
    gap: 12px;
}

.credit-card-next-pay-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.credit-card-calendar-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #f7f5fd;
    color: #7446bd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credit-card-next-pay-block {
    display: flex;
    flex-direction: column;
}

.credit-card-next-pay-label {
    font-size: 11px;
    font-weight: 500;
    color: #8c839f;
    line-height: 1.2;
}

.credit-card-next-pay-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 14.5px;
    font-weight: 700;
    color: #1a1622;
    letter-spacing: -0.01em;
    margin-top: 2px;
}

/* Pastillas de Cobertura */
.coverage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.coverage-pill-ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #d1fae5;
}

.coverage-pill-short {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fee2e2;
}

/* ===================================================
   LÍNEA DE TIEMPO DINÁMICA DEL CICLO (Corte vs Pago)
   =================================================== */
.card-timeline-card {
    background: #ffffff;
    border: 1px solid #ebe8f4;
    border-radius: 18px;
    padding: 18px 20px;
    margin: 18px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.card-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.card-timeline-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #6b5c90;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.card-timeline-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
}

.card-timeline-status-badge.badge-due-near {
    background: #fffbeb;
    color: #92400e;
    border-color: #fef3c7;
}

.card-timeline-status-badge.badge-close-near {
    background: #fff7ed;
    color: #9a3412;
    border-color: #ffedd5;
}

.card-timeline-status-badge.badge-cycle-fresh {
    background: #f0fdf4;
    color: #166534;
    border-color: #dcfce7;
}

.card-timeline-status-badge.badge-standard {
    background: #f7f6fc;
    color: #6b5c90;
    border-color: #ebe7f6;
}

/* Pista de progreso y Marcador 'Hoy' */
.card-timeline-track-wrap {
    position: relative;
    padding: 14px 0 8px 0;
}

.card-timeline-track {
    width: 100%;
    height: 4px;
    background: #f0edf8;
    border-radius: 4px;
    position: relative;
}

.card-timeline-fill {
    height: 100%;
    background: #7446bd;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.card-timeline-today-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.today-marker-pin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7446bd;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(116, 70, 189, 0.3);
}

.today-marker-label {
    position: absolute;
    top: -22px;
    background: #231f2d;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Hitos del Ciclo */
.card-timeline-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    gap: 8px;
}

.timeline-milestone {
    display: flex;
    flex-direction: column;
}

.timeline-milestone:last-child {
    align-items: flex-end;
}

.timeline-milestone.highlight-due {
    align-items: center;
}

.timeline-milestone .milestone-label {
    font-size: 10px;
    font-weight: 600;
    color: #8c839f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.timeline-milestone .milestone-date {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1622;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.timeline-milestone.highlight-due .milestone-date {
    color: #059669;
}

.card-timeline-advice {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f2eff8;
    font-size: 12px;
    line-height: 1.45;
    color: #5a526d;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.card-timeline-advice .advice-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #7446bd;
}

/* ===================================================
   MODAL Y BOTONES DE COMPRA DIRECTA
   =================================================== */
.purchase-mode-pills {
    display: flex;
    gap: 8px;
}

.purchase-mode-pill {
    flex: 1;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #ebe7f5;
    background: #faf9fd;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.purchase-mode-pill.active {
    background: #7446bd;
    color: #ffffff;
    border-color: #7446bd;
}

.purchase-preview-card {
    background: #fbfafc;
    border: 1px solid #ebe7f5;
    border-radius: 14px;
    padding: 13px 15px;
    margin-top: 16px;
    transition: all 0.15s ease;
}

.purchase-preview-card.leveraged {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.purchase-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.purchase-preview-header .preview-tag {
    font-size: 10px;
    font-weight: 700;
    color: #6b5c90;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.purchase-preview-card.leveraged .preview-tag {
    color: #15803d;
}

.purchase-preview-header .preview-amount-val {
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #1a1622;
}

.purchase-preview-body {
    font-size: 12px;
    line-height: 1.45;
    color: #5a526d;
}

/* ===================================================
   LISTADO DE COMPRAS EN DETALLE DE TARJETA
   =================================================== */
.card-purchases-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 14px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.card-purchases-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1622;
    letter-spacing: -0.01em;
}

.card-purchases-filters {
    display: flex;
    gap: 6px;
}

.card-purchase-filter-btn {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid #e7e3f2;
    background: #ffffff;
    color: #6b5c90;
    cursor: pointer;
    transition: all 0.12s ease;
}

.card-purchase-filter-btn:hover {
    background: #f7f6fc;
    border-color: #dcd6f3;
}

.card-purchase-filter-btn.active {
    background: #7446bd;
    color: #ffffff;
    border-color: #7446bd;
}

/* Card Purchase Item (Layout de 2 filas espacioso y minimalista) */
.card-purchase-item {
    background: #ffffff;
    border: 1px solid #ebe8f2;
    border-radius: 16px;
    padding: 15px 18px;
    margin-bottom: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.card-purchase-item:hover {
    border-color: #dcd6f3;
    box-shadow: 0 3px 12px rgba(116, 70, 189, 0.04);
}

.card-purchase-item.is-completed {
    opacity: 0.65;
    background: #fafafc;
}

.card-purchase-main-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

.card-purchase-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.card-purchase-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.card-purchase-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f7f5fd;
    color: #7446bd;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-purchase-desc {
    font-size: 14px;
    font-weight: 700;
    color: #1a1622;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-purchase-amount-wrap {
    text-align: right;
    flex-shrink: 0;
}

.card-purchase-amount-main {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: #1a1622;
    letter-spacing: -0.01em;
}

.card-purchase-amount-main .amount-suffix {
    font-size: 11px;
    font-weight: 400;
    color: #7c6fa0;
    margin-left: 2px;
}

.card-purchase-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.card-purchase-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
}

.card-purchase-badge-plan {
    font-weight: 600;
    color: #632de9;
    background: #f5f2fe;
    padding: 2px 7px;
    border-radius: 6px;
}

.card-purchase-date {
    color: #8c839f;
    font-weight: 500;
}

.card-purchase-billing-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}

.card-purchase-billing-tag.post-close {
    color: #632de9;
    background: #f5f2fe;
}

.card-purchase-total-tag {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #8c839f;
    font-size: 11px;
}

.card-purchase-completed-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #059669;
    font-weight: 600;
}

.card-purchase-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

.purchase-action-btn {
    background: #faf9fd;
    border: 1px solid #ebe7f6;
    color: #6b5c90;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.12s ease;
    line-height: 1;
}

.purchase-action-btn:hover {
    background: #f0edf9;
    color: #632de9;
    border-color: #d8cff8;
}

.purchase-action-btn.advance {
    color: #632de9;
    background: #f5f2fe;
    border-color: #e0d7fa;
}

.purchase-action-btn.advance:hover {
    background: #632de9;
    color: #ffffff;
    border-color: #632de9;
}

.purchase-action-btn.edit:hover {
    background: #f3effe;
    color: #632de9;
    border-color: #cbbdf7;
}

.purchase-action-btn.delete {
    color: #9ca3af;
}

.purchase-action-btn.delete:hover {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

/* VISTA DETALLE DE TARJETA */
.card-detail-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #7446bd;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 16px;
}

.card-detail-hero-card {
    background: #ffffff;
    border: 1px solid #ede9fe;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(116, 70, 189, 0.06);
}

.card-detail-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-detail-pay-highlight {
    background: #f8f6fc;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.card-detail-pay-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 26px;
    font-weight: 800;
    color: #1e1e24;
}

/* Dos columnas de Anticipación */
.anticipation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.anticipation-card {
    background: #ffffff;
    border: 1px solid #f1f0f5;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.anticipation-label {
    font-size: 11px;
    font-weight: 700;
    color: #7c6fa0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.anticipation-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 17px;
    font-weight: 700;
    color: #1e1e24;
}

.anticipation-subtext {
    font-size: 11px;
    color: #928d97;
    margin-top: 2px;
}

/* Línea de tiempo del Ciclo */
.billing-timeline-wrap {
    background: #faf9fd;
    border: 1px solid #ede9fe;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.billing-timeline-title {
    font-size: 11px;
    font-weight: 700;
    color: #7446bd;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.billing-timeline-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.billing-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
}

.billing-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7446bd;
    margin-bottom: 6px;
}

.billing-timeline-arrow {
    color: #c4b5fd;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.billing-timeline-date {
    font-size: 12px;
    font-weight: 700;
    color: #1e1e24;
}

.billing-timeline-desc {
    font-size: 10px;
    color: #7c6fa0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Botones de acción de la tarjeta */
.card-detail-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.card-detail-actions button {
    flex: 1;
    min-width: 140px;
}

/* Pestañas de detalle */
.card-tabs-nav {
    display: flex;
    border-bottom: 1px solid #ede9fe;
    margin-bottom: 18px;
    gap: 8px;
}

.card-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #928d97;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.card-tab-btn.active {
    color: #7446bd;
    border-bottom-color: #7446bd;
}

/* Tarjeta Cuota Item */
.installment-item {
    background: #ffffff;
    border: 1px solid #f1f0f5;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.installment-item-info strong {
    display: block;
    font-size: 14px;
    color: #1e1e24;
    margin-bottom: 4px;
}

.installment-item-sub {
    font-size: 12px;
    color: #6b7280;
}

.installment-item-amounts {
    text-align: right;
    flex-shrink: 0;
}

.installment-monthly {
    display: block;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
    font-weight: 700;
    color: #7446bd;
}

.installment-total-rem {
    font-size: 11px;
    color: #928d97;
}

/* Empty state tarjetas */
.tarjetas-empty-state {
    text-align: center;
    padding: 50px 20px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px dashed #e2e0ea;
}

.tarjetas-empty-state .empty-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #f8f6fc;
    color: #7446bd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

@media (max-width: 640px) {
    .tarjetas-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .tarjetas-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .tarjetas-header-actions button {
        flex: 1;
        justify-content: center;
    }
    .credit-card-item {
        padding: 18px 18px;
    }
    .credit-card-payment-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .card-purchase-item {
        padding: 13px 14px;
    }
    .card-purchase-header-line {
        gap: 10px;
    }
    .card-purchase-meta-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .card-purchase-actions {
        width: 100%;
        justify-content: flex-end;
        padding-top: 6px;
        border-top: 1px dashed #f2eff8;
    }
    .anticipation-grid {
        grid-template-columns: 1fr;
    }
    .tarjetas-commitments-grid {
        gap: 6px;
    }
    .tarjetas-commitments-col {
        padding: 10px 6px;
    }
    .tarjetas-commitments-amount {
        font-size: 13px;
    }
    .card-detail-pay-highlight {
        flex-direction: column;
        align-items: flex-start;
    }
    .card-detail-actions button {
        width: 100%;
    }
}

/* ========================================================
   ESTILOS AVANZADOS: LIQUIDEZ, RADAR Y SIMULADOR
   ======================================================== */

/* 1. Tarjeta de Liquidez Real vs Reserva */
.tarjetas-liquidity-card {
    background: #ffffff;
    border: 1px solid #f0eff6;
    border-radius: 20px;
    padding: 20px 22px;
    margin-bottom: 20px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03);
}

.tarjetas-liquidity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.tarjetas-liquidity-label {
    font-size: 11px;
    font-weight: 700;
    color: #928d97;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tarjetas-liquidity-desc {
    font-size: 12px;
    color: #6b7280;
    margin-top: 3px;
}

.tarjetas-liquidity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.tarjetas-liquidity-col {
    background: #fbfafc;
    border: 1px solid #f1f0f5;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tarjetas-liquidity-col.highlight-free {
    background: #fdfcff;
    border-color: #ede9fe;
}

.tarjetas-liquidity-col-label {
    font-size: 11px;
    font-weight: 700;
    color: #8c8699;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tarjetas-liquidity-col-amount {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    color: #1f1b24;
}

.tarjetas-liquidity-col-amount.free-money {
    color: #10b981;
}

.tarjetas-liquidity-col-amount.card-debt {
    color: #ef4444;
}

.tarjetas-liquidity-col-sub {
    font-size: 11px;
    color: #9ca3af;
}

/* 2. Radar de Compra Inteligente (Estrategia de Ciclo) */
.radar-strategy-banner {
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.radar-banner-ideal {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
}

.radar-banner-standard {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.radar-banner-alert {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #78350f;
}

.radar-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radar-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.radar-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.radar-desc {
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.9;
    margin: 0;
}

.radar-badge-days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    text-align: center;
}

.radar-days-number {
    font-size: 20px;
    font-weight: 800;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.radar-days-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 3px;
    opacity: 0.8;
}

/* 3. Pre-Estado de Cuenta Proyectado */
.projected-statement-card {
    background: #ffffff;
    border: 1px solid #f0eff6;
    border-radius: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.statement-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f4f3f7;
    margin-bottom: 14px;
}

.statement-title-wrap h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: #1f1b24;
}

.statement-subtitle {
    font-size: 11px;
    color: #928d97;
}

.statement-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.statement-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #4b5563;
}

.statement-row span:last-child {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #1f1b24;
}

.statement-total-row {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statement-total-row strong:first-child {
    font-size: 14px;
    color: #1f1b24;
}

.statement-total-amount {
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: #7446bd;
}

/* 4. Modal Simulador de Apalancamiento */
.simulator-result-box {
    border-radius: 16px;
    padding: 16px;
    margin-top: 18px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.simulator-result-safe {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.simulator-result-moderate {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.simulator-result-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.simulator-quote-wrap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.simulator-quote-number {
    font-size: 20px;
    font-weight: 800;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.simulator-risk-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.simulator-freeflow-info {
    background: #f8f7fb;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 12px;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .tarjetas-liquidity-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .radar-strategy-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .radar-badge-days {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        padding: 8px 12px;
    }
}

/* ========================================================
   MODAL CONFIRMACIÓN DE ESTADO DE CUENTA
======================================================== */
.statement-modal-card-info {
    background: #f8f7fb;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid #eeebf7;
}

.statement-modal-bank-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f1b24;
}

.statement-modal-dates-row {
    font-size: 11.5px;
    color: #7c6fa0;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.statement-calc-breakdown {
    background: #ffffff;
    border: 1px solid #e7e4f2;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.statement-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #4b5563;
}

.statement-breakdown-row strong {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f1b24;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/* Banner de Estado de Cuenta en la sección Tarjetas */
.statement-action-banner {
    background: #ffffff;
    border: 1px solid #eeebf7;
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.statement-action-banner.is-confirmed {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.statement-banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.statement-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #f5f3ff;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.statement-action-banner.is-confirmed .statement-banner-icon {
    background: #ecfdf5;
    color: #059669;
}

.statement-banner-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.statement-banner-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f1b24;
}

.statement-banner-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.statement-banner-btn {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.statement-banner-btn.primary {
    background: #7446bd;
    color: #ffffff;
    border: none;
}

.statement-banner-btn.primary:hover {
    background: #633aa3;
}

.statement-banner-btn.secondary {
    background: #ffffff;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.statement-banner-btn.secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

@media (max-width: 640px) {
    .statement-action-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .statement-banner-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   MODAL DE REVISIÓN DE GASTOS DETECTADOS POR CORREO
========================================================= */

.pending-modal-card {
    max-width: 520px !important;
}

.pending-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pending-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.pending-counter-pill {
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 600;
    background: #f3f4f6;
    padding: 3px 10px;
    border-radius: 12px;
}

.pending-highlight-box {
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border: 1.5px solid #e9d5ff;
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.pending-amount-wrap {
    text-align: center;
    margin-bottom: 12px;
}

.pending-amount-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #7e22ce;
    letter-spacing: 0.5px;
}

.pending-amount-val {
    font-size: 34px;
    font-weight: 800;
    color: #581c87;
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.pending-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(126, 34, 206, 0.12);
    padding-top: 10px;
}

.pending-meta-item {
    text-align: left;
}

.pending-meta-item .meta-label {
    display: block;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.pending-meta-item .meta-val {
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
}

.pending-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.pending-nav-btns {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.pending-nav-btn {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pending-nav-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* =========================================================
   ESTADOS DE CONEXIÓN DE CORREO BANCARIO
========================================================= */

.email-status-banner.connected {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0;
}

.email-status-banner.connected .status-indicator-dot {
    background: #10b981 !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.email-status-banner.error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca;
}

.email-status-banner.error .status-indicator-dot {
    background: #ef4444 !important;
}

/* =========================================================
   SEPARACIÓN POR MESES Y FECHAS (INICIO & MOVIMIENTOS)
========================================================= */

.home-period-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.movements-toolbar {
    flex-wrap: wrap;
    gap: 12px;
}

.movements-date-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.month-picker-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.month-picker-label:hover {
    background: #f3e8ff;
}

.month-picker-label strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    min-width: 118px;
    text-align: center;
}

.hidden-month-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
}

.movements-today-pill {
    border: 1px solid #ddd6fe;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.movements-today-pill:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}

.custom-date-range-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(20, 10, 35, 0.03);
}

.custom-date-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.custom-date-field input[type="date"] {
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
}

.custom-date-field input[type="date"]:focus {
    border-color: var(--purple);
    background: #ffffff;
}

/* Resumen del período en Movimientos */
.movements-period-summary {
    margin-bottom: 14px;
}

.movements-summary-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 13px 20px;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(20, 10, 35, 0.03);
}

.movements-summary-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.movements-summary-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.movements-summary-value {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.movements-summary-value.income,
.movements-summary-value.positive {
    color: #059669;
}

.movements-summary-value.expense,
.movements-summary-value.negative {
    color: #e11d48;
}

.movements-summary-divider {
    width: 1px;
    height: 32px;
    background: #e2e8f0;
    flex-shrink: 0;
}

/* Contenedor agrupado por Mes y Fecha */
.movements-grouped-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.movement-month-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.movement-month-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
    border-radius: 13px;
    padding: 10px 16px;
    margin-top: 4px;
}

.movement-month-banner-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.movement-month-banner-title strong {
    font-size: 15px;
    font-weight: 800;
    color: #4c1d95;
    text-transform: capitalize;
}

.movement-month-banner-title span {
    font-size: 12px;
    font-weight: 600;
    color: #6d28d9;
}

.movement-month-banner-totals {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.month-banner-inc {
    color: #059669;
}

.month-banner-exp {
    color: #e11d48;
}

.movement-date-group {
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.movement-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.movement-date-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}

.movement-date-title svg {
    color: #7c3aed;
    flex-shrink: 0;
}

.movement-date-count {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    padding: 1px 7px;
    border-radius: 99px;
}

.movement-date-totals {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.day-subtotal-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 7px;
}

.day-subtotal-pill.expense {
    background: #fef2f2;
    color: #dc2626;
}

.day-subtotal-pill.income {
    background: #ecfdf5;
    color: #059669;
}

@media (max-width: 768px) {
    .home-period-controls {
        width: 100%;
        justify-content: space-between;
    }

    .movements-date-controls {
        width: 100%;
        justify-content: space-between;
    }

    .movements-summary-strip {
        padding: 11px 12px;
        gap: 8px;
    }

    .movements-summary-label {
        font-size: 10px;
    }

    .movements-summary-value {
        font-size: 13.5px;
    }

    .movement-date-header {
        padding: 8px 11px;
    }

    .movement-date-title {
        font-size: 12px;
    }
}

/* =========================================================
   PUESTA AL DÍA, HÁBITO DIARIO Y REGRESO SIN CULPA
========================================================= */

.balance-habit-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.habit-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.habit-action-btn.primary-catchup {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.habit-action-btn.primary-catchup:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
    transform: translateY(-1px);
}

.habit-action-btn.zero-expense-btn {
    background: #f8fafc;
    color: #475569;
    border-color: #e2e8f0;
}

.habit-action-btn.zero-expense-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.habit-action-btn.zero-expense-btn.is-checked {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.habit-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #c2410c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 5px 10px;
    border-radius: 99px;
}

/* Banner de Regreso sin Culpa */
.welcome-back-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
    border: 1.5px solid #c4b5fd;
    border-radius: 18px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.07);
}

.welcome-back-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    min-width: 240px;
}

.welcome-back-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.welcome-back-text strong {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: #1e1b4b;
    margin-bottom: 4px;
}

.welcome-back-text p {
    font-size: 13px;
    color: #4c1d95;
    margin: 0;
    line-height: 1.45;
}

.welcome-back-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.welcome-back-btn {
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.welcome-back-btn.primary {
    background: #6d28d9;
    color: #ffffff;
}

.welcome-back-btn.primary:hover {
    background: #5b21b6;
}

.welcome-back-btn.secondary {
    background: #ffffff;
    color: #4c1d95;
    border-color: #ddd6fe;
}

.welcome-back-btn.secondary:hover {
    background: #f5f3ff;
}

.welcome-back-dismiss {
    background: transparent;
    border: none;
    color: #6d28d9;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

/* Modal de Puesta al Día */
.catchup-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: #f1f5f9;
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.catchup-mode-tab {
    border: none;
    background: transparent;
    color: #475569;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.catchup-mode-tab.active {
    background: #ffffff;
    color: #6d28d9;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.catchup-current-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.catchup-current-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
}

.catchup-current-amount {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

.catchup-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: #6d28d9;
    background: #ede9fe;
    padding: 4px 10px;
    border-radius: 99px;
}

.catchup-input-label {
    display: grid;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
}

.catchup-input-label input {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
}

.catchup-preview-box {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
}

.catchup-preview-box.positive {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.catchup-preview-box.warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* Acciones en lote en la campanita */
.notif-batch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.notif-batch-btn {
    flex: 1;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.notif-batch-btn.approve-all {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.notif-batch-btn.approve-all:hover {
    background: #d1fae5;
}

.notif-batch-btn.dismiss-all {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.notif-batch-btn.dismiss-all:hover {
    background: #f1f5f9;
    color: #334155;
}

/* ========================================================
   MODO JUEGO ESTILO DUOLINGO: RACHA + SALUD FINANCIERA
======================================================== */

/* 1. Botón de Racha en la Cabecera (Desktop & Mobile) */
.duo-streak-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid #fed7aa;
    background: #fff7ed;
    color: #ea580c;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 0 #fdba74;
}

.duo-streak-header-btn:hover {
    transform: translateY(-1px);
    background: #ffedd5;
    box-shadow: 0 3px 0 #fb923c;
}

.duo-streak-header-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #fb923c;
}

.duo-streak-header-btn.is-lit {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-color: #fb923c;
    color: #ea580c;
}

.duo-streak-header-btn.is-pending {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
    box-shadow: 0 2px 0 #cbd5e1;
}

.duo-streak-header-btn.is-pending .duo-flame-icon {
    filter: grayscale(0.65);
    opacity: 0.8;
}

.duo-flame-icon {
    font-size: 15px;
    line-height: 1;
}

/* 2. Widget Estilo Duolingo en Inicio (#duoHabitWidget) */
.duo-habit-widget {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.45fr);
    gap: 16px;
    background: #ffffff;
    border: 1.5px solid #ede9fe;
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(116, 70, 189, 0.06);
    align-items: center;
}

.duo-habit-widget.streak-active {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fffdf9 0%, #ffffff 55%, #f5f3ff 100%);
}

.duo-habit-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 16px;
    border-right: 1.5px dashed #e2e8f0;
    cursor: pointer;
}

.duo-flame-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.duo-flame-big {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border: 1.5px solid #fb923c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 3px 0 #fdba74;
    flex-shrink: 0;
}

.duo-habit-widget.streak-pending .duo-flame-big {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 3px 0 #cbd5e1;
    filter: grayscale(0.4);
}

.duo-flame-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.duo-flame-meta strong {
    font-size: 16px;
    font-weight: 800;
    color: #1e1b2e;
    line-height: 1.2;
}

.duo-flame-meta span {
    font-size: 12px;
    font-weight: 700;
    color: #7446bd;
}

/* Círculos semanales L M M J V S D */
.duo-week-circles {
    display: flex;
    align-items: center;
    gap: 7px;
}

.duo-day-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.duo-day-label {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}

.duo-day-circle {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s ease;
}

.duo-day-item.done .duo-day-circle,
.duo-day-item.done_today .duo-day-circle {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    border-color: #ea580c;
    box-shadow: 0 2px 0 #c2410c;
}

.duo-day-item.done_today .duo-day-label,
.duo-day-item.today_pending .duo-day-label {
    color: #ea580c;
    font-weight: 800;
}

.duo-day-item.today_pending .duo-day-circle {
    background: #fff7ed;
    color: #ea580c;
    border: 2px dashed #f97316;
    animation: duoPulseRing 2s infinite;
}

.duo-day-item.frozen .duo-day-circle {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #7dd3fc;
}

@keyframes duoPulseRing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* Lado derecho: Coach de Salud Financiera */
.duo-habit-coach {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 15px;
}

.duo-coach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.duo-coach-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #7446bd;
    background: #f3e8ff;
    padding: 3px 9px;
    border-radius: 999px;
}

.duo-coach-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.duo-next-tip-btn,
.duo-open-game-btn {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.duo-next-tip-btn:hover {
    background: #f3e8ff;
    color: #7446bd;
    border-color: #d8b4fe;
}

.duo-open-game-btn {
    background: #fff7ed;
    color: #ea580c;
    border-color: #fed7aa;
}

.duo-open-game-btn:hover {
    background: #ffedd5;
}

.duo-coach-message {
    margin: 0;
    font-size: 13.2px;
    color: #334155;
    line-height: 1.48;
    font-weight: 500;
}

.duo-tip-fade {
    animation: duoTipFadeIn 0.25s ease;
}

@keyframes duoTipFadeIn {
    from { opacity: 0.3; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. Modal de Racha y Salud Financiera (#streakGameModal) */
.duo-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
}

.duo-modal-hero {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1.5px solid #fdba74;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.duo-modal-flame-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.duo-modal-flame {
    font-size: 38px;
    line-height: 1;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid #fb923c;
    box-shadow: 0 4px 0 #fdba74;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.duo-modal-streak-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.duo-modal-streak-text strong {
    font-size: 22px;
    font-weight: 800;
    color: #9a3412;
}

.duo-modal-streak-text span {
    font-size: 12.5px;
    color: #c2410c;
    line-height: 1.35;
}

.duo-modal-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.duo-stat-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.duo-stat-chip.freeze {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
}

/* Rango / Nivel */
.duo-level-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
}

.duo-level-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
}

.duo-level-top strong {
    color: #1e1b2e;
    font-weight: 800;
}

.duo-level-top span {
    color: #64748b;
    font-weight: 600;
    font-size: 11.5px;
}

.duo-level-progress-track {
    height: 10px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.duo-level-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #7446bd 0%, #f97316 100%);
    transition: width 0.35s ease;
}

/* Semana en Modal */
.duo-modal-week-box {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
}

.duo-modal-section-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

.duo-modal-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.duo-modal-day-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: 10px;
    background: #f8fafc;
}

.duo-modal-day-name {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

.duo-modal-day-bubble {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: #e2e8f0;
    color: #64748b;
}

.duo-modal-day-col.done .duo-modal-day-bubble,
.duo-modal-day-col.done_today .duo-modal-day-bubble {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 2px 0 #c2410c;
}

.duo-modal-day-col.today_pending .duo-modal-day-bubble {
    background: #fff7ed;
    color: #ea580c;
    border: 2px dashed #f97316;
}

.duo-modal-day-col.frozen .duo-modal-day-bubble {
    background: #e0f2fe;
    color: #0284c7;
}

.duo-modal-day-num {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
}

/* Termómetro de Salud Financiera en el Modal */
.duo-health-box {
    background: #f5f3ff;
    border: 1.5px solid #ddd6fe;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duo-health-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.duo-health-header h4 {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 800;
    color: #1e1b2e;
}

.duo-health-score-badge {
    font-size: 13px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #059669;
    border: 1.5px solid #a7f3d0;
    white-space: nowrap;
}

.duo-health-score-badge.warn {
    background: #fffbeb;
    color: #d97706;
    border-color: #fde68a;
}

.duo-health-score-badge.danger {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.duo-health-diagnosis {
    margin: 0;
    font-size: 12.8px;
    color: #475569;
    line-height: 1.45;
}

.duo-health-tip-card {
    background: #ffffff;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 10px 12px;
}

.duo-health-tip-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

.duo-health-tip-top strong {
    font-size: 11.5px;
    color: #7446bd;
    font-weight: 800;
}

.duo-health-tip-card p {
    margin: 0;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.45;
}

/* Botones de misión del modal */
.duo-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 2px;
}

.duo-mission-btn {
    flex: 1;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1.5px solid transparent;
}

.duo-mission-btn.zero {
    background: #ecfdf5;
    color: #059669;
    border-color: #6ee7b7;
    box-shadow: 0 3px 0 #34d399;
}

.duo-mission-btn.zero.completed {
    background: #f1f5f9;
    color: #64748b;
    border-color: #cbd5e1;
    box-shadow: none;
}

.duo-mission-btn.primary {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    border-color: #c2410c;
    box-shadow: 0 3px 0 #9a3412;
}

/* 4. Toast de Celebración Estilo Duolingo (#duoCelebrationToast) */
.duo-celebration-toast {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 400px;
    background: linear-gradient(135deg, #1e1b2e 0%, #2e1065 100%);
    color: #ffffff;
    border: 2px solid #fb923c;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 14px 34px rgba(30, 27, 46, 0.32), 0 4px 0 #ea580c;
    transform: translateY(130%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.duo-celebration-toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.duo-celebration-flame {
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(251, 146, 60, 0.2);
    border: 1.5px solid #fb923c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.duo-celebration-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.duo-celebration-content strong {
    font-size: 14px;
    font-weight: 800;
    color: #fed7aa;
}

.duo-celebration-content p {
    margin: 0;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.4;
}

.duo-celebration-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .duo-habit-widget {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 12px;
    }

    .duo-habit-left {
        padding-right: 0;
        padding-bottom: 12px;
        border-right: none;
        border-bottom: 1.5px dashed #e2e8f0;
    }

    .duo-week-circles {
        justify-content: space-between;
    }

    .duo-modal-actions {
        flex-direction: column;
    }

    .duo-celebration-toast {
        left: 14px;
        right: 14px;
        bottom: 84px;
        max-width: none;
    }
}