/* FINANZAS FAMILIARES v2 */
:root{--bg-base:#03071a;--bg-card:rgba(8,18,45,.92);--bg-input:rgba(10,22,52,.95);--border:rgba(0,210,180,.18);--border-light:rgba(0,210,180,.38);--primary:#00e5b0;--primary-dark:#00c49a;--primary-glow:rgba(0,229,176,.28);--accent:#7c3aed;--danger:#ff3d6b;--warning:#ffb700;--info:#00b4ff;--text-base:#ffffff;--text-muted:#b8cfe8;--text-faint:#4a6080;--sidebar-w:260px;--topbar-h:64px;--radius:12px;--radius-sm:8px;--shadow:0 4px 28px rgba(0,0,0,.6);--transition:.2s cubic-bezier(.4,0,.2,1);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;color:var(--text-base);min-height:100vh;line-height:1.6;overflow-x:hidden;background-color:#03071a;}
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,229,176,.09) 1px,transparent 1px);background-size:36px 36px;}
.app-wrapper{position:relative;z-index:1;display:flex;min-height:100vh;}
.main-content{position:relative;z-index:1;flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;}
.page-content{padding:26px;flex:1;position:relative;z-index:1;}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:rgba(0,229,176,.3);border-radius:3px}
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1;}
.auth-card{background:rgba(10,18,40,.92);border:1px solid rgba(0,229,176,.22);border-radius:20px;padding:44px 38px;width:100%;max-width:440px;box-shadow:0 8px 48px rgba(0,0,0,.7);}
.auth-logo{text-align:center;margin-bottom:28px}.auth-logo .logo-icon{width:64px;height:64px;background:linear-gradient(135deg,#00e5b0,#7c3aed);border-radius:16px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:12px;box-shadow:0 0 40px rgba(0,229,176,.5);}
.auth-logo h1{font-size:1.55rem;font-weight:700;background:linear-gradient(90deg,#00e5b0,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-logo p{color:var(--text-muted);font-size:.88rem;margin-top:4px}
.form-group{margin-bottom:16px}.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.form-control{width:100%;padding:11px 15px;background:rgba(10,20,45,.85);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-base);font-family:inherit;font-size:.93rem;transition:var(--transition);outline:none;}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.form-control::placeholder{color:#6a8aaa}
select.form-control option{background:#0e1a2e}textarea.form-control{resize:vertical;min-height:80px}
.input-group{position:relative}.input-group .form-control{padding-left:40px}.input-group .input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.88rem}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#00e5b0,#00c49a);color:#fff;box-shadow:0 4px 18px rgba(0,229,176,.4)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,229,176,.6)}
.btn-accent{background:#7c3aed;color:#fff;box-shadow:0 4px 18px rgba(124,58,237,.4)}.btn-accent:hover{background:#6d28d9;transform:translateY(-2px)}
.btn-danger{background:#ff3d6b;color:#fff;box-shadow:0 4px 14px rgba(255,61,107,.35)}.btn-danger:hover{background:#e11d48;transform:translateY(-1px)}
.btn-ghost{background:rgba(15,25,55,.8);color:var(--text-base);border:1px solid var(--border)}.btn-ghost:hover{background:rgba(25,40,75,.9);border-color:var(--border-light)}
.btn-sm{padding:7px 13px;font-size:.82rem}.btn-block{width:100%;justify-content:center}.btn-icon{padding:8px 11px}
.sidebar{width:var(--sidebar-w);background:rgba(2,6,22,.96);border-right:1px solid rgba(0,229,176,.15);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;transition:transform var(--transition);overflow-y:auto;box-shadow:4px 0 30px rgba(0,0,0,.6);}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 0;}
.brand-line{border:none;height:1px;margin:12px 16px 0;background:linear-gradient(90deg,transparent,rgba(0,229,176,.6),rgba(124,58,237,.6),transparent);}
.brand-icon{width:40px;height:40px;background:linear-gradient(135deg,#00e5b0,#7c3aed);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;box-shadow:0 0 24px rgba(0,229,176,.55);}
.brand-name{display:block;font-weight:700;font-size:.93rem}.brand-sub{display:block;font-size:.7rem;color:var(--text-muted)}.sidebar-close{display:none;margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.05rem}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid rgba(0,229,176,.1)}
.user-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#fff;flex-shrink:0}
.user-name{display:block;font-size:.86rem;font-weight:600}.user-role{display:block;font-size:.71rem;color:var(--text-muted)}
.sidebar-nav{list-style:none;padding:10px;flex:1}.sidebar-nav li{margin-bottom:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--radius-sm);color:var(--text-muted);text-decoration:none;font-size:.88rem;font-weight:500;transition:var(--transition);cursor:pointer;position:relative;}
.nav-item:hover{background:rgba(0,229,176,.07);color:var(--text-base)}
.nav-item.active{background:linear-gradient(90deg,rgba(0,229,176,.18),rgba(0,229,176,.04));color:#00e5b0;border:1px solid rgba(0,229,176,.3);box-shadow:0 0 16px rgba(0,229,176,.1);}
.nav-item i{width:17px;text-align:center;font-size:.92rem}
.sidebar-footer{padding:10px;border-top:1px solid rgba(0,229,176,.1)}.logout-btn:hover{background:rgba(255,61,107,.15)!important;color:#ff3d6b!important}
.notif-badge{margin-left:auto;background:#ff3d6b;color:#fff;border-radius:20px;padding:1px 7px;font-size:.68rem;font-weight:700;animation:pulseBadge 1.8s ease-in-out infinite;}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 6px rgba(255,61,107,.5)}50%{box-shadow:0 0 20px rgba(255,61,107,.95)}}
.topbar{height:var(--topbar-h);background:rgba(2,6,22,.95);border-bottom:1px solid rgba(0,229,176,.15);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.5);}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00e5b0 25%,#7c3aed 50%,#ff3d6b 75%,transparent);}
.hamburger{display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.15rem;padding:6px}.topbar-title{font-weight:700;font-size:1.02rem;flex:1}
.topbar-right{display:flex;align-items:center;gap:14px}.topbar-date{color:var(--text-muted);font-size:.82rem;display:flex;align-items:center;gap:5px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:rgba(10,18,42,.9);border:1px solid rgba(0,180,140,.2);border-radius:var(--radius);padding:20px 22px;display:flex;align-items:center;gap:14px;transition:var(--transition);position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,229,176,.6),transparent);opacity:0;transition:opacity .3s;}
.stat-card:hover{border-color:rgba(0,229,176,.4);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5)}.stat-card:hover::before{opacity:1}
.stat-icon{width:50px;height:50px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.stat-label{font-size:.76rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:600;margin-top:2px}
.stat-change{font-size:.76rem;margin-top:2px}.stat-change.up{color:#00e5b0}.stat-change.down{color:#ff3d6b}
.icon-green{background:rgba(0,229,176,.18);color:#00e5b0;box-shadow:0 0 22px rgba(0,229,176,.4)}.icon-red{background:rgba(255,61,107,.18);color:#ff3d6b;box-shadow:0 0 22px rgba(255,61,107,.4)}.icon-blue{background:rgba(0,180,255,.18);color:#00b4ff;box-shadow:0 0 22px rgba(0,180,255,.4)}.icon-purple{background:rgba(124,58,237,.18);color:#a78bfa;box-shadow:0 0 22px rgba(124,58,237,.4)}.icon-yellow{background:rgba(255,183,0,.18);color:#ffb700;box-shadow:0 0 22px rgba(255,183,0,.4)}
.text-green{color:#00e5b0!important}.text-red{color:#ff3d6b!important}.text-yellow{color:#ffb700!important}.text-blue{color:#00b4ff!important}.text-muted{color:var(--text-muted)!important}
.card{background:rgba(10,18,42,.88);border:1px solid rgba(0,180,140,.16);border-radius:var(--radius);overflow:hidden;transition:var(--transition);}.card:hover{border-color:rgba(0,180,140,.3)}
.card-header{padding:16px 22px;border-bottom:1px solid rgba(0,180,140,.1);display:flex;align-items:center;justify-content:space-between;gap:12px}.card-title{font-size:.92rem;font-weight:600;display:flex;align-items:center;gap:8px}.card-body{padding:18px 22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{padding:11px 15px;text-align:left;font-size:.74rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid rgba(0,180,140,.1);white-space:nowrap}
tbody td{padding:12px 15px;border-bottom:1px solid rgba(0,180,140,.07);vertical-align:middle}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:rgba(0,229,176,.04)}.amount-col{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:600}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:.74rem;font-weight:600}
.badge-green{background:rgba(0,229,176,.15);color:#00e5b0}.badge-red{background:rgba(255,61,107,.15);color:#ff3d6b}.badge-yellow{background:rgba(255,183,0,.15);color:#ffb700}.badge-blue{background:rgba(0,180,255,.15);color:#00b4ff}.badge-gray{background:rgba(80,130,200,.1);color:var(--text-muted)}
.progress{height:7px;background:rgba(0,180,140,.1);border-radius:4px;overflow:hidden}.progress-bar{height:100%;border-radius:4px;transition:width .6s ease;background:linear-gradient(90deg,#00e5b0,#00b4ff)}.progress-bar.danger{background:linear-gradient(90deg,#ffb700,#ff3d6b)}.progress-bar.warning{background:linear-gradient(90deg,#ffb700,#ff8c00)}
.cat-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.tx-type{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.84rem}
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);align-items:center;justify-content:center;padding:16px}.modal-overlay.open{display:flex}
.modal{background:rgba(8,15,35,.97);border:1px solid rgba(0,229,176,.2);border-radius:16px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.8);animation:modalIn .22s ease;}
@keyframes modalIn{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:18px 22px;border-bottom:1px solid rgba(0,180,140,.1);display:flex;align-items:center;justify-content:space-between}.modal-title{font-weight:700;font-size:.97rem}
.modal-close{background:rgba(0,180,140,.08);border:none;color:var(--text-muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:.88rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.modal-close:hover{background:#ff3d6b;color:#fff}
.modal-body{padding:22px}.modal-footer{padding:14px 22px;border-top:1px solid rgba(0,180,140,.08);display:flex;gap:10px;justify-content:flex-end}
.upload-area{
  border:2px dashed rgba(0,180,140,.3);border-radius:var(--radius-sm);padding:18px;
  text-align:center;transition:var(--transition);color:var(--text-muted);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(0,180,140,.04);pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
label:hover .upload-area,label:active .upload-area{
  border-color:#00e5b0;color:#00e5b0;background:rgba(0,229,176,.1);
}
.upload-area i{font-size:1.5rem}
.upload-area span{font-size:.86rem;font-weight:500}
.upload-area small{font-size:.75rem;opacity:.7}
/* Fix para label que actúa como botón */
label[for]{cursor:pointer;display:block;}
.toast{position:fixed;top:20px;right:20px;z-index:9999;display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:.88rem;font-weight:500;max-width:380px;transition:opacity .4s;animation:toastIn .3s ease;}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.toast button{background:none;border:none;cursor:pointer;margin-left:auto;opacity:.7}
.toast-success{background:rgba(6,50,38,.96);border:1px solid #00e5b0;color:#6ee7b7}.toast-error{background:rgba(55,8,8,.96);border:1px solid #ff3d6b;color:#fca5a5}.toast-warning{background:rgba(55,22,2,.96);border:1px solid #ffb700;color:#fcd34d}.toast-info{background:rgba(8,20,50,.96);border:1px solid #00b4ff;color:#93c5fd}
.meta-card{background:rgba(10,18,42,.88);border:1px solid rgba(0,180,140,.16);border-radius:var(--radius);padding:18px;transition:var(--transition);}.meta-card:hover{border-color:rgba(0,180,140,.3);box-shadow:0 8px 28px rgba(0,0,0,.4)}.meta-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.meta-name{font-weight:600;font-size:.92rem}.meta-progress-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted);margin-top:5px}
.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.filter-bar .form-control{max-width:175px}
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.7)}
.empty-state{text-align:center;padding:56px 20px;color:var(--text-muted)}.empty-state i{font-size:2.8rem;margin-bottom:14px;opacity:.28;display:block}.empty-state p{font-size:.92rem;margin-bottom:18px}
.divider{border:none;border-top:1px solid rgba(0,180,140,.1);margin:18px 0}
@media(max-width:900px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.sidebar-close{display:flex}.main-content{margin-left:0}.hamburger{display:flex}.sidebar-overlay.open{display:block}.grid-2,.grid-3{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.page-content{padding:14px}.stats-grid{grid-template-columns:1fr}.filter-bar .form-control{max-width:100%;width:100%}.auth-card{padding:28px 18px}}


/* ══════════════════════════════════════════
   FIXES PARA WEBVIEW ANDROID / MOVIL
══════════════════════════════════════════ */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%) !important; width: 260px !important; }
    .sidebar.open { transform: translateX(0) !important; }
    .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; }
    .page-content { padding: 12px !important; overflow-x: hidden !important; }
    .hamburger { display: flex !important; }
    .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; }
    table { min-width: 480px; }
    .grid-2, .grid-3, .stats-grid { grid-template-columns: 1fr !important; }
    .topbar { padding: 0 12px !important; }
    .topbar-date { display: none !important; }
    .modal { max-width: calc(100vw - 16px) !important; margin: 8px !important; max-height: 92vh !important; }
    .modal-overlay { padding: 8px !important; align-items: flex-end !important; }
    .stat-card { padding: 14px 16px !important; }
    .stat-value { font-size: 1.1rem !important; }
    .filter-bar { flex-direction: column !important; align-items: stretch !important; }
    .filter-bar .form-control { max-width: 100% !important; width: 100% !important; }
    .card-header { flex-wrap: wrap !important; gap: 8px !important; }
}
@media (max-width: 400px) {
    .page-content { padding: 8px !important; }
    .btn { padding: 9px 12px !important; font-size: .82rem !important; }
    .stat-value { font-size: 1rem !important; }
}

/* ── Vista escritorio/móvil para tablas ── */
.desktop-only { display: block; }
.mobile-cards  { display: none; }

@media (max-width: 800px) {
    .desktop-only { display: none !important; }
    .mobile-cards  { display: block !important; }
    .mobile-cards > div:last-child { border-bottom: none !important; }
}