:root {
    --bg:#f0edf8; --card:#fff; --text:#2d2b3a; --nav:#1a1a2e;
    --primary:#7c3aed; --primary-light:#ede9fe; --primary-dark:#5b21b6;
    --secondary:#ec4899; --muted:#8b8a9e; --border:#ddd6fe;
    --shadow:0 2px 12px rgba(124,58,237,.08);
    --ok-bg:#dcfce7; --ok-text:#166534; --debt-bg:#fee2e2; --debt-text:#991b1b;
    --pending-bg:#fef3c7; --pending-text:#92400e;
    --th-color:#7c3aed;
    --gradient:linear-gradient(135deg,#7c3aed,#ec4899);
}
[data-theme=dark] {
    --bg:#0f0f1a; --card:#1a1a2e; --text:#e0e0f0; --nav:#0a0a14;
    --primary:#a855f7; --primary-light:#2a1f4e;
    --secondary:#f472b6; --muted:#8b8a9e; --border:#2a2a4e;
    --shadow:0 2px 12px rgba(0,0,0,.4);
    --ok-bg:#1a3b1a; --ok-text:#86efac; --debt-bg:#3b1a1a; --debt-text:#fca5a5;
    --pending-bg:#3b3a1a; --pending-text:#fde68a;
    --th-color:#a855f7;
    --gradient:linear-gradient(135deg,#a855f7,#f472b6);
}
* { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden }

nav { background:var(--nav); color:#fff; padding:.5rem 1rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; min-height:48px }
.nav-left { display:flex; align-items:center; gap:.5rem; min-width:0 }
.nav-logo { width:32px; height:32px; border-radius:50%; object-fit:cover; border:2px solid var(--secondary); flex-shrink:0 }
.nav-brand { font-weight:800; font-size:.9rem; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hamburger { display:flex; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; width:36px; height:36px; justify-content:center; align-items:center; flex-shrink:0 }
.hamburger span { display:block; width:22px; height:2.5px; background:#fff; border-radius:2px; transition:.3s }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.active span:nth-child(2) { opacity:0 }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }
.nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--nav); flex-direction:column; padding:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.2); max-height:80vh; overflow-y:auto }
.nav-links.open { display:flex }
.nav-links a { color:rgba(255,255,255,.8); text-decoration:none; font-size:.82rem; padding:.5rem .7rem; border-radius:6px }
.nav-links a:hover { background:rgba(255,255,255,.08) }
@media(min-width:769px){
    .hamburger { display:none }
    .nav-links { display:flex; position:static; flex-direction:row; background:transparent; padding:0; gap:.2rem; box-shadow:none; align-items:center; max-height:none; overflow-y:visible }
    .nav-links a { padding:.25rem .5rem; font-size:.76rem }
}

main { max-width:1100px; margin:0 auto; padding:.6rem .75rem }

.login-box { max-width:360px; margin:2rem auto; background:var(--card); padding:2rem 1.5rem; border-radius:16px; box-shadow:var(--shadow); text-align:center; border:1px solid var(--border) }
@media(max-width:400px){ .login-box { margin:.5rem; padding:1.5rem 1rem } }
.login-logo { width:72px; height:72px; border-radius:50%; object-fit:cover; margin-bottom:.6rem; border:3px solid var(--primary-light); box-shadow:0 0 0 3px var(--primary) }
.login-box h1 { font-size:1.4rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.subtitle { color:var(--muted); margin-bottom:1.2rem; font-size:.82rem }
.hint { margin-top:.8rem; font-size:.75rem; color:var(--muted) }

input, select, textarea { width:100%; padding:.6rem .7rem; margin:.25rem 0; border:1.5px solid var(--border); border-radius:10px; font-size:.88rem; background:var(--card); color:var(--text) }
input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light) }

button, .btn { background:var(--gradient); color:#fff; border:none; cursor:pointer; font-weight:700; border-radius:10px; padding:.6rem 1.1rem; font-size:.85rem; display:inline-flex; align-items:center; gap:.35rem; justify-content:center }
button:active, .btn:active { transform:scale(.97) }
.btn-sm { padding:.4rem .7rem; font-size:.74rem; border-radius:6px; min-height:32px }
@media(max-width:400px){ button, .btn { padding:.55rem .8rem; font-size:.82rem } }
.btn-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); padding:.3rem .7rem; border-radius:6px; text-decoration:none; font-size:.76rem; display:inline-block; width:auto }
.btn-outline:hover { background:var(--primary-light) }
.btn-red { background:#dc2626 }
.btn-green { background:#16a34a }

.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; flex-wrap:wrap; gap:.4rem }
.dashboard-header h2 { font-size:1.1rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.5rem; margin-bottom:1rem }
@media(max-width:400px){ .cards { grid-template-columns:repeat(2,1fr) } }
.card { background:var(--card); padding:.8rem .4rem; border-radius:10px; box-shadow:var(--shadow); text-align:center; border:1px solid var(--border) }
.card-icon { font-size:1.2rem; display:block; margin-bottom:.15rem }
.card-num { display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.5px }
.card-label { font-size:.62rem; text-transform:uppercase; opacity:.7; font-weight:600; margin-top:.1rem }
.card-green .card-num { color:#16a34a } .card-green { border-top:2px solid #16a34a }
.card-blue .card-num { color:#2563eb } .card-blue { border-top:2px solid #2563eb }
.card-pink .card-num { color:#ec4899 } .card-pink { border-top:2px solid #ec4899 }
.card-red .card-num { color:#dc2626 } .card-red { border-top:2px solid #dc2626 }
.card-amber .card-num { color:#d97706 } .card-amber { border-top:2px solid #d97706 }
.card-indigo .card-num { color:#7c3aed } .card-indigo { border-top:2px solid #7c3aed }

.section, .form-box { background:var(--card); padding:1rem; border-radius:10px; box-shadow:var(--shadow); margin-bottom:.8rem; border:1px solid var(--border) }
.section h3 { font-size:.95rem; font-weight:800; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.5rem }
.grid-2 { display:grid; grid-template-columns:1fr; gap:.8rem }
@media(min-width:640px){ .grid-2 { grid-template-columns:1fr 1fr } }

.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:.3rem }
.table-responsive table { margin-bottom:0 }
table { width:100%; border-collapse:collapse; font-size:.82rem }
th, td { padding:.4rem .35rem; border-bottom:1px solid var(--border); text-align:left }
th { font-size:.68rem; text-transform:uppercase; color:var(--th-color); font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap }
tr:hover td { background:var(--primary-light) }
.empty { text-align:center; color:var(--muted); padding:1.2rem }

.badge { display:inline-block; padding:.1rem .45rem; border-radius:20px; font-size:.68rem; font-weight:700 }
.badge-ok { background:var(--ok-bg); color:var(--ok-text) }
.badge-pending { background:var(--pending-bg); color:var(--pending-text) }
.badge-debt { background:var(--debt-bg); color:var(--debt-text) }

.flash { padding:.5rem .8rem; border-radius:10px; margin-bottom:.3rem; font-size:.8rem; margin-top:.3rem }
.flash-success { background:var(--ok-bg); color:var(--ok-text); border-left:3px solid #16a34a }
.flash-error { background:var(--debt-bg); color:var(--debt-text); border-left:3px solid #dc2626 }

.inline-form { display:flex; gap:.25rem; align-items:center; flex-wrap:wrap }
.inline-form input, .inline-form select { width:auto; margin:0; padding:.25rem .4rem; font-size:.73rem }

.form-box { max-width:450px; margin:0 auto }
.form-box h2 { font-size:1rem; font-weight:800; margin-bottom:.5rem; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

.chart-bar-row { display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem }
.chart-bar-label { min-width:70px; font-size:.72rem; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; font-weight:600 }
@media(min-width:640px){ .chart-bar-label { min-width:130px; font-size:.8rem } }
.chart-bar-track { flex:1; height:18px; background:var(--primary-light); border-radius:6px; overflow:hidden }
.chart-bar-fill { height:100%; background:var(--debt-text); border-radius:6px; min-width:3px; transition:width .4s }
.chart-bar-value { font-size:.72rem; font-weight:700; width:42px; text-align:right }
.debtor-days { font-size:.75rem; font-weight:700; width:32px; text-align:right }

.horario-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.horario-grid { display:grid; grid-template-columns:50px repeat(5,1fr); gap:2px; font-size:.65rem }
@media(min-width:640px){ .horario-grid { grid-template-columns:70px repeat(5,1fr); gap:3px; font-size:.72rem } }
.horario-header { font-weight:700; padding:.25rem; text-align:center; background:var(--primary-light); border-radius:4px; color:var(--primary); font-size:.58rem; text-transform:uppercase }
.horario-hour { font-weight:700; padding:.25rem; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.6rem; border-right:1.5px solid var(--border) }
.horario-cell { padding:.15rem; border-radius:4px; background:var(--primary-light); min-height:26px; display:flex; flex-direction:column; align-items:center; justify-content:center }
.horario-cell .alumno-nombre { font-weight:600; font-size:.6rem; color:var(--primary-dark); text-align:center; line-height:1.2 }
.horario-cell .alumno-deuda { font-size:.55rem; color:var(--debt-text); font-weight:700 }
.horario-cell.debt { background:var(--debt-bg); border:1px solid var(--debt-text) }
.horario-cell.paid { background:var(--ok-bg) }

.balance-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-top:.3rem }
@media(max-width:480px){ .balance-grid { grid-template-columns:1fr; gap:.3rem } }
.balance-item { padding:.6rem .4rem; border-radius:8px; text-align:center }
.balance-item.income { background:var(--ok-bg) }
.balance-item.expense { background:var(--debt-bg) }
.balance-item.net.positive { background:var(--ok-bg) }
.balance-item.net.negative { background:var(--debt-bg) }
.balance-amount { font-size:1.1rem; font-weight:800 }
.balance-label { font-size:.62rem; text-transform:uppercase; opacity:.7; font-weight:600; margin-top:.1rem }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
@media(min-width:640px){ .stats-grid { grid-template-columns:repeat(3,1fr) } }
.stat-card { padding:.6rem; border-radius:8px; text-align:center; border:1px solid var(--border) }
.stat-card .stat-num { font-size:1rem; font-weight:800; display:block }
.stat-card .stat-label { font-size:.6rem; text-transform:uppercase; opacity:.7; font-weight:600; margin-top:.1rem }

/* scroll-to-top */
.scroll-top { position:fixed; bottom:1.5rem; right:1.5rem; width:40px; height:40px; border-radius:50%; background:var(--gradient); color:#fff; border:none; font-size:1.2rem; cursor:pointer; box-shadow:0 4px 14px rgba(124,58,237,.3); display:none; align-items:center; justify-content:center; z-index:99; padding:0 }
.scroll-top.show { display:flex }
.scroll-top:hover { transform:scale(1.1) }