:root{
  --bg:#f7f9fc;
  --bg-2:#f4f7fb;
  --panel:#ffffff;
  --panel-soft:#fbfcfe;

  --text:#223046;
  --text-strong:#1a2740;
  --muted:#738197;
  --muted-2:#98a5b8;
  --line:#e8edf4;

  --primary:#6d8fbe;
  --primary-2:#5d80b0;
  --primary-soft:#edf3fb;

  --success:#7eb08b;
  --success-soft:#edf8ef;

  --warning:#caa66a;
  --warning-soft:#fcf6ea;

  --danger:#c78686;
  --danger-soft:#fcf0f0;

  --info:#7ba7b7;
  --info-soft:#eef7fa;

  --purple:#9b8fc0;
  --purple-soft:#f3f0fa;

  --gray:#8f9bad;
  --gray-soft:#f4f6f9;

  --sidebar:#f9fbfe;
  --sidebar-2:#f4f7fb;
  --sidebar-line:#e4ebf3;
  --sidebar-text:#49586d;
  --sidebar-text-strong:#243247;
  --sidebar-hover:#eef4fb;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;

  --shadow-sm:0 6px 18px rgba(79,101,136,.05);
  --shadow:0 14px 34px rgba(79,101,136,.07);
  --shadow-lg:0 22px 48px rgba(79,101,136,.08);

  --focus:0 0 0 4px rgba(109,143,190,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(109,143,190,.06), transparent 34rem),
    radial-gradient(circle at top right, rgba(155,143,192,.05), transparent 28rem),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  color:var(--text);
  font-family:"Inter","SF Pro Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.52;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--primary-2);text-decoration:none;transition:.16s ease}
a:hover{color:#4c6f9d}
img{max-width:100%}
code{background:#f2f6fb;color:#506b8e;border-radius:9px;padding:2px 8px;font-size:.88em}

.app{min-height:100vh;display:grid;grid-template-columns:290px minmax(0,1fr)}
.content{width:100%;max-width:1660px;padding:32px}
.content h1{margin:0 0 18px;color:var(--text-strong);font-size:clamp(26px,2.4vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:620}
.content h2{margin:0 0 10px;color:var(--text-strong);font-size:21px;line-height:1.2;letter-spacing:-.02em;font-weight:580}
.content h3{margin:18px 0 10px;color:var(--text-strong);font-size:17px;font-weight:560}
.content p{color:var(--muted)}

.sidebar{
  position:sticky;top:0;min-height:100vh;max-height:100vh;overflow:auto;padding:18px 14px;
  background:radial-gradient(circle at top left, rgba(109,143,190,.08), transparent 16rem), linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  border-right:1px solid var(--sidebar-line);box-shadow:6px 0 20px rgba(82,102,134,.04)
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#dce5ef;border-radius:999px}
.brand{display:flex;align-items:center;gap:12px;padding:10px 10px 18px;margin-bottom:14px;border-bottom:1px solid var(--sidebar-line)}
.brand-logo{width:46px;height:46px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;font-weight:700;font-size:24px;color:#fff;background:linear-gradient(135deg,#91afcf,#a8b5dd 55%,#96bcc8);box-shadow:0 10px 24px rgba(145,175,207,.24)}
.brand h2{margin:0;color:var(--sidebar-text-strong);font-size:21px;font-weight:650}
.brand small{display:block;margin-top:3px;color:#718196;font-size:12px;line-height:1.25}
.user-card{margin:0 4px 14px;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.9);border:1px solid var(--sidebar-line);box-shadow:var(--shadow-sm)}
.user-card strong{display:block;color:var(--sidebar-text-strong);font-size:14px;font-weight:620}
.user-card span{display:block;margin-top:3px;color:#6f8096;font-size:12px}
.side-nav{padding:2px 4px 10px}
.menu-group{margin:10px 0}

.menu-title,.side-nav a{
  width:100%;border:0;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:transparent;color:#44546a;font:inherit;text-align:left;cursor:pointer;transition:.16s ease
}
.menu-title{border:1px solid var(--sidebar-line);font-weight:600;box-shadow:var(--shadow-sm)}

.side-nav .menu-group:nth-of-type(1) .menu-title{background:#eef4fb;border-color:#d6e2f0;color:#30435f}
.side-nav .menu-group:nth-of-type(2) .menu-title{background:#eef7f1;border-color:#d7e9dc;color:#304b3b}
.side-nav .menu-group:nth-of-type(3) .menu-title{background:#fcf6ec;border-color:#efdfbf;color:#5c4830}
.side-nav .menu-group:nth-of-type(4) .menu-title{background:#f4f0fb;border-color:#e1d8f0;color:#4a3e66}
.side-nav .menu-group:nth-of-type(5) .menu-title{background:#eef7fa;border-color:#d7e8ee;color:#375160}
.side-nav .menu-group:nth-of-type(6) .menu-title{background:#f5f7fa;border-color:#dde4ec;color:#3c4a5d}
.side-nav .menu-group:nth-of-type(7) .menu-title{background:#fcf1f1;border-color:#ecd8d8;color:#654545}

.menu-title:hover,.side-nav a:hover{background:var(--sidebar-hover);color:#26364d;transform:translateX(1px)}
.menu-title b{color:#8797ab;transition:transform .18s ease;font-weight:500}
.menu-items{margin:7px 0 0 12px;padding:5px 0 4px 8px;border-left:1px solid #e1e8f0}
.menu-items a{justify-content:flex-start;padding:8px 10px;font-size:13px;color:#55667d}
.menu-items a::before{content:"";width:6px;height:6px;border-radius:999px;background:#b7c5d5;flex:0 0 auto}
.menu-items a:hover::before{background:#86a2c4}
.menu-group.collapsed .menu-items{display:none}
.menu-group.collapsed .menu-title b{transform:rotate(-90deg)}
.logout{margin-top:14px;background:#fff4f4!important;color:#9b5f5f!important;border:1px solid #ecd6d6!important}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.toolbar p{margin:6px 0 0;color:var(--muted)}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

.panel,.sigedu-panel{position:relative;margin-bottom:20px;padding:21px;border-radius:24px;background:rgba(255,255,255,.95);border:1px solid rgba(232,237,244,.96);box-shadow:var(--shadow)}
.panel::before,.sigedu-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:-2px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.panel-heading h2{margin:0}
.panel-heading p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}

.card{position:relative;min-height:112px;padding:18px;border-radius:22px;background:linear-gradient(180deg,#ffffff,#fcfdff);border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card::after{content:"";position:absolute;width:104px;height:104px;right:-40px;top:-40px;border-radius:999px;opacity:.55}
.card span{display:block;color:var(--muted);font-size:12px;font-weight:580;text-transform:uppercase;letter-spacing:.07em}
.card strong{display:block;margin-top:8px;color:var(--text-strong);font-size:clamp(24px,2vw,33px);line-height:1.06;letter-spacing:-.045em;font-weight:620}
.card small{display:block;margin-top:7px;color:var(--muted);font-size:13px}
.card.blue{border-left:5px solid #9fb9d7}.card.green{border-left:5px solid #a6c5ae}.card.yellow{border-left:5px solid #dabc89}.card.red{border-left:5px solid #d7aaaa}.card.purple{border-left:5px solid #b7acd4}
.card.blue::after{background:rgba(159,185,215,.18)}.card.green::after{background:rgba(166,197,174,.18)}.card.yellow::after{background:rgba(218,188,137,.16)}.card.red::after{background:rgba(215,170,170,.16)}.card.purple::after{background:rgba(183,172,212,.18)}

.module-card{display:block;min-height:116px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);text-decoration:none;transition:.18s ease}
.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:inherit}
.module-card strong{display:block;color:var(--text-strong);font-size:18px;font-weight:590;letter-spacing:-.02em}
.module-card span{display:block;margin-top:8px;color:var(--muted);line-height:1.45;font-size:14px}
.btn-primary-soft{border-left:5px solid #9fb9d7}.btn-success-soft{border-left:5px solid #a6c5ae}.btn-warning-soft{border-left:5px solid #dabc89}.btn-danger-soft{border-left:5px solid #d7aaaa}.btn-info-soft{border-left:5px solid #9dc1cd}.btn-purple-soft{border-left:5px solid #b7acd4}.btn-muted-soft{border-left:5px solid #c0cad7}

.form{display:grid;gap:14px}
label{display:block;margin-bottom:6px;color:#4a5a72;font-weight:560;letter-spacing:.003em}
input,select,textarea{width:100%;min-height:44px;border:1px solid #dde5ef;border-radius:15px;padding:11px 13px;background:#fff;color:var(--text);font:inherit;font-weight:400;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
textarea{min-height:96px;resize:vertical}
input[type="checkbox"],input[type="radio"]{width:auto;min-height:auto;accent-color:#7b99c3}
input:focus,select:focus,textarea:focus{outline:none;border-color:#9bb4d2;box-shadow:var(--focus);background:#fff}
input::placeholder,textarea::placeholder{color:#a1adbc;font-weight:380}

button,.btn{border:0;min-height:42px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;color:#fff;background:#8eabc9;font:inherit;font-weight:560;letter-spacing:.003em;text-decoration:none;cursor:pointer;box-shadow:0 10px 22px rgba(142,171,201,.16);transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
button:hover,.btn:hover{transform:translateY(-1px);filter:brightness(.985);color:#fff}
.btn-primary{background:#8eabc9}.btn-success,.btn.success{background:#97bca0;box-shadow:0 10px 22px rgba(151,188,160,.16)}.btn-warning,.btn.warning{background:#d1b07f;box-shadow:0 10px 22px rgba(209,176,127,.16)}.btn-danger,.btn.danger{background:#cf9d9d;box-shadow:0 10px 22px rgba(207,157,157,.16)}.btn-info,.btn.info{background:#95b9c4;box-shadow:0 10px 22px rgba(149,185,196,.16)}.btn-purple,.btn.purple{background:#b0a4cf;box-shadow:0 10px 22px rgba(176,164,207,.16)}.btn-muted,.btn.muted{background:#a5b2c3;box-shadow:0 10px 22px rgba(165,178,195,.15)}

table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm)}
th{padding:13px 12px;text-align:left;background:#fafcff;color:#56667e;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
td{padding:12px;border-bottom:1px solid #eef2f7;vertical-align:top;color:#334155}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .14s ease}
tbody tr:hover td{background:#fcfdff}

.sigedu-badge,.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:12px;line-height:1;font-weight:560;letter-spacing:.02em;white-space:nowrap}
.status-green{background:#eef8ef;color:#62866b}.status-yellow{background:#fbf5ea;color:#9d8051}.status-red{background:#faf0f0;color:#a26a6a}.status-blue{background:#eef4fb;color:#5c7ba4}.status-purple{background:#f3f0fa;color:#7f73a3}.status-gray{background:#f4f6f9;color:#6f7d90}

.sigedu-alert{margin-bottom:14px;padding:14px 16px;border-radius:18px;border:1px solid;font-weight:480;box-shadow:var(--shadow-sm)}
.alert-success{background:#f0f8f2;color:#5f8468;border-color:#d8ebdc}
.alert-danger{background:#fcf2f2;color:#9d6969;border-color:#efdada}
.alert-warning{background:#fcf7ed;color:#9a7d4f;border-color:#f0e1c4}
.alert-info{background:#f1f8fa;color:#638896;border-color:#d8eaef}

.sigedu-stepper{display:flex;gap:10px;align-items:stretch;margin:12px 0 22px;overflow:auto;padding-bottom:4px}
.step{min-width:148px;flex:1;display:flex;align-items:center;gap:10px;padding:13px;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.step span{width:32px;height:32px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;color:#74849a;background:#edf2f7;font-weight:590}
.step strong{color:var(--text-strong);font-size:13px;font-weight:560}
.step.active{border-color:#d6e2f0;box-shadow:0 12px 24px rgba(109,143,190,.08)}
.step.active span{color:#fff;background:#90abc8}
.step.done span{color:#fff;background:#9abca1}

.empty-state{padding:34px 18px;text-align:center;color:var(--muted)}
.empty-icon{width:58px;height:58px;border-radius:22px;display:grid;place-items:center;margin:0 auto 12px;color:#8f9db0;background:#f0f4f8;font-size:28px}
.empty-state strong{display:block;color:var(--text-strong);font-size:18px;font-weight:570}
.empty-state p{margin:8px 0 0}

.flash-stack{position:fixed;top:18px;right:18px;z-index:9999;width:min(430px, calc(100vw - 36px))}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}

[style*="overflow:auto"],.table-responsive{scrollbar-width:thin;scrollbar-color:#d6dfeb transparent}
[style*="overflow:auto"]::-webkit-scrollbar,.table-responsive::-webkit-scrollbar{height:10px;width:10px}
[style*="overflow:auto"]::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb{background:#d6dfeb;border-radius:999px}

@media(max-width:1200px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:relative;min-height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--sidebar-line)}
  .content{padding:22px}
}
@media(max-width:720px){
  body{font-size:14px}
  .content{padding:16px}
  .grid{grid-template-columns:1fr!important}
  .panel,.sigedu-panel{padding:16px;border-radius:20px}
  .panel-heading{display:block}
  .toolbar{display:block}
  .toolbar .actions{margin-top:12px}
  button,.btn{width:100%}
  .actions .btn,.actions button{flex:1 1 100%}
  table{font-size:13px}
  th,td{padding:10px}
}
@media print{
  body{background:#fff}
  .sidebar,.actions,.toolbar .actions,button,.btn{display:none!important}
  .app{display:block}
  .content{padding:0;max-width:none}
  .panel,.sigedu-panel,.card,table{box-shadow:none;border-color:#ddd}
}


/* ============================================================
   SIGEDU - Sidebar v2: iconos, hover elegante, activo y submenús
   ============================================================ */

/* Ajuste general de orden visual */
.sidebar{
  --menu-active:#eaf2fb;
  --menu-active-border:#bfd4ec;
  --menu-active-text:#263e5d;
  --menu-active-dot:#6f93bd;
}

.side-nav{
  display:grid;
  gap:2px;
}

/* Icono por título de sección */
.menu-title span{
  display:flex;
  align-items:center;
  gap:9px;
}

.menu-title span::before{
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:11px;
  display:grid;
  place-items:center;
  font-size:15px;
  line-height:1;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 10px rgba(70,90,120,.05);
}

/* Inicio */
.side-nav .menu-group:nth-of-type(1) .menu-title span::before{
  content:"⌂";
  color:#52769d;
  background:#f7fbff;
}

/* Control escolar */
.side-nav .menu-group:nth-of-type(2) .menu-title span::before{
  content:"▦";
  color:#51745a;
  background:#f7fcf8;
}

/* Académico */
.side-nav .menu-group:nth-of-type(3) .menu-title span::before{
  content:"✎";
  color:#8c7148;
  background:#fffaf0;
}

/* Seguimiento */
.side-nav .menu-group:nth-of-type(4) .menu-title span::before{
  content:"◌";
  color:#74669a;
  background:#faf7ff;
}

/* Documentos */
.side-nav .menu-group:nth-of-type(5) .menu-title span::before{
  content:"◇";
  color:#547887;
  background:#f5fcff;
}

/* Herramientas */
.side-nav .menu-group:nth-of-type(6) .menu-title span::before{
  content:"⌘";
  color:#58697e;
  background:#f8fafc;
}

/* Administración / Sistema */
.side-nav .menu-group:nth-of-type(7) .menu-title span::before{
  content:"⚙";
  color:#8d6262;
  background:#fff8f8;
}

.side-nav .menu-group:nth-of-type(8) .menu-title span::before{
  content:"⌁";
  color:#7a627d;
  background:#fbf8ff;
}

/* Hover más elegante en secciones */
.menu-title{
  position:relative;
  overflow:hidden;
}

.menu-title::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.55), transparent 58%);
  transition:opacity .18s ease;
}

.menu-title:hover{
  transform:translateX(2px);
  box-shadow:0 10px 24px rgba(73,88,109,.08);
}

.menu-title:hover::after{
  opacity:1;
}

/* Submenús más ordenados */
.menu-items{
  margin:8px 0 2px 16px;
  padding:6px 0 6px 10px;
  border-left:1px solid #dbe5ef;
  display:grid;
  gap:3px;
}

.menu-items a{
  position:relative;
  min-height:35px;
  padding:8px 10px 8px 15px;
  border-radius:12px;
  color:#4b5d73;
  font-size:13px;
  line-height:1.25;
  transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.menu-items a::before{
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  width:7px;
  height:7px;
  border-radius:999px;
  background:#c3ceda;
  box-shadow:0 0 0 4px #f7f9fc;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.menu-items a:hover{
  background:#f3f7fb;
  color:#26364d;
  transform:translateX(2px);
  box-shadow:inset 0 0 0 1px rgba(218,228,239,.72);
}

.menu-items a:hover::before{
  background:#82a1c4;
  transform:translateY(-50%) scale(1.08);
}

/* Activo automático por URL */
.side-nav a.active,
.side-nav a[aria-current="page"]{
  background:var(--menu-active);
  color:var(--menu-active-text);
  box-shadow:inset 0 0 0 1px var(--menu-active-border), 0 8px 18px rgba(90,115,145,.07);
  font-weight:620;
}

.side-nav a.active::before,
.side-nav a[aria-current="page"]::before{
  background:var(--menu-active-dot);
  box-shadow:0 0 0 4px #f7f9fc, 0 0 0 7px rgba(130,161,196,.12);
}

/* Sección abierta con módulo activo */
.menu-group.has-active .menu-title{
  box-shadow:0 10px 24px rgba(77,99,125,.08);
  border-color:#cbd9e8;
}

.menu-group.has-active .menu-title b{
  color:#526b88;
}

/* Estados abiertos/cerrados más finos */
.menu-group.collapsed .menu-title{
  opacity:.93;
}

.menu-group.collapsed .menu-title:hover{
  opacity:1;
}

.menu-group.collapsed .menu-items{
  display:none;
}

/* Indicador de módulo activo en títulos */
.menu-group.has-active .menu-title::before{
  content:"";
  width:6px;
  height:34px;
  border-radius:999px;
  position:absolute;
  left:-4px;
  top:50%;
  transform:translateY(-50%);
  background:#8eabc9;
  box-shadow:0 0 0 4px rgba(142,171,201,.10);
}

/* Más oscuro solo en sidebar, sin endurecer todo el sistema */
.side-nav a,
.menu-title{
  letter-spacing:.002em;
}

.side-nav a{
  font-weight:470;
}

.menu-title{
  font-weight:620;
}

/* Toque responsive del sidebar */
@media(max-width:980px){
  .side-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .menu-group{
    margin:0;
  }

  .menu-items{
    margin-left:14px;
  }
}

@media(max-width:720px){
  .side-nav{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   SIGEDU - Login centrado visual v1
   Corrige pantalla de acceso cargada a la izquierda.
   ============================================================ */

.login-page{
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  padding:32px 18px;
  background:
    radial-gradient(circle at top left, rgba(109,143,190,.10), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(155,143,192,.08), transparent 26rem),
    linear-gradient(180deg, #f8fafc, #f3f7fb);
}

.login-card{
  width:min(100%, 430px);
  margin:auto;
  padding:34px 32px 28px;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,234,244,.95);
  box-shadow:0 24px 60px rgba(79,101,136,.10);
  text-align:left;
  position:relative;
  overflow:hidden;
}

.login-card::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  top:-80px;
  right:-70px;
  border-radius:999px;
  background:rgba(142,171,201,.16);
  pointer-events:none;
}

.login-card::after{
  content:"";
  position:absolute;
  width:86px;
  height:86px;
  bottom:-48px;
  left:-42px;
  border-radius:999px;
  background:rgba(176,164,207,.14);
  pointer-events:none;
}

.login-card h1{
  margin:0;
  color:#1f2f46;
  font-size:34px;
  line-height:1;
  letter-spacing:-.045em;
  font-weight:650;
  text-align:center;
}

.login-card > p{
  margin:10px 0 24px;
  color:#75859a;
  text-align:center;
  font-size:14px;
}

.login-card form{
  display:grid;
  gap:11px;
  position:relative;
  z-index:1;
}

.login-card label{
  margin:2px 0 -3px;
  color:#405169;
  font-size:13px;
  font-weight:580;
}

.login-card input{
  min-height:47px;
  border-radius:16px;
  background:#fbfdff;
}

.login-card button{
  width:100%;
  margin-top:8px;
  min-height:47px;
  border-radius:16px;
  background:linear-gradient(135deg, #8eabc9, #a7b0d1);
  box-shadow:0 14px 28px rgba(142,171,201,.22);
}

.login-card small{
  display:block;
  margin-top:20px;
  color:#8794a6;
  text-align:center;
  font-size:12px;
  position:relative;
  z-index:1;
}

/* Evita que estilos heredados o contenedores antiguos carguen el login a la izquierda */
body:has(.login-page){
  display:block;
}

@media(max-width:520px){
  .login-page{
    padding:20px 14px;
    align-items:center;
  }

  .login-card{
    padding:28px 22px 24px;
    border-radius:24px;
  }

  .login-card h1{
    font-size:30px;
  }
}


/* ============================================================
   SIGEDU - Sidebar fondo gris medio v1
   Oscurece solo el fondo general del sidebar.
   Respeta botones, secciones, iconos, hover y activo.
   ============================================================ */

:root{
  --sidebar:#e7ecf3;
  --sidebar-2:#dfe6ee;
  --sidebar-line:#cfd9e6;
  --sidebar-hover:#e5edf6;
}

/* Fondo general más gris, sin alterar los botones de sección */
.sidebar{
  background:
    radial-gradient(circle at top left, rgba(95,115,140,.11), transparent 16rem),
    linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  border-right-color:var(--sidebar-line);
}

/* Mantiene visible la marca y el usuario sobre el nuevo fondo */
.brand{
  border-bottom-color:var(--sidebar-line);
}

.user-card{
  background:rgba(255,255,255,.76);
  border-color:rgba(203,215,230,.86);
}

/* Submenús un poco más integrados al gris */
.menu-items{
  border-left-color:#cbd6e3;
}

.menu-items a::before{
  box-shadow:0 0 0 4px #e7ecf3;
}

/* El activo conserva su estilo, pero se integra mejor al fondo gris */
.side-nav a.active::before,
.side-nav a[aria-current="page"]::before{
  box-shadow:0 0 0 4px #e7ecf3, 0 0 0 7px rgba(130,161,196,.12);
}

/* Scrollbar del sidebar acorde al nuevo tono */
.sidebar::-webkit-scrollbar-thumb{
  background:#c8d3df;
}


/* ============================================================
   SIGEDU - Visual Final v3
   Sidebar fijo, scroll propio, activo intenso y orientación visual
   ============================================================ */

/* Sidebar fijo con desplazamiento propio */
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  min-height:100vh;
  max-height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
}

/* La página puede desplazarse de forma independiente */
.content{
  min-width:0;
}

/* Mejora de legibilidad del sidebar */
.side-nav a{
  color:#3f4e63;
}

.menu-items a{
  color:#43556d;
}

/* Sección activa más marcada */
.menu-group.has-active .menu-title{
  border-color:#9fb9d7 !important;
  box-shadow:
    inset 0 0 0 1px rgba(111,147,189,.16),
    0 12px 26px rgba(75,96,122,.11);
  transform:translateX(1px);
}

/* Barra izquierda más intensa para sección activa */
.menu-group.has-active .menu-title::before{
  width:7px;
  height:38px;
  left:-5px;
  background:#6f93bd;
  box-shadow:
    0 0 0 4px rgba(111,147,189,.12),
    0 8px 18px rgba(111,147,189,.18);
}

/* Colores activos por sección */
.side-nav .menu-group:nth-of-type(1).has-active .menu-title{
  background:#dfeaf7;
  color:#233c5d;
}
.side-nav .menu-group:nth-of-type(1).has-active .menu-title::before{
  background:#5f86b3;
}

.side-nav .menu-group:nth-of-type(2).has-active .menu-title{
  background:#e0f0e4;
  color:#253f30;
}
.side-nav .menu-group:nth-of-type(2).has-active .menu-title::before{
  background:#679a73;
}

.side-nav .menu-group:nth-of-type(3).has-active .menu-title{
  background:#f7ecd8;
  color:#574027;
}
.side-nav .menu-group:nth-of-type(3).has-active .menu-title::before{
  background:#bd9557;
}

.side-nav .menu-group:nth-of-type(4).has-active .menu-title{
  background:#eae3f7;
  color:#433761;
}
.side-nav .menu-group:nth-of-type(4).has-active .menu-title::before{
  background:#8d7bb6;
}

.side-nav .menu-group:nth-of-type(5).has-active .menu-title{
  background:#dff1f6;
  color:#2f4d5e;
}
.side-nav .menu-group:nth-of-type(5).has-active .menu-title::before{
  background:#719fb0;
}

.side-nav .menu-group:nth-of-type(6).has-active .menu-title{
  background:#e6ebf2;
  color:#344458;
}
.side-nav .menu-group:nth-of-type(6).has-active .menu-title::before{
  background:#7f90a5;
}

.side-nav .menu-group:nth-of-type(7).has-active .menu-title{
  background:#f6e1e1;
  color:#5e3939;
}
.side-nav .menu-group:nth-of-type(7).has-active .menu-title::before{
  background:#b57979;
}

.side-nav .menu-group:nth-of-type(8).has-active .menu-title{
  background:#efe4f4;
  color:#5a3f63;
}
.side-nav .menu-group:nth-of-type(8).has-active .menu-title::before{
  background:#9c7aac;
}

/* Opción activa más intensa */
.side-nav a.active,
.side-nav a[aria-current="page"]{
  background:linear-gradient(135deg, #dce9f7, #edf4fb);
  color:#203854;
  border:1px solid #b8cfe8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 22px rgba(84,111,145,.12);
  font-weight:680;
  transform:translateX(2px);
}

/* Línea de opción activa */
.side-nav a.active::after,
.side-nav a[aria-current="page"]::after{
  content:"";
  width:4px;
  height:22px;
  border-radius:999px;
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:#6f93bd;
  opacity:.88;
}

/* Punto activo más visible */
.side-nav a.active::before,
.side-nav a[aria-current="page"]::before{
  background:#5f86b3;
  box-shadow:
    0 0 0 4px #e7ecf3,
    0 0 0 8px rgba(95,134,179,.16);
}

/* Hover refinado cuando NO está activo */
.side-nav a:not(.active):hover{
  background:rgba(255,255,255,.55);
  color:#26384f;
  border-color:rgba(194,207,222,.7);
}

/* Encabezado de sección activo con icono más presente */
.menu-group.has-active .menu-title span::before{
  transform:scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 18px rgba(70,90,120,.10);
}

/* Submenú más ordenado y respirado */
.menu-group.has-active .menu-items{
  border-left-color:#b9cadc;
}

.menu-items{
  gap:4px;
}

.menu-items a{
  border:1px solid transparent;
}

/* Evita que el sidebar salte visualmente al recargar */
.sidebar.sidebar-restored{
  scroll-behavior:auto;
}

/* Mini separador visual entre grupos */
.menu-group + .menu-group{
  margin-top:12px;
}

/* En mobile, no forzamos sidebar fijo */
@media(max-width:980px){
  .sidebar{
    position:relative;
    height:auto;
    min-height:auto;
    max-height:none;
    overflow:visible;
  }
}


/* ============================================================
   SIGEDU - Botones compactos en páginas operativas v1
   Reduce botones largos sin afectar todo el sistema.
   La clase se activa desde public/js/sigedu-ui.js según la URL.
   ============================================================ */

body.page-compact-buttons .content .toolbar .actions{
  gap:7px;
}

body.page-compact-buttons .content .toolbar .actions .btn,
body.page-compact-buttons .content .toolbar .actions button,
body.page-compact-buttons .content .panel .actions .btn,
body.page-compact-buttons .content .panel .actions button,
body.page-compact-buttons .content table .btn,
body.page-compact-buttons .content table button{
  min-height:34px;
  border-radius:11px;
  padding:7px 10px;
  font-size:12.5px;
  line-height:1.15;
  gap:5px;
  box-shadow:0 7px 15px rgba(110,130,160,.10);
  white-space:nowrap;
}

body.page-compact-buttons .content .toolbar .actions .btn:hover,
body.page-compact-buttons .content .toolbar .actions button:hover,
body.page-compact-buttons .content .panel .actions .btn:hover,
body.page-compact-buttons .content .panel .actions button:hover,
body.page-compact-buttons .content table .btn:hover,
body.page-compact-buttons .content table button:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 18px rgba(110,130,160,.12);
}

/* Botones dentro de tarjetas/módulos largos */
body.page-compact-buttons .content .module-card{
  min-height:auto;
  padding:14px 15px;
  border-radius:18px;
}

body.page-compact-buttons .content .module-card strong{
  font-size:15.5px;
}

body.page-compact-buttons .content .module-card span{
  margin-top:5px;
  font-size:12.5px;
}

/* En tablas, que los botones no ensanchen tanto las columnas */
body.page-compact-buttons .content td .actions{
  gap:6px;
}

body.page-compact-buttons .content td .btn,
body.page-compact-buttons .content td button{
  margin:2px 2px 2px 0;
}

/* Botones de peligro o acciones secundarias más contenidos */
body.page-compact-buttons .content .btn.danger,
body.page-compact-buttons .content .btn-danger,
body.page-compact-buttons .content .btn.warning,
body.page-compact-buttons .content .btn-warning,
body.page-compact-buttons .content .btn.muted,
body.page-compact-buttons .content .btn-muted{
  padding-left:9px;
  padding-right:9px;
}

/* En pantallas móviles conservamos ancho completo para usabilidad táctil */
@media(max-width:720px){
  body.page-compact-buttons .content .toolbar .actions .btn,
  body.page-compact-buttons .content .toolbar .actions button,
  body.page-compact-buttons .content .panel .actions .btn,
  body.page-compact-buttons .content .panel .actions button{
    min-height:42px;
    width:100%;
    font-size:14px;
    padding:10px 14px;
  }

  body.page-compact-buttons .content table .btn,
  body.page-compact-buttons .content table button{
    width:auto;
    min-height:36px;
    font-size:12.5px;
    padding:7px 10px;
  }
}


/* ============================================================
   SIGEDU - Familias botones 3 columnas v1
   Ajuste específico para /familias/index.php
   ============================================================ */

body.page-familias-actions-grid .familias-actions-compact-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  width:100%;
  margin-top:14px;
  align-items:stretch;
}

body.page-familias-actions-grid .familias-actions-compact-grid .btn,
body.page-familias-actions-grid .familias-actions-compact-grid button,
body.page-familias-actions-grid .familias-actions-compact-grid a{
  width:100%;
  min-height:38px;
  border-radius:13px;
  padding:8px 11px;
  font-size:13px;
  line-height:1.15;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(100,120,150,.12);
}

body.page-familias-actions-grid .familias-actions-compact-grid .btn:hover,
body.page-familias-actions-grid .familias-actions-compact-grid button:hover,
body.page-familias-actions-grid .familias-actions-compact-grid a:hover{
  transform:translateY(-1px);
}

body.page-familias-actions-grid .familias-actions-source-empty:empty{
  display:none!important;
}

/* En caso de que el buscador tenga un grid interno con columnas muy anchas */
body.page-familias-actions-grid .familias-search-panel form > .grid{
  grid-template-columns:1fr!important;
}

@media(max-width:720px){
  body.page-familias-actions-grid .familias-actions-compact-grid{
    grid-template-columns:1fr;
  }

  body.page-familias-actions-grid .familias-actions-compact-grid .btn,
  body.page-familias-actions-grid .familias-actions-compact-grid button,
  body.page-familias-actions-grid .familias-actions-compact-grid a{
    min-height:42px;
    font-size:14px;
  }
}