*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── PALETA EXTENDIDA ── */
  --color-primary:#3B82F6;
  --color-success:#10B981;
  --color-warning:#F59E0B;
  --color-danger:#EF4444;
  --color-purple:#8B5CF6;
  --color-cyan:#06B6D4;
  --color-teal:#14B8A6;
  --color-orange:#F97316;

  /* ── SIDEBAR (oscuro, intacto) ── */
  --sb-bg:#1e3a5f;
  --sb-border:#2a4f82;
  --sb-text:#9ca3af;
  --sb-text-active:#f9fafb;
  --sb-section:#3a3f50;
  --sb-hover:rgba(255,255,255,.06);
  --sb-active:rgba(41,121,255,.15);

  /* ── ÁREA PRINCIPAL (blanco roto, papel) ── */
  --bg:#f4f5f7;
  --bg2:#eef0f3;
  --surface:#ffffff;
  --surface2:#f9fafb;
  --border:#e2e5ea;
  --border2:#d1d5db;

  /* ── TEXTO ── */
  --text:#1a1d24;
  --text-mid:#4b5563;
  --text-dim:#9ca3af;
  --white:#ffffff;

  /* ── COLORES IAEL (del logo) ── */
  --iael-red:#c1121f;
  --iael-red-s:#e63946;
  --iael-red-bg:#fff1f2;
  --iael-red-border:#fecdd3;

  --iael-blue:#1560bd;
  --iael-blue-s:#2979ff;
  --iael-blue-bg:#eff6ff;
  --iael-blue-border:#bfdbfe;

  --iael-gold:#d4860a;
  --iael-gold-s:#f4a261;
  --iael-gold-bg:#fffbeb;
  --iael-gold-border:#fde68a;

  /* ── ESTADOS ── */
  --green:#059669;
  --green-bg:#f0fdf4;
  --green-border:#bbf7d0;

  --font:'Sora',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:10px;
  --r2:16px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08);
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}
#app{height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column}
.app{display:flex;height:100vh;width:100vw;overflow:hidden}

