:root{
    --brand-dark: #0d1b2a;
    --brand-primary: #0d6efd;
    --brand-accent: #00c2a8;
    --surface: #f4f6f9;
    --card-radius: 18px;
    --danger: #e5484d;
    --success: #16a34a;

    /* ---- Tema (claro por defecto) ---- */
    --card-bg: #ffffff;
    --text-primary: #1a2332;
    --text-muted: #8a94a6;
    --border-color: #e2e6ec;
    --hover-bg: #f1f5fb;
    --input-bg: #ffffff;
    --shadow-card: 0 2px 8px rgba(0,0,0,.04);

    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"]{
    --surface: #10141c;
    --card-bg: #1b212c;
    --text-primary: #e8ebf0;
    --text-muted: #8d96a8;
    --border-color: #2c3340;
    --hover-bg: #232a37;
    --input-bg: #232a37;
    --shadow-card: 0 2px 10px rgba(0,0,0,.35);
}

[data-theme="dark"] body{ color: var(--text-primary); }
[data-theme="dark"] .bottom-nav{ background: var(--card-bg); border-top-color: var(--border-color); }
[data-theme="dark"] .autocomplete-list{ background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .autocomplete-list .ac-item:hover{ background: var(--hover-bg); }
[data-theme="dark"] .chip{ background: var(--card-bg); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .pend-item{ border-color: var(--border-color); }
[data-theme="dark"] .pend-item.selected{ background: rgba(13,110,253,.15); }
[data-theme="dark"] .ai-suggestion{ background: linear-gradient(135deg, #241f3d, #1a2e29); border-color: #3a3160; color: #c9bfff; }
[data-theme="dark"] .ai-summary-card{ background: linear-gradient(135deg, #241f3d, #1a2e29); border-color: #3a3160; }
[data-theme="dark"] .badge-pendiente{ background: #3a2a12; color: #f0b060; }
[data-theme="dark"] .badge-traslado{ background: rgba(13,110,253,.22); color: #7cb3f0; }
[data-theme="dark"] .susc-alerta-warning{ background: #3a2a12; color: #f0b060; }
[data-theme="dark"] .susc-alerta-info{ background: #142a42; color: #7cb3f0; }
[data-theme="dark"] .mov-del-btn{ color: #565f70; }

/* Bootstrap: adaptar componentes clave al modo oscuro */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{
    background-color: var(--input-bg); color: var(--text-primary); border-color: var(--border-color);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{ background-color: var(--input-bg); color: var(--text-primary); }
[data-theme="dark"] .form-control::placeholder{ color: var(--text-muted); }
[data-theme="dark"] .input-group-text{ background-color: var(--hover-bg); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .form-label{ color: var(--text-primary); }
[data-theme="dark"] .modal-content,
[data-theme="dark"] .offcanvas{ background-color: var(--card-bg); color: var(--text-primary); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .offcanvas-header{ border-color: var(--border-color); }
[data-theme="dark"] .dropdown-menu{ background-color: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item{ color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover{ background-color: var(--hover-bg); color: var(--text-primary); }
[data-theme="dark"] .dropdown-divider{ border-color: var(--border-color); }
[data-theme="dark"] .btn-outline-secondary{ color: var(--text-muted); border-color: var(--border-color); }
[data-theme="dark"] .btn-outline-secondary:hover{ background-color: var(--hover-bg); color: var(--text-primary); }
[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .table{ color: var(--text-primary); }
[data-theme="dark"] .text-muted{ color: var(--text-muted) !important; }
[data-theme="dark"] hr{ border-color: var(--border-color); }

*{ -webkit-tap-highlight-color: transparent; }

body{
    background: var(--surface);
    padding-bottom: 90px;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-primary);
}

/* ---------- TOPBAR ---------- */
.app-topbar{
    background: linear-gradient(135deg, var(--brand-dark), #16324f);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.brand-badge{
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--brand-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #06231d;
    overflow: hidden;
}
.brand-badge img{ width: 100%; height: 100%; object-fit: cover; }
.brand-text{ font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.icon-btn{
    background: rgba(255,255,255,.12);
    border: none; color: #fff; width: 38px; height: 38px;
    border-radius: 50%; display: inline-flex; align-items:center; justify-content:center;
}

.app-main{ max-width: 720px; margin: 0 auto; padding: 16px 14px 24px; }

/* ---------- BANNER MODO SOLO LECTURA ---------- */
.readonly-banner{
    background: #fff4e5; color: #a05a00; text-align: center;
    padding: 8px 14px; font-size: .82rem; font-weight: 600;
}
[data-theme="dark"] .readonly-banner{ background: #3a2a12; color: #f0b060; }

/* ---------- DASHBOARD SUMMARY ---------- */
.summary-hero{
    background: linear-gradient(135deg, var(--brand-dark) 0%, #1b3a5c 60%, var(--brand-accent) 140%);
    border-radius: var(--card-radius);
    color: #fff;
    padding: 22px 20px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(13,27,42,.25);
}
.summary-hero .label{ opacity:.75; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.summary-hero .saldo-amount{ font-size: 2.1rem; font-weight: 800; }
.summary-hero .sub-metrics{ display:flex; gap: 18px; margin-top: 14px; }
.summary-hero .sub-metrics div{ flex:1; }
.summary-hero .sub-metrics .value{ font-weight:700; font-size:1.05rem; }

.summary-hero-debito{
    background: linear-gradient(135deg, #0f3d2e 0%, #16324f 55%, #1b9c7c 140%);
    margin-top: 18px;
}
.summary-hero-debito .saldo-amount{ font-size: 1.7rem; }

/* ---------- TARJETA (card financiera) ---------- */
.credit-card{
    border-radius: var(--card-radius);
    padding: 16px 18px;
    color: #fff;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.credit-card::after{
    content:"";
    position:absolute; right:-30px; top:-30px;
    width:140px; height:140px; border-radius:50%;
    background: rgba(255,255,255,.08);
}
.credit-card .banco-name{ font-weight:700; font-size:1.05rem; }
.credit-card .saldo{ font-size:1.5rem; font-weight:800; margin-top:4px; }
.credit-card .mini-metrics{ display:flex; justify-content:space-between; font-size:.78rem; opacity:.9; margin-top:10px; }
.credit-card .progress{ height:6px; margin-top:10px; background: rgba(255,255,255,.25); }
.credit-card .progress-bar{ background: #fff; }
.badge-tipo{
    display:inline-block; font-size:.62rem; font-weight:600; letter-spacing:.03em;
    background: rgba(255,255,255,.22); padding:2px 8px; border-radius:8px; vertical-align:middle;
}

/* ---------- FAB ---------- */
.fab-btn{
    position: fixed;
    bottom: 78px;
    right: 20px;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    color:#fff; border:none;
    font-size: 1.5rem;
    box-shadow: 0 10px 24px rgba(13,110,253,.4);
    z-index: 1040;
    display:flex; align-items:center; justify-content:center;
}
.fab-btn:active{ transform: scale(.94); }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{
    position: fixed; bottom:0; left:0; right:0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display:flex; align-items:center;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    z-index: 1035;
}
.nav-item{
    flex:1; text-align:center; color: var(--text-muted); text-decoration:none;
    font-size:.68rem; padding: 6px 0; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.nav-item i{ font-size:1.25rem; }
.nav-item.active{ color: var(--brand-primary); font-weight:600; }
.nav-spacer{ width: 58px; }

/* ---------- QUICK ADD MODAL (fullscreen) ---------- */
.amount-input{ font-weight:700; font-size:1.4rem; }

/* ---------- VENCIMIENTOS (dashboard) ---------- */
.venc-card{ border-left: 3px solid #f0a83c; }
.venc-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ---------- CALENDARIO DE GASTOS ---------- */
.cal-week-row{ display:flex; align-items:stretch; gap:4px; margin-bottom:4px; }
.cal-week-header{ margin-bottom:6px; }
.cal-week-days{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; flex:1; }
.cal-day-header{
    text-align:center; font-size:.68rem; font-weight:700; color: var(--text-muted);
    padding:4px 0;
}
.cal-day{
    aspect-ratio: 1; border-radius:8px; background: var(--card-bg); border:1px solid var(--border-color);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    cursor:pointer; padding:2px;
}
.cal-day-empty{ background:transparent; border-color:transparent; cursor:default; }
.cal-day-num{ font-size:.72rem; font-weight:600; color: var(--text-primary); }
.cal-day-total{ font-size:.58rem; color: var(--text-muted); line-height:1; margin-top:1px; }
.cal-day-hoy{ border: 2px solid var(--brand-primary); }
.cal-heat-bajo{ background:#ffe9cc; }
.cal-heat-bajo .cal-day-num, .cal-heat-bajo .cal-day-total{ color:#7a4a00; }
.cal-heat-medio{ background:#ff9d4d; }
.cal-heat-medio .cal-day-num, .cal-heat-medio .cal-day-total{ color:#3a1e00; }
.cal-heat-alto{ background: var(--danger); }
.cal-heat-alto .cal-day-num, .cal-heat-alto .cal-day-total{ color:#fff; }
.cal-week-total{
    flex-shrink:0; width:64px; display:flex; align-items:center; justify-content:center;
    text-align:center; font-size:.68rem; font-weight:700; color: var(--text-muted);
    background: var(--hover-bg); border-radius:8px; padding:2px 4px;
}
.cal-week-total-header{ background:transparent; color: var(--text-muted); font-weight:700; }
.cal-leyenda-dot{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:2px; vertical-align:middle; }

/* ---------- SUSCRIPCIONES RECURRENTES ---------- */
.susc-alerta{
    margin-top:8px; padding:6px 10px; border-radius:8px; font-size:.78rem;
}
.susc-alerta-warning{ background:#fff4e5; color:#a05a00; }
.susc-alerta-info{ background:#e7f1ff; color:#0a4a9e; }

/* ---------- PENDIENTES / SUGERENCIAS IA ---------- */
.ai-suggestion{
    margin-top:8px; padding:8px 10px; border-radius:10px;
    background: linear-gradient(135deg, #f0ecff, #e7f6f3);
    border: 1px solid #ded4ff; font-size:.82rem; color:#4a3f8c;
}
.ai-suggestion .btn-close-sm{ font-size:.6rem; }
.ai-summary-card{
    background: linear-gradient(135deg, #f5f2ff, #eefaf6);
    border: 1px solid #ded4ff;
}
.pendientes-list{ max-height: 260px; overflow-y: auto; }
.pend-item{
    border:1.5px solid #e2e6ec; border-radius:12px; padding:10px 12px; margin-bottom:8px;
    display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.pend-item:hover{ border-color:#b6c6e8; }
.pend-item.selected{ border-color: var(--brand-primary); background:#eef4ff; }
.pend-item .pend-info .comercio{ font-weight:600; font-size:.9rem; }
.pend-item .pend-info .meta{ font-size:.72rem; color:#8a94a6; }
.pend-item .pend-saldo{ text-align:right; font-weight:700; color:#e5484d; font-size:.9rem; }
.pend-item .pend-saldo small{ display:block; font-weight:400; color:#8a94a6; font-size:.68rem; }
.autocomplete-list{
    position:absolute; z-index: 20; background: var(--card-bg); width:100%;
    border:1px solid var(--border-color); border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.1);
    max-height: 220px; overflow-y:auto; display:none;
}
.autocomplete-list .ac-item{ padding:10px 14px; cursor:pointer; color: var(--text-primary); }
.autocomplete-list .ac-item:hover{ background: var(--hover-bg); }

/* ---------- MOVEMENT LIST ---------- */
.mov-item{
    background: var(--card-bg); border-radius: 14px; padding: 12px 14px;
    display:flex; align-items:center; gap:12px; margin-bottom:10px;
    box-shadow: var(--shadow-card);
}
.mov-icon{
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0;
}
.mov-item .amount{ font-weight:700; }
.mov-item .amount.compra{ color: var(--danger); }
.mov-item .amount.pago{ color: var(--success); }
.mov-item .amount.traslado{ color: var(--brand-primary); }
.mov-item .meta{ font-size:.75rem; color: var(--text-muted); }
.mov-del-btn{
    border:none; background:transparent; color:#c7cbd6; font-size:.85rem;
    padding:4px 2px; margin-top:2px;
}
.mov-del-btn:hover, .mov-del-btn:active{ color:#e5484d; }
.badge-pendiente{
    display:inline-block; margin-top:3px; font-size:.68rem; font-weight:600;
    background:#fff4e5; color:#c76a00; padding:2px 8px; border-radius:8px;
}
.badge-traslado{
    display:inline-block; font-size:.66rem; font-weight:700;
    background: rgba(13,110,253,.12); color: var(--brand-primary); padding:1px 7px; border-radius:8px;
    margin-right:4px;
}

/* ---------- SECTION TITLE ---------- */
.section-title{ font-weight:700; font-size:1rem; margin: 18px 0 10px; display:flex; align-items:center; gap:8px; }

/* ---------- FILTER CHIPS ---------- */
.chip-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; flex-wrap: wrap; }
.chip{
    flex-shrink:0; background: var(--card-bg); border:1px solid var(--border-color); border-radius:20px;
    padding:6px 14px; font-size:.8rem; color:#556; white-space:nowrap; cursor:pointer;
}
.chip.active{ background: var(--brand-primary); color:#fff; border-color:var(--brand-primary); }

/* ---------- CARDS (report/kpi) ---------- */
.kpi-card{ background: var(--card-bg); border-radius:14px; padding:14px; box-shadow: var(--shadow-card); color: var(--text-primary); }
.presupuesto-bar-bg{ background: var(--border-color); }

@media (min-width: 768px){
    .app-main{ padding-top: 24px; }
}

/* print styles for PDF-friendly view */
@media print{
    .app-topbar, .bottom-nav, .fab-btn, .no-print{ display:none !important; }
    body{ padding-bottom:0; background:#fff; }
}