/* ================================================================
   ABAK Portal SIAAPI — site.css
   Colores: Cyan #0BBCD4 | Azul #1565C0 | Rojo #C62828
   Fuentes: Exo 2 (títulos) | DM Sans (cuerpo)
================================================================ */

:root {
  --abak-cyan: #0BBCD4;
  --abak-blue: #1565C0;
  --abak-red:  #C62828;
  --accent: var(--abak-cyan);
  --brand:  var(--abak-blue);
  --fs-base: 16px;
  --brightness: 1;
}

/* ── Tema Claro ── */
[data-theme="light"] {
  --bg:      #F0F4F8;
  --bg2:     #ffffff;
  --bg3:     #E2EAF4;
  --surface: #ffffff;
  --surface2:#F7FAFD;
  --border:  #D0DCF0;
  --text:    #1A2B4A;
  --text2:   #4A5E80;
  --text3:   #8494B0;
  --nav-bg:  #ffffff;
  --nav-border: #E0EAF8;
  --sidebar-bg:     #1A2B4A;
  --sidebar-text:   #CBD8F0;
  --sidebar-active: #0BBCD4;
  --card-shadow: 0 2px 16px rgba(21,101,192,.10);
  --sak-bg:     #ffffff;
  --sak-border: #D0DCF0;
}

/* ── Tema Oscuro ── */
[data-theme="dark"] {
  --bg:      #0D1625;
  --bg2:     #111D30;
  --bg3:     #162035;
  --surface: #162035;
  --surface2:#1C2A42;
  --border:  #243450;
  --text:    #E8F0FF;
  --text2:   #9EB3D8;
  --text3:   #5A7AAE;
  --nav-bg:  #111D30;
  --nav-border: #1E2E48;
  --sidebar-bg:     #0A1120;
  --sidebar-text:   #7A9CC8;
  --sidebar-active: #0BBCD4;
  --card-shadow: 0 2px 24px rgba(0,0,0,.4);
  --sak-bg:     #1C2A42;
  --sak-border: #243450;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--fs-base);
  filter: brightness(var(--brightness));
  transition: font-size .2s;
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .3s, color .3s;
}

/* ================================================================
   TOPBAR
================================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 60px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: background .3s;
}

.topbar-logo img { height: 34px; object-fit: contain; }
.topbar-divider  { width: 1px; height: 28px; background: var(--border); margin: 0 4px; }
.topbar-sep      { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.topbar-title    {
  font-family: 'Exo 2', sans-serif;
  font-size: .82rem; font-weight: 600;
  color: var(--text2); letter-spacing: .04em; text-transform: uppercase;
}
.topbar-spacer { flex: 1; }

/* Accesibilidad */
.a11y-bar  { display: flex; align-items: center; gap: 6px; }
.a11y-lbl  { font-size: .63rem; color: var(--text3); font-family: 'Exo 2', sans-serif;
             text-transform: uppercase; letter-spacing: .05em; }