/* ══ SIDEBAR (oscuro) ══════════════════════════════════════════ */
.sidebar{
  width:72px;background:var(--sb-bg);
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0;gap:2px;
  transition:width .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;flex-shrink:0;position:relative;z-index:10;
  box-shadow:2px 0 12px rgba(0,0,0,.18);
}
.sidebar.open{width:256px;align-items:flex-start;padding:20px 14px}
.sidebar-logo{
  display:flex;align-items:center;gap:12px;padding:8px 10px;margin-bottom:6px;
  cursor:pointer;width:100%;border-radius:var(--r);transition:background .2s;
}
.sidebar-logo:hover{background:rgba(255,255,255,.06)}
.logo-img{width:42px;height:42px;object-fit:contain;flex-shrink:0}
.logo-text{display:none;flex-direction:column;white-space:nowrap}
.sidebar.open .logo-text{display:flex}
.logo-text strong{font-size:14px;font-weight:800;color:#f9fafb;letter-spacing:.3px}
.logo-text span{font-size:10px;color:#6b7280;font-family:var(--mono)}

.sidebar-divider{width:calc(100% - 16px);height:1px;background:#1a3356;margin:8px 8px}
.sidebar.open .sidebar-divider{width:100%;margin:8px 0}

.sidebar-section{
  width:100%;font-size:9.5px;font-weight:700;letter-spacing:1.8px;
  color:var(--sb-section);text-transform:uppercase;padding:12px 10px 4px;display:none;
}
.sidebar.open .sidebar-section{display:block}

.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;border-radius:var(--r);cursor:pointer;
  transition:all .18s;color:var(--sb-text);text-decoration:none;
  white-space:nowrap;border:none;background:none;
  font-family:var(--font);font-size:13px;font-weight:500;
}
.sidebar.open .nav-item{padding:9px 12px}
.nav-item:hover{background:var(--sb-hover);color:var(--sb-text-active)}
.nav-item.active{
  background:rgba(255,255,255,.18);color:#ffffff;
  border-left:3px solid var(--iael-blue-s);
}
.sidebar.open .nav-item.active{border-left:none;background:rgba(255,255,255,.18);color:#ffffff}
.nav-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.nav-label{display:none;font-size:12.5px}
.sidebar.open .nav-label{display:block}
.nav-badge{
  margin-left:auto;background:var(--iael-red);color:#fff;
  font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:20px;display:none;min-width:20px;text-align:center;
}
.sidebar.open .nav-badge{display:block}

.sidebar-footer{margin-top:auto;width:100%;padding-top:8px;border-top:1px solid #2a4f82}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--iael-red),var(--iael-gold-s));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#fff;flex-shrink:0;
}
.user-info{display:none;flex-direction:column;overflow:hidden}
.sidebar.open .user-info{display:flex}
.user-info strong{font-size:12px;color:#f9fafb;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info span{font-size:10.5px;color:#6b7280;white-space:nowrap}

/* ══ MAIN ÁREA (claro) ══════════════════════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ══ TOPBAR ══ */
.topbar{
  height:58px;background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:14px;flex-shrink:0;
  box-shadow:var(--shadow);
}
.topbar-toggle{
  background:none;border:none;color:var(--text-mid);
  font-size:19px;cursor:pointer;padding:5px;border-radius:8px;
  transition:all .18s;display:flex;align-items:center;
}
.topbar-toggle:hover{background:var(--bg);color:var(--text)}
.topbar-title{font-size:15px;font-weight:700;color:var(--text)}
.topbar-sub{font-size:11.5px;color:var(--text-dim)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.period-chip{
  background:var(--green-bg);border:1px solid var(--green-border);
  color:var(--green);font-size:11.5px;font-weight:700;
  padding:5px 14px;border-radius:20px;font-family:var(--mono);
  display:flex;align-items:center;gap:5px;
}
.notif-btn{
  background:none;border:1px solid var(--border);color:var(--text-mid);font-size:16px;
  cursor:pointer;padding:7px 9px;border-radius:9px;transition:all .18s;position:relative;
  display:flex;align-items:center;
}
.notif-btn:hover{background:var(--bg);color:var(--text);border-color:var(--border2)}
.notif-dot{
  position:absolute;top:5px;right:5px;width:7px;height:7px;
  background:var(--iael-red);border-radius:50%;border:2px solid var(--surface);
}

/* ══ CONTENT ══ */
.content{flex:1;overflow-y:auto;padding:24px;background:var(--bg)}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-track{background:transparent}
.content::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ══ PAGES ══ */
.page{display:none;animation:fadeUp .3s ease forwards}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ══ WELCOME BANNER ══ */
.welcome-banner{
  background:linear-gradient(135deg,#1a3a6e 0%,#1560bd 60%,#0e2d5a 100%);
  border-radius:var(--r2);padding:26px 30px;
  display:flex;align-items:center;gap:22px;
  margin-bottom:20px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);
}
.welcome-banner::before{
  content:'';position:absolute;right:-40px;top:-40px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.05);
}
.welcome-banner::after{
  content:'';position:absolute;right:60px;bottom:-60px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(212,134,10,.12);
}
.welcome-logo{width:64px;height:64px;object-fit:contain;flex-shrink:0;position:relative;z-index:1}
.welcome-text{position:relative;z-index:1}
.welcome-text h2{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
.welcome-text p{font-size:13px;color:rgba(255,255,255,.75);max-width:480px;line-height:1.6}
.welcome-actions{margin-left:auto;display:flex;gap:8px;flex-shrink:0;position:relative;z-index:1}

/* ══ BUTTONS ══ */
.btn{
  padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;
  cursor:pointer;border:none;font-family:var(--font);transition:all .18s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  box-shadow:var(--shadow);
}
.btn-primary{background:var(--iael-blue);color:#fff}
.btn-primary:hover{background:#1255a8;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-white{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:none}
.btn-white:hover{background:rgba(255,255,255,.25)}
.btn-ghost{background:var(--surface);color:var(--text-mid);border:1px solid var(--border);box-shadow:var(--shadow)}
.btn-ghost:hover{background:var(--bg);color:var(--text);border-color:var(--border2)}
.btn-danger{background:var(--iael-red-bg);color:var(--iael-red);border:1px solid var(--iael-red-border);box-shadow:none}
.btn-danger:hover{background:#ffe4e6;color:var(--iael-red)}
.btn-sm{padding:6px 13px;font-size:12px}

/* ══ KPI GRID ══ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px 22px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:all .22s;box-shadow:var(--shadow);
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border2)}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-accent,var(--iael-blue));
}
.kpi-card.red{--card-accent:var(--iael-red)}
.kpi-card.gold{--card-accent:var(--iael-gold)}
.kpi-card.blue{--card-accent:var(--iael-blue)}
.kpi-card.green{--card-accent:var(--green)}
.kpi-icon-wrap{
  position:absolute;right:18px;top:18px;
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.kpi-label{font-size:11px;color:var(--text-dim);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px}
.kpi-value{font-size:34px;font-weight:800;color:var(--text);font-family:var(--mono);line-height:1}
.kpi-sub{font-size:11.5px;color:var(--text-dim);margin-top:8px;display:flex;align-items:center;gap:6px}
.kpi-trend{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.kpi-trend.up{background:var(--green-bg);color:var(--green)}
.kpi-trend.down{background:var(--iael-red-bg);color:var(--iael-red)}

/* ══ PANELS ══ */
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-bottom:16px}
.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);
}
.panel-head{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;background:var(--surface);
}
.panel-title{font-size:13.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.panel-title .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-blue{background:var(--iael-blue)}
.dot-red{background:var(--iael-red)}
.dot-gold{background:var(--iael-gold)}
.dot-green{background:var(--green)}
.dot-gray{background:var(--text-dim)}
.panel-action{
  font-size:12px;color:var(--iael-blue);cursor:pointer;
  transition:opacity .18s;background:none;border:none;
  font-family:var(--font);font-weight:600;
}
.panel-action:hover{opacity:.7}
.panel-body{padding:18px 20px}

/* ══ ACTIVITY ══ */
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none;padding-bottom:0}
.act-icon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.act-blue{background:var(--iael-blue-bg);color:var(--iael-blue)}
.act-green{background:var(--green-bg);color:var(--green)}
.act-gold{background:var(--iael-gold-bg);color:var(--iael-gold)}
.act-red{background:var(--iael-red-bg);color:var(--iael-red)}
.act-content{flex:1;min-width:0}
.act-desc{font-size:12.5px;color:var(--text-mid);line-height:1.5}
.act-desc strong{color:var(--text);font-weight:600}
.act-time{font-size:11px;color:var(--text-dim);margin-top:2px;font-family:var(--mono)}

/* ══ QUICK STATS ══ */
.quick-stat{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.quick-stat:last-child{border-bottom:none}
.qs-left{flex:1;min-width:0}
.qs-label{font-size:12px;color:var(--text-mid);font-weight:500;margin-bottom:5px}
.qs-bar{width:100%;height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;border:1px solid var(--border)}
.qs-fill{height:100%;border-radius:3px;transition:width 1.2s cubic-bezier(.34,1.56,.64,1)}
.qs-value{font-size:12.5px;font-weight:700;font-family:var(--mono);color:var(--text);flex-shrink:0}

/* ══ CHART BARS ══ */
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:100px;padding:0 2px}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.bar{
  width:100%;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--iael-blue) 0%,#bfdbfe 100%);
  transition:height 1.2s cubic-bezier(.34,1.56,.64,1);cursor:pointer;
  border:1px solid var(--iael-blue-border);border-bottom:none;
}
.bar:hover{filter:brightness(.9)}
.bar-lbl{font-size:10px;color:var(--text-dim);font-family:var(--mono)}

/* ══ DATA TABLE ══ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{
  text-align:left;font-size:10.5px;font-weight:700;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.8px;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.data-table td{
  padding:12px 14px;font-size:13px;color:var(--text-mid);
  border-bottom:1px solid var(--border);vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--bg)}
.data-table td strong{color:var(--text);font-weight:600}

/* ══ BADGES ══ */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-blue{background:var(--iael-blue-bg);color:var(--iael-blue);border:1px solid var(--iael-blue-border)}
.badge-gold{background:var(--iael-gold-bg);color:var(--iael-gold);border:1px solid var(--iael-gold-border)}
.badge-red{background:var(--iael-red-bg);color:var(--iael-red);border:1px solid var(--iael-red-border)}
.badge-gray{background:var(--bg2);color:var(--text-dim);border:1px solid var(--border)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ══ MÓDULOS GRID ══ */
.modulos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.modulo-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px;
  display:flex;flex-direction:column;gap:12px;
  transition:all .22s;box-shadow:var(--shadow);
}
.modulo-card:hover{border-color:var(--border2);box-shadow:var(--shadow-md)}
.modulo-card.disabled{opacity:.55}
.modulo-head{display:flex;align-items:center;gap:12px}
.modulo-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.modulo-name{font-size:14px;font-weight:700;color:var(--text)}
.modulo-rol{font-size:11px;color:var(--text-dim);margin-top:1px}
.modulo-desc{font-size:12.5px;color:var(--text-mid);line-height:1.55}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--border)}
.toggle-label{font-size:12px;font-weight:600}
.toggle{position:relative;width:42px;height:23px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:23px;cursor:pointer;transition:.28s}
.toggle-slider::before{content:'';position:absolute;height:17px;width:17px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.28s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked + .toggle-slider{background:var(--iael-blue)}
.toggle input:checked + .toggle-slider::before{transform:translateX(19px)}

/* ══ FINANCIERO ══ */
.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.fin-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px;text-align:center;box-shadow:var(--shadow);
}
.fin-amount{font-size:26px;font-weight:800;font-family:var(--mono)}
.fin-lbl{font-size:11.5px;color:var(--text-dim);margin-top:5px;font-weight:500}

/* ══ FORMS ══ */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{font-size:11.5px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.5px}
.form-control{
  background:var(--surface);border:1px solid var(--border2);
  color:var(--text);font-family:var(--font);font-size:13.5px;
  padding:10px 13px;border-radius:9px;outline:none;
  transition:border-color .18s,box-shadow .18s;width:100%;
}
.form-control:focus{border-color:var(--iael-blue);box-shadow:0 0 0 3px rgba(21,96,189,.12)}
.form-control::placeholder{color:var(--text-dim)}
textarea.form-control{resize:vertical;min-height:76px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ══ INFO BOXES ══ */
.info-box{border-radius:9px;padding:13px 15px;font-size:13px;line-height:1.6;border:1px solid}
.info-box.blue{background:var(--iael-blue-bg);border-color:var(--iael-blue-border);color:var(--iael-blue)}
.info-box.green{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.info-box.gold{background:var(--iael-gold-bg);border-color:var(--iael-gold-border);color:var(--iael-gold)}
.info-box.red{background:var(--iael-red-bg);border-color:var(--iael-red-border);color:var(--iael-red)}

/* ══ SUM ROWS ══ */
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.sum-row:last-child{border-bottom:none;font-size:14.5px;font-weight:700;padding-top:10px}

/* ══ STEPS ══ */
.step-bar{display:flex;align-items:flex-start;margin-bottom:24px}
.step{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;left:44px;right:0;top:17px;height:2px;background:var(--border2)}
.step.done::after{background:var(--iael-blue)}
.step-num{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;flex-shrink:0;position:relative;z-index:1;
  border:2px solid var(--border2);color:var(--text-dim);background:var(--surface);
}
.step.done .step-num{background:var(--iael-blue);border-color:var(--iael-blue);color:#fff}
.step.active .step-num{border-color:var(--iael-blue);color:var(--iael-blue);background:var(--iael-blue-bg);box-shadow:0 0 0 4px rgba(21,96,189,.12)}
.step-info{font-size:11.5px;color:var(--text-dim)}
.step.active .step-info,.step.done .step-info{color:var(--text);font-weight:600}

/* ══ SEARCH ══ */
.search-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:9px;padding:9px 13px;margin-bottom:12px;
}
.search-bar:focus-within{border-color:var(--iael-blue);box-shadow:0 0 0 3px rgba(21,96,189,.1)}
.search-bar input{background:none;border:none;color:var(--text);font-family:var(--font);font-size:13.5px;outline:none;flex:1}
.search-bar input::placeholder{color:var(--text-dim)}

/* ══ LOGIN PAGE ══ */
.login-wrap{
  position:fixed;inset:0;
  background:linear-gradient(145deg,#f0f4ff 0%,#e8edf5 50%,#f4f1f8 100%);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.login-left{
  flex:1;max-width:520px;padding:60px;display:flex;flex-direction:column;
  justify-content:center;
}
.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.login-brand-logo{width:72px;height:72px;object-fit:contain}
.login-brand-text strong{font-size:22px;font-weight:800;color:var(--text);display:block}
.login-brand-text span{font-size:13px;color:var(--text-dim)}
.login-headline{font-size:30px;font-weight:800;color:var(--text);line-height:1.2;margin-bottom:10px}
.login-headline em{color:var(--iael-blue);font-style:normal}
.login-tagline{font-size:14px;color:var(--text-mid);line-height:1.6;margin-bottom:0}
.login-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.pill{
  padding:6px 14px;border-radius:20px;font-size:11.5px;font-weight:600;
  display:flex;align-items:center;gap:6px;border:1px solid;
}
.pill-blue{background:var(--iael-blue-bg);color:var(--iael-blue);border-color:var(--iael-blue-border)}
.pill-gold{background:var(--iael-gold-bg);color:var(--iael-gold);border-color:var(--iael-gold-border)}
.pill-green{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}

.login-divider{width:1px;background:var(--border);margin:40px 0;align-self:stretch}

.login-card{
  width:420px;background:var(--surface);
  border-radius:20px;padding:42px 44px;
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
  flex-shrink:0;
}
.login-logo-center{text-align:center;margin-bottom:20px}
.login-logo-center img{width:72px;height:72px;object-fit:contain}
.login-title{font-size:20px;font-weight:800;color:var(--text);text-align:center;margin-bottom:3px}
.login-sub{font-size:12.5px;color:var(--text-dim);text-align:center;margin-bottom:28px}
.login-sub code{background:var(--iael-blue-bg);color:var(--iael-blue);font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:5px}
.input-wrap{position:relative;margin-bottom:14px}
.input-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--text-dim)}
.login-input{
  width:100%;padding:12px 13px 12px 40px;
  background:var(--bg);border:1.5px solid var(--border2);
  border-radius:9px;color:var(--text);font-family:var(--font);font-size:13.5px;
  outline:none;transition:all .18s;
}
.login-input:focus{border-color:var(--iael-blue);background:var(--surface);box-shadow:0 0 0 3px rgba(21,96,189,.1)}
.login-input::placeholder{color:var(--text-dim)}
.eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;transition:color .18s;padding:2px}
.eye-btn:hover{color:var(--text)}
.login-options{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.check-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-mid);cursor:pointer}
.forgot{font-size:12.5px;color:var(--iael-blue);text-decoration:none;font-weight:600}
.forgot:hover{text-decoration:underline}
.login-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--iael-blue),#1255a8);
  color:#fff;border:none;border-radius:10px;font-family:var(--font);
  font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 16px rgba(21,96,189,.35);
}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(21,96,189,.4)}
.sga-tag{text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--text-dim);margin-top:20px}
.sga-tag span{color:var(--iael-blue)}

