/* PEM Excellence Academy — Shell compartido (sidebar + header)
   El sidebar y el header usan la paleta ejecutiva (--pem-x-*), la MISMA que usan
   Dashboard Ejecutivo y las demás páginas "premium" — y, como esas páginas, ahora
   SÍ responde al toggle claro/oscuro del sitio (html[data-theme="dark"] abajo),
   para que todo el sitio sea consistente en cualquiera de los dos modos.
   El resto del chrome (.pem-card/.pem-progress/.pem-btn) sigue usando la paleta
   de cada página (--bg/--surface/--surface-2/--line/--text/--muted/--green/etc). */

:root{
  --pem-sb-w: 248px;
  --pem-hd-h: 60px;

  --pem-x-bg:#F5F6F3; --pem-x-panel:#FFFFFF; --pem-x-ink:#15201D;
  --pem-x-muted:#68736F; --pem-x-line:#E3E7E3;
  --pem-x-green:#087F5B; --pem-x-green2:#19A974; --pem-x-mint:#DFF3EA;
  --pem-x-hover:#EEF0EE;
  --pem-x-shadow:2px 0 16px rgba(24,39,33,.05);
}
html[data-theme="dark"]{
  --pem-x-bg:#070B0A; --pem-x-panel:#0D1311; --pem-x-ink:#FFFFFF;
  --pem-x-muted:#AAB5AF; --pem-x-line:#24302B;
  --pem-x-green:#22E88A; --pem-x-green2:#3FF29B; --pem-x-mint:#0F3324;
  --pem-x-hover:#141B18;
  --pem-x-shadow:2px 0 16px rgba(0,0,0,.4);
}

.pem-sidebar{
  position:fixed; top:0; left:0; height:100vh; width:var(--pem-sb-w);
  background:var(--pem-x-panel); border-right:1px solid var(--pem-x-line);
  box-shadow:var(--pem-x-shadow);
  display:flex; flex-direction:column; z-index:9000;
  transition:transform .25s ease;
}
.pem-sidebar-brand{padding:22px 20px 18px; border-bottom:1px solid var(--pem-x-line);}
.pem-sidebar-brand .k{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pem-x-green); font-weight:800;}
.pem-sidebar-brand .t{font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:800; color:var(--pem-x-ink); margin-top:3px; line-height:1.2;}

.pem-nav{flex:1; overflow-y:auto; padding:14px 10px;}
.pem-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:8px;
  color:var(--pem-x-muted); text-decoration:none; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  margin-bottom:2px; transition:.12s;
}
.pem-nav a svg{flex-shrink:0; opacity:.85;}
.pem-nav a:hover{background:var(--pem-x-hover); color:var(--pem-x-ink);}
.pem-nav a.active{background:var(--pem-x-mint); color:var(--pem-x-green); box-shadow:inset 3px 0 0 var(--pem-x-green);}
.pem-nav a.soon{cursor:pointer;}
.pem-nav a.soon .badge{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.04em;
  color:var(--pem-x-muted); border:1px solid var(--pem-x-line); border-radius:20px; padding:2px 7px; text-transform:uppercase;
}

.pem-sidebar-foot{padding:14px 20px 18px; border-top:1px solid var(--pem-x-line);}
.pem-sidebar-foot .doc{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--pem-x-muted); line-height:1.6;}

.pem-header{
  position:fixed; top:0; left:var(--pem-sb-w); right:0; height:var(--pem-hd-h);
  background:var(--pem-x-panel); border-bottom:1px solid var(--pem-x-line);
  display:flex; align-items:center; gap:14px; padding:0 24px; z-index:8000;
}
.pem-header .burger{display:none; background:none; border:1px solid var(--pem-x-line); border-radius:7px; width:34px; height:34px; color:var(--pem-x-ink); cursor:pointer; align-items:center; justify-content:center;}
.pem-header .back-module{display:flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--pem-x-ink); text-decoration:none; border:1px solid var(--pem-x-line); border-radius:20px; padding:6px 12px 6px 8px; flex-shrink:0; white-space:nowrap;}
.pem-header .back-module:hover{border-color:var(--pem-x-green); color:var(--pem-x-green);}
.pem-header .back-module svg{flex-shrink:0;}
.pem-header .crumb{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--pem-x-muted); letter-spacing:.02em;}
.pem-header .crumb b{color:var(--pem-x-ink); font-weight:700;}
.pem-header .theme-toggle{margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--pem-x-line); background:var(--pem-x-panel); color:var(--pem-x-ink); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:.15s; flex-shrink:0;}
.pem-header .theme-toggle:hover{border-color:var(--pem-x-green);}

.pem-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:8900;}

/* Empuja el contenido existente de cada página para dejar sitio al sidebar+header fijos.
   !important es necesario porque cada página ya declara su propio padding en body. */
body{padding-left:var(--pem-sb-w) !important; padding-top:var(--pem-hd-h) !important;}

@media(max-width:900px){
  .pem-sidebar{transform:translateX(-100%);}
  .pem-sidebar.open{transform:translateX(0);}
  .pem-header{left:0;}
  .pem-header .burger{display:inline-flex;}
  .pem-header .back-module span{display:none;}
  .pem-header .back-module{padding:6px;border-radius:50%;width:32px;height:32px;justify-content:center;}
  .pem-header .crumb{display:none;}
  .pem-overlay.open{display:block;}
  body{padding-left:0 !important;}
}

@media print{
  .pem-sidebar,.pem-header,.pem-overlay{display:none !important;}
  body{padding-left:0 !important; padding-top:0 !important;}
}

/* ---- Componentes reutilizables para el nuevo Home y futuras páginas ---- */
.pem-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(28,26,22,.04),0 3px 12px rgba(28,26,22,.05);}
.pem-progress{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
.pem-progress > span{display:block; height:100%; border-radius:4px; background:var(--green);}
.pem-btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-weight:700; font-size:13.5px;
  padding:12px 20px; border-radius:8px; text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.pem-btn-primary{background:var(--green); color:#06140D;}
.pem-btn-ghost{background:transparent; border-color:var(--line); color:var(--text);}