.a11y-btn  {
  width: 30px; height: 30px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text2);
  border-radius: 8px; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.a11y-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.bright-sl {
  width: 64px; height: 4px; appearance: none;
  background: linear-gradient(to right, #000, var(--accent));
  border-radius: 2px; cursor: pointer;
}
.bright-sl::-webkit-slider-thumb {
  appearance: none; width: 13px; height: 13px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 4px rgba(11,188,212,.6);
}

.theme-tog {
  position: relative; width: 46px; height: 24px;
  background: var(--border); border-radius: 12px;
  cursor: pointer; border: none; transition: background .3s;
  display: flex; align-items: center; padding: 2px;
}
.theme-tog.on { background: var(--abak-blue); }
.theme-tog::after {
  content: ''; width: 20px; height: 20px; background: #fff;
  border-radius: 50%; transition: transform .3s; display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.theme-tog.on::after { transform: translateX(22px); }
.theme-tog-icon { position: absolute; font-size: 9px; }
.theme-tog-icon.sun  { left: 4px; }
.theme-tog-icon.moon { right: 4px; }

/* Usuario */
.topbar-user {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); border-radius: 24px;
  background: var(--surface2); cursor: pointer; transition: all .2s;
}
.topbar-user:hover { border-color: var(--accent); }
.u-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--abak-blue), var(--abak-cyan));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px; color: #fff;
  font-family: 'Exo 2', sans-serif;
}
.u-name { font-size: .82rem; font-weight: 500; color: var(--text); }
.u-role {
  font-size: .65rem; color: var(--accent);
  font-family: 'Exo 2', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ================================================================
   SIDEBAR
================================================================ */
.sidebar {
  position: fixed; top: 60px; left: 0; bottom: 0; width: 240px;
  z-index: 100; background: var(--sidebar-bg);
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  padding: 12px 0 0; overflow-y: auto;
  transition: background .3s, transform .3s;
}

.sb-section {
  padding: 10px 16px 3px;
  font-size: .6rem; color: rgba(255,255,255,.25);
  font-family: 'Exo 2', sans-serif; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-top: 6px;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 20px; color: var(--sidebar-text);
  cursor: pointer; border-left: 3px solid transparent;
  transition: all .2s; text-decoration: none;
  font-size: .87rem; font-weight: 500;
}
.nav-item:hover {
  background: rgba(255,255,255,.05); color: #fff;
  border-left-color: rgba(11,188,212,.4);
}
.nav-item.active {
  background: rgba(11,188,212,.12);
  color: var(--sidebar-active);
  border-left-color: var(--sidebar-active);
}
.nav-icon {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: rgba(255,255,255,.06);
  transition: background .2s; flex-shrink: 0;
}
.nav-item.active .nav-icon { background: rgba(11,188,212,.2); }
.nav-badge {
  margin-left: auto; background: var(--abak-red); color: #fff;
  font-size: .62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; font-family: 'Exo 2', sans-serif;
}

/* ================================================================
   MAIN
================================================================ */
.main {
  margin-top: 60px; margin-left: 240px;
  min-height: calc(100vh - 60px);
  padding: 28px 32px;
  transition: margin-left .3s;
}

/* ================================================================
   PAGE HEADER
================================================================ */
.ph {
  margin-bottom: 26px;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pt {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.6rem; font-weight: 800;
  color: var(--text); line-height: 1.2;
}
.pt span { color: var(--accent); }
.ps { font-size: .86rem; color: var(--text2); margin-top: 3px; }

/* ================================================================
   STAT CARDS
================================================================ */
.sg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.sc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
  box-shadow: var(--card-shadow);
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.sc:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(21,101,192,.15); }
.sc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.sc.c1::before { background: linear-gradient(90deg, var(--abak-cyan), var(--abak-blue)); }
.sc.c2::before { background: linear-gradient(90deg, var(--abak-blue), #7C3AED); }
.sc.c3::before { background: linear-gradient(90deg, #10B981, #059669); }
.sc.c4::before { background: linear-gradient(90deg, var(--abak-red), #F59E0B); }
.sc-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 10px;
}
.sc.c1 .sc-icon { background: rgba(11,188,212,.12); }
.sc.c2 .sc-icon { background: rgba(21,101,192,.12); }
.sc.c3 .sc-icon { background: rgba(16,185,129,.12); }
.sc.c4 .sc-icon { background: rgba(198,40,40,.12);  }
.sc-val {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.9rem; font-weight: 800;
  color: var(--text); line-height: 1;
}
.sc-lbl  { font-size: .78rem; color: var(--text2); margin-top: 3px; font-weight: 500; }
.sc-delta { font-size: .7rem; margin-top: 5px; font-family: 'Exo 2', sans-serif; font-weight: 600; }
.sc-delta.up { color: #10B981; }
.sc-delta.dn { color: var(--abak-red); }

/* ================================================================
   CARD
================================================================ */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px;
  box-shadow: var(--card-shadow);
  transition: background .3s, border-color .3s;
  margin-bottom: 20px;
}
.ct {
  font-family: 'Exo 2', sans-serif; font-size: .97rem; font-weight: 700;
  color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.ct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.cg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* ================================================================
   TABLA
================================================================ */
.dt { width: 100%; border-collapse: collapse; }
.dt th {
  text-align: left; padding: 8px 10px;
  font-size: .67rem; font-weight: 700; color: var(--text3);
  font-family: 'Exo 2', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.dt td { padding: 9px 10px; font-size: .83rem; color: var(--text2); border-bottom: 1px solid var(--border); }
.dt tr:last-child td { border-bottom: none; }
.dt tr:hover td { background: var(--surface2); }

/* ================================================================
   BADGES
================================================================ */
.b {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: .67rem; font-weight: 700;
  font-family: 'Exo 2', sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.bg  { background: rgba(16,185,129,.12);  color: #10B981; }
.bb  { background: rgba(11,188,212,.12);  color: var(--abak-cyan); }
.br  { background: rgba(198,40,40,.12);   color: var(--abak-red); }
.bgy { background: var(--bg3);            color: var(--text3); }
.bo  { background: rgba(245,158,11,.12);  color: #F59E0B; }
.bv  { background: rgba(124,58,237,.12);  color: #7C3AED; }

/* ================================================================
   PROGRESS
================================================================ */
.pw { margin-bottom: 13px; }
.pi { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; font-weight: 500; color: var(--text); }
.pb { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden; }
.pf {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--abak-blue), var(--abak-cyan));
  transition: width 1.2s ease; position: relative;
}
.pf::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 4px; background: rgba(255,255,255,.5); border-radius: 2px;
}

/* ================================================================
   BOTONES
================================================================ */
.btn {
  padding: 8px 18px; border-radius: 10px; border: none;
  cursor: pointer; font-family: 'Exo 2', sans-serif;
  font-weight: 600; font-size: .82rem; letter-spacing: .03em;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn-p {
  background: linear-gradient(135deg, var(--abak-blue), var(--abak-cyan));
  color: #fff; box-shadow: 0 4px 12px rgba(11,188,212,.3);
}
.btn-p:hover { box-shadow: 0 6px 20px rgba(11,188,212,.45); transform: translateY(-1px); }
.btn-o {
  background: transparent; border: 1.5px solid var(--border); color: var(--text2);
}
.btn-o:hover { border-color: var(--accent); color: var(--accent); }
.btn-r {
  background: linear-gradient(135deg, #C62828, #EF5350);
  color: #fff; box-shadow: 0 4px 12px rgba(198,40,40,.25);
}
.btn-sm { padding: 5px 12px; font-size: .74rem; }

/* ================================================================
   FORMULARIOS
================================================================ */
.fl {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--text2); margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif; letter-spacing: .03em; text-transform: uppercase;
}
.fi {
  width: 100%; padding: 10px 13px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: .88rem;
  outline: none; transition: all .2s;
}
.fi:focus {
  border-color: var(--abak-cyan);
  box-shadow: 0 0 0 3px rgba(11,188,212,.12);
  background: var(--surface);
}
.fg { margin-bottom: 16px; }

/* Mensajes de validación ASP.NET */
.field-validation-error { color: var(--abak-red); font-size: .78rem; display: block; margin-top: 3px; }
.validation-summary-errors {
  background: rgba(198,40,40,.08); border: 1px solid rgba(198,40,40,.3);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
  color: var(--abak-red); font-size: .83rem;
}
.validation-summary-errors ul { padding-left: 18px; }

/* ================================================================
   MÓDULOS GRID
================================================================ */
.mg { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.mc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  cursor: pointer;
}
.mc:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(11,188,212,.18);
  border-color: var(--accent);
}
.mh      { height: 6px; background: linear-gradient(90deg, var(--abak-blue), var(--abak-cyan)); }
.mh.ok   { background: linear-gradient(90deg, #059669, #10B981); }
.mh.no   { background: var(--border); }
.mb      { padding: 18px; }
.m-icon  {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, rgba(11,188,212,.14), rgba(21,101,192,.14));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 11px;
}
.m-name  { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: .93rem; color: var(--text); margin-bottom: 5px; }
.m-desc  { font-size: .78rem; color: var(--text2); line-height: 1.5; margin-bottom: 12px; }
.mf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface2);
}
.m-score      { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--accent); }
.m-score.none { color: var(--text3); font-size: .8rem; font-weight: 500; }

/* ================================================================
   EVALUACIÓN (QUIZ)
================================================================ */
.qc { max-width: 700px; margin: 0 auto; }
.qh {
  background: linear-gradient(135deg, var(--abak-blue), var(--abak-cyan));
  border-radius: 16px; padding: 22px; margin-bottom: 22px;
  color: #fff; display: flex; align-items: center; gap: 16px;
}
.qh-info    { flex: 1; }
.qh-mod     { font-family: 'Exo 2', sans-serif; font-size: 1.15rem; font-weight: 800; }
.qh-meta    { font-size: .8rem; opacity: .8; margin-top: 3px; }
.q-sak      { width: 66px; flex-shrink: 0; }
.q-sak img  { width: 100%; }
.q-pbar     { height: 5px; background: rgba(255,255,255,.3); border-radius: 3px; margin-top: 10px; }
.q-pfill    { height: 100%; border-radius: 3px; background: #fff; transition: width .4s; }
.qq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px; margin-bottom: 14px;
  box-shadow: var(--card-shadow);
}
.q-num  { font-family: 'Exo 2', sans-serif; font-size: .7rem; font-weight: 700; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 7px; }
.q-txt  { font-size: .93rem; font-weight: 500; color: var(--text); line-height: 1.5; margin-bottom: 14px; }
.opts   { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 15px; border: 1.5px solid var(--border);
  border-radius: 10px; cursor: pointer; transition: all .2s;
  font-size: .87rem; color: var(--text2);
}
.opt:hover { border-color: var(--abak-cyan); color: var(--text); background: rgba(11,188,212,.05); }
.opt.sel   { border-color: var(--abak-cyan); background: rgba(11,188,212,.1); color: var(--text); font-weight: 500; }
.opt-r {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
}
.opt.sel .opt-r { border-color: var(--abak-cyan); background: var(--abak-cyan); }
.opt.sel .opt-r::after { content: ''; width: 5px; height: 5px; background: #fff; border-radius: 50%; }

/* Resultado evaluación */
.res {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 36px; text-align: center;
  box-shadow: var(--card-shadow);
}
.res-sak      { width: 110px; margin: 0 auto 18px; }
.res-sak img  { width: 100%; animation: float 2.5s ease-in-out infinite; }
.res-sc       { font-family: 'Exo 2', sans-serif; font-size: 3.8rem; font-weight: 900; line-height: 1; }
.res-sc.pass  { color: #10B981; }
.res-sc.fail  { color: var(--abak-red); }

/* ================================================================
   RECURSOS LIBRES
================================================================ */
.rg { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 18px; }
.rc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow);
  transition: transform .2s, box-shadow .2s;
}
.rc:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(11,188,212,.15); }
.rt {
  height: 96px; background: linear-gradient(135deg, var(--abak-blue), var(--abak-cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; position: relative;
}
.rt.red { background: linear-gradient(135deg, var(--abak-red), #F59E0B); }
.rt.grn { background: linear-gradient(135deg, #059669, #10B981); }
.rt-tipo {
  position: absolute; top: 9px; right: 9px;
  background: rgba(0,0,0,.4); color: #fff;
  font-size: .62rem; font-weight: 700;
  font-family: 'Exo 2', sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
}
.rb { padding: 15px; }
.r-title { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: .9rem; color: var(--text); margin-bottom: 5px; }
.r-desc  { font-size: .77rem; color: var(--text2); line-height: 1.5; margin-bottom: 12px; }

/* ================================================================
   MODAL
================================================================ */
.mo {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mo.open { opacity: 1; pointer-events: all; }
.md {
  background: var(--surface); border-radius: 20px; padding: 30px;
  max-width: 460px; width: 100%; position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  transform: scale(.9); transition: transform .3s;
}
.mo.open .md { transform: scale(1); }
.md-sak { position: absolute; top: -50px; right: 18px; width: 76px; }
.md-sak img { width: 100%; animation: float 2.5s ease-in-out infinite; }
.md-title { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.md-sub   { font-size: .82rem; color: var(--text2); margin-bottom: 22px; line-height: 1.5; }
.md-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text2); cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.md-x:hover { background: var(--abak-red); color: #fff; border-color: var(--abak-red); }

/* ================================================================
   SAK PANEL FLOTANTE
================================================================ */
.sak-panel {
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.sak-bubble {
  background: var(--sak-bg); border: 1px solid var(--sak-border);
  border-radius: 16px 16px 4px 16px; padding: 12px 15px;
  max-width: 220px; font-size: .82rem; line-height: 1.5;
  color: var(--text); box-shadow: var(--card-shadow);
  animation: bub .3s ease; position: relative;
}
.sak-bubble::after {
  content: ''; position: absolute; bottom: -8px; right: 16px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-top: 8px solid var(--sak-border);
}
.sak-btn {
  width: 70px; height: 70px; border-radius: 50%; border: none;
  background: transparent; cursor: pointer; padding: 0;
  filter: drop-shadow(0 4px 16px rgba(11,188,212,.4));
  transition: transform .2s; animation: float 3s ease-in-out infinite;
}
.sak-btn:hover { transform: scale(1.1); }
.sak-btn img   { width: 100%; height: 100%; object-fit: contain; }

/* ================================================================
   TOAST
================================================================ */
.tc {
  position: fixed; bottom: 108px; right: 24px; z-index: 350;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 15px; box-shadow: var(--card-shadow);
  display: flex; align-items: center; gap: 9px;
  font-size: .83rem; color: var(--text); max-width: 280px;
  animation: tin .3s ease; pointer-events: all;
}
.toast.s { border-left: 3px solid #10B981; }
.toast.e { border-left: 3px solid var(--abak-red); }
.toast.i { border-left: 3px solid var(--abak-cyan); }

/* ================================================================
   LOGIN
================================================================ */
.lp {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: 20px;
  background: var(--bg);
}
.ls {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 880px; width: 100%; border-radius: 24px;
  overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.2);
  min-height: 540px;
}
.ll {
  background: linear-gradient(145deg, #0A1628 0%, #1565C0 60%, #0BBCD4 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px; position: relative; overflow: hidden;
}
.ll::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(11,188,212,.15) 0%, transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(198,40,40,.1) 0%, transparent 50%);
}
.l-sak { position: relative; z-index: 1; width: 160px; animation: float 3s ease-in-out infinite; filter: drop-shadow(0 16px 40px rgba(11,188,212,.4)); }
.l-brand { position: relative; z-index: 1; text-align: center; margin-top: 22px; }
.l-brand img { height: 38px; filter: brightness(10); margin-bottom: 8px; display: block; margin: 0 auto 8px; }
.l-brand-t { font-family: 'Exo 2', sans-serif; color: rgba(255,255,255,.65); font-size: .82rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.lr { background: var(--surface); padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; }
.l-title { font-family: 'Exo 2', sans-serif; font-size: 1.55rem; font-weight: 800; color: var(--text); margin-bottom: 5px; }
.l-sub   { font-size: .83rem; color: var(--text2); margin-bottom: 28px; }
.btn-login {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--abak-blue) 0%, var(--abak-cyan) 100%);
  color: #fff; border: none; border-radius: 10px;
  font-family: 'Exo 2', sans-serif; font-size: .93rem; font-weight: 700;
  cursor: pointer; letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(11,188,212,.35); transition: all .2s; margin-top: 6px;
}
.btn-login:hover { box-shadow: 0 8px 28px rgba(11,188,212,.5); transform: translateY(-1px); }

/* Login error */
.login-error {
  background: rgba(198,40,40,.09); border: 1px solid rgba(198,40,40,.3);
  border-radius: 8px; padding: 9px 12px;
  font-size: .8rem; color: var(--abak-red);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

/* ================================================================
   PDF READER (Manual)
================================================================ */
.pdf-tb {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 15px; background: var(--surface);
  border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--border); flex-wrap: wrap;
}
.pdf-lbl { font-size: .7rem; color: var(--text3); font-family: 'Exo 2', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.pdf-area {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 30px; min-height: 380px;
  line-height: 1.8; color: var(--text);
}

/* ================================================================
   ANIMACIONES
================================================================ */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes bub   { from{opacity:0;transform:scale(.8) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes tin   { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) { .cg2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .sidebar  { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main     { margin-left: 0; padding: 18px 14px; }
  .ls       { grid-template-columns: 1fr; }
  .ll       { display: none; }
  .a11y-lbl { display: none; }
}

/* ================================================================
   SCROLLBAR
================================================================ */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ══ MANUAL SIAAPI ══════════════════════════════════════════════ */
.manual-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    height: calc(100vh - 180px);
    min-height: 500px;
}
.manual-tree {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: var(--card-shadow);
}
.mt-header {
    padding: 14px 16px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: .78rem;
    color: var(--text3);
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.mt-mod-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .2s;
}
.mt-mod-header:hover { background: var(--surface2); }
.mt-modulo.open .mt-mod-header { background: rgba(11,188,212,.06); }
.mt-ico  { font-size: 16px; flex-shrink: 0; }
.mt-mod-name { flex: 1; font-size: .85rem; font-weight: 600; color: var(--text); }
.mt-arrow {
    font-size: .7rem;
    color: var(--text3);
    transition: transform .2s;
}
.mt-modulo.open .mt-arrow { transform: rotate(0deg); }
.mt-modulo:not(.open) .mt-arrow { transform: rotate(-90deg); }
.mt-materiales { border-top: 1px solid var(--border); }
.mt-mat {
    display: block;
    padding: 8px 14px 8px 40px;
    font-size: .81rem;
    color: var(--text2);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-mat:hover {
    background: var(--surface2);
    color: var(--text);
    border-left-color: rgba(11,188,212,.4);
}
.mt-mat.active {
    background: rgba(11,188,212,.1);
    color: var(--abak-cyan);
    border-left-color: var(--abak-cyan);
    font-weight: 600;
}
.mt-sin { padding: 10px 14px 10px 40px; font-size: .77rem; color: var(--text3); }
.manual-viewer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
}
.pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pdf-title {
    font-family: 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdf-frame {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 400px;
}
.pdf-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--text2);
}
@media (max-width: 900px) {
    .manual-layout { grid-template-columns: 1fr; height: auto; }
    .manual-viewer { min-height: 400px; }
}

/* ══ PERFIL ═════════════════════════════════════════════════════ */
.perfil-hero {
    background: linear-gradient(135deg, var(--abak-blue), var(--abak-cyan));
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(11,188,212,.25);
}
.ph-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    border: 3px solid rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.6rem; font-weight: 800; color: #fff;
    flex-shrink: 0; text-transform: uppercase;
}
.ph-info   { flex: 1; min-width: 200px; }
.ph-nombre { font-family: 'Exo 2', sans-serif; font-size: 1.25rem; font-weight: 800; color: #fff; }
.ph-email  { font-size: .84rem; color: rgba(255,255,255,.75); margin-top: 3px; }
.ph-stats  {
    display: flex; align-items: center; gap: 20px;
    background: rgba(255,255,255,.12);
    border-radius: 14px; padding: 14px 20px;
}
.ph-stat       { text-align: center; }
.ph-stat-val   { font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.ph-stat-lbl   { font-size: .68rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.ph-stat-sep   { width: 1px; height: 36px; background: rgba(255,255,255,.25); }

.perfil-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.perfil-col    { display: flex; flex-direction: column; gap: 20px; }

/* Formulario perfil */
.form-g    { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-full { grid-column: 1 / -1; }
.form-f    { display: flex; flex-direction: column; gap: 4px; }
.form-lbl  { font-size: .77rem; font-weight: 600; color: var(--text2); }
.form-inp  {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: var(--surface2);
    color: var(--text);
    font-size: .87rem;
    outline: none;
    transition: border-color .2s;
    font-family: 'DM Sans', sans-serif;
    width: 100%;
}
.form-inp:focus { border-color: var(--abak-cyan); }
.form-err  { font-size: .72rem; color: var(--abak-red); }
.form-help { font-size: .72rem; color: var(--text3); }

/* Campo contraseña con ojo */
.pass-wrap { position: relative; display: flex; align-items: center; }
.pass-wrap .form-inp { padding-right: 38px; }
.pass-eye  {
    position: absolute; right: 8px;
    border: none; background: transparent; cursor: pointer;
    font-size: 15px; line-height: 1; color: var(--text3);
    transition: color .2s; padding: 0;
}
.pass-eye:hover { color: var(--abak-cyan); }

/* Info rows cuenta */
.info-rows { display: flex; flex-direction: column; gap: 2px; }
.info-row  {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: .84rem;
}
.info-row:last-child { border-bottom: none; }
.info-lbl { color: var(--text3); font-size: .78rem; }
.info-val  { color: var(--text); font-weight: 500; }

/* Mensajes de resultado */
.msg-ok {
    padding: 11px 16px; border-radius: 10px; margin-bottom: 16px;
    background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3);
    color: #10B981; font-size: .85rem; font-weight: 500;
}
.msg-err {
    padding: 11px 16px; border-radius: 10px; margin-bottom: 16px;
    background: rgba(198,40,40,.08); border: 1px solid rgba(198,40,40,.25);
    color: var(--abak-red); font-size: .85rem; font-weight: 500;
}

@media (max-width: 900px) {
    .perfil-grid { grid-template-columns: 1fr; }
    .ph-stats { width: 100%; justify-content: center; }
    .form-g { grid-template-columns: 1fr; }
}