/* ============================================================
   Siqueiros Beraka — Sistema escolar (prototipo) · KAMIOS
   Tema CLARO + OSCURO (como AireBahía). Verde principal,
   amarillo complementario, negro (uniformes). Cero emojis.
   Responsive: escritorio / tableta / móvil.
   ============================================================ */

/* ---------- TOKENS · TEMA CLARO (default) ---------- */
:root{
  --green-900:#14401a; --green-800:#1B5E20; --green-700:#2E7D32; --green-600:#388E3C;
  --green-500:#43A047; --green-100:#C8E6C9; --green-50:#EAF5EB;
  --gold:#C9A227; --gold-700:#9C7E1A; --yellow:#FDD835; --yellow-soft:#FFF3C4;
  --amber:#D68910; --red:#C0392B; --blue:#1E6FA8;

  --bg:#eef2ee; --surface:#ffffff; --surface-2:#f6f9f6; --elevated:#ffffff;
  --ink:#1a1f1a; --ink-soft:#3c423c; --muted:#6b746b; --line:#e2e7e2;
  --side-bg:#ffffff; --top-bg:#ffffff;
  --accent:var(--green-700); --accent-soft:var(--green-50);
  --grad-green:linear-gradient(135deg,#14401a 0%,#2E7D32 55%,#43A047 100%);
  --grad-gold:linear-gradient(135deg,#9C7E1A 0%,#C9A227 50%,#FDD835 100%);
  --grad-hero:linear-gradient(140deg,#0f110f 0%,#14401a 45%,#2E7D32 100%);
  --shadow:0 2px 10px #0000001a; --shadow-lg:0 16px 48px #00000026;
  --radius:14px; --t:.22s cubic-bezier(.4,0,.2,1);
}
/* ---------- TOKENS · TEMA OSCURO ---------- */
[data-theme="dark"]{
  --green-900:#a5d6a7; --green-800:#81c784; --green-700:#66bb6a; --green-600:#4caf50;
  --green-500:#43A047; --green-100:#1f3324; --green-50:#16241a;
  --gold:#d4b24a; --gold-700:#e0c878; --yellow:#ffe566; --yellow-soft:#2c2a16;
  --amber:#e0a030; --red:#e57373; --blue:#5b9bd5;

  --bg:#0d120e; --surface:#161d18; --surface-2:#1b241d; --elevated:#1e271f;
  --ink:#e8efe8; --ink-soft:#c2ccc2; --muted:#8b968b; --line:#28342b;
  --side-bg:#121912; --top-bg:#121912;
  --accent:#66bb6a; --accent-soft:#16241a;
  --grad-green:linear-gradient(135deg,#1f5128 0%,#2E7D32 55%,#43A047 100%);
  --grad-gold:linear-gradient(135deg,#9C7E1A 0%,#C9A227 50%,#e0c878 100%);
  --grad-hero:linear-gradient(140deg,#070a07 0%,#0f2a14 50%,#1B5E20 100%);
  --shadow:0 2px 10px #00000040; --shadow-lg:0 16px 48px #00000066;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
h1,h2,h3,h4{font-family:'Fraunces','Playfair Display',Georgia,serif;margin:0;font-weight:600;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
button{font-family:inherit}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon.sm{width:16px;height:16px} .icon.lg{width:26px;height:26px}

/* ============================================================
   LOGIN — tarjeta con pestañas laterales (móvil: arriba)
   ============================================================ */
#login{position:fixed;inset:0;background:var(--grad-hero);display:grid;place-items:center;padding:20px;z-index:100;transition:opacity .4s,visibility .4s}
#login.hide{opacity:0;visibility:hidden}
.login-shell{display:flex;align-items:stretch;animation:pop .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.login-tabs{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 0;z-index:1}
.ltab{width:52px;height:50px;display:grid;place-items:center;border:none;background:#ffffff1f;color:#fff;cursor:pointer;border-radius:15px 0 0 15px;transition:var(--t);transform:translateX(12px);backdrop-filter:blur(4px)}
.ltab:hover{background:#ffffff36}
.ltab.active{background:var(--surface);color:var(--green-800);transform:translateX(15px);box-shadow:-7px 4px 18px #0003}
.login-card{background:var(--surface);border-radius:22px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:34px 32px;text-align:center;position:relative;z-index:2}
.login-card .seal{width:64px;height:64px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700;color:#14401a;font-size:30px;margin:0 auto 12px;box-shadow:0 6px 18px #c9a22755}
.login-card h1{font-size:1.32rem;color:var(--green-900)}
.login-card .tag{color:var(--muted);font-size:.82rem;margin:3px 0 6px}
.role-badge{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--green-800);padding:6px 14px;border-radius:20px;font-size:.84rem;font-weight:700;margin:8px 0 18px}
.login-card .field{text-align:left;margin-bottom:13px}
.login-card .btn{width:100%;justify-content:center;margin-top:6px}
.login-foot{margin-top:18px;font-size:.72rem;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:640px){
  .login-shell{flex-direction:column;width:100%;max-width:400px}
  .login-tabs{flex-direction:row;justify-content:center;padding:0 0 10px;gap:10px}
  .ltab{border-radius:13px;transform:none;width:50px;height:46px;box-shadow:none}
  .ltab.active{transform:translateY(2px)}
  .login-card{border-radius:18px}
}

/* ============================================================
   APP SHELL
   ============================================================ */
#app{display:none;min-height:100vh}
#app.show{display:grid;grid-template-columns:248px 1fr;grid-template-rows:auto 1fr}
.topbar{grid-column:1/3;background:var(--top-bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:13px;padding:11px 18px;position:sticky;top:0;z-index:30}
.topbar .seal{width:36px;height:36px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700;color:#14401a;font-size:16px}
.topbar .tt{line-height:1.1}
.topbar .tt b{color:var(--green-900);font-family:'Fraunces',serif;font-size:1rem}
.topbar .tt small{color:var(--muted);font-size:.7rem;letter-spacing:.4px}
.topbar .sp{margin-left:auto}
.role-chip{display:flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--green-800);padding:6px 12px;border-radius:20px;font-size:.82rem;font-weight:600}
.iconbtn{appearance:none;border:1px solid var(--line);background:var(--surface);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);transition:var(--t)}
.iconbtn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--green-100)}
.iconbtn:focus-visible,.ltab:focus-visible,.side a:focus-visible,.btn:focus-visible,.subtabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.side{background:var(--side-bg);border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:3px;position:sticky;top:59px;height:calc(100vh - 59px);overflow-y:auto}
.side .grp{font-size:.67rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:14px 10px 6px;font-weight:700}
.side a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink-soft);text-decoration:none;font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--t);border:none;background:none;text-align:left;width:100%}
.side a:hover{background:var(--accent-soft);color:var(--green-800)}
.side a.active{background:var(--grad-green);color:#fff;box-shadow:0 4px 12px #2e7d3240}
[data-theme="dark"] .side a.active{color:#fff}
.side a.lock{color:var(--muted);cursor:not-allowed;opacity:.7}
.side a.lock:hover{background:none;color:var(--muted)}
.side a .tagx{margin-left:auto;font-size:.58rem;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:6px;letter-spacing:.3px}
.side a .on{background:var(--yellow);color:#5a4500} .side a.active .on{background:#fff;color:var(--green-800)}
.side a .soon{background:var(--line);color:var(--muted)}

main{padding:24px;max-width:1180px;width:100%;margin:0 auto}
.route{display:none} .route.active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.crumb{color:var(--muted);font-size:.82rem;margin-bottom:4px;display:flex;align-items:center;gap:6px}
h2.title{font-size:1.5rem;color:var(--green-900);margin-bottom:3px}
.sub{color:var(--muted);font-size:.9rem;margin-bottom:20px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;position:relative;overflow:hidden;transition:var(--t)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green-500)}
.kpi.warn::after{background:var(--amber)} .kpi.bad::after{background:var(--red)} .kpi.gold::after{background:var(--gold)}
.kpi .ic{position:absolute;right:14px;top:14px;color:var(--green-100)}
.kpi .v{font-size:1.65rem;font-weight:700;color:var(--green-900);font-family:'Fraunces',serif}
.kpi.warn .v{color:var(--amber)} .kpi.bad .v{color:var(--red)} .kpi.gold .v{color:var(--gold-700)}
.kpi .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.card h3{color:var(--green-900);font-size:1.08rem;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.chart-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.legend{display:flex;flex-direction:column;gap:8px;font-size:.85rem}
.legend span{display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.85rem}
.bar-row .lbl{width:92px;color:var(--ink-soft);font-weight:600}
.bar-track{flex:1;background:var(--accent-soft);border-radius:8px;height:22px;overflow:hidden}
.bar-fill{height:100%;background:var(--grad-green);border-radius:8px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar-row .val{width:96px;text-align:right;font-weight:700;color:var(--green-800)}

.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.mod{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--surface);transition:var(--t);cursor:pointer;position:relative}
.mod:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--green-100)}
.mod .mic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:12px}
.mod.on .mic{background:var(--grad-green);color:#fff}
.mod h4{font-size:1rem;color:var(--green-900);margin-bottom:3px}
.mod p{font-size:.8rem;color:var(--muted);margin:0}
.mod.lock{opacity:.6;cursor:not-allowed} .mod.lock:hover{transform:none;box-shadow:none}
.mod .st{position:absolute;top:14px;right:14px;font-size:.58rem;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:6px}
.mod.on .st{background:var(--yellow);color:#5a4500} .mod.lock .st{background:var(--line);color:var(--muted)}

table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:10px 11px;border-bottom:1px solid var(--line)}
th{font-size:.71rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;position:sticky;top:0;background:var(--surface)}
td.r,th.r{text-align:right}
tbody tr{transition:background .15s} tbody tr:hover td{background:var(--accent-soft)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700}
.pill.ok{background:var(--green-50);color:var(--green-700)} .pill.pend{background:var(--yellow-soft);color:var(--gold-700)}
.pill.venc{background:var(--green-50);color:var(--red)} .pill.abono{background:var(--accent-soft);color:var(--blue)}
[data-theme="dark"] .pill.venc{background:#3a1f1f}

.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.subtabs button{appearance:none;border:none;background:none;padding:11px 15px;font-size:.9rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:var(--t)}
.subtabs button:hover{color:var(--green-700)}
.subtabs button.active{color:var(--green-900);border-bottom-color:var(--gold)}
.subpanel{display:none} .subpanel.active{display:block;animation:fade .22s ease}

.btn{appearance:none;border:none;border-radius:10px;padding:11px 18px;font-weight:700;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:var(--t)}
.btn:active{transform:scale(.97)}
.btn.green{background:var(--grad-green);color:#fff;box-shadow:0 4px 12px #2e7d3233}
[data-theme="dark"] .btn.green{color:#fff}
.btn.gold{background:var(--grad-gold);color:#14401a}
.btn.ghost{background:var(--surface);border:1.5px solid var(--line);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--green-500);background:var(--accent-soft)}
.btn.wa{background:#1f7a44;color:#fff}
.btn:hover{filter:brightness(1.06)}
select,input{padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:.92rem;font-family:inherit;width:100%;background:var(--surface);color:var(--ink);transition:var(--t)}
select:focus,input:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--accent-soft)}
label{font-size:.78rem;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px}
.field{margin-bottom:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.totbar{display:flex;justify-content:space-between;align-items:center;background:var(--accent-soft);border-radius:12px;padding:14px 18px;margin-top:8px}
.totbar .big{font-size:1.45rem;font-weight:700;font-family:'Fraunces',serif}

.note{background:var(--yellow-soft);border:1px solid var(--yellow);border-radius:10px;padding:11px 15px;font-size:.83rem;margin-bottom:18px;display:flex;gap:9px;align-items:flex-start;color:var(--gold-700)}
[data-theme="dark"] .note{color:var(--yellow)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green-900);color:var(--bg);padding:13px 22px;border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.35s;display:flex;align-items:center;gap:10px;z-index:90}
[data-theme="dark"] .toast{background:var(--green-700);color:#06120a}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.welcome{text-align:center;padding:36px 18px}
.welcome .wic{width:84px;height:84px;border-radius:24px;background:var(--grad-green);color:#fff;display:grid;place-items:center;margin:0 auto 18px}
.welcome h2{font-size:1.6rem;color:var(--green-900)}

.ad{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side-box{border-radius:var(--radius);padding:18px;border:1px solid var(--line)}
.side-box.antes{background:var(--surface-2)} .side-box.despues{background:var(--accent-soft);border-color:var(--green-500)}
.side-box h4{margin-bottom:10px} .side-box.antes h4{color:var(--muted)} .side-box.despues h4{color:var(--green-900)}
.ad ul{list-style:none;margin:0;padding:0} .ad li{display:flex;gap:9px;margin-bottom:10px;font-size:.88rem;align-items:flex-start}
.ad li .icon{margin-top:1px} .antes li .icon{color:var(--red)} .despues li .icon{color:var(--green-600)}
.codeblock{font-family:'Courier New',monospace;font-size:.72rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px;color:var(--muted);margin-bottom:12px;overflow-x:auto}

footer{text-align:center;color:var(--muted);font-size:.76rem;padding:26px;border-top:1px solid var(--line);margin-top:10px}

/* ---------- Visor de estado de cuenta (hoja membretada) ---------- */
.modal{position:fixed;inset:0;background:#0009;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;z-index:80}
.modal.show{display:flex;animation:fade .2s ease}
.modal-close{position:fixed;top:16px;right:20px;width:42px;height:42px;border-radius:50%;border:none;background:#fff;color:#1a1f1a;cursor:pointer;display:grid;place-items:center;box-shadow:var(--shadow-lg);z-index:81}
/* La hoja es papel: colores fijos (claros) en cualquier tema */
.sheet{background:#fff;color:#1f241f;width:100%;max-width:740px;border-radius:8px;box-shadow:var(--shadow-lg);overflow:hidden;font-size:13.5px;animation:pop .35s cubic-bezier(.2,.9,.3,1.1)}
.sheet-head{background:linear-gradient(135deg,#14401a,#2E7D32);color:#fff;padding:22px 30px;display:flex;align-items:center;gap:16px}
.sheet-head .sseal{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#9C7E1A,#FDD835);display:grid;place-items:center;font-family:'Fraunces',serif;font-weight:700;color:#14401a;font-size:24px;flex-shrink:0}
.sheet-head h2{font-size:1.25rem;margin:0;color:#fff}
.sheet-head .doc{margin-left:auto;text-align:right;font-size:.8rem;opacity:.92}
.sheet-body{padding:24px 30px}
.sheet-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin-bottom:18px;font-size:.86rem}
.sheet-meta b{color:#14401a}
.sheet table{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:6px}
.sheet th{background:#EAF5EB;color:#2E7D32;text-transform:uppercase;font-size:.68rem;letter-spacing:.4px;padding:8px 10px;text-align:left}
.sheet td{padding:7px 10px;border-bottom:1px solid #eee}
.sheet td.r,.sheet th.r{text-align:right}
.sheet .tot{display:flex;justify-content:flex-end;gap:30px;padding:14px 0 4px;font-size:.9rem}
.sheet .tot .saldo{color:#C0392B;font-weight:700;font-size:1.1rem}
.sheet-foot{border-top:2px solid #14401a;margin-top:8px;padding:16px 30px 22px;font-size:.76rem;color:#5a5f5a;background:#fafbf9}
.sheet-foot strong{color:#14401a}
@media print{body *{visibility:hidden}.modal,.modal *{visibility:visible}.modal{position:absolute;background:#fff;padding:0}.modal-close{display:none}}

/* ---------- RESPONSIVE: tableta ---------- */
@media(max-width:980px){
  #app.show{grid-template-columns:210px 1fr}
  .grid2{grid-template-columns:1fr}
}
/* ---------- RESPONSIVE: móvil ---------- */
.menu-btn{display:none}
@media(max-width:720px){
  #app.show{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:59px;width:240px;z-index:40;transform:translateX(-100%);transition:transform var(--t);box-shadow:var(--shadow-lg)}
  .side.open{transform:none}
  .menu-btn{display:grid}
  main{padding:16px}
  .row{grid-template-columns:1fr}
  .topbar .tt small{display:none}
}