/* ══ AUDITORIA TABLE ══ */
.audit-action{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid}
.audit-insert{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.audit-update{background:var(--iael-blue-bg);color:var(--iael-blue);border-color:var(--iael-blue-border)}
.audit-delete{background:var(--iael-red-bg);color:var(--iael-red);border-color:var(--iael-red-border)}

/* ══ SECTION HEADER ══ */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);
}
.section-header h3{font-size:13px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.8px}

/* ══ STAT CHIPS (estructura) ══ */
.stat-chip{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r2);padding:18px 20px;text-align:center;box-shadow:var(--shadow);
  cursor:pointer;transition:all .2s;
}
.stat-chip:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-chip-val{font-size:30px;font-weight:800;font-family:var(--mono)}
.stat-chip-lbl{font-size:11.5px;color:var(--text-dim);margin-top:4px;font-weight:500}

@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.content-grid{grid-template-columns:1fr}}
*::-webkit-scrollbar{width:4px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* ── V2 ADDITIONS ── */
.role-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;border:1px solid}
.role-superadmin{background:#1a0533;color:#c4b5fd;border-color:#7c3aed}
.role-admin{background:var(--iael-blue-bg);color:var(--iael-blue);border-color:var(--iael-blue-border)}
.role-docente{background:var(--iael-gold-bg);color:var(--iael-gold);border-color:var(--iael-gold-border)}
.role-alumno{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.role-solo-lectura{background:var(--bg2);color:var(--text-dim);border-color:var(--border2)}
.content-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.perm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}
.perm-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);font-size:12px;color:var(--text-mid);font-weight:500}
.perm-item input{accent-color:var(--iael-blue);width:13px;height:13px}
.avatar-sm{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;flex-shrink:0}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(3px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--surface);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.14),0 6px 18px rgba(0,0,0,.08);min-width:440px;max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;transform:translateY(14px) scale(.98);transition:transform .25s;border:1px solid var(--border)}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:14.5px;font-weight:700;color:var(--text)}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;line-height:1;transition:color .15s;padding:2px}
.modal-close:hover{color:var(--text)}
.modal-body{padding:20px;overflow-y:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--surface2)}
.doc-modal-overlay{position:fixed;inset:0;background:rgba(20,24,34,.88);z-index:2000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s}
.doc-modal-overlay.open{opacity:1;pointer-events:all}
.doc-toolbar{background:#1a1d24;padding:10px 18px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #2e3240;flex-shrink:0;flex-wrap:wrap}
.doc-toolbar-title{color:#f9fafb;font-size:13px;font-weight:700;flex:1}
.doc-scroll{flex:1;overflow-y:auto;padding:24px;display:flex;justify-content:center;background:#374151}
.doc-paper{background:white;width:210mm;min-height:297mm;padding:18mm 16mm;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.doc-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.doc-type-card{background:var(--surface);border:2px solid var(--border);border-radius:var(--r2);padding:16px;cursor:pointer;transition:all .2s;text-align:center;box-shadow:var(--shadow)}
.doc-type-card:hover{border-color:var(--iael-blue);box-shadow:0 4px 16px rgba(0,0,0,.10);transform:translateY(-1px)}
.doc-type-card.active{border-color:var(--iael-blue);background:var(--iael-blue-bg)}
.doc-type-icon{font-size:26px;margin-bottom:7px}
.doc-type-name{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.doc-type-desc{font-size:11px;color:var(--text-dim);line-height:1.4}
.field-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;background:var(--surface2);border:1px solid var(--border2);border-radius:7px;font-size:11.5px;font-weight:500;cursor:grab;margin:2px;transition:all .15s;color:var(--text-mid)}
.field-chip:hover{background:var(--iael-blue-bg);border-color:var(--iael-blue-border);color:var(--iael-blue)}
.field-category-title{font-size:10px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;margin-top:10px}
.drop-zone{border:2px dashed var(--border2);border-radius:var(--r2);min-height:180px;padding:14px;transition:all .2s;background:var(--surface2)}
.drop-zone.drag-over{border-color:var(--iael-blue);background:var(--iael-blue-bg)}
.dropped-field{display:flex;align-items:center;gap:7px;padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;font-size:12.5px;color:var(--text)}
.dropped-field .remove-btn{margin-left:auto;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;line-height:1;padding:0;transition:color .15s}
.dropped-field .remove-btn:hover{color:var(--iael-red)}
.db-action-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.db-action-card:hover{border-color:var(--border2);box-shadow:0 4px 16px rgba(0,0,0,.10);transform:translateY(-1px)}
.db-action-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.db-action-name{font-size:13px;font-weight:700;color:var(--text)}
.db-action-desc{font-size:11.5px;color:var(--text-dim);line-height:1.5}
.db-progress{height:5px;background:var(--bg2);border-radius:3px;overflow:hidden;border:1px solid var(--border);margin:8px 0}
.db-progress-fill{height:100%;border-radius:3px;transition:width .8s ease}
.table-size-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.table-size-row:last-child{border-bottom:none}
.verif-result{border-radius:var(--r2);border:1px solid var(--border);padding:20px;display:none;margin-top:12px}
.verif-result.valid{border-color:var(--green-border);background:linear-gradient(135deg,#f0fdf4,#dcfce7)}
.verif-result.invalid{border-color:var(--iael-red-border);background:var(--iael-red-bg)}
.btn-danger-solid{background:var(--iael-red);color:#fff;box-shadow:var(--shadow)}
.btn-danger-solid:hover{background:#a50e18;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.btn-success{background:var(--green);color:#fff;box-shadow:var(--shadow)}
.btn-success:hover{background:#047857;transform:translateY(-1px)}
.stat-chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px 18px;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:all .2s}
.stat-chip:hover{box-shadow:0 4px 16px rgba(0,0,0,.10);transform:translateY(-1px)}
.stat-chip-val{font-size:26px;font-weight:800;font-family:var(--mono)}
.stat-chip-lbl{font-size:11px;color:var(--text-dim);margin-top:3px;font-weight:500}
.purple-bg2{background:var(--purple-bg)}
:root{--purple:#7c3aed;--purple-bg:#f5f3ff;--purple-border:#ddd6fe}
.badge-purple{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)}
.act-purple{background:var(--purple-bg);color:var(--purple)}
.invoice-items{width:100%;border-collapse:collapse;margin:14px 0}
.invoice-items th{background:var(--iael-blue);color:white;padding:9px 12px;font-size:11.5px;text-align:left;font-weight:700}
.invoice-items td{padding:9px 12px;border-bottom:1px solid var(--border);font-size:13px}
@media(max-width:900px){.content-grid-3{grid-template-columns:1fr}.perm-grid{grid-template-columns:1fr 1fr}}


/* ══ MISSING CLASSES (fixes) ══ */
.btn-xs{padding:4px 9px;font-size:11px;border-radius:6px}
.field-category-title{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim);padding:10px 0 4px;margin-top:6px}
.doc-modal-overlay .doc-toolbar{display:flex;align-items:center;gap:8px;padding:13px 20px;background:#1a1d24;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.doc-toolbar-title{font-size:13.5px;font-weight:700;color:#f9fafb;flex:1}
.doc-scroll{flex:1;overflow-y:auto;display:flex;justify-content:center;padding:32px 20px;background:#2d3038}
.doc-paper{background:white;width:210mm;min-height:297mm;padding:20mm 18mm;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.4);font-family:'Sora',sans-serif;font-size:13px;color:#1a1d24;position:relative}
.doc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s}
.doc-modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--surface);border-radius:var(--r2);box-shadow:var(--shadow-lg);max-width:90vw;max-height:90vh;overflow-y:auto;transform:translateY(16px) scale(.97);transition:transform .25s}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-title{font-size:15px;font-weight:700;color:var(--text)}
.modal-close{background:none;border:none;font-size:22px;color:var(--text-dim);cursor:pointer;line-height:1;padding:2px 6px;border-radius:6px;transition:background .15s}
.modal-close:hover{background:var(--bg2);color:var(--text)}
.modal-body{padding:18px 22px}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end}

/* ══ DASHBOARD v3 — KPI PRIMARY ══ */
.kpi-v3-primary{
  background:#fff;border-radius:12px;
  border:1px solid var(--border);min-height:110px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:20px 24px;position:relative;overflow:hidden;
  cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;gap:4px;
  border-left:4px solid var(--kpi-accent,var(--color-primary));
}
.kpi-v3-primary:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.kpi-v3-primary .kpi3-header{display:flex;align-items:center;justify-content:space-between}
.kpi-v3-primary .kpi3-label{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#64748B}
.kpi-v3-primary .kpi3-icon{font-size:20px;line-height:1}
.kpi-v3-primary .kpi3-value{font-size:2rem;font-weight:700;font-family:var(--mono);color:#1E293B;line-height:1}
.kpi-v3-primary .kpi3-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.kpi-v3-primary .kpi3-sub{font-size:0.75rem;color:#64748B;text-transform:uppercase}
.kpi-v3-primary .kpi3-link{font-size:10px;font-weight:700;color:var(--kpi-accent,var(--color-primary))}

/* ══ KPI SECONDARY (fila 2) ══ */
.kpi-v3-secondary{
  background:#F8FAFC;border-radius:10px;
  border:1px solid var(--border);min-height:90px;
  border-left:3px solid var(--kpi-accent,#3B82F6);
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:16px 20px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:12px;
}
.kpi-v3-secondary:hover{box-shadow:0 3px 10px rgba(0,0,0,.08);transform:translateY(-1px)}
.kpi-v3-secondary .ks-icon{font-size:24px;flex-shrink:0}
.kpi-v3-secondary .ks-body{flex:1;min-width:0}
.kpi-v3-secondary .ks-value{font-size:22px;font-weight:800;font-family:var(--mono);line-height:1}
.kpi-v3-secondary .ks-label{font-size:10px;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-top:3px}

/* ══ SOLVENCIA CARD ══ */
.solvencia-card{
  background:#F8FAFC;border-radius:10px;border:1px solid var(--border);
  border-left:3px solid #10B981;
  min-height:90px;box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:12px 16px;cursor:pointer;transition:all .2s;
  display:flex;flex-direction:column;gap:6px;
  position:relative;
}
.solvencia-card:hover{box-shadow:0 3px 10px rgba(0,0,0,.08);transform:translateY(-1px)}
.solvencia-card .solv-header{display:flex;align-items:center;justify-content:space-between}
.solvencia-card .solv-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim)}
.solvencia-card .solv-split{display:flex;align-items:center;gap:6px;flex:1}
.solvencia-card .solv-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.solvencia-card .solv-divider{width:1px;height:34px;background:var(--border);flex-shrink:0}
.solvencia-card .solv-num{font-size:20px;font-weight:800;font-family:var(--mono);line-height:1}
.solvencia-card .solv-num.green{color:#10B981}
.solvencia-card .solv-num.red{color:#EF4444}
.solvencia-card .solv-lbl{font-size:9.5px;font-weight:600}
.solvencia-card .solv-lbl.green{color:#10B981}
.solvencia-card .solv-lbl.red{color:#EF4444}
.solvencia-card .solv-pct{font-size:9px;color:#9CA3AF}
.solvencia-card .solv-bar-wrap{height:5px;background:var(--border2);border-radius:3px;overflow:hidden}
.solvencia-card .solv-bar-green{height:100%;border-radius:3px 0 0 3px;background:#10B981;transition:width .8s ease}

/* ══ CHART PANELS v3 ══ */
.chart-panel-v3{
  background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);
  display:flex;flex-direction:column;overflow:hidden;height:280px;
}
.cp3-head{padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.cp3-title{font-size:0.875rem;font-weight:600;color:#374151}
.cp3-subtitle{font-size:0.75rem;color:#9CA3AF;margin-top:2px}
.cp3-actions{display:flex;align-items:center;gap:6px}
.cp3-body{flex:1;padding:10px 14px 8px;min-height:0;position:relative}

/* ══ BOTTOM ROW PANELS ══ */
.bottom-panel{
  background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);
  display:flex;flex-direction:column;overflow:hidden;
}
.bp-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.bp-title{font-size:0.875rem;font-weight:600;color:#374151;display:flex;align-items:center;gap:7px}
.bp-body{flex:1;overflow-y:auto;padding:10px 14px}
.bp-body::-webkit-scrollbar{width:3px}
.bp-body::-webkit-scrollbar-thumb{background:var(--border2)}

/* ══ ACTIVITY BADGES ══ */
.act-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.3px;flex-shrink:0}
.act-badge-DOCUMENT{background:#DBEAFE;color:#1D4ED8}
.act-badge-EXPORT{background:#D1FAE5;color:#065F46}
.act-badge-LOGIN{background:#F3F4F6;color:#6B7280}
.act-badge-INSERT{background:#FEF3C7;color:#92400E}
.act-badge-UPDATE{background:#FFEDD5;color:#9A3412}
.act-badge-DELETE{background:#FEE2E2;color:#991B1B}
.act-badge-ACTION{background:#EDE9FE;color:#5B21B6}

/* ══ BOTTOM TOGGLE BUTTONS ══ */
.toggle-btn-group{display:flex;gap:4px;background:#F3F4F6;border-radius:8px;padding:3px}
.toggle-btn-group button{padding:4px 10px;font-size:11px;font-weight:600;border:none;border-radius:6px;cursor:pointer;background:transparent;color:var(--text-dim);font-family:var(--font);transition:all .15s}
.toggle-btn-group button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ══ DOCENTES MODULE ══ */
.badge-teal{background:#CCFBF1;color:#0F766E;border:1px solid #99F6E4}
.badge-orange{background:#FFEDD5;color:#C2410C;border:1px solid #FED7AA}


/* ══ SPIN ANIMATION ══ */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ══ FICHA TABS ══ */
.ficha-tab{
  background:none;border:none;padding:8px 16px;font-size:12.5px;font-weight:600;
  color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;
  font-family:var(--font);transition:all .15s;margin-bottom:-1px;
}
.ficha-tab:hover{color:var(--text)}
.ficha-tab.active{color:var(--iael-blue);border-bottom-color:var(--iael-blue)}
.ficha-panel{animation:fadeUp .2s ease}

/* ════════════════════════════════════════════════
   DASHBOARD — KPI clickeable hover
   ════════════════════════════════════════════════ */
.kpi-card[onclick] {
  transition: transform .15s, box-shadow .15s;
}
.kpi-card[onclick]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
}
.panel-action {
  background: none; border: none; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--iael-blue);
  cursor: pointer; font-family: var(--font); border-radius: 6px;
  transition: background .14s;
}
.panel-action:hover { background: var(--iael-blue-bg); }

.act-content { flex: 1; }
.act-desc { font-size: 13px; font-weight: 600; color: var(--text); }
.act-time  { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ════════════════════════════════════════════════
   ALUMNOS — Avatar pequeño
   ════════════════════════════════════════════════ */
.avatar-sm {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  flex-shrink: 0; letter-spacing: -.5px;
}

/* ════════════════════════════════════════════════
   FICHA ALUMNO — Vista dedicada
   ════════════════════════════════════════════════ */
.ficha-tab {
  background: none; border: none; padding: 12px 16px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  cursor: pointer; font-family: var(--font);
  border-bottom: 3px solid transparent;
  transition: all .15s; margin-bottom: -2px;
  white-space: nowrap;
}
.ficha-tab:hover { color: var(--text); background: var(--bg2); }
.ficha-tab.active {
  color: var(--iael-blue);
  border-bottom-color: var(--iael-blue);
  background: var(--iael-blue-bg);
}
.ficha-panel { animation: fadeUp .2s ease; }

/* ════════════════════════════════════════════════
   ACTION CARDS — Menú de acciones rápidas
   ════════════════════════════════════════════════ */
.db-action-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; padding: 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-family: var(--font); text-align: left;
  transition: all .15s; width: 100%;
}
.db-action-card:hover {
  border-color: var(--iael-blue);
  background: var(--iael-blue-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(21,96,189,.12);
}
.db-action-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.db-action-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.db-action-desc {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.4;
}

/* ════════════════════════════════════════════════
   MISC utilities
   ════════════════════════════════════════════════ */
.btn-danger {
  background: var(--iael-red-bg); color: var(--iael-red);
  border: 1px solid var(--iael-red-border);
  padding: 8px 16px; border-radius: 8px; font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: all .15s;
}
.btn-danger:hover { background: var(--iael-red); color: #fff; }


/* ════════════════════════════════════════════════
   MÓDULO ALUMNOS — Additions
   ════════════════════════════════════════════════ */

/* Action menu cards */
.dac-title {
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.dac-desc {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.4;
}

/* KPI cards enhanced hover */
.kpi-card[onclick] {
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.kpi-card[onclick]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.13);
  border-color: var(--card-accent, var(--border2));
}
.kpi-card[onclick]:active { transform: translateY(-1px); }

/* Info box color variants */
.info-box.green {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
}
.info-box.gold {
  background: var(--iael-gold-bg);
  border-color: var(--iael-gold-border);
  color: var(--iael-gold);
}
.info-box.red {
  background: var(--iael-red-bg);
  border-color: var(--iael-red-border);
  color: var(--iael-red);
}
.info-box.blue {
  background: var(--iael-blue-bg);
  border-color: var(--iael-blue-border);
  color: var(--iael-blue);
}

/* ══ FOOTER SUTIL ════════════════════════════════════════════════ */
.app-footer{
  position:fixed;bottom:0;left:0;right:0;z-index:9;
  text-align:center;font-size:11px;color:#9ca3af;
  padding:3px 8px;background:rgba(255,255,255,.85);letter-spacing:.2px;
  font-family:var(--mono);user-select:none;pointer-events:none;
  border-top:1px solid rgba(0,0,0,.06);
}
@media print{.app-footer{display:none!important}}
.sidebar .app-footer-sb{
  margin-top:auto;padding:10px 8px 4px;
  font-size:9px;color:rgba(255,255,255,.14);
  text-align:center;line-height:1.5;font-family:var(--mono);
  word-break:break-word;
}
.sidebar.open .app-footer-sb{text-align:left;padding:10px 14px 4px}

/* ══ RESPONSIVE ════════════════════════════════════════════════ */
@media(max-width:900px){
  .content-grid{grid-template-columns:1fr!important}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important}
  .dash-chips{grid-template-columns:repeat(2,1fr)!important}
  .dash-charts{grid-template-columns:1fr!important}
  .dash-bottom{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .kpi-grid{grid-template-columns:1fr!important}
  .dash-chips{grid-template-columns:1fr 1fr!important}
  .main{margin-left:0!important}
  .topbar{padding:10px 14px!important}
  .page-title{font-size:16px!important}
  .panel-head{flex-wrap:wrap;gap:6px}
  .data-table{font-size:11px}
  .data-table th,.data-table td{padding:8px 8px!important}
}
@media(max-width:480px){
  .kpi-value{font-size:24px!important}
  .modal-box{width:97vw!important;max-width:97vw!important;padding:18px!important}
}

/* ═══════════════════════════════════════════════════
   SIDEBAR SCROLLABLE + OVERLAY
   ═══════════════════════════════════════════════════ */
.sidebar{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.15) transparent;
}
.overlay-sidebar{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:999;
}
.overlay-sidebar.active{display:block}

/* TABLET (768px – 1024px) */
@media(min-width:768px) and (max-width:1024px){
  .sidebar,#sidebar{width:220px!important}
  .kpi-grid,.cards-grid{grid-template-columns:repeat(2,1fr)!important}
  .form-grid-2col{grid-template-columns:1fr 1fr!important}
  .table-container{overflow-x:auto}
  .modal-content,.modal-box{width:85vw!important;max-width:700px!important}
}

/* MÓVIL (< 768px) */
@media(max-width:767px){
  .sidebar,#sidebar{
    position:fixed!important;
    top:0!important;
    left:-280px!important;
    width:280px!important;
    height:100vh!important;
    z-index:1000!important;
    transition:left .3s ease!important;
    overflow-y:auto!important;
  }
  .sidebar.open,#sidebar.open{left:0!important}
  .main{margin-left:0!important;width:100%!important}
  .content{padding:12px!important}
  .kpi-grid,.cards-grid{grid-template-columns:1fr!important}
  .form-row{flex-direction:column!important}
  .form-row .form-group{min-width:0!important}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
  .modal-box{width:95vw!important;max-width:95vw!important;margin:10px auto!important;max-height:90vh!important;overflow-y:auto!important}
  .topbar{padding:8px 12px!important;font-size:14px!important}
  button,.btn{min-height:40px}
  #btn-toggle-sidebar{display:inline-flex!important}
}


/* ═══════════════════════════════════════════════════
   SIDEBAR — Tema Institucional Azul IAEL
   ═══════════════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg, #1a3a68 0%, #1e3a5f 60%, #162e4d 100%) !important;
  border-right: 1px solid #2a4f82 !important;
  box-shadow: 3px 0 16px rgba(0,0,0,.25);
}

.sidebar .nav-item {
  color: rgba(255,255,255,.75) !important;
  border-radius: 8px !important;
}

.sidebar .nav-item:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

.sidebar .nav-item.active {
  background: rgba(193,18,31,.85) !important;
  color: #ffffff !important;
  border-left: 3px solid #ef4444 !important;
}

.sidebar .sidebar-section {
  color: rgba(255,255,255,.40) !important;
  font-size: 9.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.sidebar .sidebar-logo {
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}

.sidebar .sidebar-logo:hover {
  background: rgba(255,255,255,.08) !important;
}

.sidebar .user-role {
  color: rgba(255,255,255,.5) !important;
}

.sidebar .user-name {
  color: rgba(255,255,255,.9) !important;
}

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.1) !important;
}

/* Sidebar toggle button */
.sidebar-toggle {
  color: rgba(255,255,255,.7) !important;
}
.sidebar-toggle:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.1) !important;
}

/* ═══════════════════════════════════════════════════
   TOPBAR — Más limpio con sombra sutil
   ═══════════════════════════════════════════════════ */
.topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e9f0 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}

.page-title {
  color: #1a3a68 !important;
  font-weight: 700 !important;
}

.breadcrumb {
  color: #6b7280 !important;
}

/* ═══════════════════════════════════════════════════
   KPI CARDS — Color branded refresh
   ═══════════════════════════════════════════════════ */
.kpi-card.blue   { border-color: #1e3a5f !important; }
.kpi-card.green  { border-color: #059669 !important; }
.kpi-card.gold   { border-color: #d4860a !important; }
.kpi-card.red    { border-color: #c1121f !important; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE MEJORADO
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    width: 240px !important;
  }
  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .topbar {
    padding: 10px 14px !important;
  }
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .content-grid {
    grid-template-columns: 1fr !important;
  }
  /* Sidebar overlay when open on mobile */
  .sidebar.open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: -1;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-value {
    font-size: 22px !important;
  }
  .page-container {
    padding: 12px !important;
  }
  .panel {
    border-radius: 10px !important;
  }
  .data-table {
    font-size: 11px !important;
  }
  .data-table th, .data-table td {
    padding: 7px 8px !important;
  }
  .modal-box {
    width: 98vw !important;
    padding: 16px !important;
    margin: 4px !important;
  }
}

/* ── Burger menu para móvil ───────────────────────── */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: #1a3a68;
  font-size: 20px;
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; align-items: center; }
}