/* Red de partículas global de El Profe Que Aprende.
 * Lienzo transparente colocado dentro de main, por encima del fondo opaco
 * pero por detrás de las tarjetas, menús y textos. Modo claro y oscuro. */
body.stem-playground.epqa-network-active .site-main {
  position:relative;
  isolation:isolate;
}
body.stem-playground.epqa-network-active .site-main > .epqa-network-canvas {
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100vw;
  height:100vh;
  max-width:none;
  background:transparent!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  contain:strict;
}
/* Elevar el contenido normal, sin alterar ventanas modales o diálogos. */
body.stem-playground.epqa-network-active .site-main > :is(
  .container, .home-stem, .resources-page, .epqa-creations, .epqa-detail,
  .epqa-legal-2026, section:not([class*="modal"]), article,
  div:not([class*="modal"]):not(.resources-particles):not(.epqa-network-canvas):not(.toast-container)
) {
  position:relative;
  z-index:1;
}
/* No duplicar la capa antigua del catálogo: el mismo motor funciona en todo el sitio. */
body.stem-playground.epqa-network-active.page-recursos .resources-particles {
  display:none!important;
}
/* La portada conserva particles.js cuando está disponible. Si no carga desde CDN,
 * se recurre al renderizador local dentro de #home-particles. */
body.stem-playground.epqa-network-active.page-home #home-particles > .epqa-network-canvas {
  position:absolute!important;inset:0!important;z-index:0!important;
  display:block!important;pointer-events:none!important;
  width:100%;height:100%;
}
body.stem-playground.epqa-network-active .site-header {
  position:relative;
  z-index:1050;
}
body.stem-playground.epqa-network-active .site-footer {
  position:relative;
  z-index:1;
}
@media(prefers-reduced-motion:reduce) {
  body.stem-playground.epqa-network-active .epqa-network-canvas {
    /* Red de puntos estática, sin animación, por accesibilidad. */
    animation:none!important;
  }
}

/* 20/10/2026 · Cuadrícula uniforme como papel de cuaderno: todos los modos,
 * todas las rutas. Se dibuja en CSS (costo gráfico constante) sin tapar
 * los fondos existentes ni bloquear interacciones. */
body.stem-playground .site-main {
  --epqa-paper-grid-line:rgba(26,112,209,.087);
  position:relative;
  isolation:isolate;
}
html[data-theme="dark"] body.stem-playground .site-main{
  --epqa-paper-grid-line:rgba(152,188,230,.094);
}
body.stem-playground .site-main::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to bottom,var(--epqa-paper-grid-line) 1px,transparent 1px),
    linear-gradient(to right,var(--epqa-paper-grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  background-position:0 0;
  background-repeat:repeat;
}
/* En el panel, .home-stem y .home-stem-shell tenían fondos opacos y una
 * segunda cuadrícula limitada al rectángulo central.
 * Extender el papel a toda el área, con una sola cuadrícula. */
body.page-dashboard.stem-playground .home-stem--dashboard{
  position:relative;isolation:isolate;
}
body.page-dashboard.stem-playground .home-stem--dashboard::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to bottom,var(--epqa-paper-grid-line) 1px,transparent 1px),
    linear-gradient(to right,var(--epqa-paper-grid-line) 1px,transparent 1px);
  background-size:34px 34px;background-repeat:repeat;
}
body.page-dashboard.stem-playground .home-stem--dashboard .home-stem-shell{
  position:relative;z-index:1;
  background:rgba(244,249,255,.30)!important;
}
html[data-theme="dark"] body.page-dashboard.stem-playground .home-stem--dashboard .home-stem-shell{
  background:rgba(45,58,80,.32)!important;
}
body.page-dashboard.stem-playground .home-stem--dashboard .home-stem-shell::before{
  content:none!important;display:none!important;
}
/* Partículas del panel: entre la cuadrícula estática y sus tarjetas.
 * Se crean dentro de .home-stem--dashboard para evitar fondos opacos. */
body.page-dashboard.stem-playground.epqa-network-active
  .home-stem--dashboard > .epqa-network-canvas{
  position:absolute!important;inset:0!important;z-index:0!important;
  display:block!important;width:100%;height:100%;
  background:transparent!important;pointer-events:none!important;
}
/* Las partículas no interrumpen títulos, tarjetas ni controles. */
body.page-dashboard.stem-playground.epqa-network-active
  .home-stem--dashboard > .home-stem-shell{
  position:relative;z-index:1;
}