/* ═══════════════════════════════════════════════════════════════════════
   Aula de juegos — CAPA GLOBAL (todos los roles: admin, gobernante,
   director, alumno + login + mapa). Carga tras main.css y aula-juegos.css.
   Scope: body.app-aula (se añade al entrar / al cargar).

   Estrategia de bajo riesgo: el app ya tiene un tema claro funcional
   ([data-theme="light"]); aquí (1) re-tematizo las variables globales a la
   paleta Aula (adiós magenta) para que los componentes var()-based se adapten
   solos, y (2) añado la geometría lúdica (Fredoka, marco morado, redondeos,
   sombras duras) a los componentes compartidos.
   El rol maestro conserva sus componentes .aj-* propios (aula-juegos.css).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Marco (los TOKENS viven ahora en main.css :root / [data-theme="dark"],
      consolidados 2026-07-05; aquí solo queda el marco morado y la fuente) ── */
body.app-aula{
  font-family:'Fredoka',sans-serif;
  background:#4F2D8F;
}
html[data-theme="dark"] body.app-aula{
  background:#191031;
}
body.app-aula h1, body.app-aula h2, body.app-aula h3, body.app-aula h4{ font-family:'Fredoka',sans-serif; }

/* ── 2. Marco: header morado + hoja de contenido ───────────────────────── */
body.app-aula .topnav{
  background:#4F2D8F; border-bottom:none;
  box-shadow:0 4px 20px rgba(46,26,82,.35);
  height:auto; min-height:60px; padding:10px 24px;
}
html[data-theme="dark"] body.app-aula .topnav{ background:#150D28; box-shadow:0 4px 20px rgba(0,0,0,.5); }
body.app-aula .topnav .logo-sub{ color:#C9B6F2; }
/* El topnav es morado oscuro en AMBOS temas: el acento del wordmark ("Tianguistenco")
   necesita la variante clara para AA (pasada de contraste 2026-07-07) */
body.app-aula .topnav .logo span{ color:#C9B6F2; }
body.app-aula .bc, body.app-aula .bc span{ color:#DCD2F5; }
body.app-aula .ctn{
  background:var(--bg); border-radius:28px 28px 0 0;
  max-width:1440px; min-height:calc(100vh - 80px);
}
/* Nav de píldoras por rol (mismo look que las del maestro) */
body.app-aula .sec-tabs{ display:flex; align-items:center; gap:8px; }
body.app-aula .sec-tab{
  border:none; border-bottom:none; border-radius:999px;
  background:rgba(255,255,255,.12); color:#DCD2F5;
  font-family:'Fredoka',sans-serif; font-size:14px; font-weight:600; line-height:1; padding:9px 16px;
  cursor:pointer; white-space:nowrap;
  transition:transform .12s, box-shadow .12s, background .12s, color .12s;
}
body.app-aula .sec-tab:hover{ color:#fff; transform:translateY(-1px); }
body.app-aula .sec-tab.on{
  background:#FFC531; color:#3A2760;
  box-shadow:0 3px 0 #C79310; font-weight:600;
}
body.app-aula .sec-tab.on:active{ transform:translateY(2px); box-shadow:0 1px 0 #C79310; }
/* Admin "Ver como": separador + píldoras de conmutación de vista */
body.app-aula .role-nav-sep{
  color:#C9B6F2; font-family:'Fredoka',sans-serif; font-size:12px; font-weight:600;
  margin:0 2px 0 8px; white-space:nowrap; align-self:center;
}
body.app-aula .sec-tab.viewas{
  background:transparent; border:2px dashed rgba(255,255,255,.4); color:#DCD2F5;
  padding:7px 14px;
}
body.app-aula .sec-tab.viewas:hover{ border-color:#FFC531; color:#fff; }
/* Botón flotante para volver a la vista de admin (sobrevive al modo kiosco del alumno) */
#adminReturnBtn{
  position:fixed; bottom:20px; left:20px; z-index:1000;
  background:#FFC531; color:#3A2760; border:none; border-radius:999px;
  box-shadow:0 4px 0 #C79310, 0 8px 24px rgba(0,0,0,.35);
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px;
  padding:11px 20px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
#adminReturnBtn:hover{ transform:translateY(-2px); }
#adminReturnBtn:active{ transform:translateY(2px); box-shadow:0 1px 0 #C79310, 0 4px 12px rgba(0,0,0,.3); }

/* En móvil, #secTabs (maestro) pasa al bottom-nav; #roleTabs (otros roles) no tiene
   alternativa móvil → el header se parte en dos filas: arriba logo/controles,
   abajo las píldoras a todo lo ancho con scroll horizontal. */
@media(max-width:768px){
  body.app-aula .topnav{ flex-wrap:wrap; row-gap:8px; }
  body.app-aula #roleTabs{
    order:10; flex-basis:100%; max-width:100%;
    overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
  }
  body.app-aula #roleTabs::-webkit-scrollbar{ display:none; }
  body.app-aula #roleTabs .sec-tab{ flex-shrink:0; }
  body.app-aula .bc{ display:none; }        /* el breadcrumb cede el espacio; el título de página da contexto */
  body.app-aula .ctn{ border-radius:0; }    /* hoja a sangre completa en teléfono */
  body.app-aula .v8-overlay.active{ border-radius:0; }
}
/* Botones de la barra derecha como píldoras */
body.app-aula .rbtn{
  border:none; background:rgba(255,255,255,.12); color:#DCD2F5;
  border-radius:999px; font-family:'Fredoka',sans-serif; font-weight:600; padding:8px 15px;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
body.app-aula .rbtn:hover{ background:rgba(255,255,255,.22); color:#fff; transform:translateY(-1px); }
body.app-aula .nbadge{ border-radius:999px; }

/* ── 3. Tarjetas y superficies: redondeo + sombra dura ─────────────────── */
body.app-aula .card,
body.app-aula .gc{
  border-radius:20px; border:1px solid var(--border);
  box-shadow:0 4px 0 var(--bar-bg);
}
body.app-aula .gc:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--bar-bg); }
body.app-aula .stat{ border-radius:16px; border:1px solid var(--border); box-shadow:0 4px 0 var(--bar-bg); }
body.app-aula .stat-action{ cursor:pointer; transition:transform .12s ease; }
body.app-aula .stat-action:hover{ transform:translateY(-2px); }
body.app-aula .ins{
  background:var(--ppale); border:1px solid var(--border);
  border-radius:16px; color:var(--text);
}
body.app-aula .chat-box{ border-radius:20px; border:1px solid var(--border); }
body.app-aula .search{ border-radius:999px; border:2px solid var(--border); background:var(--card); }

/* ── 4. Botones ────────────────────────────────────────────────────────── */
body.app-aula .enter-btn{
  background:var(--primary); color:#fff; border:none; border-radius:999px;
  box-shadow:0 4px 0 #4A3480; font-family:'Fredoka',sans-serif; font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease;
}
body.app-aula .enter-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #4A3480; }
body.app-aula .bk{ color:var(--primary); background:transparent; border-radius:999px; font-family:'Fredoka',sans-serif; font-weight:600; }
/* Pasada AA en tema oscuro (2026-07-07): el morado de acento (#8A63E8) no alcanza
   4.5:1 ni como texto sobre superficies oscuras ni bajo texto blanco de botón. */
html[data-theme="dark"] body.app-aula .bk{ color:var(--plight); }
html[data-theme="dark"] body.app-aula .enter-btn{ background:#7A50E0; }
html[data-theme="dark"] body.app-aula .fbtn.on{ background:#7A50E0; border-color:#7A50E0; }
/* Los h4 de reportes traen color:var(--accent) inline → hace falta !important */
html[data-theme="dark"] body.app-aula #rep-doc h4{ color:var(--plight)!important; }
body.app-aula .fil{ gap:6px; }
body.app-aula .fbtn{ border-radius:999px; font-family:'Fredoka',sans-serif; font-weight:600; }
body.app-aula .fbtn.on{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ── 5. Tags / tablas ──────────────────────────────────────────────────── */
body.app-aula .tag{ border-radius:999px; font-weight:600; }
body.app-aula .stt{ font-family:'Fredoka',sans-serif; }

/* ── 6. Pantalla de login / selección de rol ───────────────────────────── */
body.app-aula .role-screen{ background:#4F2D8F; font-family:'Fredoka',sans-serif; }
html[data-theme="dark"] body.app-aula .role-screen{ background:#191031; }
/* Centrado seguro en pantallas bajas (laptop con zoom): si el contenido no cabe,
   el flex centrado recorta arriba/abajo sin scroll. margin:auto + overflow lo evita. */
body.app-aula .role-screen{ overflow-y:auto; }
body.app-aula .role-container{ margin:auto; }
body.app-aula .role-card{
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.14);
  border-radius:22px; box-shadow:0 6px 0 rgba(0,0,0,.18);
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
body.app-aula .role-card:hover{ transform:translateY(-3px); border-color:#FFC531; }
body.app-aula .role-card.selected{ background:rgba(255,197,49,.15); border-color:#FFC531; box-shadow:0 6px 0 #C79310; }
body.app-aula .role-login input{ border-radius:14px; font-family:'Fredoka',sans-serif; }
body.app-aula .role-login input:focus{ border-color:#FFC531; }
body.app-aula .role-enter{
  background:#FFC531; color:#3A2760; border:none; border-radius:999px;
  box-shadow:0 4px 0 #C79310; font-family:'Fredoka',sans-serif; font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease;
}
body.app-aula .role-enter:active{ transform:translateY(3px); box-shadow:0 1px 0 #C79310; }

/* ── 6d. Fondos oscuros hardcodeados de la paleta vieja ────────────────────
   Varias superficies traían degradados fijos (azul-noche/verde #0d2a24) que
   ignoran el tema y chocan con el morado. Se pasan a tokens del tema para
   que funcionen en claro y oscuro. */
body.app-aula .parent-wrap{ background:var(--bg); }
body.app-aula .parent-msg{
  background:var(--bbg); border:1px solid var(--border);
  color:#2E5CB8; border-radius:14px;
}
html[data-theme="dark"] body.app-aula .parent-msg{ color:#7BA9F5; }
body.app-aula .obs-card{
  background:var(--bbg); border:1px solid var(--border);
  color:#2E5CB8; border-radius:14px;
}
html[data-theme="dark"] body.app-aula .obs-card{ color:#7BA9F5; }
body.app-aula .plan-result{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
}
body.app-aula .gami-bar{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
}

/* ── 6c. Tarjeta cabecera del mapa (Municipio/Sector/Zona) ─────────────────
   Traía gradiente accent→#d4a017 (dorado fijo, de la paleta vieja) + texto
   casi negro, pensado para un accent amarillo brillante. Con el accent nuevo
   (morado) el gradiente queda lavado y el contraste se degrada. */
body.app-aula .map-header-card{
  background:linear-gradient(135deg,var(--primary),var(--plight));
  color:#fff; border-radius:20px; box-shadow:0 4px 0 var(--bar-bg);
}
body.app-aula .map-header-card h2{ font-family:'Fredoka',sans-serif; color:#fff; }
body.app-aula .map-header-card p{ color:#fff; opacity:.85; }

/* ── 7. Mapa (OpenLayers): controles en morado, contenedor redondeado ──── */
body.app-aula .map-container{ border-radius:20px; border:1px solid var(--border); }
body.app-aula #olMap .ol-control button{ background:var(--primary); color:#fff; border-radius:8px; }
body.app-aula #olMap .ol-control button:hover{ background:var(--pmid); }
body.app-aula .ol-popup{ border-radius:14px; }

/* ── 7b. SIN POP-UPS — overlays integrados como páginas (todos los roles) ─
   Al abrir un .v8-overlay la app pone body.v8-open. Ocultamos la página .ctn
   y sacamos el overlay del modo "fixed" para que fluya bajo el header sticky
   (que sigue visible), como una página más. Mismo patrón que el maestro. */
body.app-aula.v8-open .ctn{ display:none; }
body.app-aula .v8-overlay.active{
  position:static; inset:auto; z-index:auto;
  background:var(--bg);
  border-radius:28px 28px 0 0;
  max-width:1440px; margin:0 auto;
  min-height:calc(100vh - 80px);
  overflow:visible;
}
body.app-aula .v8-overlay.active .v8-close{ top:12px; }
body.app-aula .v8-overlay.active .v8-ctn{ max-width:1280px; }
/* El wizard de planeación (#v8-planeacion) define su propio tema cálido interno
   (bloque CSS de planeacion-wizard.js); para roles no-maestro también hay que
   re-tematizarlo (aula-juegos.css ya cubre el caso role-maestro). */
body.app-aula #v8-planeacion{
  --bg:#F6F3FC; --card:#FFFFFF; --card-hover:#F0EAFB; --bar-bg:#EDE7F8;
  --border:#E4DCF2; --ppale:#F0EAFB;
  --primary:#6B4FB0; --pmid:#8A63E8; --accent:#6B4FB0; --accent-light:#EDE7F8;
  --text:#3A2760; --tl:#5A4A7A; --tll:#9C8FBB;
  --green:#2CB463; --gbg:#DBF3E1; --red:#E06A45; --rbg:#FDEBE3;
  --yellow:#DF9520; --ybg:#FFF0D6; --blue:#5B8DEF; --bbg:#E3EDFF;
  font-family:'Fredoka',sans-serif;
}
html[data-theme="dark"] body.app-aula #v8-planeacion{
  --bg:#211836; --card:#2C2248; --card-hover:#332750; --bar-bg:#3A2E58;
  --border:#3F3162; --ppale:#332750;
  --primary:#8A63E8; --pmid:#A98BF0; --accent:#8A63E8; --accent-light:#332750;
  --text:#F1ECFA; --tl:#CFC3E8; --tll:#A093C2;
  --green:#3ED97F; --gbg:#1E3A2A; --red:#F0855E; --rbg:#3A241E;
  --yellow:#F0B450; --ybg:#3A2C18; --blue:#7BA9F5; --bbg:#1E2A45;
}

/* ── 6b. Login "entrar como alumno" (.login-*, distinto de .role-screen) ──
   Traía un degradado oscuro hardcodeado (no var-based) que se quedaba oscuro
   sin importar el tema, y un botón con dorado fijo mezclado con el morado. */
body.app-aula .login-wrap{ background:#4F2D8F; }
html[data-theme="dark"] body.app-aula .login-wrap{ background:#191031; }
/* #pg-login se muestra con display:flex (inline); su hijo .login-wrap debe
   llenar el contenedor fijo para que su propio centrado funcione — si no,
   la tarjeta queda pegada a la izquierda. Con scroll si no cabe a lo alto. */
body.app-aula #pg-login{ overflow-y:auto; }
body.app-aula #pg-login .login-wrap{ width:100%; min-height:100%; }
body.app-aula .login-card{
  border-radius:22px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  font-family:'Fredoka',sans-serif;
}
body.app-aula .login-logo h2{ font-family:'Fredoka',sans-serif; color:var(--primary); }
body.app-aula .login-field select,
body.app-aula .login-field input{ border-radius:12px; font-family:'Fredoka',sans-serif; }
body.app-aula .login-field select:focus,
body.app-aula .login-field input:focus{ border-color:var(--primary); }
body.app-aula .login-btn{
  background:var(--primary); color:#fff; border-radius:999px;
  box-shadow:0 4px 0 #4A3480; font-family:'Fredoka',sans-serif; font-weight:600;
  transition:transform .12s ease, box-shadow .12s ease;
}
body.app-aula .login-btn:hover{ transform:none; box-shadow:0 4px 0 #4A3480; }
body.app-aula .login-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #4A3480; }

/* ── 7c. LMS del alumno: una sola navegación ───────────────────────────────
   La barra horizontal de pestañas duplicaba el menú lateral (que ya cubre
   todas las secciones, incluido Talleres). Se oculta; sus botones siguen en
   el DOM porque sidebarTab/switchLmsPanel los usan como proxy. */
body.app-aula .lms-ctabs{ display:none; }

/* ── 7d. Accesibilidad × piel nueva ────────────────────────────────────────
   acc-contrast (main.css §497) fuerza tarjetas #111 — correcto en el tema
   oscuro viejo, ilegible en el claro nuevo (texto morado oscuro sobre negro).
   Con mayor especificidad, las tarjetas usan los tokens del tema activo y el
   contraste lo aporta el filter global + bordes reforzados. */
body.app-aula.acc-contrast .card,
body.app-aula.acc-contrast .gc{
  background:var(--card)!important;
  border:2px solid var(--text)!important;
}
body.app-aula.acc-contrast .stat,
body.app-aula.acc-contrast .aj-card,
body.app-aula.acc-contrast .aj-mission,
body.app-aula.acc-contrast .aj-crit,
body.app-aula.acc-contrast .aj-kid,
body.app-aula.acc-contrast .aj-apoyo{
  border:2px solid var(--text)!important;
}
/* Las píldoras inactivas (translúcidas sobre morado) ganan borde en contraste */
body.app-aula.acc-contrast .sec-tab:not(.on),
body.app-aula.acc-contrast .rbtn{ border:2px solid rgba(255,255,255,.85); }

/* ── 8. Foco visible coherente ─────────────────────────────────────────── */
body.app-aula .enter-btn:focus-visible,
body.app-aula .rbtn:focus-visible,
body.app-aula .role-card:focus-visible,
body.app-aula .role-enter:focus-visible{ outline:3px solid #FFB648; outline-offset:2px; }